diff --git a/public/tutorial/switch/step1.jpg b/public/tutorial/switch/adding-mii/step1.jpg similarity index 100% rename from public/tutorial/switch/step1.jpg rename to public/tutorial/switch/adding-mii/step1.jpg diff --git a/public/tutorial/switch/step2.jpg b/public/tutorial/switch/adding-mii/step2.jpg similarity index 100% rename from public/tutorial/switch/step2.jpg rename to public/tutorial/switch/adding-mii/step2.jpg diff --git a/public/tutorial/switch/step3.jpg b/public/tutorial/switch/adding-mii/step3.jpg similarity index 100% rename from public/tutorial/switch/step3.jpg rename to public/tutorial/switch/adding-mii/step3.jpg diff --git a/public/tutorial/switch/step5.jpg b/public/tutorial/switch/step5.jpg deleted file mode 100755 index 3d0a06b..0000000 Binary files a/public/tutorial/switch/step5.jpg and /dev/null differ diff --git a/public/tutorial/switch/submitting/step1.jpg b/public/tutorial/switch/submitting/step1.jpg new file mode 100755 index 0000000..ab5aa09 Binary files /dev/null and b/public/tutorial/switch/submitting/step1.jpg differ diff --git a/public/tutorial/switch/submitting/step2.jpg b/public/tutorial/switch/submitting/step2.jpg new file mode 100755 index 0000000..417fee5 Binary files /dev/null and b/public/tutorial/switch/submitting/step2.jpg differ diff --git a/public/tutorial/switch/submitting/step3.jpg b/public/tutorial/switch/submitting/step3.jpg new file mode 100755 index 0000000..7587ce6 Binary files /dev/null and b/public/tutorial/switch/submitting/step3.jpg differ diff --git a/src/components/mii/instructions.tsx b/src/components/mii/instructions.tsx index dcdbdd3..22ccaeb 100644 --- a/src/components/mii/instructions.tsx +++ b/src/components/mii/instructions.tsx @@ -78,7 +78,6 @@ function TableCell({ label, children }: TableCellProps) { function Section({ name, instructions, children, isSubSection }: SectionProps) { if (typeof instructions !== "object" || !instructions) return null; - const type = "type" in instructions ? instructions.type : undefined; const color = "color" in instructions ? instructions.color : undefined; const height = "height" in instructions ? instructions.height : undefined; const distance = "distance" in instructions ? instructions.distance : undefined; @@ -92,11 +91,6 @@ function Section({ name, instructions, children, isSubSection }: SectionProps) { - {type && ( - - - - )} {color && ( @@ -129,21 +123,6 @@ export default function MiiInstructions({ instructions }: Props) { {head &&
} {hair && (
- {hair.setType && ( - - - - )} - {hair.bangsType && ( - - - - )} - {hair.backType && ( - - - - )} {hair.subColor && ( diff --git a/src/components/submit-form/index.tsx b/src/components/submit-form/index.tsx index c1098ec..a26d766 100644 --- a/src/components/submit-form/index.tsx +++ b/src/components/submit-form/index.tsx @@ -51,40 +51,37 @@ export default function SubmitForm() { const [platform, setPlatform] = useState("SWITCH"); const [gender, setGender] = useState("MALE"); const instructions = useRef({ - head: { type: null, skinColor: null }, + head: { skinColor: null }, hair: { - setType: null, - bangsType: null, - backType: null, color: null, subColor: null, subColor2: null, style: null, isFlipped: false, }, - eyebrows: { type: null, color: null, height: null, distance: null, rotation: null, size: null, stretch: null }, + eyebrows: { color: null, height: null, distance: null, rotation: null, size: null, stretch: null }, eyes: { - main: { type: null, color: null, height: null, distance: null, rotation: null, size: null, stretch: null }, - eyelashesTop: { type: null, height: null, distance: null, rotation: null, size: null, stretch: null }, - eyelashesBottom: { type: null, height: null, distance: null, rotation: null, size: null, stretch: null }, - eyelidTop: { type: null, height: null, distance: null, rotation: null, size: null, stretch: null }, - eyelidBottom: { type: null, height: null, distance: null, rotation: null, size: null, stretch: null }, - eyeliner: { type: null, color: null }, - pupil: { type: null, height: null, distance: null, rotation: null, size: null, stretch: null }, + 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: { type: null, height: null, size: null }, - lips: { type: null, color: null, height: null, rotation: null, size: null, stretch: null, hasLipstick: false }, - ears: { type: null, height: null, size: null }, - glasses: { type: null, ringColor: null, shadesColor: null, height: 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: { type: null, height: null, distance: null, size: null, stretch: null }, - wrinkles2: { type: null, height: null, distance: null, size: null, stretch: null }, - beard: { type: null, color: null }, - moustache: { type: null, color: null, height: null, isFlipped: false, size: null, stretch: null }, - goatee: { type: null, color: null }, - mole: { type: null, color: null, height: null, distance: null, size: null }, - eyeShadow: { type: null, color: null, height: null, distance: null, size: null, stretch: null }, - blush: { type: null, color: null, height: null, distance: null, size: null, stretch: null }, + 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, diff --git a/src/components/submit-form/mii-editor/index.tsx b/src/components/submit-form/mii-editor/index.tsx index 8605a24..1be2ba9 100644 --- a/src/components/submit-form/mii-editor/index.tsx +++ b/src/components/submit-form/mii-editor/index.tsx @@ -69,8 +69,9 @@ export default function MiiEditor({ instructions }: Props) { {(Object.keys(TAB_COMPONENTS) as Tab[]).map((t) => { const TabComponent = TAB_COMPONENTS[t]; return ( -
+
+

Your parts screenshot should handle the types!

); })} diff --git a/src/components/submit-form/mii-editor/tabs/ears.tsx b/src/components/submit-form/mii-editor/tabs/ears.tsx index d889435..1e50e1a 100644 --- a/src/components/submit-form/mii-editor/tabs/ears.tsx +++ b/src/components/submit-form/mii-editor/tabs/ears.tsx @@ -1,5 +1,4 @@ import { SwitchMiiInstructions } from "@/types"; -import TypeSelector from "../type-selector"; import NumberInputs from "../number-inputs"; import { useState } from "react"; @@ -17,17 +16,6 @@ export default function EarsTab({ instructions }: Props) {

Ears

- -
- { - setType(i); - instructions.current.ears.type = i; - }} - /> -
diff --git a/src/components/submit-form/mii-editor/tabs/eyebrows.tsx b/src/components/submit-form/mii-editor/tabs/eyebrows.tsx index 136aa57..83ad0d8 100644 --- a/src/components/submit-form/mii-editor/tabs/eyebrows.tsx +++ b/src/components/submit-form/mii-editor/tabs/eyebrows.tsx @@ -1,6 +1,5 @@ import { SwitchMiiInstructions } from "@/types"; import ColorPicker from "../color-picker"; -import TypeSelector from "../type-selector"; import NumberInputs from "../number-inputs"; import { useState } from "react"; @@ -19,18 +18,6 @@ export default function EyebrowsTab({ instructions }: Props) {

Eyebrows

- -
- { - setType(i); - instructions.current.eyebrows.type = i; - }} - /> -
diff --git a/src/components/submit-form/mii-editor/tabs/eyes.tsx b/src/components/submit-form/mii-editor/tabs/eyes.tsx index cac913b..d5b3083 100644 --- a/src/components/submit-form/mii-editor/tabs/eyes.tsx +++ b/src/components/submit-form/mii-editor/tabs/eyes.tsx @@ -1,7 +1,6 @@ import { SwitchMiiInstructions } from "@/types"; import { useState } from "react"; import ColorPicker from "../color-picker"; -import TypeSelector from "../type-selector"; import NumberInputs from "../number-inputs"; interface Props { @@ -22,21 +21,10 @@ export default function OtherTab({ instructions }: Props) { const [tab, setTab] = useState(0); // One type/color state per tab - const [types, setTypes] = useState([5, 0, 0, 0, 0, 0, 0]); const [colors, setColors] = useState(Array(TABS.length).fill(0)); const currentTab = TABS[tab]; - const setType = (value: number) => { - setTypes((prev) => { - const copy = [...prev]; - copy[tab] = value; - return copy; - }); - - instructions.current.eyes[currentTab.name].type = value; - }; - const setColor = (value: number) => { setColors((prev) => { const copy = [...prev]; @@ -69,10 +57,6 @@ export default function OtherTab({ instructions }: Props) {
- -
- -
diff --git a/src/components/submit-form/mii-editor/tabs/glasses.tsx b/src/components/submit-form/mii-editor/tabs/glasses.tsx index 45219e5..94a43c0 100644 --- a/src/components/submit-form/mii-editor/tabs/glasses.tsx +++ b/src/components/submit-form/mii-editor/tabs/glasses.tsx @@ -1,15 +1,13 @@ +import { useState } from "react"; import { SwitchMiiInstructions } from "@/types"; import ColorPicker from "../color-picker"; -import TypeSelector from "../type-selector"; import NumberInputs from "../number-inputs"; -import { useState } from "react"; interface Props { instructions: React.RefObject; } export default function GlassesTab({ instructions }: Props) { - const [type, setType] = useState(0); const [ringColor, setRingColor] = useState(0); const [shadesColor, setShadesColor] = useState(0); @@ -20,19 +18,6 @@ export default function GlassesTab({ instructions }: Props) {

Glasses

- -
- { - setType(i); - instructions.current.glasses.type = i; - }} - /> -
@@ -45,7 +30,6 @@ export default function GlassesTab({ instructions }: Props) { /> { setShadesColor(i); instructions.current.glasses.shadesColor = i; diff --git a/src/components/submit-form/mii-editor/tabs/hair.tsx b/src/components/submit-form/mii-editor/tabs/hair.tsx index 9fbf0eb..63b2479 100644 --- a/src/components/submit-form/mii-editor/tabs/hair.tsx +++ b/src/components/submit-form/mii-editor/tabs/hair.tsx @@ -1,7 +1,6 @@ import { SwitchMiiInstructions } from "@/types"; import { useState } from "react"; import ColorPicker from "../color-picker"; -import TypeSelector from "../type-selector"; interface Props { instructions: React.RefObject; @@ -11,44 +10,14 @@ type Tab = "sets" | "bangs" | "back"; export default function HairTab({ instructions }: Props) { const [tab, setTab] = useState("sets"); - const [setsType, setSetsType] = useState(43); - const [bangsType, setBangsType] = useState(null); - const [backType, setBackType] = useState(null); const [color, setColor] = useState(0); const [subColor, setSubColor] = useState(null); const [subColor2, setSubColor2] = useState(null); const [style, setStyle] = useState(null); const [isFlipped, setIsFlipped] = useState(false); - const type = tab === "sets" ? setsType : tab === "bangs" ? bangsType : backType; const length = tab === "sets" ? 245 : tab === "bangs" ? 83 : 111; - const setType = (value: number) => { - if (tab === "sets") { - setSetsType(value); - instructions.current.hair.setType = value; - // Clear bangs and back - setBangsType(null); - setBackType(null); - setSubColor2(null); - instructions.current.hair.bangsType = null; - instructions.current.hair.backType = null; - instructions.current.hair.subColor2 = null; - } else if (tab === "bangs") { - setBangsType(value); - instructions.current.hair.bangsType = value; - // Clear set - setSetsType(null); - instructions.current.hair.setType = null; - } else { - setBackType(value); - instructions.current.hair.backType = value; - // Clear set - setSetsType(null); - instructions.current.hair.setType = null; - } - }; - return (
@@ -83,10 +52,6 @@ export default function HairTab({ instructions }: Props) {
- -
- -
diff --git a/src/components/submit-form/mii-editor/tabs/head.tsx b/src/components/submit-form/mii-editor/tabs/head.tsx index 70b641d..53aabc0 100644 --- a/src/components/submit-form/mii-editor/tabs/head.tsx +++ b/src/components/submit-form/mii-editor/tabs/head.tsx @@ -1,7 +1,6 @@ import { useState } from "react"; import ColorPicker from "../color-picker"; import { SwitchMiiInstructions } from "@/types"; -import TypeSelector from "../type-selector"; interface Props { instructions: React.RefObject; @@ -20,17 +19,6 @@ export default function HeadTab({ instructions }: Props) {

Head

- -
- { - setType(i); - instructions.current.head.type = i; - }} - /> -
diff --git a/src/components/submit-form/mii-editor/tabs/lips.tsx b/src/components/submit-form/mii-editor/tabs/lips.tsx index bf2395b..bb53589 100644 --- a/src/components/submit-form/mii-editor/tabs/lips.tsx +++ b/src/components/submit-form/mii-editor/tabs/lips.tsx @@ -1,6 +1,5 @@ import { SwitchMiiInstructions } from "@/types"; import ColorPicker from "../color-picker"; -import TypeSelector from "../type-selector"; import NumberInputs from "../number-inputs"; import { useState } from "react"; @@ -9,7 +8,6 @@ interface Props { } export default function LipsTab({ instructions }: Props) { - const [type, setType] = useState(1); const [color, setColor] = useState(0); const [hasLipstick, setHasLipstick] = useState(false); @@ -20,17 +18,6 @@ export default function LipsTab({ instructions }: Props) {

Lips

- -
- { - setType(i); - instructions.current.lips.type = i; - }} - /> -
diff --git a/src/components/submit-form/mii-editor/tabs/nose.tsx b/src/components/submit-form/mii-editor/tabs/nose.tsx index d8d709e..de2b93d 100644 --- a/src/components/submit-form/mii-editor/tabs/nose.tsx +++ b/src/components/submit-form/mii-editor/tabs/nose.tsx @@ -1,15 +1,11 @@ import { SwitchMiiInstructions } from "@/types"; -import TypeSelector from "../type-selector"; import NumberInputs from "../number-inputs"; -import { useState } from "react"; interface Props { instructions: React.RefObject; } export default function NoseTab({ instructions }: Props) { - const [type, setType] = useState(5); - return (
@@ -17,17 +13,6 @@ export default function NoseTab({ instructions }: Props) {

Nose

- -
- { - setType(i); - instructions.current.nose.type = i; - }} - /> -
diff --git a/src/components/submit-form/mii-editor/tabs/other.tsx b/src/components/submit-form/mii-editor/tabs/other.tsx index 6a4b1e2..4e7fd31 100644 --- a/src/components/submit-form/mii-editor/tabs/other.tsx +++ b/src/components/submit-form/mii-editor/tabs/other.tsx @@ -1,7 +1,6 @@ import { SwitchMiiInstructions } from "@/types"; import { useState } from "react"; import ColorPicker from "../color-picker"; -import TypeSelector from "../type-selector"; import NumberInputs from "../number-inputs"; interface Props { @@ -24,21 +23,10 @@ export default function OtherTab({ instructions }: Props) { const [isFlipped, setIsFlipped] = useState(false); // One type/color state per tab - const [types, setTypes] = useState(Array(TABS.length).fill(0)); const [colors, setColors] = useState(Array(TABS.length).fill(0)); const currentTab = TABS[tab]; - const setType = (value: number) => { - setTypes((prev) => { - const copy = [...prev]; - copy[tab] = value; - return copy; - }); - - instructions.current.other[currentTab.name].type = value; - }; - const setColor = (value: number) => { setColors((prev) => { const copy = [...prev]; @@ -71,10 +59,6 @@ export default function OtherTab({ instructions }: Props) {
- -
- -
diff --git a/src/components/submit-form/mii-editor/type-selector.tsx b/src/components/submit-form/mii-editor/type-selector.tsx deleted file mode 100644 index 4586421..0000000 --- a/src/components/submit-form/mii-editor/type-selector.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { Fragment } from "react/jsx-runtime"; - -interface Props { - hasNoneOption?: boolean; - isGlassesTab?: boolean; - length: number; - type: number | null; - setType: (type: number) => void; -} - -export default function TypeSelector({ hasNoneOption, isGlassesTab, length, type, setType }: Props) { - return ( -
- {Array.from({ length }).map((_, i) => ( - - - - {isGlassesTab && i === 43 &&
} - - ))} -
- ); -} diff --git a/src/components/submit-form/portrait-upload.tsx b/src/components/submit-form/portrait-upload.tsx index 132ed55..81cd65e 100644 --- a/src/components/submit-form/portrait-upload.tsx +++ b/src/components/submit-form/portrait-upload.tsx @@ -22,7 +22,7 @@ export default function PortraitUpload({ setImage }: Props) { }; reader.readAsDataURL(file); }, - [setImage] + [setImage], ); return ( @@ -31,7 +31,7 @@ export default function PortraitUpload({ setImage }: Props) {

{!hasImage ? ( <> - Drag and drop your Mii's portrait here + Drag and drop a screenshot of your Mii's parts here
or click to open diff --git a/src/components/tutorial/switch-add-mii.tsx b/src/components/tutorial/switch-add-mii.tsx index 98c7190..453dd07 100644 --- a/src/components/tutorial/switch-add-mii.tsx +++ b/src/components/tutorial/switch-add-mii.tsx @@ -24,15 +24,15 @@ export default function SwitchAddMiiTutorialButton() { steps: [ { text: "1. Press X to open the menu, then select 'Add a Mii'", - imageSrc: "/tutorial/switch/step1.jpg", + imageSrc: "/tutorial/switch/adding-mii/step1.jpg", }, { text: "2. Press 'From scratch' and choose the Male template (instructions may be slightly inaccurate if you select Female)", - imageSrc: "/tutorial/switch/step2.jpg", + imageSrc: "/tutorial/switch/adding-mii/step2.jpg", }, { text: "3. Follow all instructions (not all instructions will be there, check next slide for more)", - imageSrc: "/tutorial/switch/step3.jpg", + imageSrc: "/tutorial/switch/adding-mii/step3.jpg", }, { text: "4. If the instructions have height, distance, etc. the value will be relative to how many times to click the button - positive for up/left, negative for down/right", diff --git a/src/components/tutorial/switch-submit.tsx b/src/components/tutorial/switch-submit.tsx index eb8b150..7f0d863 100644 --- a/src/components/tutorial/switch-submit.tsx +++ b/src/components/tutorial/switch-submit.tsx @@ -18,28 +18,24 @@ export default function SubmitTutorialButton() {