mirror of
https://github.com/trafficlunar/tomodachi-share.git
synced 2026-09-27 19:41:46 +00:00
Compare commits
2 commits
ba06950881
...
59866a00a5
| Author | SHA1 | Date | |
|---|---|---|---|
| 59866a00a5 | |||
| 474f861393 |
6 changed files with 125 additions and 96 deletions
BIN
frontend/public/tutorial/switch/adding-mii/modded/filter.png
Normal file
BIN
frontend/public/tutorial/switch/adding-mii/modded/filter.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
frontend/public/tutorial/switch/adding-mii/modded/success.png
Normal file
BIN
frontend/public/tutorial/switch/adding-mii/modded/success.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 145 KiB |
|
|
@ -80,87 +80,93 @@ export default function MiiList({ parentPage, userId, bypassCache }: Props) {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-4 gap-4 max-lg:grid-cols-3 max-md:grid-cols-2 max-[30rem]:grid-cols-1">
|
||||
{data.miis.map((mii) => (
|
||||
<div
|
||||
key={mii.id}
|
||||
className={`flex flex-col relative bg-zinc-50 rounded-3xl border-2 shadow-lg p-[0.8rem] transition hover:scale-105 hover:bg-cyan-100 hover:border-cyan-600 ${mii.quarantined ? "border-red-300 bg-red-50!" : mii.in_queue ? "border-zinc-400 opacity-70" : "border-zinc-300"}`}
|
||||
>
|
||||
<div className="absolute top-2 left-2 z-10 flex flex-col gap-1">
|
||||
{mii.in_queue && (
|
||||
<div className="bg-zinc-500 text-white text-xs font-semibold px-2 py-1 rounded-full shadow-sm flex items-center gap-1 w-fit">
|
||||
<Icon icon="mdi:clock-outline" className="text-base" />
|
||||
In Queue
|
||||
</div>
|
||||
)}
|
||||
{mii.needsFixing && (
|
||||
<div className="bg-orange-500 text-white text-xs font-semibold px-2 py-1 rounded-full shadow-sm flex items-center gap-1 w-fit">
|
||||
<Icon icon="mdi:alert-outline" className="text-base" />
|
||||
Needs Fixing
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-xs mb-2 text-zinc-600 text-right">Not finding what you're looking for? Try including controversial Miis in filters.</p>
|
||||
|
||||
<Link to={`/mii/${mii.id}`} className="overflow-hidden rounded-xl bg-zinc-300 shrink-0">
|
||||
<img
|
||||
src={`${import.meta.env.VITE_API_URL}/mii/${mii.id}/image?type=mii`}
|
||||
width={240}
|
||||
height={160}
|
||||
alt="mii image"
|
||||
className="w-full h-auto aspect-3/2 object-contain"
|
||||
/>
|
||||
</Link>
|
||||
|
||||
<div className="p-4 flex flex-col gap-1 h-full">
|
||||
<div className="flex justify-between">
|
||||
<Link to={`/mii/${mii.id}`} className="relative font-bold text-2xl line-clamp-1 w-full text-ellipsis wrap-break-word" title={mii.name}>
|
||||
{mii.name}
|
||||
</Link>
|
||||
<div title={mii.platform === "SWITCH" ? "Switch" : "3DS"} className="text-[1.25rem] opacity-25">
|
||||
{mii.platform === "SWITCH" ? (
|
||||
<Icon icon="cib:nintendo-switch" className="text-red-400" />
|
||||
) : (
|
||||
<Icon icon="cib:nintendo-3ds" className="text-sky-400" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="tags" className="flex flex-wrap gap-1">
|
||||
{mii.tags.map((tag: string) => (
|
||||
<Link to={`?tags=${tag}`} key={tag} className="px-2 py-1 bg-orange-300 rounded-full text-xs">
|
||||
{tag}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-auto grid grid-cols-2 items-center">
|
||||
<LikeButton likes={mii.likeCount} miiId={mii.id} isLiked={likedIds.has(mii.id)} abbreviate />
|
||||
|
||||
{!userId && (
|
||||
<Link to={`/profile/${mii.user?.id}`} className="text-sm text-right overflow-hidden text-ellipsis whitespace-nowrap">
|
||||
@{mii.user?.name}
|
||||
</Link>
|
||||
{data.miis.length !== 0 ? (
|
||||
<div className="grid grid-cols-4 gap-4 max-lg:grid-cols-3 max-md:grid-cols-2 max-[30rem]:grid-cols-1">
|
||||
{data.miis.map((mii) => (
|
||||
<div
|
||||
key={mii.id}
|
||||
className={`flex flex-col relative bg-zinc-50 rounded-3xl border-2 shadow-lg p-[0.8rem] transition hover:scale-105 hover:bg-cyan-100 hover:border-cyan-600 ${mii.quarantined ? "border-red-300 bg-red-50!" : mii.in_queue ? "border-zinc-400 opacity-70" : "border-zinc-300"}`}
|
||||
>
|
||||
<div className="absolute top-2 left-2 z-10 flex flex-col gap-1">
|
||||
{mii.in_queue && (
|
||||
<div className="bg-zinc-500 text-white text-xs font-semibold px-2 py-1 rounded-full shadow-sm flex items-center gap-1 w-fit">
|
||||
<Icon icon="mdi:clock-outline" className="text-base" />
|
||||
In Queue
|
||||
</div>
|
||||
)}
|
||||
|
||||
{userId && Number($session?.user?.id) == userId && (
|
||||
<div className="flex gap-1 text-2xl justify-end text-zinc-400">
|
||||
<Link to={`/edit/${mii.id}`} title="Edit Mii" aria-label="Edit Mii" data-tooltip="Edit">
|
||||
<Icon icon="mdi:pencil" />
|
||||
</Link>
|
||||
<DeleteMiiButton miiId={mii.id} miiName={mii.name} likes={mii.likeCount} />
|
||||
{mii.needsFixing && (
|
||||
<div className="bg-orange-500 text-white text-xs font-semibold px-2 py-1 rounded-full shadow-sm flex items-center gap-1 w-fit">
|
||||
<Icon icon="mdi:alert-outline" className="text-base" />
|
||||
Needs Fixing
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Link to={`/mii/${mii.id}`} className="overflow-hidden rounded-xl bg-zinc-300 shrink-0">
|
||||
<img
|
||||
src={`${import.meta.env.VITE_API_URL}/mii/${mii.id}/image?type=mii`}
|
||||
width={240}
|
||||
height={160}
|
||||
alt="mii image"
|
||||
className="w-full h-auto aspect-3/2 object-contain"
|
||||
/>
|
||||
</Link>
|
||||
|
||||
<div className="p-4 flex flex-col gap-1 h-full">
|
||||
<div className="flex justify-between">
|
||||
<Link to={`/mii/${mii.id}`} className="relative font-bold text-2xl line-clamp-1 w-full text-ellipsis wrap-break-word" title={mii.name}>
|
||||
{mii.name}
|
||||
</Link>
|
||||
<div title={mii.platform === "SWITCH" ? "Switch" : "3DS"} className="text-[1.25rem] opacity-25">
|
||||
{mii.platform === "SWITCH" ? (
|
||||
<Icon icon="cib:nintendo-switch" className="text-red-400" />
|
||||
) : (
|
||||
<Icon icon="cib:nintendo-3ds" className="text-sky-400" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="tags" className="flex flex-wrap gap-1">
|
||||
{mii.tags.map((tag: string) => (
|
||||
<Link to={`?tags=${tag}`} key={tag} className="px-2 py-1 bg-orange-300 rounded-full text-xs">
|
||||
{tag}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-auto grid grid-cols-2 items-center">
|
||||
<LikeButton likes={mii.likeCount} miiId={mii.id} isLiked={likedIds.has(mii.id)} abbreviate />
|
||||
|
||||
{!userId && (
|
||||
<Link to={`/profile/${mii.user?.id}`} className="text-sm text-right overflow-hidden text-ellipsis whitespace-nowrap">
|
||||
@{mii.user?.name}
|
||||
</Link>
|
||||
)}
|
||||
|
||||
{userId && Number($session?.user?.id) == userId && (
|
||||
<div className="flex gap-1 text-2xl justify-end text-zinc-400">
|
||||
<Link to={`/edit/${mii.id}`} title="Edit Mii" aria-label="Edit Mii" data-tooltip="Edit">
|
||||
<Icon icon="mdi:pencil" />
|
||||
</Link>
|
||||
<DeleteMiiButton miiId={mii.id} miiName={mii.name} likes={mii.likeCount} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-2xl font-bold text-center">No Miis found!</p>
|
||||
)}
|
||||
<Pagination lastPage={data.lastPage} />
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<p className="text-2xl text-center">No Miis found, has the server died?</p>
|
||||
<p className="text-center font-bold text-lg">Please try refreshing first!</p>
|
||||
<p className="text-2xl font-bold *:text-center">No Miis found, has the server died?</p>
|
||||
<p className="text-center">Try refreshing!</p>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -161,17 +161,19 @@ export default function Tutorial({ tutorials, isOpen, setIsOpen }: Props) {
|
|||
{slide.text}
|
||||
</a>
|
||||
) : (
|
||||
<p className="text-sm text-zinc-500 mb-2 text-center">{slide.text}</p>
|
||||
<p className={`mb-2 text-center ${slide.imageSrc ? "text-sm" : "text-lg font-medium mt-auto mb-auto"}`}>{slide.text}</p>
|
||||
)}
|
||||
|
||||
<img
|
||||
src={slide.imageSrc ?? "/missing.svg"}
|
||||
alt="step image"
|
||||
width={396}
|
||||
height={320}
|
||||
loading="eager"
|
||||
className="rounded-lg w-full h-full object-contain bg-black flex-1"
|
||||
/>
|
||||
{slide.imageSrc && (
|
||||
<img
|
||||
src={slide.imageSrc ?? "/missing.svg"}
|
||||
alt="step image"
|
||||
width={396}
|
||||
height={320}
|
||||
loading="eager"
|
||||
className="rounded-lg w-full h-full object-contain bg-black flex-1"
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,11 @@ import { createPortal } from "react-dom";
|
|||
import { Icon } from "@iconify/react";
|
||||
import Tutorial from ".";
|
||||
|
||||
export default function SwitchAddMiiTutorialButton() {
|
||||
interface Props {
|
||||
hasShareMiiFile: boolean;
|
||||
}
|
||||
|
||||
export default function SwitchAddMiiTutorialButton({ hasShareMiiFile }: Props) {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
return (
|
||||
|
|
@ -22,20 +26,37 @@ export default function SwitchAddMiiTutorialButton() {
|
|||
thumbnail: "/tutorial/switch/adding-mii/modded/thumbnail.png",
|
||||
steps: [
|
||||
{ type: "start" },
|
||||
{
|
||||
text: "1. Download ShareMii - click here for link",
|
||||
link: "https://gamebanana.com/tools/22305",
|
||||
imageSrc: "/tutorial/switch/adding-mii/modded/step1.jpg",
|
||||
},
|
||||
{
|
||||
text: "2. Download the .ltd file, it is above the instructions next to all the other buttons",
|
||||
imageSrc: "/tutorial/switch/adding-mii/modded/step2.png",
|
||||
},
|
||||
{
|
||||
text: "3. Follow the instructions by the creator (scroll down to importing) - click here for link",
|
||||
link: "https://docs.google.com/document/d/e/2PACX-1vRSaPbTe0pijDSETzdeGhvQ7zYHlx9Qnxn7WdUqG9cveZYyk405A0LSbYnl8ygTNI_ZZqMrIZLeHenr/pub",
|
||||
imageSrc: "/tutorial/switch/adding-mii/modded/step3.jpg",
|
||||
},
|
||||
...(hasShareMiiFile
|
||||
? [
|
||||
{
|
||||
text: "1. Download ShareMii - click here for link",
|
||||
link: "https://gamebanana.com/tools/22305",
|
||||
imageSrc: "/tutorial/switch/adding-mii/modded/step1.jpg",
|
||||
},
|
||||
{
|
||||
text: "2. Download the .ltd file, it is above the instructions next to all the other buttons",
|
||||
imageSrc: "/tutorial/switch/adding-mii/modded/step2.png",
|
||||
},
|
||||
{
|
||||
text: "3. Follow the instructions by the creator (scroll down to importing) - click here for link",
|
||||
link: "https://docs.google.com/document/d/e/2PACX-1vRSaPbTe0pijDSETzdeGhvQ7zYHlx9Qnxn7WdUqG9cveZYyk405A0LSbYnl8ygTNI_ZZqMrIZLeHenr/pub",
|
||||
imageSrc: "/tutorial/switch/adding-mii/modded/step3.jpg",
|
||||
},
|
||||
]
|
||||
: [
|
||||
{ text: "This Mii does not have a ShareMii file. You can filter the search to only show Miis that do: (go to next step)" },
|
||||
{
|
||||
text: "1. Go back to the search page, open the filters and press 'Has ShareMii File'",
|
||||
imageSrc: "/tutorial/switch/adding-mii/modded/filter.png",
|
||||
},
|
||||
{
|
||||
text: "2. The search will automatically update to show only Miis with ShareMii files",
|
||||
},
|
||||
{
|
||||
text: "3. Open the tutorial again on those Miis to find out how to use the ShareMii file. (You should see this as the first step)",
|
||||
imageSrc: "/tutorial/switch/adding-mii/modded/success.png",
|
||||
},
|
||||
]),
|
||||
{ type: "finish" },
|
||||
],
|
||||
},
|
||||
|
|
|
|||
|
|
@ -388,7 +388,7 @@ export default function MiiPage() {
|
|||
<Icon icon="material-symbols:flag-rounded" />
|
||||
<span>Report</span>
|
||||
</Link>
|
||||
{mii.platform === "THREE_DS" ? <ThreeDsScanTutorialButton /> : <SwitchAddMiiTutorialButton />}
|
||||
{mii.platform === "THREE_DS" ? <ThreeDsScanTutorialButton /> : <SwitchAddMiiTutorialButton hasShareMiiFile={mii.isFromSaveFile} />}
|
||||
</div>
|
||||
|
||||
{/* Instructions */}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue