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

feat: vite test

Browse source
This commit is contained in:
trafficlunar 2026-04-17 14:24:40 +01:00
parent d208565a61
commit 1d11cf3f99
122 changed files with 6922 additions and 16846 deletions
Download patch file Download diff file Expand all files Collapse all files

2
backend/next.config.ts
View file

@ -10,7 +10,7 @@ const nextConfig: NextConfig = {
{ {
source: "/api/:path*", source: "/api/:path*",
headers: [ headers: [
{ key: "Access-Control-Allow-Origin", value: process.env.FRONTEND_URL || "http://localhost:4321" }, { key: "Access-Control-Allow-Origin", value: process.env.NEXT_PUBLIC_FRONTEND_URL || "http://localhost:4321" },
{ key: "Access-Control-Allow-Credentials", value: "true" }, { key: "Access-Control-Allow-Credentials", value: "true" },
{ key: "Access-Control-Allow-Methods", value: "GET,POST,PATCH,DELETE,OPTIONS" }, { key: "Access-Control-Allow-Methods", value: "GET,POST,PATCH,DELETE,OPTIONS" },
], ],

48
frontend/.gitignore vendored
View file

@ -1,24 +1,24 @@
# build output # Logs
dist/ logs
# generated types *.log
.astro/ npm-debug.log*
yarn-debug.log*
# dependencies yarn-error.log*
node_modules/ pnpm-debug.log*
lerna-debug.log*
# logs
npm-debug.log* node_modules
yarn-debug.log* dist
yarn-error.log* dist-ssr
pnpm-debug.log* *.local
# Editor directories and files
# environment variables .vscode/*
.env !.vscode/extensions.json
.env.production .idea
.DS_Store
# macOS-specific files *.suo
.DS_Store *.ntvs*
*.njsproj
# jetbrains setting folder *.sln
.idea/ *.sw?

4
frontend/.vscode/extensions.json vendored
View file

@ -1,4 +0,0 @@
{
"recommendations": ["astro-build.astro-vscode"],
"unwantedRecommendations": []
}

11
frontend/.vscode/launch.json vendored
View file

@ -1,11 +0,0 @@
{
"version": "0.2.0",
"configurations": [
{
"command": "./node_modules/.bin/astro dev",
"name": "Development server",
"request": "launch",
"type": "node-terminal"
}
]
}

116
frontend/README.md
View file

@ -1,43 +1,73 @@
# Astro Starter Kit: Minimal # React + TypeScript + Vite
```sh This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
pnpm create astro@latest -- --template minimal
``` Currently, two official plugins are available:
> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun! - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
## 🚀 Project Structure
## React Compiler
Inside of your Astro project, you'll see the following folders and files:
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
```text
/ ## Expanding the ESLint configuration
├── public/
├── src/ If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
│ └── pages/
│ └── index.astro ```js
└── package.json export default defineConfig([
``` globalIgnores(['dist']),
{
Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name. files: ['**/*.{ts,tsx}'],
extends: [
There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components. // Other configs...
Any static assets, like images, can be placed in the `public/` directory. // Remove tseslint.configs.recommended and replace with this
tseslint.configs.recommendedTypeChecked,
## 🧞 Commands // Alternatively, use this for stricter rules
tseslint.configs.strictTypeChecked,
All commands are run from the root of the project, from a terminal: // Optionally, add this for stylistic rules
tseslint.configs.stylisticTypeChecked,
| Command | Action |
| :------------------------ | :----------------------------------------------- | // Other configs...
| `pnpm install` | Installs dependencies | ],
| `pnpm dev` | Starts local dev server at `localhost:4321` | languageOptions: {
| `pnpm build` | Build your production site to `./dist/` | parserOptions: {
| `pnpm preview` | Preview your build locally, before deploying | project: ['./tsconfig.node.json', './tsconfig.app.json'],
| `pnpm astro ...` | Run CLI commands like `astro add`, `astro check` | tsconfigRootDir: import.meta.dirname,
| `pnpm astro -- --help` | Get help using the Astro CLI | },
// other options...
## 👀 Want to learn more? },
},
Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat). ])
```
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
```js
// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'
export default defineConfig([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
// Other configs...
// Enable lint rules for React
reactX.configs['recommended-typescript'],
// Enable lint rules for React DOM
reactDom.configs.recommended,
],
languageOptions: {
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
// other options...
},
},
])
```

30
frontend/astro.config.mjs
View file

@ -1,30 +0,0 @@
// @ts-check
import { defineConfig, fontProviders } from "astro/config";
import react from "@astrojs/react";
import tailwindcss from "@tailwindcss/vite";
import icon from "astro-icon";
import swup from "@swup/astro";
// https://astro.build/config
export default defineConfig({
output: "static",
integrations: [react(), icon(), swup({ theme: false })],
vite: {
plugins: [tailwindcss()],
ssr: {
noExternal: ["@tomodachi-share/shared"],
},
},
fonts: [
{
provider: fontProviders.fontsource(),
name: "Lexend",
cssVariable: "--font-lexend",
},
],
});

23
frontend/eslint.config.js Normal file
View file

@ -0,0 +1,23 @@
import js from '@eslint/js'
import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import tseslint from 'typescript-eslint'
import { defineConfig, globalIgnores } from 'eslint/config'
export default defineConfig([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
js.configs.recommended,
tseslint.configs.recommended,
reactHooks.configs.flat.recommended,
reactRefresh.configs.vite,
],
languageOptions: {
ecmaVersion: 2020,
globals: globals.browser,
},
},
])

64
frontend/index.html Normal file
View file

@ -0,0 +1,64 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TomodachiShare</title>
<meta name="description" content="Discover and share Mii residents for your Tomodachi Life island!" />
<meta name="keywords" content="mii, tomodachi life, nintendo, tomodachishare, tomodachi-share, mii creator, mii collection" />
<meta name="robots" content="index, follow" />
<!-- Favicon -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<!-- Open Graph -->
<meta property="og:type" content="website" />
<meta property="og:title" content="TomodachiShare" />
<meta property="og:description" content="Discover and share Mii residents for your Tomodachi Life island!" />
<meta property="og:image" content="/preview.png" />
<meta property="og:url" content="https://tomodachishare.com" />
<meta property="og:site_name" content="TomodachiShare" />
<meta property="og:locale" content="en_US" />
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="TomodachiShare - Discover and Share Your Mii Residents" />
<meta name="twitter:description" content="Discover and share Mii residents for your Tomodachi Life island!" />
<meta name="twitter:image" content="/preview.png" />
<meta name="twitter:creator" content="@trafficlunr" />
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebSite",
"name": "TomodachiShare",
"url": "https://tomodachishare.com",
"description": "Discover and share Mii residents for your Tomodachi Life island!",
"inLanguage": "en",
"publisher": {
"@type": "Organization",
"name": "TomodachiShare",
"url": "https://tomodachishare.com",
"logo": {
"@type": "ImageObject",
"url": "https://tomodachishare.com/logo.png"
},
"sameAs": ["https://trafficlunar.net", "https://twitter.com/trafficlunr", "https://bsky.app/profile/trafficlunar.net"]
},
"potentialAction": {
"@type": "SearchAction",
"target": "https://tomodachishare.com/?q={search_term_string}",
"query-input": "required name=search_term_string"
}
}
</script>
<link href="/src/index.css" rel="stylesheet" />
<script defer src="https://analytics.trafficlunar.net/script.js" data-website-id="bc530384-9b7d-471a-b2e3-f9859da50c24"></script>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>

42
frontend/package.json
View file

@ -1,31 +1,23 @@
{ {
"name": "", "name": "frontend",
"private": true,
"version": "0.0.0",
"type": "module", "type": "module",
"version": "0.0.1",
"engines": {
"node": ">=22.12.0"
},
"scripts": { "scripts": {
"dev": "astro dev", "dev": "vite",
"build": "astro build", "build": "tsc -b && vite build",
"preview": "astro preview", "lint": "eslint .",
"astro": "astro" "preview": "vite preview"
}, },
"dependencies": { "dependencies": {
"@astrojs/react": "^5.0.3",
"@bprogress/react": "^1.2.7", "@bprogress/react": "^1.2.7",
"@fontsource-variable/lexend": "^5.2.11",
"@hello-pangea/dnd": "^18.0.1", "@hello-pangea/dnd": "^18.0.1",
"@iconify-json/ic": "^1.2.4",
"@iconify-json/material-icon-theme": "^1.2.59",
"@iconify-json/mdi": "^1.2.3",
"@iconify-json/stash": "^1.2.4",
"@nanostores/react": "^1.1.0", "@nanostores/react": "^1.1.0",
"@swup/astro": "^1.8.0",
"@tailwindcss/vite": "^4.2.2", "@tailwindcss/vite": "^4.2.2",
"@tomodachi-share/shared": "workspace:*", "@tomodachi-share/shared": "workspace:*",
"@types/react": "^19.2.14", "@types/react": "^19.2.14",
"@types/react-dom": "^19.2.3", "@types/react-dom": "^19.2.3",
"astro": "^6.1.7",
"canvas-confetti": "^1.9.4", "canvas-confetti": "^1.9.4",
"dayjs": "^1.11.20", "dayjs": "^1.11.20",
"downshift": "^9.3.2", "downshift": "^9.3.2",
@ -33,18 +25,30 @@
"jsqr": "^1.4.0", "jsqr": "^1.4.0",
"nanostores": "^1.2.0", "nanostores": "^1.2.0",
"qrcode-generator": "^2.0.4", "qrcode-generator": "^2.0.4",
"react": "^19.2.5", "react": "^19.2.4",
"react-dom": "^19.2.5", "react-dom": "^19.2.4",
"react-dropzone": "^15.0.0", "react-dropzone": "^15.0.0",
"react-image-crop": "^11.0.10", "react-image-crop": "^11.0.10",
"react-router": "^7.14.1",
"seedrandom": "^3.0.5", "seedrandom": "^3.0.5",
"tailwindcss": "^4.2.2", "tailwindcss": "^4.2.2",
"zod": "^4.3.6" "zod": "^4.3.6"
}, },
"devDependencies": { "devDependencies": {
"@eslint/js": "^9.39.4",
"@iconify/react": "^6.0.2", "@iconify/react": "^6.0.2",
"@types/canvas-confetti": "^1.9.0", "@types/canvas-confetti": "^1.9.0",
"@types/node": "^24.12.2",
"@types/react": "^19.2.14",
"@types/react-dom": "^19.2.3",
"@types/seedrandom": "^3.0.8", "@types/seedrandom": "^3.0.8",
"astro-icon": "^1.1.5" "@vitejs/plugin-react": "^6.0.1",
"eslint": "^9.39.4",
"eslint-plugin-react-hooks": "^7.0.1",
"eslint-plugin-react-refresh": "^0.5.2",
"globals": "^17.4.0",
"typescript": "~6.0.2",
"typescript-eslint": "^8.58.0",
"vite": "^8.0.4"
} }
} }

4479
frontend/pnpm-lock.yaml generated
View file

File diff suppressed because it is too large Load diff

1
frontend/public/favicon.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 9.3 KiB

0
frontend/public/tutorial/switch/adding-mii/step1.jpg Executable file → Normal file
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 233 KiB

After

Width:  |  Height:  |  Size: 233 KiB

Before After
Before After

0
frontend/public/tutorial/switch/adding-mii/step2.jpg Executable file → Normal file
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 97 KiB

After

Width:  |  Height:  |  Size: 97 KiB

Before After
Before After

0
frontend/public/tutorial/switch/adding-mii/step4.jpg Executable file → Normal file
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 151 KiB

After

Width:  |  Height:  |  Size: 151 KiB

Before After
Before After

0
frontend/public/tutorial/switch/step4.jpg Executable file → Normal file
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 148 KiB

After

Width:  |  Height:  |  Size: 148 KiB

Before After
Before After

0
frontend/public/tutorial/switch/submitting/step1.jpg Executable file → Normal file
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 247 KiB

After

Width:  |  Height:  |  Size: 247 KiB

Before After
Before After

0
frontend/public/tutorial/switch/submitting/step2.jpg Executable file → Normal file
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 74 KiB

After

Width:  |  Height:  |  Size: 74 KiB

Before After
Before After

0
frontend/public/tutorial/switch/submitting/step3.jpg Executable file → Normal file
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 142 KiB

After

Width:  |  Height:  |  Size: 142 KiB

Before After
Before After

BIN
frontend/src/assets/hero.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 44 KiB

1
frontend/src/assets/react.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
Side by side

After

Width:  |  Height:  |  Size: 4 KiB

1
frontend/src/assets/vite.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 8.5 KiB

50
frontend/src/components/admin/banner-form.tsx
View file

@ -1,25 +1,25 @@
import { useState } from "react"; import { useState } from "react";
export default function BannerForm() { export default function BannerForm() {
const [message, setMessage] = useState(""); const [message, setMessage] = useState("");
const onClickClear = async () => { const onClickClear = async () => {
await fetch("/api/admin/banner", { method: "DELETE" }); await fetch("/api/admin/banner", { method: "DELETE" });
}; };
const onClickSet = async () => { const onClickSet = async () => {
await fetch("/api/admin/banner", { method: "POST", body: message }); await fetch("/api/admin/banner", { method: "POST", body: message });
}; };
return ( return (
<div className="bg-orange-100 rounded-xl border-2 border-orange-400 p-2 flex gap-2"> <div className="bg-orange-100 rounded-xl border-2 border-orange-400 p-2 flex gap-2">
<input type="text" className="pill input w-full" placeholder="Enter banner text" value={message} onChange={(e) => setMessage(e.target.value)} /> <input type="text" className="pill input w-full" placeholder="Enter banner text" value={message} onChange={(e) => setMessage(e.target.value)} />
<button type="button" className="pill button" onClick={onClickClear}> <button type="button" className="pill button" onClick={onClickClear}>
Clear Clear
</button> </button>
<button type="submit" className="pill button" onClick={onClickSet}> <button type="submit" className="pill button" onClick={onClickSet}>
Set Set
</button> </button>
</div> </div>
); );
} }

130
frontend/src/components/admin/banner.tsx
View file

@ -1,65 +1,65 @@
// import { useSearchParams } from "next/navigation"; // import { useSearchParams } from "next/navigation";
// import { Suspense, useEffect, useState } from "react"; // import { Suspense, useEffect, useState } from "react";
// import useSWR from "swr"; // import useSWR from "swr";
// import { Icon } from "@iconify/react"; // import { Icon } from "@iconify/react";
// interface ApiResponse { // interface ApiResponse {
// message: string; // message: string;
// } // }
// const fetcher = (url: string) => fetch(url).then((res) => res.json()); // const fetcher = (url: string) => fetch(url).then((res) => res.json());
// function RedirectBanner() { // function RedirectBanner() {
// const searchParams = useSearchParams(); // const searchParams = useSearchParams();
// const from = searchParams.get("from"); // const from = searchParams.get("from");
// if (from !== "old-domain") return null; // if (from !== "old-domain") return null;
// return ( // return (
// <div className="w-full h-10 bg-orange-300 border-y-2 border-y-orange-400 mt-1 pl-2 shadow-md flex justify-center items-center gap-2 text-orange-900 text-nowrap overflow-x-auto font-semibold max-sm:justify-start"> // <div className="w-full h-10 bg-orange-300 border-y-2 border-y-orange-400 mt-1 pl-2 shadow-md flex justify-center items-center gap-2 text-orange-900 text-nowrap overflow-x-auto font-semibold max-sm:justify-start">
// <Icon icon="humbleicons:link" className="text-2xl min-w-6" /> // <Icon icon="humbleicons:link" className="text-2xl min-w-6" />
// <span>We have moved URLs, welcome to tomodachishare.com!</span> // <span>We have moved URLs, welcome to tomodachishare.com!</span>
// </div> // </div>
// ); // );
// } // }
// export default function AdminBanner() { // export default function AdminBanner() {
// const { data } = useSWR<ApiResponse>("/api/admin/banner", fetcher); // const { data } = useSWR<ApiResponse>("/api/admin/banner", fetcher);
// const [shouldShow, setShouldShow] = useState(true); // const [shouldShow, setShouldShow] = useState(true);
// useEffect(() => { // useEffect(() => {
// if (!data?.message) return; // if (!data?.message) return;
// // Check if the current banner text was closed by the user // // Check if the current banner text was closed by the user
// const closedBanner = window.localStorage.getItem("closedBanner"); // const closedBanner = window.localStorage.getItem("closedBanner");
// setShouldShow(data.message !== closedBanner); // setShouldShow(data.message !== closedBanner);
// }, [data]); // }, [data]);
// const handleClose = () => { // const handleClose = () => {
// if (!data) return; // if (!data) return;
// // Close banner and remember it // // Close banner and remember it
// window.localStorage.setItem("closedBanner", data.message); // window.localStorage.setItem("closedBanner", data.message);
// setShouldShow(false); // setShouldShow(false);
// }; // };
// return ( // return (
// <> // <>
// {data && data.message && shouldShow && ( // {data && data.message && shouldShow && (
// <div className="relative w-full h-10 bg-orange-300 border-y-2 border-y-orange-400 mt-1 pl-2 shadow-md flex justify-center text-orange-900 text-nowrap overflow-x-auto font-semibold max-sm:justify-between"> // <div className="relative w-full h-10 bg-orange-300 border-y-2 border-y-orange-400 mt-1 pl-2 shadow-md flex justify-center text-orange-900 text-nowrap overflow-x-auto font-semibold max-sm:justify-between">
// <div className="flex gap-2 h-full items-center w-fit"> // <div className="flex gap-2 h-full items-center w-fit">
// <Icon icon="humbleicons:exclamation" className="text-2xl min-w-6" /> // <Icon icon="humbleicons:exclamation" className="text-2xl min-w-6" />
// <span>{data.message}</span> // <span>{data.message}</span>
// </div> // </div>
// <button onClick={handleClose} className="min-sm:absolute right-2 cursor-pointer p-1.5"> // <button onClick={handleClose} className="min-sm:absolute right-2 cursor-pointer p-1.5">
// <Icon icon="humbleicons:times" className="text-2xl min-w-6" /> // <Icon icon="humbleicons:times" className="text-2xl min-w-6" />
// </button> // </button>
// </div> // </div>
// )} // )}
// <Suspense> // <Suspense>
// <RedirectBanner /> // <RedirectBanner />
// </Suspense> // </Suspense>
// </> // </>
// ); // );
// } // }

90
frontend/src/components/admin/control-center.tsx
View file

@ -1,45 +1,45 @@
// import { settings } from "@/lib/settings"; // import { settings } from "@/lib/settings";
// import { useState } from "react"; // import { useState } from "react";
// export default function ControlCenter() { // export default function ControlCenter() {
// const [canSubmit, setCanSubmit] = useState(settings.canSubmit); // const [canSubmit, setCanSubmit] = useState(settings.canSubmit);
// const [isQueueEnabled, setIsQeueueEnabled] = useState(settings.queueEnabled); // const [isQueueEnabled, setIsQeueueEnabled] = useState(settings.queueEnabled);
// const onClickSet = async () => { // const onClickSet = async () => {
// await fetch("/api/admin/can-submit", { method: "PATCH", body: JSON.stringify(canSubmit) }); // await fetch("/api/admin/can-submit", { method: "PATCH", body: JSON.stringify(canSubmit) });
// await fetch("/api/admin/queue", { method: "PATCH", body: JSON.stringify(isQueueEnabled) }); // await fetch("/api/admin/queue", { method: "PATCH", body: JSON.stringify(isQueueEnabled) });
// }; // };
// return ( // return (
// <div className="bg-orange-100 rounded-xl border-2 border-orange-400 p-2 flex flex-col gap-2"> // <div className="bg-orange-100 rounded-xl border-2 border-orange-400 p-2 flex flex-col gap-2">
// <div className="flex items-center gap-2"> // <div className="flex items-center gap-2">
// <input // <input
// id="submit" // id="submit"
// type="checkbox" // type="checkbox"
// className="checkbox size-6!" // className="checkbox size-6!"
// placeholder="Enter banner text" // placeholder="Enter banner text"
// checked={canSubmit} // checked={canSubmit}
// onChange={(e) => setCanSubmit(e.target.checked)} // onChange={(e) => setCanSubmit(e.target.checked)}
// /> // />
// <label htmlFor="submit">Enable Submissions</label> // <label htmlFor="submit">Enable Submissions</label>
// </div> // </div>
// <div className="flex items-center gap-2"> // <div className="flex items-center gap-2">
// <input // <input
// id="queue" // id="queue"
// type="checkbox" // type="checkbox"
// className="checkbox size-6!" // className="checkbox size-6!"
// placeholder="Enter banner text" // placeholder="Enter banner text"
// checked={isQueueEnabled} // checked={isQueueEnabled}
// onChange={(e) => setIsQeueueEnabled(e.target.checked)} // onChange={(e) => setIsQeueueEnabled(e.target.checked)}
// /> // />
// <label htmlFor="queue">Enable Queue</label> // <label htmlFor="queue">Enable Queue</label>
// </div> // </div>
// <div className="flex gap-2 self-end"> // <div className="flex gap-2 self-end">
// <button type="submit" className="pill button" onClick={onClickSet}> // <button type="submit" className="pill button" onClick={onClickSet}>
// Set // Set
// </button> // </button>
// </div> // </div>
// </div> // </div>
// ); // );
// } // }

148
frontend/src/components/admin/punishment-deletion-dialog.tsx
View file

@ -1,92 +1,92 @@
import { useRouter } from "next/navigation"; // import { useRouter } from "next/navigation";
import { useEffect, useState } from "react"; // import { useEffect, useState } from "react";
import { createPortal } from "react-dom"; // import { createPortal } from "react-dom";
import { Icon } from "@iconify/react"; // import { Icon } from "@iconify/react";
import SubmitButton from "../submit-button"; // import SubmitButton from "../submit-button";
interface Props { // interface Props {
punishmentId: number; // punishmentId: number;
} // }
export default function PunishmentDeletionDialog({ punishmentId }: Props) { // export default function PunishmentDeletionDialog({ punishmentId }: Props) {
const router = useRouter(); // const router = useRouter();
const [isOpen, setIsOpen] = useState(false); // const [isOpen, setIsOpen] = useState(false);
const [isVisible, setIsVisible] = useState(false); // const [isVisible, setIsVisible] = useState(false);
const [error, setError] = useState<string | undefined>(undefined); // const [error, setError] = useState<string | undefined>(undefined);
const handleSubmit = async () => { // const handleSubmit = async () => {
const response = await fetch(`/api/admin/punish?id=${punishmentId}`, { method: "DELETE" }); // const response = await fetch(`/api/admin/punish?id=${punishmentId}`, { method: "DELETE" });
if (!response.ok) { // if (!response.ok) {
const data = await response.json(); // const data = await response.json();
setError(data.error); // setError(data.error);
return; // return;
} // }
router.refresh(); // router.refresh();
}; // };
const close = () => { // const close = () => {
setIsVisible(false); // setIsVisible(false);
setTimeout(() => { // setTimeout(() => {
setIsOpen(false); // setIsOpen(false);
}, 300); // }, 300);
}; // };
useEffect(() => { // useEffect(() => {
if (isOpen) { // if (isOpen) {
// slight delay to trigger animation // // slight delay to trigger animation
setTimeout(() => setIsVisible(true), 10); // setTimeout(() => setIsVisible(true), 10);
} // }
}, [isOpen]); // }, [isOpen]);
return ( // return (
<> // <>
<button onClick={() => setIsOpen(true)} aria-label="Delete Punishment" className="text-red-500 cursor-pointer hover:text-red-600 text-lg"> // <button onClick={() => setIsOpen(true)} aria-label="Delete Punishment" className="text-red-500 cursor-pointer hover:text-red-600 text-lg">
<Icon icon="material-symbols:close-rounded" /> // <Icon icon="material-symbols:close-rounded" />
</button> // </button>
{isOpen && // {isOpen &&
createPortal( // createPortal(
<div className="fixed inset-0 w-full h-[calc(100%-var(--header-height))] top-(--header-height) flex items-center justify-center z-40"> // <div className="fixed inset-0 w-full h-[calc(100%-var(--header-height))] top-(--header-height) flex items-center justify-center z-40">
<div // <div
onClick={close} // onClick={close}
className={`z-40 absolute inset-0 backdrop-brightness-75 backdrop-blur-xs transition-opacity duration-300 ${ // className={`z-40 absolute inset-0 backdrop-brightness-75 backdrop-blur-xs transition-opacity duration-300 ${
isVisible ? "opacity-100" : "opacity-0" // isVisible ? "opacity-100" : "opacity-0"
}`} // }`}
/> // />
<div // <div
className={`z-50 bg-orange-50 border-2 border-amber-500 rounded-2xl shadow-lg p-6 w-full max-w-md transition-discrete duration-300 flex flex-col ${ // className={`z-50 bg-orange-50 border-2 border-amber-500 rounded-2xl shadow-lg p-6 w-full max-w-md transition-discrete duration-300 flex flex-col ${
isVisible ? "scale-100 opacity-100" : "scale-75 opacity-0" // isVisible ? "scale-100 opacity-100" : "scale-75 opacity-0"
}`} // }`}
> // >
<div className="flex justify-between items-center mb-2"> // <div className="flex justify-between items-center mb-2">
<h2 className="text-xl font-bold">Punishment Deletion</h2> // <h2 className="text-xl font-bold">Punishment Deletion</h2>
<button onClick={close} aria-label="Close" className="text-red-400 hover:text-red-500 text-2xl cursor-pointer"> // <button onClick={close} aria-label="Close" className="text-red-400 hover:text-red-500 text-2xl cursor-pointer">
<Icon icon="material-symbols:close-rounded" /> // <Icon icon="material-symbols:close-rounded" />
</button> // </button>
</div> // </div>
<p className="text-sm text-zinc-500">Are you sure? This will delete the user&lsquo;s punishment and they will be able to come back.</p> // <p className="text-sm text-zinc-500">Are you sure? This will delete the user&lsquo;s punishment and they will be able to come back.</p>
{error && <span className="text-red-400 font-bold mt-2">Error: {error}</span>} // {error && <span className="text-red-400 font-bold mt-2">Error: {error}</span>}
<div className="flex justify-end gap-2 mt-4"> // <div className="flex justify-end gap-2 mt-4">
<button onClick={close} className="pill button"> // <button onClick={close} className="pill button">
Cancel // Cancel
</button> // </button>
<SubmitButton onClick={handleSubmit} /> // <SubmitButton onClick={handleSubmit} />
</div> // </div>
</div> // </div>
</div>, // </div>,
document.body, // document.body,
)} // )}
</> // </>
); // );
} // }

332
frontend/src/components/admin/queue.tsx
View file

@ -1,166 +1,166 @@
// import { Prisma } from "@prisma/client"; // import { Prisma } from "@prisma/client";
// import { useMemo, useRef, useState } from "react"; // import { useMemo, useRef, useState } from "react";
// import Carousel from "../carousel"; // import Carousel from "../carousel";
// import Link from "next/link"; // import Link from "next/link";
// import { Icon } from "@iconify/react"; // import { Icon } from "@iconify/react";
// interface Props { // interface Props {
// miis: Prisma.MiiGetPayload<{ include: { user: { select: { id: true; name: true } }; _count: { select: { likedBy: true } } } }>[]; // miis: Prisma.MiiGetPayload<{ include: { user: { select: { id: true; name: true } }; _count: { select: { likedBy: true } } } }>[];
// } // }
// type Decision = "accept" | "reject" | null; // type Decision = "accept" | "reject" | null;
// export default function Queue({ miis }: Props) { // export default function Queue({ miis }: Props) {
// const [currentIndex, setCurrentIndex] = useState(4); // Current index in the miis array, not visible // const [currentIndex, setCurrentIndex] = useState(4); // Current index in the miis array, not visible
// const [visibleMiis, setVisibleMiis] = useState(miis.slice(0, 4)); // const [visibleMiis, setVisibleMiis] = useState(miis.slice(0, 4));
// const [decision, setDecision] = useState<Decision>(null); // const [decision, setDecision] = useState<Decision>(null);
// const [isAnimating, setIsAnimating] = useState(false); // const [isAnimating, setIsAnimating] = useState(false);
// const [dragOffset, setDragOffset] = useState(0); // const [dragOffset, setDragOffset] = useState(0);
// const dragStart = useRef<number | null>(null); // const dragStart = useRef<number | null>(null);
// const isDragging = useRef(false); // const isDragging = useRef(false);
// const rotations = useMemo(() => { // const rotations = useMemo(() => {
// const map: Record<string, number> = {}; // const map: Record<string, number> = {};
// miis.forEach((mii) => { // miis.forEach((mii) => {
// map[mii.id] = Math.random() * 15 - 5; // map[mii.id] = Math.random() * 15 - 5;
// }); // });
// return map; // return map;
// }, [miis]); // }, [miis]);
// const handleDecision = (decision: Decision) => { // const handleDecision = (decision: Decision) => {
// if (isAnimating) return; // if (isAnimating) return;
// setDecision(decision); // setDecision(decision);
// setIsAnimating(true); // setIsAnimating(true);
// setDragOffset(decision === "accept" ? -300 : 300); // setDragOffset(decision === "accept" ? -300 : 300);
// setTimeout(() => { // setTimeout(() => {
// setVisibleMiis((prev) => { // setVisibleMiis((prev) => {
// const newQueue = prev.slice(1); // Remove first Mii // const newQueue = prev.slice(1); // Remove first Mii
// if (miis[currentIndex]) newQueue.push(miis[currentIndex]); // Add a new Mii to the end of the list // if (miis[currentIndex]) newQueue.push(miis[currentIndex]); // Add a new Mii to the end of the list
// return newQueue; // return newQueue;
// }); // });
// setCurrentIndex((prev) => prev + 1); // setCurrentIndex((prev) => prev + 1);
// setDecision(null); // setDecision(null);
// setIsAnimating(false); // setIsAnimating(false);
// setDragOffset(0); // setDragOffset(0);
// }, 500); // }, 500);
// }; // };
// const onDragStart = (clientX: number) => { // const onDragStart = (clientX: number) => {
// if (isAnimating) return; // if (isAnimating) return;
// dragStart.current = clientX; // dragStart.current = clientX;
// isDragging.current = true; // isDragging.current = true;
// }; // };
// const onDragMove = (clientX: number) => { // const onDragMove = (clientX: number) => {
// if (!isDragging.current || !dragStart.current) return; // if (!isDragging.current || !dragStart.current) return;
// setDragOffset(clientX - dragStart.current); // setDragOffset(clientX - dragStart.current);
// }; // };
// const onDragEnd = () => { // const onDragEnd = () => {
// if (!isDragging.current) return; // if (!isDragging.current) return;
// isDragging.current = false; // isDragging.current = false;
// if (dragOffset < -80) handleDecision("accept"); // if (dragOffset < -80) handleDecision("accept");
// else if (dragOffset > 80) handleDecision("reject"); // else if (dragOffset > 80) handleDecision("reject");
// else setDragOffset(0); // else setDragOffset(0);
// dragStart.current = null; // dragStart.current = null;
// }; // };
// return ( // return (
// <div className="w-full flex justify-center items-center gap-8 relative h-100 mt-4 mb-8"> // <div className="w-full flex justify-center items-center gap-8 relative h-100 mt-4 mb-8">
// <button // <button
// onClick={() => handleDecision("accept")} // onClick={() => handleDecision("accept")}
// className="pointer-coarse:hidden aspect-square cursor-pointer size-12 bg-zinc-50 border-2 border-zinc-300 rounded-full flex justify-center items-center text-2xl text-zinc-500 shadow-xs" // className="pointer-coarse:hidden aspect-square cursor-pointer size-12 bg-zinc-50 border-2 border-zinc-300 rounded-full flex justify-center items-center text-2xl text-zinc-500 shadow-xs"
// > // >
// <Icon icon="material-symbols:check-rounded" /> // <Icon icon="material-symbols:check-rounded" />
// </button> // </button>
// <div className="relative w-full max-w-96 h-96 aspect-square"> // <div className="relative w-full max-w-96 h-96 aspect-square">
// {visibleMiis.map((mii, i) => { // {visibleMiis.map((mii, i) => {
// const isTopCard = i === 0; // const isTopCard = i === 0;
// // Calculate rotation/opacity based on drag distance // // Calculate rotation/opacity based on drag distance
// const dragRotation = isTopCard ? dragOffset / 10 : 0; // const dragRotation = isTopCard ? dragOffset / 10 : 0;
// const dragOpacity = isTopCard ? 1 - Math.min(Math.abs(dragOffset) / 300, 1) : undefined; // const dragOpacity = isTopCard ? 1 - Math.min(Math.abs(dragOffset) / 300, 1) : undefined;
// return ( // return (
// <div // <div
// key={mii.id} // key={mii.id}
// className={`absolute inset-0 flex flex-col bg-zinc-50 rounded-3xl border-2 shadow-lg p-[0.8rem] border-zinc-300 *:select-none // className={`absolute inset-0 flex flex-col bg-zinc-50 rounded-3xl border-2 shadow-lg p-[0.8rem] border-zinc-300 *:select-none
// ${!isDragging.current ? "transition-all duration-500" : "transition-none"} // ${!isDragging.current ? "transition-all duration-500" : "transition-none"}
// ${isTopCard ? "cursor-grab active:cursor-grabbing" : "pointer-events-none"}`} // ${isTopCard ? "cursor-grab active:cursor-grabbing" : "pointer-events-none"}`}
// style={{ // style={{
// transform: isTopCard // transform: isTopCard
// ? `translate(${dragOffset}px, ${Math.abs(dragOffset) * 0.1}px) rotate(${rotations[mii.id] + dragRotation}deg)` // ? `translate(${dragOffset}px, ${Math.abs(dragOffset) * 0.1}px) rotate(${rotations[mii.id] + dragRotation}deg)`
// : `translateY(${i * 10}px) rotate(${rotations[mii.id]}deg)`, // : `translateY(${i * 10}px) rotate(${rotations[mii.id]}deg)`,
// zIndex: (visibleMiis.length - i) * 10, // zIndex: (visibleMiis.length - i) * 10,
// opacity: dragOpacity, // opacity: dragOpacity,
// }} // }}
// onMouseDown={(e) => isTopCard && onDragStart(e.clientX)} // onMouseDown={(e) => isTopCard && onDragStart(e.clientX)}
// onMouseMove={(e) => isTopCard && onDragMove(e.clientX)} // onMouseMove={(e) => isTopCard && onDragMove(e.clientX)}
// onMouseUp={() => isTopCard && onDragEnd()} // onMouseUp={() => isTopCard && onDragEnd()}
// onMouseLeave={() => isTopCard && isDragging.current && onDragEnd()} // onMouseLeave={() => isTopCard && isDragging.current && onDragEnd()}
// onTouchStart={(e) => isTopCard && onDragStart(e.touches[0].clientX)} // onTouchStart={(e) => isTopCard && onDragStart(e.touches[0].clientX)}
// onTouchMove={(e) => isTopCard && onDragMove(e.touches[0].clientX)} // onTouchMove={(e) => isTopCard && onDragMove(e.touches[0].clientX)}
// onTouchEnd={() => isTopCard && onDragEnd()} // onTouchEnd={() => isTopCard && onDragEnd()}
// > // >
// <Carousel // <Carousel
// images={[ // images={[
// `/mii/${mii.id}/image?type=mii`, // `/mii/${mii.id}/image?type=mii`,
// ...(mii.platform === "THREE_DS" ? [`/mii/${mii.id}/image?type=qr-code`] : [`/mii/${mii.id}/image?type=features`]), // ...(mii.platform === "THREE_DS" ? [`/mii/${mii.id}/image?type=qr-code`] : [`/mii/${mii.id}/image?type=features`]),
// ...Array.from({ length: mii.imageCount }, (_, index) => `/mii/${mii.id}/image?type=image${index}`), // ...Array.from({ length: mii.imageCount }, (_, index) => `/mii/${mii.id}/image?type=image${index}`),
// ]} // ]}
// onlyButtons // onlyButtons
// /> // />
// <div className="p-4 flex flex-col gap-1 h-full"> // <div className="p-4 flex flex-col gap-1 h-full">
// <div className="flex justify-between items-center"> // <div className="flex justify-between items-center">
// <Link // <Link
// href={`/mii/${mii.id}`} // href={`/mii/${mii.id}`}
// draggable={false} // draggable={false}
// className="relative font-bold text-2xl line-clamp-1 w-full text-ellipsis wrap-break-word" // className="relative font-bold text-2xl line-clamp-1 w-full text-ellipsis wrap-break-word"
// title={mii.name} // title={mii.name}
// > // >
// {mii.name} // {mii.name}
// </Link> // </Link>
// <div title={mii.platform === "SWITCH" ? "Switch" : "3DS"} className="-mr-3 text-[1.25rem] opacity-25"> // <div title={mii.platform === "SWITCH" ? "Switch" : "3DS"} className="-mr-3 text-[1.25rem] opacity-25">
// {mii.platform === "SWITCH" ? ( // {mii.platform === "SWITCH" ? (
// <Icon icon="cib:nintendo-switch" className="text-red-400" /> // <Icon icon="cib:nintendo-switch" className="text-red-400" />
// ) : ( // ) : (
// <Icon icon="cib:nintendo-3ds" className="text-sky-400" /> // <Icon icon="cib:nintendo-3ds" className="text-sky-400" />
// )} // )}
// </div> // </div>
// </div> // </div>
// <div id="tags" className="flex flex-wrap gap-1"> // <div id="tags" className="flex flex-wrap gap-1">
// {mii.tags.map((tag) => ( // {mii.tags.map((tag) => (
// <Link href={{ query: { tags: tag } }} draggable={false} key={tag} className="px-2 py-1 bg-orange-300 rounded-full text-xs"> // <Link href={{ query: { tags: tag } }} draggable={false} key={tag} className="px-2 py-1 bg-orange-300 rounded-full text-xs">
// {tag} // {tag}
// </Link> // </Link>
// ))} // ))}
// </div> // </div>
// <div className="mt-auto grid grid-cols-2 gap-4 items-center"> // <div className="mt-auto grid grid-cols-2 gap-4 items-center">
// <p className="text-sm">{mii.createdAt.toLocaleString("en-GB", { timeZone: "UTC" })}</p> // <p className="text-sm">{mii.createdAt.toLocaleString("en-GB", { timeZone: "UTC" })}</p>
// <Link href={`/profile/${mii.user.id}`} draggable={false} className="text-sm text-right overflow-hidden text-ellipsis whitespace-nowrap"> // <Link href={`/profile/${mii.user.id}`} draggable={false} className="text-sm text-right overflow-hidden text-ellipsis whitespace-nowrap">
// @{mii.user?.name} // @{mii.user?.name}
// </Link> // </Link>
// </div> // </div>
// </div> // </div>
// </div> // </div>
// ); // );
// })} // })}
// </div> // </div>
// <button // <button
// onClick={() => handleDecision("reject")} // onClick={() => handleDecision("reject")}
// className="pointer-coarse:hidden aspect-square cursor-pointer size-12 bg-zinc-50 border-2 border-zinc-300 rounded-full flex justify-center items-center text-2xl text-zinc-500 shadow-xs" // className="pointer-coarse:hidden aspect-square cursor-pointer size-12 bg-zinc-50 border-2 border-zinc-300 rounded-full flex justify-center items-center text-2xl text-zinc-500 shadow-xs"
// > // >
// <Icon icon="material-symbols:close-rounded" /> // <Icon icon="material-symbols:close-rounded" />
// </button> // </button>
// </div> // </div>
// ); // );
// } // }

168
frontend/src/components/admin/regenerate-images.tsx
View file

@ -1,84 +1,84 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { createPortal } from "react-dom"; import { createPortal } from "react-dom";
import { Icon } from "@iconify/react"; import { Icon } from "@iconify/react";
import SubmitButton from "../submit-button"; import SubmitButton from "../submit-button";
export default function RegenerateImagesButton() { export default function RegenerateImagesButton() {
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
const [isVisible, setIsVisible] = useState(false); const [isVisible, setIsVisible] = useState(false);
const [error, setError] = useState<string | undefined>(undefined); const [error, setError] = useState<string | undefined>(undefined);
const handleSubmit = async () => { const handleSubmit = async () => {
const response = await fetch("/api/admin/regenerate-metadata-images", { method: "PATCH" }); const response = await fetch("/api/admin/regenerate-metadata-images", { method: "PATCH" });
if (!response.ok) { if (!response.ok) {
const data = await response.json(); const data = await response.json();
setError(data.error); setError(data.error);
return; return;
} }
close(); close();
}; };
const close = () => { const close = () => {
setIsVisible(false); setIsVisible(false);
setTimeout(() => { setTimeout(() => {
setIsOpen(false); setIsOpen(false);
}, 300); }, 300);
}; };
useEffect(() => { useEffect(() => {
if (isOpen) { if (isOpen) {
// slight delay to trigger animation // slight delay to trigger animation
setTimeout(() => setIsVisible(true), 10); setTimeout(() => setIsVisible(true), 10);
} }
}, [isOpen]); }, [isOpen]);
return ( return (
<> <>
<button onClick={() => setIsOpen(true)} className="pill button w-fit"> <button onClick={() => setIsOpen(true)} className="pill button w-fit">
Regenerate all Mii metadata images Regenerate all Mii metadata images
</button> </button>
{isOpen && {isOpen &&
createPortal( createPortal(
<div className="fixed inset-0 w-full h-[calc(100%-var(--header-height))] top-(--header-height) flex items-center justify-center z-40"> <div className="fixed inset-0 w-full h-[calc(100%-var(--header-height))] top-(--header-height) flex items-center justify-center z-40">
<div <div
onClick={close} onClick={close}
className={`z-40 absolute inset-0 backdrop-brightness-75 backdrop-blur-xs transition-opacity duration-300 ${ className={`z-40 absolute inset-0 backdrop-brightness-75 backdrop-blur-xs transition-opacity duration-300 ${
isVisible ? "opacity-100" : "opacity-0" isVisible ? "opacity-100" : "opacity-0"
}`} }`}
/> />
<div <div
className={`z-50 bg-orange-50 border-2 border-amber-500 rounded-2xl shadow-lg p-6 w-full max-w-md transition-discrete duration-300 flex flex-col ${ className={`z-50 bg-orange-50 border-2 border-amber-500 rounded-2xl shadow-lg p-6 w-full max-w-md transition-discrete duration-300 flex flex-col ${
isVisible ? "scale-100 opacity-100" : "scale-75 opacity-0" isVisible ? "scale-100 opacity-100" : "scale-75 opacity-0"
}`} }`}
> >
<div className="flex justify-between items-center mb-2"> <div className="flex justify-between items-center mb-2">
<h2 className="text-xl font-bold">Regenerate Images</h2> <h2 className="text-xl font-bold">Regenerate Images</h2>
<button onClick={close} aria-label="Close" className="text-red-400 hover:text-red-500 text-2xl cursor-pointer"> <button onClick={close} aria-label="Close" className="text-red-400 hover:text-red-500 text-2xl cursor-pointer">
<Icon icon="material-symbols:close-rounded" /> <Icon icon="material-symbols:close-rounded" />
</button> </button>
</div> </div>
<p className="text-sm text-zinc-500">Are you sure? This will delete and regenerate every metadata image.</p> <p className="text-sm text-zinc-500">Are you sure? This will delete and regenerate every metadata image.</p>
{error && <span className="text-red-400 font-bold mt-2">Error: {error}</span>} {error && <span className="text-red-400 font-bold mt-2">Error: {error}</span>}
<div className="flex justify-end gap-2 mt-4"> <div className="flex justify-end gap-2 mt-4">
<button onClick={close} className="pill button"> <button onClick={close} className="pill button">
Cancel Cancel
</button> </button>
<SubmitButton onClick={handleSubmit} /> <SubmitButton onClick={handleSubmit} />
</div> </div>
</div> </div>
</div>, </div>,
document.body, document.body,
)} )}
</> </>
); );
} }

56
frontend/src/components/admin/report-tabs.tsx
View file

@ -1,30 +1,30 @@
import { useRouter } from "next/navigation"; // import { useRouter } from "next/navigation";
import { useTransition } from "react"; // import { useTransition } from "react";
import { ReportStatus } from "@prisma/client"; // import { ReportStatus } from "@prisma/client";
export default function ReportTabs({ status }: { status?: ReportStatus }) { // export default function ReportTabs({ status }: { status?: ReportStatus }) {
const router = useRouter(); // const router = useRouter();
const [isPending, startTransition] = useTransition(); // const [isPending, startTransition] = useTransition();
return ( // return (
<div className={`flex gap-2 p-3 border-b border-orange-300 transition-opacity ${isPending ? "opacity-50" : ""}`}> // <div className={`flex gap-2 p-3 border-b border-orange-300 transition-opacity ${isPending ? "opacity-50" : ""}`}>
{["ALL", "OPEN", "RESOLVED", "DISMISSED"].map((s) => ( // {["ALL", "OPEN", "RESOLVED", "DISMISSED"].map((s) => (
<button // <button
key={s} // key={s}
onClick={() => // onClick={() =>
startTransition(() => { // startTransition(() => {
router.push(s === "ALL" ? "/admin" : `/admin?status=${s}`, { scroll: false }); // router.push(s === "ALL" ? "/admin" : `/admin?status=${s}`, { scroll: false });
}) // })
} // }
className={`text-sm px-3 py-1 rounded-full font-medium cursor-pointer border transition-colors ${ // className={`text-sm px-3 py-1 rounded-full font-medium cursor-pointer border transition-colors ${
(s === "ALL" && !status) || s === status // (s === "ALL" && !status) || s === status
? "bg-orange-400 text-white border-orange-400" // ? "bg-orange-400 text-white border-orange-400"
: "bg-white text-orange-700 border-orange-300 hover:bg-orange-50" // : "bg-white text-orange-700 border-orange-300 hover:bg-orange-50"
}`} // }`}
> // >
{s} // {s}
</button> // </button>
))} // ))}
</div> // </div>
); // );
} // }

404
frontend/src/components/admin/reports.tsx
View file

@ -1,202 +1,202 @@
// import { revalidatePath } from "next/cache"; // import { revalidatePath } from "next/cache";
// import { Icon } from "@iconify/react"; // import { Icon } from "@iconify/react";
// import { ReportStatus } from "@prisma/client"; // import { ReportStatus } from "@prisma/client";
// import { prisma } from "@/lib/prisma"; // import { prisma } from "@/lib/prisma";
// import ReportTabs from "./report-tabs"; // import ReportTabs from "./report-tabs";
// const PAGE_SIZE = 20; // const PAGE_SIZE = 20;
// export default async function Reports({ searchParams }: { searchParams: { status?: string; page?: string } }) { // export default async function Reports({ searchParams }: { searchParams: { status?: string; page?: string } }) {
// const status = searchParams.status as ReportStatus | undefined; // const status = searchParams.status as ReportStatus | undefined;
// const page = Number(searchParams.page ?? 1); // const page = Number(searchParams.page ?? 1);
// const [reports, total] = await Promise.all([ // const [reports, total] = await Promise.all([
// prisma.report.findMany({ // prisma.report.findMany({
// where: status ? { status } : undefined, // where: status ? { status } : undefined,
// orderBy: { createdAt: "desc" }, // orderBy: { createdAt: "desc" },
// skip: (page - 1) * PAGE_SIZE, // skip: (page - 1) * PAGE_SIZE,
// take: PAGE_SIZE, // take: PAGE_SIZE,
// }), // }),
// prisma.report.count({ // prisma.report.count({
// where: status ? { status } : undefined, // where: status ? { status } : undefined,
// }), // }),
// ]); // ]);
// const totalPages = Math.ceil(total / PAGE_SIZE); // const totalPages = Math.ceil(total / PAGE_SIZE);
// const updateStatus = async (formData: FormData) => { // const updateStatus = async (formData: FormData) => {
// "use server"; // "use server";
// const id = Number(formData.get("id")); // const id = Number(formData.get("id"));
// const status = formData.get("status") as ReportStatus; // const status = formData.get("status") as ReportStatus;
// await prisma.report.update({ // await prisma.report.update({
// where: { id }, // where: { id },
// data: { status }, // data: { status },
// }); // });
// revalidatePath("/admin"); // revalidatePath("/admin");
// }; // };
// return ( // return (
// <div className="bg-orange-100 rounded-xl border-2 border-orange-400"> // <div className="bg-orange-100 rounded-xl border-2 border-orange-400">
// <ReportTabs status={status} /> // <ReportTabs status={status} />
// {/* Grid */} // {/* Grid */}
// <div className="grid grid-cols-2 gap-2 p-2 max-lg:grid-cols-1"> // <div className="grid grid-cols-2 gap-2 p-2 max-lg:grid-cols-1">
// {reports.map((report) => ( // {reports.map((report) => (
// <div key={report.id} className="p-4 bg-white border border-orange-300 shadow-sm rounded-md"> // <div key={report.id} className="p-4 bg-white border border-orange-300 shadow-sm rounded-md">
// <div className="w-full overflow-x-scroll"> // <div className="w-full overflow-x-scroll">
// <div className="flex gap-1 w-max"> // <div className="flex gap-1 w-max">
// <span // <span
// className={`text-xs font-semibold px-2 py-1 rounded-full border ${ // className={`text-xs font-semibold px-2 py-1 rounded-full border ${
// report.reportType == "USER" ? "bg-red-200 text-red-800 border-red-400" : "bg-cyan-200 text-cyan-800 border-cyan-400" // report.reportType == "USER" ? "bg-red-200 text-red-800 border-red-400" : "bg-cyan-200 text-cyan-800 border-cyan-400"
// }`} // }`}
// > // >
// {report.reportType} // {report.reportType}
// </span> // </span>
// <span // <span
// className={`text-xs font-semibold px-2 py-1 rounded-full border ${ // className={`text-xs font-semibold px-2 py-1 rounded-full border ${
// report.status == "OPEN" // report.status == "OPEN"
// ? "bg-orange-200 text-orange-800 border-orange-400" // ? "bg-orange-200 text-orange-800 border-orange-400"
// : report.status == "RESOLVED" // : report.status == "RESOLVED"
// ? "bg-green-200 text-green-800 border-green-400" // ? "bg-green-200 text-green-800 border-green-400"
// : "bg-zinc-200 text-zinc-800 border-zinc-400" // : "bg-zinc-200 text-zinc-800 border-zinc-400"
// }`} // }`}
// > // >
// {report.status} // {report.status}
// </span> // </span>
// <span className="ml-2 flex items-center gap-1 text-sm text-zinc-500"> // <span className="ml-2 flex items-center gap-1 text-sm text-zinc-500">
// <Icon icon="lucide:calendar" className="text-base" /> // <Icon icon="lucide:calendar" className="text-base" />
// {report.createdAt.toLocaleString("en-GB", { // {report.createdAt.toLocaleString("en-GB", {
// day: "2-digit", // day: "2-digit",
// month: "long", // month: "long",
// year: "numeric", // year: "numeric",
// hour: "2-digit", // hour: "2-digit",
// minute: "2-digit", // minute: "2-digit",
// second: "2-digit", // second: "2-digit",
// timeZone: "UTC", // timeZone: "UTC",
// })}{" "} // })}{" "}
// UTC // UTC
// </span> // </span>
// </div> // </div>
// </div> // </div>
// <div className="grid grid-cols-4 text-xs text-zinc-600 mt-4 max-sm:grid-cols-2"> // <div className="grid grid-cols-4 text-xs text-zinc-600 mt-4 max-sm:grid-cols-2">
// <div> // <div>
// <p>Target ID</p> // <p>Target ID</p>
// <a href={report.reportType === "MII" ? `/mii/${report.targetId}` : `/profile/${report.targetId}`} className="text-blue-600 text-sm"> // <a href={report.reportType === "MII" ? `/mii/${report.targetId}` : `/profile/${report.targetId}`} className="text-blue-600 text-sm">
// {report.targetId} // {report.targetId}
// </a> // </a>
// </div> // </div>
// <div> // <div>
// <p>Creator ID</p> // <p>Creator ID</p>
// <a href={`/profile/${report.creatorId}`} className="text-blue-600 text-sm"> // <a href={`/profile/${report.creatorId}`} className="text-blue-600 text-sm">
// {report.creatorId} // {report.creatorId}
// </a> // </a>
// </div> // </div>
// <div> // <div>
// <p>Reporter</p> // <p>Reporter</p>
// <a href={`/profile/${report.authorId}`} className="text-blue-600 text-sm"> // <a href={`/profile/${report.authorId}`} className="text-blue-600 text-sm">
// {report.authorId} // {report.authorId}
// </a> // </a>
// </div> // </div>
// <div> // <div>
// <p>Reason</p> // <p>Reason</p>
// <p className="font-medium text-black text-sm">{report.reason}</p> // <p className="font-medium text-black text-sm">{report.reason}</p>
// </div> // </div>
// </div> // </div>
// <div className="mt-4 border border-orange-200 bg-orange-100/50 rounded-md p-2"> // <div className="mt-4 border border-orange-200 bg-orange-100/50 rounded-md p-2">
// <p className="text-zinc-600 text-xs">Notes</p> // <p className="text-zinc-600 text-xs">Notes</p>
// <p>{report.reasonNotes}</p> // <p>{report.reasonNotes}</p>
// </div> // </div>
// <div className="mt-4 flex gap-4"> // <div className="mt-4 flex gap-4">
// <form action={updateStatus}> // <form action={updateStatus}>
// <input type="hidden" name="id" value={report.id} /> // <input type="hidden" name="id" value={report.id} />
// <input type="hidden" name="status" value={"OPEN"} /> // <input type="hidden" name="status" value={"OPEN"} />
// <button // <button
// type="submit" // type="submit"
// aria-label="Open" // aria-label="Open"
// className="cursor-pointer text-orange-400 flex items-center gap-1 p-1.5 rounded-lg transition-colors hover:bg-orange-400/15" // className="cursor-pointer text-orange-400 flex items-center gap-1 p-1.5 rounded-lg transition-colors hover:bg-orange-400/15"
// > // >
// <Icon icon="mdi:alert-circle" className="text-xl" /> // <Icon icon="mdi:alert-circle" className="text-xl" />
// <span className="text-sm">Open</span> // <span className="text-sm">Open</span>
// </button> // </button>
// </form> // </form>
// <form action={updateStatus}> // <form action={updateStatus}>
// <input type="hidden" name="id" value={report.id} /> // <input type="hidden" name="id" value={report.id} />
// <input type="hidden" name="status" value={"RESOLVED"} /> // <input type="hidden" name="status" value={"RESOLVED"} />
// <button // <button
// type="submit" // type="submit"
// aria-label="Resolve" // aria-label="Resolve"
// className="cursor-pointer text-green-500 flex items-center gap-1 p-1.5 rounded-lg transition-colors hover:bg-green-500/15" // className="cursor-pointer text-green-500 flex items-center gap-1 p-1.5 rounded-lg transition-colors hover:bg-green-500/15"
// > // >
// <Icon icon="mdi:check-circle" className="text-xl" /> // <Icon icon="mdi:check-circle" className="text-xl" />
// <span className="text-sm">Resolve</span> // <span className="text-sm">Resolve</span>
// </button> // </button>
// </form> // </form>
// <form action={updateStatus}> // <form action={updateStatus}>
// <input type="hidden" name="id" value={report.id} /> // <input type="hidden" name="id" value={report.id} />
// <input type="hidden" name="status" value={"DISMISSED"} /> // <input type="hidden" name="status" value={"DISMISSED"} />
// <button // <button
// type="submit" // type="submit"
// aria-label="Dismiss" // aria-label="Dismiss"
// className="cursor-pointer text-zinc-400 flex items-center gap-1 p-1.5 rounded-lg transition-colors hover:bg-zinc-400/15" // className="cursor-pointer text-zinc-400 flex items-center gap-1 p-1.5 rounded-lg transition-colors hover:bg-zinc-400/15"
// > // >
// <Icon icon="mdi:close-circle" className="text-xl" /> // <Icon icon="mdi:close-circle" className="text-xl" />
// <span className="text-sm">Dismiss</span> // <span className="text-sm">Dismiss</span>
// </button> // </button>
// </form> // </form>
// </div> // </div>
// </div> // </div>
// ))} // ))}
// </div> // </div>
// {reports.length === 0 && ( // {reports.length === 0 && (
// <div className="text-center py-12 text-gray-500"> // <div className="text-center py-12 text-gray-500">
// <p className="text-lg font-medium">No reports to display</p> // <p className="text-lg font-medium">No reports to display</p>
// <p className="text-sm">Reports will appear here when users submit them</p> // <p className="text-sm">Reports will appear here when users submit them</p>
// </div> // </div>
// )} // )}
// {/* Pagination */} // {/* Pagination */}
// {totalPages > 1 && ( // {totalPages > 1 && (
// <div className="flex justify-between items-center p-3 border-t border-orange-300"> // <div className="flex justify-between items-center p-3 border-t border-orange-300">
// <span className="text-sm text-orange-700">{total} total</span> // <span className="text-sm text-orange-700">{total} total</span>
// <div className="flex items-center gap-3"> // <div className="flex items-center gap-3">
// {page > 1 && ( // {page > 1 && (
// <a // <a
// href={`/admin?${new URLSearchParams({ ...(status && { status }), page: String(page - 1) })}`} // href={`/admin?${new URLSearchParams({ ...(status && { status }), page: String(page - 1) })}`}
// className="text-sm px-3 py-1 rounded-full font-medium border bg-white text-orange-700 border-orange-300 hover:bg-orange-50 transition-colors" // className="text-sm px-3 py-1 rounded-full font-medium border bg-white text-orange-700 border-orange-300 hover:bg-orange-50 transition-colors"
// > // >
// Previous // Previous
// </a> // </a>
// )} // )}
// <span className="text-sm text-orange-700"> // <span className="text-sm text-orange-700">
// Page {page} of {totalPages} // Page {page} of {totalPages}
// </span> // </span>
// {page < totalPages && ( // {page < totalPages && (
// <a // <a
// href={`/admin?${new URLSearchParams({ ...(status && { status }), page: String(page + 1) })}`} // href={`/admin?${new URLSearchParams({ ...(status && { status }), page: String(page + 1) })}`}
// className="text-sm px-3 py-1 rounded-full font-medium border bg-white text-orange-700 border-orange-300 hover:bg-orange-50 transition-colors" // className="text-sm px-3 py-1 rounded-full font-medium border bg-white text-orange-700 border-orange-300 hover:bg-orange-50 transition-colors"
// > // >
// Next // Next
// </a> // </a>
// )} // )}
// </div> // </div>
// </div> // </div>
// )} // )}
// </div> // </div>
// ); // );
// } // }

84
frontend/src/components/admin/return-to-island.tsx
View file

@ -1,51 +1,51 @@
import { useState } from "react"; // import { useState } from "react";
import { Icon } from "@iconify/react"; // import { Icon } from "@iconify/react";
import { redirect } from "next/navigation"; // import { redirect } from "next/navigation";
interface Props { // interface Props {
hasExpired: boolean; // hasExpired: boolean;
} // }
export default function ReturnToIsland({ hasExpired }: Props) { // export default function ReturnToIsland({ hasExpired }: Props) {
const [isChecked, setIsChecked] = useState(false); // const [isChecked, setIsChecked] = useState(false);
const [error, setError] = useState<string | undefined>(undefined); // const [error, setError] = useState<string | undefined>(undefined);
const handleClick = async () => { // const handleClick = async () => {
const response = await fetch("/api/return", { method: "DELETE" }); // const response = await fetch("/api/return", { method: "DELETE" });
if (!response.ok) { // if (!response.ok) {
const data = await response.json(); // const data = await response.json();
setError(data.error); // setError(data.error);
return; // return;
} // }
redirect("/"); // redirect("/");
}; // };
return ( // return (
<> // <>
<div className="flex justify-center items-center gap-2"> // <div className="flex justify-center items-center gap-2">
<input // <input
type="checkbox" // type="checkbox"
id="agreement" // id="agreement"
disabled={hasExpired} // disabled={hasExpired}
checked={isChecked} // checked={isChecked}
onChange={(e) => setIsChecked(e.target.checked)} // onChange={(e) => setIsChecked(e.target.checked)}
className={`checkbox ${hasExpired && "text-zinc-600 bg-zinc-100! border-zinc-300!"}`} // className={`checkbox ${hasExpired && "text-zinc-600 bg-zinc-100! border-zinc-300!"}`}
/> // />
<label htmlFor="agreement" className={`${hasExpired && "text-zinc-500"}`}> // <label htmlFor="agreement" className={`${hasExpired && "text-zinc-500"}`}>
I Agree // I Agree
</label> // </label>
</div> // </div>
<hr className="border-zinc-300 mt-3 mb-4" /> // <hr className="border-zinc-300 mt-3 mb-4" />
{error && <span className="text-red-400 font-bold mb-2.5">Error: {error}</span>} // {error && <span className="text-red-400 font-bold mb-2.5">Error: {error}</span>}
<button disabled={!isChecked} aria-label="Travel Back Home" onClick={handleClick} className="pill button gap-2 w-fit self-center"> // <button disabled={!isChecked} aria-label="Travel Back Home" onClick={handleClick} className="pill button gap-2 w-fit self-center">
<Icon icon="ic:round-home" fontSize={24} /> // <Icon icon="ic:round-home" fontSize={24} />
Travel Back // Travel Back
</button> // </button>
</> // </>
); // );
} // }

572
frontend/src/components/admin/user-management.tsx
View file

@ -1,316 +1,316 @@
// WARNING: this code is quite trash // // WARNING: this code is quite trash
import { useState } from "react"; // import { useState } from "react";
import { Icon } from "@iconify/react"; // import { Icon } from "@iconify/react";
import { Prisma, PunishmentType } from "@prisma/client"; // import { Prisma, PunishmentType } from "@prisma/client";
import ProfilePicture from "../profile-picture"; // import ProfilePicture from "../profile-picture";
import SubmitButton from "../submit-button"; // import SubmitButton from "../submit-button";
import PunishmentDeletionDialog from "./punishment-deletion-dialog"; // import PunishmentDeletionDialog from "./punishment-deletion-dialog";
interface ApiResponse { // interface ApiResponse {
success: boolean; // success: boolean;
name: string; // name: string;
image: string; // image: string;
createdAt: string; // createdAt: string;
punishments: Prisma.PunishmentGetPayload<{ // punishments: Prisma.PunishmentGetPayload<{
include: { // include: {
violatingMiis: true; // violatingMiis: true;
}; // };
}>[]; // }>[];
} // }
interface MiiList { // interface MiiList {
id: number; // id: number;
reason: string; // reason: string;
} // }
export default function Punishments() { // export default function Punishments() {
const [userId, setUserId] = useState(-1); // const [userId, setUserId] = useState(-1);
const [user, setUser] = useState<ApiResponse | undefined>(); // const [user, setUser] = useState<ApiResponse | undefined>();
const [type, setType] = useState<PunishmentType>("WARNING"); // const [type, setType] = useState<PunishmentType>("WARNING");
const [duration, setDuration] = useState(1); // const [duration, setDuration] = useState(1);
const [notes, setNotes] = useState(""); // const [notes, setNotes] = useState("");
const [reasons, setReasons] = useState(""); // const [reasons, setReasons] = useState("");
const [miiList, setMiiList] = useState<MiiList[]>([]); // const [miiList, setMiiList] = useState<MiiList[]>([]);
const [newMii, setNewMii] = useState<MiiList>({ // const [newMii, setNewMii] = useState<MiiList>({
id: 0, // id: 0,
reason: "", // reason: "",
}); // });
const [error, setError] = useState<string | undefined>(undefined); // const [error, setError] = useState<string | undefined>(undefined);
const addMiiToList = () => { // const addMiiToList = () => {
if (newMii.id && newMii.reason) { // if (newMii.id && newMii.reason) {
setMiiList([...miiList, { ...newMii, id: Number(newMii.id) }]); // setMiiList([...miiList, { ...newMii, id: Number(newMii.id) }]);
setNewMii({ id: 0, reason: "" }); // setNewMii({ id: 0, reason: "" });
} // }
}; // };
const removeMiiFromList = (index: number) => { // const removeMiiFromList = (index: number) => {
setMiiList(miiList.filter((_, i) => i !== index)); // setMiiList(miiList.filter((_, i) => i !== index));
}; // };
const handleLookup = async () => { // const handleLookup = async () => {
const response = await fetch(`/api/admin/lookup?id=${userId}`); // const response = await fetch(`/api/admin/lookup?id=${userId}`);
const data = await response.json(); // const data = await response.json();
setUser(data); // setUser(data);
}; // };
const handleSubmit = async () => { // const handleSubmit = async () => {
const response = await fetch(`/api/admin/punish?id=${userId}`, { // const response = await fetch(`/api/admin/punish?id=${userId}`, {
method: "POST", // method: "POST",
body: JSON.stringify({ // body: JSON.stringify({
type, // type,
duration, // duration,
notes, // notes,
reasons: reasons.split(","), // reasons: reasons.split(","),
miiReasons: miiList, // miiReasons: miiList,
}), // }),
}); // });
if (!response.ok) { // if (!response.ok) {
const { error } = await response.json(); // const { error } = await response.json();
setError(error); // setError(error);
} // }
// Set all inputs to empty/default // // Set all inputs to empty/default
setType("WARNING"); // setType("WARNING");
setDuration(1); // setDuration(1);
setNotes(""); // setNotes("");
setReasons(""); // setReasons("");
setMiiList([]); // setMiiList([]);
setNewMii({ id: 0, reason: "" }); // setNewMii({ id: 0, reason: "" });
setError(""); // setError("");
await handleLookup(); // await handleLookup();
}; // };
return ( // return (
<div className="bg-orange-100 rounded-xl border-2 border-orange-400 p-2 gap-2"> // <div className="bg-orange-100 rounded-xl border-2 border-orange-400 p-2 gap-2">
<div className="flex justify-center items-center gap-2"> // <div className="flex justify-center items-center gap-2">
<input // <input
type="number" // type="number"
placeholder="Enter user ID to lookup..." // placeholder="Enter user ID to lookup..."
name="user-id" // name="user-id"
value={userId !== -1 ? userId : ""} // value={userId !== -1 ? userId : ""}
onChange={(e) => setUserId(Number(e.target.value))} // onChange={(e) => setUserId(Number(e.target.value))}
className="pill input w-full max-w-lg" // className="pill input w-full max-w-lg"
/> // />
<button onClick={handleLookup} className="pill button"> // <button onClick={handleLookup} className="pill button">
Lookup User // Lookup User
</button> // </button>
</div> // </div>
{user && ( // {user && (
<div className="grid grid-cols-2 gap-2 mt-2 max-lg:grid-cols-1"> // <div className="grid grid-cols-2 gap-2 mt-2 max-lg:grid-cols-1">
<div className="p-4 bg-orange-50 border border-orange-300 rounded-md shadow-sm"> // <div className="p-4 bg-orange-50 border border-orange-300 rounded-md shadow-sm">
<div className="flex gap-1"> // <div className="flex gap-1">
<ProfilePicture src={user.image} width={96} height={96} className="rounded-full border-2 border-orange-400" /> // <ProfilePicture src={user.image} width={96} height={96} className="rounded-full border-2 border-orange-400" />
<div className="p-2 flex flex-col"> // <div className="p-2 flex flex-col">
<p className="text-xl font-bold">{user.name}</p> // <p className="text-xl font-bold">{user.name}</p>
<p className="text-black/60 text-sm font-medium">@{user.name}</p> // <p className="text-black/60 text-sm font-medium">@{user.name}</p>
<p className="text-sm mt-auto"> // <p className="text-sm mt-auto">
<span className="font-medium">Created:</span>{" "} // <span className="font-medium">Created:</span>{" "}
{new Date(user.createdAt).toLocaleString("en-GB", { // {new Date(user.createdAt).toLocaleString("en-GB", {
day: "2-digit", // day: "2-digit",
month: "long", // month: "long",
year: "numeric", // year: "numeric",
hour: "2-digit", // hour: "2-digit",
minute: "2-digit", // minute: "2-digit",
second: "2-digit", // second: "2-digit",
timeZone: "UTC", // timeZone: "UTC",
})}{" "} // })}{" "}
UTC // UTC
</p> // </p>
</div> // </div>
</div> // </div>
<hr className="border-zinc-300 my-3" /> // <hr className="border-zinc-300 my-3" />
<div className="flex flex-col gap-2"> // <div className="flex flex-col gap-2">
{user.punishments.length === 0 ? ( // {user.punishments.length === 0 ? (
<p className="text-center text-zinc-500 my-2">No punishments found.</p> // <p className="text-center text-zinc-500 my-2">No punishments found.</p>
) : ( // ) : (
<> // <>
{user.punishments.map((punishment) => ( // {user.punishments.map((punishment) => (
<div // <div
key={punishment.id} // key={punishment.id}
className={`border rounded-lg p-3 space-y-1 ${ // className={`border rounded-lg p-3 space-y-1 ${
punishment.type === "WARNING" // punishment.type === "WARNING"
? "bg-yellow-50 border-yellow-400" // ? "bg-yellow-50 border-yellow-400"
: punishment.type === "TEMP_EXILE" // : punishment.type === "TEMP_EXILE"
? "bg-orange-100 border-orange-200" // ? "bg-orange-100 border-orange-200"
: "bg-red-50 border-red-200" // : "bg-red-50 border-red-200"
}`} // }`}
> // >
<div className="flex items-center justify-between mb-2"> // <div className="flex items-center justify-between mb-2">
<span // <span
className={`border px-2 py-1 rounded text-xs font-semibold ${ // className={`border px-2 py-1 rounded text-xs font-semibold ${
punishment.type === "WARNING" // punishment.type === "WARNING"
? "bg-yellow-200 text-yellow-800 border-yellow-500" // ? "bg-yellow-200 text-yellow-800 border-yellow-500"
: punishment.type === "TEMP_EXILE" // : punishment.type === "TEMP_EXILE"
? "bg-orange-200 text-orange-800 border-orange-500" // ? "bg-orange-200 text-orange-800 border-orange-500"
: "bg-red-200 text-red-800 border-red-500" // : "bg-red-200 text-red-800 border-red-500"
}`} // }`}
> // >
{punishment.type} // {punishment.type}
</span> // </span>
<div className="flex items-center gap-2"> // <div className="flex items-center gap-2">
<span className="text-sm text-zinc-600"> // <span className="text-sm text-zinc-600">
{new Date(punishment.createdAt).toLocaleDateString("en-GB", { day: "2-digit", month: "short", year: "numeric" })} // {new Date(punishment.createdAt).toLocaleDateString("en-GB", { day: "2-digit", month: "short", year: "numeric" })}
</span> // </span>
<PunishmentDeletionDialog punishmentId={punishment.id} /> // <PunishmentDeletionDialog punishmentId={punishment.id} />
</div> // </div>
</div> // </div>
<p className="text-sm text-zinc-600"> // <p className="text-sm text-zinc-600">
<strong>Notes:</strong> {punishment.notes} // <strong>Notes:</strong> {punishment.notes}
</p> // </p>
{punishment.type !== "WARNING" && ( // {punishment.type !== "WARNING" && (
<p className="text-sm text-zinc-600"> // <p className="text-sm text-zinc-600">
<strong>Expires:</strong>{" "} // <strong>Expires:</strong>{" "}
{punishment.expiresAt // {punishment.expiresAt
? new Date(punishment.expiresAt).toLocaleDateString("en-GB", { day: "2-digit", month: "short", year: "numeric" }) // ? new Date(punishment.expiresAt).toLocaleDateString("en-GB", { day: "2-digit", month: "short", year: "numeric" })
: "Never"} // : "Never"}
</p> // </p>
)} // )}
{punishment.type !== "PERM_EXILE" && ( // {punishment.type !== "PERM_EXILE" && (
<p className="text-sm text-zinc-600"> // <p className="text-sm text-zinc-600">
<strong>Returned:</strong> {JSON.stringify(punishment.returned)} // <strong>Returned:</strong> {JSON.stringify(punishment.returned)}
</p> // </p>
)} // )}
<p className="text-sm text-zinc-600"> // <p className="text-sm text-zinc-600">
<strong>Reasons:</strong> // <strong>Reasons:</strong>
</p> // </p>
<ul className="ml-8 list-disc text-sm text-zinc-600"> // <ul className="ml-8 list-disc text-sm text-zinc-600">
{punishment.reasons.map((reason, index) => ( // {punishment.reasons.map((reason, index) => (
<li key={index}>{reason}</li> // <li key={index}>{reason}</li>
))} // ))}
</ul> // </ul>
<p className="text-sm text-zinc-600"> // <p className="text-sm text-zinc-600">
<strong>Mii Reasons:</strong> // <strong>Mii Reasons:</strong>
</p> // </p>
<ul className="ml-8 list-disc text-sm text-zinc-600"> // <ul className="ml-8 list-disc text-sm text-zinc-600">
{punishment.violatingMiis.map((mii) => ( // {punishment.violatingMiis.map((mii) => (
<li key={mii.miiId}> // <li key={mii.miiId}>
{mii.miiId}: {mii.reason} // {mii.miiId}: {mii.reason}
</li> // </li>
))} // ))}
</ul> // </ul>
</div> // </div>
))} // ))}
</> // </>
)} // )}
</div> // </div>
</div> // </div>
<div className="p-4 bg-orange-50 border border-orange-300 rounded-md shadow-sm flex flex-col gap-1"> // <div className="p-4 bg-orange-50 border border-orange-300 rounded-md shadow-sm flex flex-col gap-1">
{/* Punishment type */} // {/* Punishment type */}
<p className="text-sm">Punishment Type</p> // <p className="text-sm">Punishment Type</p>
<select name="punishment-type" value={type} onChange={(e) => setType(e.target.value as PunishmentType)} className="pill input"> // <select name="punishment-type" value={type} onChange={(e) => setType(e.target.value as PunishmentType)} className="pill input">
<option value="WARNING">Warning</option> // <option value="WARNING">Warning</option>
<option value="TEMP_EXILE">Temporary Exile</option> // <option value="TEMP_EXILE">Temporary Exile</option>
<option value="PERM_EXILE">Permanent Exile</option> // <option value="PERM_EXILE">Permanent Exile</option>
</select> // </select>
{/* Punishment duration */} // {/* Punishment duration */}
{type === "TEMP_EXILE" && ( // {type === "TEMP_EXILE" && (
<> // <>
<p className="text-sm">Duration</p> // <p className="text-sm">Duration</p>
<select name="punishment-duration" value={duration} onChange={(e) => setDuration(Number(e.target.value))} className="pill input"> // <select name="punishment-duration" value={duration} onChange={(e) => setDuration(Number(e.target.value))} className="pill input">
<option value="1">1 Day</option> // <option value="1">1 Day</option>
<option value="7">7 Days</option> // <option value="7">7 Days</option>
<option value="30">30 Days</option> // <option value="30">30 Days</option>
</select> // </select>
</> // </>
)} // )}
{/* Punishment notes */} // {/* Punishment notes */}
<p className="text-sm">Notes</p> // <p className="text-sm">Notes</p>
<textarea // <textarea
rows={2} // rows={2}
maxLength={256} // maxLength={256}
placeholder="Type notes here for the punishment..." // placeholder="Type notes here for the punishment..."
className="pill input rounded-xl! resize-none" // className="pill input rounded-xl! resize-none"
value={notes} // value={notes}
onChange={(e) => setNotes(e.target.value)} // onChange={(e) => setNotes(e.target.value)}
/> // />
{/* Punishment profile-related reasons */} // {/* Punishment profile-related reasons */}
<p className="text-sm">Profile-related reasons (split by comma)</p> // <p className="text-sm">Profile-related reasons (split by comma)</p>
<textarea // <textarea
rows={2} // rows={2}
maxLength={256} // maxLength={256}
placeholder="Type profile-related reasons here for the punishment..." // placeholder="Type profile-related reasons here for the punishment..."
className="pill input rounded-xl! resize-none" // className="pill input rounded-xl! resize-none"
value={reasons} // value={reasons}
onChange={(e) => setReasons(e.target.value)} // onChange={(e) => setReasons(e.target.value)}
/> // />
{/* Punishment mii-related reasons */} // {/* Punishment mii-related reasons */}
<p className="text-sm">Mii-related reasons</p> // <p className="text-sm">Mii-related reasons</p>
<div className="bg-orange-100 border border-orange-300 rounded-lg p-4"> // <div className="bg-orange-100 border border-orange-300 rounded-lg p-4">
{/* Add Mii Form */} // {/* Add Mii Form */}
<div className="flex gap-2"> // <div className="flex gap-2">
<input // <input
type="number" // type="number"
placeholder="Mii ID" // placeholder="Mii ID"
className="pill input w-24 text-sm" // className="pill input w-24 text-sm"
value={newMii.id} // value={newMii.id}
onChange={(e) => setNewMii({ ...newMii, id: Number(e.target.value) })} // onChange={(e) => setNewMii({ ...newMii, id: Number(e.target.value) })}
/> // />
<input // <input
type="text" // type="text"
placeholder="Reason for this Mii..." // placeholder="Reason for this Mii..."
className="pill input flex-1 text-sm" // className="pill input flex-1 text-sm"
value={newMii.reason} // value={newMii.reason}
onChange={(e) => setNewMii({ ...newMii, reason: e.target.value })} // onChange={(e) => setNewMii({ ...newMii, reason: e.target.value })}
/> // />
<button type="button" aria-label="Add Mii" onClick={addMiiToList} className="pill button aspect-square p-2.5!"> // <button type="button" aria-label="Add Mii" onClick={addMiiToList} className="pill button aspect-square p-2.5!">
<Icon icon="ic:baseline-plus" className="size-4" /> // <Icon icon="ic:baseline-plus" className="size-4" />
</button> // </button>
</div> // </div>
{/* Mii List */} // {/* Mii List */}
{miiList.length > 0 && ( // {miiList.length > 0 && (
<div className="mt-2 space-y-1"> // <div className="mt-2 space-y-1">
<p className="text-sm font-medium text-black/50">Violating Miis ({miiList.length})</p> // <p className="text-sm font-medium text-black/50">Violating Miis ({miiList.length})</p>
{miiList.map((mii, index) => ( // {miiList.map((mii, index) => (
<div key={index} className="bg-white border border-orange-200 rounded-md p-3 flex items-center justify-between"> // <div key={index} className="bg-white border border-orange-200 rounded-md p-3 flex items-center justify-between">
<div className="flex-1"> // <div className="flex-1">
<div className="flex items-center gap-2"> // <div className="flex items-center gap-2">
<span className="bg-orange-200 text-orange-800 border border-orange-400 px-2 py-1 rounded text-xs font-semibold">ID: {mii.id}</span> // <span className="bg-orange-200 text-orange-800 border border-orange-400 px-2 py-1 rounded text-xs font-semibold">ID: {mii.id}</span>
<span className="text-sm text-gray-500">{mii.reason}</span> // <span className="text-sm text-gray-500">{mii.reason}</span>
</div> // </div>
</div> // </div>
<button // <button
type="button" // type="button"
aria-label="Remove Mii" // aria-label="Remove Mii"
onClick={() => removeMiiFromList(index)} // onClick={() => removeMiiFromList(index)}
className="cursor-pointer text-red-500 hover:text-red-700 transition-colors" // className="cursor-pointer text-red-500 hover:text-red-700 transition-colors"
> // >
<Icon icon="iconamoon:trash" className="size-4" /> // <Icon icon="iconamoon:trash" className="size-4" />
</button> // </button>
</div> // </div>
))} // ))}
</div> // </div>
)} // )}
{miiList.length === 0 && <p className="text-center text-zinc-500 text-sm my-4">No Miis added yet</p>} // {miiList.length === 0 && <p className="text-center text-zinc-500 text-sm my-4">No Miis added yet</p>}
</div> // </div>
<div className="flex justify-between items-center mt-2"> // <div className="flex justify-between items-center mt-2">
{error && <span className="text-red-400 font-bold">Error: {error}</span>} // {error && <span className="text-red-400 font-bold">Error: {error}</span>}
<SubmitButton onClick={handleSubmit} className="ml-auto" /> // <SubmitButton onClick={handleSubmit} className="ml-auto" />
</div> // </div>
</div> // </div>
</div> // </div>
)} // )}
</div> // </div>
); // );
} // }

186
frontend/src/components/carousel.tsx
View file

@ -1,93 +1,93 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import useEmblaCarousel from "embla-carousel-react"; import useEmblaCarousel from "embla-carousel-react";
import { Icon } from "@iconify/react"; import { Icon } from "@iconify/react";
import ImageViewer from "./image-viewer"; import ImageViewer from "./image-viewer";
interface Props { interface Props {
images: string[]; images: string[];
className?: string; className?: string;
} }
export default function Carousel({ images, className }: Props) { export default function Carousel({ images, className }: Props) {
const [emblaRef, emblaApi] = useEmblaCarousel({ duration: 15 }); const [emblaRef, emblaApi] = useEmblaCarousel({ duration: 15 });
const [selectedIndex, setSelectedIndex] = useState(0); const [selectedIndex, setSelectedIndex] = useState(0);
const [scrollSnaps, setScrollSnaps] = useState<number[]>([]); const [scrollSnaps, setScrollSnaps] = useState<number[]>([]);
const [isFocused, setIsFocused] = useState(false); const [isFocused, setIsFocused] = useState(false);
useEffect(() => { useEffect(() => {
if (!emblaApi) return; if (!emblaApi) return;
emblaApi.reInit(); emblaApi.reInit();
setScrollSnaps(emblaApi.scrollSnapList()); setScrollSnaps(emblaApi.scrollSnapList());
setSelectedIndex(0); setSelectedIndex(0);
emblaApi.on("select", () => setSelectedIndex(emblaApi.selectedScrollSnap())); emblaApi.on("select", () => setSelectedIndex(emblaApi.selectedScrollSnap()));
}, [images, emblaApi]); }, [images, emblaApi]);
// Handle keyboard events // Handle keyboard events
useEffect(() => { useEffect(() => {
if (!isFocused || !emblaApi) return; if (!isFocused || !emblaApi) return;
const handleKeyDown = (event: KeyboardEvent) => { const handleKeyDown = (event: KeyboardEvent) => {
if (event.key === "ArrowLeft") emblaApi.scrollPrev(); if (event.key === "ArrowLeft") emblaApi.scrollPrev();
else if (event.key === "ArrowRight") emblaApi.scrollNext(); else if (event.key === "ArrowRight") emblaApi.scrollNext();
}; };
window.addEventListener("keydown", handleKeyDown); window.addEventListener("keydown", handleKeyDown);
return () => { return () => {
window.removeEventListener("keydown", handleKeyDown); window.removeEventListener("keydown", handleKeyDown);
}; };
}, [isFocused, emblaApi]); }, [isFocused, emblaApi]);
return ( return (
<div className="relative w-full h-fit" tabIndex={0} onMouseEnter={() => setIsFocused(true)} onMouseLeave={() => setIsFocused(false)}> <div className="relative w-full h-fit" tabIndex={0} onMouseEnter={() => setIsFocused(true)} onMouseLeave={() => setIsFocused(false)}>
<div className={`overflow-hidden rounded-xl bg-zinc-300 ${className ?? ""}`} ref={emblaRef}> <div className={`overflow-hidden rounded-xl bg-zinc-300 ${className ?? ""}`} ref={emblaRef}>
<div className="flex"> <div className="flex">
{images.map((src, index) => ( {images.map((src, index) => (
<div key={index} className="shrink-0 w-full"> <div key={index} className="shrink-0 w-full">
<ImageViewer src={src} alt="mii image" width={240} height={160} className="w-full h-auto aspect-3/2 object-contain" images={images} /> <ImageViewer src={src} alt="mii image" width={240} height={160} className="w-full h-auto aspect-3/2 object-contain" images={images} />
</div> </div>
))} ))}
</div> </div>
</div> </div>
{images.length > 1 && ( {images.length > 1 && (
<> <>
<button <button
type="button" type="button"
aria-label="Scroll Carousel Left" aria-label="Scroll Carousel Left"
onClick={() => emblaApi?.scrollPrev()} onClick={() => emblaApi?.scrollPrev()}
disabled={!emblaApi?.canScrollPrev()} disabled={!emblaApi?.canScrollPrev()}
className={`absolute left-2 top-1/2 -translate-y-1/2 bg-white p-1 rounded-full shadow text-xl transition-opacity ${ className={`absolute left-2 top-1/2 -translate-y-1/2 bg-white p-1 rounded-full shadow text-xl transition-opacity ${
emblaApi?.canScrollPrev() ? "opacity-100 cursor-pointer" : "opacity-50" emblaApi?.canScrollPrev() ? "opacity-100 cursor-pointer" : "opacity-50"
}`} }`}
> >
<Icon icon="ic:round-chevron-left" /> <Icon icon="ic:round-chevron-left" />
</button> </button>
<button <button
type="button" type="button"
aria-label="Scroll Carousel Right" aria-label="Scroll Carousel Right"
onClick={() => emblaApi?.scrollNext()} onClick={() => emblaApi?.scrollNext()}
disabled={!emblaApi?.canScrollNext()} disabled={!emblaApi?.canScrollNext()}
className={`absolute right-2 top-1/2 -translate-y-1/2 bg-white p-1 rounded-full shadow text-xl transition-opacity ${ className={`absolute right-2 top-1/2 -translate-y-1/2 bg-white p-1 rounded-full shadow text-xl transition-opacity ${
emblaApi?.canScrollNext() ? "opacity-100 cursor-pointer" : "opacity-50" emblaApi?.canScrollNext() ? "opacity-100 cursor-pointer" : "opacity-50"
}`} }`}
> >
<Icon icon="ic:round-chevron-right" /> <Icon icon="ic:round-chevron-right" />
</button> </button>
</> </>
)} )}
<div className="flex justify-center p-2 gap-2 absolute right-0"> <div className="flex justify-center p-2 gap-2 absolute right-0">
{scrollSnaps.map((_, index) => ( {scrollSnaps.map((_, index) => (
<button <button
key={index} key={index}
type="button" type="button"
aria-label={`Go to ${index} in Carousel`} aria-label={`Go to ${index} in Carousel`}
onClick={() => emblaApi?.scrollTo(index)} onClick={() => emblaApi?.scrollTo(index)}
className={`size-1.5 cursor-pointer rounded-full ${index === selectedIndex ? "bg-black" : "bg-black/25"}`} className={`size-1.5 cursor-pointer rounded-full ${index === selectedIndex ? "bg-black" : "bg-black/25"}`}
/> />
))} ))}
</div> </div>
</div> </div>
); );
} }

84
frontend/src/components/description.tsx
View file

@ -1,42 +1,42 @@
import { Icon } from "@iconify/react"; import { Icon } from "@iconify/react";
interface Props { interface Props {
text: string; text: string;
className?: string; className?: string;
} }
// Adds fancy formatting to links // Adds fancy formatting to links
export default function Description({ text, className }: Props) { export default function Description({ text, className }: Props) {
const urlRegex = /(https?:\/\/[^\s]+)/g; const urlRegex = /(https?:\/\/[^\s]+)/g;
const parts = text.split(urlRegex); const parts = text.split(urlRegex);
return ( return (
<p className={`text-sm mt-2 bg-white/50 p-3 rounded-lg border border-orange-200 whitespace-break-spaces max-h-54 overflow-y-auto ${className}`}> <p className={`text-sm mt-2 bg-white/50 p-3 rounded-lg border border-orange-200 whitespace-break-spaces max-h-54 overflow-y-auto ${className}`}>
{parts.map(async (part, index) => { {parts.map(async (part, index) => {
try { try {
// Check if it's a URL // Check if it's a URL
if (!urlRegex.test(part)) throw new Error("Not a URL"); if (!urlRegex.test(part)) throw new Error("Not a URL");
const url = new URL(part); const url = new URL(part);
return ( return (
<a <a
key={index} key={index}
href={`/out?url=${encodeURIComponent(part)}`} href={`/out?url=${encodeURIComponent(part)}`}
target="_blank" target="_blank"
className="text-blue-700 underline break-all ml-1 inline-flex items-center group" className="text-blue-700 underline break-all ml-1 inline-flex items-center group"
title={`Go to ${url.hostname}`} title={`Go to ${url.hostname}`}
> >
{url.hostname} {url.hostname}
{url.pathname !== "/" ? url.pathname : ""} {url.pathname !== "/" ? url.pathname : ""}
{url.search} {url.search}
<Icon icon="mi:arrow-right-up" fontSize={16} className="transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5" /> <Icon icon="mi:arrow-right-up" fontSize={16} className="transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
</a> </a>
); );
} catch { } catch {
// Normal text/Invalid URL fallback // Normal text/Invalid URL fallback
return <span key={index}>{part}</span>; return <span key={index}>{part}</span>;
} }
})} })}
</p> </p>
); );
} }

98
frontend/src/components/dropzone.tsx
View file

@ -1,49 +1,49 @@
import { type ReactNode, useState } from "react"; import { type ReactNode, useState } from "react";
import { type DropzoneOptions, type FileWithPath, useDropzone } from "react-dropzone"; import { type DropzoneOptions, type FileWithPath, useDropzone } from "react-dropzone";
import { Icon } from "@iconify/react"; import { Icon } from "@iconify/react";
interface Props { interface Props {
onDrop: (acceptedFiles: FileWithPath[]) => void; onDrop: (acceptedFiles: FileWithPath[]) => void;
options?: DropzoneOptions; options?: DropzoneOptions;
children?: ReactNode; children?: ReactNode;
} }
export default function Dropzone({ onDrop, options, children }: Props) { export default function Dropzone({ onDrop, options, children }: Props) {
const [isDraggingOver, setIsDraggingOver] = useState(false); const [isDraggingOver, setIsDraggingOver] = useState(false);
const handleDrop = (acceptedFiles: FileWithPath[]) => { const handleDrop = (acceptedFiles: FileWithPath[]) => {
setIsDraggingOver(false); setIsDraggingOver(false);
onDrop(acceptedFiles); onDrop(acceptedFiles);
}; };
const { getRootProps, getInputProps } = useDropzone({ const { getRootProps, getInputProps } = useDropzone({
onDrop: handleDrop, onDrop: handleDrop,
maxFiles: 3, maxFiles: 3,
accept: { accept: {
"image/*": [".png", ".jpg", ".jpeg", ".bmp", ".png", ".heic"], "image/*": [".png", ".jpg", ".jpeg", ".bmp", ".png", ".heic"],
}, },
...options, ...options,
}); });
return ( return (
<div <div
{...getRootProps()} {...getRootProps()}
onDragOver={() => setIsDraggingOver(true)} onDragOver={() => setIsDraggingOver(true)}
onDragLeave={() => setIsDraggingOver(false)} onDragLeave={() => setIsDraggingOver(false)}
className={`relative bg-orange-200 flex flex-col justify-center items-center gap-2 p-4 rounded-xl border-2 border-dashed border-amber-500 select-none size-full transition-all duration-200 ${ className={`relative bg-orange-200 flex flex-col justify-center items-center gap-2 p-4 rounded-xl border-2 border-dashed border-amber-500 select-none size-full transition-all duration-200 ${
isDraggingOver && "scale-105 brightness-90 shadow-xl" isDraggingOver && "scale-105 brightness-90 shadow-xl"
}`} }`}
> >
{/* Used to transition from border-dashed to border-solid */} {/* Used to transition from border-dashed to border-solid */}
<div <div
className={`absolute inset-0 rounded-[10px] outline-2 outline-amber-500 transition-opacity duration-300 ${ className={`absolute inset-0 rounded-[10px] outline-2 outline-amber-500 transition-opacity duration-300 ${
isDraggingOver ? "opacity-100" : "opacity-0" isDraggingOver ? "opacity-100" : "opacity-0"
}`} }`}
></div> ></div>
<input {...getInputProps({ multiple: options?.maxFiles ? options.maxFiles > 1 : false })} /> <input {...getInputProps({ multiple: options?.maxFiles ? options.maxFiles > 1 : false })} />
<Icon icon="material-symbols:upload" fontSize={48} /> <Icon icon="material-symbols:upload" fontSize={48} />
{children} {children}
</div> </div>
); );
} }

43
frontend/src/components/footer.astro
View file

@ -1,43 +0,0 @@
---
import { Icon } from "astro-icon/components";
---
<footer class="mt-auto">
<div class="max-w-4xl mx-auto px-4 py-4">
{/* Main disclaimer */}
<div class="text-center mb-2">
<p class="text-sm text-zinc-600 font-medium">TomodachiShare is not affiliated with Nintendo</p>
</div>
{/* Links section */}
<div class="flex flex-wrap justify-center items-center gap-x-4 text-sm max-sm:gap-x-12">
<a href="/terms-of-service" class="text-zinc-500 hover:text-zinc-700 transition-colors duration-200 hover:underline"> Terms of Service </a>
<span class="text-zinc-400 hidden sm:inline" aria-hidden="true">•</span>
<a href="/privacy" class="text-zinc-500 hover:text-zinc-700 transition-colors duration-200 hover:underline"> Privacy Policy </a>
<span class="text-zinc-400 hidden sm:inline" aria-hidden="true">•</span>
<a
href="https://discord.gg/48cXBFKvWQ"
target="_blank"
class="text-[#5865F2] hover:text-[#454FBF] transition-colors duration-200 hover:underline inline-flex items-end gap-1"
>
<Icon name="ic:baseline-discord" class="text-lg" />
Discord
</a>
<span class="text-zinc-400 hidden sm:inline" aria-hidden="true"> • </span>
<a href="https://trafficlunar.net" target="_blank" class="text-zinc-500 hover:text-zinc-700 transition-colors duration-200 hover:underline group">
Made by <span class="text-orange-400 group-hover:text-orange-500 font-medium transition-colors duration-200">trafficlunar</span>
</a>
</div>
{/* Copyright */}
<div class="text-center mt-4 mb-4">
<p class="text-xs text-zinc-400">© {new Date().getFullYear()} TomodachiShare. All rights reserved.</p>
</div>
</div>
</footer>

55
frontend/src/components/footer.tsx Normal file
View file

@ -0,0 +1,55 @@
import { Icon } from "@iconify/react";
export default function Footer() {
return (
<footer className="mt-auto">
<div className="max-w-4xl mx-auto px-4 py-4">
{/* Main disclaimer */}
<div className="text-center mb-2">
<p className="text-sm text-zinc-600 font-medium">TomodachiShare is not affiliated with Nintendo</p>
</div>
{/* Links section */}
<div className="flex flex-wrap justify-center items-center gap-x-4 text-sm max-sm:gap-x-12">
<a href="/terms-of-service" className="text-zinc-500 hover:text-zinc-700 transition-colors duration-200 hover:underline">
Terms of Service
</a>
<span className="text-zinc-400 hidden sm:inline" aria-hidden="true">
•
</span>
<a href="/privacy" className="text-zinc-500 hover:text-zinc-700 transition-colors duration-200 hover:underline">
Privacy Policy
</a>
<span className="text-zinc-400 hidden sm:inline" aria-hidden="true">
•
</span>
<a
href="https://discord.gg/48cXBFKvWQ"
target="_blank"
className="text-[#5865F2] hover:text-[#454FBF] transition-colors duration-200 hover:underline inline-flex items-end gap-1"
>
<Icon icon="ic:baseline-discord" className="text-lg" />
Discord
</a>
<span className="text-zinc-400 hidden sm:inline" aria-hidden="true">
•
</span>
<a href="https://trafficlunar.net" target="_blank" className="text-zinc-500 hover:text-zinc-700 transition-colors duration-200 hover:underline group">
Made by <span className="text-orange-400 group-hover:text-orange-500 font-medium transition-colors duration-200">trafficlunar</span>
</a>
</div>
{/* Copyright */}
<div className="text-center mt-4 mb-4">
<p className="text-xs text-zinc-400">© {new Date().getFullYear()} TomodachiShare. All rights reserved.</p>
</div>
</div>
</footer>
);
}

2
frontend/src/components/header-profile.tsx
View file

@ -4,7 +4,7 @@ import { useStore } from "@nanostores/react";
import { session } from "../session"; import { session } from "../session";
export default function HeaderProfile() { export default function HeaderProfile() {
const API_BASE_URL = import.meta.env.PUBLIC_API_URL; const API_BASE_URL = import.meta.env.VITE_API_URL;
const $session = useStore(session); const $session = useStore(session);
useEffect(() => { useEffect(() => {

35
frontend/src/components/header.astro
View file

@ -1,35 +0,0 @@
---
import { Icon } from "astro-icon/components";
import SearchBar from "./search-bar";
import HeaderProfile from "./header-profile";
---
<header
class="sticky top-0 z-50 w-full p-4 grid grid-cols-3 gap-2 gap-x-4 items-center bg-amber-50 border-b-4 border-amber-500 shadow-md max-lg:grid-cols-2 max-md:grid-cols-1"
>
<a href={"/"} aria-label="Go to Home Page" class="font-black text-3xl text-orange-400 flex items-center gap-2 max-md:justify-center max-md:col-span-2">
<img src="/logo.svg" width={56} height={45} alt="logo" />
TomodachiShare
</a>
<div class="flex justify-center max-lg:justify-end max-md:justify-center">
<SearchBar client:only />
</div>
<ul class="flex justify-end gap-3 items-center h-11 *:h-full max-lg:col-span-2 max-md:justify-center">
<li title="Random Mii">
<a
href={`${import.meta.env.PUBLIC_API_URL}/random`}
aria-label="Go to Random Link"
class="pill button p-0! h-full aspect-square"
data-tooltip="Go to a Random Mii"
>
<Icon name="mdi:dice-3" size={28} />
</a>
</li>
<li>
<a href={"/submit"} class="pill button h-full"> Submit </a>
</li>
<HeaderProfile client:only />
</ul>
</header>

42
frontend/src/components/header.tsx Normal file
View file

@ -0,0 +1,42 @@
import { Icon } from "@iconify/react";
import SearchBar from "./search-bar";
import HeaderProfile from "./header-profile";
export default function Header() {
return (
<header className="sticky top-0 z-50 w-full p-4 grid grid-cols-3 gap-2 gap-x-4 items-center bg-amber-50 border-b-4 border-amber-500 shadow-md max-lg:grid-cols-2 max-md:grid-cols-1">
<a
href={"/"}
aria-label="Go to Home Page"
className="font-black text-3xl text-orange-400 flex items-center gap-2 max-md:justify-center max-md:col-span-2"
>
<img src="/logo.svg" width={56} height={45} alt="logo" />
TomodachiShare
</a>
<div className="flex justify-center max-lg:justify-end max-md:justify-center">
<SearchBar />
</div>
<ul className="flex justify-end gap-3 items-center h-11 *:h-full max-lg:col-span-2 max-md:justify-center">
<li title="Random Mii">
<a
href={`${import.meta.env.VITE_API_URL}/random`}
aria-label="Go to Random Link"
className="pill button p-0! h-full aspect-square"
data-tooltip="Go to a Random Mii"
>
<Icon icon="mdi:dice-3" fontSize={28} />
</a>
</li>
<li>
<a href={"/submit"} className="pill button h-full">
{" "}
Submit{" "}
</a>
</li>
<HeaderProfile />
</ul>
</header>
);
}

330
frontend/src/components/image-viewer.tsx
View file

@ -1,165 +1,165 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { createPortal } from "react-dom"; import { createPortal } from "react-dom";
import useEmblaCarousel from "embla-carousel-react"; import useEmblaCarousel from "embla-carousel-react";
import { Icon } from "@iconify/react"; import { Icon } from "@iconify/react";
interface Props { interface Props {
src: string; src: string;
alt: string; alt: string;
width: number; width: number;
height: number; height: number;
className?: string; className?: string;
images?: string[]; images?: string[];
} }
export default function ImageViewer({ src, alt, width, height, className, images = [] }: Props) { export default function ImageViewer({ src, alt, width, height, className, images = [] }: Props) {
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
const [isVisible, setIsVisible] = useState(false); const [isVisible, setIsVisible] = useState(false);
const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true, duration: 15 }); const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true, duration: 15 });
const [selectedIndex, setSelectedIndex] = useState(0); const [selectedIndex, setSelectedIndex] = useState(0);
const [scrollSnaps, setScrollSnaps] = useState<number[]>([]); const [scrollSnaps, setScrollSnaps] = useState<number[]>([]);
const close = () => { const close = () => {
setIsVisible(false); setIsVisible(false);
setTimeout(() => { setTimeout(() => {
setIsOpen(false); setIsOpen(false);
}, 300); }, 300);
}; };
useEffect(() => { useEffect(() => {
if (isOpen) { if (isOpen) {
// slight delay to trigger animation // slight delay to trigger animation
setTimeout(() => setIsVisible(true), 10); setTimeout(() => setIsVisible(true), 10);
} }
}, [isOpen]); }, [isOpen]);
useEffect(() => { useEffect(() => {
if (!emblaApi) return; if (!emblaApi) return;
// Keep order of images whilst opening at src prop // Keep order of images whilst opening at src prop
const index = images.indexOf(src); const index = images.indexOf(src);
if (index !== -1) { if (index !== -1) {
emblaApi.scrollTo(index, true); emblaApi.scrollTo(index, true);
setSelectedIndex(index); setSelectedIndex(index);
} }
setScrollSnaps(emblaApi.scrollSnapList()); setScrollSnaps(emblaApi.scrollSnapList());
emblaApi.on("select", () => setSelectedIndex(emblaApi.selectedScrollSnap())); emblaApi.on("select", () => setSelectedIndex(emblaApi.selectedScrollSnap()));
}, [emblaApi, images, src]); }, [emblaApi, images, src]);
// Handle keyboard events // Handle keyboard events
useEffect(() => { useEffect(() => {
if (!isOpen || !emblaApi) return; if (!isOpen || !emblaApi) return;
const handleKeyDown = (event: KeyboardEvent) => { const handleKeyDown = (event: KeyboardEvent) => {
if (event.key === "ArrowLeft") emblaApi.scrollPrev(); if (event.key === "ArrowLeft") emblaApi.scrollPrev();
else if (event.key === "ArrowRight") emblaApi.scrollNext(); else if (event.key === "ArrowRight") emblaApi.scrollNext();
else if (event.key === "Escape") close(); else if (event.key === "Escape") close();
}; };
window.addEventListener("keydown", handleKeyDown); window.addEventListener("keydown", handleKeyDown);
return () => { return () => {
window.removeEventListener("keydown", handleKeyDown); window.removeEventListener("keydown", handleKeyDown);
}; };
}, [isOpen, emblaApi]); }, [isOpen, emblaApi]);
const imagesMap = images.length === 0 ? [src] : images; const imagesMap = images.length === 0 ? [src] : images;
return ( return (
<> <>
{/* not inserting pixelated image-rendering here because i thought it looked a bit weird */} {/* not inserting pixelated image-rendering here because i thought it looked a bit weird */}
<img src={src} alt={alt} width={width} height={height} loading="lazy" onClick={() => setIsOpen(true)} className={`cursor-pointer ${className}`} /> <img src={src} alt={alt} width={width} height={height} loading="lazy" onClick={() => setIsOpen(true)} className={`cursor-pointer ${className}`} />
{isOpen && {isOpen &&
createPortal( createPortal(
<div className="fixed inset-0 h-[calc(100%-var(--header-height))] top-(--header-height) flex items-center justify-center z-40"> <div className="fixed inset-0 h-[calc(100%-var(--header-height))] top-(--header-height) flex items-center justify-center z-40">
<div <div
onClick={close} onClick={close}
className={`absolute inset-0 backdrop-brightness-40 backdrop-contrast-125 backdrop-blur-sm transition-opacity duration-300 ${isVisible ? "opacity-100" : "opacity-0"}`} className={`absolute inset-0 backdrop-brightness-40 backdrop-contrast-125 backdrop-blur-sm transition-opacity duration-300 ${isVisible ? "opacity-100" : "opacity-0"}`}
/> />
<button <button
type="button" type="button"
aria-label="Close" aria-label="Close"
onClick={close} onClick={close}
className={`pill button p-2! size-11 aspect-square text-2xl absolute top-4 right-4 shrink-0 ${isVisible ? "opacity-100" : "opacity-0"}`} className={`pill button p-2! size-11 aspect-square text-2xl absolute top-4 right-4 shrink-0 ${isVisible ? "opacity-100" : "opacity-0"}`}
> >
<Icon icon="material-symbols:close-rounded" /> <Icon icon="material-symbols:close-rounded" />
</button> </button>
<div <div
className={`overflow-hidden max-w-4xl h-[75vh] max-md:h-[55vh] transition-discrete duration-300 ${isVisible ? "scale-100 opacity-100" : "scale-90 opacity-0"}`} className={`overflow-hidden max-w-4xl h-[75vh] max-md:h-[55vh] transition-discrete duration-300 ${isVisible ? "scale-100 opacity-100" : "scale-90 opacity-0"}`}
ref={emblaRef} ref={emblaRef}
> >
<div className="flex h-full"> <div className="flex h-full">
{imagesMap.map((image, index) => ( {imagesMap.map((image, index) => (
<div key={index} className="flex-[0_0_100%] h-full flex items-center px-4"> <div key={index} className="flex-[0_0_100%] h-full flex items-center px-4">
<img <img
src={image} src={image}
alt={alt} alt={alt}
width={896} width={896}
height={896} height={896}
loading={Math.abs(index - selectedIndex) <= 1 ? "eager" : "lazy"} loading={Math.abs(index - selectedIndex) <= 1 ? "eager" : "lazy"}
className="max-w-full max-h-full object-contain drop-shadow-lg" className="max-w-full max-h-full object-contain drop-shadow-lg"
style={{ imageRendering: image.includes("qr-code") ? "pixelated" : "auto" }} style={{ imageRendering: image.includes("qr-code") ? "pixelated" : "auto" }}
/> />
</div> </div>
))} ))}
</div> </div>
</div> </div>
{images.length > 1 && ( {images.length > 1 && (
<> <>
{/* Carousel counter */} {/* Carousel counter */}
<div <div
className={`flex justify-center gap-2 bg-orange-300 w-15 font-semibold text-sm py-1 rounded-full border-2 border-orange-400 absolute top-4 left-4 transition-opacity duration-300 ${ className={`flex justify-center gap-2 bg-orange-300 w-15 font-semibold text-sm py-1 rounded-full border-2 border-orange-400 absolute top-4 left-4 transition-opacity duration-300 ${
isVisible ? "opacity-100" : "opacity-0" isVisible ? "opacity-100" : "opacity-0"
}`} }`}
> >
{selectedIndex + 1} / {images.length} {selectedIndex + 1} / {images.length}
</div> </div>
{/* Carousel buttons */} {/* Carousel buttons */}
{/* Prev button */} {/* Prev button */}
<button <button
type="button" type="button"
aria-label="Scroll Carousel Left" aria-label="Scroll Carousel Left"
onClick={() => emblaApi?.scrollPrev()} onClick={() => emblaApi?.scrollPrev()}
className={`absolute left-2 top-1/2 -translate-y-1/2 pill button p-0.5! aspect-square text-4xl transition-opacity duration-300 ${isVisible ? "opacity-100" : "opacity-0"}`} className={`absolute left-2 top-1/2 -translate-y-1/2 pill button p-0.5! aspect-square text-4xl transition-opacity duration-300 ${isVisible ? "opacity-100" : "opacity-0"}`}
> >
<Icon icon="ic:round-chevron-left" /> <Icon icon="ic:round-chevron-left" />
</button> </button>
{/* Next button */} {/* Next button */}
<button <button
type="button" type="button"
aria-label="Scroll Carousel Right" aria-label="Scroll Carousel Right"
onClick={() => emblaApi?.scrollNext()} onClick={() => emblaApi?.scrollNext()}
className={`absolute right-2 top-1/2 -translate-y-1/2 pill button p-0.5! aspect-square text-4xl transition-opacity duration-300 ${isVisible ? "opacity-100" : "opacity-0"}`} className={`absolute right-2 top-1/2 -translate-y-1/2 pill button p-0.5! aspect-square text-4xl transition-opacity duration-300 ${isVisible ? "opacity-100" : "opacity-0"}`}
> >
<Icon icon="ic:round-chevron-right" /> <Icon icon="ic:round-chevron-right" />
</button> </button>
{/* Carousel snaps */} {/* Carousel snaps */}
<div <div
className={`flex justify-center gap-2 bg-orange-300 p-2.5 rounded-full border-2 border-orange-400 absolute left-1/2 -translate-x-1/2 bottom-4 transition-opacity duration-300 ${ className={`flex justify-center gap-2 bg-orange-300 p-2.5 rounded-full border-2 border-orange-400 absolute left-1/2 -translate-x-1/2 bottom-4 transition-opacity duration-300 ${
isVisible ? "opacity-100" : "opacity-0" isVisible ? "opacity-100" : "opacity-0"
}`} }`}
> >
{scrollSnaps.map((_, index) => ( {scrollSnaps.map((_, index) => (
<button <button
key={index} key={index}
aria-label={`Go to ${index} in Carousel`} aria-label={`Go to ${index} in Carousel`}
onClick={() => emblaApi?.scrollTo(index)} onClick={() => emblaApi?.scrollTo(index)}
className={`size-2 cursor-pointer rounded-full transition-all duration-300 ${index === selectedIndex ? "bg-slate-800 w-8" : "bg-slate-800/30"}`} className={`size-2 cursor-pointer rounded-full transition-all duration-300 ${index === selectedIndex ? "bg-slate-800 w-8" : "bg-slate-800/30"}`}
/> />
))} ))}
</div> </div>
</> </>
)} )}
</div>, </div>,
document.body, document.body,
)} )}
</> </>
); );
} }

6
frontend/src/components/like-button.tsx
View file

@ -11,10 +11,10 @@ interface Props {
big?: boolean; big?: boolean;
} }
export default function LikeButton({ likes, isLiked, miiId, disabled, abbreviate, big }: Props) { export default function LikeButton({ likes, isLiked, disabled, abbreviate, big }: Props) {
const [isLikedState, setIsLikedState] = useState(isLiked); const [isLikedState, setIsLikedState] = useState(isLiked);
const [likesState, setLikesState] = useState(likes); const [likesState] = useState(likes);
const [isAnimating, setIsAnimating] = useState(false); const [isAnimating] = useState(false);
const onClick = async () => { const onClick = async () => {
// if (disabled) return; // if (disabled) return;

46
frontend/src/components/mii/author-buttons.tsx
View file

@ -1,23 +1,23 @@
import { Icon } from "@iconify/react"; import { Icon } from "@iconify/react";
import DeleteMiiButton from "./delete-mii-button"; import DeleteMiiButton from "./delete-mii-button";
interface Props { interface Props {
mii: any; mii: any;
} }
export default function AuthorButtons({ mii }: Props) { export default function AuthorButtons({ mii }: Props) {
// const session = useSession(); // const session = useSession();
// if (!session.data || (Number(session.data.user?.id) !== mii.userId && Number(session.data.user?.id) !== Number(import.meta.env.NEXT_PUBLIC_ADMIN_USER_ID))) // if (!session.data || (Number(session.data.user?.id) !== mii.userId && Number(session.data.user?.id) !== Number(import.meta.env.NEXT_PUBLIC_ADMIN_USER_ID)))
// return null; // return null;
return ( return (
<> <>
<a aria-label="Edit Mii" href={`/edit/${mii.id}`}> <a aria-label="Edit Mii" href={`/edit/${mii.id}`}>
<Icon icon="mdi:pencil" /> <Icon icon="mdi:pencil" />
<span>Edit</span> <span>Edit</span>
</a> </a>
<DeleteMiiButton miiId={mii.id} miiName={mii.name} likes={mii._count.likedBy ?? 0} inMiiPage /> <DeleteMiiButton miiId={mii.id} miiName={mii.name} likes={mii._count.likedBy ?? 0} inMiiPage />
</> </>
); );
} }

68
frontend/src/components/mii/dating-preferences.tsx
View file

@ -1,34 +1,34 @@
import { type ChangeEvent } from "react"; import { type ChangeEvent } from "react";
import { type MiiGender, type SwitchMiiInstructions } from "@tomodachi-share/shared"; import { type MiiGender, type SwitchMiiInstructions } from "@tomodachi-share/shared";
interface Props { interface Props {
data: SwitchMiiInstructions["datingPreferences"]; data: SwitchMiiInstructions["datingPreferences"];
onChecked?: (e: ChangeEvent<HTMLInputElement, HTMLInputElement>, gender: MiiGender) => void; onChecked?: (e: ChangeEvent<HTMLInputElement, HTMLInputElement>, gender: MiiGender) => void;
} }
const DATING_PREFERENCES = ["Male", "Female", "Nonbinary"]; const DATING_PREFERENCES = ["Male", "Female", "Nonbinary"];
export default function DatingPreferencesViewer({ data, onChecked }: Props) { export default function DatingPreferencesViewer({ data, onChecked }: Props) {
return ( return (
<div className="flex flex-col gap-1.5"> <div className="flex flex-col gap-1.5">
{DATING_PREFERENCES.map((gender) => { {DATING_PREFERENCES.map((gender) => {
const genderEnum = gender.toUpperCase() as MiiGender; const genderEnum = gender.toUpperCase() as MiiGender;
return ( return (
<div key={gender} className="flex gap-1.5"> <div key={gender} className="flex gap-1.5">
<input <input
type="checkbox" type="checkbox"
id={gender} id={gender}
className="checkbox" className="checkbox"
checked={data.includes(genderEnum)} checked={data.includes(genderEnum)}
{...(onChecked ? { onChange: (e: ChangeEvent<HTMLInputElement>) => onChecked(e, genderEnum) } : { readOnly: true })} {...(onChecked ? { onChange: (e: ChangeEvent<HTMLInputElement>) => onChecked(e, genderEnum) } : { readOnly: true })}
/> />
<label htmlFor={gender} className="text-sm select-none"> <label htmlFor={gender} className="text-sm select-none">
{gender} {gender}
</label> </label>
</div> </div>
); );
})} })}
</div> </div>
); );
} }

4
frontend/src/components/mii/delete-mii-button.tsx
View file

@ -20,7 +20,7 @@ export default function DeleteMiiButton({ miiId, miiName, likes, inMiiPage }: Pr
const [inputMiiName, setInputMiiName] = useState(""); const [inputMiiName, setInputMiiName] = useState("");
const handleSubmit = async () => { const handleSubmit = async () => {
const response = await fetch(`${import.meta.env.PUBLIC_API_URL}/api/mii/${miiId}/delete`, { method: "DELETE", credentials: "include" }); const response = await fetch(`${import.meta.env.VITE_API_URL}/api/mii/${miiId}/delete`, { method: "DELETE", credentials: "include" });
if (!response.ok) { if (!response.ok) {
const { error } = await response.json(); const { error } = await response.json();
setError(error); setError(error);
@ -83,7 +83,7 @@ export default function DeleteMiiButton({ miiId, miiName, likes, inMiiPage }: Pr
<p className="text-sm text-zinc-500">Are you sure? This will delete your Mii permanently. This action cannot be undone.</p> <p className="text-sm text-zinc-500">Are you sure? This will delete your Mii permanently. This action cannot be undone.</p>
<div className="bg-orange-100 rounded-xl border-2 border-orange-400 mt-4 flex overflow-hidden"> <div className="bg-orange-100 rounded-xl border-2 border-orange-400 mt-4 flex overflow-hidden">
<img src={`${import.meta.env.PUBLIC_API_URL}/mii/${miiId}/image?type=mii`} alt="mii image" width={128} height={128} /> <img src={`${import.meta.env.VITE_API_URL}/mii/${miiId}/image?type=mii`} alt="mii image" width={128} height={128} />
<div className="p-4 min-w-0"> <div className="p-4 min-w-0">
<p className="text-xl font-bold line-clamp-3 wrap-anywhere" title={miiName}> <p className="text-xl font-bold line-clamp-3 wrap-anywhere" title={miiName}>
{miiName} {miiName}

508
frontend/src/components/mii/instructions.tsx
View file

@ -1,254 +1,254 @@
import type { ReactNode } from "react"; import type { ReactNode } from "react";
import DatingPreferencesViewer from "./dating-preferences"; import DatingPreferencesViewer from "./dating-preferences";
import PersonalityViewer from "./personality-viewer"; import PersonalityViewer from "./personality-viewer";
import { type SwitchMiiInstructions, COLORS } from "@tomodachi-share/shared"; import { type SwitchMiiInstructions, COLORS } from "@tomodachi-share/shared";
interface Props { interface Props {
instructions: Partial<SwitchMiiInstructions>; instructions: Partial<SwitchMiiInstructions>;
} }
interface SectionProps { interface SectionProps {
name: string; name: string;
instructions: Partial<SwitchMiiInstructions[keyof SwitchMiiInstructions]>; instructions: Partial<SwitchMiiInstructions[keyof SwitchMiiInstructions]>;
children?: ReactNode; children?: ReactNode;
isSubSection?: boolean; isSubSection?: boolean;
} }
const ORDINAL_SUFFIXES: Record<string, string> = { const ORDINAL_SUFFIXES: Record<string, string> = {
one: "st", one: "st",
two: "nd", two: "nd",
few: "rd", few: "rd",
other: "th", other: "th",
}; };
const ordinalRules = new Intl.PluralRules("en-US", { type: "ordinal" }); const ordinalRules = new Intl.PluralRules("en-US", { type: "ordinal" });
function not(value: any) { function not(value: any) {
return value !== undefined && value !== null; return value !== undefined && value !== null;
} }
function numberValue(value: number, cutoff: number = 25) { function numberValue(value: number, cutoff: number = 25) {
return value === cutoff ? "0" : value > cutoff ? `+${value - cutoff}` : `${value - cutoff}`; return value === cutoff ? "0" : value > cutoff ? `+${value - cutoff}` : `${value - cutoff}`;
} }
function GridPosition({ index, cols = 5 }: { index: number; cols?: number }) { function GridPosition({ index, cols = 5 }: { index: number; cols?: number }) {
const row = Math.floor(index / cols) + 1; const row = Math.floor(index / cols) + 1;
const col = (index % cols) + 1; const col = (index % cols) + 1;
const rowSuffix = ORDINAL_SUFFIXES[ordinalRules.select(row)]; const rowSuffix = ORDINAL_SUFFIXES[ordinalRules.select(row)];
const colSuffix = ORDINAL_SUFFIXES[ordinalRules.select(col)]; const colSuffix = ORDINAL_SUFFIXES[ordinalRules.select(col)];
return `${row}${rowSuffix} row, ${col}${colSuffix} column`; return `${row}${rowSuffix} row, ${col}${colSuffix} column`;
} }
function ColorPosition({ color }: { color: number | undefined | null }) { function ColorPosition({ color }: { color: number | undefined | null }) {
if (color === undefined || color === null) return null; if (color === undefined || color === null) return null;
if (color <= 7) { if (color <= 7) {
return ( return (
<span className="flex items-center"> <span className="flex items-center">
<div className="size-5 rounded mr-1.5 shrink-0" style={{ backgroundColor: `#${COLORS[color]}` }}></div> <div className="size-5 rounded mr-1.5 shrink-0" style={{ backgroundColor: `#${COLORS[color]}` }}></div>
Color menu on left, <GridPosition index={color} cols={1} /> Color menu on left, <GridPosition index={color} cols={1} />
</span> </span>
); );
} }
if (color >= 108) { if (color >= 108) {
return ( return (
<span className="flex items-center"> <span className="flex items-center">
<div className="size-5 rounded mr-1.5 shrink-0" style={{ backgroundColor: `#${COLORS[color]}` }}></div> <div className="size-5 rounded mr-1.5 shrink-0" style={{ backgroundColor: `#${COLORS[color]}` }}></div>
Outside color menu, <GridPosition index={color - 108} cols={2} /> Outside color menu, <GridPosition index={color - 108} cols={2} />
</span> </span>
); );
} }
return ( return (
<span className="flex items-center"> <span className="flex items-center">
<div className="size-5 rounded mr-1.5 shrink-0" style={{ backgroundColor: `#${COLORS[color]}` }}></div> <div className="size-5 rounded mr-1.5 shrink-0" style={{ backgroundColor: `#${COLORS[color]}` }}></div>
Color menu on right, <GridPosition index={color - 8} cols={10} /> Color menu on right, <GridPosition index={color - 8} cols={10} />
</span> </span>
); );
} }
interface TableCellProps { interface TableCellProps {
label: string; label: string;
children: React.ReactNode; children: React.ReactNode;
} }
function TableCell({ label, children }: TableCellProps) { function TableCell({ label, children }: TableCellProps) {
return ( return (
<tr className={"border-b border-orange-300/50 last:border-0"}> <tr className={"border-b border-orange-300/50 last:border-0"}>
<td className={"py-0.5 pr-6 text-amber-700 font-semibold w-30 text-sm"}>{label}</td> <td className={"py-0.5 pr-6 text-amber-700 font-semibold w-30 text-sm"}>{label}</td>
<td className={"py-0.5 text-amber-950"}>{children}</td> <td className={"py-0.5 text-amber-950"}>{children}</td>
</tr> </tr>
); );
} }
function Section({ name, instructions, children, isSubSection }: SectionProps) { function Section({ name, instructions, children, isSubSection }: SectionProps) {
if (typeof instructions !== "object" || !instructions) return null; if (typeof instructions !== "object" || !instructions) return null;
const color = "color" in instructions ? instructions.color : undefined; const color = "color" in instructions ? instructions.color : undefined;
const height = "height" in instructions ? instructions.height : undefined; const height = "height" in instructions ? instructions.height : undefined;
const distance = "distance" in instructions ? instructions.distance : undefined; const distance = "distance" in instructions ? instructions.distance : undefined;
const rotation = "rotation" in instructions ? instructions.rotation : undefined; const rotation = "rotation" in instructions ? instructions.rotation : undefined;
const size = "size" in instructions ? instructions.size : undefined; const size = "size" in instructions ? instructions.size : undefined;
const stretch = "stretch" in instructions ? instructions.stretch : undefined; const stretch = "stretch" in instructions ? instructions.stretch : undefined;
return ( return (
<div className={`p-3 w-max ${isSubSection ? "not-first:mt-2 pt-0!" : "border-l-4 border-amber-400 bg-amber-100/50 rounded-r-lg py-2.5"}`}> <div className={`p-3 w-max ${isSubSection ? "not-first:mt-2 pt-0!" : "border-l-4 border-amber-400 bg-amber-100/50 rounded-r-lg py-2.5"}`}>
<h3 className="font-semibold text-xl text-amber-800 mb-1">{name}</h3> <h3 className="font-semibold text-xl text-amber-800 mb-1">{name}</h3>
<table className="w-full"> <table className="w-full">
<tbody> <tbody>
{not(color) && ( {not(color) && (
<TableCell label="Color"> <TableCell label="Color">
<ColorPosition color={color} /> <ColorPosition color={color} />
</TableCell> </TableCell>
)} )}
{not(height) && <TableCell label="Height">{numberValue(height!, 0)}</TableCell>} {not(height) && <TableCell label="Height">{numberValue(height!, 0)}</TableCell>}
{not(distance) && <TableCell label="Distance">{numberValue(distance!, 0)}</TableCell>} {not(distance) && <TableCell label="Distance">{numberValue(distance!, 0)}</TableCell>}
{not(rotation) && <TableCell label="Rotation">{numberValue(rotation!, 0)}</TableCell>} {not(rotation) && <TableCell label="Rotation">{numberValue(rotation!, 0)}</TableCell>}
{not(size) && <TableCell label="Size">{numberValue(size!, 0)}</TableCell>} {not(size) && <TableCell label="Size">{numberValue(size!, 0)}</TableCell>}
{not(stretch) && <TableCell label="Stretch">{numberValue(stretch!, 0)}</TableCell>} {not(stretch) && <TableCell label="Stretch">{numberValue(stretch!, 0)}</TableCell>}
{children} {children}
</tbody> </tbody>
</table> </table>
</div> </div>
); );
} }
export default function MiiInstructions({ instructions }: Props) { export default function MiiInstructions({ instructions }: Props) {
if (Object.keys(instructions).length === 0) return null; if (Object.keys(instructions).length === 0) return null;
const { head, hair, eyebrows, eyes, nose, lips, ears, glasses, other, height, weight, birthday, datingPreferences, voice, personality } = instructions; const { head, hair, eyebrows, eyes, nose, lips, ears, glasses, other, height, weight, birthday, datingPreferences, voice, personality } = instructions;
return ( return (
<> <>
{head && ( {head && (
<Section name="Head" instructions={head}> <Section name="Head" instructions={head}>
{not(head.skinColor) && ( {not(head.skinColor) && (
<TableCell label="Skin Color"> <TableCell label="Skin Color">
<ColorPosition color={head.skinColor} /> <ColorPosition color={head.skinColor} />
</TableCell> </TableCell>
)} )}
</Section> </Section>
)} )}
{hair && ( {hair && (
<Section name="Hair" instructions={hair}> <Section name="Hair" instructions={hair}>
{not(hair.subColor) && ( {not(hair.subColor) && (
<TableCell label="Sub Color"> <TableCell label="Sub Color">
<ColorPosition color={hair.subColor} /> <ColorPosition color={hair.subColor} />
</TableCell> </TableCell>
)} )}
{not(hair.subColor2) && ( {not(hair.subColor2) && (
<TableCell label="Sub Color (Back)"> <TableCell label="Sub Color (Back)">
<ColorPosition color={hair.subColor2} /> <ColorPosition color={hair.subColor2} />
</TableCell> </TableCell>
)} )}
{not(hair.style) && <TableCell label="Tying Style">{hair.style}</TableCell>} {not(hair.style) && <TableCell label="Tying Style">{hair.style}</TableCell>}
{not(hair.isFlipped) && <TableCell label="Flipped">{hair.isFlipped ? "Yes" : "No"}</TableCell>} {not(hair.isFlipped) && <TableCell label="Flipped">{hair.isFlipped ? "Yes" : "No"}</TableCell>}
</Section> </Section>
)} )}
{eyebrows && <Section name="Eyebrows" instructions={eyebrows}></Section>} {eyebrows && <Section name="Eyebrows" instructions={eyebrows}></Section>}
{eyes && ( {eyes && (
<Section name="Eyes" instructions={eyes}> <Section name="Eyes" instructions={eyes}>
<Section isSubSection name="Tab 1" instructions={eyes.main} /> <Section isSubSection name="Tab 1" instructions={eyes.main} />
<Section isSubSection name="Tab 2" instructions={eyes.eyelashesTop} /> <Section isSubSection name="Tab 2" instructions={eyes.eyelashesTop} />
<Section isSubSection name="Tab 3" instructions={eyes.eyelashesBottom} /> <Section isSubSection name="Tab 3" instructions={eyes.eyelashesBottom} />
<Section isSubSection name="Tab 4" instructions={eyes.eyelidTop} /> <Section isSubSection name="Tab 4" instructions={eyes.eyelidTop} />
<Section isSubSection name="Tab 5" instructions={eyes.eyelidBottom} /> <Section isSubSection name="Tab 5" instructions={eyes.eyelidBottom} />
<Section isSubSection name="Tab 6" instructions={eyes.eyeliner} /> <Section isSubSection name="Tab 6" instructions={eyes.eyeliner} />
<Section isSubSection name="Tab 7" instructions={eyes.pupil} /> <Section isSubSection name="Tab 7" instructions={eyes.pupil} />
</Section> </Section>
)} )}
{nose && <Section name="Nose" instructions={nose}></Section>} {nose && <Section name="Nose" instructions={nose}></Section>}
{lips && ( {lips && (
<Section name="Lips" instructions={lips}> <Section name="Lips" instructions={lips}>
{not(lips.hasLipstick) && <TableCell label="Lipstick">{lips.hasLipstick ? "Yes" : "No"}</TableCell>} {not(lips.hasLipstick) && <TableCell label="Lipstick">{lips.hasLipstick ? "Yes" : "No"}</TableCell>}
</Section> </Section>
)} )}
{ears && <Section name="Ears" instructions={ears}></Section>} {ears && <Section name="Ears" instructions={ears}></Section>}
{glasses && ( {glasses && (
<Section name="Glasses" instructions={glasses}> <Section name="Glasses" instructions={glasses}>
{not(glasses.ringColor) && ( {not(glasses.ringColor) && (
<TableCell label="Ring Color"> <TableCell label="Ring Color">
<ColorPosition color={glasses.ringColor} /> <ColorPosition color={glasses.ringColor} />
</TableCell> </TableCell>
)} )}
{not(glasses.shadesColor) && ( {not(glasses.shadesColor) && (
<TableCell label="Shades Color"> <TableCell label="Shades Color">
<ColorPosition color={glasses.shadesColor} /> <ColorPosition color={glasses.shadesColor} />
</TableCell> </TableCell>
)} )}
</Section> </Section>
)} )}
{other && ( {other && (
<Section name="Other" instructions={other}> <Section name="Other" instructions={other}>
<Section isSubSection name="Tab 1" instructions={other.wrinkles1} /> <Section isSubSection name="Tab 1" instructions={other.wrinkles1} />
<Section isSubSection name="Tab 2" instructions={other.wrinkles2} /> <Section isSubSection name="Tab 2" instructions={other.wrinkles2} />
<Section isSubSection name="Tab 3" instructions={other.beard} /> <Section isSubSection name="Tab 3" instructions={other.beard} />
<Section isSubSection name="Tab 4" instructions={other.moustache}> <Section isSubSection name="Tab 4" instructions={other.moustache}>
{other.moustache && other.moustache.isFlipped && <TableCell label="Flipped">{other.moustache.isFlipped ? "Yes" : "No"}</TableCell>} {other.moustache && other.moustache.isFlipped && <TableCell label="Flipped">{other.moustache.isFlipped ? "Yes" : "No"}</TableCell>}
</Section> </Section>
<Section isSubSection name="Tab 5" instructions={other.goatee} /> <Section isSubSection name="Tab 5" instructions={other.goatee} />
<Section isSubSection name="Tab 6" instructions={other.mole} /> <Section isSubSection name="Tab 6" instructions={other.mole} />
<Section isSubSection name="Tab 7" instructions={other.eyeShadow} /> <Section isSubSection name="Tab 7" instructions={other.eyeShadow} />
<Section isSubSection name="Tab 8" instructions={other.blush} /> <Section isSubSection name="Tab 8" instructions={other.blush} />
</Section> </Section>
)} )}
{(height || weight || datingPreferences || voice || personality) && ( {(height || weight || datingPreferences || voice || personality) && (
<div className="p-3 border-l-4 border-amber-400 bg-amber-100/50 rounded-r-lg py-2.5 text-amber-950 w-max"> <div className="p-3 border-l-4 border-amber-400 bg-amber-100/50 rounded-r-lg py-2.5 text-amber-950 w-max">
<h3 className="font-semibold text-xl text-amber-800 mb-1">Misc</h3> <h3 className="font-semibold text-xl text-amber-800 mb-1">Misc</h3>
<table className="w-full"> <table className="w-full">
<tbody> <tbody>
{not(height) && <TableCell label="Height">{numberValue(height!, 64)}</TableCell>} {not(height) && <TableCell label="Height">{numberValue(height!, 64)}</TableCell>}
{not(weight) && <TableCell label="Weight">{numberValue(weight!, 64)}</TableCell>} {not(weight) && <TableCell label="Weight">{numberValue(weight!, 64)}</TableCell>}
</tbody> </tbody>
</table> </table>
{birthday && ( {birthday && (
<div className="pl-2 not-nth-2:mt-4"> <div className="pl-2 not-nth-2:mt-4">
<h4 className="font-semibold text-xl text-amber-800 mb-1">Birthday</h4> <h4 className="font-semibold text-xl text-amber-800 mb-1">Birthday</h4>
<table className="w-full"> <table className="w-full">
<tbody> <tbody>
{not(birthday.day) && <TableCell label="Day">{birthday.day}</TableCell>} {not(birthday.day) && <TableCell label="Day">{birthday.day}</TableCell>}
{not(birthday.month) && <TableCell label="Month">{birthday.month}</TableCell>} {not(birthday.month) && <TableCell label="Month">{birthday.month}</TableCell>}
{not(birthday.age) && <TableCell label="Age">{birthday.age}</TableCell>} {not(birthday.age) && <TableCell label="Age">{birthday.age}</TableCell>}
{not(birthday.dontAge) && <TableCell label="Don't Age">{birthday.dontAge ? "Yes" : "No"}</TableCell>} {not(birthday.dontAge) && <TableCell label="Don't Age">{birthday.dontAge ? "Yes" : "No"}</TableCell>}
</tbody> </tbody>
</table> </table>
</div> </div>
)} )}
{voice && ( {voice && (
<div className="pl-2 not-nth-2:mt-4"> <div className="pl-2 not-nth-2:mt-4">
<h4 className="font-semibold text-xl text-amber-800 mb-1">Voice</h4> <h4 className="font-semibold text-xl text-amber-800 mb-1">Voice</h4>
<table className="w-full"> <table className="w-full">
<tbody> <tbody>
{not(voice.speed) && <TableCell label="Speed">{numberValue(voice.speed!, 25)}</TableCell>} {not(voice.speed) && <TableCell label="Speed">{numberValue(voice.speed!, 25)}</TableCell>}
{not(voice.pitch) && <TableCell label="Pitch">{numberValue(voice.pitch!, 25)}</TableCell>} {not(voice.pitch) && <TableCell label="Pitch">{numberValue(voice.pitch!, 25)}</TableCell>}
{not(voice.depth) && <TableCell label="Depth">{numberValue(voice.depth!, 25)}</TableCell>} {not(voice.depth) && <TableCell label="Depth">{numberValue(voice.depth!, 25)}</TableCell>}
{not(voice.delivery) && <TableCell label="Delivery">{numberValue(voice.delivery!, 25)}</TableCell>} {not(voice.delivery) && <TableCell label="Delivery">{numberValue(voice.delivery!, 25)}</TableCell>}
{not(voice.tone) && <TableCell label="Tone">{voice.tone}</TableCell>} {not(voice.tone) && <TableCell label="Tone">{voice.tone}</TableCell>}
</tbody> </tbody>
</table> </table>
</div> </div>
)} )}
{datingPreferences && ( {datingPreferences && (
<div className="pl-2 not-nth-2:mt-4"> <div className="pl-2 not-nth-2:mt-4">
<h4 className="font-semibold text-xl text-amber-800 mb-1">Dating Preferences</h4> <h4 className="font-semibold text-xl text-amber-800 mb-1">Dating Preferences</h4>
<div className="w-min"> <div className="w-min">
<DatingPreferencesViewer data={datingPreferences} /> <DatingPreferencesViewer data={datingPreferences} />
</div> </div>
</div> </div>
)} )}
{personality && ( {personality && (
<div className="pl-2 not-nth-2:mt-4"> <div className="pl-2 not-nth-2:mt-4">
<h4 className="font-semibold text-xl text-amber-800 mb-1">Personality</h4> <h4 className="font-semibold text-xl text-amber-800 mb-1">Personality</h4>
<div className="w-min"> <div className="w-min">
<PersonalityViewer data={personality} /> <PersonalityViewer data={personality} />
</div> </div>
</div> </div>
)} )}
</div> </div>
)} )}
</> </>
); );
} }

264
frontend/src/components/mii/list/filter-menu.tsx
View file

@ -1,132 +1,132 @@
import { useEffect, useMemo, useState } from "react"; import { useEffect, useMemo, useState } from "react";
import { Icon } from "@iconify/react"; import { Icon } from "@iconify/react";
import PlatformSelect from "./platform-select"; import PlatformSelect from "./platform-select";
import TagFilter from "./tag-filter"; import TagFilter from "./tag-filter";
import GenderSelect from "./gender-select"; import GenderSelect from "./gender-select";
import OtherFilters from "./other-filters"; import OtherFilters from "./other-filters";
import MakeupSelect from "./makeup-select"; import MakeupSelect from "./makeup-select";
import type { MiiGender, MiiMakeup, MiiPlatform } from "@tomodachi-share/shared"; import type { MiiGender, MiiMakeup, MiiPlatform } from "@tomodachi-share/shared";
export default function FilterMenu() { export default function FilterMenu() {
const searchParams = new URLSearchParams(window.location.search); const searchParams = new URLSearchParams(window.location.search);
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
const [isVisible, setIsVisible] = useState(false); const [isVisible, setIsVisible] = useState(false);
const platform = (searchParams.get("platform") as MiiPlatform) || undefined; const platform = (searchParams.get("platform") as MiiPlatform) || undefined;
const gender = (searchParams.get("gender") as MiiGender) || undefined; const gender = (searchParams.get("gender") as MiiGender) || undefined;
const makeup = (searchParams.get("makeup") as MiiMakeup) || undefined; const makeup = (searchParams.get("makeup") as MiiMakeup) || undefined;
const rawTags = searchParams.get("tags") || ""; const rawTags = searchParams.get("tags") || "";
const rawExclude = searchParams.get("exclude") || ""; const rawExclude = searchParams.get("exclude") || "";
const allowCopying = (searchParams.get("allowCopying") as unknown as boolean) || false; const allowCopying = (searchParams.get("allowCopying") as unknown as boolean) || false;
const tags = useMemo( const tags = useMemo(
() => () =>
rawTags rawTags
? rawTags ? rawTags
.split(",") .split(",")
.map((tag) => tag.trim()) .map((tag) => tag.trim())
.filter((tag) => tag.length > 0) .filter((tag) => tag.length > 0)
: [], : [],
[rawTags], [rawTags],
); );
const exclude = useMemo( const exclude = useMemo(
() => () =>
rawExclude rawExclude
? rawExclude ? rawExclude
.split(",") .split(",")
.map((tag) => tag.trim()) .map((tag) => tag.trim())
.filter((tag) => tag.length > 0) .filter((tag) => tag.length > 0)
: [], : [],
[rawExclude], [rawExclude],
); );
const [filterCount, setFilterCount] = useState(tags.length); const [filterCount, setFilterCount] = useState(tags.length);
// Filter menu button handler // Filter menu button handler
const handleClick = () => { const handleClick = () => {
if (!isOpen) { if (!isOpen) {
setIsOpen(true); setIsOpen(true);
// slight delay to trigger animation // slight delay to trigger animation
setTimeout(() => setIsVisible(true), 10); setTimeout(() => setIsVisible(true), 10);
} else { } else {
setIsVisible(false); setIsVisible(false);
setTimeout(() => { setTimeout(() => {
setIsOpen(false); setIsOpen(false);
}, 200); }, 200);
} }
}; };
// Count all active filters // Count all active filters
useEffect(() => { useEffect(() => {
let count = tags.length + exclude.length; let count = tags.length + exclude.length;
if (platform) count++; if (platform) count++;
if (gender) count++; if (gender) count++;
if (allowCopying) count++; if (allowCopying) count++;
if (makeup) count++; if (makeup) count++;
setFilterCount(count); setFilterCount(count);
}, [tags, exclude, platform, gender, allowCopying, makeup]); }, [tags, exclude, platform, gender, allowCopying, makeup]);
return ( return (
<div className="relative"> <div className="relative">
<button className="pill button gap-2" onClick={handleClick}> <button className="pill button gap-2" onClick={handleClick}>
<Icon icon="mdi:filter" className="text-xl" /> <Icon icon="mdi:filter" className="text-xl" />
Filter Filter
<span className="w-5">({filterCount})</span> <span className="w-5">({filterCount})</span>
</button> </button>
{isOpen && ( {isOpen && (
<div <div
className={`absolute w-80 left-0 top-full mt-8 z-40 flex flex-col items-center bg-orange-50 className={`absolute w-80 left-0 top-full mt-8 z-40 flex flex-col items-center bg-orange-50
border-2 border-amber-500 rounded-2xl shadow-lg p-4 transition-discrete duration-200 ${isVisible ? "translate-y-0 opacity-100" : "-translate-y-2 opacity-0"}`} border-2 border-amber-500 rounded-2xl shadow-lg p-4 transition-discrete duration-200 ${isVisible ? "translate-y-0 opacity-100" : "-translate-y-2 opacity-0"}`}
> >
{/* Arrow */} {/* Arrow */}
<div className="absolute bottom-full left-1/6 -translate-x-1/2 size-0 border-8 border-transparent border-b-amber-500"></div> <div className="absolute bottom-full left-1/6 -translate-x-1/2 size-0 border-8 border-transparent border-b-amber-500"></div>
<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium w-full mb-2"> <div className="flex items-center gap-4 text-zinc-500 text-sm font-medium w-full mb-2">
<hr className="grow border-zinc-300" /> <hr className="grow border-zinc-300" />
<span>Platform</span> <span>Platform</span>
<hr className="grow border-zinc-300" /> <hr className="grow border-zinc-300" />
</div> </div>
<PlatformSelect /> <PlatformSelect />
<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium w-full mt-2 mb-1"> <div className="flex items-center gap-4 text-zinc-500 text-sm font-medium w-full mt-2 mb-1">
<hr className="grow border-zinc-300" /> <hr className="grow border-zinc-300" />
<span>Gender</span> <span>Gender</span>
<hr className="grow border-zinc-300" /> <hr className="grow border-zinc-300" />
</div> </div>
<GenderSelect /> <GenderSelect />
<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium w-full mt-2 mb-2"> <div className="flex items-center gap-4 text-zinc-500 text-sm font-medium w-full mt-2 mb-2">
<hr className="grow border-zinc-300" /> <hr className="grow border-zinc-300" />
<span>Tags Include</span> <span>Tags Include</span>
<hr className="grow border-zinc-300" /> <hr className="grow border-zinc-300" />
</div> </div>
<TagFilter /> <TagFilter />
<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium w-full mt-2 mb-2"> <div className="flex items-center gap-4 text-zinc-500 text-sm font-medium w-full mt-2 mb-2">
<hr className="grow border-zinc-300" /> <hr className="grow border-zinc-300" />
<span>Tags Exclude</span> <span>Tags Exclude</span>
<hr className="grow border-zinc-300" /> <hr className="grow border-zinc-300" />
</div> </div>
<TagFilter isExclude /> <TagFilter isExclude />
{platform !== "THREE_DS" && ( {platform !== "THREE_DS" && (
<> <>
<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium w-full mt-2 mb-1"> <div className="flex items-center gap-4 text-zinc-500 text-sm font-medium w-full mt-2 mb-1">
<hr className="grow border-zinc-300" /> <hr className="grow border-zinc-300" />
<span>Face Paint</span> <span>Face Paint</span>
<hr className="grow border-zinc-300" /> <hr className="grow border-zinc-300" />
</div> </div>
<MakeupSelect /> <MakeupSelect />
</> </>
)} )}
<OtherFilters /> <OtherFilters />
</div> </div>
)} )}
</div> </div>
); );
} }

144
frontend/src/components/mii/list/gender-select.tsx
View file

@ -1,72 +1,72 @@
import { useState, useTransition } from "react"; import { useState, useTransition } from "react";
import { Icon } from "@iconify/react"; import { Icon } from "@iconify/react";
import type { MiiGender, MiiPlatform } from "@tomodachi-share/shared"; import type { MiiGender, MiiPlatform } from "@tomodachi-share/shared";
export default function GenderSelect() { export default function GenderSelect() {
const searchParams = new URLSearchParams(window.location.search); const searchParams = new URLSearchParams(window.location.search);
const [, startTransition] = useTransition(); const [, startTransition] = useTransition();
const [selected, setSelected] = useState<MiiGender | null>((searchParams.get("gender") as MiiGender) ?? null); const [selected, setSelected] = useState<MiiGender | null>((searchParams.get("gender") as MiiGender) ?? null);
const platform = (searchParams.get("platform") as MiiPlatform) || undefined; const platform = (searchParams.get("platform") as MiiPlatform) || undefined;
const handleClick = (gender: MiiGender) => { const handleClick = (gender: MiiGender) => {
const filter = selected === gender ? null : gender; const filter = selected === gender ? null : gender;
setSelected(filter); setSelected(filter);
const params = new URLSearchParams(searchParams); const params = new URLSearchParams(searchParams);
params.set("page", "1"); params.set("page", "1");
if (filter) { if (filter) {
params.set("gender", filter); params.set("gender", filter);
} else { } else {
params.delete("gender"); params.delete("gender");
} }
startTransition(() => { startTransition(() => {
// router.push(`?${params.toString()}`, { scroll: false }); // router.push(`?${params.toString()}`, { scroll: false });
window.location.href = `?${params.toString()}`; window.location.href = `?${params.toString()}`;
}); });
}; };
return ( return (
<div className="flex gap-0.5 w-fit"> <div className="flex gap-0.5 w-fit">
<button <button
onClick={() => handleClick("MALE")} onClick={() => handleClick("MALE")}
aria-label="Filter for Male Miis" aria-label="Filter for Male Miis"
data-tooltip-span data-tooltip-span
className={`cursor-pointer rounded-xl flex justify-center items-center size-13 text-5xl border-2 transition-all ${ className={`cursor-pointer rounded-xl flex justify-center items-center size-13 text-5xl border-2 transition-all ${
selected === "MALE" ? "bg-blue-100 border-blue-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400" selected === "MALE" ? "bg-blue-100 border-blue-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
}`} }`}
> >
<div className="tooltip bg-blue-400! border-blue-400! before:border-b-blue-400!">Male</div> <div className="tooltip bg-blue-400! border-blue-400! before:border-b-blue-400!">Male</div>
<Icon icon="foundation:male" className="text-blue-400" /> <Icon icon="foundation:male" className="text-blue-400" />
</button> </button>
<button <button
onClick={() => handleClick("FEMALE")} onClick={() => handleClick("FEMALE")}
aria-label="Filter for Female Miis" aria-label="Filter for Female Miis"
data-tooltip-span data-tooltip-span
className={`cursor-pointer rounded-xl flex justify-center items-center size-13 text-5xl border-2 transition-all ${ className={`cursor-pointer rounded-xl flex justify-center items-center size-13 text-5xl border-2 transition-all ${
selected === "FEMALE" ? "bg-pink-100 border-pink-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400" selected === "FEMALE" ? "bg-pink-100 border-pink-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
}`} }`}
> >
<div className="tooltip bg-pink-400! border-pink-400! before:border-b-pink-400!">Female</div> <div className="tooltip bg-pink-400! border-pink-400! before:border-b-pink-400!">Female</div>
<Icon icon="foundation:female" className="text-pink-400" /> <Icon icon="foundation:female" className="text-pink-400" />
</button> </button>
{platform !== "THREE_DS" && ( {platform !== "THREE_DS" && (
<button <button
onClick={() => handleClick("NONBINARY")} onClick={() => handleClick("NONBINARY")}
aria-label="Filter for Nonbinary Miis" aria-label="Filter for Nonbinary Miis"
data-tooltip-span data-tooltip-span
className={`cursor-pointer rounded-xl flex justify-center items-center size-13 text-5xl border-2 transition-all ${ className={`cursor-pointer rounded-xl flex justify-center items-center size-13 text-5xl border-2 transition-all ${
selected === "NONBINARY" ? "bg-purple-100 border-purple-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400" selected === "NONBINARY" ? "bg-purple-100 border-purple-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
}`} }`}
> >
<div className="tooltip bg-purple-400! border-purple-400! before:border-b-purple-400!">Nonbinary</div> <div className="tooltip bg-purple-400! border-purple-400! before:border-b-purple-400!">Nonbinary</div>
<Icon icon="mdi:gender-non-binary" className="text-purple-400" /> <Icon icon="mdi:gender-non-binary" className="text-purple-400" />
</button> </button>
)} )}
</div> </div>
); );
} }

334
frontend/src/components/mii/list/index.tsx
View file

@ -1,198 +1,184 @@
import crypto from "crypto"; // import crypto from "crypto";
import seedrandom from "seedrandom"; // import seedrandom from "seedrandom";
import { searchSchema } from "@tomodachi-share/shared/schemas"; // import { searchSchema } from "@tomodachi-share/shared/schemas";
import SortSelect from "./sort-select"; // import SortSelect from "./sort-select";
import Pagination from "./pagination"; // import Pagination from "./pagination";
import FilterMenu from "./filter-menu"; // import FilterMenu from "./filter-menu";
import MiiGrid from "./mii-grid"; // import MiiGrid from "./mii-grid";
interface Props { // interface Props {
searchParams: URLSearchParams; // searchParams: URLSearchParams;
userId?: number; // Profiles // userId?: number; // Profiles
parentPage?: "likes" | "admin"; // parentPage?: "likes" | "admin";
} // }
export default async function MiiList({ searchParams, userId, parentPage }: Props) { // export default async function MiiList({ searchParams, userId, parentPage }: Props) {
const session = await auth(); // const session = await auth();
const parsed = searchSchema.safeParse(searchParams); // const parsed = searchSchema.safeParse(searchParams);
if (!parsed.success) return <h1>{parsed.error.issues[0].message}</h1>; // if (!parsed.success) return <h1>{parsed.error.issues[0].message}</h1>;
const { q: query, sort, tags, exclude, platform, gender, makeup, allowCopying, quarantined, page = 1, limit = 24, seed } = parsed.data; // const { q: query, sort, tags, exclude, platform, gender, makeup, allowCopying, quarantined, page = 1, limit = 24, seed } = parsed.data;
// My Likes page // // My Likes page
let miiIdsLiked: number[] | undefined = undefined; // let miiIdsLiked: number[] | undefined = undefined;
if (parentPage === "likes" && session?.user?.id) { // if (parentPage === "likes" && session?.user?.id) {
const likedMiis = await prisma.like.findMany({ // const likedMiis = await prisma.like.findMany({
where: { userId: Number(session.user.id) }, // where: { userId: Number(session.user.id) },
select: { miiId: true }, // select: { miiId: true },
}); // });
miiIdsLiked = likedMiis.map((like) => like.miiId); // miiIdsLiked = likedMiis.map((like) => like.miiId);
} // }
const where: Prisma.MiiWhereInput = { // const where: Prisma.MiiWhereInput = {
// In queue logic // // In queue logic
...(parentPage === "admin" // ...(parentPage === "admin"
? { in_queue: true } // Only show queued Miis // ? { in_queue: true } // Only show queued Miis
: userId // : userId
? { // ? {
// Include queued Miis if user is on their profile // // Include queued Miis if user is on their profile
...(Number(session?.user?.id) === userId ? {} : { in_queue: false }), // ...(Number(session?.user?.id) === userId ? {} : { in_queue: false }),
userId, // userId,
} // }
: { // : {
// Don't show queued Miis on main page // // Don't show queued Miis on main page
in_queue: false, // in_queue: false,
}), // }),
// Only show liked miis on likes page // // Only show liked miis on likes page
...(parentPage === "likes" && miiIdsLiked && { id: { in: miiIdsLiked } }), // ...(parentPage === "likes" && miiIdsLiked && { id: { in: miiIdsLiked } }),
// Searching // // Searching
...(query && { // ...(query && {
OR: [{ name: { contains: query, mode: "insensitive" } }, { tags: { has: query } }, { description: { contains: query, mode: "insensitive" } }], // OR: [{ name: { contains: query, mode: "insensitive" } }, { tags: { has: query } }, { description: { contains: query, mode: "insensitive" } }],
}), // }),
// Tag filtering // // Tag filtering
...(tags && tags.length > 0 && { tags: { hasEvery: tags } }), // ...(tags && tags.length > 0 && { tags: { hasEvery: tags } }),
...(exclude && exclude.length > 0 && { NOT: { tags: { hasSome: exclude } } }), // ...(exclude && exclude.length > 0 && { NOT: { tags: { hasSome: exclude } } }),
// Platform // // Platform
...(platform && { platform: { equals: platform } }), // ...(platform && { platform: { equals: platform } }),
// Gender // // Gender
...(gender && { gender: { equals: gender } }), // ...(gender && { gender: { equals: gender } }),
// Allow Copying // // Allow Copying
...(allowCopying && { allowedCopying: true }), // ...(allowCopying && { allowedCopying: true }),
// Makeup // // Makeup
...(makeup && { makeup: { equals: makeup } }), // ...(makeup && { makeup: { equals: makeup } }),
// Quarantined // // Quarantined
...(!quarantined && !userId && { quarantined: false }), // ...(!quarantined && !userId && { quarantined: false }),
}; // };
const select: Prisma.MiiSelect = { // const select: Prisma.MiiSelect = {
id: true, // id: true,
// Don't show when userId is specified // // Don't show when userId is specified
...(!userId && { // ...(!userId && {
user: { // user: {
select: { // select: {
id: true, // id: true,
name: true, // name: true,
}, // },
}, // },
}), // }),
platform: true, // platform: true,
name: true, // name: true,
imageCount: true, // imageCount: true,
tags: true, // tags: true,
createdAt: true, // createdAt: true,
gender: true, // gender: true,
makeup: true, // makeup: true,
allowedCopying: true, // allowedCopying: true,
quarantined: true, // quarantined: true,
in_queue: true, // in_queue: true,
// Mii liked check // // Mii liked check
...(session?.user?.id && { // ...(session?.user?.id && {
likedBy: { // likedBy: {
where: { userId: Number(session.user.id) }, // where: { userId: Number(session.user.id) },
select: { userId: true }, // select: { userId: true },
}, // },
}), // }),
// Like count // // Like count
_count: { // _count: {
select: { likedBy: true }, // select: { likedBy: true },
}, // },
}; // };
const skip = (page - 1) * limit; // const skip = (page - 1) * limit;
let totalCount: number; // let totalCount: number;
let filteredCount: number; // let miis: Prisma.MiiGetPayload<{ select: typeof select }>[];
let miis: Prisma.MiiGetPayload<{ select: typeof select }>[];
if (sort === "random") { // if (sort === "random") {
// Get all IDs that match the where conditions // // Get all IDs that match the where conditions
const matchingIds = await prisma.mii.findMany({ // const matchingIds = await prisma.mii.findMany({
where, // where,
select: { id: true }, // select: { id: true },
}); // });
totalCount = matchingIds.length; // totalCount = matchingIds.length;
filteredCount = Math.max(0, Math.min(limit, totalCount - skip));
if (matchingIds.length === 0) return; // if (matchingIds.length === 0) return;
// Use seed for consistent random results // // Use seed for consistent random results
const randomSeed = seed || crypto.randomInt(0, 1_000_000_000); // const randomSeed = seed || crypto.randomInt(0, 1_000_000_000);
const rng = seedrandom(randomSeed.toString()); // const rng = seedrandom(randomSeed.toString());
// Randomize all IDs using the Durstenfeld algorithm // // Randomize all IDs using the Durstenfeld algorithm
for (let i = matchingIds.length - 1; i > 0; i--) { // for (let i = matchingIds.length - 1; i > 0; i--) {
const j = Math.floor(rng() * (i + 1)); // const j = Math.floor(rng() * (i + 1));
[matchingIds[i], matchingIds[j]] = [matchingIds[j], matchingIds[i]]; // [matchingIds[i], matchingIds[j]] = [matchingIds[j], matchingIds[i]];
} // }
// Convert to number[] array // // Convert to number[] array
const selectedIds = matchingIds.slice(skip, skip + limit).map((i) => i.id); // const selectedIds = matchingIds.slice(skip, skip + limit).map((i) => i.id);
miis = await prisma.mii.findMany({ // miis = await prisma.mii.findMany({
where: { // where: {
id: { in: selectedIds }, // id: { in: selectedIds },
}, // },
select, // select,
}); // });
} else { // } else {
// Sorting by likes, newest, or oldest // // Sorting by likes, newest, or oldest
let orderBy: Prisma.MiiOrderByWithRelationInput[]; // let orderBy: Prisma.MiiOrderByWithRelationInput[];
if (sort === "likes") { // if (sort === "likes") {
orderBy = [{ likedBy: { _count: "desc" } }, { name: "asc" }]; // orderBy = [{ likedBy: { _count: "desc" } }, { name: "asc" }];
} else if (sort === "oldest") { // } else if (sort === "oldest") {
orderBy = [{ createdAt: "asc" }, { name: "asc" }]; // orderBy = [{ createdAt: "asc" }, { name: "asc" }];
} else { // } else {
// default to newest // // default to newest
orderBy = [{ createdAt: "desc" }, { name: "asc" }]; // orderBy = [{ createdAt: "desc" }, { name: "asc" }];
} // }
[totalCount, filteredCount, miis] = await Promise.all([ // [totalCount, miis] = await Promise.all([
prisma.mii.count({ where: { ...where, userId } }), // prisma.mii.count({ where: { ...where, userId } }),
prisma.mii.count({ where, skip, take: limit }), // prisma.mii.findMany({
prisma.mii.findMany({ // where,
where, // orderBy,
orderBy, // select,
select, // skip,
skip: (page - 1) * limit, // take: limit,
take: limit, // }),
}), // ]);
]); // }
}
const lastPage = Math.ceil(totalCount / limit); // const lastPage = Math.ceil(totalCount / limit);
return ( // return (
<div className="w-full"> // <div className="w-full">
<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg p-4 flex justify-between items-center gap-2 mb-2 max-md:flex-col"> // <div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg p-4 flex justify-between items-center gap-2 mb-2 max-md:flex-col">
<div className="flex items-center gap-2"> // <div className="flex items-center gap-2">
{totalCount == filteredCount ? ( // <span className="text-2xl font-bold text-amber-900">{totalCount}</span>
<> // <span className="text-lg text-amber-700">{totalCount === 1 ? "Mii" : "Miis"}</span>
<span className="text-2xl font-bold text-amber-900">{totalCount}</span> // </div>
<span className="text-lg text-amber-700">{totalCount === 1 ? "Mii" : "Miis"}</span>
</>
) : (
<>
<span className="text-2xl font-bold text-amber-900">{filteredCount}</span>
<span className="text-sm text-amber-700">of</span>
<span className="text-lg font-semibold text-amber-800">{totalCount}</span>
<span className="text-lg text-amber-700">Miis</span>
</>
)}
</div>
<div className="relative flex items-center justify-end gap-2 w-full md:max-w-2/3 max-md:justify-center"> // <div className="relative flex items-center justify-end gap-2 w-full md:max-w-2/3 max-md:justify-center">
<FilterMenu /> // <FilterMenu />
<SortSelect /> // <SortSelect />
</div> // </div>
</div> // </div>
<MiiGrid miis={miis} userId={userId} parentPage={parentPage} /> // <MiiGrid miis={miis} userId={userId} parentPage={parentPage} />
<Pagination lastPage={lastPage} /> // <Pagination lastPage={lastPage} />
</div> // </div>
); // );
} // }

144
frontend/src/components/mii/list/makeup-select.tsx
View file

@ -1,72 +1,72 @@
import { useState, useTransition } from "react"; import { useState, useTransition } from "react";
import { Icon } from "@iconify/react"; import { Icon } from "@iconify/react";
import type { MiiMakeup } from "@tomodachi-share/shared"; import type { MiiMakeup } from "@tomodachi-share/shared";
export default function MakeupSelect() { export default function MakeupSelect() {
const searchParams = new URLSearchParams(window.location.search); const searchParams = new URLSearchParams(window.location.search);
const [, startTransition] = useTransition(); const [, startTransition] = useTransition();
const [selected, setSelected] = useState<MiiMakeup | null>((searchParams.get("makeup") as MiiMakeup) ?? null); const [selected, setSelected] = useState<MiiMakeup | null>((searchParams.get("makeup") as MiiMakeup) ?? null);
const handleClick = (makeup: MiiMakeup) => { const handleClick = (makeup: MiiMakeup) => {
const filter = selected === makeup ? null : makeup; const filter = selected === makeup ? null : makeup;
setSelected(filter); setSelected(filter);
const params = new URLSearchParams(searchParams); const params = new URLSearchParams(searchParams);
params.set("page", "1"); params.set("page", "1");
if (filter) { if (filter) {
params.set("makeup", filter); params.set("makeup", filter);
} else { } else {
params.delete("makeup"); params.delete("makeup");
} }
startTransition(() => { startTransition(() => {
// router.push(`?${params.toString()}`, { scroll: false }); // router.push(`?${params.toString()}`, { scroll: false });
window.location.href = `?${params.toString()}`; window.location.href = `?${params.toString()}`;
}); });
}; };
return ( return (
<div className="flex gap-0.5 w-fit"> <div className="flex gap-0.5 w-fit">
{/* Full Makeup */} {/* Full Makeup */}
<button <button
onClick={() => handleClick("FULL")} onClick={() => handleClick("FULL")}
aria-label="Filter for Full Face Paint" aria-label="Filter for Full Face Paint"
data-tooltip-span data-tooltip-span
className={`cursor-pointer rounded-xl flex justify-center items-center size-13 text-5xl border-2 transition-all ${ className={`cursor-pointer rounded-xl flex justify-center items-center size-13 text-5xl border-2 transition-all ${
selected === "FULL" ? "bg-pink-100 border-pink-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400" selected === "FULL" ? "bg-pink-100 border-pink-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
}`} }`}
> >
<div className="tooltip bg-pink-400! border-pink-400! before:border-b-pink-400!">Full Face Paint</div> <div className="tooltip bg-pink-400! border-pink-400! before:border-b-pink-400!">Full Face Paint</div>
<Icon icon="mdi:palette" className="text-pink-400" /> <Icon icon="mdi:palette" className="text-pink-400" />
</button> </button>
{/* Partial Makeup */} {/* Partial Makeup */}
<button <button
onClick={() => handleClick("PARTIAL")} onClick={() => handleClick("PARTIAL")}
aria-label="Filter for Partial Face Paint" aria-label="Filter for Partial Face Paint"
data-tooltip-span data-tooltip-span
className={`cursor-pointer rounded-xl flex justify-center items-center size-13 text-5xl border-2 transition-all ${ className={`cursor-pointer rounded-xl flex justify-center items-center size-13 text-5xl border-2 transition-all ${
selected === "PARTIAL" ? "bg-purple-100 border-purple-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400" selected === "PARTIAL" ? "bg-purple-100 border-purple-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
}`} }`}
> >
<div className="tooltip bg-purple-400! border-purple-400! before:border-b-purple-400!">Partial Face Paint</div> <div className="tooltip bg-purple-400! border-purple-400! before:border-b-purple-400!">Partial Face Paint</div>
<Icon icon="mdi:lipstick" className="text-purple-400" /> <Icon icon="mdi:lipstick" className="text-purple-400" />
</button> </button>
{/* No Makeup */} {/* No Makeup */}
<button <button
onClick={() => handleClick("NONE")} onClick={() => handleClick("NONE")}
aria-label="Filter for No Face Paint" aria-label="Filter for No Face Paint"
data-tooltip-span data-tooltip-span
className={`cursor-pointer rounded-xl flex justify-center items-center size-13 text-5xl border-2 transition-all ${ className={`cursor-pointer rounded-xl flex justify-center items-center size-13 text-5xl border-2 transition-all ${
selected === "NONE" ? "bg-gray-200 border-gray-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400" selected === "NONE" ? "bg-gray-200 border-gray-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
}`} }`}
> >
<div className="tooltip bg-gray-400! border-gray-400! before:border-b-gray-400!">No Face Paint</div> <div className="tooltip bg-gray-400! border-gray-400! before:border-b-gray-400!">No Face Paint</div>
<Icon icon="codex:cross" className="text-gray-400" /> <Icon icon="codex:cross" className="text-gray-400" />
</button> </button>
</div> </div>
); );
} }

10
frontend/src/components/mii/list/mii-grid.tsx
View file

@ -2,8 +2,6 @@ import { Icon } from "@iconify/react";
import LikeButton from "../../like-button"; import LikeButton from "../../like-button";
import DeleteMiiButton from "../delete-mii-button"; import DeleteMiiButton from "../delete-mii-button";
import Carousel from "../../carousel";
import ImageViewer from "../../image-viewer";
interface Props { interface Props {
// miis: Prisma.MiiGetPayload<{ include: { user: { select: { id: true; name: true } }; _count: { select: { likedBy: true } } } }>[]; // miis: Prisma.MiiGetPayload<{ include: { user: { select: { id: true; name: true } }; _count: { select: { likedBy: true } } } }>[];
@ -12,11 +10,7 @@ interface Props {
parentPage?: string; parentPage?: string;
} }
const fetcher = (url: string) => fetch(url).then((res) => res.json());
export default function MiiGrid({ miis, userId, parentPage }: Props) { export default function MiiGrid({ miis, userId, parentPage }: Props) {
const likedIds = new Set([]);
return ( return (
<div className="grid grid-cols-4 gap-4 max-lg:grid-cols-3 max-md:grid-cols-2 max-[30rem]:grid-cols-1"> <div className="grid grid-cols-4 gap-4 max-lg:grid-cols-3 max-md:grid-cols-2 max-[30rem]:grid-cols-1">
{miis.map((mii) => ( {miis.map((mii) => (
@ -33,7 +27,7 @@ export default function MiiGrid({ miis, userId, parentPage }: Props) {
<a href={`/mii/${mii.id}`} className="overflow-hidden rounded-xl bg-zinc-300 shrink-0"> <a href={`/mii/${mii.id}`} className="overflow-hidden rounded-xl bg-zinc-300 shrink-0">
<img <img
src={`${import.meta.env.PUBLIC_API_URL}/mii/${mii.id}/image?type=mii`} src={`${import.meta.env.VITE_API_URL}/mii/${mii.id}/image?type=mii`}
width={240} width={240}
height={160} height={160}
alt="mii image" alt="mii image"
@ -63,7 +57,7 @@ export default function MiiGrid({ miis, userId, parentPage }: Props) {
</div> </div>
<div className="mt-auto grid grid-cols-2 items-center"> <div className="mt-auto grid grid-cols-2 items-center">
<LikeButton likes={mii._count.likedBy} miiId={mii.id} isLiked={likedIds.has(mii.id)} abbreviate /> <LikeButton likes={mii._count.likedBy} miiId={mii.id} isLiked={false} abbreviate />
{!userId && ( {!userId && (
<a href={`/profile/${mii.user?.id}`} className="text-sm text-right overflow-hidden text-ellipsis whitespace-nowrap"> <a href={`/profile/${mii.user?.id}`} className="text-sm text-right overflow-hidden text-ellipsis whitespace-nowrap">

158
frontend/src/components/mii/list/other-filters.tsx
View file

@ -1,79 +1,79 @@
import type { MiiPlatform } from "@tomodachi-share/shared"; import type { MiiPlatform } from "@tomodachi-share/shared";
import { type ChangeEvent, useState, useTransition } from "react"; import { type ChangeEvent, useState, useTransition } from "react";
export default function OtherFilters() { export default function OtherFilters() {
const searchParams = new URLSearchParams(window.location.search); const searchParams = new URLSearchParams(window.location.search);
const [, startTransition] = useTransition(); const [, startTransition] = useTransition();
const platform = (searchParams.get("platform") as MiiPlatform) || undefined; const platform = (searchParams.get("platform") as MiiPlatform) || undefined;
const [allowCopying, setAllowCopying] = useState<boolean>((searchParams.get("allowCopying") as unknown as boolean) ?? false); const [allowCopying, setAllowCopying] = useState<boolean>((searchParams.get("allowCopying") as unknown as boolean) ?? false);
const [quarantined, setQuarantined] = useState<boolean>((searchParams.get("quarantined") as unknown as boolean) ?? false); const [quarantined, setQuarantined] = useState<boolean>((searchParams.get("quarantined") as unknown as boolean) ?? false);
const handleChangeAllowCopying = (e: ChangeEvent<HTMLInputElement>) => { const handleChangeAllowCopying = (e: ChangeEvent<HTMLInputElement>) => {
setAllowCopying(e.target.checked); setAllowCopying(e.target.checked);
const params = new URLSearchParams(searchParams); const params = new URLSearchParams(searchParams);
params.set("page", "1"); params.set("page", "1");
if (!allowCopying) { if (!allowCopying) {
params.set("allowCopying", "true"); params.set("allowCopying", "true");
} else { } else {
params.delete("allowCopying"); params.delete("allowCopying");
} }
startTransition(() => { startTransition(() => {
// router.push(`?${params.toString()}`, { scroll: false }); // router.push(`?${params.toString()}`, { scroll: false });
window.location.href = `?${params.toString()}`; window.location.href = `?${params.toString()}`;
}); });
}; };
const handleChangeQuarantined = (e: ChangeEvent<HTMLInputElement>) => { const handleChangeQuarantined = (e: ChangeEvent<HTMLInputElement>) => {
setQuarantined(e.target.checked); setQuarantined(e.target.checked);
const params = new URLSearchParams(searchParams); const params = new URLSearchParams(searchParams);
params.set("page", "1"); params.set("page", "1");
if (!quarantined) { if (!quarantined) {
params.set("quarantined", "true"); params.set("quarantined", "true");
} else { } else {
params.delete("quarantined"); params.delete("quarantined");
} }
startTransition(() => { startTransition(() => {
// router.push(`?${params.toString()}`, { scroll: false }); // router.push(`?${params.toString()}`, { scroll: false });
window.location.href = `?${params.toString()}`; window.location.href = `?${params.toString()}`;
}); });
}; };
const showAllowCopying = platform !== "SWITCH"; const showAllowCopying = platform !== "SWITCH";
const showQuarantined = !location.pathname.startsWith("/profile"); const showQuarantined = !location.pathname.startsWith("/profile");
if (!showAllowCopying && !showQuarantined) return null; if (!showAllowCopying && !showQuarantined) return null;
return ( return (
<> <>
<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium w-full mt-2 mb-1"> <div className="flex items-center gap-4 text-zinc-500 text-sm font-medium w-full mt-2 mb-1">
<hr className="grow border-zinc-300" /> <hr className="grow border-zinc-300" />
<span>Other</span> <span>Other</span>
<hr className="grow border-zinc-300" /> <hr className="grow border-zinc-300" />
</div> </div>
{showAllowCopying && ( {showAllowCopying && (
<div className="flex justify-between items-center w-full mb-1"> <div className="flex justify-between items-center w-full mb-1">
<label htmlFor="allowCopying" className="text-sm"> <label htmlFor="allowCopying" className="text-sm">
Allow Copying Allow Copying
</label> </label>
<input type="checkbox" id="allowCopying" className="checkbox-alt" checked={allowCopying} onChange={handleChangeAllowCopying} /> <input type="checkbox" id="allowCopying" className="checkbox-alt" checked={allowCopying} onChange={handleChangeAllowCopying} />
</div> </div>
)} )}
{showQuarantined && ( {showQuarantined && (
<div className="flex justify-between items-center w-full"> <div className="flex justify-between items-center w-full">
<label htmlFor="quarantined" className="text-sm"> <label htmlFor="quarantined" className="text-sm">
Show Controversial Miis Show Controversial Miis
</label> </label>
<input type="checkbox" id="quarantined" className="checkbox-alt" checked={quarantined} onChange={handleChangeQuarantined} /> <input type="checkbox" id="quarantined" className="checkbox-alt" checked={quarantined} onChange={handleChangeQuarantined} />
</div> </div>
)} )}
</> </>
); );
} }

110
frontend/src/components/mii/list/platform-select.tsx
View file

@ -1,55 +1,55 @@
import { useState, useTransition } from "react"; import { useState, useTransition } from "react";
import { Icon } from "@iconify/react"; import { Icon } from "@iconify/react";
import type { MiiPlatform } from "@tomodachi-share/shared"; import type { MiiPlatform } from "@tomodachi-share/shared";
export default function PlatformSelect() { export default function PlatformSelect() {
const searchParams = new URLSearchParams(window.location.search); const searchParams = new URLSearchParams(window.location.search);
const [, startTransition] = useTransition(); const [, startTransition] = useTransition();
const [selected, setSelected] = useState<MiiPlatform | null>((searchParams.get("platform") as MiiPlatform) ?? null); const [selected, setSelected] = useState<MiiPlatform | null>((searchParams.get("platform") as MiiPlatform) ?? null);
const handleClick = (platform: MiiPlatform) => { const handleClick = (platform: MiiPlatform) => {
const filter = selected === platform ? null : platform; const filter = selected === platform ? null : platform;
setSelected(filter); setSelected(filter);
const params = new URLSearchParams(searchParams); const params = new URLSearchParams(searchParams);
if (filter) { if (filter) {
params.set("platform", filter); params.set("platform", filter);
} else { } else {
params.delete("platform"); params.delete("platform");
} }
startTransition(() => { startTransition(() => {
// router.push(`?${params.toString()}`); // router.push(`?${params.toString()}`);
window.location.href = `?${params.toString()}`; window.location.href = `?${params.toString()}`;
}); });
}; };
return ( return (
<div className="grid grid-cols-2 gap-0.5 w-fit"> <div className="grid grid-cols-2 gap-0.5 w-fit">
<button <button
onClick={() => handleClick("THREE_DS")} onClick={() => handleClick("THREE_DS")}
aria-label="Filter for 3DS Miis" aria-label="Filter for 3DS Miis"
data-tooltip-span data-tooltip-span
className={`cursor-pointer rounded-xl flex justify-center items-center size-13 text-3xl border-2 transition-all ${ className={`cursor-pointer rounded-xl flex justify-center items-center size-13 text-3xl border-2 transition-all ${
selected === "THREE_DS" ? "bg-sky-100 border-sky-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400" selected === "THREE_DS" ? "bg-sky-100 border-sky-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
}`} }`}
> >
<div className="tooltip bg-sky-400! border-sky-400! before:border-b-sky-400!">3DS</div> <div className="tooltip bg-sky-400! border-sky-400! before:border-b-sky-400!">3DS</div>
<Icon icon="cib:nintendo-3ds" className="text-sky-400" /> <Icon icon="cib:nintendo-3ds" className="text-sky-400" />
</button> </button>
<button <button
onClick={() => handleClick("SWITCH")} onClick={() => handleClick("SWITCH")}
aria-label="Filter for Switch Miis" aria-label="Filter for Switch Miis"
data-tooltip-span data-tooltip-span
className={`cursor-pointer rounded-xl flex justify-center items-center size-13 text-3xl border-2 transition-all ${ className={`cursor-pointer rounded-xl flex justify-center items-center size-13 text-3xl border-2 transition-all ${
selected === "SWITCH" ? "bg-red-100 border-red-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400" selected === "SWITCH" ? "bg-red-100 border-red-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
}`} }`}
> >
<div className="tooltip bg-red-400! border-red-400! before:border-b-red-400!">Switch</div> <div className="tooltip bg-red-400! border-red-400! before:border-b-red-400!">Switch</div>
<Icon icon="cib:nintendo-switch" className="text-red-400" /> <Icon icon="cib:nintendo-switch" className="text-red-400" />
</button> </button>
</div> </div>
); );
} }

106
frontend/src/components/mii/list/skeleton.tsx
View file

@ -1,53 +1,53 @@
import FilterSelect from "./tag-filter"; import FilterSelect from "./tag-filter";
import SortSelect from "./sort-select"; import SortSelect from "./sort-select";
import Pagination from "../../pagination"; import Pagination from "../../pagination";
export default function Skeleton() { export default function Skeleton() {
return ( return (
<div className="w-full animate-pulse"> <div className="w-full animate-pulse">
<div className="flex justify-between items-end mb-2 max-[32rem]:flex-col max-[32rem]:items-center"> <div className="flex justify-between items-end mb-2 max-[32rem]:flex-col max-[32rem]:items-center">
<p className="text-lg"> <p className="text-lg">
<span className="font-extrabold">???</span> Miis <span className="font-extrabold">???</span> Miis
</p> </p>
<div className="flex gap-2 pointer-events-none"> <div className="flex gap-2 pointer-events-none">
<FilterSelect /> <FilterSelect />
<SortSelect /> <SortSelect />
</div> </div>
</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"> <div className="grid grid-cols-4 gap-4 max-lg:grid-cols-3 max-md:grid-cols-2 max-[30rem]:grid-cols-1">
{[...Array(24)].map((_, index) => ( {[...Array(24)].map((_, index) => (
<div key={index} className="flex flex-col bg-zinc-50 rounded-3xl border-2 border-zinc-300 shadow-lg p-3"> <div key={index} className="flex flex-col bg-zinc-50 rounded-3xl border-2 border-zinc-300 shadow-lg p-3">
{/* Carousel Skeleton */} {/* Carousel Skeleton */}
<div className="relative rounded-xl bg-zinc-300 border-2 border-zinc-300 mb-1"> <div className="relative rounded-xl bg-zinc-300 border-2 border-zinc-300 mb-1">
<div className="aspect-3/2"></div> <div className="aspect-3/2"></div>
</div> </div>
{/* Content */} {/* Content */}
<div className="p-4 flex flex-col gap-1 h-full"> <div className="p-4 flex flex-col gap-1 h-full">
{/* Name */} {/* Name */}
<div className="h-7 bg-zinc-300 rounded w-2/3 mb-0.5" /> <div className="h-7 bg-zinc-300 rounded w-2/3 mb-0.5" />
{/* Tags */} {/* Tags */}
<div className="flex flex-wrap gap-1"> <div className="flex flex-wrap gap-1">
<div className="px-4 py-2 bg-orange-200 rounded-full w-14 h-6" /> <div className="px-4 py-2 bg-orange-200 rounded-full w-14 h-6" />
<div className="px-4 py-2 bg-orange-200 rounded-full w-10 h-6" /> <div className="px-4 py-2 bg-orange-200 rounded-full w-10 h-6" />
</div> </div>
{/* Bottom row */} {/* Bottom row */}
<div className="mt-0.5 grid grid-cols-2 items-center"> <div className="mt-0.5 grid grid-cols-2 items-center">
<div className="h-6 w-12 bg-red-200 rounded" /> <div className="h-6 w-12 bg-red-200 rounded" />
<div className="h-4 w-24 bg-zinc-200 rounded justify-self-end" /> <div className="h-4 w-24 bg-zinc-200 rounded justify-self-end" />
</div> </div>
</div> </div>
</div> </div>
))} ))}
</div> </div>
<div className="pointer-events-none"> <div className="pointer-events-none">
<Pagination lastPage={10} /> <Pagination lastPage={10} />
</div> </div>
</div> </div>
); );
} }

122
frontend/src/components/mii/list/sort-select.tsx
View file

@ -1,61 +1,61 @@
import { useTransition } from "react"; import { useTransition } from "react";
import { useSelect } from "downshift"; import { useSelect } from "downshift";
import { Icon } from "@iconify/react"; import { Icon } from "@iconify/react";
type Sort = "likes" | "newest" | "oldest" | "random"; type Sort = "likes" | "newest" | "oldest" | "random";
const items = ["likes", "newest", "oldest", "random"]; const items = ["likes", "newest", "oldest", "random"];
export default function SortSelect() { export default function SortSelect() {
const searchParams = new URLSearchParams(window.location.search); const searchParams = new URLSearchParams(window.location.search);
const [, startTransition] = useTransition(); const [, startTransition] = useTransition();
const currentSort = (searchParams.get("sort") as Sort) || "newest"; const currentSort = (searchParams.get("sort") as Sort) || "newest";
const { isOpen, getToggleButtonProps, getMenuProps, getItemProps, highlightedIndex, selectedItem } = useSelect({ const { isOpen, getToggleButtonProps, getMenuProps, getItemProps, highlightedIndex, selectedItem } = useSelect({
items, items,
selectedItem: currentSort, selectedItem: currentSort,
onSelectedItemChange: ({ selectedItem }) => { onSelectedItemChange: ({ selectedItem }) => {
if (!selectedItem) return; if (!selectedItem) return;
const params = new URLSearchParams(searchParams); const params = new URLSearchParams(searchParams);
params.set("page", "1"); params.set("page", "1");
params.set("sort", selectedItem); params.set("sort", selectedItem);
if (selectedItem == "random") { if (selectedItem == "random") {
params.set("seed", Math.floor(Math.random() * 1_000_000_000).toString()); params.set("seed", Math.floor(Math.random() * 1_000_000_000).toString());
} }
startTransition(() => { startTransition(() => {
// router.push(`?${params.toString()}`, { scroll: false }); // router.push(`?${params.toString()}`, { scroll: false });
window.location.href = `?${params.toString()}`; window.location.href = `?${params.toString()}`;
}); });
}, },
}); });
return ( return (
<div className="relative w-fit"> <div className="relative w-fit">
{/* Toggle button to open the dropdown */} {/* Toggle button to open the dropdown */}
<button type="button" {...getToggleButtonProps()} aria-label="Sort dropdown" className="pill input w-full gap-1 justify-between! text-nowrap"> <button type="button" {...getToggleButtonProps()} aria-label="Sort dropdown" className="pill input w-full gap-1 justify-between! text-nowrap">
<span>Sort by </span> <span>Sort by </span>
{selectedItem || "Select a way to sort"} {selectedItem || "Select a way to sort"}
<Icon icon="tabler:chevron-down" className="ml-2 size-5" /> <Icon icon="tabler:chevron-down" className="ml-2 size-5" />
</button> </button>
{/* Dropdown menu */} {/* Dropdown menu */}
<ul <ul
{...getMenuProps()} {...getMenuProps()}
className={`absolute z-50 w-full bg-orange-200 border-2 border-orange-400 rounded-lg mt-1 shadow-lg max-h-60 overflow-y-auto ${ className={`absolute z-50 w-full bg-orange-200 border-2 border-orange-400 rounded-lg mt-1 shadow-lg max-h-60 overflow-y-auto ${
isOpen ? "block" : "hidden" isOpen ? "block" : "hidden"
}`} }`}
> >
{isOpen && {isOpen &&
items.map((item, index) => ( items.map((item, index) => (
<li key={item} {...getItemProps({ item, index })} className={`px-4 py-1 cursor-pointer text-sm ${highlightedIndex === index ? "bg-black/15" : ""}`}> <li key={item} {...getItemProps({ item, index })} className={`px-4 py-1 cursor-pointer text-sm ${highlightedIndex === index ? "bg-black/15" : ""}`}>
{item} {item}
</li> </li>
))} ))}
</ul> </ul>
</div> </div>
); );
} }

118
frontend/src/components/mii/list/tag-filter.tsx
View file

@ -1,59 +1,59 @@
import { useEffect, useMemo, useState, useTransition } from "react"; import { useEffect, useMemo, useState, useTransition } from "react";
import TagSelector from "../../tag-selector"; import TagSelector from "../../tag-selector";
interface Props { interface Props {
isExclude?: boolean; isExclude?: boolean;
} }
export default function TagFilter({ isExclude }: Props) { export default function TagFilter({ isExclude }: Props) {
const searchParams = new URLSearchParams(window.location.search); const searchParams = new URLSearchParams(window.location.search);
const [, startTransition] = useTransition(); const [, startTransition] = useTransition();
const rawTags = searchParams.get(isExclude ? "exclude" : "tags") || ""; const rawTags = searchParams.get(isExclude ? "exclude" : "tags") || "";
const preexistingTags = useMemo( const preexistingTags = useMemo(
() => () =>
rawTags rawTags
? rawTags ? rawTags
.split(",") .split(",")
.map((tag) => tag.trim()) .map((tag) => tag.trim())
.filter((tag) => tag.length > 0) .filter((tag) => tag.length > 0)
: [], : [],
[rawTags], [rawTags],
); );
const [tags, setTags] = useState<string[]>(preexistingTags); const [tags, setTags] = useState<string[]>(preexistingTags);
// Sync state if the URL tags change (e.g. via navigation) // Sync state if the URL tags change (e.g. via navigation)
useEffect(() => { useEffect(() => {
setTags(preexistingTags); setTags(preexistingTags);
}, [preexistingTags]); }, [preexistingTags]);
// Redirect automatically on tags change // Redirect automatically on tags change
useEffect(() => { useEffect(() => {
const urlTags = preexistingTags.join(","); const urlTags = preexistingTags.join(",");
const stateTags = tags.join(","); const stateTags = tags.join(",");
if (urlTags === stateTags) return; if (urlTags === stateTags) return;
const params = new URLSearchParams(searchParams); const params = new URLSearchParams(searchParams);
params.set("page", "1"); params.set("page", "1");
if (tags.length > 0) { if (tags.length > 0) {
params.set(isExclude ? "exclude" : "tags", stateTags); params.set(isExclude ? "exclude" : "tags", stateTags);
} else { } else {
params.delete(isExclude ? "exclude" : "tags"); params.delete(isExclude ? "exclude" : "tags");
} }
startTransition(() => { startTransition(() => {
// router.push(`?${params.toString()}`, { scroll: false }); // router.push(`?${params.toString()}`, { scroll: false });
window.location.href = `?${params.toString()}`; window.location.href = `?${params.toString()}`;
}); });
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [tags]); }, [tags]);
return ( return (
<div className="w-72"> <div className="w-72">
<TagSelector tags={tags} setTags={setTags} isExclude={isExclude} /> <TagSelector tags={tags} setTags={setTags} isExclude={isExclude} />
</div> </div>
); );
} }

112
frontend/src/components/mii/personality-viewer.tsx
View file

@ -1,56 +1,56 @@
import { type SwitchMiiInstructions } from "@tomodachi-share/shared"; import { type SwitchMiiInstructions } from "@tomodachi-share/shared";
interface Props { interface Props {
data: SwitchMiiInstructions["personality"]; data: SwitchMiiInstructions["personality"];
onClick?: (key: string, i: number) => void; onClick?: (key: string, i: number) => void;
} }
const PERSONALITY_SETTINGS: { label: string; left: string; right: string }[] = [ const PERSONALITY_SETTINGS: { label: string; left: string; right: string }[] = [
{ label: "Movement", left: "Slow", right: "Quick" }, { label: "Movement", left: "Slow", right: "Quick" },
{ label: "Speech", left: "Polite", right: "Honest" }, { label: "Speech", left: "Polite", right: "Honest" },
{ label: "Energy", left: "Flat", right: "Varied" }, { label: "Energy", left: "Flat", right: "Varied" },
{ label: "Thinking", left: "Serious", right: "Chill" }, { label: "Thinking", left: "Serious", right: "Chill" },
{ label: "Overall", left: "Normal", right: "Quirky" }, { label: "Overall", left: "Normal", right: "Quirky" },
]; ];
export default function PersonalityViewer({ data, onClick }: Props) { export default function PersonalityViewer({ data, onClick }: Props) {
return ( return (
<div className="flex flex-col gap-1.5 mb-3"> <div className="flex flex-col gap-1.5 mb-3">
{PERSONALITY_SETTINGS.map(({ label, left, right }) => { {PERSONALITY_SETTINGS.map(({ label, left, right }) => {
const key = label.toLowerCase() as keyof typeof data; const key = label.toLowerCase() as keyof typeof data;
return ( return (
<div key={label} className="flex justify-center items-center gap-2"> <div key={label} className="flex justify-center items-center gap-2">
<span className="text-sm w-24 shrink-0">{label}</span> <span className="text-sm w-24 shrink-0">{label}</span>
<span className="text-sm text-zinc-500 w-14 text-right">{left}</span> <span className="text-sm text-zinc-500 w-14 text-right">{left}</span>
<div className="flex gap-0.5"> <div className="flex gap-0.5">
{Array.from({ length: 8 }).map((_, i) => { {Array.from({ length: 8 }).map((_, i) => {
const colors = [ const colors = [
"bg-green-400", "bg-green-400",
"bg-green-300", "bg-green-300",
"bg-emerald-200", "bg-emerald-200",
"bg-teal-200", "bg-teal-200",
"bg-orange-200", "bg-orange-200",
"bg-orange-300", "bg-orange-300",
"bg-orange-400", "bg-orange-400",
"bg-orange-500", "bg-orange-500",
]; ];
return ( return (
<button <button
key={i} key={i}
type="button" type="button"
onClick={() => { onClick={() => {
if (onClick) onClick(key, i); if (onClick) onClick(key, i);
}} }}
className={`size-7 rounded-lg transition-opacity duration-100 border-black/40 className={`size-7 rounded-lg transition-opacity duration-100 border-black/40
${colors[i]} ${data[key] === i ? "border-2 opacity-100" : "opacity-70"} ${onClick ? "cursor-pointer" : ""}`} ${colors[i]} ${data[key] === i ? "border-2 opacity-100" : "opacity-70"} ${onClick ? "cursor-pointer" : ""}`}
></button> ></button>
); );
})} })}
</div> </div>
<span className="text-sm text-zinc-500 w-12 shrink-0">{right}</span> <span className="text-sm text-zinc-500 w-12 shrink-0">{right}</span>
</div> </div>
); );
})} })}
</div> </div>
); );
} }

6
frontend/src/components/mii/share-mii-button.tsx
View file

@ -27,7 +27,7 @@ export default function ShareMiiButton({ miiId }: Props) {
}; };
const handleCopyImage = async () => { const handleCopyImage = async () => {
const response = await fetch(`${import.meta.env.PUBLIC_API_URL}/mii/${miiId}/image?type=metadata`); const response = await fetch(`${import.meta.env.VITE_API_URL}/mii/${miiId}/image?type=metadata`);
const blob = await response.blob(); const blob = await response.blob();
await navigator.clipboard.write([new ClipboardItem({ [blob.type]: blob })]); await navigator.clipboard.write([new ClipboardItem({ [blob.type]: blob })]);
@ -117,7 +117,7 @@ export default function ShareMiiButton({ miiId }: Props) {
<div className="flex justify-center items-center p-4 w-full bg-orange-100 border border-orange-400 rounded-lg"> <div className="flex justify-center items-center p-4 w-full bg-orange-100 border border-orange-400 rounded-lg">
<img <img
src={`${import.meta.env.PUBLIC_API_URL}/mii/${miiId}/image?type=metadata`} src={`${import.meta.env.VITE_API_URL}/mii/${miiId}/image?type=metadata`}
alt="mii 'metadata' image" alt="mii 'metadata' image"
width={248} width={248}
height={248} height={248}
@ -129,7 +129,7 @@ export default function ShareMiiButton({ miiId }: Props) {
<div className="flex gap-2 w-full"> <div className="flex gap-2 w-full">
{/* Save button */} {/* Save button */}
<a <a
href={`${import.meta.env.PUBLIC_API_URL}/mii/${miiId}/image?type=metadata`} href={`${import.meta.env.VITE_API_URL}/mii/${miiId}/image?type=metadata`}
className="pill button p-0! aspect-square size-11 cursor-pointer text-xl" className="pill button p-0! aspect-square size-11 cursor-pointer text-xl"
aria-label="Save Image" aria-label="Save Image"
data-tooltip="Save Image" data-tooltip="Save Image"

82
frontend/src/components/mii/voice-viewer.tsx
View file

@ -1,41 +1,41 @@
import type { SwitchMiiInstructions } from "@tomodachi-share/shared"; import type { SwitchMiiInstructions } from "@tomodachi-share/shared";
import EnhancedSlider from "../submit-form/mii-editor/enhanced-slider"; import EnhancedSlider from "../submit-form/mii-editor/enhanced-slider";
interface Props { interface Props {
data: SwitchMiiInstructions["voice"]; data: SwitchMiiInstructions["voice"];
onChange: (value: number, label: string) => void; onChange: (value: number, label: string) => void;
onClickTone: (i: number) => void; onClickTone: (i: number) => void;
} }
const VOICE_SETTINGS = ["Speed", "Pitch", "Depth", "Delivery"]; const VOICE_SETTINGS = ["Speed", "Pitch", "Depth", "Delivery"];
export default function VoiceViewer({ data, onChange, onClickTone }: Props) { export default function VoiceViewer({ data, onChange, onClickTone }: Props) {
return ( return (
<div className="flex flex-col"> <div className="flex flex-col">
{VOICE_SETTINGS.map((label) => { {VOICE_SETTINGS.map((label) => {
const value = data[label.toLowerCase() as keyof typeof data] ?? 25; const value = data[label.toLowerCase() as keyof typeof data] ?? 25;
return <EnhancedSlider key={label} label={label} value={value} onChange={(v) => onChange?.(v, label.toLowerCase())} min={0} max={50} mid={25} />; return <EnhancedSlider key={label} label={label} value={value} onChange={(v) => onChange?.(v, label.toLowerCase())} min={0} max={50} mid={25} />;
})} })}
<div className="flex gap-3 mt-2"> <div className="flex gap-3 mt-2">
<label htmlFor="delivery" className="text-sm w-14"> <label htmlFor="delivery" className="text-sm w-14">
Tone Tone
</label> </label>
<div className="grid grid-cols-6 gap-1 min-w-50"> <div className="grid grid-cols-6 gap-1 min-w-50">
{Array.from({ length: 6 }).map((_, i) => ( {Array.from({ length: 6 }).map((_, i) => (
<button <button
type="button" type="button"
key={i} key={i}
onClick={() => { onClick={() => {
if (onClickTone) onClickTone(i + 1); if (onClickTone) onClickTone(i + 1);
}} }}
className={`transition-colors duration-100 rounded-xl hover:bg-orange-300 cursor-pointer ${data.tone === i + 1 ? "bg-orange-400!" : ""}`} className={`transition-colors duration-100 rounded-xl hover:bg-orange-300 cursor-pointer ${data.tone === i + 1 ? "bg-orange-400!" : ""}`}
> >
{i + 1} {i + 1}
</button> </button>
))} ))}
</div> </div>
</div> </div>
</div> </div>
); );
} }

190
frontend/src/components/pagination.tsx
View file

@ -1,95 +1,95 @@
import { useCallback, useMemo } from "react"; import { useCallback, useMemo } from "react";
import { Icon } from "@iconify/react"; import { Icon } from "@iconify/react";
interface Props { interface Props {
lastPage: number; lastPage: number;
} }
export default function Pagination({ lastPage }: Props) { export default function Pagination({ lastPage }: Props) {
const searchParams = new URLSearchParams(location.search); const searchParams = new URLSearchParams(location.search);
const page = Number(searchParams.get("page") ?? 1); const page = Number(searchParams.get("page") ?? 1);
const createPageUrl = useCallback( const createPageUrl = useCallback(
(pageNumber: number) => { (pageNumber: number) => {
const params = new URLSearchParams(searchParams); const params = new URLSearchParams(searchParams);
params.set("page", pageNumber.toString()); params.set("page", pageNumber.toString());
return `${location.pathname}?${params.toString()}`; return `${location.pathname}?${params.toString()}`;
}, },
[searchParams, location.pathname], [searchParams, location.pathname],
); );
const numbers = useMemo(() => { const numbers = useMemo(() => {
const result = []; const result = [];
// Always show 5 pages, centering around the current page when possible // Always show 5 pages, centering around the current page when possible
const start = Math.max(1, Math.min(page - 2, lastPage - 4)); const start = Math.max(1, Math.min(page - 2, lastPage - 4));
const end = Math.min(lastPage, start + 4); const end = Math.min(lastPage, start + 4);
for (let i = start; i <= end; i++) result.push(i); for (let i = start; i <= end; i++) result.push(i);
return result; return result;
}, [page, lastPage]); }, [page, lastPage]);
return ( return (
<div className="flex justify-center items-center w-full mt-8"> <div className="flex justify-center items-center w-full mt-8">
{/* Go to first page */} {/* Go to first page */}
<a <a
href={page === 1 ? "#" : createPageUrl(1)} href={page === 1 ? "#" : createPageUrl(1)}
aria-label="Go to First Page" aria-label="Go to First Page"
aria-disabled={page === 1} aria-disabled={page === 1}
tabIndex={page === 1 ? -1 : undefined} tabIndex={page === 1 ? -1 : undefined}
className={`pill button bg-orange-100! p-0.5! aspect-square text-2xl ${page === 1 ? "pointer-events-none opacity-50" : "hover:bg-orange-400!"}`} className={`pill button bg-orange-100! p-0.5! aspect-square text-2xl ${page === 1 ? "pointer-events-none opacity-50" : "hover:bg-orange-400!"}`}
> >
<Icon icon="stash:chevron-double-left" /> <Icon icon="stash:chevron-double-left" />
</a> </a>
{/* Previous page */} {/* Previous page */}
<a <a
href={page === 1 ? "#" : createPageUrl(page - 1)} href={page === 1 ? "#" : createPageUrl(page - 1)}
aria-label="Go to Previous Page" aria-label="Go to Previous Page"
aria-disabled={page === 1} aria-disabled={page === 1}
tabIndex={page === 1 ? -1 : undefined} tabIndex={page === 1 ? -1 : undefined}
className={`pill bg-orange-100! p-0.5! aspect-square text-2xl ${page === 1 ? "pointer-events-none opacity-50" : "hover:bg-orange-400!"}`} className={`pill bg-orange-100! p-0.5! aspect-square text-2xl ${page === 1 ? "pointer-events-none opacity-50" : "hover:bg-orange-400!"}`}
> >
<Icon icon="stash:chevron-left" /> <Icon icon="stash:chevron-left" />
</a> </a>
{/* Page numbers */} {/* Page numbers */}
<div className="flex mx-2"> <div className="flex mx-2">
{numbers.map((number) => ( {numbers.map((number) => (
<a <a
key={number} key={number}
href={createPageUrl(number)} href={createPageUrl(number)}
aria-label={`Go to Page ${number}`} aria-label={`Go to Page ${number}`}
aria-current={number === page ? "page" : undefined} aria-current={number === page ? "page" : undefined}
className={`pill p-0! w-8 h-8 text-center rounded-md! ${number == page ? "bg-orange-400!" : "bg-orange-100! hover:bg-orange-400!"}`} className={`pill p-0! w-8 h-8 text-center rounded-md! ${number == page ? "bg-orange-400!" : "bg-orange-100! hover:bg-orange-400!"}`}
> >
{number} {number}
</a> </a>
))} ))}
</div> </div>
{/* Next page */} {/* Next page */}
<a <a
href={page >= lastPage ? "#" : createPageUrl(page + 1)} href={page >= lastPage ? "#" : createPageUrl(page + 1)}
aria-label="Go to Next Page" aria-label="Go to Next Page"
aria-disabled={page >= lastPage} aria-disabled={page >= lastPage}
tabIndex={page >= lastPage ? -1 : undefined} tabIndex={page >= lastPage ? -1 : undefined}
className={`pill button bg-orange-100! p-0.5! aspect-square text-2xl ${page >= lastPage ? "pointer-events-none opacity-50" : "hover:bg-orange-400!"}`} className={`pill button bg-orange-100! p-0.5! aspect-square text-2xl ${page >= lastPage ? "pointer-events-none opacity-50" : "hover:bg-orange-400!"}`}
> >
<Icon icon="stash:chevron-right" /> <Icon icon="stash:chevron-right" />
</a> </a>
{/* Go to last page */} {/* Go to last page */}
<a <a
href={page >= lastPage ? "#" : createPageUrl(lastPage)} href={page >= lastPage ? "#" : createPageUrl(lastPage)}
aria-label="Go to Last Page" aria-label="Go to Last Page"
aria-disabled={page >= lastPage} aria-disabled={page >= lastPage}
tabIndex={page >= lastPage ? -1 : undefined} tabIndex={page >= lastPage ? -1 : undefined}
className={`pill button bg-orange-100! p-0.5! aspect-square text-2xl ${page >= lastPage ? "pointer-events-none opacity-50" : "hover:bg-orange-400!"}`} className={`pill button bg-orange-100! p-0.5! aspect-square text-2xl ${page >= lastPage ? "pointer-events-none opacity-50" : "hover:bg-orange-400!"}`}
> >
<Icon icon="stash:chevron-double-right" /> <Icon icon="stash:chevron-double-right" />
</a> </a>
</div> </div>
); );
} }

9
frontend/src/components/profile-information.tsx
View file

@ -12,16 +12,17 @@ interface Props {
export default function ProfileInformation({ user, page }: Props) { export default function ProfileInformation({ user, page }: Props) {
const $session = useStore(session); const $session = useStore(session);
const isAdmin = (!user ? $session?.user.id : user.id) === Number(import.meta.env.PUBLIC_ADMIN_USER_ID); const currentUser = user ?? $session?.user;
const isAdmin = currentUser?.id === Number(import.meta.env.PUBLIC_ADMIN_USER_ID);
const isContributor = import.meta.env.PUBLIC_CONTRIBUTORS_USER_IDS?.split(",").includes(user.id); const isContributor = import.meta.env.PUBLIC_CONTRIBUTORS_USER_IDS?.split(",").includes(user.id);
const isOwnProfile = !user || $session?.user?.id === user.id; const isOwnProfile = currentUser?.id === user.id;
return ( return (
<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg p-4 flex gap-4 mb-2 max-md:flex-col"> <div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg p-4 flex gap-4 mb-2 max-md:flex-col">
<div className="flex w-full gap-4 overflow-x-scroll"> <div className="flex w-full gap-4 overflow-x-scroll">
{/* Profile picture */} {/* Profile picture */}
<a href={`/profile/${user.id}`} className="size-28 aspect-square"> <a href={`/profile/${user.id}`} className="size-28 aspect-square">
<image src={user.image ?? "/guest.png"} className="rounded-full bg-white border-2 border-orange-400 shadow max-md:self-center" /> <img src={user.image ?? "/guest.png"} className="rounded-full bg-white border-2 border-orange-400 shadow max-md:self-center" />
</a> </a>
{/* User information */} {/* User information */}
<div className="flex flex-col w-full relative py-3"> <div className="flex flex-col w-full relative py-3">
@ -57,7 +58,7 @@ export default function ProfileInformation({ user, page }: Props) {
{/* Buttons */} {/* Buttons */}
<div className="flex gap-1 w-fit text-3xl text-orange-400 max-md:place-self-center *:size-17 *:flex *:flex-col *:items-center *:gap-1 **:transition-discrete **:duration-150 *:hover:brightness-75 *:hover:scale-[1.08] *:[&_span]:text-sm"> <div className="flex gap-1 w-fit text-3xl text-orange-400 max-md:place-self-center *:size-17 *:flex *:flex-col *:items-center *:gap-1 **:transition-discrete **:duration-150 *:hover:brightness-75 *:hover:scale-[1.08] *:[&_span]:text-sm">
{!isOwnProfile && ( {!isOwnProfile && (
<a aria-label="Report User" href={`${import.meta.env.PUBLIC_API_URL}/report/user/${user.id}`}> <a aria-label="Report User" href={`${import.meta.env.VITE_API_URL}/report/user/${user.id}`}>
<Icon icon="material-symbols:flag-rounded" /> <Icon icon="material-symbols:flag-rounded" />
<span>Report</span> <span>Report</span>
</a> </a>

162
frontend/src/components/profile-settings/delete-account.tsx
View file

@ -1,81 +1,81 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { createPortal } from "react-dom"; import { createPortal } from "react-dom";
import { Icon } from "@iconify/react"; import { Icon } from "@iconify/react";
import SubmitButton from "../submit-button"; import SubmitButton from "../submit-button";
export default function DeleteAccount() { export default function DeleteAccount() {
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
const [isVisible, setIsVisible] = useState(false); const [isVisible, setIsVisible] = useState(false);
const [error, setError] = useState<string | undefined>(undefined); const [error, setError] = useState<string | undefined>(undefined);
const handleSubmit = async () => { const handleSubmit = async () => {
const response = await fetch("/api/auth/delete", { method: "DELETE" }); const response = await fetch("/api/auth/delete", { method: "DELETE" });
if (!response.ok) { if (!response.ok) {
const { error } = await response.json(); const { error } = await response.json();
setError(error); setError(error);
return; return;
} }
window.location.href = "/404"; window.location.href = "/404";
}; };
const close = () => { const close = () => {
setIsVisible(false); setIsVisible(false);
setTimeout(() => { setTimeout(() => {
setIsOpen(false); setIsOpen(false);
}, 300); }, 300);
}; };
useEffect(() => { useEffect(() => {
if (isOpen) { if (isOpen) {
// slight delay to trigger animation // slight delay to trigger animation
setTimeout(() => setIsVisible(true), 10); setTimeout(() => setIsVisible(true), 10);
} }
}, [isOpen]); }, [isOpen]);
return ( return (
<> <>
<button onClick={() => setIsOpen(true)} className="pill button w-fit h-min ml-auto bg-red-400! border-red-500! hover:bg-red-500!"> <button onClick={() => setIsOpen(true)} className="pill button w-fit h-min ml-auto bg-red-400! border-red-500! hover:bg-red-500!">
Delete Account Delete Account
</button> </button>
{isOpen && {isOpen &&
createPortal( createPortal(
<div className="fixed inset-0 h-[calc(100%-var(--header-height))] top-(--header-height) flex items-center justify-center z-40"> <div className="fixed inset-0 h-[calc(100%-var(--header-height))] top-(--header-height) flex items-center justify-center z-40">
<div <div
onClick={close} onClick={close}
className={`z-40 absolute inset-0 backdrop-brightness-75 backdrop-blur-xs transition-opacity duration-300 ${ className={`z-40 absolute inset-0 backdrop-brightness-75 backdrop-blur-xs transition-opacity duration-300 ${
isVisible ? "opacity-100" : "opacity-0" isVisible ? "opacity-100" : "opacity-0"
}`} }`}
/> />
<div <div
className={`z-50 bg-orange-50 border-2 border-amber-500 rounded-2xl shadow-lg p-6 w-full max-w-md transition-discrete duration-300 flex flex-col ${ className={`z-50 bg-orange-50 border-2 border-amber-500 rounded-2xl shadow-lg p-6 w-full max-w-md transition-discrete duration-300 flex flex-col ${
isVisible ? "scale-100 opacity-100" : "scale-75 opacity-0" isVisible ? "scale-100 opacity-100" : "scale-75 opacity-0"
}`} }`}
> >
<div className="flex justify-between items-center mb-2"> <div className="flex justify-between items-center mb-2">
<h2 className="text-xl font-bold">Delete Account</h2> <h2 className="text-xl font-bold">Delete Account</h2>
<button onClick={close} aria-label="Close" className="text-red-400 hover:text-red-500 text-2xl cursor-pointer"> <button onClick={close} aria-label="Close" className="text-red-400 hover:text-red-500 text-2xl cursor-pointer">
<Icon icon="material-symbols:close-rounded" /> <Icon icon="material-symbols:close-rounded" />
</button> </button>
</div> </div>
<p className="text-sm text-zinc-500">Are you sure? This is permanent and will remove all uploaded Miis. This action cannot be undone.</p> <p className="text-sm text-zinc-500">Are you sure? This is permanent and will remove all uploaded Miis. This action cannot be undone.</p>
{error && <span className="text-red-400 font-bold mt-2">Error: {error}</span>} {error && <span className="text-red-400 font-bold mt-2">Error: {error}</span>}
<div className="flex justify-end gap-2 mt-4"> <div className="flex justify-end gap-2 mt-4">
<button onClick={close} className="pill button"> <button onClick={close} className="pill button">
Cancel Cancel
</button> </button>
<SubmitButton onClick={handleSubmit} text="Delete" className="bg-red-400! border-red-500! hover:bg-red-500!" /> <SubmitButton onClick={handleSubmit} text="Delete" className="bg-red-400! border-red-500! hover:bg-red-500!" />
</div> </div>
</div> </div>
</div>, </div>,
document.body, document.body,
)} )}
</> </>
); );
} }

4
frontend/src/components/profile-settings/index.tsx
View file

@ -25,7 +25,7 @@ export default function ProfileSettings({ currentDescription }: Props) {
return; return;
} }
const response = await fetch(`${import.meta.env.PUBLIC_API_URL}/api/auth/about-me`, { const response = await fetch(`${import.meta.env.VITE_API_URL}/api/auth/about-me`, {
method: "PATCH", method: "PATCH",
headers: { "Content-Type": "application/json" }, headers: { "Content-Type": "application/json" },
body: JSON.stringify({ description }), body: JSON.stringify({ description }),
@ -49,7 +49,7 @@ export default function ProfileSettings({ currentDescription }: Props) {
return; return;
} }
const response = await fetch(`${import.meta.env.PUBLIC_API_URL}/api/auth/name`, { const response = await fetch(`${import.meta.env.VITE_API_URL}/api/auth/name`, {
method: "PATCH", method: "PATCH",
headers: { "Content-Type": "application/json" }, headers: { "Content-Type": "application/json" },
body: JSON.stringify({ name }), body: JSON.stringify({ name }),

2
frontend/src/components/profile-settings/profile-picture.tsx
View file

@ -17,7 +17,7 @@ export default function ProfilePictureSettings() {
const formData = new FormData(); const formData = new FormData();
if (newPicture) formData.append("image", newPicture); if (newPicture) formData.append("image", newPicture);
const response = await fetch(`${import.meta.env.PUBLIC_API_URL}/api/auth/picture`, { const response = await fetch(`${import.meta.env.VITE_API_URL}/api/auth/picture`, {
method: "PATCH", method: "PATCH",
body: formData, body: formData,
credentials: "include", credentials: "include",

162
frontend/src/components/profile-settings/submit-dialog-button.tsx
View file

@ -1,81 +1,81 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { createPortal } from "react-dom"; import { createPortal } from "react-dom";
import { Icon } from "@iconify/react"; import { Icon } from "@iconify/react";
import SubmitButton from "../submit-button"; import SubmitButton from "../submit-button";
interface Props { interface Props {
title: string; title: string;
description: string; description: string;
onSubmit: (close: () => void) => void; onSubmit: (close: () => void) => void;
error?: string; error?: string;
children?: React.ReactNode; children?: React.ReactNode;
} }
export default function SubmitDialogButton({ title, description, onSubmit, error, children }: Props) { export default function SubmitDialogButton({ title, description, onSubmit, error, children }: Props) {
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
const [isVisible, setIsVisible] = useState(false); const [isVisible, setIsVisible] = useState(false);
const submit = () => { const submit = () => {
onSubmit(close); onSubmit(close);
}; };
const close = () => { const close = () => {
setIsVisible(false); setIsVisible(false);
setTimeout(() => { setTimeout(() => {
setIsOpen(false); setIsOpen(false);
}, 300); }, 300);
}; };
useEffect(() => { useEffect(() => {
if (isOpen) { if (isOpen) {
// slight delay to trigger animation // slight delay to trigger animation
setTimeout(() => setIsVisible(true), 10); setTimeout(() => setIsVisible(true), 10);
} }
}, [isOpen]); }, [isOpen]);
return ( return (
<> <>
<button onClick={() => setIsOpen(true)} aria-label="Open Submit Dialog" className="pill button size-11 p-1! text-2xl"> <button onClick={() => setIsOpen(true)} aria-label="Open Submit Dialog" className="pill button size-11 p-1! text-2xl">
<Icon icon="material-symbols:check-rounded" /> <Icon icon="material-symbols:check-rounded" />
</button> </button>
{isOpen && {isOpen &&
createPortal( createPortal(
<div className="fixed inset-0 w-full h-[calc(100%-var(--header-height))] top-(--header-height) flex items-center justify-center z-40"> <div className="fixed inset-0 w-full h-[calc(100%-var(--header-height))] top-(--header-height) flex items-center justify-center z-40">
<div <div
onClick={close} onClick={close}
className={`z-40 absolute inset-0 backdrop-brightness-75 backdrop-blur-xs transition-opacity duration-300 ${ className={`z-40 absolute inset-0 backdrop-brightness-75 backdrop-blur-xs transition-opacity duration-300 ${
isVisible ? "opacity-100" : "opacity-0" isVisible ? "opacity-100" : "opacity-0"
}`} }`}
/> />
<div <div
className={`z-50 bg-orange-50 border-2 border-amber-500 rounded-2xl shadow-lg p-6 w-full max-w-md transition-discrete duration-300 flex flex-col ${ className={`z-50 bg-orange-50 border-2 border-amber-500 rounded-2xl shadow-lg p-6 w-full max-w-md transition-discrete duration-300 flex flex-col ${
isVisible ? "scale-100 opacity-100" : "scale-75 opacity-0" isVisible ? "scale-100 opacity-100" : "scale-75 opacity-0"
}`} }`}
> >
<div className="flex justify-between items-center mb-2"> <div className="flex justify-between items-center mb-2">
<h2 className="text-xl font-bold">{title}</h2> <h2 className="text-xl font-bold">{title}</h2>
<button onClick={close} aria-label="Close" className="text-red-400 hover:text-red-500 text-2xl cursor-pointer"> <button onClick={close} aria-label="Close" className="text-red-400 hover:text-red-500 text-2xl cursor-pointer">
<Icon icon="material-symbols:close-rounded" /> <Icon icon="material-symbols:close-rounded" />
</button> </button>
</div> </div>
<p className="text-sm text-zinc-500">{description}</p> <p className="text-sm text-zinc-500">{description}</p>
{children} {children}
{error && <span className="text-red-400 font-bold mt-2">Error: {error}</span>} {error && <span className="text-red-400 font-bold mt-2">Error: {error}</span>}
<div className="flex justify-end gap-2 mt-4"> <div className="flex justify-end gap-2 mt-4">
<button onClick={close} className="pill button"> <button onClick={close} className="pill button">
Cancel Cancel
</button> </button>
<SubmitButton onClick={submit} /> <SubmitButton onClick={submit} />
</div> </div>
</div> </div>
</div>, </div>,
document.body, document.body,
)} )}
</> </>
); );
} }

62
frontend/src/components/provider.tsx
View file

@ -1,31 +1,31 @@
import { useEffect } from "react"; import { useEffect } from "react";
import { ProgressProvider } from "@bprogress/react"; import { ProgressProvider } from "@bprogress/react";
export default function Providers({ children }: { children: React.ReactNode }) { export default function Providers({ children }: { children: React.ReactNode }) {
// Calculate header height // Calculate header height
useEffect(() => { useEffect(() => {
const header = document.querySelector("header"); const header = document.querySelector("header");
if (!header) return; if (!header) return;
const updateHeaderHeight = () => { const updateHeaderHeight = () => {
document.documentElement.style.setProperty("--header-height", `${header.offsetHeight}px`); document.documentElement.style.setProperty("--header-height", `${header.offsetHeight}px`);
}; };
const resizeObserver = new ResizeObserver(updateHeaderHeight); const resizeObserver = new ResizeObserver(updateHeaderHeight);
resizeObserver.observe(header); resizeObserver.observe(header);
window.addEventListener("resize", updateHeaderHeight); window.addEventListener("resize", updateHeaderHeight);
updateHeaderHeight(); updateHeaderHeight();
return () => { return () => {
resizeObserver.disconnect(); resizeObserver.disconnect();
window.removeEventListener("resize", updateHeaderHeight); window.removeEventListener("resize", updateHeaderHeight);
}; };
}, []); }, []);
return ( return (
<ProgressProvider height="4px" color="var(--color-amber-500)" options={{ showSpinner: false }} shallowRouting> <ProgressProvider height="4px" color="var(--color-amber-500)" options={{ showSpinner: false }} shallowRouting>
{children} {children}
</ProgressProvider> </ProgressProvider>
); );
} }

100
frontend/src/components/search-bar.tsx
View file

@ -1,50 +1,50 @@
import { useState } from "react"; import { useState } from "react";
import { Icon } from "@iconify/react"; import { Icon } from "@iconify/react";
import { querySchema } from "@tomodachi-share/shared/schemas"; import { querySchema } from "@tomodachi-share/shared/schemas";
export default function SearchBar() { export default function SearchBar() {
const searchParams = new URLSearchParams(window.location.search); const searchParams = new URLSearchParams(window.location.search);
const [query, setQuery] = useState(searchParams.get("q") || ""); const [query, setQuery] = useState(searchParams.get("q") || "");
const handleSearch = () => { const handleSearch = () => {
const result = querySchema.safeParse(query); const result = querySchema.safeParse(query);
if (!result.success) { if (!result.success) {
// router.push("/", { scroll: false }); // router.push("/", { scroll: false });
window.location.href = "/"; window.location.href = "/";
return; return;
} }
// Clone current search params and add query param // Clone current search params and add query param
const params = new URLSearchParams(searchParams.toString()); const params = new URLSearchParams(searchParams.toString());
params.set("q", query); params.set("q", query);
params.set("page", "1"); params.set("page", "1");
// router.push(`/?${params.toString()}`, { scroll: false }); // router.push(`/?${params.toString()}`, { scroll: false });
window.location.href = `/?${params.toString()}`; window.location.href = `/?${params.toString()}`;
}; };
const handleKeyDown = (event: React.KeyboardEvent) => { const handleKeyDown = (event: React.KeyboardEvent) => {
if (event.key === "Enter") handleSearch(); if (event.key === "Enter") handleSearch();
}; };
return ( return (
<div className="max-w-md w-full flex rounded-xl focus-within:ring-[3px] ring-orange-400/50 transition shadow-md"> <div className="max-w-md w-full flex rounded-xl focus-within:ring-[3px] ring-orange-400/50 transition shadow-md">
<input <input
type="text" type="text"
placeholder="Search..." placeholder="Search..."
value={query} value={query}
onChange={(e) => setQuery(e.target.value)} onChange={(e) => setQuery(e.target.value)}
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
className="bg-orange-200 border-2 border-orange-400 py-2 px-3 rounded-l-xl outline-0 w-full placeholder:text-black/40" className="bg-orange-200 border-2 border-orange-400 py-2 px-3 rounded-l-xl outline-0 w-full placeholder:text-black/40"
/> />
<button <button
onClick={handleSearch} onClick={handleSearch}
aria-label="Search" aria-label="Search"
data-tooltip="Search" data-tooltip="Search"
className="bg-orange-400 p-2 w-12 rounded-r-xl flex justify-center items-center cursor-pointer text-2xl" className="bg-orange-400 p-2 w-12 rounded-r-xl flex justify-center items-center cursor-pointer text-2xl"
> >
<Icon icon="ic:baseline-search" /> <Icon icon="ic:baseline-search" />
</button> </button>
</div> </div>
); );
} }

62
frontend/src/components/submit-button.tsx
View file

@ -1,31 +1,31 @@
import { useState } from "react"; import { useState } from "react";
import { Icon } from "@iconify/react"; import { Icon } from "@iconify/react";
interface Props { interface Props {
onClick: () => void | Promise<void>; onClick: () => void | Promise<void>;
disabled?: boolean; disabled?: boolean;
text?: string; text?: string;
className?: string; className?: string;
} }
export default function SubmitButton({ onClick, disabled = false, text = "Submit", className }: Props) { export default function SubmitButton({ onClick, disabled = false, text = "Submit", className }: Props) {
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const handleClick = async (event: React.FormEvent) => { const handleClick = async (event: React.FormEvent) => {
event.preventDefault(); event.preventDefault();
setIsLoading(true); setIsLoading(true);
try { try {
await onClick(); await onClick();
} finally { } finally {
setIsLoading(false); setIsLoading(false);
} }
}; };
return ( return (
<button type="submit" aria-label={text} onClick={handleClick} disabled={disabled} className={`pill button w-min ${className}`}> <button type="submit" aria-label={text} onClick={handleClick} disabled={disabled} className={`pill button w-min ${className}`}>
{text} {text}
{isLoading && <Icon icon="svg-spinners:180-ring-with-bg" className="ml-2" />} {isLoading && <Icon icon="svg-spinners:180-ring-with-bg" className="ml-2" />}
</button> </button>
); );
} }

510
frontend/src/components/submit-form/camera.tsx
View file

@ -1,255 +1,255 @@
import { useCallback, useEffect, useRef, useState } from "react"; import { useCallback, useEffect, useRef, useState } from "react";
import jsQR from "jsqr"; import jsQR from "jsqr";
import { Icon } from "@iconify/react"; import { Icon } from "@iconify/react";
import QrFinder from "./qr-finder"; import QrFinder from "./qr-finder";
import { useSelect } from "downshift"; import { useSelect } from "downshift";
interface Props { interface Props {
isOpen: boolean; isOpen: boolean;
setIsOpen: React.Dispatch<React.SetStateAction<boolean>>; setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
onCapture?: () => void; onCapture?: () => void;
setImage?: (value: string | undefined) => void; setImage?: (value: string | undefined) => void;
setQrBytesRaw?: React.Dispatch<React.SetStateAction<number[]>>; setQrBytesRaw?: React.Dispatch<React.SetStateAction<number[]>>;
} }
export default function Camera({ isOpen, setIsOpen, onCapture, setImage, setQrBytesRaw }: Props) { export default function Camera({ isOpen, setIsOpen, onCapture, setImage, setQrBytesRaw }: Props) {
const [isVisible, setIsVisible] = useState(false); const [isVisible, setIsVisible] = useState(false);
const [permissionGranted, setPermissionGranted] = useState<boolean | null>(null); const [permissionGranted, setPermissionGranted] = useState<boolean | null>(null);
const [devices, setDevices] = useState<MediaDeviceInfo[]>([]); const [devices, setDevices] = useState<MediaDeviceInfo[]>([]);
const [selectedDeviceId, setSelectedDeviceId] = useState<string | null>(null); const [selectedDeviceId, setSelectedDeviceId] = useState<string | null>(null);
const videoRef = useRef<HTMLVideoElement>(null); const videoRef = useRef<HTMLVideoElement>(null);
const streamRef = useRef<MediaStream | null>(null); const streamRef = useRef<MediaStream | null>(null);
const requestRef = useRef<number>(null); const requestRef = useRef<number>(null);
const canvasRef = useRef<HTMLCanvasElement>(null); const canvasRef = useRef<HTMLCanvasElement>(null);
const cameraItems = devices.map((device) => ({ const cameraItems = devices.map((device) => ({
value: device.deviceId, value: device.deviceId,
label: device.label || `Camera ${devices.indexOf(device) + 1}`, label: device.label || `Camera ${devices.indexOf(device) + 1}`,
})); }));
const { const {
isOpen: isDropdownOpen, isOpen: isDropdownOpen,
getToggleButtonProps, getToggleButtonProps,
getMenuProps, getMenuProps,
getItemProps, getItemProps,
highlightedIndex, highlightedIndex,
selectedItem, selectedItem,
} = useSelect({ } = useSelect({
items: cameraItems, items: cameraItems,
selectedItem: cameraItems.find((item) => item.value === selectedDeviceId) ?? null, selectedItem: cameraItems.find((item) => item.value === selectedDeviceId) ?? null,
onSelectedItemChange: ({ selectedItem }) => { onSelectedItemChange: ({ selectedItem }) => {
setSelectedDeviceId(selectedItem?.value ?? null); setSelectedDeviceId(selectedItem?.value ?? null);
}, },
}); });
const takePicture = useCallback(() => { const takePicture = useCallback(() => {
if (!isOpen) return; if (!isOpen) return;
// Continue scanning in a loop // Continue scanning in a loop
if (setQrBytesRaw) requestRef.current = requestAnimationFrame(takePicture); if (setQrBytesRaw) requestRef.current = requestAnimationFrame(takePicture);
const video = videoRef.current; const video = videoRef.current;
const canvas = canvasRef.current; const canvas = canvasRef.current;
if (!video || video.videoWidth === 0 || video.videoHeight === 0 || !canvas) return; if (!video || video.videoWidth === 0 || video.videoHeight === 0 || !canvas) return;
const ctx = canvas.getContext("2d"); const ctx = canvas.getContext("2d");
if (!ctx) return; if (!ctx) return;
canvas.width = video.videoWidth; canvas.width = video.videoWidth;
canvas.height = video.videoHeight; canvas.height = video.videoHeight;
ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight); ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
if (setImage) { if (setImage) {
setImage(canvas.toDataURL()); setImage(canvas.toDataURL());
if (onCapture) onCapture(); if (onCapture) onCapture();
close(); close();
return; return;
} }
if (!setQrBytesRaw) return; if (!setQrBytesRaw) return;
const imageData = ctx.getImageData(0, 0, video.videoWidth, video.videoHeight); const imageData = ctx.getImageData(0, 0, video.videoWidth, video.videoHeight);
const code = jsQR(imageData.data, imageData.width, imageData.height); const code = jsQR(imageData.data, imageData.width, imageData.height);
if (!code || !code.binaryData) return; if (!code || !code.binaryData) return;
// Cancel animation frame to stop scanning // Cancel animation frame to stop scanning
if (requestRef.current) { if (requestRef.current) {
cancelAnimationFrame(requestRef.current); cancelAnimationFrame(requestRef.current);
requestRef.current = null; requestRef.current = null;
} }
setQrBytesRaw(code.binaryData); setQrBytesRaw(code.binaryData);
close(); close();
}, [isOpen, setIsOpen, setQrBytesRaw]); }, [isOpen, setIsOpen, setQrBytesRaw]);
const requestPermission = () => { const requestPermission = () => {
if (!navigator.mediaDevices) return; if (!navigator.mediaDevices) return;
navigator.mediaDevices navigator.mediaDevices
.getUserMedia({ video: true, audio: false }) .getUserMedia({ video: true, audio: false })
.then((stream) => { .then((stream) => {
// immediately stop this temp stream // immediately stop this temp stream
stream.getTracks().forEach((track) => track.stop()); stream.getTracks().forEach((track) => track.stop());
setPermissionGranted(true); setPermissionGranted(true);
}) })
.catch((err) => { .catch((err) => {
setPermissionGranted(false); setPermissionGranted(false);
console.error("An error occurred trying to access the camera", err); console.error("An error occurred trying to access the camera", err);
}); });
}; };
const stopCamera = () => { const stopCamera = () => {
if (requestRef.current) { if (requestRef.current) {
cancelAnimationFrame(requestRef.current); cancelAnimationFrame(requestRef.current);
requestRef.current = null; requestRef.current = null;
} }
if (videoRef.current) { if (videoRef.current) {
videoRef.current.pause(); videoRef.current.pause();
videoRef.current.srcObject = null; videoRef.current.srcObject = null;
} }
if (streamRef.current) { if (streamRef.current) {
streamRef.current.getTracks().forEach((track) => track.stop()); streamRef.current.getTracks().forEach((track) => track.stop());
streamRef.current = null; streamRef.current = null;
} }
}; };
const close = () => { const close = () => {
stopCamera(); stopCamera();
setIsVisible(false); setIsVisible(false);
setTimeout(() => { setTimeout(() => {
setIsOpen(false); setIsOpen(false);
}, 300); }, 300);
}; };
useEffect(() => { useEffect(() => {
if (isOpen) { if (isOpen) {
// slight delay to trigger animation // slight delay to trigger animation
setTimeout(() => setIsVisible(true), 10); setTimeout(() => setIsVisible(true), 10);
requestPermission(); requestPermission();
} }
}, [isOpen]); }, [isOpen]);
useEffect(() => { useEffect(() => {
if (!isOpen || !permissionGranted) return; if (!isOpen || !permissionGranted) return;
navigator.mediaDevices navigator.mediaDevices
.enumerateDevices() .enumerateDevices()
.then((devices) => { .then((devices) => {
const videoDevices = devices.filter((d) => d.kind === "videoinput"); const videoDevices = devices.filter((d) => d.kind === "videoinput");
setDevices(videoDevices); setDevices(videoDevices);
const targetDeviceId = selectedDeviceId || videoDevices[0]?.deviceId; const targetDeviceId = selectedDeviceId || videoDevices[0]?.deviceId;
if (!targetDeviceId) return; if (!targetDeviceId) return;
setSelectedDeviceId(targetDeviceId); setSelectedDeviceId(targetDeviceId);
// start camera stream // start camera stream
return navigator.mediaDevices.getUserMedia({ return navigator.mediaDevices.getUserMedia({
video: { deviceId: targetDeviceId }, video: { deviceId: targetDeviceId },
audio: false, audio: false,
}); });
}) })
.then((stream) => { .then((stream) => {
if (!stream || !videoRef.current) return; if (!stream || !videoRef.current) return;
streamRef.current = stream; streamRef.current = stream;
videoRef.current.srcObject = stream; videoRef.current.srcObject = stream;
videoRef.current.play(); videoRef.current.play();
}) })
.catch((err) => console.error("Camera error", err)); .catch((err) => console.error("Camera error", err));
if (setQrBytesRaw) requestRef.current = requestAnimationFrame(takePicture); if (setQrBytesRaw) requestRef.current = requestAnimationFrame(takePicture);
// cleanup // cleanup
return () => { return () => {
stopCamera(); stopCamera();
}; };
}, [isOpen, permissionGranted, selectedDeviceId]); }, [isOpen, permissionGranted, selectedDeviceId]);
return ( return (
<div className={`fixed inset-0 h-[calc(100%-var(--header-height))] top-(--header-height) flex items-center justify-center z-40 ${!isOpen ? "hidden" : ""}`}> <div className={`fixed inset-0 h-[calc(100%-var(--header-height))] top-(--header-height) flex items-center justify-center z-40 ${!isOpen ? "hidden" : ""}`}>
<div <div
onClick={close} onClick={close}
className={`z-40 absolute inset-0 backdrop-brightness-75 backdrop-blur-xs transition-opacity duration-300 ${isVisible ? "opacity-100" : "opacity-0"}`} className={`z-40 absolute inset-0 backdrop-brightness-75 backdrop-blur-xs transition-opacity duration-300 ${isVisible ? "opacity-100" : "opacity-0"}`}
/> />
<div <div
className={`z-50 bg-orange-50 border-2 border-amber-500 rounded-2xl shadow-lg p-6 w-full max-w-md transition-discrete duration-300 ${ className={`z-50 bg-orange-50 border-2 border-amber-500 rounded-2xl shadow-lg p-6 w-full max-w-md transition-discrete duration-300 ${
isVisible ? "scale-100 opacity-100" : "scale-75 opacity-0" isVisible ? "scale-100 opacity-100" : "scale-75 opacity-0"
}`} }`}
> >
<div className="flex justify-between items-center mb-2"> <div className="flex justify-between items-center mb-2">
<h2 className="text-xl font-bold">{setQrBytesRaw ? "Scan QR Code" : "Take Picture"}</h2> <h2 className="text-xl font-bold">{setQrBytesRaw ? "Scan QR Code" : "Take Picture"}</h2>
<button type="button" aria-label="Close" onClick={close} className="text-red-400 hover:text-red-500 text-2xl cursor-pointer"> <button type="button" aria-label="Close" onClick={close} className="text-red-400 hover:text-red-500 text-2xl cursor-pointer">
<Icon icon="material-symbols:close-rounded" /> <Icon icon="material-symbols:close-rounded" />
</button> </button>
</div> </div>
<div className={`mb-4 flex flex-col gap-1 ${devices.length <= 1 ? "hidden" : ""}`}> <div className={`mb-4 flex flex-col gap-1 ${devices.length <= 1 ? "hidden" : ""}`}>
<label className="text-sm font-semibold">Camera:</label> <label className="text-sm font-semibold">Camera:</label>
<div className="relative w-full"> <div className="relative w-full">
{/* Toggle button to open the dropdown */} {/* Toggle button to open the dropdown */}
<button <button
type="button" type="button"
aria-label="Select camera dropdown" aria-label="Select camera dropdown"
{...getToggleButtonProps({}, { suppressRefError: true })} {...getToggleButtonProps({}, { suppressRefError: true })}
className="pill input w-full px-2! py-0.5! justify-between! text-sm" className="pill input w-full px-2! py-0.5! justify-between! text-sm"
> >
{selectedItem?.label || "Select a camera"} {selectedItem?.label || "Select a camera"}
<Icon icon="tabler:chevron-down" className="ml-2 size-5" /> <Icon icon="tabler:chevron-down" className="ml-2 size-5" />
</button> </button>
{/* Dropdown menu */} {/* Dropdown menu */}
<ul <ul
{...getMenuProps({}, { suppressRefError: true })} {...getMenuProps({}, { suppressRefError: true })}
className={`absolute z-50 w-full bg-orange-200 border-2 border-orange-400 rounded-lg mt-1 shadow-lg max-h-60 overflow-y-auto ${ className={`absolute z-50 w-full bg-orange-200 border-2 border-orange-400 rounded-lg mt-1 shadow-lg max-h-60 overflow-y-auto ${
isDropdownOpen ? "block" : "hidden" isDropdownOpen ? "block" : "hidden"
}`} }`}
> >
{isDropdownOpen && {isDropdownOpen &&
cameraItems.map((item, index) => ( cameraItems.map((item, index) => (
<li <li
key={item.value} key={item.value}
{...getItemProps({ item, index })} {...getItemProps({ item, index })}
className={`px-4 py-1 cursor-pointer text-sm ${highlightedIndex === index ? "bg-black/15" : ""}`} className={`px-4 py-1 cursor-pointer text-sm ${highlightedIndex === index ? "bg-black/15" : ""}`}
> >
{item.label} {item.label}
</li> </li>
))} ))}
</ul> </ul>
</div> </div>
</div> </div>
<div className={`relative w-full ${setQrBytesRaw ? "aspect-square" : ""}`}> <div className={`relative w-full ${setQrBytesRaw ? "aspect-square" : ""}`}>
{!permissionGranted && ( {!permissionGranted && (
<div className="absolute inset-0 z-20 flex flex-col items-center justify-center rounded-2xl bg-amber-50 border-2 border-amber-500 text-center p-8"> <div className="absolute inset-0 z-20 flex flex-col items-center justify-center rounded-2xl bg-amber-50 border-2 border-amber-500 text-center p-8">
<p className="text-red-400 font-bold text-lg mb-2">Camera access denied</p> <p className="text-red-400 font-bold text-lg mb-2">Camera access denied</p>
<p className="text-gray-600">Please allow camera access in your browser settings to {setQrBytesRaw ? "scan QR codes" : "take pictures"}</p> <p className="text-gray-600">Please allow camera access in your browser settings to {setQrBytesRaw ? "scan QR codes" : "take pictures"}</p>
<button type="button" onClick={requestPermission} className="pill button text-xs mt-2 py-0.5! px-2!"> <button type="button" onClick={requestPermission} className="pill button text-xs mt-2 py-0.5! px-2!">
Request Permission Request Permission
</button> </button>
</div> </div>
)} )}
<div className="rounded-2xl border-2 border-amber-500 max-h-96 flex justify-center items-center overflow-hidden"> <div className="rounded-2xl border-2 border-amber-500 max-h-96 flex justify-center items-center overflow-hidden">
<img src="/loading.svg" alt="loading indicator" width={256} height={256} className="absolute" /> <img src="/loading.svg" alt="loading indicator" width={256} height={256} className="absolute" />
<video ref={videoRef} className={`size-full z-10 ${setQrBytesRaw ? "object-cover aspect-square" : ""}`} /> <video ref={videoRef} className={`size-full z-10 ${setQrBytesRaw ? "object-cover aspect-square" : ""}`} />
</div> </div>
{setQrBytesRaw && <QrFinder />} {setQrBytesRaw && <QrFinder />}
<canvas ref={canvasRef} className="hidden" /> <canvas ref={canvasRef} className="hidden" />
</div> </div>
<div className="mt-4 flex justify-center gap-2"> <div className="mt-4 flex justify-center gap-2">
<button type="button" onClick={close} className="pill button"> <button type="button" onClick={close} className="pill button">
Cancel Cancel
</button> </button>
{setImage && ( {setImage && (
<button type="button" onClick={takePicture} className="pill button"> <button type="button" onClick={takePicture} className="pill button">
Take Picture Take Picture
</button> </button>
)} )}
</div> </div>
</div> </div>
</div> </div>
); );
} }

912
frontend/src/components/submit-form/edit-form.tsx
View file

@ -1,456 +1,456 @@
// import { redirect } from "next/navigation"; // import { redirect } from "next/navigation";
// import { useCallback, useEffect, useRef, useState } from "react"; // import { useCallback, useEffect, useRef, useState } from "react";
// import { FileWithPath } from "react-dropzone"; // import { FileWithPath } from "react-dropzone";
// import { Mii, MiiGender, MiiMakeup } from "@prisma/client"; // import { Mii, MiiGender, MiiMakeup } from "@prisma/client";
// import { useSession } from "next-auth/react"; // import { useSession } from "next-auth/react";
// import { nameSchema, tagsSchema } from "@tomodachi-share/shared/schemas"; // import { nameSchema, tagsSchema } from "@tomodachi-share/shared/schemas";
// import { defaultInstructions, minifyInstructions } from "@/lib/switch"; // import { defaultInstructions, minifyInstructions } from "@/lib/switch";
// import { SwitchMiiInstructions } from "@tomodachi-share/shared"; // import { SwitchMiiInstructions } from "@tomodachi-share/shared";
// import TagSelector from "../tag-selector"; // import TagSelector from "../tag-selector";
// import ImageList from "./image-list"; // import ImageList from "./image-list";
// import LikeButton from "../like-button"; // 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 MiiEditor from "./mii-editor"; // import MiiEditor from "./mii-editor";
// import SwitchSubmitTutorialButton from "../tutorial/switch-submit"; // import SwitchSubmitTutorialButton from "../tutorial/switch-submit";
// import { Icon } from "@iconify/react"; // import { Icon } from "@iconify/react";
// import SwitchFileUpload from "./switch-file-upload"; // import SwitchFileUpload from "./switch-file-upload";
// interface Props { // interface Props {
// mii: Mii; // mii: Mii;
// likes: number; // likes: number;
// } // }
// function deepMerge<T>(target: T, source: Partial<T>): T { // function deepMerge<T>(target: T, source: Partial<T>): T {
// const output = structuredClone(target); // const output = structuredClone(target);
// if (typeof source !== "object" || source === null) return output; // if (typeof source !== "object" || source === null) return output;
// for (const key in source) { // for (const key in source) {
// const sourceValue = source[key]; // const sourceValue = source[key];
// const targetValue = (output as any)[key]; // const targetValue = (output as any)[key];
// if (typeof sourceValue === "object" && sourceValue !== null && !Array.isArray(sourceValue)) { // if (typeof sourceValue === "object" && sourceValue !== null && !Array.isArray(sourceValue)) {
// (output as any)[key] = deepMerge(targetValue, sourceValue); // (output as any)[key] = deepMerge(targetValue, sourceValue);
// } else { // } else {
// (output as any)[key] = sourceValue; // (output as any)[key] = sourceValue;
// } // }
// } // }
// return output; // return output;
// } // }
// export default function EditForm({ mii, likes }: Props) { // export default function EditForm({ mii, likes }: Props) {
// const session = useSession(); // const session = useSession();
// const [files, setFiles] = useState<FileWithPath[]>([]); // const [files, setFiles] = useState<FileWithPath[]>([]);
// const handleFilesChange: React.Dispatch<React.SetStateAction<FileWithPath[]>> = (updater) => { // const handleFilesChange: React.Dispatch<React.SetStateAction<FileWithPath[]>> = (updater) => {
// hasCustomImagesChanged.current = true; // hasCustomImagesChanged.current = true;
// setFiles(updater); // setFiles(updater);
// }; // };
// const handleDrop = useCallback( // const handleDrop = useCallback(
// (acceptedFiles: FileWithPath[]) => { // (acceptedFiles: FileWithPath[]) => {
// if (files.length >= 3) return; // if (files.length >= 3) return;
// hasCustomImagesChanged.current = true; // hasCustomImagesChanged.current = true;
// setFiles((prev) => [...prev, ...acceptedFiles]); // setFiles((prev) => [...prev, ...acceptedFiles]);
// }, // },
// [files.length], // [files.length],
// ); // );
// const [error, setError] = useState<string | undefined>(undefined); // const [error, setError] = useState<string | undefined>(undefined);
// const [name, setName] = useState(mii.name); // const [name, setName] = useState(mii.name);
// const [tags, setTags] = useState(mii.tags); // const [tags, setTags] = useState(mii.tags);
// const [description, setDescription] = useState(mii.description); // const [description, setDescription] = useState(mii.description);
// const [gender, setGender] = useState<MiiGender>(mii.gender ?? "MALE"); // const [gender, setGender] = useState<MiiGender>(mii.gender ?? "MALE");
// const [makeup, setMakeup] = useState<MiiMakeup>(mii.makeup ?? "PARTIAL"); // const [makeup, setMakeup] = useState<MiiMakeup>(mii.makeup ?? "PARTIAL");
// const [miiPortraitUri, setMiiPortraitUri] = useState<string | undefined>(`/mii/${mii.id}/image?type=mii`); // const [miiPortraitUri, setMiiPortraitUri] = useState<string | undefined>(`/mii/${mii.id}/image?type=mii`);
// const [miiFeaturesUri, setMiiFeaturesUri] = useState<string | undefined>(`/mii/${mii.id}/image?type=features`); // const [miiFeaturesUri, setMiiFeaturesUri] = useState<string | undefined>(`/mii/${mii.id}/image?type=features`);
// const [youtubeId, setYouTubeId] = useState(mii.youtubeId ?? ""); // const [youtubeId, setYouTubeId] = useState(mii.youtubeId ?? "");
// const instructions = useRef<SwitchMiiInstructions>(deepMerge(defaultInstructions, (mii.instructions as object) ?? {})); // const instructions = useRef<SwitchMiiInstructions>(deepMerge(defaultInstructions, (mii.instructions as object) ?? {}));
// const [quarantined, setQuarantined] = useState(mii.quarantined); // const [quarantined, setQuarantined] = useState(mii.quarantined);
// const hasCustomImagesChanged = useRef(false); // const hasCustomImagesChanged = useRef(false);
// const hasMiiPortraitChanged = useRef(false); // const hasMiiPortraitChanged = useRef(false);
// const hasMiiFeaturesChanged = useRef(false); // const hasMiiFeaturesChanged = useRef(false);
// const handleSubmit = async () => { // const handleSubmit = async () => {
// // Validate before sending request // // Validate before sending request
// const nameValidation = nameSchema.safeParse(name); // const nameValidation = nameSchema.safeParse(name);
// if (!nameValidation.success) { // if (!nameValidation.success) {
// setError(nameValidation.error.issues[0].message); // setError(nameValidation.error.issues[0].message);
// return; // return;
// } // }
// const tagsValidation = tagsSchema.safeParse(tags); // const tagsValidation = tagsSchema.safeParse(tags);
// if (!tagsValidation.success) { // if (!tagsValidation.success) {
// setError(tagsValidation.error.issues[0].message); // setError(tagsValidation.error.issues[0].message);
// return; // return;
// } // }
// // Send request to server // // Send request to server
// const formData = new FormData(); // const formData = new FormData();
// if (name != mii.name) formData.append("name", name); // if (name != mii.name) formData.append("name", name);
// if (tags != mii.tags) formData.append("tags", JSON.stringify(tags)); // if (tags != mii.tags) formData.append("tags", JSON.stringify(tags));
// if (description && description != mii.description) formData.append("description", description); // if (description && description != mii.description) formData.append("description", description);
// if (gender != mii.gender) formData.append("gender", gender); // if (gender != mii.gender) formData.append("gender", gender);
// if (makeup != mii.makeup) formData.append("makeup", makeup); // if (makeup != mii.makeup) formData.append("makeup", makeup);
// if (miiPortraitUri) formData.append("miiPortraitUri", miiPortraitUri); // if (miiPortraitUri) formData.append("miiPortraitUri", miiPortraitUri);
// if (quarantined != mii.quarantined) formData.append("quarantined", JSON.stringify(quarantined)); // if (quarantined != mii.quarantined) formData.append("quarantined", JSON.stringify(quarantined));
// if (youtubeId != mii.youtubeId) formData.append("youtubeId", youtubeId); // if (youtubeId != mii.youtubeId) formData.append("youtubeId", youtubeId);
// if (minifyInstructions(structuredClone(instructions.current)) !== (mii.instructions as object)) // if (minifyInstructions(structuredClone(instructions.current)) !== (mii.instructions as object))
// formData.append("instructions", JSON.stringify(instructions.current)); // formData.append("instructions", JSON.stringify(instructions.current));
// if (hasCustomImagesChanged.current) { // if (hasCustomImagesChanged.current) {
// files.forEach((file, index) => { // files.forEach((file, index) => {
// // image1, image2, etc. // // image1, image2, etc.
// formData.append(`image${index + 1}`, file); // formData.append(`image${index + 1}`, file);
// }); // });
// } // }
// // Switch pictures // // Switch pictures
// async function getBlob(uri: string): Promise<Blob | null> { // async function getBlob(uri: string): Promise<Blob | null> {
// const response = await fetch(uri); // const response = await fetch(uri);
// if (!response.ok) { // if (!response.ok) {
// setError("Failed to get Mii portrait/features screenshot. Did you upload one?"); // setError("Failed to get Mii portrait/features screenshot. Did you upload one?");
// return null; // return null;
// } // }
// const blob = await response.blob(); // const blob = await response.blob();
// if (!blob.type.startsWith("image/")) { // if (!blob.type.startsWith("image/")) {
// setError("Invalid image file found"); // setError("Invalid image file found");
// return null; // return null;
// } // }
// return blob; // return blob;
// } // }
// if (miiPortraitUri && hasMiiPortraitChanged.current) { // if (miiPortraitUri && hasMiiPortraitChanged.current) {
// const blob = await getBlob(miiPortraitUri); // const blob = await getBlob(miiPortraitUri);
// if (blob) formData.append("miiPortraitImage", blob); // if (blob) formData.append("miiPortraitImage", blob);
// } // }
// if (miiFeaturesUri && hasMiiFeaturesChanged.current) { // if (miiFeaturesUri && hasMiiFeaturesChanged.current) {
// const blob = await getBlob(miiFeaturesUri); // const blob = await getBlob(miiFeaturesUri);
// if (blob) formData.append("miiFeaturesImage", blob); // if (blob) formData.append("miiFeaturesImage", blob);
// } // }
// const response = await fetch(`/api/mii/${mii.id}/edit`, { // const response = await fetch(`/api/mii/${mii.id}/edit`, {
// method: "PATCH", // method: "PATCH",
// body: formData, // body: formData,
// }); // });
// const { error } = await response.json(); // const { error } = await response.json();
// if (!response.ok) { // if (!response.ok) {
// setError(error); // setError(error);
// return; // return;
// } // }
// redirect(`/mii/${mii.id}`); // redirect(`/mii/${mii.id}`);
// }; // };
// const handleMiiPortraitChange = (uri: string | undefined) => { // const handleMiiPortraitChange = (uri: string | undefined) => {
// hasMiiPortraitChanged.current = true; // hasMiiPortraitChanged.current = true;
// setMiiPortraitUri(uri); // setMiiPortraitUri(uri);
// }; // };
// const handleMiiFeaturesChange = (uri: string | undefined) => { // const handleMiiFeaturesChange = (uri: string | undefined) => {
// hasMiiFeaturesChanged.current = true; // hasMiiFeaturesChanged.current = true;
// setMiiFeaturesUri(uri); // setMiiFeaturesUri(uri);
// }; // };
// // Load existing images - converts image URLs to File objects // // Load existing images - converts image URLs to File objects
// useEffect(() => { // useEffect(() => {
// const loadExistingImages = async () => { // const loadExistingImages = async () => {
// try { // try {
// const existing = await Promise.all( // const existing = await Promise.all(
// Array.from({ length: mii.imageCount }, async (_, index) => { // Array.from({ length: mii.imageCount }, async (_, index) => {
// const path = `/mii/${mii.id}/image?type=image${index}`; // const path = `/mii/${mii.id}/image?type=image${index}`;
// const response = await fetch(path); // const response = await fetch(path);
// const blob = await response.blob(); // const blob = await response.blob();
// return Object.assign(new File([blob], `image${index}.png`, { type: "image/png" }), { path }); // return Object.assign(new File([blob], `image${index}.png`, { type: "image/png" }), { path });
// }), // }),
// ); // );
// setFiles(existing); // setFiles(existing);
// } catch (error) { // } catch (error) {
// console.error("Error loading existing images:", error); // console.error("Error loading existing images:", error);
// } // }
// }; // };
// loadExistingImages(); // loadExistingImages();
// }, [mii.id, mii.imageCount]); // }, [mii.id, mii.imageCount]);
// return ( // return (
// <div className="flex justify-center gap-4 w-full max-lg:flex-col max-lg:items-center"> // <div className="flex justify-center gap-4 w-full max-lg:flex-col max-lg:items-center">
// <div className="flex justify-center"> // <div className="flex justify-center">
// <div className="w-75 h-min flex flex-col bg-zinc-50 rounded-3xl border-2 border-zinc-300 shadow-lg p-3"> // <div className="w-75 h-min flex flex-col bg-zinc-50 rounded-3xl border-2 border-zinc-300 shadow-lg p-3">
// <Carousel // <Carousel
// images={[ // images={[
// miiPortraitUri ?? `/mii/${mii.id}/image?type=mii`, // miiPortraitUri ?? `/mii/${mii.id}/image?type=mii`,
// ...(mii.platform === "THREE_DS" ? [`/mii/${mii.id}/image?type=qr-code`] : [miiFeaturesUri ?? `/mii/${mii.id}/image?type=features`]), // ...(mii.platform === "THREE_DS" ? [`/mii/${mii.id}/image?type=qr-code`] : [miiFeaturesUri ?? `/mii/${mii.id}/image?type=features`]),
// ...files.map((file) => URL.createObjectURL(file)), // ...files.map((file) => URL.createObjectURL(file)),
// ]} // ]}
// /> // />
// <div className="p-4 flex flex-col gap-1 h-full"> // <div className="p-4 flex flex-col gap-1 h-full">
// <h1 className="font-bold text-2xl line-clamp-1" title={name}> // <h1 className="font-bold text-2xl line-clamp-1" title={name}>
// {name || "Mii name"} // {name || "Mii name"}
// </h1> // </h1>
// <div id="tags" className="flex flex-wrap gap-1"> // <div id="tags" className="flex flex-wrap gap-1">
// {tags.length == 0 && <span className="px-2 py-1 bg-orange-300 rounded-full text-xs">tag</span>} // {tags.length == 0 && <span className="px-2 py-1 bg-orange-300 rounded-full text-xs">tag</span>}
// {tags.map((tag) => ( // {tags.map((tag) => (
// <span key={tag} className="px-2 py-1 bg-orange-300 rounded-full text-xs"> // <span key={tag} className="px-2 py-1 bg-orange-300 rounded-full text-xs">
// {tag} // {tag}
// </span> // </span>
// ))} // ))}
// </div> // </div>
// <div className="mt-auto"> // <div className="mt-auto">
// <LikeButton likes={likes} isLiked={false} abbreviate disabled /> // <LikeButton likes={likes} isLiked={false} abbreviate disabled />
// </div> // </div>
// </div> // </div>
// </div> // </div>
// </div> // </div>
// <div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg p-4 flex flex-col gap-2 max-w-2xl w-full"> // <div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg p-4 flex flex-col gap-2 max-w-2xl w-full">
// <div> // <div>
// <h2 className="text-2xl font-bold">Edit your Mii</h2> // <h2 className="text-2xl font-bold">Edit your Mii</h2>
// <p className="text-sm text-zinc-500">Make changes to your existing Mii.</p> // <p className="text-sm text-zinc-500">Make changes to your existing Mii.</p>
// </div> // </div>
// {/* Separator */} // {/* Separator */}
// <div className="flex items-center gap-4 text-zinc-500 text-sm font-medium my-1"> // <div className="flex items-center gap-4 text-zinc-500 text-sm font-medium my-1">
// <hr className="grow border-zinc-300" /> // <hr className="grow border-zinc-300" />
// <span>Info</span> // <span>Info</span>
// <hr className="grow border-zinc-300" /> // <hr className="grow border-zinc-300" />
// </div> // </div>
// <div className="w-full grid grid-cols-3 items-center"> // <div className="w-full grid grid-cols-3 items-center">
// <label htmlFor="name" className="font-semibold"> // <label htmlFor="name" className="font-semibold">
// Name // Name
// </label> // </label>
// <input // <input
// id="name" // id="name"
// type="text" // type="text"
// className="pill input w-full col-span-2" // className="pill input w-full col-span-2"
// minLength={2} // minLength={2}
// maxLength={64} // maxLength={64}
// placeholder="Type your mii's name here..." // placeholder="Type your mii's name here..."
// value={name} // value={name}
// onChange={(e) => setName(e.target.value)} // onChange={(e) => setName(e.target.value)}
// /> // />
// </div> // </div>
// <div className="w-full grid grid-cols-3 items-center"> // <div className="w-full grid grid-cols-3 items-center">
// <label htmlFor="tags" className="font-semibold"> // <label htmlFor="tags" className="font-semibold">
// Tags // Tags
// </label> // </label>
// <TagSelector tags={tags} setTags={setTags} showTagLimit /> // <TagSelector tags={tags} setTags={setTags} showTagLimit />
// </div> // </div>
// <div className="w-full grid grid-cols-3 items-start"> // <div className="w-full grid grid-cols-3 items-start">
// <label htmlFor="reason-note" className="font-semibold py-2"> // <label htmlFor="reason-note" className="font-semibold py-2">
// Description // Description
// </label> // </label>
// <textarea // <textarea
// rows={5} // rows={5}
// maxLength={512} // maxLength={512}
// placeholder="(optional) Type a description..." // placeholder="(optional) Type a description..."
// className="pill input rounded-xl! resize-none col-span-2 text-sm" // className="pill input rounded-xl! resize-none col-span-2 text-sm"
// value={description ?? ""} // value={description ?? ""}
// onChange={(e) => setDescription(e.target.value)} // onChange={(e) => setDescription(e.target.value)}
// /> // />
// </div> // </div>
// {session.data?.user?.id == import.meta.env.NEXT_PUBLIC_ADMIN_USER_ID && ( // {session.data?.user?.id == import.meta.env.NEXT_PUBLIC_ADMIN_USER_ID && (
// <> // <>
// <div className="w-full grid grid-cols-3 items-center"> // <div className="w-full grid grid-cols-3 items-center">
// <label htmlFor="quarantined" className="font-semibold py-2"> // <label htmlFor="quarantined" className="font-semibold py-2">
// Quarantined // Quarantined
// </label> // </label>
// <div className="col-span-2 flex gap-1"> // <div className="col-span-2 flex gap-1">
// <input type="checkbox" id="quarantined" className="checkbox-alt" checked={quarantined} onChange={(e) => setQuarantined(e.target.checked)} /> // <input type="checkbox" id="quarantined" className="checkbox-alt" checked={quarantined} onChange={(e) => setQuarantined(e.target.checked)} />
// </div> // </div>
// </div> // </div>
// </> // </>
// )} // )}
// {/* Makeup/Images/Instructions (Switch only) */} // {/* Makeup/Images/Instructions (Switch only) */}
// {mii.platform === "SWITCH" && ( // {mii.platform === "SWITCH" && (
// <> // <>
// <div className="w-full grid grid-cols-3 items-start z-20"> // <div className="w-full grid grid-cols-3 items-start z-20">
// <label htmlFor="gender" className="font-semibold py-2"> // <label htmlFor="gender" className="font-semibold py-2">
// Gender // Gender
// </label> // </label>
// <div className="col-span-2 flex gap-1"> // <div className="col-span-2 flex gap-1">
// <button // <button
// type="button" // type="button"
// onClick={() => setGender("MALE")} // onClick={() => setGender("MALE")}
// aria-label="Filter for Male Miis" // aria-label="Filter for Male Miis"
// data-tooltip="Male" // data-tooltip="Male"
// className={`cursor-pointer rounded-xl flex justify-center items-center size-11 text-4xl border-2 transition-all after:bg-blue-400! after:border-blue-400! before:border-b-blue-400! ${ // className={`cursor-pointer rounded-xl flex justify-center items-center size-11 text-4xl border-2 transition-all after:bg-blue-400! after:border-blue-400! before:border-b-blue-400! ${
// gender === "MALE" ? "bg-blue-100 border-blue-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400" // gender === "MALE" ? "bg-blue-100 border-blue-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
// }`} // }`}
// > // >
// <Icon icon="foundation:male" className="text-blue-400" /> // <Icon icon="foundation:male" className="text-blue-400" />
// </button> // </button>
// <button // <button
// type="button" // type="button"
// onClick={() => setGender("FEMALE")} // onClick={() => setGender("FEMALE")}
// aria-label="Filter for Female Miis" // aria-label="Filter for Female Miis"
// data-tooltip="Female" // data-tooltip="Female"
// className={`cursor-pointer rounded-xl flex justify-center items-center size-11 text-4xl border-2 transition-all after:bg-pink-400! after:border-pink-400! before:border-b-pink-400! ${ // className={`cursor-pointer rounded-xl flex justify-center items-center size-11 text-4xl border-2 transition-all after:bg-pink-400! after:border-pink-400! before:border-b-pink-400! ${
// gender === "FEMALE" ? "bg-pink-100 border-pink-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400" // gender === "FEMALE" ? "bg-pink-100 border-pink-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
// }`} // }`}
// > // >
// <Icon icon="foundation:female" className="text-pink-400" /> // <Icon icon="foundation:female" className="text-pink-400" />
// </button> // </button>
// <button // <button
// type="button" // type="button"
// onClick={() => setGender("NONBINARY")} // onClick={() => setGender("NONBINARY")}
// aria-label="Filter for Nonbinary Miis" // aria-label="Filter for Nonbinary Miis"
// data-tooltip="Nonbinary" // data-tooltip="Nonbinary"
// className={`cursor-pointer rounded-xl flex justify-center items-center size-11 text-4xl border-2 transition-all after:bg-purple-400! after:border-purple-400! before:border-b-purple-400! ${ // className={`cursor-pointer rounded-xl flex justify-center items-center size-11 text-4xl border-2 transition-all after:bg-purple-400! after:border-purple-400! before:border-b-purple-400! ${
// gender === "NONBINARY" ? "bg-purple-100 border-purple-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400" // gender === "NONBINARY" ? "bg-purple-100 border-purple-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
// }`} // }`}
// > // >
// <Icon icon="mdi:gender-non-binary" className="text-purple-400" /> // <Icon icon="mdi:gender-non-binary" className="text-purple-400" />
// </button> // </button>
// </div> // </div>
// </div> // </div>
// <div className="w-full grid grid-cols-3 items-start"> // <div className="w-full grid grid-cols-3 items-start">
// <label htmlFor="makeup" className="font-semibold py-2"> // <label htmlFor="makeup" className="font-semibold py-2">
// Face Paint // Face Paint
// </label> // </label>
// <div className="col-span-2 flex gap-1"> // <div className="col-span-2 flex gap-1">
// {/* Full Makeup */} // {/* Full Makeup */}
// <button // <button
// type="button" // type="button"
// onClick={() => setMakeup("FULL")} // onClick={() => setMakeup("FULL")}
// aria-label="Full Face Paint" // aria-label="Full Face Paint"
// data-tooltip="Full Face Paint" // data-tooltip="Full Face Paint"
// className={`cursor-pointer rounded-xl flex justify-center items-center size-11 text-4xl border-2 transition-all after:bg-pink-400! after:border-pink-400! before:border-b-pink-400! ${ // className={`cursor-pointer rounded-xl flex justify-center items-center size-11 text-4xl border-2 transition-all after:bg-pink-400! after:border-pink-400! before:border-b-pink-400! ${
// makeup === "FULL" ? "bg-pink-100 border-pink-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400" // makeup === "FULL" ? "bg-pink-100 border-pink-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
// }`} // }`}
// > // >
// <Icon icon="mdi:palette" className="text-pink-400" /> // <Icon icon="mdi:palette" className="text-pink-400" />
// </button> // </button>
// {/* Partial Makeup */} // {/* Partial Makeup */}
// <button // <button
// type="button" // type="button"
// onClick={() => setMakeup("PARTIAL")} // onClick={() => setMakeup("PARTIAL")}
// aria-label="Partial Face Paint" // aria-label="Partial Face Paint"
// data-tooltip="Partial Face Paint" // data-tooltip="Partial Face Paint"
// className={`cursor-pointer rounded-xl flex justify-center items-center size-11 text-4xl border-2 transition-all after:bg-purple-400! after:border-purple-400! before:border-b-purple-400! ${ // className={`cursor-pointer rounded-xl flex justify-center items-center size-11 text-4xl border-2 transition-all after:bg-purple-400! after:border-purple-400! before:border-b-purple-400! ${
// makeup === "PARTIAL" ? "bg-purple-100 border-purple-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400" // makeup === "PARTIAL" ? "bg-purple-100 border-purple-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
// }`} // }`}
// > // >
// <Icon icon="mdi:lipstick" className="text-purple-400" /> // <Icon icon="mdi:lipstick" className="text-purple-400" />
// </button> // </button>
// {/* No Makeup */} // {/* No Makeup */}
// <button // <button
// type="button" // type="button"
// onClick={() => setMakeup("NONE")} // onClick={() => setMakeup("NONE")}
// aria-label="No Face Paint" // aria-label="No Face Paint"
// data-tooltip="No Face Paint" // data-tooltip="No Face Paint"
// className={`cursor-pointer rounded-xl flex justify-center items-center size-11 text-4xl border-2 transition-all after:bg-gray-400! after:border-gray-400! before:border-b-gray-400! ${ // className={`cursor-pointer rounded-xl flex justify-center items-center size-11 text-4xl border-2 transition-all after:bg-gray-400! after:border-gray-400! before:border-b-gray-400! ${
// makeup === "NONE" ? "bg-gray-200 border-gray-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400" // makeup === "NONE" ? "bg-gray-200 border-gray-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
// }`} // }`}
// > // >
// <Icon icon="codex:cross" className="text-gray-400" /> // <Icon icon="codex:cross" className="text-gray-400" />
// </button> // </button>
// </div> // </div>
// </div> // </div>
// {/* (Switch Only) Mii Portrait */} // {/* (Switch Only) Mii Portrait */}
// <div> // <div>
// {/* 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 Portrait</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-2">
// <SwitchFileUpload text="a screenshot of your Mii here" image={miiPortraitUri} setImage={handleMiiPortraitChange} forceCrop /> // <SwitchFileUpload text="a screenshot of your Mii here" image={miiPortraitUri} setImage={handleMiiPortraitChange} forceCrop />
// <SwitchFileUpload text="a screenshot of your Mii's features here" image={miiFeaturesUri} setImage={handleMiiFeaturesChange} /> // <SwitchFileUpload text="a screenshot of your Mii's features here" image={miiFeaturesUri} setImage={handleMiiFeaturesChange} />
// <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">You must upload a screenshot of the features, check tutorial on how.</p>
// </div> // </div>
// <div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-8"> // <div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-8">
// <hr className="grow border-zinc-300" /> // <hr className="grow border-zinc-300" />
// <span>Instructions</span> // <span>Instructions</span>
// <hr className="grow border-zinc-300" /> // <hr className="grow border-zinc-300" />
// </div> // </div>
// {/* YouTube */} // {/* YouTube */}
// <div className="w-full grid grid-cols-3 items-center"> // <div className="w-full grid grid-cols-3 items-center">
// <label htmlFor="youtube" className="font-semibold"> // <label htmlFor="youtube" className="font-semibold">
// YouTube Video // YouTube Video
// </label> // </label>
// <input // <input
// id="youtube" // id="youtube"
// type="text" // type="text"
// className="pill input w-full col-span-2" // className="pill input w-full col-span-2"
// minLength={2} // minLength={2}
// maxLength={64} // maxLength={64}
// placeholder="Paste a URL or video ID..." // placeholder="Paste a URL or video ID..."
// value={youtubeId} // value={youtubeId}
// onChange={(e) => { // onChange={(e) => {
// const val = e.target.value; // const val = e.target.value;
// const match = val.match(/(?:youtube\.com\/(?:watch\?v=|shorts\/|embed\/)|youtu\.be\/)([a-zA-Z0-9_-]{11})/); // const match = val.match(/(?:youtube\.com\/(?:watch\?v=|shorts\/|embed\/)|youtu\.be\/)([a-zA-Z0-9_-]{11})/);
// setYouTubeId(match ? match[1] : val); // setYouTubeId(match ? match[1] : val);
// }} // }}
// /> // />
// </div> // </div>
// <MiiEditor instructions={instructions} /> // <MiiEditor instructions={instructions} />
// <SwitchSubmitTutorialButton /> // <SwitchSubmitTutorialButton />
// </> // </>
// )} // )}
// {/* Separator */} // {/* Separator */}
// <div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-8"> // <div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-8">
// <hr className="grow border-zinc-300" /> // <hr className="grow border-zinc-300" />
// <span>Custom images</span> // <span>Custom images</span>
// <hr className="grow border-zinc-300" /> // <hr className="grow border-zinc-300" />
// </div> // </div>
// <div className="max-w-md w-full self-center"> // <div className="max-w-md w-full self-center">
// <Dropzone onDrop={handleDrop}> // <Dropzone onDrop={handleDrop}>
// <p className="text-center text-sm"> // <p className="text-center text-sm">
// Drag and drop your images here // Drag and drop your images here
// <br /> // <br />
// or click to open // or click to open
// </p> // </p>
// </Dropzone> // </Dropzone>
// </div> // </div>
// <ImageList files={files} setFiles={handleFilesChange} /> // <ImageList files={files} setFiles={handleFilesChange} />
// <hr className="border-zinc-300 my-2" /> // <hr className="border-zinc-300 my-2" />
// <div className="flex justify-between items-center"> // <div className="flex justify-between items-center">
// {error && <span className="text-red-400 font-bold">Error: {error}</span>} // {error && <span className="text-red-400 font-bold">Error: {error}</span>}
// <SubmitButton onClick={handleSubmit} text="Edit" className="ml-auto" /> // <SubmitButton onClick={handleSubmit} text="Edit" className="ml-auto" />
// </div> // </div>
// </div> // </div>
// </div> // </div>
// ); // );
// } // }

228
frontend/src/components/submit-form/image-editor.tsx
View file

@ -1,114 +1,114 @@
import { useCallback, useEffect, useRef, useState } from "react"; import { useCallback, useEffect, useRef, useState } from "react";
import ReactCrop, { type Crop } from "react-image-crop"; import ReactCrop, { type Crop } from "react-image-crop";
import { Icon } from "@iconify/react"; import { Icon } from "@iconify/react";
interface Props { interface Props {
isOpen: boolean; isOpen: boolean;
setIsOpen: React.Dispatch<React.SetStateAction<boolean>>; setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
image: string | undefined; image: string | undefined;
setImage: (value: string | undefined) => void; setImage: (value: string | undefined) => void;
} }
export default function ImageEditorPortrait({ isOpen, setIsOpen, image, setImage }: Props) { export default function ImageEditorPortrait({ isOpen, setIsOpen, image, setImage }: Props) {
const [isVisible, setIsVisible] = useState(false); const [isVisible, setIsVisible] = useState(false);
const [crop, setCrop] = useState<Crop>(); const [crop, setCrop] = useState<Crop>();
const imageRef = useRef<HTMLImageElement>(null); const imageRef = useRef<HTMLImageElement>(null);
const canvasRef = useRef<HTMLCanvasElement>(null); const canvasRef = useRef<HTMLCanvasElement>(null);
const applyCrop = useCallback(() => { const applyCrop = useCallback(() => {
if (!imageRef.current || !canvasRef.current || !crop) return; if (!imageRef.current || !canvasRef.current || !crop) return;
const image = imageRef.current; const image = imageRef.current;
const canvas = canvasRef.current; const canvas = canvasRef.current;
if (!crop.width || !crop.height || image.naturalWidth === 0 || image.naturalHeight === 0) return; if (!crop.width || !crop.height || image.naturalWidth === 0 || image.naturalHeight === 0) return;
const ctx = canvas.getContext("2d"); const ctx = canvas.getContext("2d");
if (!ctx) return; if (!ctx) return;
const scaleX = image.naturalWidth / image.width; const scaleX = image.naturalWidth / image.width;
const scaleY = image.naturalHeight / image.height; const scaleY = image.naturalHeight / image.height;
canvas.width = crop.width * scaleX; canvas.width = crop.width * scaleX;
canvas.height = crop.height * scaleY; canvas.height = crop.height * scaleY;
ctx.drawImage(image, crop.x * scaleX, crop.y * scaleY, crop.width * scaleX, crop.height * scaleY, 0, 0, crop.width * scaleX, crop.height * scaleY); ctx.drawImage(image, crop.x * scaleX, crop.y * scaleY, crop.width * scaleX, crop.height * scaleY, 0, 0, crop.width * scaleX, crop.height * scaleY);
setImage(canvas.toDataURL()); setImage(canvas.toDataURL());
setCrop(undefined); setCrop(undefined);
}, [crop, setImage]); }, [crop, setImage]);
const rotate = () => { const rotate = () => {
if (!imageRef.current || !canvasRef.current) return; if (!imageRef.current || !canvasRef.current) return;
const image = imageRef.current; const image = imageRef.current;
const canvas = canvasRef.current; const canvas = canvasRef.current;
const ctx = canvas.getContext("2d"); const ctx = canvas.getContext("2d");
if (!ctx) return; if (!ctx) return;
canvas.width = image.naturalHeight; canvas.width = image.naturalHeight;
canvas.height = image.naturalWidth; canvas.height = image.naturalWidth;
ctx.translate(canvas.width / 2, canvas.height / 2); ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.rotate(Math.PI / 2); ctx.rotate(Math.PI / 2);
ctx.drawImage(image, -image.naturalWidth / 2, -image.naturalHeight / 2); ctx.drawImage(image, -image.naturalWidth / 2, -image.naturalHeight / 2);
setImage(canvas.toDataURL()); setImage(canvas.toDataURL());
}; };
const close = () => { const close = () => {
setIsVisible(false); setIsVisible(false);
setTimeout(() => { setTimeout(() => {
setIsOpen(false); setIsOpen(false);
}, 300); }, 300);
}; };
useEffect(() => { useEffect(() => {
if (isOpen) { if (isOpen) {
// slight delay to trigger animation // slight delay to trigger animation
setTimeout(() => setIsVisible(true), 10); setTimeout(() => setIsVisible(true), 10);
} }
}, [isOpen]); }, [isOpen]);
return ( return (
<div className={`fixed inset-0 h-[calc(100%-var(--header-height))] top-(--header-height) flex items-center justify-center z-40 ${!isOpen ? "hidden" : ""}`}> <div className={`fixed inset-0 h-[calc(100%-var(--header-height))] top-(--header-height) flex items-center justify-center z-40 ${!isOpen ? "hidden" : ""}`}>
<div <div
onClick={close} onClick={close}
className={`z-40 absolute inset-0 backdrop-brightness-75 backdrop-blur-xs transition-opacity duration-300 ${isVisible ? "opacity-100" : "opacity-0"}`} className={`z-40 absolute inset-0 backdrop-brightness-75 backdrop-blur-xs transition-opacity duration-300 ${isVisible ? "opacity-100" : "opacity-0"}`}
/> />
<div <div
className={`z-50 bg-orange-50 border-2 border-amber-500 rounded-2xl shadow-lg p-6 w-full max-w-md transition-discrete duration-300 ${ className={`z-50 bg-orange-50 border-2 border-amber-500 rounded-2xl shadow-lg p-6 w-full max-w-md transition-discrete duration-300 ${
isVisible ? "scale-100 opacity-100" : "scale-75 opacity-0" isVisible ? "scale-100 opacity-100" : "scale-75 opacity-0"
}`} }`}
> >
<div className="flex justify-between items-center mb-2"> <div className="flex justify-between items-center mb-2">
<h2 className="text-xl font-bold">Edit Image</h2> <h2 className="text-xl font-bold">Edit Image</h2>
<button type="button" aria-label="Close" onClick={close} className="text-red-400 hover:text-red-500 text-2xl cursor-pointer"> <button type="button" aria-label="Close" onClick={close} className="text-red-400 hover:text-red-500 text-2xl cursor-pointer">
<Icon icon="material-symbols:close-rounded" /> <Icon icon="material-symbols:close-rounded" />
</button> </button>
</div> </div>
<div className="relative w-full flex justify-center"> <div className="relative w-full flex justify-center">
<ReactCrop crop={crop} onChange={(c) => setCrop(c)} className="rounded-2xl border-2 border-amber-500 overflow-hidden max-h-96"> <ReactCrop crop={crop} onChange={(c) => setCrop(c)} className="rounded-2xl border-2 border-amber-500 overflow-hidden max-h-96">
<img ref={imageRef} src={image} /> <img ref={imageRef} src={image} />
</ReactCrop> </ReactCrop>
<canvas ref={canvasRef} className="hidden" /> <canvas ref={canvasRef} className="hidden" />
</div> </div>
<div className="mt-4 flex justify-center gap-2"> <div className="mt-4 flex justify-center gap-2">
<button type="button" onClick={close} className="pill button"> <button type="button" onClick={close} className="pill button">
Done Done
</button> </button>
<button type="button" onClick={applyCrop} className="pill button"> <button type="button" onClick={applyCrop} className="pill button">
Crop Crop
</button> </button>
<button type="button" onClick={rotate} className="pill button"> <button type="button" onClick={rotate} className="pill button">
Rotate Rotate
</button> </button>
</div> </div>
</div> </div>
</div> </div>
); );
} }

146
frontend/src/components/submit-form/image-list.tsx
View file

@ -1,73 +1,73 @@
import { type FileWithPath } from "react-dropzone"; import { type FileWithPath } from "react-dropzone";
import { DragDropContext, Draggable, Droppable, type DropResult } from "@hello-pangea/dnd"; import { DragDropContext, Draggable, Droppable, type DropResult } from "@hello-pangea/dnd";
import { Icon } from "@iconify/react"; import { Icon } from "@iconify/react";
interface Props { interface Props {
files: readonly FileWithPath[]; files: readonly FileWithPath[];
setFiles: React.Dispatch<React.SetStateAction<FileWithPath[]>>; setFiles: React.Dispatch<React.SetStateAction<FileWithPath[]>>;
} }
export default function ImageList({ files, setFiles }: Props) { export default function ImageList({ files, setFiles }: Props) {
const handleDelete = (index: number) => { const handleDelete = (index: number) => {
const newFiles = [...files]; const newFiles = [...files];
newFiles.splice(index, 1); newFiles.splice(index, 1);
setFiles(newFiles); setFiles(newFiles);
}; };
const handleDragEnd = (result: DropResult) => { const handleDragEnd = (result: DropResult) => {
if (!result.destination) return; if (!result.destination) return;
const items = Array.from(files); const items = Array.from(files);
const [reorderedItem] = items.splice(result.source.index, 1); const [reorderedItem] = items.splice(result.source.index, 1);
items.splice(result.destination.index, 0, reorderedItem); items.splice(result.destination.index, 0, reorderedItem);
setFiles(items); setFiles(items);
}; };
return ( return (
<DragDropContext onDragEnd={handleDragEnd}> <DragDropContext onDragEnd={handleDragEnd}>
<Droppable droppableId="imageDroppable"> <Droppable droppableId="imageDroppable">
{(provided) => ( {(provided) => (
<div ref={provided.innerRef} {...provided.droppableProps} className="flex flex-col px-12 max-lg:px-0 max-md:px-12 max-[32rem]:px-0"> <div ref={provided.innerRef} {...provided.droppableProps} className="flex flex-col px-12 max-lg:px-0 max-md:px-12 max-[32rem]:px-0">
{files.map((file, index) => ( {files.map((file, index) => (
<Draggable key={file.name} draggableId={file.name} index={index}> <Draggable key={file.name} draggableId={file.name} index={index}>
{(provided) => ( {(provided) => (
<div <div
ref={provided.innerRef} ref={provided.innerRef}
{...provided.draggableProps} {...provided.draggableProps}
className="w-full p-4 rounded-xl bg-orange-100 border-2 border-amber-500 flex gap-2 shadow-md my-1" className="w-full p-4 rounded-xl bg-orange-100 border-2 border-amber-500 flex gap-2 shadow-md my-1"
> >
<img <img
src={URL.createObjectURL(file)} src={URL.createObjectURL(file)}
alt={file.name} alt={file.name}
width={96} width={96}
height={96} height={96}
className="aspect-3/2 object-contain w-24 rounded-md bg-orange-300 border-2 border-orange-400" className="aspect-3/2 object-contain w-24 rounded-md bg-orange-300 border-2 border-orange-400"
/> />
<div className="flex flex-col justify-center w-full min-w-0"> <div className="flex flex-col justify-center w-full min-w-0">
<span className="font-semibold overflow-hidden text-ellipsis">{file.name}</span> <span className="font-semibold overflow-hidden text-ellipsis">{file.name}</span>
<button <button
onClick={() => handleDelete(index)} onClick={() => handleDelete(index)}
className="pill button text-xs w-min px-3! py-1! bg-red-300! border-red-400! hover:bg-red-400!" className="pill button text-xs w-min px-3! py-1! bg-red-300! border-red-400! hover:bg-red-400!"
> >
Delete Delete
</button> </button>
</div> </div>
<div <div
{...provided.dragHandleProps} {...provided.dragHandleProps}
className="h-full w-11 px-1 cursor-grab flex items-center justify-center rounded transition-colors hover:bg-black/10" className="h-full w-11 px-1 cursor-grab flex items-center justify-center rounded transition-colors hover:bg-black/10"
> >
<Icon icon="tabler:grip-horizontal" className="size-6 text-black/50" /> <Icon icon="tabler:grip-horizontal" className="size-6 text-black/50" />
</div> </div>
</div> </div>
)} )}
</Draggable> </Draggable>
))} ))}
{provided.placeholder} {provided.placeholder}
</div> </div>
)} )}
</Droppable> </Droppable>
</DragDropContext> </DragDropContext>
); );
} }

2
frontend/src/components/submit-form/index.tsx
View file

@ -101,7 +101,7 @@ export default function SubmitForm() {
formData.append("instructions", JSON.stringify(instructions.current)); formData.append("instructions", JSON.stringify(instructions.current));
} }
const response = await fetch(`${import.meta.env.PUBLIC_API_URL}/api/submit`, { const response = await fetch(`${import.meta.env.VITE_API_URL}/api/submit`, {
method: "POST", method: "POST",
body: formData, body: formData,
credentials: "include", credentials: "include",

248
frontend/src/components/submit-form/mii-editor/color-picker.tsx
View file

@ -1,124 +1,124 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { Icon } from "@iconify/react"; import { Icon } from "@iconify/react";
import { COLORS } from "@tomodachi-share/shared"; import { COLORS } from "@tomodachi-share/shared";
interface Props { interface Props {
disabled?: boolean; disabled?: boolean;
color: number; color: number;
setColor: (color: number) => void; setColor: (color: number) => void;
tab?: "hair" | "eyes" | "lips" | "glasses" | "eyeliner"; tab?: "hair" | "eyes" | "lips" | "glasses" | "eyeliner";
} }
export default function ColorPicker({ disabled, color, setColor, tab = "hair" }: Props) { export default function ColorPicker({ disabled, color, setColor, tab = "hair" }: Props) {
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
const [isVisible, setIsVisible] = useState(false); const [isVisible, setIsVisible] = useState(false);
const getExtraSlice = () => { const getExtraSlice = () => {
switch (tab) { switch (tab) {
case "hair": case "hair":
return { start: 0, end: 8 }; return { start: 0, end: 8 };
case "eyes": case "eyes":
return { start: 122, end: 128 }; return { start: 122, end: 128 };
case "lips": case "lips":
return { start: 128, end: 133 }; return { start: 128, end: 133 };
case "glasses": case "glasses":
return { start: 133, end: 139 }; return { start: 133, end: 139 };
case "eyeliner": case "eyeliner":
return { start: 139, end: 152 }; return { start: 139, end: 152 };
default: default:
return { start: 108, end: 122 }; return { start: 108, end: 122 };
} }
}; };
const close = () => { const close = () => {
setIsVisible(false); setIsVisible(false);
setTimeout(() => { setTimeout(() => {
setIsOpen(false); setIsOpen(false);
}, 300); }, 300);
}; };
useEffect(() => { useEffect(() => {
if (isOpen) { if (isOpen) {
// slight delay to trigger animation // slight delay to trigger animation
setTimeout(() => setIsVisible(true), 10); setTimeout(() => setIsVisible(true), 10);
} }
}, [isOpen]); }, [isOpen]);
return ( return (
<> <>
<button <button
type="button" type="button"
onClick={() => { onClick={() => {
if (isOpen) { if (isOpen) {
close(); close();
} else { } else {
setIsOpen(true); setIsOpen(true);
} }
}} }}
disabled={disabled} disabled={disabled}
className={`w-20 flex gap-1.5 mb-2 p-2 rounded-xl shadow ${disabled ? "bg-zinc-300 opacity-50 cursor-not-allowed" : "bg-zinc-100 cursor-pointer"}`} className={`w-20 flex gap-1.5 mb-2 p-2 rounded-xl shadow ${disabled ? "bg-zinc-300 opacity-50 cursor-not-allowed" : "bg-zinc-100 cursor-pointer"}`}
> >
<Icon icon={"material-symbols:palette"} className="text-xl" /> <Icon icon={"material-symbols:palette"} className="text-xl" />
<div className="grow rounded" style={{ backgroundColor: `#${COLORS[color]}` }}></div> <div className="grow rounded" style={{ backgroundColor: `#${COLORS[color]}` }}></div>
</button> </button>
{isOpen && ( {isOpen && (
<div <div
className={`absolute inset-0 z-10 w-full p-0.5 bg-orange-100 rounded-lg transition-transform duration-500 overflow-x-auto flex className={`absolute inset-0 z-10 w-full p-0.5 bg-orange-100 rounded-lg transition-transform duration-500 overflow-x-auto flex
${isVisible ? "opacity-100" : "opacity-0"}`} ${isVisible ? "opacity-100" : "opacity-0"}`}
style={{ style={{
transition: isVisible transition: isVisible
? "transform 500ms cubic-bezier(0.34, 1.28, 0.64, 1), opacity 300ms" ? "transform 500ms cubic-bezier(0.34, 1.28, 0.64, 1), opacity 300ms"
: "transform 1000ms cubic-bezier(0.55, 0, 0.45, 1), opacity 300ms", : "transform 1000ms cubic-bezier(0.55, 0, 0.45, 1), opacity 300ms",
}} }}
> >
<div className="w-max flex items-center justify-center grow shrink-0"> <div className="w-max flex items-center justify-center grow shrink-0">
<div className="mr-8 flex flex-col gap-0.5"> <div className="mr-8 flex flex-col gap-0.5">
{COLORS.slice(getExtraSlice().start, getExtraSlice().end).map((c, i) => { {COLORS.slice(getExtraSlice().start, getExtraSlice().end).map((c, i) => {
const actualIndex = i + getExtraSlice().start; const actualIndex = i + getExtraSlice().start;
return ( return (
<button <button
type="button" type="button"
key={actualIndex} key={actualIndex}
onClick={() => setColor(actualIndex)} onClick={() => setColor(actualIndex)}
className={`size-7.5 cursor-pointer rounded-md ring-orange-500 ring-offset-2 ${color === actualIndex ? "ring-2 z-10" : ""}`} className={`size-7.5 cursor-pointer rounded-md ring-orange-500 ring-offset-2 ${color === actualIndex ? "ring-2 z-10" : ""}`}
style={{ style={{
backgroundColor: `#${c}`, backgroundColor: `#${c}`,
opacity: isVisible ? 1 : 0, opacity: isVisible ? 1 : 0,
transform: isVisible ? "scale(1)" : "scale(0.7)", transform: isVisible ? "scale(1)" : "scale(0.7)",
transition: `opacity 250ms ease, transform 320ms cubic-bezier(0.34, 1.4, 0.64, 1)`, transition: `opacity 250ms ease, transform 320ms cubic-bezier(0.34, 1.4, 0.64, 1)`,
// stagger by column then row for a wave effect // stagger by column then row for a wave effect
transitionDelay: isVisible ? `${120 + (i % 10) * 18 + Math.floor(i / 10) * 10}ms` : "0ms", transitionDelay: isVisible ? `${120 + (i % 10) * 18 + Math.floor(i / 10) * 10}ms` : "0ms",
}} }}
></button> ></button>
); );
})} })}
</div> </div>
<div className="grid grid-cols-10 gap-0.5 overflow-x-auto"> <div className="grid grid-cols-10 gap-0.5 overflow-x-auto">
{COLORS.slice(8, 108).map((c, i) => ( {COLORS.slice(8, 108).map((c, i) => (
<button <button
type="button" type="button"
key={i + 8} key={i + 8}
onClick={() => setColor(i + 8)} onClick={() => setColor(i + 8)}
className={`size-7.5 cursor-pointer rounded-md ring-orange-500 ring-offset-2 ${color === i + 8 ? "ring-2 z-10" : ""}`} className={`size-7.5 cursor-pointer rounded-md ring-orange-500 ring-offset-2 ${color === i + 8 ? "ring-2 z-10" : ""}`}
style={{ style={{
backgroundColor: `#${c}`, backgroundColor: `#${c}`,
opacity: isVisible ? 1 : 0, opacity: isVisible ? 1 : 0,
transform: isVisible ? "scale(1)" : "scale(0.7)", transform: isVisible ? "scale(1)" : "scale(0.7)",
transition: `opacity 250ms ease, transform 320ms cubic-bezier(0.34, 1.4, 0.64, 1)`, transition: `opacity 250ms ease, transform 320ms cubic-bezier(0.34, 1.4, 0.64, 1)`,
transitionDelay: isVisible ? `${120 + (i % 10) * 18 + Math.floor(i / 10) * 10}ms` : "0ms", transitionDelay: isVisible ? `${120 + (i % 10) * 18 + Math.floor(i / 10) * 10}ms` : "0ms",
}} }}
></button> ></button>
))} ))}
</div> </div>
<button type="button" onClick={close} className="h-4/5 w-16 ml-4 cursor-pointer transition-transform hover:scale-115 active:scale-90"> <button type="button" onClick={close} className="h-4/5 w-16 ml-4 cursor-pointer transition-transform hover:scale-115 active:scale-90">
<Icon icon={"tabler:chevron-right"} className="text-4xl" /> <Icon icon={"tabler:chevron-right"} className="text-4xl" />
</button> </button>
</div> </div>
</div> </div>
)} )}
</> </>
); );
} }

156
frontend/src/components/submit-form/mii-editor/enhanced-slider.tsx
View file

@ -1,78 +1,78 @@
import { Icon } from "@iconify/react"; import { Icon } from "@iconify/react";
interface SliderProps { interface SliderProps {
label: string; label: string;
value: number; value: number;
onChange: (value: number) => void; onChange: (value: number) => void;
min?: number; min?: number;
max?: number; max?: number;
mid?: number; mid?: number;
step?: number; step?: number;
className?: string; className?: string;
} }
export default function EnhancedSlider({ label, value, onChange, min = 0, max = 128, mid = 64, step = 1, className = "" }: SliderProps) { export default function EnhancedSlider({ label, value, onChange, min = 0, max = 128, mid = 64, step = 1, className = "" }: SliderProps) {
const handleChange = (newValue: number) => { const handleChange = (newValue: number) => {
const clampedValue = Math.min(max, Math.max(min, newValue)); const clampedValue = Math.min(max, Math.max(min, newValue));
onChange(clampedValue); onChange(clampedValue);
}; };
const nudge = (direction: number) => { const nudge = (direction: number) => {
const newValue = value + direction * step; const newValue = value + direction * step;
handleChange(newValue); handleChange(newValue);
}; };
const displayValue = value - mid; const displayValue = value - mid;
const displayText = displayValue > 0 ? `+${displayValue}` : displayValue.toString(); const displayText = displayValue > 0 ? `+${displayValue}` : displayValue.toString();
const percentage = ((value - min) / (max - min)) * 100; const percentage = ((value - min) / (max - min)) * 100;
return ( return (
<div className={`w-full ${className}`}> <div className={`w-full ${className}`}>
<div className="flex justify-between items-center my-1 relative"> <div className="flex justify-between items-center my-1 relative">
<h3 className="text-sm font-semibold">{label}</h3> <h3 className="text-sm font-semibold">{label}</h3>
<span className="absolute left-1/2 transform -translate-x-1/2 text-xs font-bold text-orange-600 bg-orange-50 border-2 border-orange-400 px-2 py-1 rounded-full shadow-sm"> <span className="absolute left-1/2 transform -translate-x-1/2 text-xs font-bold text-orange-600 bg-orange-50 border-2 border-orange-400 px-2 py-1 rounded-full shadow-sm">
{displayText} {displayText}
</span> </span>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<button <button
type="button" type="button"
onClick={() => nudge(-1)} onClick={() => nudge(-1)}
disabled={value <= min} disabled={value <= min}
className="bg-orange-50 border-2 border-orange-400 text-orange-400 font-bold size-7 rounded-lg cursor-pointer flex items-center justify-center shrink-0 transition-transform not-disabled:active:scale-95 disabled:opacity-30 disabled:cursor-not-allowed hover:bg-orange-50" className="bg-orange-50 border-2 border-orange-400 text-orange-400 font-bold size-7 rounded-lg cursor-pointer flex items-center justify-center shrink-0 transition-transform not-disabled:active:scale-95 disabled:opacity-30 disabled:cursor-not-allowed hover:bg-orange-50"
aria-label={`Decrease ${label}`} aria-label={`Decrease ${label}`}
> >
<Icon icon="mdi:chevron-left" width="16" height="16" /> <Icon icon="mdi:chevron-left" width="16" height="16" />
</button> </button>
<div className="relative flex-1 h-8 flex items-center"> <div className="relative flex-1 h-8 flex items-center">
{/* Tick mark at center */} {/* Tick mark at center */}
<div className="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 w-0.5 h-3 bg-orange-400 rounded z-10 opacity-60"></div> <div className="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 w-0.5 h-3 bg-orange-400 rounded z-10 opacity-60"></div>
<input <input
type="range" type="range"
min={min} min={min}
max={max} max={max}
step={step} step={step}
value={value} value={value}
onChange={(e) => handleChange(e.target.valueAsNumber)} onChange={(e) => handleChange(e.target.valueAsNumber)}
className="w-full px-0.5 h-2 bg-orange-200 rounded-lg appearance-none cursor-pointer focus:outline-0" className="w-full px-0.5 h-2 bg-orange-200 rounded-lg appearance-none cursor-pointer focus:outline-0"
style={{ style={{
background: `linear-gradient(to right, #fb923c 0%, #fb923c ${percentage}%, #fed7aa ${percentage}%, #fed7aa 100%)`, background: `linear-gradient(to right, #fb923c 0%, #fb923c ${percentage}%, #fed7aa ${percentage}%, #fed7aa 100%)`,
}} }}
/> />
</div> </div>
<button <button
type="button" type="button"
onClick={() => nudge(1)} onClick={() => nudge(1)}
disabled={value >= max} disabled={value >= max}
className="bg-orange-50 border-2 border-orange-400 text-orange-400 font-bold size-7 rounded-lg cursor-pointer flex items-center justify-center shrink-0 transition-transform not-disabled:active:scale-95 disabled:opacity-30 disabled:cursor-not-allowed hover:bg-orange-50" className="bg-orange-50 border-2 border-orange-400 text-orange-400 font-bold size-7 rounded-lg cursor-pointer flex items-center justify-center shrink-0 transition-transform not-disabled:active:scale-95 disabled:opacity-30 disabled:cursor-not-allowed hover:bg-orange-50"
aria-label={`Increase ${label}`} aria-label={`Increase ${label}`}
> >
<Icon icon="mdi:chevron-right" width="16" height="16" /> <Icon icon="mdi:chevron-right" width="16" height="16" />
</button> </button>
</div> </div>
</div> </div>
); );
} }

160
frontend/src/components/submit-form/mii-editor/index.tsx
View file

@ -1,80 +1,80 @@
import { type SwitchMiiInstructions } from "@tomodachi-share/shared"; import { type SwitchMiiInstructions } from "@tomodachi-share/shared";
import React, { useState } from "react"; import React, { useState } from "react";
import { Icon } from "@iconify/react"; import { Icon } from "@iconify/react";
import HeadTab from "./tabs/head"; import HeadTab from "./tabs/head";
import HairTab from "./tabs/hair"; import HairTab from "./tabs/hair";
import EyebrowsTab from "./tabs/eyebrows"; import EyebrowsTab from "./tabs/eyebrows";
import EyesTab from "./tabs/eyes"; import EyesTab from "./tabs/eyes";
import NoseTab from "./tabs/nose"; import NoseTab from "./tabs/nose";
import LipsTab from "./tabs/lips"; import LipsTab from "./tabs/lips";
import EarsTab from "./tabs/ears"; import EarsTab from "./tabs/ears";
import GlassesTab from "./tabs/glasses"; import GlassesTab from "./tabs/glasses";
import OtherTab from "./tabs/other"; import OtherTab from "./tabs/other";
import MiscTab from "./tabs/misc"; import MiscTab from "./tabs/misc";
interface Props { interface Props {
instructions: React.RefObject<SwitchMiiInstructions>; instructions: React.RefObject<SwitchMiiInstructions>;
} }
type Tab = "head" | "hair" | "eyebrows" | "eyes" | "nose" | "lips" | "ears" | "glasses" | "other" | "misc"; type Tab = "head" | "hair" | "eyebrows" | "eyes" | "nose" | "lips" | "ears" | "glasses" | "other" | "misc";
export const TAB_ICONS: Record<Tab, string> = { export const TAB_ICONS: Record<Tab, string> = {
head: "mingcute:head-fill", head: "mingcute:head-fill",
hair: "mingcute:hair-fill", hair: "mingcute:hair-fill",
eyebrows: "material-symbols:eyebrow", eyebrows: "material-symbols:eyebrow",
eyes: "mdi:eye", eyes: "mdi:eye",
nose: "mingcute:nose-fill", nose: "mingcute:nose-fill",
lips: "material-symbols-light:lips", lips: "material-symbols-light:lips",
ears: "ion:ear", ears: "ion:ear",
glasses: "solar:glasses-bold", glasses: "solar:glasses-bold",
other: "mdi:sparkles", other: "mdi:sparkles",
misc: "material-symbols:settings", misc: "material-symbols:settings",
}; };
export const TAB_COMPONENTS: Record<Tab, React.ComponentType<any>> = { export const TAB_COMPONENTS: Record<Tab, React.ComponentType<any>> = {
head: HeadTab, head: HeadTab,
hair: HairTab, hair: HairTab,
eyebrows: EyebrowsTab, eyebrows: EyebrowsTab,
eyes: EyesTab, eyes: EyesTab,
nose: NoseTab, nose: NoseTab,
lips: LipsTab, lips: LipsTab,
ears: EarsTab, ears: EarsTab,
glasses: GlassesTab, glasses: GlassesTab,
other: OtherTab, other: OtherTab,
misc: MiscTab, misc: MiscTab,
}; };
export default function MiiEditor({ instructions }: Props) { export default function MiiEditor({ instructions }: Props) {
const [tab, setTab] = useState<Tab>("head"); const [tab, setTab] = useState<Tab>("head");
return ( return (
<> <>
<div className="w-full h-91 flex flex-col sm:flex-row bg-orange-100 border-2 border-orange-200 rounded-xl overflow-hidden"> <div className="w-full h-91 flex flex-col sm:flex-row bg-orange-100 border-2 border-orange-200 rounded-xl overflow-hidden">
<div className="w-full flex flex-row sm:flex-col max-sm:max-h-9 sm:max-w-9"> <div className="w-full flex flex-row sm:flex-col max-sm:max-h-9 sm:max-w-9">
{(Object.keys(TAB_COMPONENTS) as Tab[]).map((t) => ( {(Object.keys(TAB_COMPONENTS) as Tab[]).map((t) => (
<button <button
key={t} key={t}
type="button" type="button"
onClick={() => setTab(t)} onClick={() => setTab(t)}
className={`size-full aspect-square flex justify-center items-center text-[1.35rem] cursor-pointer bg-orange-200 hover:bg-orange-300 transition-colors duration-75 ${tab === t ? "bg-orange-100!" : ""}`} className={`size-full aspect-square flex justify-center items-center text-[1.35rem] cursor-pointer bg-orange-200 hover:bg-orange-300 transition-colors duration-75 ${tab === t ? "bg-orange-100!" : ""}`}
> >
{/* ml because of border on left causing icons to look miscentered */} {/* ml because of border on left causing icons to look miscentered */}
<Icon icon={TAB_ICONS[t]} className="-ml-0.5" /> <Icon icon={TAB_ICONS[t]} className="-ml-0.5" />
</button> </button>
))} ))}
</div> </div>
{/* Keep all tabs loaded to avoid flickering */} {/* Keep all tabs loaded to avoid flickering */}
{(Object.keys(TAB_COMPONENTS) as Tab[]).map((t) => { {(Object.keys(TAB_COMPONENTS) as Tab[]).map((t) => {
const TabComponent = TAB_COMPONENTS[t]; const TabComponent = TAB_COMPONENTS[t];
return ( return (
<div key={t} className={t === tab ? "grow relative p-3" : "hidden"}> <div key={t} className={t === tab ? "grow relative p-3" : "hidden"}>
<TabComponent instructions={instructions} /> <TabComponent instructions={instructions} />
</div> </div>
); );
})} })}
</div> </div>
</> </>
); );
} }

184
frontend/src/components/submit-form/mii-editor/number-inputs.tsx
View file

@ -1,92 +1,92 @@
import { Icon } from "@iconify/react"; import { Icon } from "@iconify/react";
import { useState } from "react"; import { useState } from "react";
interface Props { interface Props {
target: { height?: number; distance?: number; rotation?: number; size?: number; stretch?: number } | any; target: { height?: number; distance?: number; rotation?: number; size?: number; stretch?: number } | any;
} }
export default function NumberInputs({ target }: Props) { export default function NumberInputs({ target }: Props) {
const [values, setValues] = useState<Record<string, number>>({ const [values, setValues] = useState<Record<string, number>>({
height: target?.height ?? 0, height: target?.height ?? 0,
distance: target?.distance ?? 0, distance: target?.distance ?? 0,
rotation: target?.rotation ?? 0, rotation: target?.rotation ?? 0,
size: target?.size ?? 0, size: target?.size ?? 0,
stretch: target?.stretch ?? 0, stretch: target?.stretch ?? 0,
}); });
if (!target) return null; if (!target) return null;
return ( return (
<div className="grid grid-cols-2 gap-x-4 h-min w-fit"> <div className="grid grid-cols-2 gap-x-4 h-min w-fit">
{["Height", "Distance", "Rotation", "Size", "Stretch"].map( {["Height", "Distance", "Rotation", "Size", "Stretch"].map(
(label) => (label) =>
target[label.toLowerCase()] !== undefined && ( target[label.toLowerCase()] !== undefined && (
<NumberField <NumberField
key={label} key={label}
label={label} label={label}
value={values[label.toLowerCase()]} value={values[label.toLowerCase()]}
onChange={(value) => { onChange={(value) => {
const field = label.toLowerCase(); const field = label.toLowerCase();
setValues((prev) => ({ ...prev, [field]: value })); setValues((prev) => ({ ...prev, [field]: value }));
target[field] = value; target[field] = value;
}} }}
/> />
), ),
)} )}
</div> </div>
); );
} }
interface NumberFieldProps { interface NumberFieldProps {
label: string; label: string;
value: number; value: number;
onChange: (value: number) => void; onChange: (value: number) => void;
} }
function NumberField({ label, value, onChange }: NumberFieldProps) { function NumberField({ label, value, onChange }: NumberFieldProps) {
const MIN = -100; const MIN = -100;
const MAX = 100; const MAX = 100;
const decrement = () => onChange(Math.max(MIN, value - 1)); const decrement = () => onChange(Math.max(MIN, value - 1));
const increment = () => onChange(Math.min(MAX, value + 1)); const increment = () => onChange(Math.min(MAX, value + 1));
return ( return (
<div> <div>
<label htmlFor={label} className="text-xs"> <label htmlFor={label} className="text-xs">
{label} {label}
</label> </label>
<div className="pill input text-sm py-1! px-2! w-full flex items-center gap-1"> <div className="pill input text-sm py-1! px-2! w-full flex items-center gap-1">
<button <button
type="button" type="button"
onClick={decrement} onClick={decrement}
disabled={value <= MIN} disabled={value <= MIN}
className="cursor-pointer flex items-center justify-center shrink-0 disabled:opacity-30" className="cursor-pointer flex items-center justify-center shrink-0 disabled:opacity-30"
aria-label={`Decrease ${label}`} aria-label={`Decrease ${label}`}
> >
<Icon icon="mdi:minus" width="16" height="16" /> <Icon icon="mdi:minus" width="16" height="16" />
</button> </button>
<input <input
type="number" type="number"
id={label} id={label}
min={MIN} min={MIN}
max={MAX} max={MAX}
value={value} value={value}
onChange={(e) => { onChange={(e) => {
const val = Math.min(MAX, Math.max(MIN, Number(e.target.value))); const val = Math.min(MAX, Math.max(MIN, Number(e.target.value)));
onChange(val); onChange(val);
}} }}
className="w-full text-center bg-transparent outline-none [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none" className="w-full text-center bg-transparent outline-none [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
/> />
<button <button
type="button" type="button"
onClick={increment} onClick={increment}
disabled={value >= MAX} disabled={value >= MAX}
className="cursor-pointer flex items-center justify-center shrink-0 disabled:opacity-30" className="cursor-pointer flex items-center justify-center shrink-0 disabled:opacity-30"
aria-label={`Increase ${label}`} aria-label={`Increase ${label}`}
> >
<Icon icon="mdi:plus" width="16" height="16" /> <Icon icon="mdi:plus" width="16" height="16" />
</button> </button>
</div> </div>
</div> </div>
); );
} }

36
frontend/src/components/submit-form/mii-editor/tabs/ears.tsx
View file

@ -1,18 +1,18 @@
import { type SwitchMiiInstructions } from "@tomodachi-share/shared"; import { type SwitchMiiInstructions } from "@tomodachi-share/shared";
import NumberInputs from "../number-inputs"; import NumberInputs from "../number-inputs";
interface EarsProps { interface EarsProps {
instructions: React.RefObject<SwitchMiiInstructions>; instructions: React.RefObject<SwitchMiiInstructions>;
} }
export default function EarsTab({ instructions }: EarsProps) { export default function EarsTab({ instructions }: EarsProps) {
return ( return (
<> <>
<h1 className="absolute font-bold text-xl">Ears</h1> <h1 className="absolute font-bold text-xl">Ears</h1>
<div className="size-full flex flex-col justify-center items-center"> <div className="size-full flex flex-col justify-center items-center">
<NumberInputs target={instructions.current.ears} /> <NumberInputs target={instructions.current.ears} />
</div> </div>
</> </>
); );
} }

58
frontend/src/components/submit-form/mii-editor/tabs/eyebrows.tsx
View file

@ -1,29 +1,29 @@
import { useState } from "react"; import { useState } from "react";
import { type SwitchMiiInstructions } from "@tomodachi-share/shared"; import { type SwitchMiiInstructions } from "@tomodachi-share/shared";
import ColorPicker from "../color-picker"; import ColorPicker from "../color-picker";
import NumberInputs from "../number-inputs"; import NumberInputs from "../number-inputs";
interface Props { interface Props {
instructions: React.RefObject<SwitchMiiInstructions>; instructions: React.RefObject<SwitchMiiInstructions>;
} }
export default function EyebrowsTab({ instructions }: Props) { export default function EyebrowsTab({ instructions }: Props) {
const [color, setColor] = useState(instructions.current.eyebrows.color ?? 3); const [color, setColor] = useState(instructions.current.eyebrows.color ?? 3);
return ( return (
<> <>
<h1 className="absolute font-bold text-xl">Eyebrows</h1> <h1 className="absolute font-bold text-xl">Eyebrows</h1>
<div className="size-full flex flex-col justify-center items-center"> <div className="size-full flex flex-col justify-center items-center">
<ColorPicker <ColorPicker
color={color} color={color}
setColor={(i) => { setColor={(i) => {
setColor(i); setColor(i);
instructions.current.eyebrows.color = i; instructions.current.eyebrows.color = i;
}} }}
/> />
<NumberInputs target={instructions.current.eyebrows} /> <NumberInputs target={instructions.current.eyebrows} />
</div> </div>
</> </>
); );
} }

134
frontend/src/components/submit-form/mii-editor/tabs/eyes.tsx
View file

@ -1,67 +1,67 @@
import { type SwitchMiiInstructions } from "@tomodachi-share/shared"; import { type SwitchMiiInstructions } from "@tomodachi-share/shared";
import { useState } from "react"; import { useState } from "react";
import ColorPicker from "../color-picker"; import ColorPicker from "../color-picker";
import NumberInputs from "../number-inputs"; import NumberInputs from "../number-inputs";
interface Props { interface Props {
instructions: React.RefObject<SwitchMiiInstructions>; instructions: React.RefObject<SwitchMiiInstructions>;
} }
const TABS: { name: keyof SwitchMiiInstructions["eyes"]; colorsDisabled?: boolean }[] = [ const TABS: { name: keyof SwitchMiiInstructions["eyes"]; colorsDisabled?: boolean }[] = [
{ name: "main" }, { name: "main" },
{ name: "eyelashesTop", colorsDisabled: true }, { name: "eyelashesTop", colorsDisabled: true },
{ name: "eyelashesBottom", colorsDisabled: true }, { name: "eyelashesBottom", colorsDisabled: true },
{ name: "eyelidTop", colorsDisabled: true }, { name: "eyelidTop", colorsDisabled: true },
{ name: "eyelidBottom", colorsDisabled: true }, { name: "eyelidBottom", colorsDisabled: true },
{ name: "eyeliner" }, { name: "eyeliner" },
{ name: "pupil", colorsDisabled: true }, { name: "pupil", colorsDisabled: true },
]; ];
export default function EyesTab({ instructions }: Props) { export default function EyesTab({ instructions }: Props) {
const [tab, setTab] = useState(0); const [tab, setTab] = useState(0);
const [colors, setColors] = useState<number[]>(() => const [colors, setColors] = useState<number[]>(() =>
TABS.map((t) => { TABS.map((t) => {
const entry = instructions.current.eyes[t.name] ?? {}; const entry = instructions.current.eyes[t.name] ?? {};
const color = entry && "color" in entry ? entry.color : null; const color = entry && "color" in entry ? entry.color : null;
return color ?? 122; return color ?? 122;
}), }),
); );
const currentTab = TABS[tab]; const currentTab = TABS[tab];
const setColor = (value: number) => { const setColor = (value: number) => {
setColors((prev) => { setColors((prev) => {
const copy = [...prev]; const copy = [...prev];
copy[tab] = value; copy[tab] = value;
return copy; return copy;
}); });
if (!currentTab.colorsDisabled) (instructions.current.eyes[currentTab.name] as { color: number }).color = value; if (!currentTab.colorsDisabled) (instructions.current.eyes[currentTab.name] as { color: number }).color = value;
}; };
return ( return (
<> <>
<h1 className="absolute font-bold text-xl">Eyes</h1> <h1 className="absolute font-bold text-xl">Eyes</h1>
<div className="absolute right-3 z-10 flex justify-end"> <div className="absolute right-3 z-10 flex justify-end">
<div className="rounded-2xl bg-orange-200"> <div className="rounded-2xl bg-orange-200">
{TABS.map((_, i) => ( {TABS.map((_, i) => (
<button <button
key={i} key={i}
type="button" type="button"
onClick={() => setTab(i)} onClick={() => setTab(i)}
className={`px-3 py-1 rounded-2xl cursor-pointer hover:bg-orange-300/50 transition-colors duration-75 ${tab === i ? "bg-orange-300!" : "orange-200"}`} className={`px-3 py-1 rounded-2xl cursor-pointer hover:bg-orange-300/50 transition-colors duration-75 ${tab === i ? "bg-orange-300!" : "orange-200"}`}
> >
{i + 1} {i + 1}
</button> </button>
))} ))}
</div> </div>
</div> </div>
<div className="absolute inset-0 flex flex-col justify-center items-center"> <div className="absolute inset-0 flex flex-col justify-center items-center">
<ColorPicker disabled={currentTab.colorsDisabled} color={colors[tab]} setColor={setColor} tab={tab === 5 ? "eyeliner" : "eyes"} /> <ColorPicker disabled={currentTab.colorsDisabled} color={colors[tab]} setColor={setColor} tab={tab === 5 ? "eyeliner" : "eyes"} />
<NumberInputs key={tab} target={instructions.current.eyes[currentTab.name]} /> <NumberInputs key={tab} target={instructions.current.eyes[currentTab.name]} />
</div> </div>
</> </>
); );
} }

78
frontend/src/components/submit-form/mii-editor/tabs/glasses.tsx
View file

@ -1,39 +1,39 @@
import { useState } from "react"; import { useState } from "react";
import { type SwitchMiiInstructions } from "@tomodachi-share/shared"; import { type SwitchMiiInstructions } from "@tomodachi-share/shared";
import ColorPicker from "../color-picker"; import ColorPicker from "../color-picker";
import NumberInputs from "../number-inputs"; import NumberInputs from "../number-inputs";
interface Props { interface Props {
instructions: React.RefObject<SwitchMiiInstructions>; instructions: React.RefObject<SwitchMiiInstructions>;
} }
export default function GlassesTab({ instructions }: Props) { export default function GlassesTab({ instructions }: Props) {
const [ringColor, setRingColor] = useState(instructions.current.glasses.ringColor ?? 133); const [ringColor, setRingColor] = useState(instructions.current.glasses.ringColor ?? 133);
const [shadesColor, setShadesColor] = useState(instructions.current.glasses.shadesColor ?? 133); const [shadesColor, setShadesColor] = useState(instructions.current.glasses.shadesColor ?? 133);
return ( return (
<> <>
<h1 className="absolute font-bold text-xl">Glasses</h1> <h1 className="absolute font-bold text-xl">Glasses</h1>
<div className="size-full flex flex-col justify-center items-center"> <div className="size-full flex flex-col justify-center items-center">
<ColorPicker <ColorPicker
color={ringColor} color={ringColor}
setColor={(i) => { setColor={(i) => {
setRingColor(i); setRingColor(i);
instructions.current.glasses.ringColor = i; instructions.current.glasses.ringColor = i;
}} }}
tab="glasses" tab="glasses"
/> />
<ColorPicker <ColorPicker
color={shadesColor} color={shadesColor}
setColor={(i) => { setColor={(i) => {
setShadesColor(i); setShadesColor(i);
instructions.current.glasses.shadesColor = i; instructions.current.glasses.shadesColor = i;
}} }}
tab="glasses" tab="glasses"
/> />
<NumberInputs target={instructions.current.glasses} /> <NumberInputs target={instructions.current.glasses} />
</div> </div>
</> </>
); );
} }

258
frontend/src/components/submit-form/mii-editor/tabs/hair.tsx
View file

@ -1,129 +1,129 @@
import { type SwitchMiiInstructions } from "@tomodachi-share/shared"; import { type SwitchMiiInstructions } from "@tomodachi-share/shared";
import { useState } from "react"; import { useState } from "react";
import ColorPicker from "../color-picker"; import ColorPicker from "../color-picker";
interface Props { interface Props {
instructions: React.RefObject<SwitchMiiInstructions>; instructions: React.RefObject<SwitchMiiInstructions>;
} }
type Tab = "sets" | "bangs" | "back"; type Tab = "sets" | "bangs" | "back";
export default function HairTab({ instructions }: Props) { export default function HairTab({ instructions }: Props) {
const [tab, setTab] = useState<Tab>("sets"); const [tab, setTab] = useState<Tab>("sets");
const [color, setColor] = useState(instructions.current.hair.color ?? 3); const [color, setColor] = useState(instructions.current.hair.color ?? 3);
const [subColor, setSubColor] = useState<number | null>(instructions.current.hair.subColor); const [subColor, setSubColor] = useState<number | null>(instructions.current.hair.subColor);
const [subColor2, setSubColor2] = useState<number | null>(instructions.current.hair.subColor2); const [subColor2, setSubColor2] = useState<number | null>(instructions.current.hair.subColor2);
const [style, setStyle] = useState<number | null>(instructions.current.hair.style); const [style, setStyle] = useState<number | null>(instructions.current.hair.style);
const [isFlipped, setIsFlipped] = useState(instructions.current.hair.isFlipped); const [isFlipped, setIsFlipped] = useState(instructions.current.hair.isFlipped);
return ( return (
<> <>
<h1 className="absolute font-bold text-xl">Hair</h1> <h1 className="absolute font-bold text-xl">Hair</h1>
<div className="absolute right-3 z-10 flex justify-end"> <div className="absolute right-3 z-10 flex justify-end">
<button <button
type="button" type="button"
onClick={() => setTab("sets")} onClick={() => setTab("sets")}
className={`px-3 py-1 rounded-2xl bg-orange-200 mr-1 cursor-pointer hover:bg-orange-300/50 transition-colors duration-75 ${tab === "sets" ? "bg-orange-300!" : "orange-200"}`} className={`px-3 py-1 rounded-2xl bg-orange-200 mr-1 cursor-pointer hover:bg-orange-300/50 transition-colors duration-75 ${tab === "sets" ? "bg-orange-300!" : "orange-200"}`}
> >
Sets Sets
</button> </button>
<div className="rounded-2xl bg-orange-200 flex"> <div className="rounded-2xl bg-orange-200 flex">
<button <button
type="button" type="button"
onClick={() => setTab("bangs")} onClick={() => setTab("bangs")}
className={`px-3 py-1 rounded-2xl cursor-pointer hover:bg-orange-300/50 transition-colors duration-75 ${tab === "bangs" ? "bg-orange-300!" : "orange-200"}`} className={`px-3 py-1 rounded-2xl cursor-pointer hover:bg-orange-300/50 transition-colors duration-75 ${tab === "bangs" ? "bg-orange-300!" : "orange-200"}`}
> >
Bangs Bangs
</button> </button>
<button <button
type="button" type="button"
onClick={() => setTab("back")} onClick={() => setTab("back")}
className={`px-3 py-1 rounded-2xl cursor-pointer hover:bg-orange-300/50 transition-colors duration-75 ${tab === "back" ? "bg-orange-300!" : "orange-200"}`} className={`px-3 py-1 rounded-2xl cursor-pointer hover:bg-orange-300/50 transition-colors duration-75 ${tab === "back" ? "bg-orange-300!" : "orange-200"}`}
> >
Back Back
</button> </button>
</div> </div>
</div> </div>
<div className="absolute inset-0 flex flex-col justify-center items-center"> <div className="absolute inset-0 flex flex-col justify-center items-center">
<ColorPicker <ColorPicker
color={color} color={color}
setColor={(i) => { setColor={(i) => {
setColor(i); setColor(i);
instructions.current.hair.color = i; instructions.current.hair.color = i;
}} }}
/> />
<div className="flex gap-1.5 items-center mb-2"> <div className="flex gap-1.5 items-center mb-2">
<input <input
type="checkbox" type="checkbox"
id="subcolor" id="subcolor"
className="checkbox" className="checkbox"
checked={tab === "back" ? subColor2 !== null : subColor !== null} checked={tab === "back" ? subColor2 !== null : subColor !== null}
onChange={(e) => { onChange={(e) => {
if (tab === "back") { if (tab === "back") {
setSubColor2(e.target.checked ? 0 : null); setSubColor2(e.target.checked ? 0 : null);
instructions.current.hair.subColor2 = e.target.checked ? 0 : null; instructions.current.hair.subColor2 = e.target.checked ? 0 : null;
} else { } else {
setSubColor(e.target.checked ? 0 : null); setSubColor(e.target.checked ? 0 : null);
instructions.current.hair.subColor = e.target.checked ? 0 : null; instructions.current.hair.subColor = e.target.checked ? 0 : null;
} }
}} }}
/> />
<label htmlFor="subcolor" className="text-xs"> <label htmlFor="subcolor" className="text-xs">
Sub color Sub color
</label> </label>
</div> </div>
<ColorPicker <ColorPicker
disabled={tab === "back" ? subColor2 === null : subColor === null} disabled={tab === "back" ? subColor2 === null : subColor === null}
color={tab === "back" ? (subColor2 ?? 0) : (subColor ?? 0)} color={tab === "back" ? (subColor2 ?? 0) : (subColor ?? 0)}
setColor={(i) => { setColor={(i) => {
if (tab === "back") { if (tab === "back") {
setSubColor2(i); setSubColor2(i);
instructions.current.hair.subColor2 = i; instructions.current.hair.subColor2 = i;
} else { } else {
setSubColor(i); setSubColor(i);
instructions.current.hair.subColor = i; instructions.current.hair.subColor = i;
} }
}} }}
/> />
<p className="text-sm mb-1">Tying style</p> <p className="text-sm mb-1">Tying style</p>
<div className="grid grid-cols-3 gap-0.5"> <div className="grid grid-cols-3 gap-0.5">
{Array.from({ length: 3 }).map((_, i) => ( {Array.from({ length: 3 }).map((_, i) => (
<button <button
type="button" type="button"
key={i} key={i}
onClick={() => { onClick={() => {
setStyle(i + 1); setStyle(i + 1);
instructions.current.hair.style = i + 1; instructions.current.hair.style = i + 1;
}} }}
className={`size-full aspect-square cursor-pointer hover:bg-orange-300 transition-colors duration-100 rounded-lg ${style === i + 1 ? "bg-orange-400!" : ""}`} className={`size-full aspect-square cursor-pointer hover:bg-orange-300 transition-colors duration-100 rounded-lg ${style === i + 1 ? "bg-orange-400!" : ""}`}
> >
{i + 1} {i + 1}
</button> </button>
))} ))}
</div> </div>
<div className="flex gap-1.5 items-center mt-4"> <div className="flex gap-1.5 items-center mt-4">
<input <input
type="checkbox" type="checkbox"
id="subcolor" id="subcolor"
className="checkbox" className="checkbox"
checked={isFlipped} checked={isFlipped}
onChange={(e) => { onChange={(e) => {
setIsFlipped(e.target.checked); setIsFlipped(e.target.checked);
instructions.current.hair.isFlipped = e.target.checked; instructions.current.hair.isFlipped = e.target.checked;
}} }}
/> />
<label htmlFor="subcolor" className="text-xs"> <label htmlFor="subcolor" className="text-xs">
Flip Flip
</label> </label>
</div> </div>
</div> </div>
</> </>
); );
} }

88
frontend/src/components/submit-form/mii-editor/tabs/head.tsx
View file

@ -1,44 +1,44 @@
import { useState } from "react"; import { useState } from "react";
import ColorPicker from "../color-picker"; import ColorPicker from "../color-picker";
import { type SwitchMiiInstructions } from "@tomodachi-share/shared"; import { type SwitchMiiInstructions } from "@tomodachi-share/shared";
interface Props { interface Props {
instructions: React.RefObject<SwitchMiiInstructions>; instructions: React.RefObject<SwitchMiiInstructions>;
} }
const COLORS = ["FFD8BA", "FFD5AC", "FEC1A4", "FEC68F", "FEB089", "FEBA6B", "F39866", "E89854", "E37E3F", "B45627", "914220", "59371F", "662D16", "392D1E"]; const COLORS = ["FFD8BA", "FFD5AC", "FEC1A4", "FEC68F", "FEB089", "FEBA6B", "F39866", "E89854", "E37E3F", "B45627", "914220", "59371F", "662D16", "392D1E"];
export default function HeadTab({ instructions }: Props) { export default function HeadTab({ instructions }: Props) {
const [color, setColor] = useState(instructions.current.head.skinColor ?? 109); const [color, setColor] = useState(instructions.current.head.skinColor ?? 109);
return ( return (
<> <>
<h1 className="absolute font-bold text-xl">Head</h1> <h1 className="absolute font-bold text-xl">Head</h1>
<div className="size-full flex flex-col justify-center items-center"> <div className="size-full flex flex-col justify-center items-center">
<ColorPicker <ColorPicker
color={color} color={color}
setColor={(i) => { setColor={(i) => {
setColor(i); setColor(i);
instructions.current.head.skinColor = i; instructions.current.head.skinColor = i;
}} }}
/> />
<div className="grid grid-cols-7 gap-1"> <div className="grid grid-cols-7 gap-1">
{COLORS.map((hex, i) => ( {COLORS.map((hex, i) => (
<button <button
type="button" type="button"
key={i + 108} key={i + 108}
onClick={() => { onClick={() => {
setColor(i + 108); setColor(i + 108);
instructions.current.head.skinColor = i + 108; instructions.current.head.skinColor = i + 108;
}} }}
className={`size-9 rounded-lg cursor-pointer ring-offset-2 ring-orange-500 ${color === i + 108 ? "ring-2" : ""}`} className={`size-9 rounded-lg cursor-pointer ring-offset-2 ring-orange-500 ${color === i + 108 ? "ring-2" : ""}`}
style={{ backgroundColor: `#${hex}` }} style={{ backgroundColor: `#${hex}` }}
></button> ></button>
))} ))}
</div> </div>
</div> </div>
</> </>
); );
} }

94
frontend/src/components/submit-form/mii-editor/tabs/lips.tsx
View file

@ -1,47 +1,47 @@
import { type SwitchMiiInstructions } from "@tomodachi-share/shared"; import { type SwitchMiiInstructions } from "@tomodachi-share/shared";
import ColorPicker from "../color-picker"; import ColorPicker from "../color-picker";
import NumberInputs from "../number-inputs"; import NumberInputs from "../number-inputs";
import { useState } from "react"; import { useState } from "react";
interface Props { interface Props {
instructions: React.RefObject<SwitchMiiInstructions>; instructions: React.RefObject<SwitchMiiInstructions>;
} }
export default function LipsTab({ instructions }: Props) { export default function LipsTab({ instructions }: Props) {
const [color, setColor] = useState(instructions.current.lips.color ?? 128); const [color, setColor] = useState(instructions.current.lips.color ?? 128);
const [hasLipstick, setHasLipstick] = useState(instructions.current.lips.hasLipstick); const [hasLipstick, setHasLipstick] = useState(instructions.current.lips.hasLipstick);
return ( return (
<> <>
<h1 className="absolute font-bold text-xl">Lips</h1> <h1 className="absolute font-bold text-xl">Lips</h1>
<div className="size-full flex flex-col justify-center items-center"> <div className="size-full flex flex-col justify-center items-center">
<ColorPicker <ColorPicker
color={color} color={color}
setColor={(i) => { setColor={(i) => {
setColor(i); setColor(i);
instructions.current.lips.color = i; instructions.current.lips.color = i;
}} }}
tab="lips" tab="lips"
/> />
<NumberInputs target={instructions.current.lips} /> <NumberInputs target={instructions.current.lips} />
<div className="flex gap-1.5 items-center mt-4"> <div className="flex gap-1.5 items-center mt-4">
<input <input
type="checkbox" type="checkbox"
id="subcolor" id="subcolor"
className="checkbox" className="checkbox"
checked={hasLipstick} checked={hasLipstick}
onChange={(e) => { onChange={(e) => {
setHasLipstick(e.target.checked); setHasLipstick(e.target.checked);
instructions.current.lips.hasLipstick = e.target.checked; instructions.current.lips.hasLipstick = e.target.checked;
}} }}
/> />
<label htmlFor="subcolor" className="text-xs"> <label htmlFor="subcolor" className="text-xs">
Lipstick Lipstick
</label> </label>
</div> </div>
</div> </div>
</> </>
); );
} }

426
frontend/src/components/submit-form/mii-editor/tabs/misc.tsx
View file

@ -1,213 +1,213 @@
import { useState } from "react"; import { useState } from "react";
import type { MiiGender, SwitchMiiInstructions } from "@tomodachi-share/shared"; import type { MiiGender, SwitchMiiInstructions } from "@tomodachi-share/shared";
import EnhancedSlider from "../enhanced-slider"; import EnhancedSlider from "../enhanced-slider";
import DatingPreferencesViewer from "../../../mii/dating-preferences"; import DatingPreferencesViewer from "../../../mii/dating-preferences";
import VoiceViewer from "../../../mii/voice-viewer"; import VoiceViewer from "../../../mii/voice-viewer";
import PersonalityViewer from "../../../mii/personality-viewer"; import PersonalityViewer from "../../../mii/personality-viewer";
interface Props { interface Props {
instructions: React.RefObject<SwitchMiiInstructions>; instructions: React.RefObject<SwitchMiiInstructions>;
} }
export default function MiscTab({ instructions }: Props) { export default function MiscTab({ instructions }: Props) {
const [height, setHeight] = useState(instructions.current.height ?? 64); const [height, setHeight] = useState(instructions.current.height ?? 64);
const [weight, setWeight] = useState(instructions.current.weight ?? 64); const [weight, setWeight] = useState(instructions.current.weight ?? 64);
const [datingPreferences, setDatingPreferences] = useState<MiiGender[]>(instructions.current.datingPreferences ?? []); const [datingPreferences, setDatingPreferences] = useState<MiiGender[]>(instructions.current.datingPreferences ?? []);
const [voice, setVoice] = useState({ const [voice, setVoice] = useState({
speed: instructions.current.voice.speed ?? 25, speed: instructions.current.voice.speed ?? 25,
pitch: instructions.current.voice.pitch ?? 25, pitch: instructions.current.voice.pitch ?? 25,
depth: instructions.current.voice.depth ?? 25, depth: instructions.current.voice.depth ?? 25,
delivery: instructions.current.voice.delivery ?? 25, delivery: instructions.current.voice.delivery ?? 25,
tone: instructions.current.voice.tone ?? 0, tone: instructions.current.voice.tone ?? 0,
}); });
const [birthday, setBirthday] = useState({ const [birthday, setBirthday] = useState({
day: instructions.current.birthday.day ?? (null as number | null), day: instructions.current.birthday.day ?? (null as number | null),
month: instructions.current.birthday.month ?? (null as number | null), month: instructions.current.birthday.month ?? (null as number | null),
age: instructions.current.birthday.age ?? (null as number | null), age: instructions.current.birthday.age ?? (null as number | null),
dontAge: instructions.current.birthday.dontAge, dontAge: instructions.current.birthday.dontAge,
}); });
const [personality, setPersonality] = useState({ const [personality, setPersonality] = useState({
movement: instructions.current.personality.movement ?? -1, movement: instructions.current.personality.movement ?? -1,
speech: instructions.current.personality.speech ?? -1, speech: instructions.current.personality.speech ?? -1,
energy: instructions.current.personality.energy ?? -1, energy: instructions.current.personality.energy ?? -1,
thinking: instructions.current.personality.thinking ?? -1, thinking: instructions.current.personality.thinking ?? -1,
overall: instructions.current.personality.overall ?? -1, overall: instructions.current.personality.overall ?? -1,
}); });
return ( return (
<> <>
<h1 className="font-bold text-xl">Misc</h1> <h1 className="font-bold text-xl">Misc</h1>
<div className="grow h-full overflow-y-auto pb-3"> <div className="grow h-full overflow-y-auto pb-3">
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4"> <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div> <div>
<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium"> <div className="flex items-center gap-4 text-zinc-500 text-sm font-medium">
<hr className="grow border-zinc-300" /> <hr className="grow border-zinc-300" />
<span>Body</span> <span>Body</span>
<hr className="grow border-zinc-300" /> <hr className="grow border-zinc-300" />
</div> </div>
<div className="flex flex-col"> <div className="flex flex-col">
<EnhancedSlider <EnhancedSlider
label="Height" label="Height"
value={height} value={height}
onChange={(v) => { onChange={(v) => {
setHeight(v); setHeight(v);
instructions.current.height = v; instructions.current.height = v;
}} }}
min={0} min={0}
max={128} max={128}
mid={64} mid={64}
/> />
</div> </div>
<div className="flex flex-col"> <div className="flex flex-col">
<EnhancedSlider <EnhancedSlider
label="Weight" label="Weight"
value={weight} value={weight}
onChange={(v) => { onChange={(v) => {
setWeight(v); setWeight(v);
instructions.current.weight = v; instructions.current.weight = v;
}} }}
min={0} min={0}
max={128} max={128}
mid={64} mid={64}
/> />
</div> </div>
<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-1.5 mb-2"> <div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-1.5 mb-2">
<hr className="grow border-zinc-300" /> <hr className="grow border-zinc-300" />
<span>Dating Preferences</span> <span>Dating Preferences</span>
<hr className="grow border-zinc-300" /> <hr className="grow border-zinc-300" />
</div> </div>
<div className="flex flex-col gap-1.5"> <div className="flex flex-col gap-1.5">
<DatingPreferencesViewer <DatingPreferencesViewer
data={datingPreferences} data={datingPreferences}
onChecked={(e, gender) => { onChecked={(e, gender) => {
setDatingPreferences((prev) => { setDatingPreferences((prev) => {
const updated = e.target.checked ? (prev.includes(gender) ? prev : [...prev, gender]) : prev.filter((p) => p !== gender); const updated = e.target.checked ? (prev.includes(gender) ? prev : [...prev, gender]) : prev.filter((p) => p !== gender);
instructions.current.datingPreferences = updated; instructions.current.datingPreferences = updated;
return updated; return updated;
}); });
}} }}
/> />
</div> </div>
</div> </div>
<div> <div>
<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium"> <div className="flex items-center gap-4 text-zinc-500 text-sm font-medium">
<hr className="grow border-zinc-300" /> <hr className="grow border-zinc-300" />
<span>Voice</span> <span>Voice</span>
<hr className="grow border-zinc-300" /> <hr className="grow border-zinc-300" />
</div> </div>
<VoiceViewer <VoiceViewer
data={voice} data={voice}
onChange={(v, label) => { onChange={(v, label) => {
setVoice((p) => ({ ...p, [label]: v })); setVoice((p) => ({ ...p, [label]: v }));
instructions.current.voice[label as keyof typeof voice] = v; instructions.current.voice[label as keyof typeof voice] = v;
}} }}
onClickTone={(i) => { onClickTone={(i) => {
setVoice((p) => ({ ...p, tone: i })); setVoice((p) => ({ ...p, tone: i }));
instructions.current.voice.tone = i; instructions.current.voice.tone = i;
}} }}
/> />
<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-1.5 mb-2"> <div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-1.5 mb-2">
<hr className="grow border-zinc-300" /> <hr className="grow border-zinc-300" />
<span>Birthday</span> <span>Birthday</span>
<hr className="grow border-zinc-300" /> <hr className="grow border-zinc-300" />
</div> </div>
<div className="grid grid-cols-3 gap-2"> <div className="grid grid-cols-3 gap-2">
<div> <div>
<label htmlFor="day" className="text-xs"> <label htmlFor="day" className="text-xs">
Day Day
</label> </label>
<input <input
type="number" type="number"
id="day" id="day"
min={1} min={1}
max={31} max={31}
className="pill input text-sm py-1! px-3! w-full" className="pill input text-sm py-1! px-3! w-full"
value={birthday.day ?? undefined} value={birthday.day ?? undefined}
onChange={(e) => { onChange={(e) => {
setBirthday((p) => ({ ...p, day: e.target.valueAsNumber })); setBirthday((p) => ({ ...p, day: e.target.valueAsNumber }));
instructions.current.birthday.day = e.target.valueAsNumber; instructions.current.birthday.day = e.target.valueAsNumber;
}} }}
/> />
</div> </div>
<div> <div>
<label htmlFor="month" className="text-xs"> <label htmlFor="month" className="text-xs">
Month Month
</label> </label>
<input <input
type="number" type="number"
id="month" id="month"
min={1} min={1}
max={12} max={12}
className="pill input text-sm py-1! px-3! w-full" className="pill input text-sm py-1! px-3! w-full"
value={birthday.month ?? undefined} value={birthday.month ?? undefined}
onChange={(e) => { onChange={(e) => {
setBirthday((p) => ({ ...p, month: e.target.valueAsNumber })); setBirthday((p) => ({ ...p, month: e.target.valueAsNumber }));
instructions.current.birthday.month = e.target.valueAsNumber; instructions.current.birthday.month = e.target.valueAsNumber;
}} }}
/> />
</div> </div>
<div> <div>
<label htmlFor="age" className="text-xs"> <label htmlFor="age" className="text-xs">
Age Age
</label> </label>
<input <input
type="number" type="number"
id="age" id="age"
min={1} min={1}
max={1000} max={1000}
className="pill input text-sm py-1! px-3! w-full" className="pill input text-sm py-1! px-3! w-full"
value={birthday.age ?? undefined} value={birthday.age ?? undefined}
onChange={(e) => { onChange={(e) => {
setBirthday((p) => ({ ...p, age: e.target.valueAsNumber })); setBirthday((p) => ({ ...p, age: e.target.valueAsNumber }));
instructions.current.birthday.age = e.target.valueAsNumber; instructions.current.birthday.age = e.target.valueAsNumber;
}} }}
/> />
</div> </div>
<div className="flex gap-1.5 col-span-2"> <div className="flex gap-1.5 col-span-2">
<input <input
type="checkbox" type="checkbox"
id="dontAge" id="dontAge"
className="checkbox" className="checkbox"
checked={birthday.dontAge} checked={birthday.dontAge}
onChange={(e) => { onChange={(e) => {
setBirthday((p) => ({ ...p, dontAge: e.target.checked })); setBirthday((p) => ({ ...p, dontAge: e.target.checked }));
instructions.current.birthday.dontAge = e.target.checked; instructions.current.birthday.dontAge = e.target.checked;
}} }}
/> />
<label htmlFor="dontAge" className="text-sm select-none"> <label htmlFor="dontAge" className="text-sm select-none">
Don't Age Don't Age
</label> </label>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-2 mb-2"> <div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-2 mb-2">
<hr className="grow border-zinc-300" /> <hr className="grow border-zinc-300" />
<span>Personality</span> <span>Personality</span>
<hr className="grow border-zinc-300" /> <hr className="grow border-zinc-300" />
</div> </div>
<PersonalityViewer <PersonalityViewer
data={personality} data={personality}
onClick={(key, i) => { onClick={(key, i) => {
setPersonality((p) => { setPersonality((p) => {
const updated = { ...p, [key]: i }; const updated = { ...p, [key]: i };
instructions.current.personality = updated; instructions.current.personality = updated;
return updated; return updated;
}); });
}} }}
/> />
</div> </div>
</> </>
); );
} }

36
frontend/src/components/submit-form/mii-editor/tabs/nose.tsx
View file

@ -1,18 +1,18 @@
import { type SwitchMiiInstructions } from "@tomodachi-share/shared"; import { type SwitchMiiInstructions } from "@tomodachi-share/shared";
import NumberInputs from "../number-inputs"; import NumberInputs from "../number-inputs";
interface Props { interface Props {
instructions: React.RefObject<SwitchMiiInstructions>; instructions: React.RefObject<SwitchMiiInstructions>;
} }
export default function NoseTab({ instructions }: Props) { export default function NoseTab({ instructions }: Props) {
return ( return (
<> <>
<h1 className="absolute font-bold text-xl">Nose</h1> <h1 className="absolute font-bold text-xl">Nose</h1>
<div className="size-full flex flex-col justify-center items-center"> <div className="size-full flex flex-col justify-center items-center">
<NumberInputs target={instructions.current.nose} /> <NumberInputs target={instructions.current.nose} />
</div> </div>
</> </>
); );
} }

182
frontend/src/components/submit-form/mii-editor/tabs/other.tsx
View file

@ -1,91 +1,91 @@
import { type SwitchMiiInstructions } from "@tomodachi-share/shared"; import { type SwitchMiiInstructions } from "@tomodachi-share/shared";
import { useState } from "react"; import { useState } from "react";
import ColorPicker from "../color-picker"; import ColorPicker from "../color-picker";
import NumberInputs from "../number-inputs"; import NumberInputs from "../number-inputs";
interface Props { interface Props {
instructions: React.RefObject<SwitchMiiInstructions>; instructions: React.RefObject<SwitchMiiInstructions>;
} }
const TABS: { name: keyof SwitchMiiInstructions["other"]; defaultColor?: number }[] = [ const TABS: { name: keyof SwitchMiiInstructions["other"]; defaultColor?: number }[] = [
{ name: "wrinkles1" }, { name: "wrinkles1" },
{ name: "wrinkles2" }, { name: "wrinkles2" },
{ name: "beard" }, { name: "beard" },
{ name: "moustache" }, { name: "moustache" },
{ name: "goatee" }, { name: "goatee" },
{ name: "mole" }, { name: "mole" },
{ name: "eyeShadow", defaultColor: 139 }, { name: "eyeShadow", defaultColor: 139 },
{ name: "blush" }, { name: "blush" },
]; ];
export default function OtherTab({ instructions }: Props) { export default function OtherTab({ instructions }: Props) {
const [tab, setTab] = useState(0); const [tab, setTab] = useState(0);
const [isFlipped, setIsFlipped] = useState(false); const [isFlipped, setIsFlipped] = useState(false);
const [colors, setColors] = useState<number[]>(() => const [colors, setColors] = useState<number[]>(() =>
TABS.map((t) => { TABS.map((t) => {
const entry = instructions.current.other[t.name] ?? {}; const entry = instructions.current.other[t.name] ?? {};
const color = entry && "color" in entry ? entry.color : null; const color = entry && "color" in entry ? entry.color : null;
return color ?? t.defaultColor ?? 0; return color ?? t.defaultColor ?? 0;
}), }),
); );
const currentTab = TABS[tab]; const currentTab = TABS[tab];
const setColor = (value: number) => { const setColor = (value: number) => {
setColors((prev) => { setColors((prev) => {
const copy = [...prev]; const copy = [...prev];
copy[tab] = value; copy[tab] = value;
return copy; return copy;
}); });
const target = instructions.current.other[currentTab.name]; const target = instructions.current.other[currentTab.name];
if ("color" in target) { if ("color" in target) {
target.color = value; target.color = value;
} }
}; };
return ( return (
<> <>
<h1 className="absolute font-bold text-xl">Other</h1> <h1 className="absolute font-bold text-xl">Other</h1>
<div className="absolute right-3 z-10 flex justify-end"> <div className="absolute right-3 z-10 flex justify-end">
<div className="rounded-2xl bg-orange-200"> <div className="rounded-2xl bg-orange-200">
{TABS.map((_, i) => ( {TABS.map((_, i) => (
<button <button
key={i} key={i}
type="button" type="button"
onClick={() => setTab(i)} onClick={() => setTab(i)}
className={`px-3 py-1 rounded-2xl cursor-pointer hover:bg-orange-300/50 transition-colors duration-75 ${tab === i ? "bg-orange-300!" : "orange-200"}`} className={`px-3 py-1 rounded-2xl cursor-pointer hover:bg-orange-300/50 transition-colors duration-75 ${tab === i ? "bg-orange-300!" : "orange-200"}`}
> >
{i + 1} {i + 1}
</button> </button>
))} ))}
</div> </div>
</div> </div>
<div className="absolute inset-0 flex flex-col justify-center items-center"> <div className="absolute inset-0 flex flex-col justify-center items-center">
<ColorPicker disabled={tab === 0 || tab === 1} color={colors[tab]} setColor={setColor} tab={tab === 6 ? "eyeliner" : "hair"} /> <ColorPicker disabled={tab === 0 || tab === 1} color={colors[tab]} setColor={setColor} tab={tab === 6 ? "eyeliner" : "hair"} />
<NumberInputs key={tab} target={instructions.current.other[currentTab.name]} /> <NumberInputs key={tab} target={instructions.current.other[currentTab.name]} />
{tab === 3 && ( {tab === 3 && (
<div className="flex gap-1.5 items-center mt-4"> <div className="flex gap-1.5 items-center mt-4">
<input <input
type="checkbox" type="checkbox"
id="subcolor" id="subcolor"
className="checkbox" className="checkbox"
checked={isFlipped} checked={isFlipped}
onChange={(e) => { onChange={(e) => {
setIsFlipped(e.target.checked); setIsFlipped(e.target.checked);
instructions.current.other.moustache.isFlipped = e.target.checked; instructions.current.other.moustache.isFlipped = e.target.checked;
}} }}
/> />
<label htmlFor="subcolor" className="text-xs"> <label htmlFor="subcolor" className="text-xs">
Flip Flip
</label> </label>
</div> </div>
)} )}
</div> </div>
</> </>
); );
} }

40
frontend/src/components/submit-form/qr-finder.tsx
View file

@ -1,20 +1,20 @@
export default function QrFinder() { export default function QrFinder() {
return ( return (
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none size-72 z-10"> <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none size-72 z-10">
{/* Top-left corner */} {/* Top-left corner */}
<div className="absolute top-0 left-0 size-6 border-t-3 border-l-3 border-amber-500 rounded-tl-lg" /> <div className="absolute top-0 left-0 size-6 border-t-3 border-l-3 border-amber-500 rounded-tl-lg" />
{/* Top-right corner */} {/* Top-right corner */}
<div className="absolute top-0 right-0 size-6 border-t-3 border-r-3 border-amber-500 rounded-tr-lg" /> <div className="absolute top-0 right-0 size-6 border-t-3 border-r-3 border-amber-500 rounded-tr-lg" />
{/* Bottom-left corner */} {/* Bottom-left corner */}
<div className="absolute bottom-0 left-0 size-6 border-b-3 border-l-3 border-amber-500 rounded-bl-lg" /> <div className="absolute bottom-0 left-0 size-6 border-b-3 border-l-3 border-amber-500 rounded-bl-lg" />
{/* Bottom-right corner */} {/* Bottom-right corner */}
<div className="absolute bottom-0 right-0 size-6 border-b-3 border-r-3 border-amber-500 rounded-br-lg" /> <div className="absolute bottom-0 right-0 size-6 border-b-3 border-r-3 border-amber-500 rounded-br-lg" />
{/* Center point */} {/* Center point */}
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-5 bg-amber-500/70 rounded-full" /> <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-5 bg-amber-500/70 rounded-full" />
</div> </div>
); );
} }

134
frontend/src/components/submit-form/qr-upload.tsx
View file

@ -1,67 +1,67 @@
import { useCallback, useRef, useState } from "react"; import { useCallback, useRef, useState } from "react";
import { type FileWithPath } from "react-dropzone"; import { type FileWithPath } from "react-dropzone";
import jsQR from "jsqr"; import jsQR from "jsqr";
import Dropzone from "../dropzone"; import Dropzone from "../dropzone";
interface Props { interface Props {
setQrBytesRaw: React.Dispatch<React.SetStateAction<number[]>>; setQrBytesRaw: React.Dispatch<React.SetStateAction<number[]>>;
} }
export default function QrUpload({ setQrBytesRaw }: Props) { export default function QrUpload({ setQrBytesRaw }: Props) {
const [hasImage, setHasImage] = useState(false); const [hasImage, setHasImage] = useState(false);
const canvasRef = useRef<HTMLCanvasElement>(null); const canvasRef = useRef<HTMLCanvasElement>(null);
const handleDrop = useCallback( const handleDrop = useCallback(
(acceptedFiles: FileWithPath[]) => { (acceptedFiles: FileWithPath[]) => {
const file = acceptedFiles[0]; const file = acceptedFiles[0];
// Scan QR code // Scan QR code
const reader = new FileReader(); const reader = new FileReader();
reader.onload = async (event) => { reader.onload = async (event) => {
const image = new Image(); const image = new Image();
image.onload = () => { image.onload = () => {
const canvas = canvasRef.current; const canvas = canvasRef.current;
if (!canvas) return; if (!canvas) return;
const ctx = canvas.getContext("2d"); const ctx = canvas.getContext("2d");
if (!ctx) return; if (!ctx) return;
canvas.width = image.width; canvas.width = image.width;
canvas.height = image.height; canvas.height = image.height;
ctx.drawImage(image, 0, 0, image.width, image.height); ctx.drawImage(image, 0, 0, image.width, image.height);
const imageData = ctx.getImageData(0, 0, image.width, image.height); const imageData = ctx.getImageData(0, 0, image.width, image.height);
const code = jsQR(imageData.data, image.width, image.height); const code = jsQR(imageData.data, image.width, image.height);
if (!code) return; if (!code) return;
setQrBytesRaw(code.binaryData!); setQrBytesRaw(code.binaryData!);
setHasImage(true); setHasImage(true);
}; };
image.src = event.target!.result as string; image.src = event.target!.result as string;
}; };
reader.readAsDataURL(file); reader.readAsDataURL(file);
}, },
[setQrBytesRaw], [setQrBytesRaw],
); );
return ( return (
<div className="max-w-md w-full"> <div className="max-w-md w-full">
<Dropzone onDrop={handleDrop} options={{ maxFiles: 1 }}> <Dropzone onDrop={handleDrop} options={{ maxFiles: 1 }}>
<p className="text-center text-sm"> <p className="text-center text-sm">
{!hasImage ? ( {!hasImage ? (
<> <>
Drag and drop your QR code image here Drag and drop your QR code image here
<br /> <br />
or click to open or click to open
</> </>
) : ( ) : (
"Uploaded!" "Uploaded!"
)} )}
</p> </p>
</Dropzone> </Dropzone>
{/* Canvas is used to scan the QR code */} {/* Canvas is used to scan the QR code */}
<canvas ref={canvasRef} className="hidden" /> <canvas ref={canvasRef} className="hidden" />
</div> </div>
); );
} }

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

@ -1,73 +1,73 @@
import { useCallback, useState } from "react"; import { useCallback, useState } from "react";
import { type FileWithPath } from "react-dropzone"; import { type FileWithPath } from "react-dropzone";
import { Icon } from "@iconify/react"; import { Icon } from "@iconify/react";
import Dropzone from "../dropzone"; import Dropzone from "../dropzone";
import Camera from "./camera"; import Camera from "./camera";
import ImageEditorPortrait from "./image-editor"; import ImageEditorPortrait from "./image-editor";
interface Props { interface Props {
text: string; text: string;
forceCrop?: boolean; forceCrop?: boolean;
image?: string | undefined; image?: string | undefined;
setImage: (value: string | undefined) => void; setImage: (value: string | undefined) => void;
} }
export default function SwitchFileUpload({ text, forceCrop, image, setImage }: Props) { export default function SwitchFileUpload({ text, forceCrop, image, setImage }: Props) {
const [isCameraOpen, setIsCameraOpen] = useState(false); const [isCameraOpen, setIsCameraOpen] = useState(false);
const [isCropOpen, setIsCropOpen] = useState(false); const [isCropOpen, setIsCropOpen] = useState(false);
const handleDrop = useCallback( const handleDrop = useCallback(
(acceptedFiles: FileWithPath[]) => { (acceptedFiles: FileWithPath[]) => {
const file = acceptedFiles[0]; const file = acceptedFiles[0];
// Convert to Data URI // Convert to Data URI
const reader = new FileReader(); const reader = new FileReader();
reader.onload = async (event) => { reader.onload = async (event) => {
setImage(event.target!.result as string); setImage(event.target!.result as string);
if (forceCrop) setIsCropOpen(true); if (forceCrop) setIsCropOpen(true);
}; };
reader.readAsDataURL(file); reader.readAsDataURL(file);
}, },
[setImage], [setImage],
); );
return ( return (
<div className="max-w-md w-full flex flex-col items-center gap-2"> <div className="max-w-md w-full flex flex-col items-center gap-2">
<Dropzone onDrop={handleDrop} options={{ maxFiles: 1 }}> <Dropzone onDrop={handleDrop} options={{ maxFiles: 1 }}>
<p className="text-center text-sm"> <p className="text-center text-sm">
{!image ? ( {!image ? (
<> <>
Drag and drop {text} Drag and drop {text}
<br /> <br />
or click to open or click to open
</> </>
) : ( ) : (
"Uploaded!" "Uploaded!"
)} )}
</p> </p>
</Dropzone> </Dropzone>
<span>or</span> <span>or</span>
<div className="flex gap-2 max-sm:flex-col"> <div className="flex gap-2 max-sm:flex-col">
<button type="button" aria-label="Use your camera" onClick={() => setIsCameraOpen(true)} className="pill button gap-2"> <button type="button" aria-label="Use your camera" onClick={() => setIsCameraOpen(true)} className="pill button gap-2">
<Icon icon="mdi:camera" fontSize={20} /> <Icon icon="mdi:camera" fontSize={20} />
Use your camera Use your camera
</button> </button>
<button type="button" aria-label="Crop image" onClick={() => setIsCropOpen(true)} className="pill button gap-2"> <button type="button" aria-label="Crop image" onClick={() => setIsCropOpen(true)} className="pill button gap-2">
<Icon icon="mdi:image-edit" fontSize={20} /> <Icon icon="mdi:image-edit" fontSize={20} />
Edit Image Edit Image
</button> </button>
</div> </div>
<Camera <Camera
isOpen={isCameraOpen} isOpen={isCameraOpen}
setIsOpen={setIsCameraOpen} setIsOpen={setIsCameraOpen}
setImage={setImage} setImage={setImage}
onCapture={() => { onCapture={() => {
if (forceCrop) setIsCropOpen(true); if (forceCrop) setIsCropOpen(true);
}} }}
/> />
<ImageEditorPortrait isOpen={isCropOpen} setIsOpen={setIsCropOpen} image={image} setImage={setImage} /> <ImageEditorPortrait isOpen={isCropOpen} setIsOpen={setIsCropOpen} image={image} setImage={setImage} />
</div> </div>
); );
} }

372
frontend/src/components/tag-selector.tsx
View file

@ -1,186 +1,186 @@
import React, { useState, useRef } from "react"; import React, { useState, useRef } from "react";
import { useCombobox } from "downshift"; import { useCombobox } from "downshift";
import { Icon } from "@iconify/react"; import { Icon } from "@iconify/react";
interface Props { interface Props {
tags: string[]; tags: string[];
setTags: React.Dispatch<React.SetStateAction<string[]>>; setTags: React.Dispatch<React.SetStateAction<string[]>>;
showTagLimit?: boolean; showTagLimit?: boolean;
isExclude?: boolean; isExclude?: boolean;
} }
const tagRegex = /^[a-z0-9-_]*$/; const tagRegex = /^[a-z0-9-_]*$/;
const predefinedTags = ["anime", "art", "cartoon", "celebrity", "games", "history", "meme", "movie", "oc", "tv"]; const predefinedTags = ["anime", "art", "cartoon", "celebrity", "games", "history", "meme", "movie", "oc", "tv"];
export default function TagSelector({ tags, setTags, showTagLimit, isExclude }: Props) { export default function TagSelector({ tags, setTags, showTagLimit, isExclude }: Props) {
const [inputValue, setInputValue] = useState<string>(""); const [inputValue, setInputValue] = useState<string>("");
const inputRef = useRef<HTMLInputElement>(null); const inputRef = useRef<HTMLInputElement>(null);
const getFilteredItems = (): string[] => const getFilteredItems = (): string[] =>
predefinedTags.filter((item) => item.toLowerCase().includes(inputValue?.toLowerCase() || "")).filter((item) => !tags.includes(item)); predefinedTags.filter((item) => item.toLowerCase().includes(inputValue?.toLowerCase() || "")).filter((item) => !tags.includes(item));
const filteredItems = getFilteredItems(); const filteredItems = getFilteredItems();
const isMaxItemsSelected = tags.length >= 8; const isMaxItemsSelected = tags.length >= 8;
const hasSelectedItems = tags.length > 0; const hasSelectedItems = tags.length > 0;
const addTag = (tag: string) => { const addTag = (tag: string) => {
if (!tags.includes(tag) && tags.length < 8 && tag.length <= 20) { if (!tags.includes(tag) && tags.length < 8 && tag.length <= 20) {
setTags([...tags, tag]); setTags([...tags, tag]);
} }
}; };
const removeTag = (tag: string) => { const removeTag = (tag: string) => {
setTags(tags.filter((t) => t !== tag)); setTags(tags.filter((t) => t !== tag));
}; };
const { isOpen, openMenu, getToggleButtonProps, getMenuProps, getInputProps, getItemProps, highlightedIndex } = useCombobox<string>({ const { isOpen, openMenu, getToggleButtonProps, getMenuProps, getInputProps, getItemProps, highlightedIndex } = useCombobox<string>({
inputValue, inputValue,
items: filteredItems, items: filteredItems,
selectedItem: null, selectedItem: null,
onInputValueChange: ({ inputValue }) => { onInputValueChange: ({ inputValue }) => {
const newValue = inputValue || ""; const newValue = inputValue || "";
if (newValue && !tagRegex.test(newValue)) return; if (newValue && !tagRegex.test(newValue)) return;
setInputValue(newValue); setInputValue(newValue);
}, },
onSelectedItemChange: ({ type, selectedItem }) => { onSelectedItemChange: ({ type, selectedItem }) => {
if (type === useCombobox.stateChangeTypes.ItemClick && selectedItem) { if (type === useCombobox.stateChangeTypes.ItemClick && selectedItem) {
addTag(selectedItem); addTag(selectedItem);
setInputValue(""); setInputValue("");
} }
}, },
stateReducer: (_, { type, changes }) => { stateReducer: (_, { type, changes }) => {
// Prevent input from being filled when item is selected // Prevent input from being filled when item is selected
if (type === useCombobox.stateChangeTypes.ItemClick) { if (type === useCombobox.stateChangeTypes.ItemClick) {
return { return {
...changes, ...changes,
inputValue: "", inputValue: "",
}; };
} }
return changes; return changes;
}, },
}); });
const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => { const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
if (event.key === "Enter" && inputValue && !tags.includes(inputValue)) { if (event.key === "Enter" && inputValue && !tags.includes(inputValue)) {
addTag(inputValue); addTag(inputValue);
setInputValue(""); setInputValue("");
} else if (event.key === "Backspace" && inputValue === "") { } else if (event.key === "Backspace" && inputValue === "") {
// Spill onto last tag // Spill onto last tag
const lastTag = tags[tags.length - 1]; const lastTag = tags[tags.length - 1];
setInputValue(lastTag); setInputValue(lastTag);
removeTag(lastTag); removeTag(lastTag);
} }
}; };
const handleContainerClick = () => { const handleContainerClick = () => {
if (!isMaxItemsSelected) { if (!isMaxItemsSelected) {
inputRef.current?.focus(); inputRef.current?.focus();
openMenu(); openMenu();
} }
}; };
return ( return (
<div className="col-span-2 relative"> <div className="col-span-2 relative">
<div <div
className={`relative justify-between! pill input focus-within:ring-[3px] ring-orange-400/50 cursor-text transition ${ className={`relative justify-between! pill input focus-within:ring-[3px] ring-orange-400/50 cursor-text transition ${
tags.length > 0 ? "py-1.5! px-2!" : "" tags.length > 0 ? "py-1.5! px-2!" : ""
}`} }`}
onClick={handleContainerClick} onClick={handleContainerClick}
> >
{/* Tags */} {/* Tags */}
<div className="flex flex-wrap gap-1.5 w-full"> <div className="flex flex-wrap gap-1.5 w-full">
{tags.map((tag) => ( {tags.map((tag) => (
<span key={tag} className={`py-1 px-3 rounded-2xl flex items-center gap-1 text-sm ${isExclude ? "bg-red-300" : "bg-orange-300"}`}> <span key={tag} className={`py-1 px-3 rounded-2xl flex items-center gap-1 text-sm ${isExclude ? "bg-red-300" : "bg-orange-300"}`}>
{tag} {tag}
<button <button
type="button" type="button"
aria-label="Delete Tag" aria-label="Delete Tag"
className="text-slate-800 cursor-pointer" className="text-slate-800 cursor-pointer"
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
removeTag(tag); removeTag(tag);
}} }}
> >
<Icon icon="mdi:close" className="text-xs" /> <Icon icon="mdi:close" className="text-xs" />
</button> </button>
</span> </span>
))} ))}
{/* Input */} {/* Input */}
<input <input
{...getInputProps({ {...getInputProps({
ref: inputRef, ref: inputRef,
onKeyDown: handleKeyDown, onKeyDown: handleKeyDown,
disabled: isMaxItemsSelected, disabled: isMaxItemsSelected,
placeholder: tags.length > 0 ? "" : "Type or select a tag...", placeholder: tags.length > 0 ? "" : "Type or select a tag...",
maxLength: 20, maxLength: 20,
className: "w-full flex-1 outline-none placeholder:text-black/40", className: "w-full flex-1 outline-none placeholder:text-black/40",
})} })}
/> />
</div> </div>
{/* Control buttons */} {/* Control buttons */}
<div className="flex items-center gap-1" onClick={(e) => e.stopPropagation()}> <div className="flex items-center gap-1" onClick={(e) => e.stopPropagation()}>
{hasSelectedItems && ( {hasSelectedItems && (
<button type="button" aria-label="Remove All Tags" className="text-black cursor-pointer" onClick={() => setTags([])}> <button type="button" aria-label="Remove All Tags" className="text-black cursor-pointer" onClick={() => setTags([])}>
<Icon icon="mdi:close" /> <Icon icon="mdi:close" />
</button> </button>
)} )}
<button <button
type="button" type="button"
aria-label="Toggle Tag Dropdown" aria-label="Toggle Tag Dropdown"
{...getToggleButtonProps()} {...getToggleButtonProps()}
disabled={isMaxItemsSelected} disabled={isMaxItemsSelected}
className="text-black cursor-pointer text-xl disabled:text-black/35" className="text-black cursor-pointer text-xl disabled:text-black/35"
> >
<Icon icon="mdi:chevron-down" /> <Icon icon="mdi:chevron-down" />
</button> </button>
</div> </div>
{/* Dropdown menu */} {/* Dropdown menu */}
{!isMaxItemsSelected && ( {!isMaxItemsSelected && (
<ul <ul
{...getMenuProps()} {...getMenuProps()}
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
className={`absolute right-0 top-full mt-2 z-50 w-80 bg-orange-200/45 backdrop-blur-md border-2 border-orange-400 rounded-lg shadow-lg shadow-black/25 max-h-60 overflow-y-auto ${ className={`absolute right-0 top-full mt-2 z-50 w-80 bg-orange-200/45 backdrop-blur-md border-2 border-orange-400 rounded-lg shadow-lg shadow-black/25 max-h-60 overflow-y-auto ${
isOpen ? "block" : "hidden" isOpen ? "block" : "hidden"
}`} }`}
> >
{filteredItems.map((item, index) => ( {filteredItems.map((item, index) => (
<li <li
key={item} key={item}
{...getItemProps({ item, index })} {...getItemProps({ item, index })}
className={`px-4 py-1 cursor-pointer text-sm ${highlightedIndex === index ? "bg-black/15" : ""}`} className={`px-4 py-1 cursor-pointer text-sm ${highlightedIndex === index ? "bg-black/15" : ""}`}
> >
{item} {item}
</li> </li>
))} ))}
{inputValue && !filteredItems.includes(inputValue) && ( {inputValue && !filteredItems.includes(inputValue) && (
<li <li
className="px-4 py-1 cursor-pointer text-sm bg-black/15" className="px-4 py-1 cursor-pointer text-sm bg-black/15"
onClick={() => { onClick={() => {
addTag(inputValue); addTag(inputValue);
setInputValue(""); setInputValue("");
}} }}
> >
Add &quot;{inputValue}&quot; Add &quot;{inputValue}&quot;
</li> </li>
)} )}
</ul> </ul>
)} )}
</div> </div>
{/* Tag limit message */} {/* Tag limit message */}
{showTagLimit && ( {showTagLimit && (
<div className="mt-1.5 text-xs min-h-4"> <div className="mt-1.5 text-xs min-h-4">
{isMaxItemsSelected ? ( {isMaxItemsSelected ? (
<span className="text-red-400 font-medium">Maximum of 8 tags reached. Remove a tag to add more.</span> <span className="text-red-400 font-medium">Maximum of 8 tags reached. Remove a tag to add more.</span>
) : ( ) : (
<span className="text-black/60">{tags.length}/8 tags</span> <span className="text-black/60">{tags.length}/8 tags</span>
)} )}
</div> </div>
)} )}
</div> </div>
); );
} }

108
frontend/src/components/tutorial/3ds-scan.tsx
View file

@ -1,54 +1,54 @@
import { useState } from "react"; import { useState } from "react";
import { createPortal } from "react-dom"; import { createPortal } from "react-dom";
import { Icon } from "@iconify/react"; import { Icon } from "@iconify/react";
import Tutorial from "."; import Tutorial from ".";
export default function ThreeDsScanTutorialButton() { export default function ThreeDsScanTutorialButton() {
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
return ( return (
<> <>
<button aria-label="Tutorial" type="button" onClick={() => setIsOpen(true)} className="text-3xl cursor-pointer"> <button aria-label="Tutorial" type="button" onClick={() => setIsOpen(true)} className="text-3xl cursor-pointer">
<Icon icon="fa:question-circle" /> <Icon icon="fa:question-circle" />
<span>Tutorial</span> <span>Tutorial</span>
</button> </button>
{isOpen && {isOpen &&
createPortal( createPortal(
<Tutorial <Tutorial
tutorials={[ tutorials={[
{ {
title: "Adding Mii", title: "Adding Mii",
steps: [ steps: [
{ {
text: "1. Enter the town hall", text: "1. Enter the town hall",
imageSrc: "/tutorial/3ds/step1.png", imageSrc: "/tutorial/3ds/step1.png",
}, },
{ {
text: "2. Go into 'QR Code'", text: "2. Go into 'QR Code'",
imageSrc: "/tutorial/3ds/adding-mii/step2.png", imageSrc: "/tutorial/3ds/adding-mii/step2.png",
}, },
{ {
text: "3. Press 'Scan QR Code'", text: "3. Press 'Scan QR Code'",
imageSrc: "/tutorial/3ds/adding-mii/step3.png", imageSrc: "/tutorial/3ds/adding-mii/step3.png",
}, },
{ {
text: "4. Click on the QR code below the Mii's image", text: "4. Click on the QR code below the Mii's image",
imageSrc: "/tutorial/3ds/adding-mii/step4.png", imageSrc: "/tutorial/3ds/adding-mii/step4.png",
}, },
{ {
text: "5. Scan with your 3DS", text: "5. Scan with your 3DS",
imageSrc: "/tutorial/3ds/adding-mii/step5.png", imageSrc: "/tutorial/3ds/adding-mii/step5.png",
}, },
{ type: "finish" }, { type: "finish" },
], ],
}, },
]} ]}
isOpen={isOpen} isOpen={isOpen}
setIsOpen={setIsOpen} setIsOpen={setIsOpen}
/>, />,
document.body, document.body,
)} )}
</> </>
); );
} }

190
frontend/src/components/tutorial/3ds-submit.tsx
View file

@ -1,95 +1,95 @@
import { useState } from "react"; import { useState } from "react";
import { createPortal } from "react-dom"; import { createPortal } from "react-dom";
import Tutorial from "."; import Tutorial from ".";
export default function SubmitTutorialButton() { export default function SubmitTutorialButton() {
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
return ( return (
<> <>
<button type="button" onClick={() => setIsOpen(true)} className="text-sm text-orange-400 cursor-pointer underline-offset-2 hover:underline"> <button type="button" onClick={() => setIsOpen(true)} className="text-sm text-orange-400 cursor-pointer underline-offset-2 hover:underline">
How to? How to?
</button> </button>
{isOpen && {isOpen &&
createPortal( createPortal(
<Tutorial <Tutorial
tutorials={[ tutorials={[
{ {
title: "Allow Copying", title: "Allow Copying",
thumbnail: "/tutorial/3ds/allow-copying/thumbnail.png", thumbnail: "/tutorial/3ds/allow-copying/thumbnail.png",
hint: "Suggested!", hint: "Suggested!",
steps: [ steps: [
{ type: "start" }, { type: "start" },
{ {
text: "1. Enter the town hall", text: "1. Enter the town hall",
imageSrc: "/tutorial/3ds/step1.png", imageSrc: "/tutorial/3ds/step1.png",
}, },
{ {
text: "2. Go into 'Mii List'", text: "2. Go into 'Mii List'",
imageSrc: "/tutorial/3ds/allow-copying/step2.png", imageSrc: "/tutorial/3ds/allow-copying/step2.png",
}, },
{ {
text: "3. Select and edit the Mii you wish to submit", text: "3. Select and edit the Mii you wish to submit",
imageSrc: "/tutorial/3ds/allow-copying/step3.png", imageSrc: "/tutorial/3ds/allow-copying/step3.png",
}, },
{ {
text: "4. Click 'Other Settings' in the information screen", text: "4. Click 'Other Settings' in the information screen",
imageSrc: "/tutorial/3ds/allow-copying/step4.png", imageSrc: "/tutorial/3ds/allow-copying/step4.png",
}, },
{ {
text: "5. Click on 'Don't Allow' under the 'Copying' text", text: "5. Click on 'Don't Allow' under the 'Copying' text",
imageSrc: "/tutorial/3ds/allow-copying/step5.png", imageSrc: "/tutorial/3ds/allow-copying/step5.png",
}, },
{ {
text: "6. Press 'Allow'", text: "6. Press 'Allow'",
imageSrc: "/tutorial/3ds/allow-copying/step6.png", imageSrc: "/tutorial/3ds/allow-copying/step6.png",
}, },
{ {
text: "7. Confirm the edits to the Mii", text: "7. Confirm the edits to the Mii",
imageSrc: "/tutorial/3ds/allow-copying/step7.png", imageSrc: "/tutorial/3ds/allow-copying/step7.png",
}, },
{ type: "finish" }, { type: "finish" },
], ],
}, },
{ {
title: "Create QR Code", title: "Create QR Code",
thumbnail: "/tutorial/3ds/create-qr-code/thumbnail.png", thumbnail: "/tutorial/3ds/create-qr-code/thumbnail.png",
steps: [ steps: [
{ type: "start" }, { type: "start" },
{ {
text: "1. Enter the town hall", text: "1. Enter the town hall",
imageSrc: "/tutorial/3ds/step1.png", imageSrc: "/tutorial/3ds/step1.png",
}, },
{ {
text: "2. Go into 'QR Code'", text: "2. Go into 'QR Code'",
imageSrc: "/tutorial/3ds/create-qr-code/step2.png", imageSrc: "/tutorial/3ds/create-qr-code/step2.png",
}, },
{ {
text: "3. Press 'Create QR Code'", text: "3. Press 'Create QR Code'",
imageSrc: "/tutorial/3ds/create-qr-code/step3.png", imageSrc: "/tutorial/3ds/create-qr-code/step3.png",
}, },
{ {
text: "4. Select and press 'OK' on the Mii you wish to submit", text: "4. Select and press 'OK' on the Mii you wish to submit",
imageSrc: "/tutorial/3ds/create-qr-code/step4.png", imageSrc: "/tutorial/3ds/create-qr-code/step4.png",
}, },
{ {
text: "5. Pick any option; it doesn't matter since the QR code regenerates upon submission.", text: "5. Pick any option; it doesn't matter since the QR code regenerates upon submission.",
imageSrc: "/tutorial/3ds/create-qr-code/step5.png", imageSrc: "/tutorial/3ds/create-qr-code/step5.png",
}, },
{ {
text: "6. Exit the tutorial; Upload the QR code (scan with camera or upload file through SD card).", text: "6. Exit the tutorial; Upload the QR code (scan with camera or upload file through SD card).",
imageSrc: "/tutorial/3ds/create-qr-code/step6.png", imageSrc: "/tutorial/3ds/create-qr-code/step6.png",
}, },
{ type: "finish" }, { type: "finish" },
], ],
}, },
]} ]}
isOpen={isOpen} isOpen={isOpen}
setIsOpen={setIsOpen} setIsOpen={setIsOpen}
/>, />,
document.body, document.body,
)} )}
</> </>
); );
} }

410
frontend/src/components/tutorial/index.tsx
View file

@ -1,205 +1,205 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import useEmblaCarousel from "embla-carousel-react"; import useEmblaCarousel from "embla-carousel-react";
import { Icon } from "@iconify/react"; import { Icon } from "@iconify/react";
import confetti from "canvas-confetti"; import confetti from "canvas-confetti";
interface Slide { interface Slide {
// step is never used, undefined is assumed as a step // step is never used, undefined is assumed as a step
type?: "start" | "step" | "finish"; type?: "start" | "step" | "finish";
text?: string; text?: string;
imageSrc?: string; imageSrc?: string;
} }
interface Tutorial { interface Tutorial {
title: string; title: string;
thumbnail?: string; thumbnail?: string;
hint?: string; hint?: string;
steps: Slide[]; steps: Slide[];
} }
interface Props { interface Props {
tutorials: Tutorial[]; tutorials: Tutorial[];
isOpen: boolean; isOpen: boolean;
setIsOpen: React.Dispatch<React.SetStateAction<boolean>>; setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
} }
export default function Tutorial({ tutorials, isOpen, setIsOpen }: Props) { export default function Tutorial({ tutorials, isOpen, setIsOpen }: Props) {
const [isVisible, setIsVisible] = useState(false); const [isVisible, setIsVisible] = useState(false);
const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true, duration: 15 }); const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true, duration: 15 });
const [selectedIndex, setSelectedIndex] = useState(0); const [selectedIndex, setSelectedIndex] = useState(0);
// Build index map // Build index map
const slides: Array<Slide & { tutorialTitle: string }> = []; const slides: Array<Slide & { tutorialTitle: string }> = [];
const startSlides: Record<string, number> = {}; const startSlides: Record<string, number> = {};
tutorials.forEach((tutorial) => { tutorials.forEach((tutorial) => {
tutorial.steps.forEach((slide) => { tutorial.steps.forEach((slide) => {
if (slide.type === "start") { if (slide.type === "start") {
startSlides[tutorial.title] = slides.length; startSlides[tutorial.title] = slides.length;
} }
slides.push({ ...slide, tutorialTitle: tutorial.title }); slides.push({ ...slide, tutorialTitle: tutorial.title });
}); });
}); });
const currentSlide = slides[selectedIndex]; const currentSlide = slides[selectedIndex];
const isStartingPage = currentSlide?.type === "start"; const isStartingPage = currentSlide?.type === "start";
useEffect(() => { useEffect(() => {
if (currentSlide.type !== "finish") return; if (currentSlide.type !== "finish") return;
const defaults = { startVelocity: 30, spread: 360, ticks: 120, zIndex: 50 }; const defaults = { startVelocity: 30, spread: 360, ticks: 120, zIndex: 50 };
const randomInRange = (min: number, max: number) => Math.random() * (max - min) + min; const randomInRange = (min: number, max: number) => Math.random() * (max - min) + min;
setTimeout(() => { setTimeout(() => {
confetti({ confetti({
...defaults, ...defaults,
particleCount: 500, particleCount: 500,
origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 }, origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 },
}); });
confetti({ confetti({
...defaults, ...defaults,
particleCount: 500, particleCount: 500,
origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 }, origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 },
}); });
}, 300); }, 300);
}, [currentSlide]); }, [currentSlide]);
const close = () => { const close = () => {
setIsVisible(false); setIsVisible(false);
setTimeout(() => { setTimeout(() => {
setIsOpen(false); setIsOpen(false);
setSelectedIndex(0); setSelectedIndex(0);
}, 300); }, 300);
}; };
const goToTutorial = (tutorialTitle: string) => { const goToTutorial = (tutorialTitle: string) => {
if (!emblaApi) return; if (!emblaApi) return;
const index = startSlides[tutorialTitle]; const index = startSlides[tutorialTitle];
// Jump to next starting slide then transition to actual tutorial // Jump to next starting slide then transition to actual tutorial
emblaApi.scrollTo(index, true); emblaApi.scrollTo(index, true);
emblaApi.scrollTo(index + 1); emblaApi.scrollTo(index + 1);
}; };
useEffect(() => { useEffect(() => {
if (isOpen) { if (isOpen) {
// slight delay to trigger animation // slight delay to trigger animation
setTimeout(() => setIsVisible(true), 10); setTimeout(() => setIsVisible(true), 10);
} }
}, [isOpen]); }, [isOpen]);
useEffect(() => { useEffect(() => {
if (!emblaApi) return; if (!emblaApi) return;
emblaApi.on("select", () => setSelectedIndex(emblaApi.selectedScrollSnap())); emblaApi.on("select", () => setSelectedIndex(emblaApi.selectedScrollSnap()));
}, [emblaApi]); }, [emblaApi]);
return ( return (
<div className="fixed inset-0 h-[calc(100%-var(--header-height))] top-(--header-height) flex items-center justify-center z-40"> <div className="fixed inset-0 h-[calc(100%-var(--header-height))] top-(--header-height) flex items-center justify-center z-40">
<div <div
onClick={close} onClick={close}
className={`z-40 absolute inset-0 backdrop-brightness-75 backdrop-blur-xs transition-opacity duration-300 ${isVisible ? "opacity-100" : "opacity-0"}`} className={`z-40 absolute inset-0 backdrop-brightness-75 backdrop-blur-xs transition-opacity duration-300 ${isVisible ? "opacity-100" : "opacity-0"}`}
/> />
<div <div
className={`z-50 bg-orange-50 border-2 border-amber-500 rounded-2xl shadow-lg w-full max-w-xl h-120 transition-discrete duration-300 flex flex-col ${ className={`z-50 bg-orange-50 border-2 border-amber-500 rounded-2xl shadow-lg w-full max-w-xl h-120 transition-discrete duration-300 flex flex-col ${
isVisible ? "scale-100 opacity-100" : "scale-75 opacity-0" isVisible ? "scale-100 opacity-100" : "scale-75 opacity-0"
}`} }`}
> >
<div className="flex justify-between items-center mb-2 p-6 pb-0"> <div className="flex justify-between items-center mb-2 p-6 pb-0">
<h2 className="text-xl font-bold">Tutorial</h2> <h2 className="text-xl font-bold">Tutorial</h2>
<button onClick={close} aria-label="Close" className="text-red-400 hover:text-red-500 text-2xl cursor-pointer"> <button onClick={close} aria-label="Close" className="text-red-400 hover:text-red-500 text-2xl cursor-pointer">
<Icon icon="material-symbols:close-rounded" /> <Icon icon="material-symbols:close-rounded" />
</button> </button>
</div> </div>
<div className="flex flex-col min-h-0 h-full"> <div className="flex flex-col min-h-0 h-full">
<div className="overflow-hidden h-full" ref={emblaRef}> <div className="overflow-hidden h-full" ref={emblaRef}>
<div className="flex h-full"> <div className="flex h-full">
{slides.map((slide, index) => ( {slides.map((slide, index) => (
<div key={index} className={`shrink-0 flex flex-col w-full px-6 ${slide.type === "start" && "py-6"}`}> <div key={index} className={`shrink-0 flex flex-col w-full px-6 ${slide.type === "start" && "py-6"}`}>
{slide.type === "start" ? ( {slide.type === "start" ? (
<> <>
{/* Separator */} {/* Separator */}
<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mb-2"> <div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mb-2">
<hr className="grow border-zinc-300" /> <hr className="grow border-zinc-300" />
<span>Pick a tutorial</span> <span>Pick a tutorial</span>
<hr className="grow border-zinc-300" /> <hr className="grow border-zinc-300" />
</div> </div>
<div className="grid grid-cols-2 gap-4 h-full"> <div className="grid grid-cols-2 gap-4 h-full">
{tutorials.map((tutorial, tutorialIndex) => ( {tutorials.map((tutorial, tutorialIndex) => (
<button <button
key={tutorialIndex} key={tutorialIndex}
onClick={() => goToTutorial(tutorial.title)} onClick={() => goToTutorial(tutorial.title)}
aria-label={tutorial.title + " tutorial"} aria-label={tutorial.title + " tutorial"}
className="flex flex-col justify-center items-center bg-zinc-50 rounded-xl p-4 shadow-md border-2 border-zinc-300 cursor-pointer text-center text-sm transition hover:scale-[1.03] hover:bg-cyan-100 hover:border-cyan-600" className="flex flex-col justify-center items-center bg-zinc-50 rounded-xl p-4 shadow-md border-2 border-zinc-300 cursor-pointer text-center text-sm transition hover:scale-[1.03] hover:bg-cyan-100 hover:border-cyan-600"
> >
<img <img
src={tutorial.thumbnail!} src={tutorial.thumbnail!}
alt="tutorial thumbnail" alt="tutorial thumbnail"
width={128} width={128}
height={128} height={128}
className="rounded-lg border-2 border-zinc-300 object-cover" className="rounded-lg border-2 border-zinc-300 object-cover"
/> />
<p className="mt-2">{tutorial.title}</p> <p className="mt-2">{tutorial.title}</p>
{/* Set opacity to 0 to keep height the same with other tutorials */} {/* Set opacity to 0 to keep height the same with other tutorials */}
<p className={`text-[0.65rem] text-zinc-400 ${!tutorial.hint && "opacity-0"}`}>{tutorial.hint || "placeholder"}</p> <p className={`text-[0.65rem] text-zinc-400 ${!tutorial.hint && "opacity-0"}`}>{tutorial.hint || "placeholder"}</p>
</button> </button>
))} ))}
</div> </div>
</> </>
) : slide.type === "finish" ? ( ) : slide.type === "finish" ? (
<div className="h-full flex flex-col justify-center items-center"> <div className="h-full flex flex-col justify-center items-center">
<Icon icon="fxemoji:partypopper" className="text-9xl" /> <Icon icon="fxemoji:partypopper" className="text-9xl" />
<h1 className="font-medium text-xl mt-6 animate-bounce">Yatta! You did it!</h1> <h1 className="font-medium text-xl mt-6 animate-bounce">Yatta! You did it!</h1>
</div> </div>
) : ( ) : (
<> <>
<p className="text-sm text-zinc-500 mb-2 text-center">{slide.text}</p> <p className="text-sm text-zinc-500 mb-2 text-center">{slide.text}</p>
<img <img
src={slide.imageSrc ?? "/missing.svg"} src={slide.imageSrc ?? "/missing.svg"}
alt="step image" alt="step image"
width={396} width={396}
height={320} height={320}
loading="eager" loading="eager"
className="rounded-lg w-full h-full object-contain bg-black flex-1" className="rounded-lg w-full h-full object-contain bg-black flex-1"
/> />
</> </>
)} )}
</div> </div>
))} ))}
</div> </div>
</div> </div>
{/* Arrows */} {/* Arrows */}
<div className={`flex justify-between items-center mt-2 px-6 pb-6 transition-opacity duration-300 ${isStartingPage && "opacity-0"}`}> <div className={`flex justify-between items-center mt-2 px-6 pb-6 transition-opacity duration-300 ${isStartingPage && "opacity-0"}`}>
<button <button
onClick={() => emblaApi?.scrollPrev()} onClick={() => emblaApi?.scrollPrev()}
disabled={isStartingPage} disabled={isStartingPage}
className={`pill button p-1! aspect-square text-2xl ${isStartingPage && "cursor-auto!"}`} className={`pill button p-1! aspect-square text-2xl ${isStartingPage && "cursor-auto!"}`}
aria-label="Scroll Carousel Left" aria-label="Scroll Carousel Left"
> >
<Icon icon="tabler:chevron-left" /> <Icon icon="tabler:chevron-left" />
</button> </button>
{/* Only show tutorial name on step slides */} {/* Only show tutorial name on step slides */}
<span className={`text-sm transition-opacity duration-300 ${(currentSlide.type === "finish" || currentSlide.type === "start") && "opacity-0"}`}> <span className={`text-sm transition-opacity duration-300 ${(currentSlide.type === "finish" || currentSlide.type === "start") && "opacity-0"}`}>
{currentSlide?.tutorialTitle} {currentSlide?.tutorialTitle}
</span> </span>
<button <button
onClick={() => emblaApi?.scrollNext()} onClick={() => emblaApi?.scrollNext()}
disabled={isStartingPage} disabled={isStartingPage}
className={`pill button p-1! aspect-square text-2xl ${isStartingPage && "cursor-auto!"}`} className={`pill button p-1! aspect-square text-2xl ${isStartingPage && "cursor-auto!"}`}
aria-label="Scroll Carousel Right" aria-label="Scroll Carousel Right"
> >
<Icon icon="tabler:chevron-right" /> <Icon icon="tabler:chevron-right" />
</button> </button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
); );
} }

108
frontend/src/components/tutorial/switch-add-mii.tsx
View file

@ -1,54 +1,54 @@
import { useState } from "react"; import { useState } from "react";
import { createPortal } from "react-dom"; import { createPortal } from "react-dom";
import { Icon } from "@iconify/react"; import { Icon } from "@iconify/react";
import Tutorial from "."; import Tutorial from ".";
export default function SwitchAddMiiTutorialButton() { export default function SwitchAddMiiTutorialButton() {
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
return ( return (
<> <>
<button aria-label="Tutorial" type="button" onClick={() => setIsOpen(true)} className="text-3xl cursor-pointer"> <button aria-label="Tutorial" type="button" onClick={() => setIsOpen(true)} className="text-3xl cursor-pointer">
<Icon icon="fa:question-circle" /> <Icon icon="fa:question-circle" />
<span>Tutorial</span> <span>Tutorial</span>
</button> </button>
{isOpen && {isOpen &&
createPortal( createPortal(
<Tutorial <Tutorial
tutorials={[ tutorials={[
{ {
title: "Adding Mii", title: "Adding Mii",
steps: [ steps: [
{ {
text: "1. Press X to open the menu, then select 'Add a Mii'", text: "1. Press X to open the menu, then select 'Add a Mii'",
imageSrc: "/tutorial/switch/adding-mii/step1.jpg", imageSrc: "/tutorial/switch/adding-mii/step1.jpg",
}, },
{ {
text: "2. Press 'From scratch' and choose the Male template", text: "2. Press 'From scratch' and choose the Male template",
imageSrc: "/tutorial/switch/adding-mii/step2.jpg", imageSrc: "/tutorial/switch/adding-mii/step2.jpg",
}, },
{ {
text: "3. Click on the features image on this page to zoom it in and add all features on the mii editor", text: "3. Click on the features image on this page to zoom it in and add all features on the mii editor",
imageSrc: "/tutorial/switch/adding-mii/step3.png", imageSrc: "/tutorial/switch/adding-mii/step3.png",
}, },
{ {
text: "4. If the author added instructions, follow them (not all instructions will be there, check next slide for more)", text: "4. If the author added instructions, follow them (not all instructions will be there, check next slide for more)",
imageSrc: "/tutorial/switch/adding-mii/step4.jpg", imageSrc: "/tutorial/switch/adding-mii/step4.jpg",
}, },
{ {
text: "5. For instructions like height or distance, use the number of button clicks (positive for buttons on right, negative for buttons on left)", text: "5. For instructions like height or distance, use the number of button clicks (positive for buttons on right, negative for buttons on left)",
imageSrc: "/tutorial/switch/step4.jpg", imageSrc: "/tutorial/switch/step4.jpg",
}, },
{ type: "finish" }, { type: "finish" },
], ],
}, },
]} ]}
isOpen={isOpen} isOpen={isOpen}
setIsOpen={setIsOpen} setIsOpen={setIsOpen}
/>, />,
document.body, document.body,
)} )}
</> </>
); );
} }

96
frontend/src/components/tutorial/switch-submit.tsx
View file

@ -1,48 +1,48 @@
import { useState } from "react"; import { useState } from "react";
import { createPortal } from "react-dom"; import { createPortal } from "react-dom";
import Tutorial from "."; import Tutorial from ".";
export default function SwitchSubmitTutorialButton() { export default function SwitchSubmitTutorialButton() {
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
return ( return (
<> <>
<button type="button" onClick={() => setIsOpen(true)} className="text-sm text-orange-400 cursor-pointer underline-offset-2 hover:underline"> <button type="button" onClick={() => setIsOpen(true)} className="text-sm text-orange-400 cursor-pointer underline-offset-2 hover:underline">
How to? How to?
</button> </button>
{isOpen && {isOpen &&
createPortal( createPortal(
<Tutorial <Tutorial
tutorials={[ tutorials={[
{ {
title: "Submitting", title: "Submitting",
steps: [ steps: [
{ {
text: "1. Press X to open the menu, then select 'Residents'", text: "1. Press X to open the menu, then select 'Residents'",
imageSrc: "/tutorial/switch/submitting/step1.jpg", imageSrc: "/tutorial/switch/submitting/step1.jpg",
}, },
{ {
text: "2. Find the Mii you want to submit and edit it", text: "2. Find the Mii you want to submit and edit it",
imageSrc: "/tutorial/switch/submitting/step2.jpg", imageSrc: "/tutorial/switch/submitting/step2.jpg",
}, },
{ {
text: "3. Press Y to open the features list, then take a screenshot and upload to this submit form", text: "3. Press Y to open the features list, then take a screenshot and upload to this submit form",
imageSrc: "/tutorial/switch/submitting/step3.jpg", imageSrc: "/tutorial/switch/submitting/step3.jpg",
}, },
{ {
text: "4. Adding Mii colors and settings is recommended. All instructions are optional; for values like height or distance, use the number of button clicks (positive for buttons on right, negative for buttons on left)", text: "4. Adding Mii colors and settings is recommended. All instructions are optional; for values like height or distance, use the number of button clicks (positive for buttons on right, negative for buttons on left)",
imageSrc: "/tutorial/switch/step4.jpg", imageSrc: "/tutorial/switch/step4.jpg",
}, },
{ type: "finish" }, { type: "finish" },
], ],
}, },
]} ]}
isOpen={isOpen} isOpen={isOpen}
setIsOpen={setIsOpen} setIsOpen={setIsOpen}
/>, />,
document.body, document.body,
)} )}
</> </>
); );
} }

8
frontend/src/styles/global.css → frontend/src/index.css
View file

@ -19,6 +19,10 @@
} }
} }
#root {
@apply antialiased flex flex-col items-center w-screen h-screen;
}
.pill { .pill {
@apply flex justify-center items-center px-5 py-2 bg-orange-300 border-2 border-orange-400 rounded-3xl shadow-md; @apply flex justify-center items-center px-5 py-2 bg-orange-300 border-2 border-orange-400 rounded-3xl shadow-md;
} }
@ -134,8 +138,8 @@ input[type="range"]:hover::-moz-range-thumb {
} }
body { body {
@apply bg-amber-50 text-slate-800; @apply bg-amber-50 text-slate-800 min-h-screen;
font-family: var(--font-lexend); font-family: "Lexend Variable", sans-serif;
/* syntax highlighting is a bit broken when it's at the top so it's at the bottom */ /* syntax highlighting is a bit broken when it's at the top so it's at the bottom */
background-image: url('data:image/svg+xml;utf8,\ background-image: url('data:image/svg+xml;utf8,\

91
frontend/src/layout.astro
View file

@ -1,91 +0,0 @@
---
import "./styles/global.css";
import "react-image-crop/dist/ReactCrop.css";
import Header from "./components/header.astro";
import Footer from "./components/footer.astro";
// import AdminBanner from "./components/admin/banner";
import Providers from "./components/provider";
import { Font } from "astro:assets";
// import SessionWrapper from "./components/SessionWrapper";
const baseUrl = import.meta.env.PUBLIC_BASE_URL;
const jsonLd = {
"@context": "https://schema.org",
"@type": "WebSite",
name: "TomodachiShare",
url: "https://tomodachishare.com",
description: "Discover and share Mii residents for your Tomodachi Life island!",
inLanguage: "en",
publisher: {
"@type": "Organization",
name: "TomodachiShare",
url: "https://tomodachishare.com",
logo: {
"@type": "ImageObject",
url: "https://tomodachishare.com/logo.png",
},
sameAs: ["https://trafficlunar.net", "https://twitter.com/trafficlunr", "https://bsky.app/profile/trafficlunar.net"],
},
potentialAction: {
"@type": "SearchAction",
target: "https://tomodachishare.com/?q={search_term_string}",
"query-input": "required name=search_term_string",
},
};
---
<html lang="en">
<head>
<Font cssVariable="--font-lexend" />
<meta charset="UTF-8" />
<!-- SEO -->
<title>TomodachiShare - home for Tomodachi Life Miis!</title>
<meta name="description" content="Discover and share Mii residents for your Tomodachi Life island!" />
<meta name="keywords" content="mii, tomodachi life, nintendo, tomodachishare, tomodachi-share, mii creator, mii collection" />
<meta name="robots" content="index, follow" />
<!-- OpenGraph -->
<meta property="og:site_name" content="TomodachiShare" />
<meta property="og:title" content="TomodachiShare" />
<meta property="og:description" content="Discover and share Mii residents for your Tomodachi Life island!" />
<meta property="og:image" content="/preview.png" />
<meta property="og:type" content="website" />
<meta property="og:url" content={baseUrl} />
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="TomodachiShare - Discover and Share Your Mii Residents" />
<meta name="twitter:description" content="Discover and share Mii residents for your Tomodachi Life island!" />
<meta name="twitter:image" content="/preview.png" />
<meta name="twitter:creator" content="@trafficlunr" />
<!-- JSON-LD -->
<script is:inline type="application/ld+json" set:html={JSON.stringify(jsonLd).replace(/</g, "\\u003c")} />
<!-- Analytics -->
{
import.meta.env.PROD && (
<script is:inline defer src="https://analytics.trafficlunar.net/script.js" data-website-id="bc530384-9b7d-471a-b2e3-f9859da50c24" />
)
}
</head>
<body class="font-[Lexend] antialiased flex flex-col items-center min-h-screen">
<Providers client:load>
<!-- <SessionWrapper client:load> -->
<Header />
<!-- <AdminBanner client:load /> -->
<main class="px-4 py-8 max-w-7xl w-full grow flex flex-col">
<slot />
</main>
<Footer />
<!-- </SessionWrapper> -->
</Providers>
</body>
</html>

47
frontend/src/main.tsx Normal file
View file

@ -0,0 +1,47 @@
import { StrictMode, Suspense } from "react";
import { createRoot } from "react-dom/client";
import { BrowserRouter, Route, Routes } from "react-router";
import "./index.css";
import "@fontsource-variable/lexend/wght.css";
import PrivacyPage from "./pages/privacy.tsx";
import TermsOfServicePage from "./pages/terms-of-service.tsx";
import NotFoundPage from "./pages/not-found.tsx";
import LoginPage from "./pages/login.tsx";
import ProfilePage from "./pages/profile.tsx";
import MiiPage from "./pages/mii.tsx";
import SubmitPage from "./pages/submit.tsx";
import IndexPage from "./pages/index.tsx";
import ProfileSettingsPage from "./pages/settings.tsx";
import Providers from "./components/provider.tsx";
import Header from "./components/header.tsx";
import Footer from "./components/footer.tsx";
createRoot(document.getElementById("root")!).render(
<StrictMode>
<Providers>
<Suspense fallback={<div>Loading header...</div>}>
<Header />
</Suspense>
{/* <AdminBanner /> */}
<main className="px-4 py-8 max-w-7xl w-full grow flex flex-col">
<BrowserRouter>
<Routes>
<Route path="/" element={<IndexPage />} />
<Route path="/mii/:id" element={<MiiPage />} />
<Route path="/profile">
<Route path=":id" element={<ProfilePage />} />
<Route path="settings" element={<ProfileSettingsPage />} />
</Route>
<Route path="/submit" element={<SubmitPage />} />
<Route path="/login" element={<LoginPage />} />
<Route path="/privacy" element={<PrivacyPage />} />
<Route path="/terms-of-service" element={<TermsOfServicePage />} />
<Route path="*" element={<NotFoundPage />} />
</Routes>
</BrowserRouter>
</main>
<Footer />
</Providers>
</StrictMode>,
);

17
frontend/src/pages/404.astro
View file

@ -1,17 +0,0 @@
---
import { Icon } from "astro-icon/components";
import Layout from "../layout.astro";
---
<Layout>
<div class="grow flex items-center justify-center">
<div class="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg p-8 max-w-xs w-full text-center flex flex-col">
<h2 class="text-7xl font-black">404</h2>
<p>Page not found - you swam off the island!</p>
<a href="/" class="pill button gap-2 mt-8 w-fit self-center">
<Icon name="ic:round-home" size={24} />
Travel Back
</a>
</div>
</div>
</Layout>

11
frontend/src/pages/index.astro
View file

@ -1,11 +0,0 @@
---
import Layout from "../layout.astro";
import IndexPage from "../components/pages/index";
---
<Layout>
<!-- <Suspense fallback={<Skeleton />}> -->
<!-- <MiiList searchParams={Astro.url.searchParams} /> -->
<!-- </Suspense> -->
<IndexPage client:only />
</Layout>

Some files were not shown because too many files have changed in this diff Show more