UI, WIP undo

This commit is contained in:
Simon Cambier 2022-02-10 22:32:41 +01:00
parent f6014aa695
commit e552421547
10 changed files with 221 additions and 130 deletions

View File

@ -11,11 +11,11 @@
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore" "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
}, },
"dependencies": { "dependencies": {
"unplugin-icons": "^0.13.1",
"vue": "^3.2.29", "vue": "^3.2.29",
"vue-router": "^4.0.12" "vue-router": "^4.0.12"
}, },
"devDependencies": { "devDependencies": {
"@iconify-json/bx": "^1.0.3",
"@iconify-json/ph": "^1.0.4", "@iconify-json/ph": "^1.0.4",
"@rushstack/eslint-patch": "^1.1.0", "@rushstack/eslint-patch": "^1.1.0",
"@types/node": "^16.11.21", "@types/node": "^16.11.21",
@ -40,6 +40,7 @@
"prettier-eslint": "^13.0.0", "prettier-eslint": "^13.0.0",
"tailwindcss": "^3.0.18", "tailwindcss": "^3.0.18",
"typescript": "~4.5.5", "typescript": "~4.5.5",
"unplugin-icons": "^0.13.1",
"vite": "^2.7.13", "vite": "^2.7.13",
"vitest": "^0.1.27", "vitest": "^0.1.27",
"vue-tsc": "^0.29.8" "vue-tsc": "^0.29.8"

View File

@ -1,6 +1,7 @@
lockfileVersion: 5.3 lockfileVersion: 5.3
specifiers: specifiers:
'@iconify-json/bx': ^1.0.3
'@iconify-json/ph': ^1.0.4 '@iconify-json/ph': ^1.0.4
'@rushstack/eslint-patch': ^1.1.0 '@rushstack/eslint-patch': ^1.1.0
'@types/node': ^16.11.21 '@types/node': ^16.11.21
@ -33,11 +34,11 @@ specifiers:
vue-tsc: ^0.29.8 vue-tsc: ^0.29.8
dependencies: dependencies:
unplugin-icons: 0.13.1_vite@2.7.13
vue: 3.2.29 vue: 3.2.29
vue-router: 4.0.12_vue@3.2.29 vue-router: 4.0.12_vue@3.2.29
devDependencies: devDependencies:
'@iconify-json/bx': 1.0.3
'@iconify-json/ph': 1.0.4 '@iconify-json/ph': 1.0.4
'@rushstack/eslint-patch': 1.1.0 '@rushstack/eslint-patch': 1.1.0
'@types/node': 16.11.21 '@types/node': 16.11.21
@ -62,6 +63,7 @@ devDependencies:
prettier-eslint: 13.0.0 prettier-eslint: 13.0.0
tailwindcss: 3.0.18_c809a12ee1edb5bee15394ec3fa4bff6 tailwindcss: 3.0.18_c809a12ee1edb5bee15394ec3fa4bff6
typescript: 4.5.5 typescript: 4.5.5
unplugin-icons: 0.13.1_vite@2.7.13
vite: 2.7.13 vite: 2.7.13
vitest: 0.1.27_jsdom@19.0.0 vitest: 0.1.27_jsdom@19.0.0
vue-tsc: 0.29.8_typescript@4.5.5 vue-tsc: 0.29.8_typescript@4.5.5
@ -73,17 +75,17 @@ packages:
dependencies: dependencies:
execa: 5.1.1 execa: 5.1.1
find-up: 5.0.0 find-up: 5.0.0
dev: false dev: true
/@antfu/utils/0.3.0: /@antfu/utils/0.3.0:
resolution: {integrity: sha512-UU8TLr/EoXdg7OjMp0h9oDoIAVr+Z/oW9cpOxQQyrsz6Qzd2ms/1CdWx8fl2OQdFpxGmq5Vc4TwfLHId6nAZjA==} resolution: {integrity: sha512-UU8TLr/EoXdg7OjMp0h9oDoIAVr+Z/oW9cpOxQQyrsz6Qzd2ms/1CdWx8fl2OQdFpxGmq5Vc4TwfLHId6nAZjA==}
dependencies: dependencies:
'@types/throttle-debounce': 2.1.0 '@types/throttle-debounce': 2.1.0
dev: false dev: true
/@antfu/utils/0.5.0: /@antfu/utils/0.5.0:
resolution: {integrity: sha512-MrAQ/MrPSxbh1bBrmwJjORfJymw4IqSHFBXqvxaga3ZdDM+/zokYF8DjyJpSjY2QmpmgQrajDUBJOWrYeARfzA==} resolution: {integrity: sha512-MrAQ/MrPSxbh1bBrmwJjORfJymw4IqSHFBXqvxaga3ZdDM+/zokYF8DjyJpSjY2QmpmgQrajDUBJOWrYeARfzA==}
dev: false dev: true
/@babel/code-frame/7.12.11: /@babel/code-frame/7.12.11:
resolution: {integrity: sha512-Zt1yodBx1UcyiePMSkWnU4hPqhwq7hGi2nFL1LeA3EUl+q2LQx16MISgJ0+z7dnmgvP9QtIleuETGOiOH1RcIw==} resolution: {integrity: sha512-Zt1yodBx1UcyiePMSkWnU4hPqhwq7hGi2nFL1LeA3EUl+q2LQx16MISgJ0+z7dnmgvP9QtIleuETGOiOH1RcIw==}
@ -166,6 +168,12 @@ packages:
resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==} resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
dev: true 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: /@iconify-json/ph/1.0.4:
resolution: {integrity: sha512-hcxC2k25/Lh/bgXgbwAD4WvnC8BeunSqafFwIOyL1dCu3QGBgKmPFIBUv4W2kBm+rbrv7F3WHPFBAJDVrjpunA==} resolution: {integrity: sha512-hcxC2k25/Lh/bgXgbwAD4WvnC8BeunSqafFwIOyL1dCu3QGBgKmPFIBUv4W2kBm+rbrv7F3WHPFBAJDVrjpunA==}
dependencies: dependencies:
@ -174,6 +182,7 @@ packages:
/@iconify/types/1.0.12: /@iconify/types/1.0.12:
resolution: {integrity: sha512-6er6wSGF3hgc1JEZqiGpg21CTCjHBYOUwqLmb2Idzkjiw6ogalGP0ZMLVutCzah+0WB4yP+Zd2oVPN8jvJ+Ftg==} resolution: {integrity: sha512-6er6wSGF3hgc1JEZqiGpg21CTCjHBYOUwqLmb2Idzkjiw6ogalGP0ZMLVutCzah+0WB4yP+Zd2oVPN8jvJ+Ftg==}
dev: true
/@iconify/utils/1.0.23: /@iconify/utils/1.0.23:
resolution: {integrity: sha512-Ktdmpe4mkMXQAnnDUz3s6s5aY/BeVPwHC1d5IhG1bgrWVNWFQNUj8cQPMbHpNCSD9MRC5yGxm9/PGPpOWGJLAg==} resolution: {integrity: sha512-Ktdmpe4mkMXQAnnDUz3s6s5aY/BeVPwHC1d5IhG1bgrWVNWFQNUj8cQPMbHpNCSD9MRC5yGxm9/PGPpOWGJLAg==}
@ -186,7 +195,7 @@ packages:
local-pkg: 0.4.1 local-pkg: 0.4.1
transitivePeerDependencies: transitivePeerDependencies:
- supports-color - supports-color
dev: false dev: true
/@nodelib/fs.scandir/2.1.5: /@nodelib/fs.scandir/2.1.5:
resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==} resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
@ -250,7 +259,7 @@ packages:
/@types/throttle-debounce/2.1.0: /@types/throttle-debounce/2.1.0:
resolution: {integrity: sha512-5eQEtSCoESnh2FsiLTxE121IiE60hnMqcb435fShf4bpLRjEu1Eoekht23y6zXS9Ts3l+Szu3TARnTsA0GkOkQ==} resolution: {integrity: sha512-5eQEtSCoESnh2FsiLTxE121IiE60hnMqcb435fShf4bpLRjEu1Eoekht23y6zXS9Ts3l+Szu3TARnTsA0GkOkQ==}
dev: false dev: true
/@typescript-eslint/eslint-plugin/5.10.1_ae020354c3da76ce329e71c9084ef5bf: /@typescript-eslint/eslint-plugin/5.10.1_ae020354c3da76ce329e71c9084ef5bf:
resolution: {integrity: sha512-xN3CYqFlyE/qOcy978/L0xLR2HlcAGIyIK5sMOasxaaAPfQRj/MmMV6OC3I7NZO84oEUdWCOju34Z9W8E0pFDQ==} resolution: {integrity: sha512-xN3CYqFlyE/qOcy978/L0xLR2HlcAGIyIK5sMOasxaaAPfQRj/MmMV6OC3I7NZO84oEUdWCOju34Z9W8E0pFDQ==}
@ -1085,6 +1094,7 @@ packages:
path-key: 3.1.1 path-key: 3.1.1
shebang-command: 2.0.0 shebang-command: 2.0.0
which: 2.0.2 which: 2.0.2
dev: true
/cssesc/3.0.0: /cssesc/3.0.0:
resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==} resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
@ -1142,6 +1152,7 @@ packages:
optional: true optional: true
dependencies: dependencies:
ms: 2.1.2 ms: 2.1.2
dev: true
/decimal.js/10.3.1: /decimal.js/10.3.1:
resolution: {integrity: sha512-V0pfhfr8suzyPGOx3nmq4aHqabehUZn6Ch9kyFpV79TGDTWFmHqUqXdabR7QHqxzrYolF4+tVmJhUG4OURg5dQ==} resolution: {integrity: sha512-V0pfhfr8suzyPGOx3nmq4aHqabehUZn6Ch9kyFpV79TGDTWFmHqUqXdabR7QHqxzrYolF4+tVmJhUG4OURg5dQ==}
@ -1830,7 +1841,7 @@ packages:
onetime: 5.1.2 onetime: 5.1.2
signal-exit: 3.0.7 signal-exit: 3.0.7
strip-final-newline: 2.0.0 strip-final-newline: 2.0.0
dev: false dev: true
/fast-deep-equal/3.1.3: /fast-deep-equal/3.1.3:
resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==} resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
@ -1892,7 +1903,7 @@ packages:
dependencies: dependencies:
locate-path: 6.0.0 locate-path: 6.0.0
path-exists: 4.0.0 path-exists: 4.0.0
dev: false dev: true
/flat-cache/3.0.4: /flat-cache/3.0.4:
resolution: {integrity: sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==} resolution: {integrity: sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==}
@ -1950,7 +1961,7 @@ packages:
/get-stream/6.0.1: /get-stream/6.0.1:
resolution: {integrity: sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==} resolution: {integrity: sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==}
engines: {node: '>=10'} engines: {node: '>=10'}
dev: false dev: true
/get-symbol-description/1.0.0: /get-symbol-description/1.0.0:
resolution: {integrity: sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==} resolution: {integrity: sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==}
@ -2092,7 +2103,7 @@ packages:
/human-signals/2.1.0: /human-signals/2.1.0:
resolution: {integrity: sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==} resolution: {integrity: sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==}
engines: {node: '>=10.17.0'} engines: {node: '>=10.17.0'}
dev: false dev: true
/iconv-lite/0.6.3: /iconv-lite/0.6.3:
resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==} resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
@ -2256,7 +2267,7 @@ packages:
/is-stream/2.0.1: /is-stream/2.0.1:
resolution: {integrity: sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==} resolution: {integrity: sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==}
engines: {node: '>=8'} engines: {node: '>=8'}
dev: false dev: true
/is-string/1.0.7: /is-string/1.0.7:
resolution: {integrity: sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==} resolution: {integrity: sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==}
@ -2284,6 +2295,7 @@ packages:
/isexe/2.0.0: /isexe/2.0.0:
resolution: {integrity: sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=} resolution: {integrity: sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=}
dev: true
/js-stringify/1.0.2: /js-stringify/1.0.2:
resolution: {integrity: sha1-Fzb939lyTyijaCrcYjCufk6Weds=} resolution: {integrity: sha1-Fzb939lyTyijaCrcYjCufk6Weds=}
@ -2383,7 +2395,7 @@ packages:
/kolorist/1.5.1: /kolorist/1.5.1:
resolution: {integrity: sha512-lxpCM3HTvquGxKGzHeknB/sUjuVoUElLlfYnXZT73K8geR9jQbroGlSCFBax9/0mpGoD3kzcMLnOlGQPJJNyqQ==} resolution: {integrity: sha512-lxpCM3HTvquGxKGzHeknB/sUjuVoUElLlfYnXZT73K8geR9jQbroGlSCFBax9/0mpGoD3kzcMLnOlGQPJJNyqQ==}
dev: false dev: true
/levn/0.3.0: /levn/0.3.0:
resolution: {integrity: sha1-OwmSTt+fCDwEkP3UwLxEIeBHZO4=} resolution: {integrity: sha1-OwmSTt+fCDwEkP3UwLxEIeBHZO4=}
@ -2423,6 +2435,7 @@ packages:
/local-pkg/0.4.1: /local-pkg/0.4.1:
resolution: {integrity: sha512-lL87ytIGP2FU5PWwNDo0w3WhIo2gopIAxPg9RxDYF7m4rr5ahuZxP22xnJHIvaLTe4Z9P6uKKY2UHiwyB4pcrw==} resolution: {integrity: sha512-lL87ytIGP2FU5PWwNDo0w3WhIo2gopIAxPg9RxDYF7m4rr5ahuZxP22xnJHIvaLTe4Z9P6uKKY2UHiwyB4pcrw==}
engines: {node: '>=14'} engines: {node: '>=14'}
dev: true
/locate-path/2.0.0: /locate-path/2.0.0:
resolution: {integrity: sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=} resolution: {integrity: sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=}
@ -2437,7 +2450,7 @@ packages:
engines: {node: '>=10'} engines: {node: '>=10'}
dependencies: dependencies:
p-locate: 5.0.0 p-locate: 5.0.0
dev: false dev: true
/lodash.merge/4.6.2: /lodash.merge/4.6.2:
resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==} resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
@ -2484,7 +2497,7 @@ packages:
/merge-stream/2.0.0: /merge-stream/2.0.0:
resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==} resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
dev: false dev: true
/merge2/1.4.1: /merge2/1.4.1:
resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==} resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
@ -2514,7 +2527,7 @@ packages:
/mimic-fn/2.1.0: /mimic-fn/2.1.0:
resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==} resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
engines: {node: '>=6'} engines: {node: '>=6'}
dev: false dev: true
/minimatch/3.0.4: /minimatch/3.0.4:
resolution: {integrity: sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==} resolution: {integrity: sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==}
@ -2532,6 +2545,7 @@ packages:
/ms/2.1.2: /ms/2.1.2:
resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==} resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
dev: true
/ms/2.1.3: /ms/2.1.3:
resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==} resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
@ -2574,7 +2588,7 @@ packages:
engines: {node: '>=8'} engines: {node: '>=8'}
dependencies: dependencies:
path-key: 3.1.1 path-key: 3.1.1
dev: false dev: true
/num2fraction/1.2.2: /num2fraction/1.2.2:
resolution: {integrity: sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=} resolution: {integrity: sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=}
@ -2633,7 +2647,7 @@ packages:
engines: {node: '>=6'} engines: {node: '>=6'}
dependencies: dependencies:
mimic-fn: 2.1.0 mimic-fn: 2.1.0
dev: false dev: true
/optionator/0.8.3: /optionator/0.8.3:
resolution: {integrity: sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA==} resolution: {integrity: sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA==}
@ -2671,7 +2685,7 @@ packages:
engines: {node: '>=10'} engines: {node: '>=10'}
dependencies: dependencies:
yocto-queue: 0.1.0 yocto-queue: 0.1.0
dev: false dev: true
/p-locate/2.0.0: /p-locate/2.0.0:
resolution: {integrity: sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=} resolution: {integrity: sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=}
@ -2685,7 +2699,7 @@ packages:
engines: {node: '>=10'} engines: {node: '>=10'}
dependencies: dependencies:
p-limit: 3.1.0 p-limit: 3.1.0
dev: false dev: true
/p-try/1.0.0: /p-try/1.0.0:
resolution: {integrity: sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=} resolution: {integrity: sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=}
@ -2728,7 +2742,7 @@ packages:
/path-exists/4.0.0: /path-exists/4.0.0:
resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==} resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
engines: {node: '>=8'} engines: {node: '>=8'}
dev: false dev: true
/path-is-absolute/1.0.1: /path-is-absolute/1.0.1:
resolution: {integrity: sha1-F0uSaHNVNP+8es5r9TpanhtcX18=} resolution: {integrity: sha1-F0uSaHNVNP+8es5r9TpanhtcX18=}
@ -2738,6 +2752,7 @@ packages:
/path-key/3.1.1: /path-key/3.1.1:
resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==} resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
engines: {node: '>=8'} engines: {node: '>=8'}
dev: true
/path-parse/1.0.7: /path-parse/1.0.7:
resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==} resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
@ -3111,10 +3126,12 @@ packages:
engines: {node: '>=8'} engines: {node: '>=8'}
dependencies: dependencies:
shebang-regex: 3.0.0 shebang-regex: 3.0.0
dev: true
/shebang-regex/3.0.0: /shebang-regex/3.0.0:
resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==} resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
engines: {node: '>=8'} engines: {node: '>=8'}
dev: true
/side-channel/1.0.4: /side-channel/1.0.4:
resolution: {integrity: sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==} resolution: {integrity: sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==}
@ -3126,7 +3143,7 @@ packages:
/signal-exit/3.0.7: /signal-exit/3.0.7:
resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==} resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
dev: false dev: true
/slash/3.0.0: /slash/3.0.0:
resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==} resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
@ -3225,7 +3242,7 @@ packages:
/strip-final-newline/2.0.0: /strip-final-newline/2.0.0:
resolution: {integrity: sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==} resolution: {integrity: sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==}
engines: {node: '>=6'} engines: {node: '>=6'}
dev: false dev: true
/strip-json-comments/3.1.1: /strip-json-comments/3.1.1:
resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==} resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
@ -3464,7 +3481,7 @@ packages:
- supports-color - supports-color
- vite - vite
- webpack - webpack
dev: false dev: true
/unplugin/0.3.2_vite@2.7.13: /unplugin/0.3.2_vite@2.7.13:
resolution: {integrity: sha512-5d0DMYNKZU+S9eZUiBfw6Co32eRg8myUgBPoWSqG/wDFCUE/WznfSsJnZWi1P9l69x4uLJqt2qVq1xW/AsXFrw==} resolution: {integrity: sha512-5d0DMYNKZU+S9eZUiBfw6Co32eRg8myUgBPoWSqG/wDFCUE/WznfSsJnZWi1P9l69x4uLJqt2qVq1xW/AsXFrw==}
@ -3485,7 +3502,7 @@ packages:
dependencies: dependencies:
vite: 2.7.13 vite: 2.7.13
webpack-virtual-modules: 0.4.3 webpack-virtual-modules: 0.4.3
dev: false dev: true
/upath/2.0.1: /upath/2.0.1:
resolution: {integrity: sha512-1uEe95xksV1O0CYKXo8vQvN1JEbtJp7lb7C5U9HMsIp6IVwntkH/oNUzyVNQSd4S1sYk2FpSSW44FqMc8qee5w==} resolution: {integrity: sha512-1uEe95xksV1O0CYKXo8vQvN1JEbtJp7lb7C5U9HMsIp6IVwntkH/oNUzyVNQSd4S1sYk2FpSSW44FqMc8qee5w==}
@ -3776,7 +3793,7 @@ packages:
/webpack-virtual-modules/0.4.3: /webpack-virtual-modules/0.4.3:
resolution: {integrity: sha512-5NUqC2JquIL2pBAAo/VfBP6KuGkHIZQXW/lNKupLPfhViwh8wNsu0BObtl09yuKZszeEUfbXz8xhrHvSG16Nqw==} resolution: {integrity: sha512-5NUqC2JquIL2pBAAo/VfBP6KuGkHIZQXW/lNKupLPfhViwh8wNsu0BObtl09yuKZszeEUfbXz8xhrHvSG16Nqw==}
dev: false dev: true
/whatwg-encoding/2.0.0: /whatwg-encoding/2.0.0:
resolution: {integrity: sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==} resolution: {integrity: sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==}
@ -3814,6 +3831,7 @@ packages:
hasBin: true hasBin: true
dependencies: dependencies:
isexe: 2.0.0 isexe: 2.0.0
dev: true
/with/7.0.2: /with/7.0.2:
resolution: {integrity: sha512-RNGKj82nUPg3g5ygxkQl0R937xLyho1J24ItRCBTr/m1YnZkzJy1hUiHUJrc/VlsDQzsCnInEGSg3bci0Lmd4w==} resolution: {integrity: sha512-RNGKj82nUPg3g5ygxkQl0R937xLyho1J24ItRCBTr/m1YnZkzJy1hUiHUJrc/VlsDQzsCnInEGSg3bci0Lmd4w==}
@ -3873,4 +3891,4 @@ packages:
/yocto-queue/0.1.0: /yocto-queue/0.1.0:
resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==} resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
engines: {node: '>=10'} engines: {node: '>=10'}
dev: false dev: true

