mirror of
https://github.com/trafficlunar/tomodachi-share.git
synced 2026-06-28 14:44:15 +00:00
feat: use data from demo
This commit is contained in:
parent
22911804c0
commit
74139dd54e
28 changed files with 364 additions and 377 deletions
|
|
@ -143,7 +143,7 @@ export default function Tutorial({ tutorials, isOpen, setIsOpen }: Props) {
|
|||
alt="tutorial thumbnail"
|
||||
width={128}
|
||||
height={128}
|
||||
className="rounded-lg border-2 border-zinc-300"
|
||||
className="rounded-lg border-2 border-zinc-300 object-cover"
|
||||
/>
|
||||
<p className="mt-2">{tutorial.title}</p>
|
||||
{/* Set opacity to 0 to keep height the same with other tutorials */}
|
||||
|
|
|
|||
|
|
@ -1,42 +0,0 @@
|
|||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { createPortal } from "react-dom";
|
||||
import { Icon } from "@iconify/react";
|
||||
|
||||
import Tutorial from ".";
|
||||
|
||||
export default function ScanTutorialButton() {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<button aria-label="Tutorial" type="button" onClick={() => setIsOpen(true)} className="text-3xl cursor-pointer">
|
||||
<Icon icon="fa:question-circle" />
|
||||
<span>Tutorial</span>
|
||||
</button>
|
||||
|
||||
{isOpen &&
|
||||
createPortal(
|
||||
<Tutorial
|
||||
tutorials={[
|
||||
{
|
||||
title: "Adding Mii",
|
||||
steps: [
|
||||
{ text: "1. Enter the town hall", imageSrc: "/tutorial/step1.png" },
|
||||
{ text: "2. Go into 'QR Code'", imageSrc: "/tutorial/adding-mii/step2.png" },
|
||||
{ text: "3. Press 'Scan QR Code'", imageSrc: "/tutorial/adding-mii/step3.png" },
|
||||
{ text: "4. Click on the QR code below the Mii's image", imageSrc: "/tutorial/adding-mii/step4.png" },
|
||||
{ text: "5. Scan with your 3DS", imageSrc: "/tutorial/adding-mii/step5.png" },
|
||||
{ type: "finish" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
isOpen={isOpen}
|
||||
setIsOpen={setIsOpen}
|
||||
/>,
|
||||
document.body,
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,64 +0,0 @@
|
|||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { createPortal } from "react-dom";
|
||||
import Tutorial from ".";
|
||||
|
||||
export default function SubmitTutorialButton() {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<button type="button" onClick={() => setIsOpen(true)} className="text-sm text-orange-400 cursor-pointer underline-offset-2 hover:underline">
|
||||
How to?
|
||||
</button>
|
||||
|
||||
{isOpen &&
|
||||
createPortal(
|
||||
<Tutorial
|
||||
tutorials={[
|
||||
{
|
||||
title: "Allow Copying",
|
||||
thumbnail: "/tutorial/allow-copying/thumbnail.png",
|
||||
hint: "Suggested!",
|
||||
steps: [
|
||||
{ type: "start" },
|
||||
{ text: "1. Enter the town hall", imageSrc: "/tutorial/step1.png" },
|
||||
{ text: "2. Go into 'Mii List'", imageSrc: "/tutorial/allow-copying/step2.png" },
|
||||
{ text: "3. Select and edit the Mii you wish to submit", imageSrc: "/tutorial/allow-copying/step3.png" },
|
||||
{ text: "4. Click 'Other Settings' in the information screen", imageSrc: "/tutorial/allow-copying/step4.png" },
|
||||
{ text: "5. Click on 'Don't Allow' under the 'Copying' text", imageSrc: "/tutorial/allow-copying/step5.png" },
|
||||
{ text: "6. Press 'Allow'", imageSrc: "/tutorial/allow-copying/step6.png" },
|
||||
{ text: "7. Confirm the edits to the Mii", imageSrc: "/tutorial/allow-copying/step7.png" },
|
||||
{ type: "finish" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Create QR Code",
|
||||
thumbnail: "/tutorial/create-qr-code/thumbnail.png",
|
||||
steps: [
|
||||
{ type: "start" },
|
||||
{ text: "1. Enter the town hall", imageSrc: "/tutorial/step1.png" },
|
||||
{ text: "2. Go into 'QR Code'", imageSrc: "/tutorial/create-qr-code/step2.png" },
|
||||
{ text: "3. Press 'Create QR Code'", imageSrc: "/tutorial/create-qr-code/step3.png" },
|
||||
{ text: "4. Select and press 'OK' on the Mii you wish to submit", imageSrc: "/tutorial/create-qr-code/step4.png" },
|
||||
{
|
||||
text: "5. Pick any option; it doesn't matter since the QR code regenerates upon submission.",
|
||||
imageSrc: "/tutorial/create-qr-code/step5.png",
|
||||
},
|
||||
{
|
||||
text: "6. Exit the tutorial; Upload the QR code (scan with camera or upload file through SD card).",
|
||||
imageSrc: "/tutorial/create-qr-code/step6.png",
|
||||
},
|
||||
{ type: "finish" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
isOpen={isOpen}
|
||||
setIsOpen={setIsOpen}
|
||||
/>,
|
||||
document.body,
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
52
src/components/tutorial/switch-add-mii.tsx
Normal file
52
src/components/tutorial/switch-add-mii.tsx
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { createPortal } from "react-dom";
|
||||
import { Icon } from "@iconify/react";
|
||||
import Tutorial from ".";
|
||||
|
||||
export default function SwitchAddMiiTutorialButton() {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<button aria-label="Tutorial" type="button" onClick={() => setIsOpen(true)} className="text-3xl cursor-pointer">
|
||||
<Icon icon="fa:question-circle" />
|
||||
<span>Tutorial</span>
|
||||
</button>
|
||||
|
||||
{isOpen &&
|
||||
createPortal(
|
||||
<Tutorial
|
||||
tutorials={[
|
||||
{
|
||||
title: "Adding Mii",
|
||||
steps: [
|
||||
{
|
||||
text: "1. Press X to open the menu, then select 'Add a Mii'",
|
||||
imageSrc: "/tutorial/switch/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",
|
||||
},
|
||||
{
|
||||
text: "3. Follow all instructions (not all instructions will be there, check next slide for more)",
|
||||
imageSrc: "/tutorial/switch/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",
|
||||
imageSrc: "/tutorial/switch/step4.jpg",
|
||||
},
|
||||
{ type: "finish" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
isOpen={isOpen}
|
||||
setIsOpen={setIsOpen}
|
||||
/>,
|
||||
document.body,
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,61 +0,0 @@
|
|||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { createPortal } from "react-dom";
|
||||
import { Icon } from "@iconify/react";
|
||||
import Tutorial from ".";
|
||||
|
||||
export default function ThreeDsScanTutorialButton() {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
aria-label="Tutorial"
|
||||
type="button"
|
||||
onClick={() => setIsOpen(true)}
|
||||
className="text-3xl cursor-pointer"
|
||||
>
|
||||
<Icon icon="fa:question-circle" />
|
||||
<span>Tutorial</span>
|
||||
</button>
|
||||
|
||||
{isOpen &&
|
||||
createPortal(
|
||||
<Tutorial
|
||||
tutorials={[
|
||||
{
|
||||
title: "Adding Mii",
|
||||
steps: [
|
||||
{
|
||||
text: "1. Enter the town hall",
|
||||
imageSrc: "/tutorial/switch/step1.png",
|
||||
},
|
||||
{
|
||||
text: "2. Go into 'QR Code'",
|
||||
imageSrc: "/tutorial/switch/adding-mii/step2.png",
|
||||
},
|
||||
{
|
||||
text: "3. Press 'Scan QR Code'",
|
||||
imageSrc: "/tutorial/switch/adding-mii/step3.png",
|
||||
},
|
||||
{
|
||||
text: "4. Click on the QR code below the Mii's image",
|
||||
imageSrc: "/tutorial/switch/adding-mii/step4.png",
|
||||
},
|
||||
{
|
||||
text: "5. Scan with your 3DS",
|
||||
imageSrc: "/tutorial/switch/adding-mii/step5.png",
|
||||
},
|
||||
{ type: "finish" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
isOpen={isOpen}
|
||||
setIsOpen={setIsOpen}
|
||||
/>,
|
||||
document.body
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -18,32 +18,27 @@ export default function SubmitTutorialButton() {
|
|||
<Tutorial
|
||||
tutorials={[
|
||||
{
|
||||
title: "Create QR Code",
|
||||
thumbnail: "/tutorial/switch/create-qr-code/thumbnail.png",
|
||||
title: "Mii Instructions",
|
||||
steps: [
|
||||
{
|
||||
text: "1. Enter the town hall",
|
||||
imageSrc: "/tutorial/switch/step1.png",
|
||||
text: "1. Press X to open the menu, then select 'Add a Mii' (or 'Residents' if you're submitting an existing Mii)",
|
||||
imageSrc: "/tutorial/switch/step1.jpg",
|
||||
},
|
||||
{
|
||||
text: "2. Go into 'QR Code'",
|
||||
imageSrc: "/tutorial/switch/create-qr-code/step2.png",
|
||||
text: "2. Press 'From scratch' and choose the Male template (instructions may be slightly inaccurate if you select Female, it's fine if you change all defaults)",
|
||||
imageSrc: "/tutorial/switch/step2.jpg",
|
||||
},
|
||||
{
|
||||
text: "3. Press 'Create QR Code'",
|
||||
imageSrc: "/tutorial/switch/create-qr-code/step3.png",
|
||||
text: "3. Customize your Mii to your liking",
|
||||
imageSrc: "/tutorial/switch/step3.jpg",
|
||||
},
|
||||
{
|
||||
text: "4. Select and press 'OK' on the Mii you wish to submit",
|
||||
imageSrc: "/tutorial/switch/create-qr-code/step4.png",
|
||||
text: "4. All instructions are optional but if you want to add height, distance, etc. the value will be relative to how many times you clicked the button - positive for up/left, negative for down/right",
|
||||
imageSrc: "/tutorial/switch/step4.jpg",
|
||||
},
|
||||
{
|
||||
text: "5. Pick any option; it doesn't matter since the QR code regenerates upon submission.",
|
||||
imageSrc: "/tutorial/switch/create-qr-code/step5.png",
|
||||
},
|
||||
{
|
||||
text: "6. Exit the tutorial; Upload the QR code (scan with camera or upload file through SD card).",
|
||||
imageSrc: "/tutorial/switch/create-qr-code/step6.png",
|
||||
text: "5. Upload instructions, then screenshot the Mii for the portrait (feel free to crop it)",
|
||||
imageSrc: "/tutorial/switch/step5.jpg",
|
||||
},
|
||||
{ type: "finish" },
|
||||
],
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue