WIP: Implement Counter game

Author: mizlan

website/src/components/posts/FacialRecognition/CounterFrame.js

@@ -1,12 +1,36 @@
-import React, { useState } from 'react';
-
-function CounterFrame() {
-  const numbers = [1, 2, 3, 4, 5, 7, 8, 9, 10, 11, 12, 13, 14, 15];
-  const [currentIndex, setCurrentIndex] = useState(0);
-  const [counters, setCounters] = useState([0, 0, 0, 0]);
-  const [processedLast, setProcessedLast] = useState(false);
+import React from 'react';
+import { create } from 'zustand'
 
+const useCounterStore = create((set) => ({
+  numbers: [1, 1, 2, 2, 3, 3, 4, 4, 3, 3, 2, 2, 1],
+  index: 0,
+  guesses: [{
+    correct: 0,
+    incorrect: 0
+  }, {
+    correct: 0,
+    incorrect: 0
+  }, {
+    correct: 0,
+    incorrect: 0
+  }, {
+    correct: 0,
+    incorrect: 0
+  }],
+  increment: (guess) => set((state) => {
+    if (state.index === numbers.length - 1) {
+      return state
+    }
+    if (![1,2,3,4].includes(guess)) {
+      return state
+    }
+    const guesses = [...state.guesses];
+    guesses[guess - 1] += 1;
+    return ({ index: state.index + 1, guesses })
+  }),
+}))
 
+function CounterFrame() {
   const handleButtonClick = (counterIndex) => {
     //Checks to make sure we haven't iterated through the last element yet
     if(!processedLast) {
@@ -42,4 +66,4 @@ function CounterFrame() {
   );
 }
 
-export default CounterFrame;
+export default CounterFrame;