From 3525d06ed009994a01ccaedfecd289763a3bd272 Mon Sep 17 00:00:00 2001
From: Hadeed Ahmad <hadeedji@gmail.com>
Date: Sat, 1 Jun 2024 17:47:31 +0400
Subject: [PATCH] Style the game page

---
 src/app.jsx        |  4 ++-
 src/game.jsx       | 79 ++++++++++++++++++++++++++++++++++++++++++++++
 tailwind.config.js |  2 +-
 3 files changed, 83 insertions(+), 2 deletions(-)
 create mode 100644 src/game.jsx

diff --git a/src/app.jsx b/src/app.jsx
index 5d6972b..1f12d13 100644
--- a/src/app.jsx
+++ b/src/app.jsx
@@ -1,9 +1,11 @@
 import MainMenu from "./mainMenu";
+import Game from "./game";
 
 export default () => {
   return (
     <main className="flex min-h-screen items-center justify-center bg-navy-700">
-      <MainMenu />
+      {/* <MainMenu /> */}
+      <Game />
     </main>
   );
 };
diff --git a/src/game.jsx b/src/game.jsx
new file mode 100644
index 0000000..f52c6c3
--- /dev/null
+++ b/src/game.jsx
@@ -0,0 +1,79 @@
+import logo from "../assets/logo.svg";
+import restart from "../assets/icon-restart.svg";
+
+import Cross from "../assets/icon-x.svg?react";
+import Oval from "../assets/icon-o.svg?react";
+import CrossOutline from "../assets/icon-x-outline.svg?react";
+import OvalOutline from "../assets/icon-o-outline.svg?react";
+
+export default () => {
+  const grid = ["", "X", "O", "X", "O", "X", "", "O", "X"];
+
+  const renderSymbol = (symbol) => {
+    let Component;
+    let colorClass;
+
+    if (symbol == "X") {
+      Component = Cross;
+      colorClass = "text-blue-700";
+    } else if (symbol == "O") {
+      Component = Oval;
+      colorClass = "text-yellow-700";
+    } else {
+      return (
+        <CrossOutline
+          className={`hidden size-16 text-blue-700 group-hover:block`}
+        />
+      );
+    }
+
+    return <Component className={`size-16 ${colorClass}`} />;
+  };
+
+  return (
+    <div className="flex flex-col space-y-4">
+      <header className="flex items-center justify-between px-1">
+        <div className="flex-1">
+          <img src={logo} alt="logo" />
+        </div>
+        <div className="h-14 w-36 rounded-xl bg-navy-400 px-8 py-4 inner-shadow-1-navy-900">
+          <div className="flex items-center justify-between text-silver-700">
+            <Cross className="size-5" />
+            <p className="text-h-xs uppercase">Turn</p>
+          </div>
+        </div>
+        <div className="flex-1">
+          <button className="ml-auto flex size-14 items-center justify-center rounded-xl bg-silver-700 inner-shadow-1-silver-900 hover:bg-silver-400">
+            <img src={restart} alt="restart" />
+          </button>
+        </div>
+      </header>
+
+      <main className="grid grid-cols-3 grid-rows-3 gap-5">
+        {grid.map((symbol) => (
+          <button
+            disabled={symbol != ""}
+            className="group flex size-36 items-center justify-center rounded-2xl bg-navy-400 inner-shadow-2-navy-900"
+          >
+            {renderSymbol(symbol)}
+          </button>
+        ))}
+      </main>
+
+      <footer className="flex items-center justify-between text-navy-700">
+        <div className="flex h-20 w-36 flex-col items-center justify-center rounded-2xl bg-blue-700">
+          <p className="text-base uppercase">X (you)</p>
+          <p className="text-h-m uppercase">14</p>
+        </div>
+        <div className="flex h-20 w-36 flex-col items-center justify-center rounded-2xl bg-silver-700">
+          <p className="text-base uppercase">Ties</p>
+          <p className="text-h-m uppercase">32</p>
+        </div>
+        <div className="flex h-20 w-36 flex-col items-center justify-center rounded-2xl bg-yellow-700">
+          <p className="text-base uppercase">O (cpu)</p>
+          <p className="text-h-m uppercase">11</p>
+        </div>
+      </footer>
+    </div>
+  );
+};
diff --git a/tailwind.config.js b/tailwind.config.js
index b0ea069..11299f7 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -21,7 +21,7 @@ const innerShadowPlugin = plugin(function ({ addUtilities, theme, e }) {
 
       return {
         [`.${e(`inner-shadow-${spacingKey}-${colorKey}`)}`]: {
-          filter: `drop-shadow(0 ${spacingValue} ${colorValue})`,
+          "box-shadow": `inset 0 -${spacingValue} ${colorValue}`,
         },
       };
     });