View File

@ -1,10 +1,14 @@
import { reactive, ref, watch } from 'vue'
import { operators, pool } from './globals' import { operators, pool } from './globals'
import { Operation, OperatorType } from './types' import { Operation, OperatorType } from './types'
import { randRange } from './utils' import { randRange } from './utils'
type HistoryType = { a: number; b: number; op: OperatorType }[] 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 ( return (
!!op.operator && !!op.operator &&
!!op.left && !!op.left &&
@ -12,6 +16,29 @@ export function isOperationValid(op: Operation): boolean {
Number.isInteger(operate(op.operator, op.left?.value, op.right?.value)) 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( export function operate(
operator: OperatorType, operator: OperatorType,
valA: number, valA: number,
@ -22,7 +49,7 @@ export function operate(
return valA + valB return valA + valB
case '-': case '-':
return valA - valB return valA - valB
case '*': case 'x':
return valA * valB return valA * valB
case '/': case '/':
return valA / valB return valA / valB
@ -109,7 +136,7 @@ export function isSolvable(result: number, plaquettes: number[]): boolean {
printHistory(histories[0]) printHistory(histories[0])
} }
console.log(new Date().getTime() - startTime.getTime() + 'ms') console.log(new Date().getTime() - startTime.getTime() + 'ms')
console.log(found)
return found return found
// histories.sort((a, b) => a.length - b.length) // histories.sort((a, b) => a.length - b.length)

View File

@ -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>

View File

@ -1,6 +1,6 @@
<template> <template>
<div <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> <span class="self-center text-center"><slot /></span>
</div> </div>
</template> </template>

View File

@ -1,4 +1,4 @@
export const operators = ['+', '-', '*', '/'] as const export const operators = ['+', '-', 'x', '/'] as const
export const pool = [ 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, 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

View File

@ -45,3 +45,23 @@
url('../fonts/manrope-v8-latin-700.svg#Manrope') format('svg'); url('../fonts/manrope-v8-latin-700.svg#Manrope') format('svg');
/* Legacy iOS */ /* 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);
}

View File

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

View File

@ -18,10 +18,11 @@
<!-- Plaquettes --> <!-- Plaquettes -->
<div <div
class="grid grid-cols-6 grid-rows-2 gap-2 justify-center px-2 mx-auto max-w-sm"> 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 <NumberBox
class="col-start-auto h-[1.8em] text-2xl" class="col-start-auto h-[1.8em] text-2xl"
:class="{ 'text-stone-600 border-stone-600': !item.free }" :class="{ 'text-stone-600 border-stone-600': !item.free }"
:style="{ transitionDelay: `${initDelay * i}ms` }"
@click="selectNumber(item)" @click="selectNumber(item)"
v-for="(item, i) in plaquettes" v-for="(item, i) in plaquettes"
:key="i"> :key="i">
@ -41,127 +42,69 @@
</NumberBox> </NumberBox>
</div> </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> </div>
</template> </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"> <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 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 { Operation, OperatorType, Plaquette } from '@/types'
import { randItem, randRange } from '@/utils' import { randItem, randRange } from '@/utils'
import IconClose from '~icons/ph/x'
const operators = ['+', '-', '*', '/'] as const
const result = ref(0) const result = ref(0)
const plaquettes = ref<Plaquette[]>([]) const plaquettes = ref<Plaquette[]>([])
const initDelay = ref(100)
const operations = ref<Operation[]>([])
pushEmptyOperation() pushEmptyOperation()
// pushEmptyOperation() // pushEmptyOperation()
const currentOperation = computed( 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 { function selectNumber(p: Plaquette): void {
initDelay.value = 0
const op = currentOperation.value const op = currentOperation.value
if (!p.free) return if (!p.free) return
p.free = false
if (!op.left) { if (!op.left) {
op.left = p op.left = p
p.free = false
} }
else if (!op.right) { else if (!op.right) {
op.right = p 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) return randRange(250, 1000)
} }
})() })()
plaquettes.value = [] plaquettes.value = []
const poolCopy = [...pool]
for (let i = 0; i < 6; ++i) { 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 }) plaquettes.value.push({ value: el, free: true })
} }
// Solve it // Solve it

View File

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