fem-projects/tic-tac-toe
Archived
1
Fork 0
Code Activity

tailwind changes

Browse source
This commit is contained in:
Hadeed 2024-06-03 21:11:30 +04:00
parent 0f447ad545
commit 935c266889
8 changed files with 68 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
index.html
View file

@ -11,13 +11,7 @@
/> />
<title>Tic Tac Toe</title> <title>Tic Tac Toe</title>
<style> <link rel="stylesheet" href="styles.css" />
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap");
@tailwind base;
@tailwind components;
@tailwind utilities;
</style>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

2
src/app.jsx
View file

@ -8,7 +8,7 @@ export default () => {
const players = useStore((state) => state.players); const players = useStore((state) => state.players);
return ( 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 />} {isGameRunning ? <Game players={players} key={gameKey} /> : <MainMenu />}
</main> </main>
); );

26
src/game.jsx
View file

@ -103,13 +103,13 @@ export default ({ players }) => {
const boxBackground = (index) => { const boxBackground = (index) => {
if (winner && winningCombo.includes(index)) { if (winner && winningCombo.includes(index)) {
if (winner == "X") { if (winner == "X") {
return "bg-blue-400 inner-shadow-2-blue-900"; return "bg-blue-400 inner-shadow-2-blue";
} else { } 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 ( return (
@ -119,7 +119,7 @@ export default ({ players }) => {
<div className="flex-1"> <div className="flex-1">
<img src={logo} alt="logo" /> <img src={logo} alt="logo" />
</div> </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"> <div className="flex items-center justify-between text-silver-700">
<TurnIndicator className="size-5" /> <TurnIndicator className="size-5" />
<p className="text-h-xs uppercase">Turn</p> <p className="text-h-xs uppercase">Turn</p>
@ -128,7 +128,7 @@ export default ({ players }) => {
<div className="flex-1"> <div className="flex-1">
<button <button
onClick={() => setRestartModal(true)} 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" /> <img src={restart} alt="restart" />
</button> </button>
@ -140,7 +140,7 @@ export default ({ players }) => {
<button <button
key={index} key={index}
disabled={symbol != "" || winner || cpuTurn} 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={() => { onClick={() => {
updateGrid((grid) => { updateGrid((grid) => {
grid[index] = turn; grid[index] = turn;
@ -152,16 +152,16 @@ export default ({ players }) => {
))} ))}
</main> </main>
<footer className="flex items-center justify-between text-navy-700"> <footer className="center flex-row justify-between text-navy-700">
<div className="flex h-20 w-36 flex-col items-center justify-center rounded-2xl bg-blue-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-base uppercase">X ({players.X})</p>
<p className="text-h-m uppercase">{score.X}</p> <p className="text-h-m uppercase">{score.X}</p>
</div> </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-base uppercase">Ties</p>
<p className="text-h-m uppercase">{score.ties}</p> <p className="text-h-m uppercase">{score.ties}</p>
</div> </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-base uppercase">O ({players.O})</p>
<p className="text-h-m uppercase">{score.O}</p> <p className="text-h-m uppercase">{score.O}</p>
</div> </div>
@ -176,15 +176,15 @@ export default ({ players }) => {
> >
<h2 className="text-h-l uppercase text-silver-700">Restart game?</h2> <h2 className="text-h-l uppercase text-silver-700">Restart game?</h2>
<form <form
className="flex items-center justify-around text-navy-700" className="center flex-row justify-around text-navy-700"
method="dialog" 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> <p className="text-h-xs uppercase">No, cancel</p>
</button> </button>
<button <button
onClick={restartGame} 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> <p className="text-h-xs uppercase">Yes, restart</p>
</button> </button>

8
src/mainMenu.jsx
View file

@ -21,9 +21,9 @@ export default () => {
}; };
return ( 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" /> <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"> <h2 className="mb-6 text-h-xs uppercase text-silver-700">
Pick player 1's mark Pick player 1's mark
</h2> </h2>
@ -57,13 +57,13 @@ export default () => {
<div className="w-full space-y-5"> <div className="w-full space-y-5">
<button <button
onClick={() => startGame("CPU")} 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> <p className="text-h-s uppercase text-navy-700">New game (vs cpu)</p>
</button> </button>
<button <button
onClick={() => startGame("P2")} 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"> <p className="text-h-s uppercase text-navy-700">
New game (vs player) New game (vs player)

2
src/modal.jsx
View file

@ -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" className="h-64 w-screen max-w-[100vw] bg-navy-700 backdrop:bg-black/50"
ref={ref} 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 className={className}>{children}</div>
</div> </div>
</dialog> </dialog>

1
src/store.jsx
View file

@ -1,4 +1,3 @@
import { produce } from "immer";
import { create } from "zustand"; import { create } from "zustand";
export const useStore = create((set) => ({ export const useStore = create((set) => ({

14
styles.css Normal file
View file

@ -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;
}
}

62
tailwind.config.js
View file

@ -1,31 +1,29 @@
import plugin from "tailwindcss/plugin"; import plugin from "tailwindcss/plugin";
const innerShadowPlugin = plugin(function ({ addUtilities, theme, e }) { 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 = { const spacing = {
1: "0.25rem", 1: "0.25rem",
2: "0.5rem", 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 colorValue = colors[colorKey];
const color = colorValue["900"];
return Object.keys(spacing).map((spacingKey) => { for (const spacingKey in spacing) {
const spacingValue = spacing[spacingKey]; const spacingValue = spacing[spacingKey];
utilities[`.${e(`inner-shadow-${spacingKey}-${colorKey}`)}`] = {
return { "box-shadow": `inset 0 -${spacingValue} ${color}`,
[`.${e(`inner-shadow-${spacingKey}-${colorKey}`)}`]: {
"box-shadow": `inset 0 -${spacingValue} ${colorValue}`,
},
}; };
}); }
}); }
addUtilities(utilities); addUtilities(utilities);
}); });
@ -34,19 +32,27 @@ export default {
content: ["./index.html", "./src/**/*.jsx"], content: ["./index.html", "./src/**/*.jsx"],
theme: { theme: {
colors: { 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", 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: { fontFamily: {
sans: ["Outfit", "sans-serif"], sans: ["Outfit", "sans-serif"],