UI, WIP undo

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

@@ -44,4 +44,24 @@
     /* Safari, Android, iOS */
     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
-      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,
-  })
-}
+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),
+        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
-  }
-
-  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()
+    p.free = false
   }
 }
 
@@ -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