Merge pull request #58 from battlesquid/fix/input-validation

Fix/input validation

Author: battlesquid

packages/app/src/components/sidebar.tsx

@@ -4,7 +4,6 @@ import {
 	Button,
 	Card,
 	Divider,
-	Group,
 	ScrollArea,
 	Stack,
 	Title,
@@ -118,10 +117,10 @@ export function Sidebar(props: SidebarProps) {
 					</Stack>
 				</AppShell.Section>
 				<AppShell.Section>
-					<Group gap="xs">
+					<Stack gap="xs">
 						<ShareButton />
 						<ExportButton />
-					</Group>
+					</Stack>
 				</AppShell.Section>
 			</Card>
 			<AppShell.Section>

packages/app/src/components/sidebar_inputs/base_padding.tsx

@@ -13,6 +13,9 @@ export function BasePaddingInput() {
 			min={0}
 			step={0.5}
 			value={padding}
+			clampBehavior="strict"
+			allowNegative={false}
+			allowLeadingZeros={false}
 			onChange={(value) =>
 				setInputs({
 					padding: safeFloat(value, 0),

packages/app/src/components/sidebar_inputs/generate_section.tsx

@@ -86,6 +86,9 @@ export function GenerateSection(props: GenerateSectionProps) {
 					placeholder="Start Year"
 					min={MIN_START_YEAR}
 					max={new Date().getFullYear()}
+					allowNegative={false}
+					allowDecimal={false}
+					allowLeadingZeros={false}
 					stepHoldDelay={500}
 					stepHoldInterval={100}
 					value={startYear}
@@ -96,7 +99,9 @@ export function GenerateSection(props: GenerateSectionProps) {
 							currentStartYear = lastValidStartYear;
 						}
 						if (currentStartYear > endYear) {
-							setEndYear(currentStartYear);
+							setEndYear(
+								Math.min(new Date().getFullYear(), currentStartYear as number),
+							);
 						}
 					}}
 					onChange={setStartYear}
@@ -106,6 +111,9 @@ export function GenerateSection(props: GenerateSectionProps) {
 					placeholder="End Year"
 					min={MIN_START_YEAR}
 					max={new Date().getFullYear()}
+					allowNegative={false}
+					allowDecimal={false}
+					allowLeadingZeros={false}
 					stepHoldDelay={500}
 					stepHoldInterval={100}
 					value={endYear}
@@ -116,27 +124,30 @@ export function GenerateSection(props: GenerateSectionProps) {
 							currentEndYear = lastValidEndYear;
 						}
 						if (currentEndYear < startYear) {
-							setStartYear(currentEndYear);
+							setStartYear(
+								Math.min(new Date().getFullYear(), currentEndYear as number),
+							);
 						}
 					}}
 					onChange={setEndYear}
 				/>
 			</Group>
 			<Button
-				className="mona-sans-wide"
 				fullWidth
+				className="mona-sans-wide"
+				tt="uppercase"
 				disabled={name.trim() === ""}
+				variant="light"
+				size="xs"
 				onClick={() =>
 					setInputs({
 						name,
 						startYear: startYear as number,
 						endYear: endYear as number,
 					})
 				}
-				variant="light"
-				size="xs"
 			>
-				GENERATE
+				Generate
 			</Button>
 		</>
 	);

packages/app/src/components/sidebar_inputs/scale.tsx

@@ -13,6 +13,9 @@ export function ScaleInput() {
 			min={1}
 			step={0.1}
 			value={scale}
+			clampBehavior="strict"
+			allowNegative={false}
+			allowLeadingZeros={false}
 			onChange={(value) => setInputs({ scale: safeFloat(value, 1) })}
 		/>
 	);

packages/app/src/components/sidebar_inputs/tower_dampening.tsx

@@ -12,11 +12,14 @@ export function TowerDampeningInput() {
 			min={1}
 			allowDecimal={false}
 			value={dampening}
-			onChange={(value) =>
+			clampBehavior="strict"
+			allowNegative={false}
+			onChange={(value) => {
+				console.log(value);
 				setInputs({
 					dampening: safeInt(value, 1),
-				})
-			}
+				});
+			}}
 		/>
 	);
 }

packages/app/src/share/urlShare.ts

@@ -4,40 +4,63 @@ import {
 } from "lz-string";
 import { z } from "zod";
 
