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

Make responsive

Browse source
This commit is contained in:
Hadeed 2024-06-01 09:14:51 +04:00
parent 71f6a1edcd
commit 5ecdcefb4a
2 changed files with 51 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

99
src/mainMenu.jsx
View file

@ -7,63 +7,64 @@ export default () => {
const [playerSymbol, setPlayerSymbol] = useState("cross"); const [playerSymbol, setPlayerSymbol] = useState("cross");
return ( return (
<div className="flex w-[460px] flex-col items-center space-y-[40px]"> <div className="m-5 flex w-full max-w-lg flex-col items-center space-y-10">
<img src={logo} alt="logo" /> <img src={logo} alt="logo" />
<div className="bg-navy-400 flex w-full flex-col items-center justify-center space-y-[24px] rounded-[15px] p-[24px] drop-shadow-[0_8px_0_#10212A]"> <div className="flex w-full flex-col items-center justify-center rounded-2xl bg-navy-400 p-6 drop-shadow-[0_8px_0_#10212A]">
<h2 className="text-silver-700 text-h-xs uppercase"> <h2 className="mb-6 text-h-xs uppercase text-silver-700">
Pick player 1's mark Pick player 1's mark
</h2> </h2>
<div className="flex w-full flex-col items-center justify-center space-y-[17px]"> <RadioGroup.Root
<RadioGroup.Root className="mb-4 flex h-20 w-full items-center justify-between rounded-xl bg-navy-700 p-2"
className="bg-navy-700 flex h-[72px] w-full items-center justify-between rounded-[10px] p-[8px]" defaultValue="cross"
defaultValue="cross" value={playerSymbol}
value={playerSymbol} onValueChange={setPlayerSymbol}
onValueChange={setPlayerSymbol} loop={false}
>
<RadioGroup.Item
className="h-full w-1/2 rounded-xl hover:bg-silver-700/5 data-[state='checked']:bg-silver-700"
value="cross"
> >
<RadioGroup.Item <svg
className="data-[state='checked']:bg-silver-700 hover:bg-silver-700/5 flex h-full w-1/2 items-center justify-center rounded-[10px]" className="m-auto"
value="cross" width="32"
height="32"
viewBox="0 0 64 64"
xmlns="http://www.w3.org/2000/svg"
> >
<svg <path
width="32" d="M15.002 1.147 32 18.145 48.998 1.147a3 3 0 0 1 4.243 0l9.612 9.612a3 3 0 0 1 0 4.243L45.855 32l16.998 16.998a3 3 0 0 1 0 4.243l-9.612 9.612a3 3 0 0 1-4.243 0L32 45.855 15.002 62.853a3 3 0 0 1-4.243 0L1.147 53.24a3 3 0 0 1 0-4.243L18.145 32 1.147 15.002a3 3 0 0 1 0-4.243l9.612-9.612a3 3 0 0 1 4.243 0Z"
height="32" fill={playerSymbol != "cross" ? "#A8BFC9" : "#1A2A33"}
viewBox="0 0 64 64" />
xmlns="http://www.w3.org/2000/svg" </svg>
> </RadioGroup.Item>
<path <RadioGroup.Item
d="M15.002 1.147 32 18.145 48.998 1.147a3 3 0 0 1 4.243 0l9.612 9.612a3 3 0 0 1 0 4.243L45.855 32l16.998 16.998a3 3 0 0 1 0 4.243l-9.612 9.612a3 3 0 0 1-4.243 0L32 45.855 15.002 62.853a3 3 0 0 1-4.243 0L1.147 53.24a3 3 0 0 1 0-4.243L18.145 32 1.147 15.002a3 3 0 0 1 0-4.243l9.612-9.612a3 3 0 0 1 4.243 0Z" className="h-full w-1/2 rounded-xl hover:bg-silver-700/5 data-[state='checked']:bg-silver-700"
fill={playerSymbol != "cross" ? "#A8BFC9" : "#1A2A33"} value="oval"
/> >
</svg> <svg
</RadioGroup.Item> className="m-auto"
<RadioGroup.Item width="32"
className="data-[state='checked']:bg-silver-700 hover:bg-silver-700/5 flex h-full w-1/2 items-center justify-center rounded-[10px]" height="32"
value="oval" viewBox="0 0 64 64"
xmlns="http://www.w3.org/2000/svg"
> >
<svg <path
width="32" d="M32 0c17.673 0 32 14.327 32 32 0 17.673-14.327 32-32 32C14.327 64 0 49.673 0 32 0 14.327 14.327 0 32 0Zm0 18.963c-7.2 0-13.037 5.837-13.037 13.037 0 7.2 5.837 13.037 13.037 13.037 7.2 0 13.037-5.837 13.037-13.037 0-7.2-5.837-13.037-13.037-13.037Z"
height="32" fill={playerSymbol != "oval" ? "#A8BFC9" : "#1A2A33"}
viewBox="0 0 64 64" />
xmlns="http://www.w3.org/2000/svg" </svg>
> </RadioGroup.Item>
<path </RadioGroup.Root>
d="M32 0c17.673 0 32 14.327 32 32 0 17.673-14.327 32-32 32C14.327 64 0 49.673 0 32 0 14.327 14.327 0 32 0Zm0 18.963c-7.2 0-13.037 5.837-13.037 13.037 0 7.2 5.837 13.037 13.037 13.037 7.2 0 13.037-5.837 13.037-13.037 0-7.2-5.837-13.037-13.037-13.037Z" <p className="text-base uppercase text-silver-700">
fill={playerSymbol != "oval" ? "#A8BFC9" : "#1A2A33"} Remember : X goes first
/> </p>
</svg>
</RadioGroup.Item>
</RadioGroup.Root>
<p className="text-silver-700 text-base uppercase">
Remember : X goes first
</p>
</div>
</div> </div>
<div className="flex w-full flex-col items-center justify-between space-y-[20px]"> <div className="w-full space-y-5">
<button className="flex w-full items-center justify-center rounded-[15px] bg-yellow-700 p-[17px] drop-shadow-[0_8px_0_#CC8B13] hover:bg-yellow-400"> <button className="flex w-full items-center justify-center rounded-2xl bg-yellow-700 p-4 drop-shadow-[0_8px_0_#CC8B13] hover:bg-yellow-400">
<p className="text-h-s text-navy-700 uppercase">New game (vs cpu)</p> <p className="text-h-s uppercase text-navy-700">New game (vs cpu)</p>
</button> </button>
<button className="flex w-full items-center justify-center rounded-[15px] bg-blue-700 p-[17px] drop-shadow-[0_8px_0_#118C87] hover:bg-blue-400"> <button className="flex w-full items-center justify-center rounded-2xl bg-blue-700 p-4 drop-shadow-[0_8px_0_#118C87] hover:bg-blue-400">
<p className="text-h-s text-navy-700 uppercase"> <p className="text-h-s uppercase text-navy-700">
New game (vs player) New game (vs player)
</p> </p>
</button> </button>

2
tailwind.config.js
View file

@ -13,7 +13,7 @@ export default {
"yellow-400": "#FFC860", "yellow-400": "#FFC860",
}, },
fontFamily: { fontFamily: {
sans: ["Outfit"], sans: ["Outfit", "sans-serif"],
}, },
fontSize: { fontSize: {
base: [ base: [