From 5e34667454eaed80789b187877e028c69912f54f Mon Sep 17 00:00:00 2001
From: "github-classroom[bot]"
 <66690702+github-classroom[bot]@users.noreply.github.com>
Date: Sun, 11 Apr 2021 16:37:41 +0000
Subject: [PATCH 1/2] Setting up GitHub Classroom Feedback


From f7d4f49933735847df28a6c77514083249e7d80f Mon Sep 17 00:00:00 2001
From: Fabio Benedetti <fabio.benedetti@joyn.de>
Date: Sun, 11 Apr 2021 19:43:56 +0200
Subject: [PATCH 2/2] feat: game

---
 .eslintrc       |  4 ++++
 src/App.js      | 17 ++-------------
 src/CubeFace.js | 55 +++++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 61 insertions(+), 15 deletions(-)
 create mode 100644 src/CubeFace.js

diff --git a/.eslintrc b/.eslintrc
index a4fb2cd..097ec8f 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -9,6 +9,10 @@
     ],
     "rules": {
         "semi": 0,
+        "jsx-a11y/click-events-have-key-events": 0,
+        "jsx-a11y/no-static-element-interactions": 0,
+        "import/prefer-default-export": 0,
+        "react/no-array-index-key": 0,
         "react/react-in-jsx-scope": 0,
         "react/jsx-filename-extension": [
             1,
diff --git a/src/App.js b/src/App.js
index e9f34aa..517f16a 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,23 +1,10 @@
-import logo from "./logo.svg";
+import { CubeFace } from "./CubeFace";
 import "./App.css";
 
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <CubeFace />
     </div>
   );
 }
diff --git a/src/CubeFace.js b/src/CubeFace.js
new file mode 100644
index 0000000..8af4776
--- /dev/null
+++ b/src/CubeFace.js
@@ -0,0 +1,55 @@
+import { useState } from "react";
+
+const COLORS = ["green", "blue", "yellow", "orange", "white", "red"];
+
+export const CubeFace = () => {
+  const [squareColors, setSquareColor] = useState(
+    Array.from(Array(9).keys()).map(() => COLORS[Math.floor(Math.random() * 6)])
+  );
+  const [gameState, setGameState] = useState(0);
+
+  return (
+    <>
+      {gameState === 1 && (
+        <div>
+          Congratulations!{" "}
+          <button
+            type="button"
+            onClick={() => {
+              setGameState(0);
+              setSquareColor(
+                Array.from(Array(9).keys()).map(
+                  () => COLORS[Math.floor(Math.random() * 6)]
+                )
+              );
+            }}
+          >
+            Restart
+          </button>
+        </div>
+      )}
+      <div
+        style={{
+          width: "610px",
+          display: "grid",
+          gridTemplateColumns: "1fr 1fr 1fr",
+          gridGap: "5px",
+        }}
+      >
+        {squareColors.map((c, k) => (
+          <div
+            key={`c${k}`}
+            onClick={() => {
+              squareColors[k] = COLORS[(COLORS.indexOf(c) + 1) % 6];
+              setSquareColor([...squareColors]);
+              if (squareColors.every((val) => val === squareColors[0])) {
+                setGameState(1);
+              }
+            }}
+            style={{ backgroundColor: c, width: "200px", height: "200px" }}
+          />
+        ))}
+      </div>
+    </>
+  );
+};