Undo ok

src/components/OperationsList.vue

@@ -3,6 +3,7 @@
     <div
       class="mb-2 text-center"
       v-for="(op, i) in operations"
+      :style="{ transitionDelay: `${transDelay * (operations.length - i)}ms` }"
       :key="i">
       <div class="inline-block relative text-xl">
         <!-- OPERATION -->
@@ -55,11 +56,12 @@
 
 <script setup lang="ts">
 import {
+  getEmptyOperation,
   isOperationInvalid,
   isOperationResultValid,
   operate,
   operations,
-  pushEmptyOperation,
+  plaquettes,
 } from '@/algo'
 import { Operation } from '@/types'
 import IconQuestion from '~icons/bx/bx-question-mark'
@@ -68,12 +70,31 @@ import IconUndo from '~icons/bx/bx-undo'
 
 import NumberBox from './common/NumberBox.vue'
 
+const transDelay = 100
+
 function canOperationBeDeleted(op: Operation): boolean {
   return !!op.left || !!op.right || !!op.operator
 }
 
 function undoOperation(index: number): void {
-  while (operations.length > index) operations.pop()
-  if (!operations.length) pushEmptyOperation()
+  const l = operations.length
+  for (let i = operations.length - 1; i >= index; --i) {
+    console.log(i)
+    let popped: Operation
+    if (i === index) {
+      popped = operations[index]
+      setTimeout(() => {
+        operations[index] = getEmptyOperation()
+      }, transDelay * l)
+    }
+    else {
+      popped = operations.pop()!
+    }
+    if (popped?.left) popped.left.free = true
+    if (popped?.right) popped.right.free = true
+    if (popped.result) {
+      plaquettes.value = plaquettes.value.filter(p => p !== popped.result)
+    }
+  }
 }
 </script>