diff --git a/index.html b/index.html
index 4c5e4f6..5312e4b 100644
--- a/index.html
+++ b/index.html
@@ -11,13 +11,7 @@
/>
<title>Tic Tac Toe</title>
- <style>
- @import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap");
-
- @tailwind base;
- @tailwind components;
- @tailwind utilities;
- </style>
+ <link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="root"></div>
diff --git a/src/app.jsx b/src/app.jsx
index cf51cc4..49e6232 100644
--- a/src/app.jsx
+++ b/src/app.jsx
@@ -8,7 +8,7 @@ export default () => {
const players = useStore((state) => state.players);
return (
- <main className="flex min-h-screen items-center justify-center bg-navy-700">
+ <main className="center min-h-screen bg-navy-700">
{isGameRunning ? <Game players={players} key={gameKey} /> : <MainMenu />}
</main>
);
diff --git a/src/game.jsx b/src/game.jsx
index 7069fde..2a3bc57 100644
--- a/src/game.jsx
+++ b/src/game.jsx
@@ -103,13 +103,13 @@ export default ({ players }) => {
const boxBackground = (index) => {
if (winner && winningCombo.includes(index)) {
if (winner == "X") {
- return "bg-blue-400 inner-shadow-2-blue-900";
+ return "bg-blue-400 inner-shadow-2-blue";
} else {
- return "bg-yellow-400 inner-shadow-2-yellow-900";
+ return "bg-yellow-400 inner-shadow-2-yellow";
}
}
- return "bg-navy-400 inner-shadow-2-navy-900";
+ return "bg-navy-400 inner-shadow-2-navy";
};
return (
@@ -119,7 +119,7 @@ export default ({ players }) => {
<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="inner-shadow-1-navy h-14 w-36 rounded-xl bg-navy-400 px-8 py-4">
<div className="flex items-center justify-between text-silver-700">
<TurnIndicator className="size-5" />
<p className="text-h-xs uppercase">Turn</p>
@@ -128,7 +128,7 @@ export default ({ players }) => {
<div className="flex-1">
<button
onClick={() => setRestartModal(true)}
- className="ml-auto flex size-14 items-center justify-center rounded-xl bg-silver-700 inner-shadow-1-silver-900 hover:bg-silver-400"
+ className="center inner-shadow-1-silver ml-auto size-14 rounded-xl bg-silver-700 hover:bg-silver-400"
>
<img src={restart} alt="restart" />
</button>
@@ -140,7 +140,7 @@ export default ({ players }) => {
<button
key={index}
disabled={symbol != "" || winner || cpuTurn}
- className={`group flex size-36 items-center justify-center rounded-2xl ${boxBackground(index)}`}
+ className={`center group size-36 rounded-2xl ${boxBackground(index)}`}
onClick={() => {
updateGrid((grid) => {
grid[index] = turn;
@@ -152,16 +152,16 @@ export default ({ players }) => {
))}
</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">
+ <footer className="center flex-row justify-between text-navy-700">
+ <div className="center h-20 w-36 rounded-2xl bg-blue-700">
<p className="text-base uppercase">X ({players.X})</p>
<p className="text-h-m uppercase">{score.X}</p>
</div>
- <div className="flex h-20 w-36 flex-col items-center justify-center rounded-2xl bg-silver-700">
+ <div className="center h-20 w-36 rounded-2xl bg-silver-700">
<p className="text-base uppercase">Ties</p>
<p className="text-h-m uppercase">{score.ties}</p>
</div>
- <div className="flex h-20 w-36 flex-col items-center justify-center rounded-2xl bg-yellow-700">
+ <div className="center h-20 w-36 rounded-2xl bg-yellow-700">
<p className="text-base uppercase">O ({players.O})</p>
<p className="text-h-m uppercase">{score.O}</p>
</div>
@@ -176,15 +176,15 @@ export default ({ players }) => {
>
<h2 className="text-h-l uppercase text-silver-700">Restart game?</h2>
<form
- className="flex items-center justify-around text-navy-700"
+ className="center flex-row justify-around text-navy-700"
method="dialog"
>
- <button className="rounded-xl bg-silver-700 px-5 py-4 inner-shadow-1-silver-900 hover:bg-silver-400">
+ <button className="inner-shadow-1-silver rounded-xl bg-silver-700 px-5 py-4 hover:bg-silver-400">
<p className="text-h-xs uppercase">No, cancel</p>
</button>
<button
onClick={restartGame}
- className="rounded-xl bg-yellow-700 px-5 py-4 inner-shadow-1-yellow-900 hover:bg-yellow-400"
+ className="inner-shadow-1-yellow rounded-xl bg-yellow-700 px-5 py-4 hover:bg-yellow-400"
>
<p className="text-h-xs uppercase">Yes, restart</p>
</button>
diff --git a/src/mainMenu.jsx b/src/mainMenu.jsx
index f633e18..e150b34 100644
--- a/src/mainMenu.jsx
+++ b/src/mainMenu.jsx
@@ -21,9 +21,9 @@ export default () => {
};
return (
- <div className="m-6 flex w-full max-w-lg flex-col items-center space-y-10">
+ <div className="center m-6 w-full max-w-lg space-y-10">
<img src={logo} alt="logo" />
- <div className="flex w-full flex-col items-center justify-center rounded-2xl bg-navy-400 p-6 inner-shadow-2-navy-900">
+ <div className="center inner-shadow-2-navy w-full rounded-2xl bg-navy-400 p-6">
<h2 className="mb-6 text-h-xs uppercase text-silver-700">
Pick player 1's mark
</h2>
@@ -57,13 +57,13 @@ export default () => {
<div className="w-full space-y-5">
<button
onClick={() => startGame("CPU")}
- className="flex w-full items-center justify-center rounded-2xl bg-yellow-700 p-4 inner-shadow-2-yellow-900 hover:bg-yellow-400"
+ className="center inner-shadow-2-yellow w-full rounded-2xl bg-yellow-700 p-4 hover:bg-yellow-400"
>
<p className="text-h-s uppercase text-navy-700">New game (vs cpu)</p>
</button>
<button
onClick={() => startGame("P2")}
- className="flex w-full items-center justify-center rounded-2xl bg-blue-700 p-4 inner-shadow-2-blue-900 hover:bg-blue-400"
+ className="center inner-shadow-2-blue w-full rounded-2xl bg-blue-700 p-4 hover:bg-blue-400"
>
<p className="text-h-s uppercase text-navy-700">
New game (vs player)
diff --git a/src/modal.jsx b/src/modal.jsx
index 02c1935..62857d9 100644
--- a/src/modal.jsx
+++ b/src/modal.jsx
@@ -20,7 +20,7 @@ export default ({ isOpen, children, className, onClose }) => {
className="h-64 w-screen max-w-[100vw] bg-navy-700 backdrop:bg-black/50"
ref={ref}
>
- <div className="flex h-full w-full items-center justify-center">
+ <div className="center h-full w-full">
<div className={className}>{children}</div>
</div>
</dialog>
diff --git a/src/store.jsx b/src/store.jsx
index e0b51d2..11b791f 100644
--- a/src/store.jsx
+++ b/src/store.jsx
@@ -1,4 +1,3 @@
-import { produce } from "immer";
import { create } from "zustand";
export const useStore = create((set) => ({
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..dc25497
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,14 @@
+@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap");
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+ .center {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ }
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index c97370f..aff0558 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,31 +1,29 @@
import plugin from "tailwindcss/plugin";
const innerShadowPlugin = plugin(function ({ addUtilities, theme, e }) {
- const colors = Object.keys(theme("colors"))
- .filter((key) => key.endsWith("-900"))
- .reduce((obj, key) => {
- obj[key] = theme("colors")[key];
- return obj;
- }, {});
-
const spacing = {
1: "0.25rem",
2: "0.5rem",
};
- const utilities = Object.keys(colors).flatMap((colorKey) => {
+ const utilities = {};
+
+ const colors = theme("colors");
+ for (const colorKey in colors) {
+ if (typeof colors[colorKey] != "object") {
+ continue;
+ }
+
const colorValue = colors[colorKey];
+ const color = colorValue["900"];
- return Object.keys(spacing).map((spacingKey) => {
+ for (const spacingKey in spacing) {
const spacingValue = spacing[spacingKey];
-
- return {
- [`.${e(`inner-shadow-${spacingKey}-${colorKey}`)}`]: {
- "box-shadow": `inset 0 -${spacingValue} ${colorValue}`,
- },
+ utilities[`.${e(`inner-shadow-${spacingKey}-${colorKey}`)}`] = {
+ "box-shadow": `inset 0 -${spacingValue} ${color}`,
};
- });
- });
+ }
+ }
addUtilities(utilities);
});
@@ -34,19 +32,27 @@ export default {
content: ["./index.html", "./src/**/*.jsx"],
theme: {
colors: {
- "navy-900": "#10212A",
- "navy-700": "#1A2A33",
- "navy-400": "#1F3641",
- "silver-900": "#6B8997",
- "silver-700": "#A8BFC9",
- "silver-400": "#DBE8ED",
- "blue-900": "#118C87",
- "blue-700": "#31C3BD",
- "blue-400": "#65E9E4",
- "yellow-900": "#CC8B13",
- "yellow-700": "#F2B137",
- "yellow-400": "#FFC860",
black: "#000",
+ navy: {
+ 400: "#1F3641",
+ 700: "#1A2A33",
+ 900: "#10212A",
+ },
+ silver: {
+ 400: "#DBE8ED",
+ 700: "#A8BFC9",
+ 900: "#6B8997",
+ },
+ blue: {
+ 400: "#65E9E4",
+ 700: "#31C3BD",
+ 900: "#118C87",
+ },
+ yellow: {
+ 400: "#FFC860",
+ 700: "#F2B137",
+ 900: "#CC8B13",
+ },
},
fontFamily: {
sans: ["Outfit", "sans-serif"],