75 lines
2.4 KiB
JavaScript
75 lines
2.4 KiB
JavaScript
import * as RadioGroup from "@radix-ui/react-radio-group";
|
|
import { useState } from "react";
|
|
|
|
import logo from "../assets/logo.svg";
|
|
import Cross from "../assets/icon-x.svg?react";
|
|
import Oval from "../assets/icon-o.svg?react";
|
|
|
|
import { setIsGameRunning, updatePlayers } from "./store";
|
|
|
|
export default () => {
|
|
const [playerOneSymbol, setPlayerOneSymbol] = useState("X");
|
|
const playerTwoSymbol = playerOneSymbol == "X" ? "O" : "X";
|
|
|
|
const startGame = (playerTwo) => {
|
|
updatePlayers({
|
|
[playerOneSymbol]: "P1",
|
|
[playerTwoSymbol]: playerTwo,
|
|
});
|
|
|
|
setIsGameRunning(true);
|
|
};
|
|
|
|
return (
|
|
<div className="center m-6 w-full max-w-lg space-y-10">
|
|
<img src={logo} alt="logo" />
|
|
<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>
|
|
<RadioGroup.Root
|
|
className="mb-4 flex h-20 w-full items-center justify-between rounded-xl bg-navy-700 p-2"
|
|
value={playerOneSymbol}
|
|
onValueChange={setPlayerOneSymbol}
|
|
loop={false}
|
|
>
|
|
{[
|
|
["X", Cross],
|
|
["O", Oval],
|
|
].map(([value, Symbol]) => (
|
|
<RadioGroup.Item
|
|
className="group h-full w-1/2 rounded-xl hover:bg-silver-700/5 data-[state='checked']:bg-silver-700"
|
|
key={value}
|
|
value={value}
|
|
>
|
|
<Symbol
|
|
width="32"
|
|
height="32"
|
|
className="m-auto text-silver-700 group-data-[state='checked']:text-navy-700"
|
|
/>
|
|
</RadioGroup.Item>
|
|
))}
|
|
</RadioGroup.Root>
|
|
<p className="text-base uppercase text-silver-700">
|
|
Remember : X goes first
|
|
</p>
|
|
</div>
|
|
<div className="w-full space-y-5">
|
|
<button
|
|
onClick={() => startGame("CPU")}
|
|
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="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)
|
|
</p>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|