UI, WIP undo

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"

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

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)

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>

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>

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

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);
+}

src/types.ts

@@ -1,4 +1,4 @@
-export type OperatorType = '+' | '-' | '*' | '/'
+export type OperatorType = '+' | '-' | 'x' | '/'
 
 export type Plaquette = {
   value: number

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,127 +42,69 @@
       </NumberBox>
     </div>
 
-    <div class="my-4 border-b" />
+    <div class="my-4 mx-auto max-w-sm border-b" />
 
-    <div
+    <OperationsList />
-      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>
   </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 {
+watch(
-  operations.value.push({
+  currentOperation,
-    left: null,
+  op => {
-    right: null,
+    if (isOperationReady(op) && isOperationResultValid(op) && !op.executed) {
-    operator: null,
+      op.executed = true
-    executed: false,
+      plaquettes.value.push({
-  })
+        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
-  p.free = false
 
   if (!op.left) {
     op.left = p
+    p.free = false
   }
   else if (!op.right) {
     op.right = p
-  }
+    p.free = false
-
-  if (
-    op.operator &&
-    op.right &&
-    op.left &&
-    isOperationValid(op) &&
-    !op.executed
-  ) {
-    op.executed = true
-    plaquettes.value.push({
-      value: operate(op.operator, op.left.value, op.right.value),
-      free: true,
-    })
-    pushEmptyOperation()
   }
 }
 
@@ -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 random = Math.floor(Math.random() * poolCopy.length)
-      const el = pool.splice(random, 1)[0]
+      const el = poolCopy.splice(random, 1)[0]
       plaquettes.value.push({ value: el, free: true })
     }
     // Solve it

tsconfig.json

@@ -13,6 +13,9 @@
     "paths": {
       "@/*": ["./src/*"]
     },
+    "types": [
+      "unplugin-icons/types/vue",
+    ],
     "lib": ["esnext", "dom", "dom.iterable", "scripthost"],
     "skipLibCheck": true
   },