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

Make responsive

Browse source
This commit is contained in:
Hadeed 2024-06-04 22:16:26 +04:00
parent b1259b1f3d
commit b55ac0a0ff
3 changed files with 27 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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="center min-h-screen bg-navy-700"> <main className="center min-h-screen bg-navy-700 p-6">
{isGameRunning ? <Game players={players} key={gameKey} /> : <MainMenu />} {isGameRunning ? <Game players={players} key={gameKey} /> : <MainMenu />}
</main> </main>
); );

36
src/game.jsx
View file

@ -52,15 +52,15 @@ const GridButton = ({ onClick, symbol, turn, disabled, won }) => {
return ( return (
<button <button
onClick={onClick} onClick={onClick}
className={`center group size-36 rounded-2xl ${background}`} className={`center group size-24 rounded-2xl sm:size-36 ${background}`}
disabled={symbol != "" || disabled} disabled={symbol != "" || disabled}
> >
{symbol == "" ? ( {symbol == "" ? (
<SymbolOutline <SymbolOutline
className={`hidden size-16 group-enabled:group-hover:block ${outlineColor}`} className={`hidden size-10 group-enabled:group-hover:block sm:size-16 ${outlineColor}`}
/> />
) : ( ) : (
<Symbol className={`size-16 ${symbolColor}`} /> <Symbol className={`size-10 sm:size-16 ${symbolColor}`} />
)} )}
</button> </button>
); );
@ -146,10 +146,10 @@ 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"> <div className="center h-14 w-24 flex-row rounded-xl bg-navy-400 px-4 py-2 inner-shadow-1-navy sm:w-36 sm:px-8 sm:py-4">
<div className="flex items-center justify-between text-silver-700"> <div className="flex w-full items-center justify-between text-silver-700">
<TurnIndicator className="size-5" /> <TurnIndicator className="size-4 sm:size-5" />
<p className="text-h-xs uppercase">Turn</p> <p className="text-base uppercase sm:text-h-xs">Turn</p>
</div> </div>
</div> </div>
<div className="flex-1"> <div className="flex-1">
@ -180,7 +180,9 @@ export default ({ players }) => {
<footer className="center flex-row justify-between text-navy-700"> <footer className="center flex-row justify-between text-navy-700">
{Object.values(scores).map((score) => ( {Object.values(scores).map((score) => (
<div className={`center h-20 w-36 rounded-2xl ${score.bg}`}> <div
className={`center h-16 w-24 rounded-2xl sm:h-20 sm:w-36 ${score.bg}`}
>
<p className="text-base uppercase">{score.display}</p> <p className="text-base uppercase">{score.display}</p>
<p className="text-h-m uppercase">{score.value}</p> <p className="text-h-m uppercase">{score.value}</p>
</div> </div>
@ -192,7 +194,9 @@ export default ({ players }) => {
className="space-y-8" className="space-y-8"
onClose={() => setRestartModal(false)} onClose={() => setRestartModal(false)}
> >
<h2 className="text-h-l uppercase text-silver-700">Restart game?</h2> <h2 className="text-center text-h-m uppercase text-silver-700 sm:text-h-l">
Restart game?
</h2>
<form <form
className="center flex-row space-x-4 text-navy-700" className="center flex-row space-x-4 text-navy-700"
method="dialog" method="dialog"
@ -216,7 +220,9 @@ export default ({ players }) => {
{(() => { {(() => {
if (tied) { if (tied) {
return ( return (
<h2 className="text-h-l uppercase text-silver-700">Round tied</h2> <h2 className="text-center text-h-m uppercase text-silver-700 sm:text-h-l">
Round tied
</h2>
); );
} }
@ -226,14 +232,16 @@ export default ({ players }) => {
return ( return (
<> <>
<p className="text-h-xs text-silver-700"> <p className="text-center text-base text-silver-700 sm:text-h-xs">
{players[winner]} wins! {players[winner]} wins!
</p> </p>
<div <div
className={`mt-4 flex items-center space-x-6 ${headingColor}`} className={`mt-4 flex items-center space-x-2 sm:space-x-6 ${headingColor}`}
> >
<HeadingSymbol className="size-16" /> <HeadingSymbol className="sm:size-18 size-[28px]" />
<h2 className="text-h-l uppercase">Takes the round</h2> <h2 className="text-center text-h-m uppercase sm:text-h-l">
Takes the round
</h2>
</div> </div>
</> </>
); );

8
src/mainMenu.jsx
View file

@ -21,9 +21,9 @@ export default () => {
}; };
return ( return (
<div className="center m-6 w-full max-w-lg space-y-10"> <div className="center w-full max-w-lg space-y-10">
<img src={logo} alt="logo" /> <img src={logo} alt="logo" />
<div className="center inner-shadow-2-navy w-full rounded-2xl bg-navy-400 p-6"> <div className="center w-full rounded-2xl bg-navy-400 p-6 inner-shadow-2-navy">
<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="center inner-shadow-2-yellow w-full rounded-2xl bg-yellow-700 p-4 hover:bg-yellow-400" className="center w-full rounded-2xl bg-yellow-700 p-4 inner-shadow-2-yellow 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="center inner-shadow-2-blue w-full rounded-2xl bg-blue-700 p-4 hover:bg-blue-400" className="center w-full rounded-2xl bg-blue-700 p-4 inner-shadow-2-blue 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)