-import type { SkylineModelInputParameters } from "../stores/parameters";
+import {
+	DEFAULT_INPUT_PARAMETERS,
+	type SkylineModelInputParameters,
+} from "../stores/parameters";
 import { ExportFormat } from "../three/export";
 import { SkylineBaseShape } from "../three/types";
 
 export const URL_PARAM_KEY = "s";
 
 export const MinimalShareSchema = z.object({
-	v: z.literal(1),
-	type: z.literal("minimal"),
-	name: z.string(),
-	startYear: z.number().int(),
-	endYear: z.number().int(),
+	v: z.literal(1).catch(1),
+	type: z.literal("minimal").catch("minimal"),
+	name: z.string().catch(DEFAULT_INPUT_PARAMETERS.name),
+	startYear: z
+		.number()
+		.int()
+		.max(new Date().getFullYear())
+		.catch(DEFAULT_INPUT_PARAMETERS.startYear),
+	endYear: z
+		.number()
+		.int()
+		.max(new Date().getFullYear())
+		.catch(DEFAULT_INPUT_PARAMETERS.endYear),
 });
 
 export const FullShareSchema = z.object({
-	v: z.literal(1),
-	type: z.literal("full"),
-	name: z.string(),
-	nameOverride: z.string(),
-	startYear: z.number().int(),
-	endYear: z.number().int(),
-	insetText: z.boolean(),
-	towerSize: z.number(),
-	dampening: z.number(),
-	shape: z.nativeEnum(SkylineBaseShape),
-	padding: z.number(),
-	textDepth: z.number(),
-	color: z.string(),
-	showContributionColor: z.boolean(),
-	scale: z.number(),
-	exportFormat: z.nativeEnum(ExportFormat),
-	logoOffset: z.number(),
-	nameOffset: z.number(),
-	yearOffset: z.number(),
+	v: z.literal(1).catch(1),
+	type: z.literal("full").catch("full"),
+	name: z.string().catch(DEFAULT_INPUT_PARAMETERS.name),
+	startYear: z
+		.number()
+		.int()
+		.max(new Date().getFullYear())
+		.catch(DEFAULT_INPUT_PARAMETERS.startYear),
+	endYear: z
+		.number()
+		.int()
+		.max(new Date().getFullYear())
+		.catch(DEFAULT_INPUT_PARAMETERS.endYear),
+	nameOverride: z.string().catch(DEFAULT_INPUT_PARAMETERS.nameOverride),
+	insetText: z.boolean().catch(DEFAULT_INPUT_PARAMETERS.insetText),
+	towerSize: z.number().catch(DEFAULT_INPUT_PARAMETERS.towerSize),
+	dampening: z.number().min(1).catch(DEFAULT_INPUT_PARAMETERS.dampening),
+	shape: z.enum(SkylineBaseShape).catch(DEFAULT_INPUT_PARAMETERS.shape),
+	padding: z.number().min(0).catch(DEFAULT_INPUT_PARAMETERS.padding),
+	textDepth: z.number().catch(DEFAULT_INPUT_PARAMETERS.textDepth),
+	color: z.string().catch(DEFAULT_INPUT_PARAMETERS.color),
+	showContributionColor: z
+		.boolean()
+		.catch(DEFAULT_INPUT_PARAMETERS.showContributionColor),
+	scale: z.number().min(1).catch(DEFAULT_INPUT_PARAMETERS.scale),
+	exportFormat: z
+		.enum(ExportFormat)
+		.catch(DEFAULT_INPUT_PARAMETERS.exportFormat),
+	logoOffset: z.number().catch(DEFAULT_INPUT_PARAMETERS.logoOffset),
+	nameOffset: z.number().catch(DEFAULT_INPUT_PARAMETERS.nameOffset),
+	yearOffset: z.number().catch(DEFAULT_INPUT_PARAMETERS.yearOffset),
 });
 
 export const ShareSchema = z.union([MinimalShareSchema, FullShareSchema]);

packages/app/src/utils.ts

@@ -21,14 +21,16 @@ export const safeFloat = (value: string | number, min: number) => {
 	if (value === "") {
 		return min;
 	}
-	return Number.parseFloat(`${value}`);
+	const safeValue = Number.parseFloat(`${value}`);
+	return Math.max(safeValue, min);
 };
 
 export const safeInt = (value: string | number, min: number) => {
 	if (value === "") {
 		return min;
 	}
-	return Number.parseInt(`${value}`);
+	const safeValue = Number.parseInt(`${value}`);
+	return Math.max(safeValue, min);
 };
 
 export const safeString = (value: string, fallback: string) => {