feat: almost done

src/components/mii/instructions.tsx

@@ -40,16 +40,18 @@ function ColorPosition({ color }: { color: number }) {
 	if (!color) return null;
 	if (color <= 7) {
 		return (
-			<>
+			<span className="flex items-center">
+				<div className="size-5 rounded mr-1.5" style={{ backgroundColor: `#${COLORS[color]}` }}></div>
 				Color menu on left, <GridPosition index={color} cols={1} />
-			</>
+			</span>
 		);
 	}
 	if (color >= 108) {
 		return (
-			<>
+			<span className="flex items-center">
+				<div className="size-5 rounded mr-1.5" style={{ backgroundColor: `#${COLORS[color]}` }}></div>
 				Outside color menu, <GridPosition index={color - 108} cols={2} />
-			</>
+			</span>
 		);
 	}
 

src/components/submit-form/index.tsx

@@ -372,6 +372,8 @@ export default function SubmitForm() {
 						<PortraitUpload setImage={setMiiPortraitUri} />
 						<SwitchSubmitTutorialButton />
 					</div>
+
+					<p className="text-xs text-zinc-400 text-center mt-2">You must upload a screenshot of the features, check tutorial on how.</p>
 				</div>
 
 				{/* (3DS only) QR code scanning */}

src/components/submit-form/mii-editor/color-picker.tsx

@@ -6,12 +6,30 @@ interface Props {
 	disabled?: boolean;
 	color: number;
 	setColor: (color: number) => void;
+	tab?: "hair" | "eyes" | "lips" | "glasses" | "eyeliner";
 }
 
-export default function ColorPicker({ disabled, color, setColor }: Props) {
+export default function ColorPicker({ disabled, color, setColor, tab = "hair" }: Props) {
 	const [isOpen, setIsOpen] = useState(false);
 	const [isVisible, setIsVisible] = useState(false);
 
+	const getExtraSlice = () => {
+		switch (tab) {
+			case "hair":
+				return { start: 0, end: 8 };
+			case "eyes":
+				return { start: 122, end: 128 };
+			case "lips":
+				return { start: 128, end: 133 };
+			case "glasses":
+				return { start: 133, end: 139 };
+			case "eyeliner":
+				return { start: 139, end: 152 };
+			default:
+				return { start: 108, end: 122 };
+		}
+	};
+
 	const close = () => {
 		setIsVisible(false);
 		setTimeout(() => {
@@ -38,7 +56,7 @@ export default function ColorPicker({ disabled, color, setColor }: Props) {
 					}
 				}}
 				disabled={disabled}
-				className={`w-full flex gap-1.5 mb-2 p-2 rounded-xl shadow ${disabled ? "bg-zinc-300 opacity-50 cursor-not-allowed" : "bg-zinc-100 cursor-pointer"}`}
+				className={`w-20 flex gap-1.5 mb-2 p-2 rounded-xl shadow ${disabled ? "bg-zinc-300 opacity-50 cursor-not-allowed" : "bg-zinc-100 cursor-pointer"}`}
 			>
 				<Icon icon={"material-symbols:palette"} className="text-xl" />
 				<div className="grow rounded" style={{ backgroundColor: `#${COLORS[color]}` }}></div>
@@ -46,7 +64,7 @@ export default function ColorPicker({ disabled, color, setColor }: Props) {
 
 			{isOpen && (
 				<div
-					className={`absolute inset-0 w-122 p-4 bg-orange-100 rounded-lg transition-transform duration-500
+					className={`absolute inset-0 z-10 w-full p-4 bg-orange-100 rounded-lg transition-transform duration-500
 						flex items-center ${isVisible ? "opacity-100" : "opacity-0"}`}
 					style={{
 						transition: isVisible
@@ -55,12 +73,14 @@ export default function ColorPicker({ disabled, color, setColor }: Props) {
 					}}
 				>
 					<div className="mr-8 flex flex-col gap-0.5">
-						{COLORS.slice(0, 8).map((c, i) => (
+						{COLORS.slice(getExtraSlice().start, getExtraSlice().end).map((c, i) => {
+							const actualIndex = i + getExtraSlice().start;
+							return (
 								<button
 									type="button"
-								key={i}
+									key={actualIndex}
-								onClick={() => setColor(i)}
+									onClick={() => setColor(actualIndex)}
-								className={`size-7.5 cursor-pointer rounded-md ring-orange-500 ring-offset-2 ${color === i ? "ring-2 z-10" : ""}`}
+									className={`size-7.5 cursor-pointer rounded-md ring-orange-500 ring-offset-2 ${color === actualIndex ? "ring-2 z-10" : ""}`}
 									style={{
 										backgroundColor: `#${c}`,
 										opacity: isVisible ? 1 : 0,
@@ -70,10 +90,11 @@ export default function ColorPicker({ disabled, color, setColor }: Props) {
 										transitionDelay: isVisible ? `${120 + (i % 10) * 18 + Math.floor(i / 10) * 10}ms` : "0ms",
 									}}
 								></button>
-						))}
+							);
+						})}
 					</div>
 
-					<div className="grid grid-cols-10 gap-0.5">
+					<div className="grid grid-cols-10 gap-0.5 overflow-x-auto">
 						{COLORS.slice(8, 108).map((c, i) => (
 							<button
 								type="button"

src/components/submit-form/mii-editor/index.tsx

@@ -50,14 +50,14 @@ export default function MiiEditor({ instructions }: Props) {
 
 	return (
 		<>
-			<div className="w-full aspect-video flex bg-orange-100 border-2 border-orange-200 rounded-xl overflow-hidden">
+			<div className="w-full h-91 flex flex-col sm:flex-row bg-orange-100 border-2 border-orange-200 rounded-xl overflow-hidden">
-				<div className="w-9 h-full flex flex-col">
+				<div className="h-9 flex flex-row sm:flex-col">
 					{(Object.keys(TAB_COMPONENTS) as Tab[]).map((t) => (
 						<button
 							key={t}
 							type="button"
 							onClick={() => setTab(t)}
-							className={`size-9 flex justify-center items-center text-[1.35rem] cursor-pointer bg-orange-200 hover:bg-orange-300 transition-colors duration-75 ${tab === t ? "bg-orange-100!" : ""}`}
+							className={`size-full aspect-square flex justify-center items-center text-[1.35rem] cursor-pointer bg-orange-200 hover:bg-orange-300 transition-colors duration-75 ${tab === t ? "bg-orange-100!" : ""}`}
 						>
 							{/* ml because of border on left causing icons to look miscentered */}
 							<Icon icon={TAB_ICONS[t]} className="-ml-0.5" />
@@ -69,9 +69,8 @@ export default function MiiEditor({ instructions }: Props) {
 				{(Object.keys(TAB_COMPONENTS) as Tab[]).map((t) => {
 					const TabComponent = TAB_COMPONENTS[t];
 					return (
-						<div key={t} className={t === tab ? "grow flex relative" : "hidden"}>
+						<div key={t} className={t === tab ? "grow relative p-3" : "hidden"}>
 							<TabComponent instructions={instructions} />
-							<p className="absolute top-32 left-32 z-10 text-lg font-bold w-48 text-center">Your parts screenshot should handle the types!</p>
 						</div>
 					);
 				})}

src/components/submit-form/mii-editor/number-inputs.tsx

@@ -14,9 +14,9 @@ export default function NumberInputs({ target }: Props) {
 	if (!target) return null;
 
 	return (
-		<div className="grid grid-rows-5 min-h-0">
+		<div className="grid grid-cols-2 gap-x-4 h-min w-fit">
 			{target.height !== undefined && (
-				<div className="w-full">
+				<div>
 					<label htmlFor="height" className="text-xs">
 						Height
 					</label>
@@ -37,7 +37,7 @@ export default function NumberInputs({ target }: Props) {
 			)}
 
 			{target.distance !== undefined && (
-				<div className="w-full">
+				<div>
 					<label htmlFor="distance" className="text-xs">
 						Distance
 					</label>
@@ -58,7 +58,7 @@ export default function NumberInputs({ target }: Props) {
 			)}
 
 			{target.rotation !== undefined && (
-				<div className="w-full">
+				<div>
 					<label htmlFor="rotation" className="text-xs">
 						Rotation
 					</label>
@@ -79,7 +79,7 @@ export default function NumberInputs({ target }: Props) {
 			)}
 
 			{target.size !== undefined && (
-				<div className="w-full">
+				<div>
 					<label htmlFor="size" className="text-xs">
 						Size
 					</label>
@@ -100,7 +100,7 @@ export default function NumberInputs({ target }: Props) {
 			)}
 
 			{target.stretch !== undefined && (
-				<div className="w-full">
+				<div>
 					<label htmlFor="stretch" className="text-xs">
 						Stretch
 					</label>

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

@@ -1,27 +1,18 @@
 import { SwitchMiiInstructions } from "@/types";
 import NumberInputs from "../number-inputs";
-import { useState } from "react";
 
-interface Props {
+interface EarsProps {
 	instructions: React.RefObject<SwitchMiiInstructions>;
 }
 
-export default function EarsTab({ instructions }: Props) {
+export default function EarsTab({ instructions }: EarsProps) {
-	const [type, setType] = useState(0);
-
 	return (
-		<div className="relative grow p-3 pb-0!">
+		<>
-			<div className="flex h-full">
+			<h1 className="absolute font-bold text-xl">Ears</h1>
-				<div className="grow flex flex-col">
-					<div className="flex items-center h-8">
-						<h1 className="font-bold text-xl">Ears</h1>
-					</div>
-				</div>
 
-				<div className="shrink-0 w-21 pb-3 flex flex-col items-center">
+			<div className="size-full flex flex-col justify-center items-center">
 				<NumberInputs target={instructions.current.ears} />
 			</div>
-			</div>
+		</>
-		</div>
 	);
 }

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

@@ -1,26 +1,20 @@
+import { useState } from "react";
 import { SwitchMiiInstructions } from "@/types";
 import ColorPicker from "../color-picker";
 import NumberInputs from "../number-inputs";
-import { useState } from "react";
 
 interface Props {
 	instructions: React.RefObject<SwitchMiiInstructions>;
 }
 
 export default function EyebrowsTab({ instructions }: Props) {
-	const [type, setType] = useState(27);
 	const [color, setColor] = useState(0);
 
 	return (
-		<div className="relative grow p-3 pb-0!">
+		<>
-			<div className="flex h-full">
+			<h1 className="absolute font-bold text-xl">Eyebrows</h1>
-				<div className="grow flex flex-col">
-					<div className="flex items-center h-8">
-						<h1 className="font-bold text-xl">Eyebrows</h1>
-					</div>
-				</div>
 
-				<div className="shrink-0 w-21 pb-3 flex flex-col items-center">
+			<div className="size-full flex flex-col justify-center items-center">
 				<ColorPicker
 					color={color}
 					setColor={(i) => {
@@ -30,7 +24,6 @@ export default function EyebrowsTab({ instructions }: Props) {
 				/>
 				<NumberInputs target={instructions.current.eyebrows} />
 			</div>
-			</div>
+		</>
-		</div>
 	);
 }

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

@@ -17,7 +17,7 @@ const TABS: { name: keyof SwitchMiiInstructions["eyes"]; length: number; colorsD
 	{ name: "pupil", length: 10, colorsDisabled: true },
 ];
 
-export default function OtherTab({ instructions }: Props) {
+export default function EyesTab({ instructions }: Props) {
 	const [tab, setTab] = useState(0);
 
 	// One type/color state per tab
@@ -36,13 +36,10 @@ export default function OtherTab({ instructions }: Props) {
 	};
 
 	return (
-		<div className="relative grow p-3 pb-0!">
+		<>
-			<div className="flex h-full">
-				<div className="grow flex flex-col">
-					<div className="flex items-center h-8">
 			<h1 className="absolute font-bold text-xl">Eyes</h1>
 
-						<div className="flex justify-center grow">
+			<div className="absolute right-3 z-10 flex justify-end">
 				<div className="rounded-2xl bg-orange-200">
 					{TABS.map((_, i) => (
 						<button
@@ -51,21 +48,16 @@ export default function OtherTab({ instructions }: Props) {
 							onClick={() => setTab(i)}
 							className={`px-3 py-1 rounded-2xl cursor-pointer hover:bg-orange-300/50 transition-colors duration-75 ${tab === i ? "bg-orange-300!" : "orange-200"}`}
 						>
-										{i}
+							{i + 1}
 						</button>
 					))}
 				</div>
 			</div>
-					</div>
-				</div>
 
-				<div className="shrink-0 w-21 pb-3 flex flex-col items-center">
+			<div className="absolute inset-0 flex flex-col justify-center items-center">
-					<div className={`${currentTab.colorsDisabled ? "hidden" : "w-full"}`}>
+				<ColorPicker disabled={currentTab.colorsDisabled} color={colors[tab]} setColor={setColor} tab={tab === 5 ? "eyeliner" : "eyes"} />
-						<ColorPicker color={colors[tab]} setColor={setColor} />
-					</div>
 				<NumberInputs target={instructions.current.eyes[currentTab.name]} />
 			</div>
-			</div>
+		</>
-		</div>
 	);
 }

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

@@ -12,21 +12,17 @@ export default function GlassesTab({ instructions }: Props) {
 	const [shadesColor, setShadesColor] = useState(0);
 
 	return (
-		<div className="relative grow p-3 pb-0!">
+		<>
-			<div className="flex h-full">
+			<h1 className="absolute font-bold text-xl">Glasses</h1>
-				<div className="grow flex flex-col">
-					<div className="flex items-center h-8">
-						<h1 className="font-bold text-xl">Glasses</h1>
-					</div>
-				</div>
 
-				<div className="shrink-0 w-21 pb-3 flex flex-col items-center">
+			<div className="size-full flex flex-col justify-center items-center">
 				<ColorPicker
 					color={ringColor}
 					setColor={(i) => {
 						setRingColor(i);
 						instructions.current.glasses.ringColor = i;
 					}}
+					tab="glasses"
 				/>
 				<ColorPicker
 					color={shadesColor}
@@ -34,10 +30,10 @@ export default function GlassesTab({ instructions }: Props) {
 						setShadesColor(i);
 						instructions.current.glasses.shadesColor = i;
 					}}
+					tab="glasses"
 				/>
 				<NumberInputs target={instructions.current.glasses} />
 			</div>
-			</div>
+		</>
-		</div>
 	);
 }

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

@@ -16,16 +16,11 @@ export default function HairTab({ instructions }: Props) {
 	const [style, setStyle] = useState<number | null>(null);
 	const [isFlipped, setIsFlipped] = useState(false);
 
-	const length = tab === "sets" ? 245 : tab === "bangs" ? 83 : 111;
-
 	return (
-		<div className="relative grow p-3 pb-0!">
+		<>
-			<div className="flex h-full">
-				<div className="grow flex flex-col">
-					<div className="flex items-center h-8">
 			<h1 className="absolute font-bold text-xl">Hair</h1>
 
-						<div className="flex justify-center grow">
+			<div className="absolute right-3 z-10 flex justify-end">
 				<button
 					type="button"
 					onClick={() => setTab("sets")}
@@ -51,10 +46,8 @@ export default function HairTab({ instructions }: Props) {
 					</button>
 				</div>
 			</div>
-					</div>
-				</div>
 
-				<div className="shrink-0 w-21 pb-3 flex flex-col items-center">
+			<div className="absolute inset-0 flex flex-col justify-center items-center">
 				<ColorPicker
 					color={color}
 					setColor={(i) => {
@@ -63,7 +56,7 @@ export default function HairTab({ instructions }: Props) {
 					}}
 				/>
 
-					<div className="flex gap-1.5 items-center mb-2 w-full">
+				<div className="flex gap-1.5 items-center mb-2">
 					<input
 						type="checkbox"
 						id="subcolor"
@@ -99,7 +92,7 @@ export default function HairTab({ instructions }: Props) {
 				/>
 
 				<p className="text-sm mb-1">Tying style</p>
-					<div className="grid grid-cols-3 w-full gap-0.5">
+				<div className="grid grid-cols-3 gap-0.5">
 					{Array.from({ length: 3 }).map((_, i) => (
 						<button
 							type="button"
@@ -115,7 +108,7 @@ export default function HairTab({ instructions }: Props) {
 					))}
 				</div>
 
-					<div className="flex gap-1.5 items-center w-full mt-auto">
+				<div className="flex gap-1.5 items-center mt-4">
 					<input
 						type="checkbox"
 						id="subcolor"
@@ -131,7 +124,6 @@ export default function HairTab({ instructions }: Props) {
 					</label>
 				</div>
 			</div>
-			</div>
+		</>
-		</div>
 	);
 }

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

@@ -10,18 +10,12 @@ const COLORS = ["FFD8BA", "FFD5AC", "FEC1A4", "FEC68F", "FEB089", "FEBA6B", "F39
 
 export default function HeadTab({ instructions }: Props) {
 	const [color, setColor] = useState(109);
-	const [type, setType] = useState(1);
 
 	return (
-		<div className="relative grow p-3 pb-0!">
+		<>
-			<div className="flex h-full">
+			<h1 className="absolute font-bold text-xl">Head</h1>
-				<div className="grow flex flex-col">
-					<div className="flex items-center h-8">
-						<h1 className="font-bold text-xl">Head</h1>
-					</div>
-				</div>
 
-				<div className="shrink-0 w-21 pb-3 flex flex-col items-center">
+			<div className="size-full flex flex-col justify-center items-center">
 				<ColorPicker
 					color={color}
 					setColor={(i) => {
@@ -30,7 +24,7 @@ export default function HeadTab({ instructions }: Props) {
 					}}
 				/>
 
-					<div className="grid grid-cols-2 gap-1 w-fit mt-auto">
+				<div className="grid grid-cols-7 gap-1">
 					{COLORS.map((hex, i) => (
 						<button
 							type="button"
@@ -42,7 +36,6 @@ export default function HeadTab({ instructions }: Props) {
 					))}
 				</div>
 			</div>
-			</div>
+		</>
-		</div>
 	);
 }

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

@@ -12,25 +12,21 @@ export default function LipsTab({ instructions }: Props) {
 	const [hasLipstick, setHasLipstick] = useState(false);
 
 	return (
-		<div className="relative grow p-3 pb-0!">
+		<>
-			<div className="flex h-full">
+			<h1 className="absolute font-bold text-xl">Lips</h1>
-				<div className="grow flex flex-col">
-					<div className="flex items-center h-8">
-						<h1 className="font-bold text-xl">Lips</h1>
-					</div>
-				</div>
 
-				<div className="shrink-0 w-21 pb-3 flex flex-col items-center">
+			<div className="size-full flex flex-col justify-center items-center">
 				<ColorPicker
 					color={color}
 					setColor={(i) => {
 						setColor(i);
 						instructions.current.lips.color = i;
 					}}
+					tab="lips"
 				/>
 				<NumberInputs target={instructions.current.lips} />
 
-					<div className="flex gap-1.5 items-center w-full mt-auto">
+				<div className="flex gap-1.5 items-center mt-4">
 					<input
 						type="checkbox"
 						id="subcolor"
@@ -46,7 +42,6 @@ export default function LipsTab({ instructions }: Props) {
 					</label>
 				</div>
 			</div>
-			</div>
+		</>
-		</div>
 	);
 }

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

@@ -31,15 +31,11 @@ export default function HeadTab({ instructions }: Props) {
 	});
 
 	return (
-		<div className="relative grow p-3 pb-0!">
+		<>
-			<div className="flex h-full">
-				<div className="grow flex flex-col">
-					<div className="flex items-center h-8">
 			<h1 className="font-bold text-xl">Misc</h1>
-					</div>
 
-					<div className="grow overflow-y-auto">
+			<div className="grow h-full overflow-y-auto pb-3">
-						<div className="grid grid-cols-2 gap-4">
+				<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
 					<div>
 						<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium">
 							<hr className="grow border-zinc-300" />
@@ -142,8 +138,6 @@ export default function HeadTab({ instructions }: Props) {
 					}}
 				/>
 			</div>
-				</div>
+		</>
-			</div>
-		</div>
 	);
 }

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

@@ -7,18 +7,12 @@ interface Props {
 
 export default function NoseTab({ instructions }: Props) {
 	return (
-		<div className="relative grow p-3 pb-0!">
+		<>
-			<div className="flex h-full">
+			<h1 className="absolute font-bold text-xl">Nose</h1>
-				<div className="grow flex flex-col">
-					<div className="flex items-center h-8">
-						<h1 className="font-bold text-xl">Nose</h1>
-					</div>
-				</div>
 
-				<div className="shrink-0 w-21 pb-3 flex flex-col items-center">
+			<div className="size-full flex flex-col justify-center items-center">
 				<NumberInputs target={instructions.current.nose} />
 			</div>
-			</div>
+		</>
-		</div>
 	);
 }

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

@@ -38,13 +38,10 @@ export default function OtherTab({ instructions }: Props) {
 	};
 
 	return (
-		<div className="relative grow p-3 pb-0!">
+		<>
-			<div className="flex h-full">
-				<div className="grow flex flex-col">
-					<div className="flex items-center h-8">
 			<h1 className="absolute font-bold text-xl">Other</h1>
 
-						<div className="flex justify-center grow">
+			<div className="absolute right-3 z-10 flex justify-end">
 				<div className="rounded-2xl bg-orange-200">
 					{TABS.map((_, i) => (
 						<button
@@ -53,20 +50,18 @@ export default function OtherTab({ instructions }: Props) {
 							onClick={() => setTab(i)}
 							className={`px-3 py-1 rounded-2xl cursor-pointer hover:bg-orange-300/50 transition-colors duration-75 ${tab === i ? "bg-orange-300!" : "orange-200"}`}
 						>
-										{i}
+							{i + 1}
 						</button>
 					))}
 				</div>
 			</div>
-					</div>
-				</div>
 
-				<div className="shrink-0 w-21 pb-3 flex flex-col items-center">
+			<div className="absolute inset-0 flex flex-col justify-center items-center">
-					<ColorPicker color={colors[tab]} setColor={setColor} />
+				<ColorPicker disabled={tab === 0 || tab === 1} color={colors[tab]} setColor={setColor} />
 				<NumberInputs target={instructions.current.other[currentTab.name]} />
 
 				{tab === 3 && (
-						<div className="flex gap-1.5 items-center w-full mt-auto">
+					<div className="flex gap-1.5 items-center mt-4">
 						<input
 							type="checkbox"
 							id="subcolor"
@@ -83,7 +78,6 @@ export default function OtherTab({ instructions }: Props) {
 					</div>
 				)}
 			</div>
-			</div>
+		</>
-		</div>
 	);
 }

src/components/submit-form/portrait-upload.tsx

@@ -31,7 +31,7 @@ export default function PortraitUpload({ setImage }: Props) {
 				<p className="text-center text-sm">
 					{!hasImage ? (
 						<>
-							Drag and drop a screenshot of your Mii&apos;s parts here
+							Drag and drop a screenshot of your Mii&apos;s features here
 							<br />
 							or click to open
 						</>

src/components/tutorial/index.tsx

@@ -105,7 +105,7 @@ export default function Tutorial({ tutorials, isOpen, setIsOpen }: Props) {
 			/>
 
 			<div
-				className={`z-50 bg-orange-50 border-2 border-amber-500 rounded-2xl shadow-lg w-full max-w-md h-120 transition-discrete duration-300 flex flex-col ${
+				className={`z-50 bg-orange-50 border-2 border-amber-500 rounded-2xl shadow-lg w-full max-w-xl h-120 transition-discrete duration-300 flex flex-col ${
 					isVisible ? "scale-100 opacity-100" : "scale-75 opacity-0"
 				}`}
 			>

src/components/tutorial/switch-submit.tsx

@@ -29,11 +29,11 @@ export default function SubmitTutorialButton() {
 										imageSrc: "/tutorial/switch/submitting/step2.jpg",
 									},
 									{
-										text: "3. Press Y to open the parts list, take a screenshot then upload to this submit form",
+										text: "3. Press Y to open the features list, then take a screenshot and upload to this submit form",
 										imageSrc: "/tutorial/switch/submitting/step3.jpg",
 									},
 									{
-										text: "4. Adding Mii colors and settings is recommended. All instructions are optional; for values like height or distance, use the number of button clicks (positive for up/left, negative for down/right)",
+										text: "4. Adding Mii colors and settings is recommended. All instructions are optional; for values like height or distance, use the number of button clicks (positive for buttons on right, negative for buttons on left)",
 										imageSrc: "/tutorial/switch/step4.jpg",
 									},
 									{ type: "finish" },

src/lib/images.tsx

@@ -181,7 +181,7 @@ export async function generateMetadataImage(mii: Mii, author: string): Promise<{
 				) : (
 					<div tw="w-40 bg-amber-200 rounded-xl flex flex-col justify-center items-center p-6">
 						<span tw="text-amber-900 font-extrabold text-xl text-center leading-tight">Switch Guide</span>
-						<p tw="text-amber-800 text-sm text-center mt-1.5">You need to manually create the Mii, visit site for instructions.</p>
+						<p tw="text-amber-800 text-sm text-center mt-1.5">To fully create the Mii, visit the site for instructions.</p>
 						<div tw="mt-auto bg-amber-600 rounded-lg w-full py-2 flex justify-center">
 							<span tw="text-white font-semibold">View Steps</span>
 						</div>

src/lib/schemas.ts

@@ -83,17 +83,14 @@ export const userNameSchema = z
 		error: "Name can only contain letters, numbers, dashes, underscores, apostrophes, and spaces.",
 	});
 
-const colorSchema = z.number().int().min(0).max(107).optional();
+const colorSchema = z.number().int().min(0).max(152).optional();
 const geometrySchema = z.number().int().min(-10).max(10).optional();
 
 export const switchMiiInstructionsSchema = z
 	.object({
-		head: z.object({ type: z.number().int().min(0).max(15).optional(), skinColor: z.number().int().min(0).max(121).optional() }).optional(),
+		head: z.object({ skinColor: colorSchema }).optional(),
 		hair: z
 			.object({
-				setType: z.number().int().min(0).max(244).optional(),
-				bangsType: z.number().int().min(0).max(82).optional(),
-				backType: z.number().int().min(0).max(110).optional(),
 				color: colorSchema,
 				subColor: colorSchema,
 				style: z.number().int().min(1).max(3).optional(),
@@ -102,7 +99,6 @@ export const switchMiiInstructionsSchema = z
 			.optional(),
 		eyebrows: z
 			.object({
-				type: z.number().int().min(0).max(42).optional(),
 				color: colorSchema,
 				height: geometrySchema,
 				distance: geometrySchema,
@@ -115,7 +111,6 @@ export const switchMiiInstructionsSchema = z
 			.object({
 				main: z
 					.object({
-						type: z.number().int().min(0).max(120).optional(),
 						color: colorSchema,
 						height: geometrySchema,
 						distance: geometrySchema,
@@ -126,7 +121,6 @@ export const switchMiiInstructionsSchema = z
 					.optional(),
 				eyelashesTop: z
 					.object({
-						type: z.number().int().min(0).max(5).optional(),
 						height: geometrySchema,
 						distance: geometrySchema,
 						rotation: geometrySchema,
@@ -136,7 +130,6 @@ export const switchMiiInstructionsSchema = z
 					.optional(),
 				eyelashesBottom: z
 					.object({
-						type: z.number().int().min(0).max(1).optional(),
 						height: geometrySchema,
 						distance: geometrySchema,
 						rotation: geometrySchema,
@@ -146,7 +139,6 @@ export const switchMiiInstructionsSchema = z
 					.optional(),
 				eyelidTop: z
 					.object({
-						type: z.number().int().min(0).max(2).optional(),
 						height: geometrySchema,
 						distance: geometrySchema,
 						rotation: geometrySchema,
@@ -156,7 +148,6 @@ export const switchMiiInstructionsSchema = z
 					.optional(),
 				eyelidBottom: z
 					.object({
-						type: z.number().int().min(0).max(2).optional(),
 						height: geometrySchema,
 						distance: geometrySchema,
 						rotation: geometrySchema,
@@ -166,13 +157,11 @@ export const switchMiiInstructionsSchema = z
 					.optional(),
 				eyeliner: z
 					.object({
-						type: z.number().int().min(0).max(1).optional(),
 						color: colorSchema,
 					})
 					.optional(),
 				pupil: z
 					.object({
-						type: z.number().int().min(0).max(9).optional(),
 						height: geometrySchema,
 						distance: geometrySchema,
 						rotation: geometrySchema,
@@ -184,14 +173,12 @@ export const switchMiiInstructionsSchema = z
 			.optional(),
 		nose: z
 			.object({
-				type: z.number().int().min(0).max(31).optional(),
 				height: geometrySchema,
 				size: geometrySchema,
 			})
 			.optional(),
 		lips: z
 			.object({
-				type: z.number().int().min(0).max(52).optional(),
 				color: colorSchema,
 				height: geometrySchema,
 				rotation: geometrySchema,
@@ -202,14 +189,12 @@ export const switchMiiInstructionsSchema = z
 			.optional(),
 		ears: z
 			.object({
-				type: z.number().int().min(0).max(4).optional(),
 				height: geometrySchema,
 				size: geometrySchema,
 			})
 			.optional(),
 		glasses: z
 			.object({
-				type: z.number().int().min(0).max(57).optional(),
 				ringColor: colorSchema,
 				shadesColor: colorSchema,
 				height: geometrySchema,
@@ -221,7 +206,6 @@ export const switchMiiInstructionsSchema = z
 			.object({
 				wrinkles1: z
 					.object({
-						type: z.number().int().min(0).max(8).optional(),
 						color: colorSchema,
 						height: geometrySchema,
 						distance: geometrySchema,
@@ -231,7 +215,6 @@ export const switchMiiInstructionsSchema = z
 					.optional(),
 				wrinkles2: z
 					.object({
-						type: z.number().int().min(0).max(14).optional(),
 						color: colorSchema,
 						height: geometrySchema,
 						distance: geometrySchema,
@@ -241,7 +224,6 @@ export const switchMiiInstructionsSchema = z
 					.optional(),
 				beard: z
 					.object({
-						type: z.number().int().min(0).max(14).optional(),
 						color: colorSchema,
 						height: geometrySchema,
 						distance: geometrySchema,
@@ -251,17 +233,16 @@ export const switchMiiInstructionsSchema = z
 					.optional(),
 				moustache: z
 					.object({
-						type: z.number().int().min(0).max(15).optional(),
 						color: colorSchema,
 						height: geometrySchema,
 						distance: geometrySchema,
 						size: geometrySchema,
 						stretch: geometrySchema,
+						isFlipped: z.boolean().optional(),
 					})
 					.optional(),
 				goatee: z
 					.object({
-						type: z.number().int().min(0).max(13).optional(),
 						color: colorSchema,
 						height: geometrySchema,
 						distance: geometrySchema,
@@ -271,7 +252,6 @@ export const switchMiiInstructionsSchema = z
 					.optional(),
 				mole: z
 					.object({
-						type: z.number().int().min(0).max(1).optional(),
 						color: colorSchema,
 						height: geometrySchema,
 						distance: geometrySchema,
@@ -281,7 +261,6 @@ export const switchMiiInstructionsSchema = z
 					.optional(),
 				eyeShadow: z
 					.object({
-						type: z.number().int().min(0).max(3).optional(),
 						color: colorSchema,
 						height: geometrySchema,
 						distance: geometrySchema,
@@ -291,7 +270,6 @@ export const switchMiiInstructionsSchema = z
 					.optional(),
 				blush: z
 					.object({
-						type: z.number().int().min(0).max(7).optional(),
 						color: colorSchema,
 						height: geometrySchema,
 						distance: geometrySchema,

src/lib/switch.ts

@@ -118,7 +118,7 @@ export const COLORS: string[] = [
 	"2B1B3F",
 	"7B2D2D",
 	"8B3A0E",
-	// Head tab extra colors
+	// Hair tab extra colors
 	"FFD8BA",
 	"FFD5AC",
 	"FEC1A4",
@@ -133,4 +133,33 @@ export const COLORS: string[] = [
 	"59371F",
 	"662D16",
 	"392D1E",
+	// Eye tab extra colors
+	"000100",
+	"6B6F6E",
+	"663F2D",
+	"605F34",
+	"3B6F59",
+	"4856A6",
+	// Lips tab extra colors
+	"D65413",
+	"F21415",
+	"F54A4A",
+	"EE9670",
+	"8A4E40",
+	// Glasses tab extra colors
+	"000000",
+	"776F66",
+	"603915",
+	"A65F00",
+	"A61615",
+	"273465",
+	// Eye shade extra colors
+	"A54E21",
+	"653E2C",
+	"EC946F",
+	"FC9414",
+	"F97595",
+	"F54A4A",
+	"86E1B0",
+	"6E44B0",
 ];