Implemented the main backend for the Facial Recongtion Game (#113)

Author: jishk11

website/src/caseStudies/FacialRecognition.js

@@ -2,8 +2,10 @@ import React from "react";
 import "../main.css";
 import teachLogo from "../assets/teachla-logo.svg";
 import PostsList from "../components/mainContent/PostsList";
+import CounterFrame from "../components/posts/FacialRecognition/CounterFrame";
 import { VisibilityProvider } from "../components/mainContent/commonLogic";
 
+
 export default function FacialRecognition() {
   return (
     <VisibilityProvider>
@@ -39,35 +41,11 @@ const FacialRecognitionInfo = [
     post: {
       profilePic: teachLogo,
       profilePicName: "Profile Picture - Frame 1",
-      header: "Frame 1",
-      subheader: "Why Is This Important?",
+      header: "Facial Recognition Game",
+      subheader: "Understanding Bias Through Categorization",
       bodyText: [
         {
-          body: (
-            <p className="bold">
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-              eiusmod tempor incididunt ut labore et dolore magna aliqua.
-            </p>
-          ),
-        },
-        {
-          body: (
-            <p>
-              Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
-              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
-              reprehenderit in voluptate velit esse cillum dolore eu fugiat
-              nulla pariatur.
-            </p>
-          ),
-        },
-        {
-          body: (
-            <p>
-              <mark className="bold">{`TODO: `} </mark>Excepteur sint occaecat
-              cupidatat non proident, sunt in culpa qui officia deserunt mollit
-              anim id est laborum.
-            </p>
-          ),
+          body: <CounterFrame />
         },
       ],
     },

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

@@ -0,0 +1,45 @@
+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);
+
+
+  const handleButtonClick = (counterIndex) => {
+    //Checks to make sure we haven't iterated through the last element yet
+    if(!processedLast) {
+      // Makes a copy of the current counters array
+      const updatedCounters = [...counters];
+      updatedCounters[counterIndex] = updatedCounters[counterIndex] + 1;
+      setCounters(updatedCounters);
+
+      if (currentIndex < numbers.length - 1) {
+        setCurrentIndex(currentIndex + 1);
+      }
+      else {
+        setProcessedLast(true);
+      }
+    }
+  };
+
+  return (
+    <div>
+      <h2>Current Number: {numbers[currentIndex]}</h2>
+      <div>
+        {counters.map((count, index) => (
+          <button
+            key={index}
+            onClick={() => handleButtonClick(index)}
+            style={{ marginRight: '10px', marginTop: '10px' }}
+          >
+            Counter {index + 1}: {count}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default CounterFrame;