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