fix: #10

Fixes/adds:
- ability to edit instructions
- center indicator on range inputs
- birthdays

src/components/mii/instructions.tsx

@@ -113,7 +113,7 @@ function Section({ name, instructions, children, isSubSection }: SectionProps) {
 
 export default function MiiInstructions({ instructions }: Props) {
 	if (Object.keys(instructions).length === 0) return null;
-	const { head, hair, eyebrows, eyes, nose, lips, ears, glasses, other, height, weight, datingPreferences, voice, personality } = instructions;
+	const { head, hair, eyebrows, eyes, nose, lips, ears, glasses, other, height, weight, birthday, datingPreferences, voice, personality } = instructions;
 
 	return (
 		<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg p-4 flex flex-col gap-3 max-h-96 overflow-y-auto">
@@ -122,7 +122,15 @@ export default function MiiInstructions({ instructions }: Props) {
 				Instructions
 			</h2>
 
-			{head && <Section name="Head" instructions={head}></Section>}
+			{head && (
+				<Section name="Head" instructions={head}>
+					{head.skinColor && (
+						<TableCell label="Skin Color">
+							<ColorPosition color={head.skinColor} />
+						</TableCell>
+					)}
+				</Section>
+			)}
 			{hair && (
 				<Section name="Hair" instructions={hair}>
 					{hair.subColor && (
@@ -196,7 +204,10 @@ export default function MiiInstructions({ instructions }: Props) {
 							<label htmlFor="height" className="w-16">
 								Height
 							</label>
-							<input id="height" type="range" min={0} max={100} step={1} disabled value={height} />
+							<div className="relative h-5 flex justify-center items-center">
+								<input id="height" type="range" min={0} max={128} step={1} disabled value={height} />
+								<div className="absolute h-4 w-1.5 rounded bg-orange-400 z-0"></div>
+							</div>
 						</div>
 					)}
 					{weight && (
@@ -204,7 +215,23 @@ export default function MiiInstructions({ instructions }: Props) {
 							<label htmlFor="weight" className="w-16">
 								Weight
 							</label>
-							<input id="weight" type="range" min={0} max={100} step={1} disabled value={weight} />
+							<div className="relative h-5 flex justify-center items-center">
+								<input id="weight" type="range" min={0} max={128} step={1} disabled value={weight} />
+								<div className="absolute h-4 w-1.5 rounded bg-orange-400 z-0"></div>
+							</div>
+						</div>
+					)}
+					{birthday && (
+						<div className="pl-2 not-nth-2:mt-4">
+							<h4 className="font-semibold text-xl text-amber-800 mb-1">Birthday</h4>
+							<table className="w-full">
+								<tbody>
+									{birthday.day && <TableCell label="Day">{birthday.day}</TableCell>}
+									{birthday.month && <TableCell label="Month">{birthday.month}</TableCell>}
+									{birthday.age && <TableCell label="Age">{birthday.age}</TableCell>}
+									{birthday.dontAge && <TableCell label="Don't Age">{birthday.dontAge ? "Yes" : "No"}</TableCell>}
+								</tbody>
+							</table>
 						</div>
 					)}
 					{datingPreferences && (

src/components/mii/voice-viewer.tsx

@@ -15,23 +15,26 @@ export default function VoiceViewer({ data, onClick, onClickTone }: Props) {
 	return (
 		<div className="flex flex-col gap-1">
 			{VOICE_SETTINGS.map((label) => (
-				<div key={label} className="flex gap-3">
+				<div key={label} className="relative flex gap-3">
 					<label htmlFor={label} className="text-sm w-14">
 						{label}
 					</label>
-					<input
-						type="range"
-						name={label}
-						className="grow"
-						min={0}
-						max={100}
-						step={1}
-						value={data[label as keyof typeof data] ?? 50}
-						disabled={!onClick}
-						onChange={(e) => {
-							if (onClick) onClick(e, label);
-						}}
-					/>
+					<div className="relative h-5 flex justify-center items-center">
+						<input
+							type="range"
+							name={label}
+							className="grow z-10"
+							min={0}
+							max={50}
+							step={1}
+							value={data[label as keyof typeof data] ?? 25}
+							disabled={!onClick}
+							onChange={(e) => {
+								if (onClick) onClick(e, label);
+							}}
+						/>
+						<div className="absolute h-4 w-1.5 rounded bg-orange-400 z-0"></div>
+					</div>
 				</div>
 			))}
 

src/components/submit-form/edit-form.tsx

@@ -7,6 +7,8 @@ import { FileWithPath } from "react-dropzone";
 import { Mii } from "@prisma/client";
 
 import { nameSchema, tagsSchema } from "@/lib/schemas";
+import { defaultInstructions, minifyInstructions } from "@/lib/switch";
+import { SwitchMiiInstructions } from "@/types";
 
 import TagSelector from "../tag-selector";
 import ImageList from "./image-list";
@@ -14,6 +16,8 @@ import LikeButton from "../like-button";
 import Carousel from "../carousel";
 import SubmitButton from "../submit-button";
 import Dropzone from "../dropzone";
+import MiiEditor from "./mii-editor";
+import SwitchSubmitTutorialButton from "../tutorial/switch-submit";
 
 interface Props {
 	mii: Mii;
@@ -40,6 +44,8 @@ export default function EditForm({ mii, likes }: Props) {
 	const [description, setDescription] = useState(mii.description);
 	const hasFilesChanged = useRef(false);
 
+	const instructions = useRef<SwitchMiiInstructions>({ ...defaultInstructions, ...(mii.instructions as object as Partial<SwitchMiiInstructions>) });
+
 	const handleSubmit = async () => {
 		// Validate before sending request
 		const nameValidation = nameSchema.safeParse(name);
@@ -58,6 +64,10 @@ export default function EditForm({ mii, likes }: Props) {
 		if (name != mii.name) formData.append("name", name);
 		if (tags != mii.tags) formData.append("tags", JSON.stringify(tags));
 		if (description && description != mii.description) formData.append("description", description);
+		console.log(minifyInstructions(structuredClone(instructions.current)));
+		console.log(mii.instructions);
+		if (minifyInstructions(structuredClone(instructions.current)) !== (mii.instructions as object))
+			formData.append("instructions", JSON.stringify(instructions.current));
 
 		if (hasFilesChanged.current) {
 			files.forEach((file, index) => {
@@ -179,8 +189,22 @@ export default function EditForm({ mii, likes }: Props) {
 					/>
 				</div>
 
+				{/* Instructions (Switch only) */}
+				{mii.platform === "SWITCH" && (
+					<>
+						<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-8">
+							<hr className="grow border-zinc-300" />
+							<span>Instructions</span>
+							<hr className="grow border-zinc-300" />
+						</div>
+
+						<MiiEditor instructions={instructions} />
+						<SwitchSubmitTutorialButton />
+					</>
+				)}
+
 				{/* Separator */}
-				<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-8 mb-2">
+				<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-8">
 					<hr className="grow border-zinc-300" />
 					<span>Custom images</span>
 					<hr className="grow border-zinc-300" />

src/components/submit-form/index.tsx

@@ -13,6 +13,7 @@ import { nameSchema, tagsSchema } from "@/lib/schemas";
 import { convertQrCode } from "@/lib/qr-codes";
 import Mii from "@/lib/mii.js/mii";
 import { ThreeDsTomodachiLifeMii } from "@/lib/three-ds-tomodachi-life-mii";
+import { defaultInstructions } from "@/lib/switch";
 import { SwitchMiiInstructions } from "@/types";
 
 import TagSelector from "../tag-selector";
@@ -51,45 +52,7 @@ export default function SubmitForm() {
 
 	const [platform, setPlatform] = useState<MiiPlatform>("SWITCH");
 	const [gender, setGender] = useState<MiiGender>("MALE");
-	const instructions = useRef<SwitchMiiInstructions>({
-		head: { skinColor: null },
-		hair: {
-			color: null,
-			subColor: null,
-			subColor2: null,
-			style: null,
-			isFlipped: false,
-		},
-		eyebrows: { color: null, height: null, distance: null, rotation: null, size: null, stretch: null },
-		eyes: {
-			main: { color: null, height: null, distance: null, rotation: null, size: null, stretch: null },
-			eyelashesTop: { height: null, distance: null, rotation: null, size: null, stretch: null },
-			eyelashesBottom: { height: null, distance: null, rotation: null, size: null, stretch: null },
-			eyelidTop: { height: null, distance: null, rotation: null, size: null, stretch: null },
-			eyelidBottom: { height: null, distance: null, rotation: null, size: null, stretch: null },
-			eyeliner: { color: null },
-			pupil: { height: null, distance: null, rotation: null, size: null, stretch: null },
-		},
-		nose: { height: null, size: null },
-		lips: { color: null, height: null, rotation: null, size: null, stretch: null, hasLipstick: false },
-		ears: { height: null, size: null },
-		glasses: { ringColor: null, shadesColor: null, height: null, size: null, stretch: null },
-		other: {
-			wrinkles1: { height: null, distance: null, size: null, stretch: null },
-			wrinkles2: { height: null, distance: null, size: null, stretch: null },
-			beard: { color: null },
-			moustache: { color: null, height: null, isFlipped: false, size: null, stretch: null },
-			goatee: { color: null },
-			mole: { color: null, height: null, distance: null, size: null },
-			eyeShadow: { color: null, height: null, distance: null, size: null, stretch: null },
-			blush: { color: null, height: null, distance: null, size: null, stretch: null },
-		},
-		height: null,
-		weight: null,
-		datingPreferences: [],
-		voice: { speed: null, pitch: null, depth: null, delivery: null, tone: null },
-		personality: { movement: null, speech: null, energy: null, thinking: null, overall: null },
-	});
+	const instructions = useRef<SwitchMiiInstructions>(defaultInstructions);
 
 	const [error, setError] = useState<string | undefined>(undefined);
 

src/components/submit-form/mii-editor/tabs/eyebrows.tsx

@@ -8,7 +8,7 @@ interface Props {
 }
 
 export default function EyebrowsTab({ instructions }: Props) {
-	const [color, setColor] = useState(3);
+	const [color, setColor] = useState(instructions.current.eyebrows.color ?? 3);
 
 	return (
 		<>

src/components/submit-form/mii-editor/tabs/eyes.tsx

@@ -19,9 +19,13 @@ const TABS: { name: keyof SwitchMiiInstructions["eyes"]; length: number; colorsD
 
 export default function EyesTab({ instructions }: Props) {
 	const [tab, setTab] = useState(0);
-
-	// One type/color state per tab
-	const [colors, setColors] = useState<number[]>(Array(TABS.length).fill(122));
+	const [colors, setColors] = useState<number[]>(() =>
+		TABS.map((t) => {
+			const entry = instructions.current.eyes[t.name];
+			const color = "color" in entry ? entry.color : null;
+			return color ?? 122;
+		}),
+	);
 
 	const currentTab = TABS[tab];
 

src/components/submit-form/mii-editor/tabs/glasses.tsx

@@ -8,8 +8,8 @@ interface Props {
 }
 
 export default function GlassesTab({ instructions }: Props) {
-	const [ringColor, setRingColor] = useState(133);
-	const [shadesColor, setShadesColor] = useState(133);
+	const [ringColor, setRingColor] = useState(instructions.current.glasses.ringColor ?? 133);
+	const [shadesColor, setShadesColor] = useState(instructions.current.glasses.shadesColor ?? 133);
 
 	return (
 		<>

src/components/submit-form/mii-editor/tabs/hair.tsx

@@ -10,11 +10,11 @@ type Tab = "sets" | "bangs" | "back";
 
 export default function HairTab({ instructions }: Props) {
 	const [tab, setTab] = useState<Tab>("sets");
-	const [color, setColor] = useState(3);
-	const [subColor, setSubColor] = useState<number | null>(null);
-	const [subColor2, setSubColor2] = useState<number | null>(null);
-	const [style, setStyle] = useState<number | null>(null);
-	const [isFlipped, setIsFlipped] = useState(false);
+	const [color, setColor] = useState(instructions.current.hair.color ?? 3);
+	const [subColor, setSubColor] = useState<number | null>(instructions.current.hair.subColor);
+	const [subColor2, setSubColor2] = useState<number | null>(instructions.current.hair.subColor2);
+	const [style, setStyle] = useState<number | null>(instructions.current.hair.style);
+	const [isFlipped, setIsFlipped] = useState(instructions.current.hair.isFlipped);
 
 	return (
 		<>

src/components/submit-form/mii-editor/tabs/head.tsx

@@ -9,7 +9,7 @@ interface Props {
 const COLORS = ["FFD8BA", "FFD5AC", "FEC1A4", "FEC68F", "FEB089", "FEBA6B", "F39866", "E89854", "E37E3F", "B45627", "914220", "59371F", "662D16", "392D1E"];
 
 export default function HeadTab({ instructions }: Props) {
-	const [color, setColor] = useState(109);
+	const [color, setColor] = useState(instructions.current.head.skinColor ?? 109);
 
 	return (
 		<>
@@ -29,7 +29,10 @@ export default function HeadTab({ instructions }: Props) {
 						<button
 							type="button"
 							key={i + 108}
-							onClick={() => setColor(i + 108)}
+							onClick={() => {
+								setColor(i + 108);
+								instructions.current.head.skinColor = i + 108;
+							}}
 							className={`size-9 rounded-lg cursor-pointer ring-offset-2 ring-orange-500 ${color === i + 108 ? "ring-2" : ""}`}
 							style={{ backgroundColor: `#${hex}` }}
 						></button>

src/components/submit-form/mii-editor/tabs/lips.tsx

@@ -8,8 +8,8 @@ interface Props {
 }
 
 export default function LipsTab({ instructions }: Props) {
-	const [color, setColor] = useState(128);
-	const [hasLipstick, setHasLipstick] = useState(false);
+	const [color, setColor] = useState(instructions.current.lips.color ?? 128);
+	const [hasLipstick, setHasLipstick] = useState(instructions.current.lips.hasLipstick);
 
 	return (
 		<>

src/components/submit-form/mii-editor/tabs/misc.tsx

@@ -12,22 +12,28 @@ interface Props {
 }
 
 export default function HeadTab({ instructions }: Props) {
-	const [height, setHeight] = useState(50);
-	const [weight, setWeight] = useState(50);
-	const [datingPreferences, setDatingPreferences] = useState<MiiGender[]>([]);
+	const [height, setHeight] = useState(instructions.current.height ?? 64);
+	const [weight, setWeight] = useState(instructions.current.weight ?? 64);
+	const [datingPreferences, setDatingPreferences] = useState<MiiGender[]>(instructions.current.datingPreferences ?? []);
 	const [voice, setVoice] = useState({
-		speed: 50,
-		pitch: 50,
-		depth: 50,
-		delivery: 50,
-		tone: 0,
+		speed: instructions.current.voice.speed ?? 25,
+		pitch: instructions.current.voice.pitch ?? 25,
+		depth: instructions.current.voice.depth ?? 25,
+		delivery: instructions.current.voice.delivery ?? 25,
+		tone: instructions.current.voice.tone ?? 0,
+	});
+	const [birthday, setBirthday] = useState({
+		day: instructions.current.birthday.day ?? (null as number | null),
+		month: instructions.current.birthday.month ?? (null as number | null),
+		age: instructions.current.birthday.age ?? (null as number | null),
+		dontAge: instructions.current.birthday.dontAge,
 	});
 	const [personality, setPersonality] = useState({
-		movement: -1,
-		speech: -1,
-		energy: -1,
-		thinking: -1,
-		overall: -1,
+		movement: instructions.current.personality.movement ?? -1,
+		speech: instructions.current.personality.speech ?? -1,
+		energy: instructions.current.personality.energy ?? -1,
+		thinking: instructions.current.personality.thinking ?? -1,
+		overall: instructions.current.personality.overall ?? -1,
 	});
 
 	return (
@@ -47,36 +53,44 @@ export default function HeadTab({ instructions }: Props) {
 							<label htmlFor="height" className="text-sm">
 								Height
 							</label>
-							<input
-								type="range"
-								id="height"
-								min={0}
-								max={100}
-								step={1}
-								value={height}
-								onChange={(e) => {
-									setHeight(e.target.valueAsNumber);
-									instructions.current.height = e.target.valueAsNumber;
-								}}
-							/>
+							<div className="relative h-5 flex justify-center items-center">
+								<input
+									type="range"
+									id="height"
+									className="grow z-10"
+									min={0}
+									max={128}
+									step={1}
+									value={height}
+									onChange={(e) => {
+										setHeight(e.target.valueAsNumber);
+										instructions.current.height = e.target.valueAsNumber;
+									}}
+								/>
+								<div className="absolute h-4 w-1.5 rounded bg-orange-400 z-0"></div>
+							</div>
 						</div>
 
 						<div className="flex flex-col">
 							<label htmlFor="weight" className="text-sm">
 								Weight
 							</label>
-							<input
-								type="range"
-								id="weight"
-								min={0}
-								max={100}
-								step={1}
-								value={weight}
-								onChange={(e) => {
-									setWeight(e.target.valueAsNumber);
-									instructions.current.weight = e.target.valueAsNumber;
-								}}
-							/>
+							<div className="relative h-5 flex justify-center items-center">
+								<input
+									type="range"
+									id="weight"
+									className="grow z-10"
+									min={0}
+									max={128}
+									step={1}
+									value={weight}
+									onChange={(e) => {
+										setWeight(e.target.valueAsNumber);
+										instructions.current.weight = e.target.valueAsNumber;
+									}}
+								/>
+								<div className="absolute h-4 w-1.5 rounded bg-orange-400 z-0"></div>
+							</div>
 						</div>
 
 						<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-1.5 mb-2">
@@ -117,6 +131,81 @@ export default function HeadTab({ instructions }: Props) {
 								instructions.current.voice.tone = i;
 							}}
 						/>
+
+						<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-1.5 mb-2">
+							<hr className="grow border-zinc-300" />
+							<span>Birthday</span>
+							<hr className="grow border-zinc-300" />
+						</div>
+
+						<div className="grid grid-cols-3 gap-2">
+							<div>
+								<label htmlFor="day" className="text-xs">
+									Day
+								</label>
+								<input
+									type="number"
+									id="day"
+									min={1}
+									max={31}
+									className="pill input text-sm py-1! px-3! w-full"
+									value={birthday.day ?? undefined}
+									onChange={(e) => {
+										setBirthday((p) => ({ ...p, day: e.target.valueAsNumber }));
+										instructions.current.birthday.day = e.target.valueAsNumber;
+									}}
+								/>
+							</div>
+							<div>
+								<label htmlFor="month" className="text-xs">
+									Month
+								</label>
+								<input
+									type="number"
+									id="month"
+									min={1}
+									max={12}
+									className="pill input text-sm py-1! px-3! w-full"
+									value={birthday.month ?? undefined}
+									onChange={(e) => {
+										setBirthday((p) => ({ ...p, month: e.target.valueAsNumber }));
+										instructions.current.birthday.month = e.target.valueAsNumber;
+									}}
+								/>
+							</div>
+							<div>
+								<label htmlFor="age" className="text-xs">
+									Age
+								</label>
+								<input
+									type="number"
+									id="age"
+									min={1}
+									max={100}
+									className="pill input text-sm py-1! px-3! w-full"
+									value={birthday.age ?? undefined}
+									onChange={(e) => {
+										setBirthday((p) => ({ ...p, age: e.target.valueAsNumber }));
+										instructions.current.birthday.age = e.target.valueAsNumber;
+									}}
+								/>
+							</div>
+							<div className="flex gap-1.5 col-span-2">
+								<input
+									type="checkbox"
+									id="dontAge"
+									className="checkbox"
+									checked={birthday.dontAge}
+									onChange={(e) => {
+										setBirthday((p) => ({ ...p, dontAge: e.target.checked }));
+										instructions.current.birthday.dontAge = e.target.checked;
+									}}
+								/>
+								<label htmlFor="dontAge" className="text-sm select-none">
+									Don't Age
+								</label>
+							</div>
+						</div>
 					</div>
 				</div>
 

src/components/submit-form/mii-editor/tabs/other.tsx

@@ -7,14 +7,14 @@ interface Props {
 	instructions: React.RefObject<SwitchMiiInstructions>;
 }
 
-const TABS: { name: keyof SwitchMiiInstructions["other"]; length: number }[] = [
+const TABS: { name: keyof SwitchMiiInstructions["other"]; length: number; defaultColor?: number }[] = [
 	{ name: "wrinkles1", length: 9 },
 	{ name: "wrinkles2", length: 15 },
 	{ name: "beard", length: 15 },
 	{ name: "moustache", length: 16 },
 	{ name: "goatee", length: 14 },
 	{ name: "mole", length: 2 },
-	{ name: "eyeShadow", length: 4 },
+	{ name: "eyeShadow", length: 4, defaultColor: 139 },
 	{ name: "blush", length: 8 },
 ];
 
@@ -22,8 +22,13 @@ export default function OtherTab({ instructions }: Props) {
 	const [tab, setTab] = useState(0);
 	const [isFlipped, setIsFlipped] = useState(false);
 
-	// One type/color state per tab
-	const [colors, setColors] = useState<number[]>([0, 0, 0, 0, 0, 0, 139, 0]);
+	const [colors, setColors] = useState<number[]>(() =>
+		TABS.map((t) => {
+			const entry = instructions.current.other[t.name];
+			const color = "color" in entry ? entry.color : null;
+			return color ?? t.defaultColor ?? 0;
+		}),
+	);
 
 	const currentTab = TABS[tab];
 

src/components/tutorial/switch-submit.tsx

@@ -4,7 +4,7 @@ import { useState } from "react";
 import { createPortal } from "react-dom";
 import Tutorial from ".";
 
-export default function SubmitTutorialButton() {
+export default function SwitchSubmitTutorialButton() {
 	const [isOpen, setIsOpen] = useState(false);
 
 	return (