Reset button

emeraldwalk · Nov 22, 2023 · 66ea5b6 · 66ea5b6
1 parent 5a9d39e
commit 66ea5b6
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 37 deletions.
diff --git a/src/components/Game.scss b/src/components/Game.scss
@@ -42,14 +42,25 @@
   width: var(--size);
   border-radius: var(--size);
 }
-.next {
+.correct {
   background-color: hsl(var(--color-green-800-hsl));
   color: hsl(var(--color-white-hsl));
 }
-.retry {
+.incorrect {
   color: hsl(var(--color-white-hsl));
   background-color: hsl(var(--color-red-800-hsl));
 }
+.refresh {
+  --size: 40px;
+  border: none;
+  background-color: transparent;
+  color: hsl(var(--color-white-hsl));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--size);
+  height: var(--size);
+}
 .play {
   display: flex;
   align-items: center;
@@ -73,16 +84,19 @@
   }
 }
 .status {
-  height: 40px;
+  height: 20px;
 }
 .status-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   height: 40px;
   font-size: 40px;
 }
-.scoreboard {
+.footer {
   display: flex;
   align-items: center;
-  flex-direction: column;
-  gap: 10px;
-  width: 100%;
+  flex-direction: row;
+  justify-content: space-between;
+  width: calc(100% - 40px);
 }
diff --git a/src/components/Game.tsx b/src/components/Game.tsx
@@ -9,21 +9,45 @@ function initialProblems(): Problem[] {
   const map = {
     2: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18],
     3: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+    4: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
   } as const
 
-  function forN(n: number) {
-    return (i: number) => {
-      return {
-        type: 'multiplication' as 'multiplication',
-        weight: 1,
-        m1: n,
-        m2: i,
-        p: n * i,
-      }
-    }
+  const items = Object.entries(map)
+    .map(([key, values]) =>
+      values.map((v) => [Number(key), v] as [number, number]),
+    )
+    .flat()
+
+  const result: Problem[] = []
+
+  while (items.length) {
+    const j = Math.floor(Math.random() * items.length)
+    const [n, i] = items.splice(j, 1)[0]
+
+    result.push({
+      type: 'multiplication' as 'multiplication',
+      weight: 1,
+      m1: n,
+      m2: i,
+      p: n * i,
+    })
   }
 
-  return [...map['2'].map(forN(2)), ...map['3'].map(forN(3))]
+  return result
+
+  // function forN(n: number) {
+  //   return (i: number) => {
+  //     return {
+  //       type: 'multiplication' as 'multiplication',
+  //       weight: 1,
+  //       m1: n,
+  //       m2: i,
+  //       p: n * i,
+  //     }
+  //   }
+  // }
+
+  // return [...map['2'].map(forN(2)), ...map['3'].map(forN(3))]
 }
 
 export function Game() {
@@ -42,12 +66,12 @@ export function Game() {
     rerun()
   }
 
-  const onRetry = () => {
-    // state.retry()
-    // setAnswer('')
-    // rerun()
-    onNext()
-  }
+  // const onRetry = () => {
+  //   state.retry()
+  //   setAnswer('')
+  //   rerun()
+  //   onNext()
+  // }
 
   const onNext = () => {
     state.markComplete()
@@ -95,14 +119,13 @@ export function Game() {
                 OK
               </button>
             )}
-            {state.status === 'correct' && (
-              <button class="round next" onClick={onNext}>
-                <VsCheck size={48} />
-              </button>
-            )}
-            {state.status === 'incorrect' && (
-              <button class="round retry" onClick={onRetry}>
-                <VsChromeClose size={48} />
+            {state.status !== 'unanswered' && (
+              <button class={`round ${state.status}`} onClick={onNext}>
+                {state.status === 'correct' ? (
+                  <VsCheck size={48} />
+                ) : (
+                  <VsChromeClose size={48} />
+                )}
               </button>
             )}
           </>
@@ -127,9 +150,15 @@ export function Game() {
         </span>
         <span class="status-icon">{state.statusIcon}</span>
         {state.current && (
-          <footer class="scoreboard">
+          <>
             <ScoreCard />
-          </footer>
+            <footer class="footer">
+              <span>High Score {state.highScore}</span>
+              <button class="refresh" onClick={onReset}>
+                <VsRefresh size={20} />
+              </button>
+            </footer>
+          </>
         )}
       </div>
     </form>

diff --git a/src/components/ScoreCard.tsx b/src/components/ScoreCard.tsx
@@ -7,8 +7,9 @@ export function ScoreCard() {
       <span>Round {state.rounds.length}</span>
       <span>Score {state.score.score}</span>
       <span>Missed {state.score.missed}</span>
-      <br />
-      <span>High Score {state.highScore}</span>
+      <span>Remaining {state.score.remaining}</span>
+      {/* <br /> */}
+      {/* <span>High Score {state.highScore}</span> */}
     </div>
   )
 }
diff --git a/src/data/store.ts b/src/data/store.ts
@@ -27,10 +27,11 @@ export const [state, setState] = createStore({
     missed: number
     total: number
     score: number
+    remaining: number
   } {
     const round = this.rounds.at(-1)
     if (round == null) {
-      return { answered: 0, missed: 0, total: 0, score: 0 }
+      return { answered: 0, missed: 0, total: 0, score: 0, remaining: 0 }
     }
 
     const weight = this.current?.weight ?? 0
@@ -42,6 +43,7 @@ export const [state, setState] = createStore({
       score:
         round.score +
         (this.status === 'correct' ? FULL_QUESTION_SCORE * weight : 0),
+      remaining: this.remaining.length + (this.status === 'correct' ? -1 : 0),
     }
   },