trafficlunar/tomodachi-share
1
0
Fork 0
mirror of https://github.com/trafficlunar/tomodachi-share.git synced 2026-05-13 13:17:45 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: clearer submit form

Browse source 
PLEASE SUBMIT SCREENSHOTS CORRECTLY!! 🙏
This commit is contained in:
trafficlunar 2026-03-29 23:42:32 +01:00
parent 825f74ef6d
commit 9f65847c3b
4 changed files with 57 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
public/tutorial/switch/features.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 359 KiB

BIN
public/tutorial/switch/portrait.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 182 KiB

53
src/components/submit-form/index.tsx
View file

@ -28,6 +28,7 @@ import LikeButton from "../like-button";
import Carousel from "../carousel"; import Carousel from "../carousel";
import SubmitButton from "../submit-button"; import SubmitButton from "../submit-button";
import Dropzone from "../dropzone"; import Dropzone from "../dropzone";
import Image from "next/image";
export default function SubmitForm() { export default function SubmitForm() {
const [files, setFiles] = useState<FileWithPath[]>([]); const [files, setFiles] = useState<FileWithPath[]>([]);
@ -376,22 +377,62 @@ export default function SubmitForm() {
</div> </div>
</div> </div>
{/* (Switch Only) Mii Portrait */} {/* (Switch Only) Mii Screenshots */}
<div className={`${platform === "SWITCH" ? "" : "hidden"}`}> <div className={`${platform === "SWITCH" ? "" : "hidden"}`}>
{/* Separator */} {/* 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 mb-2">
<hr className="grow border-zinc-300" /> <hr className="grow border-zinc-300" />
<span>Mii Portrait</span> <span>Mii Screenshots</span>
<hr className="grow border-zinc-300" /> <hr className="grow border-zinc-300" />
</div> </div>
<div className="flex flex-col items-center gap-2"> <div className="flex flex-col items-center gap-4 w-full">
<SwitchFileUpload text="a screenshot of your Mii here" image={miiPortraitUri} setImage={setMiiPortraitUri} forceCrop /> {/* Step 1 - Portrait */}
<SwitchFileUpload text="a screenshot of your Mii's features here" image={miiFeaturesUri} setImage={setMiiFeaturesUri} /> <div className="flex flex-col items-center gap-2 w-full">
<div className="flex items-center gap-2 self-start">
<span className="bg-orange-400 text-white text-xs font-bold rounded-full size-5 flex items-center justify-center shrink-0">1</span>
<span className="text-sm font-semibold text-zinc-600">Portrait screenshot</span>
</div>
<div className="flex gap-3 w-full items-start max-sm:flex-col max-sm:items-center">
<div data-tooltip="Your screenshot should look like this">
<Image
src="/tutorial/switch/portrait.png"
alt="Example portrait screenshot"
width={80}
height={80}
className="size-20 object-cover rounded-xl border-2 border-orange-300 shrink-0 opacity-70"
/>
</div>
<SwitchFileUpload text="a screenshot of your Mii here" image={miiPortraitUri} setImage={setMiiPortraitUri} forceCrop />
</div>
</div>
{/* Step 2 - Features */}
<div className="flex flex-col items-center gap-2 w-full">
<div className="flex items-center gap-2 self-start">
<span className="bg-orange-400 text-white text-xs font-bold rounded-full size-5 flex items-center justify-center shrink-0">2</span>
<span className="text-sm font-semibold text-zinc-600">
Features screenshot <span className="text-orange-500">(the features panel - see example)</span>
</span>
</div>
<div className="flex gap-3 w-full items-start max-sm:flex-col max-sm:items-center">
<div data-tooltip="Your features screenshot should show this">
<Image
src="/tutorial/switch/features.png"
alt="Example features screenshot showing the parts panel"
width={80}
height={80}
className="size-20 object-cover rounded-xl border-2 border-orange-300 shrink-0 opacity-70"
/>
</div>
<SwitchFileUpload text="a screenshot of your Mii's features here" image={miiFeaturesUri} setImage={setMiiFeaturesUri} />
</div>
</div>
<SwitchSubmitTutorialButton /> <SwitchSubmitTutorialButton />
</div> </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> <p className="text-xs text-zinc-400 text-center mt-2">A tutorial on how to screenshot the features is above.</p>
</div> </div>
{/* (3DS only) QR code scanning */} {/* (3DS only) QR code scanning */}

18
src/components/submit-form/switch-file-upload.tsx
View file

@ -50,14 +50,16 @@ export default function SwitchFileUpload({ text, forceCrop, image, setImage }: P
<span>or</span> <span>or</span>
<button type="button" aria-label="Use your camera" onClick={() => setIsCameraOpen(true)} className="pill button gap-2"> <div className="flex gap-2 max-sm:flex-col">
<Icon icon="mdi:camera" fontSize={20} /> <button type="button" aria-label="Use your camera" onClick={() => setIsCameraOpen(true)} className="pill button gap-2">
Use your camera <Icon icon="mdi:camera" fontSize={20} />
</button> Use your camera
<button type="button" aria-label="Crop image" onClick={() => setIsCropOpen(true)} className="pill button gap-2"> </button>
<Icon icon="mdi:image-edit" fontSize={20} /> <button type="button" aria-label="Crop image" onClick={() => setIsCropOpen(true)} className="pill button gap-2">
Edit Image <Icon icon="mdi:image-edit" fontSize={20} />
</button> Edit Image
</button>
</div>
<Camera <Camera
isOpen={isCameraOpen} isOpen={isCameraOpen}