fix: even more fixes

src/app/api/submit/route.ts

@@ -254,6 +254,7 @@ export async function POST(request: NextRequest) {
 		const fileLocation = path.join(miiUploadsDirectory, "mii.png");
 
 		await fs.writeFile(fileLocation, pngBuffer);
+		await generateMetadataImage(miiRecord, session.user?.name!);
 	} catch (error) {
 		// Clean up if something went wrong
 		await prisma.mii.delete({ where: { id: miiRecord.id } });
@@ -281,7 +282,6 @@ export async function POST(request: NextRequest) {
 			const codeFileLocation = path.join(miiUploadsDirectory, "qr-code.png");
 
 			await fs.writeFile(codeFileLocation, codePngBuffer);
-			await generateMetadataImage(miiRecord, session.user?.name!);
 		} catch (error) {
 			// Clean up if something went wrong
 			await prisma.mii.delete({ where: { id: miiRecord.id } });

src/components/mii/instructions.tsx

@@ -149,6 +149,13 @@ export default function MiiInstructions({ instructions }: Props) {
 							<ColorPosition color={hair.subColor} />
 						</TableCell>
 					)}
+					{hair.subColor2 && (
+						<TableCell label="Sub Color (Back)">
+							<ColorPosition color={hair.subColor2} />
+						</TableCell>
+					)}
+					{hair.style && <TableCell label="Tying Style">{hair.style}</TableCell>}
+					{hair.isFlipped && <TableCell label="Flipped">{hair.isFlipped ? "Yes" : "No"}</TableCell>}
 				</Section>
 			)}
 			{eyebrows && <Section name="Eyebrows" instructions={eyebrows}></Section>}
@@ -164,7 +171,11 @@ export default function MiiInstructions({ instructions }: Props) {
 				</Section>
 			)}
 			{nose && <Section name="Nose" instructions={nose}></Section>}
-			{lips && <Section name="Lips" instructions={lips}></Section>}
+			{lips && (
+				<Section name="Lips" instructions={lips}>
+					{lips.hasLipstick && <TableCell label="Lipstick">{lips.hasLipstick ? "Yes" : "No"}</TableCell>}
+				</Section>
+			)}
 			{ears && <Section name="Ears" instructions={ears}></Section>}
 			{glasses && (
 				<Section name="Glasses" instructions={glasses}>
@@ -185,7 +196,9 @@ export default function MiiInstructions({ instructions }: Props) {
 					<Section isSubSection name="Wrinkles 1" instructions={other.wrinkles1} />
 					<Section isSubSection name="Wrinkles 2" instructions={other.wrinkles2} />
 					<Section isSubSection name="Beard" instructions={other.beard} />
-					<Section isSubSection name="Moustache" instructions={other.moustache} />
+					<Section isSubSection name="Moustache" instructions={other.moustache}>
+						{other.moustache && other.moustache.isFlipped && <TableCell label="Flipped">{other.moustache.isFlipped ? "Yes" : "No"}</TableCell>}
+					</Section>
 					<Section isSubSection name="Goatee" instructions={other.goatee} />
 					<Section isSubSection name="Mole" instructions={other.mole} />
 					<Section isSubSection name="Eye Shadow" instructions={other.eyeShadow} />
@@ -214,24 +227,24 @@ export default function MiiInstructions({ instructions }: Props) {
 						</div>
 					)}
 					{datingPreferences && (
-						<div className="pl-2">
+						<div className="pl-2 not-nth-2:mt-4">
-							<h4 className="text-lg font-semibold mt-4">Dating Preferences</h4>
+							<h4 className="font-semibold text-xl text-amber-800 mb-1">Dating Preferences</h4>
 							<div className="w-min">
 								<DatingPreferencesViewer data={datingPreferences} />
 							</div>
 						</div>
 					)}
 					{voice && (
-						<div className="pl-2">
+						<div className="pl-2 not-nth-2:mt-4">
-							<h4 className="font-semibold text-xl text-amber-800 mb-1 mt-4">Voice</h4>
+							<h4 className="font-semibold text-xl text-amber-800 mb-1">Voice</h4>
 							<div className="w-min">
 								<VoiceViewer data={voice} />
 							</div>
 						</div>
 					)}
 					{personality && (
-						<div className="pl-2">
+						<div className="pl-2 not-nth-2:mt-4">
-							<h4 className="font-semibold text-xl text-amber-800 mb-1 mt-4">Personality</h4>
+							<h4 className="font-semibold text-xl text-amber-800 mb-1">Personality</h4>
 							<div className="w-min">
 								<PersonalityViewer data={personality} />
 							</div>

src/components/mii/list/index.tsx

@@ -197,7 +197,7 @@ export default async function MiiList({ searchParams, userId, inLikesPage }: Pro
 						<Carousel
 							images={[
 								`/mii/${mii.id}/image?type=mii`,
-								...(platform === "THREE_DS" ? `/mii/${mii.id}/image?type=qr-code` : ""),
+								...(platform === "THREE_DS" ? [`/mii/${mii.id}/image?type=qr-code`] : []),
 								...Array.from({ length: mii.imageCount }, (_, index) => `/mii/${mii.id}/image?type=image${index}`),
 							]}
 						/>

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

@@ -133,7 +133,11 @@ export default function HeadTab({ instructions }: Props) {
 						<PersonalityViewer
 							data={personality}
 							onClick={(key, i) => {
-								setPersonality((p) => ({ ...p, [key]: i }));
+								setPersonality((p) => {
+									const updated = { ...p, [key]: i };
+									instructions.current.personality = updated;
+									return updated;
+								});
 								instructions.current.personality = personality;
 							}}
 						/>

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

@@ -21,13 +21,13 @@ const TABS: { name: keyof SwitchMiiInstructions["other"]; length: number }[] = [
 
 export default function OtherTab({ instructions }: Props) {
 	const [tab, setTab] = useState(0);
+	const [isFlipped, setIsFlipped] = useState(false);
 
 	// One type/color state per tab
 	const [types, setTypes] = useState<number[]>(Array(TABS.length).fill(0));
 	const [colors, setColors] = useState<number[]>(Array(TABS.length).fill(0));
 
 	const currentTab = TABS[tab];
-	const isColorPickerDisabled = currentTab.colorsDisabled ? currentTab.colorsDisabled.includes(types[tab]) : false;
 
 	const setType = (value: number) => {
 		setTypes((prev) => {
@@ -78,8 +78,26 @@ export default function OtherTab({ instructions }: Props) {
 				</div>
 
 				<div className="shrink-0 w-21 pb-3 flex flex-col items-center">
-					<ColorPicker disabled={isColorPickerDisabled} color={colors[tab]} setColor={setColor} />
+					<ColorPicker 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">
+							<input
+								type="checkbox"
+								id="subcolor"
+								className="checkbox"
+								checked={isFlipped}
+								onChange={(e) => {
+									setIsFlipped(e.target.checked);
+									instructions.current.other.moustache.isFlipped = e.target.checked;
+								}}
+							/>
+							<label htmlFor="subcolor" className="text-xs">
+								Flip
+							</label>
+						</div>
+					)}
 				</div>
 			</div>
 		</div>