feat: refactor players and bots selector

cardano-scaling · Nov 27, 2024 · 04d0dfa · 04d0dfa
1 parent d113c3f
commit 04d0dfa
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 34 deletions.
diff --git a/src/components/SetNameModal/SetNameModal.tsx b/src/components/SetNameModal/SetNameModal.tsx
@@ -19,8 +19,15 @@ const SetNameModal: FC<SetNameModalProps> = ({
   submit,
   title,
 }) => {
-  const { setGameData, gameData, accountData, players, setPlayers, bots } =
-    useAppContext();
+  const {
+    accountData,
+    bots,
+    gameData,
+    players,
+    setBots,
+    setGameData,
+    setPlayers,
+  } = useAppContext();
 
   useEffect(() => {
     const petName = accountData ? accountData.auth_name : generateRandomName();
@@ -39,8 +46,14 @@ const SetNameModal: FC<SetNameModalProps> = ({
     setGameData((prev) => ({ ...prev, petName: generateRandomName() }));
   };
 
-  const handleSliderChange = (event) => {
-    setPlayers(Number(event.target.value));
+  const handleSelectPlayers = (event) => {
+    const value = Number(event.target.value);
+    setPlayers(value);
+    if (bots > value - 1) setBots(value - 1);
+  };
+
+  const handleSelectBots = (event) => {
+    setBots(Number(event.target.value));
   };
 
   const isButtonDisabled =
@@ -102,31 +115,61 @@ const SetNameModal: FC<SetNameModalProps> = ({
         {title !== "Join Multiplayer" && (
           <>
             <div className="border-2 border-white px-6 pt-8 pb-6 relative">
-              <label className="absolute -top-5 left-6 bg-[#1D1715] text-white px-2 text-3xl">
+              <div className="absolute -top-5 left-6 bg-[#1D1715] text-white px-2 text-3xl">
                 Number of Players
-              </label>
-              <input
-                className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer range-slider"
-                max={MAX_PLAYERS}
-                min="1"
-                onChange={handleSliderChange}
-                type="range"
-                value={players}
-              />
-              <div className="flex justify-between text-base text-gray-400 mb-6">
+              </div>
+              <div className="flex justify-between">
                 {Array.from({ length: MAX_PLAYERS }, (_, i) => i + 1).map(
-                  (i) => (
-                    <span key={i}>{i}</span>
-                  ),
+                  (value) => {
+                    if (value === 1) return null;
+                    return (
+                      <label
+                        className="flex items-center gap-2"
+                        htmlFor={`players-${value}`}
+                        key={value}
+                      >
+                        <input
+                          checked={players === value}
+                          className="h-6 w-6 cursor-pointer"
+                          id={`players-${value}`}
+                          onChange={handleSelectPlayers}
+                          type="radio"
+                          value={value}
+                        />
+                        {value}
+                      </label>
+                    );
+                  },
                 )}
               </div>
-              <div className="flex justify-between text-3xl">
-                <p className="">
-                  Players: <span className="font-semibold">{players}</span>
-                </p>
-                <p className="">
-                  Bots: <span className="font-semibold">{bots}</span>
-                </p>
+            </div>
+            <div className="border-2 border-white px-6 pt-8 pb-6 relative">
+              <div className="absolute -top-5 left-6 bg-[#1D1715] text-white px-2 text-3xl">
+                Number of Bots
+              </div>
+              <div className="flex justify-between">
+                {Array.from({ length: MAX_PLAYERS }, (_, i) => i).map(
+                  (value) => (
+                    <label
+                      className="flex items-center gap-2"
+                      htmlFor={`bots-${value}`}
+                      key={value}
+                    >
+                      <input
+                        checked={bots === value}
+                        className="h-6 w-6 peer disabled:cursor-not-allowed disabled:opacity-50"
+                        disabled={value > players - 1}
+                        id={`bots-${value}`}
+                        onChange={handleSelectBots}
+                        type="radio"
+                        value={value}
+                      />
+                      <span className="peer-disabled:cursor-not-allowed peer-disabled:opacity-50 cursor-pointer">
+                        {value}
+                      </span>
+                    </label>
+                  ),
+                )}
               </div>
             </div>
             <RegionSelector />

diff --git a/src/context/AppContextProvider.tsx b/src/context/AppContextProvider.tsx
@@ -9,7 +9,7 @@ import {
 } from "../types";
 import useBestRegion from "../hooks/useBestRegion";
 import useKeys from "../hooks/useKeys";
-import { MAX_PLAYERS, REGIONS } from "../constants";
+import { REGIONS } from "../constants";
 import { useQuery } from "@tanstack/react-query";
 import { useSessionReferenceKeyCache } from "../utils/localStorage";
 import { checkSignin, fetchGlobalStats } from "../utils/requests";
@@ -25,8 +25,8 @@ const AppContextProvider: FC<PropsWithChildren> = ({ children }) => {
   });
   const [accountData, setAccountData] = useState<Account>();
   const [region, setRegion] = useState<Region | null>(null);
-  const [players, setPlayers] = useState(1);
-  const bots = MAX_PLAYERS - players;
+  const [players, setPlayers] = useState(2);
+  const [bots, setBots] = useState(0);
 
   const { data: userData, isLoading: isLoadingUserData } =
     useQuery<AuthResponse>({
@@ -71,6 +71,7 @@ const AppContextProvider: FC<PropsWithChildren> = ({ children }) => {
       players,
       region,
       setAccountData,
+      setBots,
       setGameData,
       setPlayers,
       setRegion,

diff --git a/src/context/useAppContext.ts b/src/context/useAppContext.ts
@@ -7,7 +7,6 @@ import {
   Keys,
   Region,
 } from "../types";
-import { MAX_PLAYERS } from "../constants";
 
 interface AppContextInterface {
   accountData?: Account;
@@ -21,6 +20,7 @@ interface AppContextInterface {
   players: number;
   region: Region | null;
   setAccountData: Dispatch<React.SetStateAction<Account | undefined>>;
+  setBots: Dispatch<React.SetStateAction<number>>;
   setGameData: Dispatch<React.SetStateAction<GameData>>;
   setPlayers: Dispatch<React.SetStateAction<number>>;
   setRegion: Dispatch<React.SetStateAction<Region | null>>;
@@ -29,15 +29,16 @@ interface AppContextInterface {
 export const AppContext = createContext<AppContextInterface>({
   accountData: undefined,
   bestRegion: null,
-  bots: MAX_PLAYERS - 1,
+  bots: 0,
   gameData: { petName: "", code: "", type: EGameType.SOLO },
   globalStats: undefined,
   isLoadingGlobalStats: false,
   isLoadingUserData: false,
   keys: null,
-  players: 1,
+  players: 2,
   region: null,
   setAccountData: () => {},
+  setBots: () => {},
   setGameData: () => {},
   setPlayers: () => {},
   setRegion: () => {},

diff --git a/src/hooks/useUrls.ts b/src/hooks/useUrls.ts
@@ -10,12 +10,12 @@ const healthUrl = (region: string) => {
 };
 
 const useUrls = () => {
-  const { region } = useAppContext();
+  const { region, players, bots } = useAppContext();
 
   if (IS_LOCAL) {
     return {
       newGame: (address: string) =>
-        `http://localhost:3000/new_game?address=${address}`,
+        `http://localhost:3000/new_game?address=${address}&player_count=${players}&bot_count=${bots}`,
       addPlayer: (address: string, code: string) =>
         `http://localhost:3000/add_player?address=${address}&id=${code}`,
       share: (code?: string) =>
@@ -24,7 +24,7 @@ const useUrls = () => {
   } else {
     return {
       newGame: (address: string) =>
-        `https://api.${region?.value}.hydra-doom.sundae.fi/new_game?address=${address}`,
+        `https://api.${region?.value}.hydra-doom.sundae.fi/new_game?address=${address}&player_count=${players}&bot_count=${bots}`,
       addPlayer: (address: string, code: string) =>
         `https://api.${region?.value}.hydra-doom.sundae.fi/add_player?address=${address}&id=${code}`,
       share: (code?: string) =>