UI, WIP undo

2022-02-10 22:32:41 +01:00 · 2022-02-10 22:32:41 +01:00 · e552421547
commit e552421547
parent f6014aa695
10 changed files with 221 additions and 130 deletions
--- a/package.json
+++ b/package.json
@ -11,11 +11,11 @@
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
  },
  "dependencies": {
-    "unplugin-icons": "^0.13.1",
    "vue": "^3.2.29",
    "vue-router": "^4.0.12"
  },
  "devDependencies": {
+    "@iconify-json/bx": "^1.0.3",
    "@iconify-json/ph": "^1.0.4",
    "@rushstack/eslint-patch": "^1.1.0",
    "@types/node": "^16.11.21",
@ -40,6 +40,7 @@
    "prettier-eslint": "^13.0.0",
    "tailwindcss": "^3.0.18",
    "typescript": "~4.5.5",
+    "unplugin-icons": "^0.13.1",
    "vite": "^2.7.13",
    "vitest": "^0.1.27",
    "vue-tsc": "^0.29.8"
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -1,6 +1,7 @@
 lockfileVersion: 5.3

 specifiers:
+  '@iconify-json/bx': ^1.0.3
  '@iconify-json/ph': ^1.0.4
  '@rushstack/eslint-patch': ^1.1.0
  '@types/node': ^16.11.21
@ -33,11 +34,11 @@ specifiers:
  vue-tsc: ^0.29.8

 dependencies:
-  unplugin-icons: 0.13.1_vite@2.7.13
  vue: 3.2.29
  vue-router: 4.0.12_vue@3.2.29

 devDependencies:
+  '@iconify-json/bx': 1.0.3
  '@iconify-json/ph': 1.0.4
  '@rushstack/eslint-patch': 1.1.0
  '@types/node': 16.11.21
@ -62,6 +63,7 @@ devDependencies:
  prettier-eslint: 13.0.0
  tailwindcss: 3.0.18_c809a12ee1edb5bee15394ec3fa4bff6
  typescript: 4.5.5
+  unplugin-icons: 0.13.1_vite@2.7.13
  vite: 2.7.13
  vitest: 0.1.27_jsdom@19.0.0
  vue-tsc: 0.29.8_typescript@4.5.5
@ -73,17 +75,17 @@ packages:
    dependencies:
      execa: 5.1.1
      find-up: 5.0.0
-    dev: false
+    dev: true

  /@antfu/utils/0.3.0:
    resolution: {integrity: sha512-UU8TLr/EoXdg7OjMp0h9oDoIAVr+Z/oW9cpOxQQyrsz6Qzd2ms/1CdWx8fl2OQdFpxGmq5Vc4TwfLHId6nAZjA==}
    dependencies:
      '@types/throttle-debounce': 2.1.0
-    dev: false
+    dev: true

  /@antfu/utils/0.5.0:
    resolution: {integrity: sha512-MrAQ/MrPSxbh1bBrmwJjORfJymw4IqSHFBXqvxaga3ZdDM+/zokYF8DjyJpSjY2QmpmgQrajDUBJOWrYeARfzA==}
-    dev: false
+    dev: true

  /@babel/code-frame/7.12.11:
    resolution: {integrity: sha512-Zt1yodBx1UcyiePMSkWnU4hPqhwq7hGi2nFL1LeA3EUl+q2LQx16MISgJ0+z7dnmgvP9QtIleuETGOiOH1RcIw==}
@ -166,6 +168,12 @@ packages:
    resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
    dev: true

+  /@iconify-json/bx/1.0.3:
+    resolution: {integrity: sha512-nwUxwOwocTp5u+KcBUraqEXiC7VG6niL6RQIdbLsRjZwouxayyVXPIkBPwMEmxpcTk1SA8Jh52MI+Scex1wJSA==}
+    dependencies:
+      '@iconify/types': 1.0.12
+    dev: true
+
  /@iconify-json/ph/1.0.4:
    resolution: {integrity: sha512-hcxC2k25/Lh/bgXgbwAD4WvnC8BeunSqafFwIOyL1dCu3QGBgKmPFIBUv4W2kBm+rbrv7F3WHPFBAJDVrjpunA==}
    dependencies:
@ -174,6 +182,7 @@ packages:

  /@iconify/types/1.0.12:
    resolution: {integrity: sha512-6er6wSGF3hgc1JEZqiGpg21CTCjHBYOUwqLmb2Idzkjiw6ogalGP0ZMLVutCzah+0WB4yP+Zd2oVPN8jvJ+Ftg==}
+    dev: true

  /@iconify/utils/1.0.23:
    resolution: {integrity: sha512-Ktdmpe4mkMXQAnnDUz3s6s5aY/BeVPwHC1d5IhG1bgrWVNWFQNUj8cQPMbHpNCSD9MRC5yGxm9/PGPpOWGJLAg==}
@ -186,7 +195,7 @@ packages:
      local-pkg: 0.4.1
    transitivePeerDependencies:
      - supports-color
-    dev: false
+    dev: true

  /@nodelib/fs.scandir/2.1.5:
    resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
@ -250,7 +259,7 @@ packages:

  /@types/throttle-debounce/2.1.0:
    resolution: {integrity: sha512-5eQEtSCoESnh2FsiLTxE121IiE60hnMqcb435fShf4bpLRjEu1Eoekht23y6zXS9Ts3l+Szu3TARnTsA0GkOkQ==}
-    dev: false
+    dev: true

  /@typescript-eslint/eslint-plugin/5.10.1_ae020354c3da76ce329e71c9084ef5bf:
    resolution: {integrity: sha512-xN3CYqFlyE/qOcy978/L0xLR2HlcAGIyIK5sMOasxaaAPfQRj/MmMV6OC3I7NZO84oEUdWCOju34Z9W8E0pFDQ==}
@ -1085,6 +1094,7 @@ packages:
      path-key: 3.1.1
      shebang-command: 2.0.0
      which: 2.0.2
+    dev: true

  /cssesc/3.0.0:
    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
@ -1142,6 +1152,7 @@ packages:
        optional: true
    dependencies:
      ms: 2.1.2
+    dev: true

  /decimal.js/10.3.1:
    resolution: {integrity: sha512-V0pfhfr8suzyPGOx3nmq4aHqabehUZn6Ch9kyFpV79TGDTWFmHqUqXdabR7QHqxzrYolF4+tVmJhUG4OURg5dQ==}
@ -1830,7 +1841,7 @@ packages:
      onetime: 5.1.2
      signal-exit: 3.0.7
      strip-final-newline: 2.0.0
-    dev: false
+    dev: true

  /fast-deep-equal/3.1.3:
    resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
@ -1892,7 +1903,7 @@ packages:
    dependencies:
      locate-path: 6.0.0
      path-exists: 4.0.0
-    dev: false
+    dev: true

  /flat-cache/3.0.4:
    resolution: {integrity: sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==}
@ -1950,7 +1961,7 @@ packages:
  /get-stream/6.0.1:
    resolution: {integrity: sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==}
    engines: {node: '>=10'}
-    dev: false
+    dev: true

  /get-symbol-description/1.0.0:
    resolution: {integrity: sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==}
@ -2092,7 +2103,7 @@ packages:
  /human-signals/2.1.0:
    resolution: {integrity: sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==}
    engines: {node: '>=10.17.0'}
-    dev: false
+    dev: true

  /iconv-lite/0.6.3:
    resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
@ -2256,7 +2267,7 @@ packages:
  /is-stream/2.0.1:
    resolution: {integrity: sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==}
    engines: {node: '>=8'}
-    dev: false
+    dev: true

  /is-string/1.0.7:
    resolution: {integrity: sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==}
@ -2284,6 +2295,7 @@ packages:

  /isexe/2.0.0:
    resolution: {integrity: sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=}
+    dev: true

  /js-stringify/1.0.2:
    resolution: {integrity: sha1-Fzb939lyTyijaCrcYjCufk6Weds=}
@ -2383,7 +2395,7 @@ packages:

  /kolorist/1.5.1:
    resolution: {integrity: sha512-lxpCM3HTvquGxKGzHeknB/sUjuVoUElLlfYnXZT73K8geR9jQbroGlSCFBax9/0mpGoD3kzcMLnOlGQPJJNyqQ==}
-    dev: false
+    dev: true

  /levn/0.3.0:
    resolution: {integrity: sha1-OwmSTt+fCDwEkP3UwLxEIeBHZO4=}
@ -2423,6 +2435,7 @@ packages:
  /local-pkg/0.4.1:
    resolution: {integrity: sha512-lL87ytIGP2FU5PWwNDo0w3WhIo2gopIAxPg9RxDYF7m4rr5ahuZxP22xnJHIvaLTe4Z9P6uKKY2UHiwyB4pcrw==}
    engines: {node: '>=14'}
+    dev: true

  /locate-path/2.0.0:
    resolution: {integrity: sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=}
@ -2437,7 +2450,7 @@ packages:
    engines: {node: '>=10'}
    dependencies:
      p-locate: 5.0.0
-    dev: false
+    dev: true

  /lodash.merge/4.6.2:
    resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
@ -2484,7 +2497,7 @@ packages:

  /merge-stream/2.0.0:
    resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
-    dev: false
+    dev: true

  /merge2/1.4.1:
    resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
@ -2514,7 +2527,7 @@ packages:
  /mimic-fn/2.1.0:
    resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
    engines: {node: '>=6'}
-    dev: false
+    dev: true

  /minimatch/3.0.4:
    resolution: {integrity: sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==}
@ -2532,6 +2545,7 @@ packages:

  /ms/2.1.2:
    resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
+    dev: true

  /ms/2.1.3:
    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
@ -2574,7 +2588,7 @@ packages:
    engines: {node: '>=8'}
    dependencies:
      path-key: 3.1.1
-    dev: false
+    dev: true

  /num2fraction/1.2.2:
    resolution: {integrity: sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=}
@ -2633,7 +2647,7 @@ packages:
    engines: {node: '>=6'}
    dependencies:
      mimic-fn: 2.1.0
-    dev: false
+    dev: true

  /optionator/0.8.3:
    resolution: {integrity: sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA==}
@ -2671,7 +2685,7 @@ packages:
    engines: {node: '>=10'}
    dependencies:
      yocto-queue: 0.1.0
-    dev: false
+    dev: true

  /p-locate/2.0.0:
    resolution: {integrity: sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=}
@ -2685,7 +2699,7 @@ packages:
    engines: {node: '>=10'}
    dependencies:
      p-limit: 3.1.0
-    dev: false
+    dev: true

  /p-try/1.0.0:
    resolution: {integrity: sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=}
@ -2728,7 +2742,7 @@ packages:
  /path-exists/4.0.0:
    resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
    engines: {node: '>=8'}
-    dev: false
+    dev: true

  /path-is-absolute/1.0.1:
    resolution: {integrity: sha1-F0uSaHNVNP+8es5r9TpanhtcX18=}
@ -2738,6 +2752,7 @@ packages:
  /path-key/3.1.1:
    resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
    engines: {node: '>=8'}
+    dev: true

  /path-parse/1.0.7:
    resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
@ -3111,10 +3126,12 @@ packages:
    engines: {node: '>=8'}
    dependencies:
      shebang-regex: 3.0.0
+    dev: true

  /shebang-regex/3.0.0:
    resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
    engines: {node: '>=8'}
+    dev: true

  /side-channel/1.0.4:
    resolution: {integrity: sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==}
@ -3126,7 +3143,7 @@ packages:

  /signal-exit/3.0.7:
    resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
-    dev: false
+    dev: true

  /slash/3.0.0:
    resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
@ -3225,7 +3242,7 @@ packages:
  /strip-final-newline/2.0.0:
    resolution: {integrity: sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==}
    engines: {node: '>=6'}
-    dev: false
+    dev: true

  /strip-json-comments/3.1.1:
    resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
@ -3464,7 +3481,7 @@ packages:
      - supports-color
      - vite
      - webpack
-    dev: false
+    dev: true

  /unplugin/0.3.2_vite@2.7.13:
    resolution: {integrity: sha512-5d0DMYNKZU+S9eZUiBfw6Co32eRg8myUgBPoWSqG/wDFCUE/WznfSsJnZWi1P9l69x4uLJqt2qVq1xW/AsXFrw==}
@ -3485,7 +3502,7 @@ packages:
    dependencies:
      vite: 2.7.13
      webpack-virtual-modules: 0.4.3
-    dev: false
+    dev: true

  /upath/2.0.1:
    resolution: {integrity: sha512-1uEe95xksV1O0CYKXo8vQvN1JEbtJp7lb7C5U9HMsIp6IVwntkH/oNUzyVNQSd4S1sYk2FpSSW44FqMc8qee5w==}
@ -3776,7 +3793,7 @@ packages:

  /webpack-virtual-modules/0.4.3:
    resolution: {integrity: sha512-5NUqC2JquIL2pBAAo/VfBP6KuGkHIZQXW/lNKupLPfhViwh8wNsu0BObtl09yuKZszeEUfbXz8xhrHvSG16Nqw==}
-    dev: false
+    dev: true

  /whatwg-encoding/2.0.0:
    resolution: {integrity: sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==}
@ -3814,6 +3831,7 @@ packages:
    hasBin: true
    dependencies:
      isexe: 2.0.0
+    dev: true

  /with/7.0.2:
    resolution: {integrity: sha512-RNGKj82nUPg3g5ygxkQl0R937xLyho1J24ItRCBTr/m1YnZkzJy1hUiHUJrc/VlsDQzsCnInEGSg3bci0Lmd4w==}
@ -3873,4 +3891,4 @@ packages:
  /yocto-queue/0.1.0:
    resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
    engines: {node: '>=10'}
-    dev: false
+    dev: true
--- a/src/algo.ts
+++ b/src/algo.ts
@ -1,10 +1,14 @@
+import { reactive, ref, watch } from 'vue'
+
 import { operators, pool } from './globals'
 import { Operation, OperatorType } from './types'
 import { randRange } from './utils'

 type HistoryType = { a: number; b: number; op: OperatorType }[]

-export function isOperationValid(op: Operation): boolean {
+export const operations = reactive<Operation[]>([])
+
+export function isOperationResultValid(op: Operation): boolean {
  return (
    !!op.operator &&
    !!op.left &&
@ -12,6 +16,29 @@ export function isOperationValid(op: Operation): boolean {
    Number.isInteger(operate(op.operator, op.left?.value, op.right?.value))
  )
 }
+
+export function isOperationInvalid(op: Operation): boolean {
+  if (!isOperationReady(op)) return false
+  return !isOperationResultValid(op)
+}
+
+export function isOperationReady(op: Operation): boolean {
+  return (
+    !!op.operator &&
+    !!op.left &&
+    !!op.right
+  )
+}
+
+export function pushEmptyOperation(): void {
+  operations.push({
+    left: null,
+    right: null,
+    operator: null,
+    executed: false,
+  })
+}
+
 export function operate(
  operator: OperatorType,
  valA: number,
@ -22,7 +49,7 @@ export function operate(
      return valA + valB
    case '-':
      return valA - valB
-    case '*':
+    case 'x':
      return valA * valB
    case '/':
      return valA / valB
@ -109,7 +136,7 @@ export function isSolvable(result: number, plaquettes: number[]): boolean {
    printHistory(histories[0])
  }
  console.log(new Date().getTime() - startTime.getTime() + 'ms')
-
+  console.log(found)
  return found

  // histories.sort((a, b) => a.length - b.length)
--- a/src/components/OperationsList.vue
+++ b/src/components/OperationsList.vue
@ -0,0 +1,79 @@
+<template>
+  <TransitionGroup name="slide_up">
+    <div
+      class="mb-2 text-center"
+      v-for="(op, i) in operations"
+      :key="i">
+      <div class="inline-block relative text-xl">
+        <!-- OPERATION -->
+        <div
+          class="flex items-center"
+          :class="{ 'text-red-600': isOperationInvalid(op) }">
+          <!-- LEFT -->
+          <div class="w-[2.5em] border-b border-stone-600 transition-all">
+            {{ op.left?.value ?? '&nbsp;' }}
+          </div>
+          <!-- RIGHT -->
+          <div class="w-[2.5em] border-b border-stone-600 transition-all">
+            {{ op.operator ?? '&nbsp;' }}
+          </div>
+
+          <div class="w-[2.5em] border-b border-stone-600 transition-all">
+            {{ op.right?.value ?? '&nbsp;' }}
+          </div>
+
+          <!-- EQUALS -->
+          <div class="mx-4 border-none">
+            =
+          </div>
+
+          <!-- RESULT -->
+          <NumberBox class="w-[2.5em] border-none">
+            <IconSad v-if="isOperationInvalid(op)" />
+            <span
+              v-else-if="
+                op.operator && op.left && op.right && isOperationResultValid(op)
+              ">
+              {{ operate(op.operator, op.left.value, op.right.value) }}
+            </span>
+            <IconQuestion v-else />
+          </NumberBox>
+          <button
+            class="ml-8"
+            @click="undoOperation(i)">
+            <IconUndo
+              class="text-stone-400"
+              :class="{
+                invisible: !canOperationBeDeleted(op),
+              }" />
+          </button>
+        </div>
+      </div>
+    </div>
+  </TransitionGroup>
+</template>
+
+<script setup lang="ts">
+import {
+  isOperationInvalid,
+  isOperationResultValid,
+  operate,
+  operations,
+  pushEmptyOperation,
+} from '@/algo'
+import { Operation } from '@/types'
+import IconQuestion from '~icons/bx/bx-question-mark'
+import IconSad from '~icons/bx/bx-sad'
+import IconUndo from '~icons/bx/bx-undo'
+
+import NumberBox from './common/NumberBox.vue'
+
+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()
+}
+</script>
--- a/src/components/common/NumberBox.vue
+++ b/src/components/common/NumberBox.vue
@ -1,6 +1,6 @@
 <template>
  <div
-    class="flex overflow-hidden justify-center font-bold rounded border transition-all">
+    class="flex overflow-hidden justify-center font-bold rounded border border-stone-600 transition-all">
    <span class="self-center text-center"><slot /></span>
  </div>
 </template>
--- a/src/globals.ts
+++ b/src/globals.ts
@ -1,4 +1,4 @@
-export const operators = ['+', '-', '*', '/'] as const
+export const operators = ['+', '-', 'x', '/'] as const
 export const pool = [
  1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 25, 50, 75, 100,
-]
+] as const
--- a/src/index.css
+++ b/src/index.css
@ -45,3 +45,23 @@
    url('../fonts/manrope-v8-latin-700.svg#Manrope') format('svg');
  /* Legacy iOS */
 }
+
+.slide_left-enter-active,
+.slide_left-leave-active {
+  transition: all 0.5s ease;
+}
+.slide_left-enter-from,
+.slide_left-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+.slide_up-enter-active,
+.slide_up-leave-active {
+  transition: all 0.5s ease;
+}
+.slide_up-enter-from,
+.slide_up-leave-to {
+  opacity: 0;
+  transform: translateY(30px);
+}
--- a/src/types.ts
+++ b/src/types.ts
@ -1,4 +1,4 @@
-export type OperatorType = '+' | '-' | '*' | '/'
+export type OperatorType = '+' | '-' | 'x' | '/'

 export type Plaquette = {
  value: number
--- a/src/views/GameView.vue
+++ b/src/views/GameView.vue
@ -18,10 +18,11 @@
    <!-- Plaquettes -->
    <div
      class="grid grid-cols-6 grid-rows-2 gap-2 justify-center px-2 mx-auto max-w-sm">
-      <TransitionGroup name="list">
+      <TransitionGroup name="slide_left">
        <NumberBox
          class="col-start-auto h-[1.8em] text-2xl"
          :class="{ 'text-stone-600 border-stone-600': !item.free }"
+          :style="{ transitionDelay: `${initDelay * i}ms` }"
          @click="selectNumber(item)"
          v-for="(item, i) in plaquettes"
          :key="i">
@ -41,128 +42,70 @@
      </NumberBox>
    </div>

-    <div class="my-4 border-b" />
+    <div class="my-4 mx-auto max-w-sm border-b" />

-    <div
-      class="mb-2 text-center"
-      v-for="(operation, i) in operations"
-      :key="i">
-      <div class="inline-block relative text-xl">
-        <!-- OPERATION -->
-        <div class="flex items-center">
-          <NumberBox class="w-[2.5em]">
-            {{ operation.left?.value ?? '?' }}
-          </NumberBox>
-          <NumberBox class="w-[2.5em] border-none">
-            {{ operation.operator ?? '' }}
-          </NumberBox>
-
-          <NumberBox class="w-[2.5em]">
-            {{ operation.right?.value ?? '?' }}
-          </NumberBox>
-
-          <!-- EQUALS -->
-          <NumberBox class="mx-4 border-none">
-            =
-          </NumberBox>
-
-          <!-- RESULT -->
-          <NumberBox class="w-[2.5em]">
-            <span
-              v-if="
-                operation.operator &&
-                  operation.left &&
-                  operation.right &&
-                  isOperationValid(operation)
-              ">
-              {{
-                operate(
-                  operation.operator,
-                  operation.left.value,
-                  operation.right.value
-                )
-              }}
-            </span>
-            <span v-else>?</span>
-          </NumberBox>
-
-          <IconClose class="ml-8 rounded-full border" />
-        </div>
-      </div>
-    </div>
+    <OperationsList />
  </div>
 </template>

-<style>
-.list-enter-active,
-.list-leave-active {
-  transition: all 0.5s ease;
-}
-.list-enter-from,
-.list-leave-to {
-  opacity: 0;
-  transform: translateX(30px);
-}
-</style>
-
 <script setup lang="ts">
-import { computed, onMounted, reactive, ref } from 'vue'
+import { computed, onMounted, reactive, ref, watch } from 'vue'

-import { isOperationValid, isSolvable, operate } from '@/algo'
+import {
+  isOperationInvalid,
+  isOperationReady,
+  isOperationResultValid,
+  isSolvable,
+  operate,
+  operations,
+  pushEmptyOperation,
+} from '@/algo'
 import NumberBox from '@/components/common/NumberBox.vue'
-import { pool } from '@/globals'
+import OperationsList from '@/components/OperationsList.vue'
+import { operators, pool } from '@/globals'
 import { Operation, OperatorType, Plaquette } from '@/types'
 import { randItem, randRange } from '@/utils'
-import IconClose from '~icons/ph/x'
-
-const operators = ['+', '-', '*', '/'] as const

 const result = ref(0)
 const plaquettes = ref<Plaquette[]>([])
+const initDelay = ref(100)

-const operations = ref<Operation[]>([])
 pushEmptyOperation()
 // pushEmptyOperation()

 const currentOperation = computed(
-  () => operations.value[operations.value.length - 1],
+  () => operations[operations.length - 1],
 )

-function pushEmptyOperation(): void {
-  operations.value.push({
-    left: null,
-    right: null,
-    operator: null,
-    executed: false,
-  })
-}
-
-function selectNumber(p: Plaquette): void {
-  const op = currentOperation.value
-  if (!p.free) return
-  p.free = false
-
-  if (!op.left) {
-    op.left = p
-  }
-  else if (!op.right) {
-    op.right = p
-  }
-
-  if (
-    op.operator &&
-    op.right &&
-    op.left &&
-    isOperationValid(op) &&
-    !op.executed
-  ) {
+watch(
+  currentOperation,
+  op => {
+    if (isOperationReady(op) && isOperationResultValid(op) && !op.executed) {
      op.executed = true
      plaquettes.value.push({
-      value: operate(op.operator, op.left.value, op.right.value),
+        value: operate(op.operator!, op.left!.value, op.right!.value),
        free: true,
      })
      pushEmptyOperation()
    }
+  },
+  { deep: true },
+)
+
+function selectNumber(p: Plaquette): void {
+  initDelay.value = 0
+
+  const op = currentOperation.value
+  if (!p.free) return
+
+  if (!op.left) {
+    op.left = p
+    p.free = false
+  }
+  else if (!op.right) {
+    op.right = p
+    p.free = false
+  }
 }

 function selectOperator(o: OperatorType): void {
@ -185,11 +128,11 @@ onMounted(() => {
          return randRange(250, 1000)
      }
    })()
-
    plaquettes.value = []
+    const poolCopy = [...pool]
    for (let i = 0; i < 6; ++i) {
-      const random = Math.floor(Math.random() * pool.length)
-      const el = pool.splice(random, 1)[0]
+      const random = Math.floor(Math.random() * poolCopy.length)
+      const el = poolCopy.splice(random, 1)[0]
      plaquettes.value.push({ value: el, free: true })
    }
    // Solve it
--- a/tsconfig.json
+++ b/tsconfig.json
@ -13,6 +13,9 @@
    "paths": {
      "@/*": ["./src/*"]
    },
+    "types": [
+      "unplugin-icons/types/vue",
+    ],
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"],
    "skipLibCheck": true
  },