diff --git a/web/src/app/submit/_game.tsx b/web/src/app/submit/_game.tsx new file mode 100644 index 0000000..e754601 --- /dev/null +++ b/web/src/app/submit/_game.tsx @@ -0,0 +1,65 @@ +import { FormControl, Select, InputLabel, MenuItem } from "@mui/material"; +import { styled } from '@mui/material/styles'; +import InputBase from '@mui/material/InputBase'; +import React from "react"; +import { SelectChangeEvent } from "@mui/material"; + +// TODO: Properly style everything instead of pasting 🤚 + +type GameSelectionProps = { + game: number; + setGame: React.Dispatch<React.SetStateAction<number>>; +}; + +const BootstrapInput = styled(InputBase)(({ theme }) => ({ + 'label + &': { + marginTop: theme.spacing(3), + }, + '& .MuiInputBase-input': { + backgroundColor: '#0000', + color: '#FFF', + border: '1px solid rgba(175, 175, 175, 0.66)', + fontSize: 16, + padding: '10px 26px 10px 12px', + transition: theme.transitions.create(['border-color', 'box-shadow']), + fontFamily: [ + '-apple-system', + 'BlinkMacSystemFont', + '"Segoe UI"', + 'Roboto', + '"Helvetica Neue"', + 'Arial', + 'sans-serif', + '"Apple Color Emoji"', + '"Segoe UI Emoji"', + '"Segoe UI Symbol"', + ].join(','), + '&:focus': { + borderRadius: 4, + borderColor: '#80bdff', + boxShadow: '0 0 0 0.2rem rgba(0,123,255,.25)', + }, + }, + })); + +export default function GameSelection({ game, setGame }: GameSelectionProps) { + const handleChange = (event: SelectChangeEvent) => { + setGame(Number(event.target.value)); // TODO: Change later!! there's 100% a proper way of doing this + }; + + return ( + <FormControl> + <InputLabel sx={{ color: "#646464" }}>Game</InputLabel> + <Select + value={String(game)} + label="Game" + onChange={handleChange} + input={<BootstrapInput />} + > + <MenuItem value={1}>Bhop</MenuItem> + <MenuItem value={2}>Surf</MenuItem> + <MenuItem value={3}>Fly Trials</MenuItem> + </Select> + </FormControl> + ); +} \ No newline at end of file diff --git a/web/src/app/submit/page.tsx b/web/src/app/submit/page.tsx index a0b09ee..b0a71e9 100644 --- a/web/src/app/submit/page.tsx +++ b/web/src/app/submit/page.tsx @@ -2,19 +2,25 @@ import { Button, TextField } from "@mui/material" +import GameSelection from "./_game"; import SendIcon from '@mui/icons-material/Send'; import Webpage from "@/app/_components/webpage" +import React, { useState } from "react"; import "./(styles)/page.scss" interface SubmissionPayload { AssetID: number; + DisplayName: string; + Creator: string; + GameID: number; } interface IdResponse { OperationID: number; } export default function SubmissionInfoPage() { + const [game, setGame] = useState(1); const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => { event.preventDefault(); @@ -23,6 +29,9 @@ export default function SubmissionInfoPage() { const formData = new FormData(form); const payload: SubmissionPayload = { + DisplayName: (formData.get("display-name") as string) ?? "unknown", // TEMPORARY! TODO: Change + Creator: (formData.get("creator") as string) ?? "unknown", // TEMPORARY! TODO: Change + GameID: game, AssetID: Number((formData.get("asset-id") as string) ?? "0"), }; @@ -64,7 +73,10 @@ export default function SubmissionInfoPage() { <span className="spacer form-spacer"></span> </header> <form onSubmit={handleSubmit}> - <TextField className="form-field" id="asset-id" name="asset-id" label="Asset ID" variant="outlined"/> + <TextField className="form-field" id="asset-id" name="asset-id" label="Asset ID (required)" variant="outlined"/> + <TextField className="form-field" id="display-name" name="display-name" label="Display Name" variant="outlined"/> + <TextField className="form-field" id="creator" name="creator" label="Creator" variant="outlined"/> + <GameSelection game={game} setGame={setGame} /> <span className="spacer form-spacer"></span> <Button type="submit" variant="contained" startIcon={<SendIcon/>} sx={{ width: "400px",