From b1ccddba8e1e93573b616a1a4724ff467ec0888c Mon Sep 17 00:00:00 2001 From: Dan Bastin Date: Fri, 27 Dec 2024 11:04:45 -0500 Subject: [PATCH] Start test game (#32) Frontend for starting custom games. --- .../Gameboard/_subcomponents/UnitsBoard.tsx | 4 +- .../_components/HomePage/HomePagePlayMode.tsx | 136 ++++++++ .../CreateGameForm/CreateGameForm.tsx | 302 +++++++++--------- src/app/page.tsx | 12 +- 4 files changed, 291 insertions(+), 163 deletions(-) create mode 100644 src/app/_components/HomePage/HomePagePlayMode.tsx diff --git a/src/app/_components/Gameboard/_subcomponents/UnitsBoard.tsx b/src/app/_components/Gameboard/_subcomponents/UnitsBoard.tsx index 8672ba5..37a657b 100644 --- a/src/app/_components/Gameboard/_subcomponents/UnitsBoard.tsx +++ b/src/app/_components/Gameboard/_subcomponents/UnitsBoard.tsx @@ -92,7 +92,7 @@ const UnitsBoard: React.FC = ({ {/* Opponent's Ground Units */} {opponentUnits.map((card: ICardData) => ( - + ))} @@ -101,7 +101,7 @@ const UnitsBoard: React.FC = ({ {/* Player's Ground Units */} {playerUnits.map((card: ICardData) => ( - + ))} diff --git a/src/app/_components/HomePage/HomePagePlayMode.tsx b/src/app/_components/HomePage/HomePagePlayMode.tsx new file mode 100644 index 0000000..00bec36 --- /dev/null +++ b/src/app/_components/HomePage/HomePagePlayMode.tsx @@ -0,0 +1,136 @@ +import React, { useEffect } from "react"; +import { Typography, Box, Tab, Tabs, Card, Button } from "@mui/material"; +import { useRouter } from "next/navigation"; +import CreateGameForm from "../_sharedcomponents/CreateGameForm/CreateGameForm"; +import { useUser } from "@/app/_contexts/User.context"; + +const HomePagePlayMode: React.FC = () => { + const router = useRouter(); + const [value, setValue] = React.useState(0); + const [testGameList, setTestGameList] = React.useState([]); + const { user } = useUser(); + const showTestGames = process.env.NODE_ENV === "development" && user?.id === "exe66"; + + const handleChange = (event: React.SyntheticEvent, newValue: number) => { + setValue(newValue); + } + + const handleStartTestGame = async (filename: string) => { + + try { + // const payload = { + // user: user, + // deck: deckData + // }; + const response = await fetch("http://localhost:9500/api/start-test-game", + { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({filename: filename}), + } + ); + + if (!response.ok) { + throw new Error("Failed to start test game"); + } + + router.push("/GameBoard"); + + } catch (error) { + console.error(error); + } + + } + + useEffect(() => { + const fetchGameList = async () => { + try { + const response = await fetch("http://localhost:9500/api/test-game-setups", + { + method: "GET", + headers: { + "Content-Type": "application/json", + }, + } + ); + + if (!response.ok) { + throw new Error("Failed to get test game list"); + } + + const data = await response.json(); + setTestGameList(data); + + } catch (error) { + console.error(error); + } + }; + fetchGameList(); + }, []); + + const styles = { + tabStyles: { + color: "white", + } + }; + + return ( + + + + + + + {showTestGames && } + + + + PlayGame + + + + + {showTestGames && + + + Test Game Setups + {testGameList.map((filename, index) => { + return ( + + ); + })} + + + } + + + ); +}; + +interface ITabPanelProps { + children?: React.ReactNode; + index: number; + value: number; +} + +const TabPanel: React.FC = (props) => { + const { children, value, index } = props; + + return ( + + ); +}; + +export default HomePagePlayMode; \ No newline at end of file diff --git a/src/app/_components/_sharedcomponents/CreateGameForm/CreateGameForm.tsx b/src/app/_components/_sharedcomponents/CreateGameForm/CreateGameForm.tsx index 81865b2..bd87031 100644 --- a/src/app/_components/_sharedcomponents/CreateGameForm/CreateGameForm.tsx +++ b/src/app/_components/_sharedcomponents/CreateGameForm/CreateGameForm.tsx @@ -187,175 +187,167 @@ const CreateGameForm: React.FC = ({ }; return ( - - {/* Primary Card - Create/Choose Deck Form */} - - - - {isCreateGamePath ? "Choose Your Deck" : "Create New Game"} - -
- {/* Favourite Decks Input */} + + + {isCreateGamePath ? "Choose Your Deck" : "Create New Game"} + + + {/* Favourite Decks Input */} + + Favourite Decks + ) => + setFavouriteDeck(e.target.value) + } + placeholder="Vader Green Ramp" + > + {deckOptions.map((deck) => ( + + {deck} + + ))} + + + + {/* SWUDB Deck Link Input */} + + + + SWUDB + {' '} + or{' '} + + SW-Unlimited-DB + {' '} + Deck Link{' '} + + (use the URL or 'Deck Link' button) + + + ) => + setDeckLink(e.target.value) + } + /> + + + {/* Save Deck To Favourites Checkbox */} + , + checked: boolean + ) => setSaveDeck(checked)} + /> + } + label={ + + Save to Favorite Decks + + } + /> + + {/* Additional Fields for Non-Creategame Path */} + {!isCreateGamePath && ( + <> + {/* Game Name Input */} - Favourite Decks + + Game Name + ) => - setFavouriteDeck(e.target.value) + setGameName(e.target.value) } - placeholder="Vader Green Ramp" - > - {deckOptions.map((deck) => ( - - {deck} - - ))} - + placeholder="Game #" + /> - {/* SWUDB Deck Link Input */} - - - - SWUDB - {' '} - or{' '} - - SW-Unlimited-DB - {' '} - Deck Link{' '} - - (use the URL or 'Deck Link' button) - - + {/* Format Selection */} + + Format ) => - setDeckLink(e.target.value) + setFormat ? setFormat(e.target.value) : null } - /> + required + > + {formatOptions.map((fmt) => ( + + {fmt} + + ))} + - {/* Save Deck To Favourites Checkbox */} - , - checked: boolean - ) => setSaveDeck(checked)} + {/* Privacy Selection */} + + , + value: string + ) => setPrivacy(value)} + > + } + label={ + + Public + + } /> - } - label={ - - Save to Favorite Decks - - } - /> - - {/* Additional Fields for Non-Creategame Path */} - {!isCreateGamePath && ( - <> - {/* Game Name Input */} - - - Game Name - - ) => - setGameName(e.target.value) - } - placeholder="Game #" - /> - - - {/* Format Selection */} - - Format - ) => - setFormat ? setFormat(e.target.value) : null - } - required - > - {formatOptions.map((fmt) => ( - - {fmt} - - ))} - - - - {/* Privacy Selection */} - - , - value: string - ) => setPrivacy(value)} - > - } - label={ - - Public - - } - /> - } - label={ - - Private - - } - /> - - - - )} - - {/* Submit Button */} - - -
- - + } + label={ + + Private + + } + /> + + + + )} + + {/* Submit Button */} + + {/* Secondary Card - Instructions (Only for /creategame path) */} {isCreateGamePath && ( - - - - Instructions - - - Choose a deck, then click 'Create' to be taken to the - game lobby. -
-
- Once in the lobby, the player who wins the dice roll chooses who - goes first. Then the host can start the game. -
-
- Have Fun! - - - + + + Instructions + + + Choose a deck, then click 'Create' to be taken to the + game lobby. +
+
+ Once in the lobby, the player who wins the dice roll chooses who + goes first. Then the host can start the game. +
+
+ Have Fun! + + )} ); diff --git a/src/app/page.tsx b/src/app/page.tsx index b7a2d3a..3d81a6a 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,14 +1,14 @@ "use client"; -import React, { useState } from "react"; +import React from "react"; import Grid from "@mui/material/Grid2"; import { Typography } from "@mui/material"; import KarabastBanner from "./_components/_sharedcomponents/Banner/Banner"; import PublicGames from "./_components/HomePage/PublicGames/PublicGames"; -import CreateGameForm from "./_components/_sharedcomponents/CreateGameForm/CreateGameForm"; +import HomePagePlayMode from "./_components/HomePage/HomePagePlayMode"; import NewsColumn from "./_components/HomePage/News/News"; const Home: React.FC = () => { - const [format, setFormat] = useState("Premier"); + const styles = { gridContainer: { @@ -42,13 +42,13 @@ const Home: React.FC = () => { - + - + - +