form values encode to json

explicit errors for each value is implemented -
TODO: show the error to the user with html text instead of printing it

web/src/app/submit/_submit.tsx

@@ -0,0 +1,67 @@
+interface FormNumbers {
+	readonly GameID: number,
+	readonly AssetID: number,
+	readonly AssetVersion: number
+}
+
+interface FormStrings {
+	readonly DisplayName: string,
+	readonly Creator: string,
+}
+
+function SubmitAPI(json: string) {
+	console.log(json)
+}
+
+function SafeNumbers(form: FormNumbers): Promise<FormNumbers> {
+	const form_number_values = [form.GameID, form.AssetID, form.AssetVersion]
+
+	return new Promise((resolve, reject) => {
+		form_number_values.forEach(v => {
+			if (!Number.isSafeInteger(v)) {
+				reject(`Form Value: ${v} was not a valid number`)
+			}
+		})
+		resolve(form)
+	})
+}
+
+function SafeStrings(form: FormStrings): Promise<FormStrings> {
+	const form_string_values = [form.DisplayName, form.Creator]
+
+	return new Promise((resolve, reject) => {
+		form_string_values.forEach(v => {
+			if (v.length>=128) {
+				reject(`Form value: ${v} is beyond the max 128 string limit`)
+			}
+		})
+		resolve(form)
+	})
+}
+
+export default function Submit() {
+	const form_numbers: FormNumbers = {
+		GameID:       Number((document.getElementById("game-id")       as HTMLInputElement).value),
+		AssetID:      Number((document.getElementById("asset-id")      as HTMLInputElement).value),
+		AssetVersion: Number((document.getElementById("asset-version") as HTMLInputElement).value),
+	}
+	const form_strings: FormStrings = {
+		DisplayName:  (document.getElementById("display-name")  as HTMLInputElement).value,
+		Creator:      (document.getElementById("creator")       as HTMLInputElement).value
+	}
+
+	const valid_numbers = SafeNumbers(form_numbers)
+	const valid_strings = SafeStrings(form_strings)
+
+	valid_strings.then(form_strings => {
+		valid_numbers.then(form_numbers => {
+			SubmitAPI(JSON.stringify({
+				DisplayName:  form_strings.DisplayName,
+				Creator:      form_strings.Creator,
+				GameID:       form_numbers.GameID,
+				AssetID:      form_numbers.AssetID,
+				AssetVersion: form_numbers.AssetVersion
+			}))
+		}).catch(e => console.log(e))
+	}).catch(e => console.log(e))
+}

web/src/app/submit/page.tsx

@@ -3,23 +3,19 @@
 import { FormControl, FormLabel, RadioGroup, FormControlLabel, Button, TextField } from "@mui/material"
 import SendIcon from '@mui/icons-material/Send';
 import Webpage from "@/app/_components/webpage"
+import Submit from "./_submit";
 import Radio from '@mui/material/Radio';
 
 import "./(styles)/page.scss"
 
-const enum Map {
-	New,
-	Fix,
-}
-
 function TargetAsset() {
-	return (<FormControl>
+	return <FormControl>
 		<FormLabel id="target-asset-radio">Target:</FormLabel>
 		<RadioGroup defaultValue="New" aria-labelledby="target-asset-radio" name="target-asset-radio">
-			<FormControlLabel value="New" control={<Radio/>} label="New"/>
-			<FormControlLabel value="Fix" control={<Radio/>} label="Fix"/>
+			<FormControlLabel value="New" control={<Radio/>} label="New" id="asset-new"/>
+			<FormControlLabel value="Fix" control={<Radio/>} label="Fix" id="asset-Fix"/>
 		</RadioGroup>
-	</FormControl>)
+	</FormControl>
 }
 
 export default function SubmissionInfoPage() {
@@ -32,14 +28,14 @@ export default function SubmissionInfoPage() {
 	          	</header>
 	        	<form>
 					<TextField className="form-field" id="display-name"  label="Display Name"  variant="outlined"/>
-					<TextField className="form-field" id="creator"       label="Creator"       variant="outlined"/>
-					<TextField className="form-field" id="game-id"       label="Game ID"       variant="outlined"/>
-					<TextField className="form-field" id="asset-id"      label="Asset ID"      variant="outlined"/>
-					<TextField className="form-field" id="asset-version" label="Asset Version" variant="outlined"/>
+					<TextField className="form-field" id="creator" 		 label="Creator"       variant="outlined"/>
+					<TextField className="form-field" id="game-id"       label="Game ID"       variant="outlined" type="number"/>
+					<TextField className="form-field" id="asset-id"      label="Asset ID"      variant="outlined" type="number"/>
+					<TextField className="form-field" id="asset-version" label="Asset Version" variant="outlined" type="number"/>
 					<TargetAsset/>
 	         	</form>
 				<span className="spacer form-spacer"></span>
-				<Button variant="contained" startIcon={<SendIcon/>} sx={{
+				<Button variant="contained" startIcon={<SendIcon />} onClick={() => { Submit() }} sx={{
 					width: "400px",
 					height: "50px",
 					marginInline: "auto"