web: add submission fields

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

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",