chore: update readme for ongeki

Co-authored-by: Raymond <101374892+raymonable@users.noreply.github.com>

.devcontainer/Dockerfile

@@ -0,0 +1,20 @@
+FROM gradle:8.8.0-jdk21
+
+ENV NODE_VERSION=22
+
+RUN apt-get update && \
+    apt-get install -y curl && \
+    curl -fsSL https://deb.nodesource.com/setup_${NODE_VERSION}.x | bash - && \
+    apt-get install -y nodejs && \
+    npm install -g npm@latest
+
+RUN npm install -g bun
+
+RUN apt-get install -y maven
+
+RUN gradle --version && \
+    node --version && \
+    npm --version && \
+    bun --version
+
+WORKDIR /workspace

.devcontainer/devcontainer.json

@@ -0,0 +1,17 @@
+{
+    "name": "AquaDX Dev Container",
+    "build": {
+        "dockerfile": "Dockerfile"
+    },
+    "customizations": {
+        "vscode": {
+            "extensions": [
+                "vscjava.vscode-gradle",
+                "vscjava.vscode-java-pack",
+                "dbaeumer.vscode-eslint",
+                "esbenp.prettier-vscode",
+                "fwcd.kotlin"
+            ]
+        }
+    }
+}

.dockerignore

@@ -0,0 +1,8 @@
+*
+!gradlew
+!gradle/
+!gradle/**
+!build.gradle.kts
+!settings.gradle.kts
+!src/
+!src/**

.github/workflows/docker-image.yml

@@ -0,0 +1,63 @@
+name: Build and Publish Docker Image
+
+# Trigger the workflow on push to the main branch or on manual dispatch
+on:
+  push:
+    branches:
+      - main
+  workflow_dispatch:
+  schedule:
+    - cron: '0 0 * * 0'  # Runs at midnight UTC every Sunday
+
+jobs:
+  build-and-push:
+    runs-on: ubuntu-latest
+
+    steps:
+      # 1. Checkout the repository
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      # 2. Set up QEMU and Docker Buildx (for multi-platform builds, optional)
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      # 3. Log in to Docker Hub
+      - name: Log in to Docker Hub
+        uses: docker/login-action@v3
+        with:
+          username: hykilpikonna
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+          
+      # 3. Log in to GitHub Container Registry (ghcr.io)
+      - name: Log in to GitHub Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          # Use GITHUB_TOKEN for authentication
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      # 4. Cache Docker layers to speed up builds (optional but recommended)
+      - name: Cache Docker layers
+        uses: actions/cache@v3
+        with:
+          path: /tmp/.buildx-cache
+          key: ${{ runner.os }}-buildx-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-buildx-
+
+      # 5. Build and push the Docker image
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v4
+        with:
+          context: .
+          push: true
+          tags: |
+            hykilpikonna/aquadx:latest
+          platforms: linux/amd64,linux/arm64
+          cache-from: type=local,src=/tmp/.buildx-cache
+          cache-to: type=local,dest=/tmp/.buildx-cache

.github/workflows/gradle.yml

@@ -0,0 +1,25 @@
+name: Gradle Build
+
+on:
+  pull_request:
+    branches: [ master ]
+  workflow_dispatch:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+
+    - name: Set up JDK
+      uses: actions/setup-java@v4
+      with:
+        java-version: '25'
+        distribution: 'temurin'
+
+    - name: Build with Gradle
+      run: |
+        mkdir data
+        bash ./src/main/resources/meta/update.sh
+        chmod +x gradlew
+        ./gradlew build

.github/workflows/nightly.yml

@@ -0,0 +1,51 @@
+# Build script credit to https://github.com/OpenIntelWireless/itlwm/blob/master/.github/workflows/main.yml
+name: Nightly Build
+
+on:
+  push:
+    branches: [master]
+    paths: ['src/**']
+  workflow_dispatch:
+
+jobs:
+  build:
+    permissions: write-all
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: '10'
+
+      - name: Set up JDK
+        uses: actions/setup-java@v4
+        with:
+          java-version: '25'
+          distribution: 'temurin'
+          server-id: github
+
+      - name: Setup Gradle
+        uses: gradle/gradle-build-action@v2
+
+      - name: Build Artifact
+        run: bash ./tools/build.sh
+
+      - name: Delete previous nightly release
+        run: |
+          gh release delete --cleanup-tag --yes --repo $GITHUB_REPOSITORY nightly || true
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Publish GitHub Release
+        uses: ncipollo/release-action@v1
+        with:
+          bodyFile: "build/release/ReleaseNotes.md"
+          artifacts: "build/libs/aqua-nightly.jar,build/aqua-nightly.zip"
+          tag: "nightly"
+          token: ${{ secrets.GITHUB_TOKEN }}
+          draft: false
+
+      - name: Mark release undraft
+        run: |
+          gh release edit nightly --draft=false
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -1,3 +1,4 @@
+db/
 web/
 bin/
 
@@ -76,3 +77,13 @@ gradle-app.setting
 ### Gradle Patch ###
 # Java heap dump
 *.hprof
+.jpb
+src/main/resources/meta/*/*.json
+*.log.*.gz
+*.salive
+test-diff
+htmlReport
+docs/logs
+
+# Sensitive keys
+game_encryption.json

.gitlab-ci.yml

@@ -1,25 +0,0 @@
-image: gradle:alpine
-
-before_script:
-  - GRADLE_USER_HOME="$(pwd)/.gradle"
-  - export GRADLE_USER_HOME
-
-build:
-  stage: build
-  script: gradle --build-cache assemble
-  cache:
-    key: "$CI_COMMIT_REF_NAME"
-    policy: push
-    paths:
-      - build
-      - .gradle
-
-test:
-  stage: test
-  script: gradle check
-  cache:
-    key: "$CI_COMMIT_REF_NAME"
-    policy: pull
-    paths:
-      - build
-      - .gradle

AquaNet/.editorconfig

@@ -0,0 +1,20 @@
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+# Matches multiple files: .ts, .json, .svelte .sass
+[*.{json,svelte,ts,sass}]
+indent_style = space
+indent_size = 2
+
+
+# Markdown files (e.g., README.md) often use a line length of 80 characters
+[*.md]
+max_line_length = 80
+trim_trailing_whitespace = false

AquaNet/.env.example

@@ -0,0 +1,26 @@
+# This should reference your AquaDX instance's :80 port.
+# Sometimes issues with CORS may appear, the easiest fix is to use a reverse proxy like Caddy to put AquaDX on the /aqua path,
+#       and set this to match the /aqua path (see example below)
+VITE_AQUA_HOST=https://aquadx.net/aqua
+
+# Link to converted game data (ex: all_music.json, all_items.json, etc.)
+# Profile pictures are also served through this path, you may want to disable profile pictures if using the primary instance for data fetching
+VITE_DATA_HOST=https://aquadx.net
+
+VITE_AQUA_CONNECTION=aquadx.hydev.org
+VITE_TURNSTILE_SITE_KEY=0x4AAAAAAASGA2KQEIelo9P9
+VITE_DISCORD_INVITE=https://discord.gg/FNgveqFF7s
+VITE_TELEGRAM_INVITE=https://t.me/+zBL4RZdyfvUzZGU1
+VITE_QQ_INVITE=https://qm.qq.com/q/dpYmGoVHnG
+VITE_GITHUB_REPOSITORY=https://github.com/MewoLab/AquaDX
+
+# Documentation for Userbox mode can be found in `docs/aquabox-url-mode.md`
+# Please note that if this is set, it must be manually unset by users in Chuni Settings -> Update Userbox -> Switch to URL mode -> (empty value) -> Enter key
+VITE_USERBOX_DEFAULT_URL=
+
+# the following is used at some case where custom access code QR code URL has been done.
+# example:
+# https://aquadx.net/cards/#accesskey=....
+VITE_ACCESSCODE_QKEY=accesskey
+
+VITE_DEFAULT_GAME=mai2

AquaNet/.eslintrc.cjs

@@ -0,0 +1,41 @@
+// ..eslintrc.cjs example
+module.exports = {
+    root: true,
+    env: {
+        browser: true,
+        es2023: true
+    },
+    extends: [
+        'eslint:recommended',
+
+        'plugin:@typescript-eslint/recommended',
+        'plugin:svelte/recommended',
+    ],
+    ignorePatterns: ['dist', '..eslintrc.cjs'],
+    parser: '@typescript-eslint/parser',
+    parserOptions: {
+        ecmaVersion: 'latest',
+        sourceType: 'module'
+    },
+    rules: {
+        // Custom styling rules
+        'comma-dangle': ['warn', 'only-multiline'],
+        'indent': ['warn', 2],
+        'semi': ['warn', 'never'],
+        'quotes': ['warn', 'single'],
+        'arrow-parens': ['warn', 'as-needed'],
+        'linebreak-style': ['warn', 'unix'],
+        'object-curly-spacing': ['warn', 'always'],
+        'array-bracket-spacing': ["error", "always", {
+            "singleValue": false,
+            "objectsInArrays": false,
+            "arraysInArrays": false
+        }],
+
+        // Disabled rules
+        'no-unused-vars': 'off',
+        '@typescript-eslint/no-unused-vars': 'off',
+        'no-constant-condition': 'off',
+        '@typescript-eslint/no-explicit-any': 'off',
+    },
+}

AquaNet/.gitignore

@@ -0,0 +1,40 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Yarn 3 files
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+
+public/chu3
+
+# local env file
+*.local
+
+.env

AquaNet/README.md

@@ -0,0 +1,33 @@
+# AquaNet
+
+This is the codebase for the new frontend of AquaDX. 
+This project is also heavily WIP, so more details will be added later on.
+
+## Development
+
+This project uses Svelte (NOT SvelteKit) + TypeScript + Sass, built using Vite. The preferred editor is VSCode.
+
+### Running locally
+
+You will need to have Node.js (or equivalent) and `pnpm` installed, Start by installing dependencies by running:
+```
+pnpm install
+```
+
+Then, you would need to start your testing AquaDX server and configure the `VITE_AQUA_HOST` in `.env` (copy `.env.example` file to `.env`) to use your URL.
+Please leave `VITE_DATA_HOST` unchanged if you're not sure what it is.
+
+Finally, run:
+```
+pnpm run dev
+```
+### Running locally (with bun)
+
+Alternatively, If you prefer [Bun](https://bun.sh), You can do the same as above.
+Start by configuring the `VITE_AQUA_HOST` in `.env` (copy `.env.example` file to `.env`) to use your URL.
+
+and finally:
+```
+bun install
+bun run dev
+```

AquaNet/buildcheck.js

@@ -0,0 +1,9 @@
+import { existsSync } from "fs"
+
+if (!existsSync(".env")) {
+  console.error("  I did not see .env being here. You sure it was there?")
+  console.error("  Copy .env.example to .env, edit .env, and try again.\n")
+  process.exit(1)
+}
+
+process.exit(0)

AquaNet/index.html

@@ -0,0 +1,44 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>AquaNet</title>
+
+    <link rel="apple-touch-icon" sizes="180x180" href="/assets/icons/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/assets/icons/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/assets/icons/favicon-16x16.png">
+    <link rel="manifest" href="/assets/icons/site.webmanifest">
+    <link rel="mask-icon" href="/assets/icons/safari-pinned-tab.svg" color="#b3c6ff">
+    <link rel="shortcut icon" href="/assets/icons/favicon.ico">
+    <meta name="msapplication-TileColor" content="#ffffff">
+    <meta name="msapplication-config" content="/assets/icons/browserconfig.xml">
+    <meta name="theme-color" content="#ffffff">
+
+    <!-- Font CSS -->
+    <link rel="stylesheet" href="/assets/fonts/Quicksand.400.css" />
+    <link rel="stylesheet" href="/assets/fonts/Quicksand.500.css" />
+
+    <!-- Primary Meta Tags -->
+    <meta name="title" content="AquaNet (AquaDX.net)" />
+    <meta name="description" content="A certain magical arcade server 🪄" />
+
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://aquadx.net/" />
+    <meta property="og:title" content="AquaNet (AquaDX.net)" />
+    <meta property="og:description" content="A certain magical arcade server 🪄" />
+    <meta property="og:image" content="https://aquadx.net/assets/meta/meta.png" />
+
+    <!-- Twitter -->
+    <meta property="twitter:card" content="summary_large_image" />
+    <meta property="twitter:url" content="https://aquadx.net/" />
+    <meta property="twitter:title" content="AquaNet (AquaDX.net)" />
+    <meta property="twitter:description" content="A certain magical arcade server 🪄" />
+    <meta property="twitter:image" content="https://aquadx.net/assets/meta/meta.png" />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

AquaNet/nginx.conf.example

@@ -0,0 +1,38 @@
+server {
+  listen 443 ssl;
+  server_name aqua.example.com;
+  ssl_certificate /etc/nginx/certs/aqua.example.com.crt;
+  ssl_certificate_key /etc/nginx/certs/aqua.example.com.key;
+
+  # Absolute path to store the compiled AquaNet,
+  # there should be index.html in the directory.
+  location / {
+    root /var/www/html/AquaNet/;
+    try_files $uri $uri/ @router;
+    index index.html;
+  }
+
+  # Route for redirection to index.html
+  location @router{
+    rewrite ^.*$ /index.html last;
+  }
+
+  # If you have modified DATA_HOST, 
+  # you will need to prepare your own resources.
+  # location /d/ {
+  #   root /var/www/html/GameData/;
+  # }
+
+  # Reverse Proxy to your AquaDX.
+  location /aqua/ {
+    proxy_redirect off;
+    proxy_http_version 1.1;
+    proxy_set_header Host $host;
+    proxy_set_header X-Forwarded-Proto $scheme;
+    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+    proxy_set_header Upgrade $http_upgrade;
+    proxy_set_header Connection "upgrade";
+    proxy_pass http://127.0.0.1/;
+    proxy_buffering off;
+  }
+}

AquaNet/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "aqua-net",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "node buildcheck.js && vite",
+    "build": "node buildcheck.js && vite build",
+    "preview": "vite preview",
+    "check": "svelte-check --tsconfig ./tsconfig.json",
+    "lint": "eslint . --ext ts,tsx,svelte --max-warnings 0 --fix"
+  },
+  "devDependencies": {
+    "@iconify/svelte": "^4.1.0",
+    "@iconify/tools": "^4.1.1",
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
+    "@tsconfig/svelte": "^5.0.4",
+    "@types/d3": "^7.4.3",
+    "@types/wicg-file-system-access": "^2023.10.5",
+    "@unocss/svelte-scoped": "^0.65.2",
+    "chartjs-adapter-moment": "^1.0.1",
+    "eslint": "^9.17.0",
+    "eslint-plugin-svelte": "^2.46.1",
+    "sass": "^1.83.0",
+    "shiki": "^1.24.4",
+    "svelte": "^5",
+    "svelte-check": "^4",
+    "svelte-turnstile": "^0.9.0",
+    "tslib": "^2.8.1",
+    "typescript": "^5.7.2",
+    "typescript-eslint": "^8.18.2",
+    "unocss": "^0.65.2",
+    "vite": "^6.0.5"
+  },
+  "dependencies": {
+    "cal-heatmap": "^4.2.4",
+    "chart.js": "^4.4.7",
+    "d3": "^7.9.0",
+    "lxgw-wenkai-lite-webfont": "^1.7.0",
+    "modern-normalize": "^3.0.1",
+    "moment": "^2.30.1",
+    "svelte-easy-crop": "^4.0.0",
+    "svelte5-router": "^3.0.1"
+  },
+  "packageManager": "pnpm@9.7.0+sha512.dc09430156b427f5ecfc79888899e1c39d2d690f004be70e05230b72cb173d96839587545d09429b55ac3c429c801b4dc3c0e002f653830a420fa2dd4e3cf9cf"
+}

AquaNet/public/assets/fonts/Quicksand.400.css

@@ -0,0 +1,27 @@
+/* vietnamese */
+@font-face {
+    font-family: 'Quicksand';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(Quicksand.400.vietnamese.woff2) format('woff2');
+    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+    font-family: 'Quicksand';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(Quicksand.400.latin-ext.woff2) format('woff2');
+    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+    font-family: 'Quicksand';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(Quicksand.400.latin.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

AquaNet/public/assets/fonts/Quicksand.500.css

@@ -0,0 +1,27 @@
+/* vietnamese */
+@font-face {
+    font-family: 'Quicksand';
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url(Quicksand.500.vietnamese.woff2) format('woff2');
+    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+    font-family: 'Quicksand';
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url(Quicksand.500.latin-ext.woff2) format('woff2');
+    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+    font-family: 'Quicksand';
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url(Quicksand.400.latin.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

AquaNet/public/assets/icons/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/assets/icons/mstile-150x150.png"/>
+            <TileColor>#ffffff</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

AquaNet/public/assets/icons/site.webmanifest

@@ -0,0 +1,19 @@
+{
+    "name": "",
+    "short_name": "",
+    "icons": [
+        {
+            "src": "/assets/icons/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/assets/icons/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}

AquaNet/src/App.svelte

@@ -0,0 +1,160 @@
+<script lang="ts">
+  import { Route, Router } from "svelte5-router";
+  import Welcome from "./pages/Welcome.svelte";
+  import UserHome from "./pages/UserHome.svelte";
+  import Home from "./pages/Home.svelte";
+  import Ranking from "./pages/Ranking.svelte";
+  import { CARD, USER } from "./libs/sdk";
+  import type { AquaNetUser } from "./libs/generalTypes";
+  import Settings from "./pages/User/Settings.svelte";
+  import MaiPhoto from "./pages/MaiPhoto.svelte";
+  import { pfp, tooltip } from "./libs/ui"
+  import { ANNOUNCEMENT } from "./libs/announcement";
+  import { DEFAULT_GAME } from "./libs/config"
+  import { t } from "./libs/i18n";
+  import Transfer from "./pages/Transfer/Transfer.svelte";
+  import { link } from "d3";
+  import Communities from "./pages/Home/Communities.svelte";
+  import LinkCard from "./pages/Home/LinkCard.svelte";
+  import SetupInstructions from "./pages/Home/SetupInstructions.svelte";
+  import PageNotFound from "./pages/PageNotFound.svelte";
+
+  console.log(`%c
+┏━┓         ┳━┓━┓┏━
+┣━┫┏━┓┓ ┏┏━┓┃ ┃ ┣┫
+┛ ┗┗━┫┗━┻┗━┻┻━┛━┛┗━
+     ┗       v${APP_VERSION}`, `
+     background: linear-gradient(-45deg, rgba(18,194,233,1) 0%, rgba(196,113,237,1) 50%, rgba(246,79,89,1) 100%);
+     font-size: 2em;
+     font-family: Monospace;
+     unicode-bidi: isolate;
+     -webkit-background-clip: text;
+     -webkit-text-fill-color: transparent;`)
+
+  export let url = "";
+  let me: AquaNetUser
+  let playedMai = false
+
+  let recentGame: string = DEFAULT_GAME;
+
+  if (USER.isLoggedIn())
+  {
+    USER.me().then(m => {
+      me = m
+      CARD.userGames(me.username).then(game => {
+        playedMai = !!game.mai2
+        recentGame = Object.keys(game)
+          .filter(k => !!game[k])
+          .sort((a, b) => {
+            return (new Date(game[b].lastLogin)) - (new Date(game[a].lastLogin))
+          })[0] ?? "mai2"
+      })
+    }).catch(e => console.error(e))
+  }
+  let path = window.location.pathname;
+</script>
+
+<nav>
+  {#if path !== "/"}
+    <a class="logo" href={USER.isLoggedIn() ? "/home" : "/"}>
+      <img src="/assets/icons/android-chrome-192x192.png" alt="AquaDX"/>
+      <span>AquaNet</span>
+    </a>
+  {/if}
+  {#if $ANNOUNCEMENT}
+    <div class="announcement">
+      <strong>{t('navigation.notice')}</strong>: {$ANNOUNCEMENT}
+    </div>
+  {/if}
+  <a href="/home">{t('navigation.home').toLowerCase()}</a>
+  <!-- <div on:click={() => alert("Coming soon™")} on:keydown={e => e.key === "Enter" && alert("Coming soon™")}
+       role="button" tabindex="0">{t('navigation.maps').toLowerCase()}</div> -->
+  <!-- kill me -->
+  <a href={`/ranking/${recentGame}`}>{t('navigation.rankings').toLowerCase()}</a>
+  {#if playedMai}
+    <a href="/pictures">photo</a>
+  {/if}
+  {#if me}
+    <a href="/u/{me.username}" use:tooltip={t('navigation.profile')}>
+      <img alt="profile" class="pfp" use:pfp={me}/>
+    </a>
+  {/if}
+</nav>
+
+<Router {url}>
+  <Route path="/" component={Welcome} />
+  <Route path="/verify" component={Welcome} /> <!-- For email verification only, backwards compatibility with AquaNet2 in the future -->
+  <Route path="/reset-password" component={Welcome} />
+  <Route path="/home" component={Home} />
+  <Route path="/support" component={Communities} />
+  <Route path="/cards" component={LinkCard} />
+  <Route path="/setup" component={SetupInstructions} />
+  <Route path="/ranking" component={Ranking} />
+  <Route path="/ranking/:game" component={Ranking} />
+  <Route path="/u/:username" component={UserHome} />
+  <Route path="/u/:username/:game" component={UserHome} />
+  <Route path="/settings" component={Settings} />
+  <Route path="/settings/:page" component={Settings} />
+  <Route path="/pictures" component={MaiPhoto} />
+  <Route path="/transfer" component={Transfer} />
+  <Route component={PageNotFound} />
+</Router>
+
+<style lang="sass">
+  @use "vars"
+
+  nav
+    display: flex
+    justify-content: flex-end
+    align-items: center
+    gap: 32px
+    height: vars.$nav-height
+
+    padding: 0 48px
+
+    z-index: 10
+    position: relative
+
+    img
+      width: 1.5rem
+      height: 1.5rem
+      border-radius: vars.$border-radius
+      object-fit: cover
+
+    .announcement
+      position: absolute
+      left: 50%
+      transform: translate(-50%, 0)
+      top: 0
+      width: 50%
+      height: 100%
+      display: flex
+      justify-content: center
+      align-content: center
+      z-index: -1
+      background: linear-gradient(90deg, #6f0f0f00 0%, vars.$c-shadow 50%, #6f0f0f00 100%)
+      font-size: 1.125em
+      text-decoration: none !important
+      color: inherit !important
+
+    .pfp
+      width: 2rem
+      height: 2rem
+
+    .logo
+      display: flex
+      align-items: center
+      gap: 8px
+      font-weight: bold
+      color: vars.$c-main
+      letter-spacing: 0.2em
+      flex: 1
+
+      @media (max-width: vars.$w-mobile)
+        > span
+          display: none
+
+    @media (max-width: vars.$w-mobile)
+      justify-content: center
+
+</style>

AquaNet/src/app.sass

@@ -0,0 +1,384 @@
+@use "sass:color"
+@use "vars"
+@import 'components/font/twemoji-flags.css'
+@import 'lxgw-wenkai-lite-webfont/style.css'
+
+html
+  height: 100%
+
+body
+  font-family: vars.$font
+  line-height: 1.5
+  font-weight: 400
+  width: 100%
+  height: 100%
+  margin: 0
+  overflow-x: hidden
+
+  color-scheme: dark
+  color: rgba(255, 255, 255, 0.87)
+  background-color: vars.$c-bg
+
+  font-synthesis: none
+  text-rendering: optimizeLegibility
+  -webkit-font-smoothing: antialiased
+  -moz-osx-font-smoothing: grayscale
+
+a
+  font-weight: 500
+  color: vars.$c-main
+  text-decoration: inherit
+
+a:hover
+  color: vars.$c-main
+
+h1
+  font-size: 3.2em
+  line-height: 1.1
+
+
+.card
+  display: flex
+  flex-direction: column
+
+  border-radius: vars.$border-radius
+  padding: 12px 16px
+  background: vars.$ov-light
+
+
+blockquote
+  $c1: rgba(255, 149, 149, 0.05)
+  $c2: rgba(255, 152, 152, 0.12)
+  background: repeating-linear-gradient(45deg, $c1, $c1 10px, $c2 10px, $c2 20px)
+  padding: 10px 20px 10px 20px
+  margin: 16px 0
+  border-left: solid #ff7c7c 3px
+  border-radius: vars.$border-radius
+
+  &::before
+    content: "⚠"
+    margin-right: 1em
+  
+  &.success
+    $c1: rgba(156, 255, 149, 0.05)
+    $c2: rgba(152, 255, 174, 0.02)
+    background: repeating-linear-gradient(45deg, $c1, $c1 10px, $c2 10px, $c2 20px)
+    border-left: solid #97fa8c 3px
+
+    &::before
+      content: "✓"
+      margin-right: 1em
+
+  &.info
+    $c1: rgba(149, 183, 255, 0.05)
+    $c2: rgba(152, 186, 255, 0.02)
+    background: repeating-linear-gradient(45deg, $c1, $c1 10px, $c2 10px, $c2 20px)
+    border-left: solid #6e8bff 3px
+
+    &::before
+      content: "♢"
+      margin-right: 1em
+
+#app
+  width: 100%
+  height: 100%
+
+
+main:not(.no-margin)
+  max-width: 1280px
+
+  margin: 0 auto
+  padding-bottom: 100px
+
+
+button
+  border-radius: vars.$border-radius
+  border: 1px solid transparent
+  padding: 0.6em 1.2em
+  font-size: 1em
+  font-weight: 500
+  font-family: inherit
+  background-color: vars.$ov-lighter
+  opacity: 0.9
+  cursor: pointer
+  transition: vars.$transition
+  white-space: nowrap
+
+button:hover
+  border-color: vars.$c-main
+
+button:focus, button:focus-visible
+  color: vars.$c-main
+  outline: none
+
+button.error
+  color: unset
+  &:hover
+    border-color: vars.$c-error
+    color: vars.$c-error
+    //background: $c-error
+    //border-color: transparent
+
+button.icon
+  padding: 0.6em
+  font-size: 1.2em
+  border-radius: 50px
+  @extend .flex-center
+
+.level-0
+  //--lv-color: #6ED43E
+  --lv-color: 110, 212, 62
+
+.level-1
+  //--lv-color: #F7B807
+  --lv-color: 247, 184, 7
+
+.level-2
+  //--lv-color: #FF828D
+  --lv-color: 255, 130, 141
+
+.level-3
+  //--lv-color: #A051DC
+  --lv-color: 160, 81, 220
+
+.level-4
+  //--lv-color: #c299e7
+  --lv-color: 194, 153, 231
+
+.level-5
+  // World's End for chunithm, or Utage for maimai
+  // --lv-color: #eff2e1
+  // --lv-color: 239, 242, 225
+  --lv-text-clip: linear-gradient(110deg, #5ac42c, #5ccc22, #959f26, #cc7c23, #c93143, #8f4876, #4c3eb1, #3c3397)
+
+.warning
+  color: vars.$c-warning
+
+.error
+  color: vars.$c-error
+
+input, textarea
+  border-radius: vars.$border-radius
+  border: 1px solid transparent
+  padding: 0.6em 1.2em
+  font-size: 1em
+  font-weight: 500
+  font-family: inherit
+  background-color: vars.$ov-lighter
+  transition: vars.$transition
+  box-sizing: border-box
+  resize: none
+
+textarea
+  height: 5em
+
+// Dropdown
+select
+  border-radius: vars.$border-radius
+  border: 1px solid transparent
+  padding: 0.6em 1.2em
+  font-size: 1em
+  font-weight: 500
+  font-family: inherit
+  background-color: vars.$ov-lighter
+  transition: vars.$transition
+  box-sizing: border-box
+
+  option
+    background-color: #333
+    color: #fff
+
+  option:hover
+    background-color: #555
+
+input[type="checkbox"]
+  width: 1.2em
+  height: 1.2em
+  margin: 0
+  padding: 0
+  border: 1px solid vars.$c-main
+  background-color: vars.$ov-lighter
+  appearance: none
+  cursor: pointer
+  flex-shrink: 0
+
+  &:checked
+    background-color: vars.$c-main
+    border-color: vars.$c-main
+
+label
+  cursor: pointer
+
+input:focus, input:focus-visible
+  border: 1px solid vars.$c-main
+  outline: none
+
+input.warning
+  border: 1px solid vars.$c-warning
+
+input.error
+  border: 1px solid vars.$c-error
+
+.flex-center
+  display: flex
+  justify-content: center
+  align-items: center
+
+
+.inline-flex-center
+  display: inline-flex
+  justify-content: center
+  align-items: center
+
+.clickable
+  cursor: pointer
+  user-select: none
+
+
+// Content containers
+.content-main
+  display: flex
+  flex-direction: column
+  gap: 20px
+  margin: 100px auto 0
+  padding: 32px 32px 128px
+  min-height: 100%
+  max-width: vars.$w-max
+
+  background-color: color.adjust(vars.$c-bg, $lightness: -3%)
+  border-radius: 16px 16px 0 0
+
+  @media (max-width: #{vars.$w-max + (64px) * 2})
+    margin: 100px 32px 0
+
+  @media (max-width: vars.$w-mobile)
+    margin: 100px 0 0
+
+  .fw-block
+    margin-left: -32px
+    margin-right: -32px
+    padding: 12px 32px
+    background-color: vars.$ov-darker
+    // Inner shadow
+    box-shadow: inset 0 10px 10px -2px vars.$c-shadow, inset 0 -10px 10px -2px vars.$c-shadow
+
+  > h2.outer-title, > .outer-title-options
+    margin-top: -5rem
+    margin-bottom: 1rem
+
+    @media (max-width: vars.$w-mobile)
+      text-align: center
+
+  > .outer-title-options
+    display: flex
+    justify-content: space-between
+    align-items: center
+
+    nav
+      display: flex
+      flex-direction: row
+      gap: 10px
+      top: 4px
+
+    @media (max-width: vars.$w-mobile)
+      flex-direction: column
+
+  > h2, > .outer-title-options > h2
+    margin: 0
+
+main.content
+  @extend .content-main
+
+// Not used. still need a lot of work
+.content-popup
+  position: absolute
+  inset: 0
+
+  > div
+    @extend .content-main
+    position: absolute
+    inset: 0
+    top: 100px
+    background: rgba(color.adjust(vars.$c-bg, $lightness: -3%), 0.9)
+    backdrop-filter: blur(5px)
+    box-shadow: 0 0 10px 6px rgba(black, 0.4)
+    max-width: calc(vars.$w-max + 20px)
+
+    @media (max-width: #{vars.$w-max + (64px) * 2})
+      margin: 100px 22px 0
+
+    @media (max-width: vars.$w-mobile)
+      margin: 100px 0 0
+
+
+
+// Overlay
+.overlay
+  position: fixed
+  inset: 0
+
+  background-color: rgba(0, 0, 0, 0.5)
+
+  display: flex
+  justify-content: center
+  align-items: center
+
+  z-index: 1000
+  backdrop-filter: blur(5px)
+
+  h2, p
+    user-select: none
+    margin: 0
+
+  > div
+    background-color: vars.$c-bg
+    padding: 2rem
+    border-radius: vars.$border-radius
+
+    display: flex
+    flex-direction: column
+    gap: 1rem
+
+    max-width: 400px
+
+.aqua-tooltip
+  z-index: 900
+
+.no-margin
+  margin: 0
+
+nav
+  > div, > a
+    cursor: pointer
+    transition: vars.$transition
+    text-decoration: underline 1px solid transparent
+    text-underline-offset: 0.1em
+
+    display: flex
+    align-items: center
+    color: unset
+    font-weight: unset
+
+    &:hover
+      color: vars.$c-main
+      text-decoration-color: vars.$c-main
+      text-underline-offset: 0.5em
+
+    &.active
+      color: vars.$c-main
+
+
+.hide-scrollbar
+  &::-webkit-scrollbar
+    display: none
+  -ms-overflow-style: none
+  scrollbar-width: none
+
+
+.aqua-tooltip
+  box-shadow: 0 0 5px 0 vars.$c-shadow
+  border-radius: vars.$border-radius
+  position: absolute
+  padding: 4px 8px
+  background: vars.$ov-lighter
+  backdrop-filter: blur(5px)

AquaNet/src/components/ActionCard.svelte

@@ -0,0 +1,81 @@
+<!-- Svelte 4.2.11 -->
+
+<script lang="ts">
+  import Icon from "@iconify/svelte";
+
+  export let color: string = '179, 198, 255'
+  export let icon: string
+  export let href: string | undefined = undefined
+  export let isSmall: boolean = false
+
+  // Manually positioned icons
+  const iconPos = [
+      [1, 0.5, 2],
+      [6, 2, 1.5],
+      [-0.5, 4.5, 1.3],
+      [5, -0.5],
+      [3.5, 4.5],
+      [9.5, 0.3, 1.2],
+      [12.5, 2.5, 0.8],
+      [10, 4.4, 0.8],
+  ]
+</script>
+
+<a class="action-card" class:small={isSmall} style="--card-color: {color}" on:click {href} role="button" tabindex="0" on:keydown>
+  <slot/>
+
+  <div class="icons">
+    {#each iconPos as [x, y, size], i}
+      <Icon icon={icon} style={`top: ${y}rem; right: ${x}rem; font-size: ${size || 1}em`} />
+    {/each}
+  </div>
+</a>
+
+<style lang="sass">
+  @use '../vars'
+
+  .action-card
+    overflow: hidden
+    display: block
+    padding: 1rem
+    border-radius: vars.$border-radius
+    box-shadow: 0 5px 5px 1px vars.$c-shadow
+    transition: all 0.2s ease
+    cursor: pointer
+    position: relative
+    background: linear-gradient(45deg, transparent 20%, rgba(var(--card-color), 0.5) 100%)
+    outline: 1px solid transparent
+    filter: drop-shadow(0 0 12px rgba(var(--card-color), 0))
+    color: rgba(255, 255, 255, 0.78)
+
+    &:hover
+      box-shadow: 0 0 0.5rem 0.2rem vars.$c-shadow
+      transform: translateY(-3px)
+
+      // Drop shadow glow
+      filter: drop-shadow(0 0 12px rgba(var(--card-color), 0.5))
+      outline-color: rgba(var(--card-color), 0.5)
+
+    :global(span), &.small
+      font-size: 1.2rem
+      display: block
+      margin-bottom: 0.5rem
+      color: color-mix(in oklab, rgb(var(--card-color)) 25%, rgba(255, 255, 255, 0.75))
+
+    .icons
+      position: absolute
+      inset: 0
+      color: rgba(var(--card-color), 0.5)
+      font-size: 2rem
+      transition: all 0.2s ease
+      z-index: -1
+      mask-image: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.5) 70%, white 100%)
+      opacity: 0.8
+
+      @media (max-width: vars.$w-mobile)
+        opacity: 0.6
+
+      :global(> svg)
+        position: absolute
+        rotate: 20deg
+</style>

AquaNet/src/components/CommunityCard.svelte

@@ -0,0 +1,65 @@
+<!-- Svelte 4.2.11 -->
+
+<script lang="ts">
+  import Icon from "@iconify/svelte";
+
+  export let color: string = '179, 198, 255'
+  export let icon: string
+  export let href: string
+</script>
+
+<a class="action-card" style="--card-color: {color}" {href} role="button" tabindex="0" on:keydown>
+  <slot/>
+
+  <div class="icon">
+    <Icon icon={icon} />
+  </div>
+</a>
+
+<style lang="sass">
+  @use '../vars'
+
+  .action-card
+    overflow: hidden
+    display: block
+    padding: 1rem
+    border-radius: vars.$border-radius
+    box-shadow: 0 5px 5px 1px vars.$c-shadow
+    transition: all 0.2s ease
+    cursor: pointer
+    position: relative
+    background: linear-gradient(45deg, transparent 20%, rgba(var(--card-color), 0.5) 100%)
+    outline: 1px solid transparent
+    filter: drop-shadow(0 0 12px rgba(var(--card-color), 0))
+    color: rgba(255, 255, 255, 0.78)
+
+    &:hover
+      box-shadow: 0 0 0.5rem 0.2rem vars.$c-shadow
+      transform: translateY(-3px)
+
+      // Drop shadow glow
+      filter: drop-shadow(0 0 12px rgba(var(--card-color), 0.5))
+      outline-color: rgba(var(--card-color), 0.5)
+
+    :global(span)
+      font-size: 1.2rem
+      display: block
+      margin-bottom: 0.5rem
+      color: color-mix(in oklab, rgb(var(--card-color)) 25%, rgba(255, 255, 255, 0.75))
+
+    .icon
+      position: absolute
+      display: flex
+      color: rgba(var(--card-color), 0.5)
+      font-size: 4rem
+      right: 0
+      bottom: 0
+      padding: .5rem
+      transition: all 0.2s ease
+      z-index: -1
+      mask-image: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.5) 70%, white 100%)
+      opacity: 0.8
+
+      @media (max-width: vars.$w-mobile)
+        opacity: 0.6
+</style>

AquaNet/src/components/DashboardTabs.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+    import { t } from "../libs/i18n";
+
+    const tabs: Record<string, string> = {
+        [t('home.nav.portal')]: `/home`,
+        [t('home.nav.link-card')]: `/cards`,
+        [t('home.nav.game-setup')]: `/setup`,
+        [t('home.nav.support')]: `/support`
+    }
+</script>
+
+<nav class="tabs">
+    {#each Object.entries(tabs) as t, i}
+        <a class="clickable"
+            href={t[1]}
+            class:active={
+                new URL(location.href).pathname === t[1]
+            }>
+            {t[0]}
+        </a>
+    {/each}
+</nav>
+
+<style lang="sass">
+  @use "../vars"
+  .tabs
+    display: flex
+    gap: 1rem
+
+    a
+      &.active
+        color: vars.$c-main
+</style>

AquaNet/src/components/Pagination.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte'
+
+  export let page: number
+  export let totalPages: number
+
+  const dispatch = createEventDispatcher()
+
+  let editing = false
+  let inputPage: number
+
+  function focus(node: HTMLInputElement) {
+    node.focus()
+  }
+
+  function updatePage(newPage: number) {
+    const p = Math.floor(Number(newPage))
+    if (!isNaN(p) && p > 0 && p <= totalPages) dispatch('updatePage', p)
+  }
+
+  function startEditing() {
+    inputPage = page
+    editing = true
+  }
+
+  function finishEditing() {
+    editing = false
+    if (inputPage !== page) updatePage(inputPage)
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (event.key === 'Enter') finishEditing()
+    else if (event.key === 'Escape') editing = false
+  }
+</script>
+
+<div class="pagination">
+  <button on:click={() => updatePage(page - 1)} disabled={page <= 1}>Previous</button>
+
+  {#if editing}
+    <input type="number" bind:value={inputPage} on:blur={finishEditing} on:keydown={handleKeydown} min="1" max={totalPages} use:focus/>
+  {:else}
+    <span on:click={startEditing} role="button" tabindex="0" on:keydown={(e) => e.key === 'Enter' && startEditing()}>
+      Page {page} of {totalPages}
+    </span>
+  {/if}
+
+  <button on:click={() => updatePage(page + 1)} disabled={page >= totalPages}>Next</button>
+</div>
+
+<style lang="sass">
+  .pagination
+    display: flex
+    justify-content: center
+    align-items: center
+    margin: 1rem 0
+    gap: 1rem
+
+  input
+    width: 100px
+    text-align: center
+
+  span[role="button"]
+    cursor: pointer
+</style>

AquaNet/src/components/RankDetails.svelte

@@ -0,0 +1,64 @@
+<!-- Svelte 4.2.11 -->
+
+<script lang="ts">
+  import { slide } from "svelte/transition";
+  import { t } from "../libs/i18n";
+  import type { GenericGameSummary } from "../libs/generalTypes";
+
+  export let g: GenericGameSummary
+
+  const detail = Object.entries(g.detailedRanks).toSorted((a, b) => +b[0] - +a[0])
+</script>
+
+<div class="rank-detail-container fw-block" transition:slide>
+  <div>
+    <h2>{t("UserHome.RankDetail.Title")}</h2>
+    <table><tbody>
+      <!-- rankDetails: { Level : { Rank : Count } } -->
+      <!-- Rows are levels, columns are ranks -->
+
+      <!-- Headers -->
+      <tr>
+        <th>{t("UserHome.RankDetail.Level")}</th>
+        {#each Object.values(g.ranks) as rankMap}<th>{rankMap.name}</th>{/each}
+      </tr>
+
+      <!-- Data -->
+      {#each detail as [level, rankMap]}
+        <tr>
+          <td>{level}</td>
+          {#each Object.values(rankMap) as count}<td>{count}</td>{/each}
+        </tr>
+      {/each}
+    </tbody></table>
+  </div>
+</div>
+
+<style lang="sass">
+  @use "../vars"
+
+  .rank-detail-container
+    > div
+      margin: 1em auto
+      max-width: 500px
+
+    table
+      width: 100%
+      border-collapse: collapse
+      table-layout: fixed
+
+      th:not(:first-child)
+        background: vars.$grad-special
+        -webkit-background-clip: text
+        -webkit-text-fill-color: transparent
+        background-clip: text
+        color: vars.$c-main
+        padding: 0.5em
+
+      th, td
+        padding: 0.5em
+        text-align: center
+
+        &:first-child
+          color: vars.$c-main
+</style>

AquaNet/src/components/RatingCompSong.svelte

@@ -0,0 +1,143 @@
+<!-- Svelte 4.2.11 -->
+
+<script lang="ts">
+  import { slide } from "svelte/transition";
+  import { t } from "../libs/i18n";
+  import { type GameName, type ParsedComposition, roundFloor } from "../libs/scoring";
+  import { coverNotFound } from "../libs/ui";
+  import { tooltip } from "../libs/ui";
+  import useLocalStorage from "../libs/hooks/useLocalStorage.svelte";
+
+  export let game: GameName
+  export let p: ParsedComposition
+  const rounding = useLocalStorage("rounding", true)
+</script>
+
+<div class="map-detail-container" transition:slide>
+  <div class="scores">
+    <div>
+      <img src={p.img} alt="" on:error={coverNotFound} />
+      <div class="info">
+        <div class="first-line">
+          <div class="song-title">{p.name ?? t("UserHome.UnknownSong")}</div>
+          <span class={`lv level-${p.diffId === 10 ? 3 : p.diffId}`}>
+            { p.difficulty ?? '-' }
+          </span>
+        </div>
+        <div class="second-line">
+          <span class={`rank-${p.rank[0]}`}>
+            <span class="rank-text">{p.rank.replace("p", "+")}</span>
+            <span class="rank-num" use:tooltip={(p.score / 10000).toFixed(4)}>
+              {rounding.value ? roundFloor(p.score, game, 1) : (p.score / 10000).toFixed(4)}%
+            </span>
+          </span>
+          {#if p.ratingChange !== undefined}
+            <span class="dx-change">{ p.ratingChange }</span>
+          {/if}
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<style lang="sass">
+
+  @use "../vars"
+  vars.$gap: 20px
+
+  .map-detail-container
+    background-color: rgb(35,35,35)
+    border-radius: vars.$border-radius
+    overflow: hidden
+
+    .scores
+      display: flex
+      flex-direction: column
+      flex-wrap: wrap
+      gap: vars.$gap
+
+      // Image and song info
+      > div
+        display: flex
+        align-items: center
+        gap: 12px
+        max-width: 100%
+        box-sizing: border-box
+
+        img
+          width: 50px
+          height: 50px
+          border-radius: vars.$border-radius
+          object-fit: cover
+
+        // Song info and score
+        > div.info
+          flex: 1
+          display: flex
+          justify-content: space-between
+          overflow: hidden
+          flex-direction: column
+
+          .first-line
+            display: flex
+            flex-direction: row
+
+          // Limit song name to one line
+          .song-title
+            flex: 1
+            min-width: 0
+            overflow: hidden
+            text-overflow: ellipsis
+            white-space: nowrap
+
+          // Make song score and rank not wrap
+          > div:last-child
+            white-space: nowrap
+
+          @media (max-width: vars.$w-mobile)
+            flex-direction: column
+            gap: 0
+
+            .rank-text
+              text-align: left
+
+        .rank-S
+          // Gold green gradient on text
+          background: vars.$grad-special
+          -webkit-background-clip: text
+          color: transparent
+
+        .rank-A
+          color: #ff8a8a
+
+        .rank-B
+          color: #6ba6ff
+
+        .lv
+          width: 30px
+          text-align: center
+          background: rgba(var(--lv-color), 0.6)
+          padding: 0 6px
+          border-radius: 0 vars.$border-radius 0 vars.$border-radius
+
+          // Inset shadow, like it's a paper below this card with a cut
+          box-shadow: inset 0 0 10px rgba(0,0,0,0.5)
+
+        span
+          display: inline-block
+          text-align: left
+
+        .second-line
+          display: flex
+          justify-content: space-between
+          align-items: center
+
+        // Vertical table-like alignment
+        span.rank-text
+          min-width: 40px
+        span.rank-num
+          min-width: 60px
+        span.dx-change
+          margin-right: 0.5rem
+          color: vars.$c-good
+</style>

AquaNet/src/components/RatingComposition.svelte

@@ -0,0 +1,87 @@
+<!-- Svelte 4.2.11 -->
+
+<script lang="ts">
+  import RatingCompSong from "./RatingCompSong.svelte";
+  import { parseComposition, type GameName } from "../libs/scoring";
+  import { type MusicMeta } from "../libs/generalTypes";
+
+  export let title: string;
+  export let comp: string | undefined;
+  export let allMusics: Record<string, MusicMeta>;
+  export let game: GameName;
+  export let top: number | undefined = undefined;
+
+  let split = comp?.split(",")?.filter(it => it.split(":")[0] !== '0')
+    ?.map(it => parseComposition(it, allMusics, game))
+
+  if (top) split = split?.toSorted((a, b) => b.score - a.score).slice(0, top)
+  if (split) console.log("Split", split)
+
+  let mustResize = split && split.length > 12
+</script>
+
+{#if split && split.length > 0 && comp}
+  <div class="rating-composition-container" class:must-resize={mustResize}>
+    {#if mustResize}
+      <input type="checkbox">
+    {/if}
+
+    <h2>{title}</h2>
+    <div class="rating-composition">
+      {#each split as p}
+        <div>
+          <RatingCompSong {p} {game}/>
+        </div>
+      {/each}
+    </div>
+  </div>
+{/if}
+
+<style lang="sass">
+  @use "../vars"
+
+  .rating-composition
+    display: grid
+    // 3 columns
+    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr))
+    gap: vars.$gap
+
+    overflow: hidden
+    transition: max-height 250ms
+
+  .rating-composition-container
+    position: relative
+
+    input
+      width: 100%
+      height: 100%
+      position: absolute
+      z-index: 10
+
+      border: none
+      border-radius: 0
+      opacity: 0
+
+      transition: opacity 250ms
+
+  .rating-composition-container.must-resize
+    input
+      & ~ .rating-composition
+        max-height: 250px
+
+      & ~ h2::after
+        content: "▾"
+        margin-left: 0.5em
+      &:checked ~ h2::after
+        content: "▴"
+
+      &:checked
+        opacity: 0
+      &:checked ~ .rating-composition
+        max-height: 3000px
+
+      opacity: 1
+      background: linear-gradient(#0000 250px, rgb(28.35, 28.35, 28.35) 100%) /* for some reason the color.adjust doesn't work here so whatever */
+        
+    
+</style>

AquaNet/src/components/StatusOverlays.svelte

@@ -0,0 +1,52 @@
+<!-- Svelte 4.2.11 -->
+
+<script lang="ts">
+  import { fade } from 'svelte/transition'
+  import type { ConfirmProps } from "../libs/generalTypes";
+  import { t } from "../libs/i18n"
+  import Loading from './ui/Loading.svelte';
+  import Error from './ui/Error.svelte';
+
+  // Props
+  export let confirm: ConfirmProps | null = null
+  export let error: string | null = null
+  export let loading: boolean = false
+
+  function doConfirm(fn?: () => void) {
+    confirm = null
+    fn && fn()
+  }
+</script>
+
+{#if confirm}
+  <div class="overlay" transition:fade>
+    <div>
+      <h2>{confirm.title}</h2>
+      <span>{confirm.message}</span>
+
+      <div class="actions">
+        {#if confirm.cancel}
+          <button on:click={() => doConfirm(confirm?.cancel)}>{t('action.cancel')}</button>
+        {/if}
+        <button on:click={() => doConfirm(confirm?.confirm)} class:error={confirm.dangerous}>{t('action.confirm')}</button>
+      </div>
+    </div>
+  </div>
+{/if}
+
+{#if error}
+  <Error {error}/>
+{/if}
+
+{#if loading && !error}
+  <Loading/>
+{/if}
+
+<style lang="sass">
+  .actions
+    display: flex
+    gap: 16px
+
+    button
+      width: 100%
+</style>

AquaNet/src/components/Tooltip.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte'
+
+  export let triggeredBy: string
+  export let loading: boolean = false
+  let isHovered = false
+  let x: number, y: number
+  let targets: Element[] = []
+
+  onMount(() => {
+    targets = [...document.querySelectorAll(triggeredBy)]
+    targets.forEach((el) => {
+      el.addEventListener('mouseover', mouseOver)
+      el.addEventListener('mousemove', mouseMove)
+      el.addEventListener('mouseleave', mouseLeave)
+    })
+    if (targets.length === 0) {
+      console.warn(`No elements found with selector "${triggeredBy}"`)
+    }
+  })
+
+  onDestroy(() => {
+    targets.forEach((el) => {
+      el.removeEventListener('mouseover', mouseOver)
+      el.removeEventListener('mousemove', mouseMove)
+      el.removeEventListener('mouseleave', mouseLeave)
+    })
+  })
+
+  function mouseOver(event: Event) {
+    console.log('over')
+    isHovered = true
+    updatePosition(event as MouseEvent)
+  }
+
+  function mouseMove(event: Event) {
+    console.log('move')
+    updatePosition(event as MouseEvent)
+  }
+
+  function updatePosition(event: MouseEvent) {
+    x = event.pageX + 5
+    y = event.pageY + 20
+  }
+
+  function mouseLeave() {
+    console.log('leave')
+    isHovered = false
+  }
+</script>
+
+{#if isHovered}
+  <div style="top: {y}px; left: {x}px" class="tooltip" class:loading>
+    <slot />
+  </div>
+{/if}
+
+<style lang="sass">
+  @use "../vars"
+
+  .tooltip
+    position: absolute
+    z-index: 900
+    background: white
+    padding: 10px 16px
+    border-radius: vars.$border-radius
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1)
+    pointer-events: none
+    white-space: nowrap
+    color: #242424
+    transform: translate(-50%, 0)
+    transition: opacity 0.2s
+
+    &.loading
+      opacity: 0
+</style>

AquaNet/src/components/UserCard.svelte

@@ -0,0 +1,56 @@
+<!-- Svelte 4.2.11 -->
+
+<script lang="ts">
+  import type { GenericGameSummary } from "../libs/generalTypes";
+  import { GAME } from "../libs/sdk";
+  import type { GameName } from "../libs/scoring";
+  import { pfp, pfpNotFound } from "../libs/ui";
+
+  export let username: string
+  export let game: GameName
+  export let setLoading: (loading: boolean) => void = () => {}
+
+  let data: GenericGameSummary
+  let error = ""
+
+  setLoading(true)
+  GAME.userSummary(username, game).then(d => data = d).catch(e => error = e).finally(() => setLoading(false))
+</script>
+
+{#if !data}
+  <div>Loading...</div>
+{:else if error}
+  <div>Error: {error}</div>
+{:else}
+  <div class="user-card">
+    <img use:pfp={data.aquaUser} alt="Profile" />
+    <div class="details">
+      <span class="in-game-name">{data.name}</span>
+      <span class="username">@{username}</span>
+    </div>
+  </div>
+{/if}
+
+<style lang="sass">
+@use "../vars"
+
+.user-card
+  display: flex
+  align-items: center
+  gap: vars.$gap
+
+  .details
+    display: flex
+    flex-direction: column
+    justify-content: center
+
+    .username
+      font-size: 0.8em
+
+  img
+    width: 50px
+    height: 50px
+    border-radius: 50%
+    object-fit: cover
+    object-position: center
+</style>

AquaNet/src/components/chart/Line.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { Chart, Tooltip, type ChartData, type ChartOptions } from 'chart.js';
+  import type { HTMLCanvasAttributes } from 'svelte/elements';
+  import 'chart.js/auto';
+
+  interface Props extends HTMLCanvasAttributes {
+    data: ChartData<'line', any, string>
+    options: ChartOptions<'line'>
+  }
+  const { data, options, ...rest }: Props = $props()
+
+  Chart.register(Tooltip)
+
+  let canvasElem: HTMLCanvasElement
+  let chart: Chart
+
+  $effect(() => {
+    chart = new Chart(canvasElem, { type: 'line', data, options })
+    return () => chart.destroy()
+  })
+
+  $effect(() => {
+    if (!chart) return
+    chart.data = data
+    chart.update()
+  })
+</script>
+
+<canvas bind:this={canvasElem} {...rest}></canvas>

AquaNet/src/components/font/twemoji-flags.css

@@ -0,0 +1,11 @@
+@font-face {
+  font-family: 'TwemojiCountryFlags';
+  src: url('./TwemojiCountryFlags.woff2') format('woff2');
+  font-weight: normal;
+  font-style: normal;
+}
+
+.country {
+  font-family: TwemojiCountryFlags,"Twemoji Mozilla","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji","EmojiOne Color","Android Emoji",sans-serif;
+  font-size: 2em;
+}

AquaNet/src/components/settings/ChuniMatchingSettings.svelte

@@ -0,0 +1,257 @@
+<script lang="ts">
+  import { fade, slide } from "svelte/transition";
+  import { CHU3_MATCHINGS } from "../../libs/config.js";
+  import type { ChusanMatchingOption, GameOption } from "../../libs/generalTypes.js";
+  import { t, ts } from "../../libs/i18n.js";
+  import { DATA, GAME, SETTING, USER } from "../../libs/sdk.js";
+  import StatusOverlays from "../StatusOverlays.svelte";
+  import GameSettingFields from "./GameSettingFields.svelte";
+  import { EN_REF } from "../../libs/i18n/en_ref.js";
+
+  let custom = false
+  let overlay = false
+  let loading = false
+  let error = ""
+
+  let changed: string[] = [];
+  let symbols: Record<number, number> = {};
+  let allItems: Record<string, Record<string, { name: string }>> = {}
+  let submitting: string | undefined | null;
+  let settings: Record<string, GameOption> = {};
+
+  let existingUrl = "";
+  SETTING.get().then(s => {
+    existingUrl = s.filter(it => it.key === 'chusanMatchingServer')[0]?.value
+
+    if (existingUrl && !CHU3_MATCHINGS.some(it => it.matching === existingUrl)) {
+      custom = true
+    }
+
+    const symbolKey = "chusanSymbolChat"
+    s.forEach(opt => {
+      if (opt.key.substring(0, symbolKey.length) == symbolKey && opt.value)
+        symbols[parseInt(opt.key.substring(symbolKey.length))] = opt.value;
+    })
+    settings = Object.fromEntries(s.map(v => [v.key, v]))
+  })
+
+  async function fetchSymbolData() {
+    allItems = await DATA.allItems('chu3').catch(_ => {
+      loading = false
+      error = t("userbox.error.nodata")
+    }) as typeof allItems
+  }
+
+  async function submitSymbol(id: number) {
+    if (submitting) return false
+    const field = `chusanSymbolChat${id + 1}`;
+    submitting = field
+
+    await SETTING.set(field, symbols[id + 1]).catch(e => error = e.message).finally(() => submitting = null);
+    changed = changed.filter(v => v != `chusanSymbolChat${id}`)
+    return true
+  }
+
+  async function updateLvDifficulty() {
+    if (submitting) return false
+    submitting = `chusanLvDifficulty`
+    await SETTING.set("chusanLvDifficulty", settings["chusanLvDifficulty"].value).catch(e => error = e.message).finally(() => submitting = null);
+    changed = changed.filter(v => v != `chusanLvDifficulty`)
+    return true
+  }
+
+  // Click on "Custom" option"
+  function clickCustom() {
+    custom = true
+    overlay = false
+  }
+
+  // Click on a matching option, set the reflector and matching server
+  function clickOption(opt: ChusanMatchingOption) {
+    Promise.all([
+      SETTING.set('chusanMatchingReflector', opt.reflector),
+      SETTING.set('chusanMatchingServer', opt.matching),
+    ]).then(() => {
+      overlay = false
+      custom = false
+      existingUrl = opt.matching
+    }).catch(e => error = e.message)
+  }
+
+  let linkedVerseAvailable = false;
+  USER.me().then(async me => {
+    let summary = await GAME.userSummary(me.username, "chu3")
+    let version = summary.lastVersion.split(".");
+    if (version[0] == "2" && parseInt(version[1]) >= 40)
+      linkedVerseAvailable = true;
+  })
+</script>
+
+<StatusOverlays {error} {loading}/>
+
+<div class="matching">
+  <h2>{t("userbox.header.matching")}{linkedVerseAvailable ? ` & ${t("userbox.header.linkedVerse")}` : ""}</h2>
+  <blockquote class="info">
+    {t("settings.cabNotice")}
+    {#if linkedVerseAvailable}
+      {t("userbox.lv.diffnotice")}
+    {/if}
+  </blockquote>
+
+  {#if linkedVerseAvailable}
+    <GameSettingFields game="chu3-linked-verse" />
+    {#if settings["chusanLvDifficulty"]}
+      <a target="_blank" href="https://silentblue.remywiki.com/CHUNITHM:Linked_VERSE">{t(`userbox.lv.help`)}</a>
+      <div class="field">
+        <label for={`chusanLvDifficulty`}>{ts(`userbox.lv.difficulty`)}</label>
+        <div>
+          <select bind:value={settings["chusanLvDifficulty"].value} id={`chusanLvDifficulty`} on:change={() => {changed = [...changed, `chusanLvDifficulty`];}}>
+            {#each {length: 6}, i}
+              <option value={i}>{t(`userbox.lv.difficulty.${i}` as keyof typeof EN_REF)}</option>
+            {/each}
+          </select>
+          {#if changed.includes(`chusanLvDifficulty`)}
+            <button transition:slide={{axis: "x"}} disabled={!!submitting} on:click={updateLvDifficulty}>
+              {t("settings.profile.save")}
+            </button>
+          {/if}
+        </div>
+      </div>
+    {/if}
+  {/if}
+
+  <div class="matching-selector">
+    <button on:click={_ => overlay = true}>{t('userbox.matching.select')}</button>
+  </div>
+
+  {#if custom}
+    <GameSettingFields game="chu3-matching"/>
+  {/if}
+
+  <h2>{t("userbox.header.matching.symbolChat")}</h2>
+  {#await fetchSymbolData() then}
+    {#each {length: 4}, i}
+      <div class="field">
+        <label for={`chusanSymbolChat${i}`}>{ts(`userbox.matching.symbolChat`) + ` #${i + 1}`}</label>
+        <div>
+          <select bind:value={symbols[i + 1]} id={`chusanSymbolChat${i}`} on:change={() => {changed = [...changed, `chusanSymbolChat${i}`];}}>
+            <option value={null}>{ts(`userbox.matching.symbolChat.default`)}</option>
+            {#each Object.entries(allItems.symbolChat).filter((f) => parseInt(f[0]) !== 0) as [id, option]}
+              <option value={parseInt(id)}>{option?.name || `(unknown ${id})`}</option>
+            {/each}
+          </select>
+          {#if changed.includes(`chusanSymbolChat${i}`)}
+            <button transition:slide={{axis: "x"}} disabled={!!submitting} on:click={() => submitSymbol(i)}>
+              {t("settings.profile.save")}
+            </button>
+          {/if}
+        </div>
+      </div>
+    {/each}
+  {/await}
+</div>
+
+{#if overlay}
+<div class="overlay" transition:fade>
+  <div>
+    <div>
+      <h2>{t('userbox.header.matching')}</h2>
+      <p>{t('userbox.matching.select.sub')}</p>
+    </div>
+    <div class="options">
+      <!-- Selectable options -->
+      {#each CHU3_MATCHINGS as option}
+      <div class="clickable option" on:click={() => clickOption(option)}
+        role="button" tabindex="0" on:keypress={e => e.key === 'Enter' && clickOption(option)}
+        class:selected={!custom && existingUrl === option.matching}>
+
+        <span class="name">{option.name}</span>
+        <div class="links">
+          <a href={option.ui} target="_blank" rel="noopener">{t('userbox.matching.option.ui')}</a> /
+          <a href={option.guide} target="_blank" rel="noopener">{t('userbox.matching.option.guide')}</a>
+        </div>
+
+        <div class="divider"></div>
+
+        <div class="coop">
+          <span>{t('userbox.matching.option.collab')}</span>
+          <div>
+            {#each option.coop as coop}
+              <span>{coop}</span>
+            {/each}
+          </div>
+        </div>
+      </div>
+      {/each}
+
+      <!-- Placeholder option for "Custom" -->
+      <div class="clickable option" on:click={clickCustom}
+        role="button" tabindex="0" on:keypress={e => e.key === 'Enter' && clickCustom()}
+        class:selected={custom}>
+
+        <span class="name">{t('userbox.matching.custom.name')}</span>
+        <p class="notice custom">{t('userbox.matching.custom.sub')}</p>
+      </div>
+    </div>
+  </div>
+</div>
+{/if}
+
+<style lang="sass">
+@use "../../vars"
+
+.matching
+  display: flex
+  flex-direction: column
+  gap: 12px
+
+  h2
+    margin-bottom: 0
+
+p.notice
+  opacity: 0.6
+  margin: 0
+
+  &.custom
+    font-size: 0.9rem
+
+.options
+  display: flex
+  flex-wrap: wrap
+  gap: 1rem
+
+.option
+  flex: 1
+  display: flex
+  flex-direction: column
+  align-items: center
+
+  border-radius: vars.$border-radius
+  background: vars.$ov-light
+  padding: 1rem
+  min-width: 150px
+
+  &.selected
+    border: 1px solid vars.$c-main
+
+  .divider
+    width: 100%
+    height: 0.5px
+    background: white
+    opacity: 0.2
+    margin: 0.8rem 0
+
+  .name
+    font-size: 1.1rem
+    font-weight: bold
+
+  .coop
+    text-align: center
+
+    div
+      display: flex
+      flex-direction: column
+      font-size: 0.9rem
+      opacity: 0.6
+
+</style>

AquaNet/src/components/settings/ChuniSettings.svelte

@@ -0,0 +1,684 @@
+<!-- Svelte 4.2.11 -->
+
+<script lang="ts">
+  import {
+    type AquaNetUser,
+    type GameUserOption,
+    type UserBox,
+    type UserItem,
+  } from "../../libs/generalTypes";
+  import { DATA, USER, USERBOX, GAME, SETTING } from "../../libs/sdk";
+  import { t, ts } from "../../libs/i18n";
+  import { FADE_IN, FADE_OUT, USERBOX_DEFAULT_URL } from "../../libs/config";
+  import { fade, slide } from "svelte/transition";
+  import StatusOverlays from "../StatusOverlays.svelte";
+  import Icon from "@iconify/svelte";
+  import GameSettingFields from "./GameSettingFields.svelte";
+
+  import { userboxFileProcess, ddsDB, initializeDb } from "../../libs/userbox/userbox"
+
+  import ChuniPenguinComponent from "./userbox/ChuniPenguin.svelte"
+  import ChuniUserplateComponent from "./userbox/ChuniUserplate.svelte";
+
+  import useLocalStorage from "../../libs/hooks/useLocalStorage.svelte";
+  import { DDS } from "../../libs/userbox/dds";
+  import ChuniMatchingSettings from "./ChuniMatchingSettings.svelte";
+  import InputField from "../ui/InputField.svelte";
+  import UserOptionSlider from "./UserOptionSlider.svelte";
+
+  let user: AquaNetUser
+  let [loading, error, submitting, preview] = [true, "", "", ""]
+  let changed: string[] = [];
+
+  let userOptions: GameUserOption = {};
+  let userIsUsingPreset = false;
+
+  // Available (unlocked) options for each kind of item
+  // In allItems: 'namePlate', 'frame', 'trophy', 'mapIcon', 'systemVoice', 'avatarAccessory'
+  let allItems: Record<string, Record<string, { name: string }>> = {}
+  let iKinds = { namePlate: 1, frame: 2, trophy: 3, trophySub1: 4, trophySub2: 5, mapIcon: 8, systemVoice: 9, avatarAccessory: 11, stage: 13 }
+  // In userbox: 'nameplateId', 'frameId', 'trophyId', 'mapIconId', 'voiceId', 'avatar{Wear/Head/Face/Skin/Item/Front/Back}'
+  let userbox: UserBox
+  let avatarKinds = ['Wear', 'Head', 'Face', 'Skin', 'Item', 'Front', 'Back'] as const
+  // iKey should match allItems keys, and ubKey should match userbox keys
+  let userItems: { iKey: string, ubKey: keyof UserBox, items: UserItem[] }[] = []
+  let userNameField: any
+
+  // Submit changes
+  function submit(field: keyof UserBox) {
+    let obj = { field, value: userbox[field] }
+    if (submitting) return
+    submitting = obj.field
+
+    USERBOX.setUserBox(obj)
+      .then(() => changed = changed.filter((c) => c !== obj.field))
+      .catch(e => error = e.message)
+      .finally(() => submitting = "")
+  }
+
+  // Fetch data from the server
+  async function fetchData() {
+    const profile = await USERBOX.getProfile().catch(_ => {
+      loading = false
+      error = t("userbox.error.nodata")
+    })
+    if (!profile) return
+    userbox = profile.user
+    userNameField = {key: "gameUsername", value: userbox.userName, type: "String"}
+    userItems = Object.entries(iKinds).flatMap(([iKey, iKind]) => {
+      if (iKey != 'avatarAccessory') {
+        let ubKey = `${iKey}Id`
+        if (iKey.slice('trophy'.length, 'trophy'.length + 3) == "Sub") {
+          ubKey = `trophyIdSub${iKey.slice('trophySub'.length, 'trophySub'.length + 1)}`;
+          iKey = `trophy`;
+        }
+        if (ubKey == 'namePlateId') ubKey = 'nameplateId'
+        if (ubKey == 'systemVoiceId') ubKey = 'voiceId'
+        return [{ iKey, ubKey: ubKey as keyof UserBox,
+          items: profile.items.filter(x => x.itemKind === iKind || (iKey == "trophy" && x.itemKind == 3))
+        }]
+      }
+
+      return avatarKinds.map((aKind, i) => {
+        let items = profile.items.filter(x => x.itemKind === iKind && Math.floor(x.itemId / 100000) % 10 === i + 1)
+        return { iKey, ubKey: `avatar${aKind}` as keyof UserBox, items }
+      })
+    })
+
+    allItems = await DATA.allItems('chu3').catch(_ => {
+      loading = false
+      error = t("userbox.error.nodata")
+    }) as typeof allItems
+
+    console.log("User Items", userItems)
+    console.log("All items", allItems)
+    console.log("Userbox", userbox)
+
+    userOptions = await SETTING.optionGet('chu3').catch(_ => {
+      loading = false
+      error = t("userbox.error.nodata")
+    }) as GameUserOption
+    if (userOptions["optionSet"] != 3)
+      userIsUsingPreset = true;
+    
+    loading = false
+  }
+
+  USER.me().then(u => {
+    if (!u) throw new Error(t("userbox.error.nodata"))
+    user = u
+    return fetchData()
+  }).catch((e) => { loading = false; error = e.message });
+
+  function exportData() {
+    submitting = "export"
+    GAME.export('chu3')
+      .then(data => download(JSON.stringify(data), `AquaDX_chu3_export_${userbox.userName}.json`))
+      .catch(e => error = e.message)
+      .finally(() => submitting = "")
+  }
+
+  async function exportBatchManual() {
+    submitting = "batchExport"
+
+    const DIFFICULTY_MAP: Record<number, string> = {
+      0: "BASIC",
+      1: "ADVANCED",
+      2: "EXPERT",
+      3: "MASTER",
+      4: "ULTIMA"
+    } as const // WORLD'S END scores not supported by Tachi
+    const DAN_MAP: Record<number, string> = {
+      1: "DAN_I",
+      2: "DAN_II",
+      3: "DAN_III",
+      4: "DAN_IV",
+      5: "DAN_V",
+      6: "DAN_INFINITE"
+    } as const
+    const SKILL_IDS: Record<number, string> = {
+      100009: 'CATASTROPHY',
+      102009: 'CATASTROPHY',
+      103007: 'CATASTROPHY',
+
+      100008: 'ABSOLUTE',
+      101008: 'ABSOLUTE',
+      102008: 'ABSOLUTE',
+      103006: 'ABSOLUTE',
+
+      100007: 'BRAVE',
+      101007: 'BRAVE',
+      102007: 'BRAVE',
+      103005: 'BRAVE',
+
+      100005: 'HARD',
+      100006: 'HARD',
+      101004: 'HARD',
+      101005: 'HARD',
+      101006: 'HARD',
+      102004: 'HARD',
+      102005: 'HARD',
+      102006: 'HARD',
+      103002: 'HARD',
+      103003: 'HARD',
+      103004: 'HARD'
+    } as const
+    // Shamelessly stolen from https://github.com/beer-psi/saekawa/commit/b3bee13e126df2f4e2a449bdf971debb8c95ba40, needs to be updated every major version :(
+
+    let data: any
+    let output: any = {
+      "meta": {
+        "game": "chunithm",
+        "playtype": "Single",
+        "service": "AquaDX-Manual"
+      },
+      "scores": [],
+      "classes": {}
+    }
+
+    try {
+      data = await GAME.export('chu3')
+    }
+    catch (e: any) {
+      error = e.message
+      submitting = ""
+      return
+    }
+
+    if (data && "userPlaylogList" in data) {
+      for (let score of data.userPlaylogList) {
+        let clearLamp = null
+        let noteLamp = null
+
+        if (score.level in DIFFICULTY_MAP) {
+          if (score.isClear) {
+            clearLamp = score.skillId in SKILL_IDS ? SKILL_IDS[score.skillId] : "CLEAR"
+          }
+          else {
+            clearLamp = "FAILED"
+          }
+
+          if (score.score === 1010000) {
+            noteLamp = "ALL JUSTICE CRITICAL"
+          }
+          else if (score.isAllJustice) {
+            noteLamp = "ALL JUSTICE"
+          }
+          else if (score.isFullCombo) {
+            noteLamp = "FULL COMBO"
+          }
+          else {
+            noteLamp = "NONE"
+          }
+
+          output.scores.push({
+            "score": score.score,
+            "clearLamp": clearLamp,
+            "noteLamp": noteLamp,
+            "judgements": {
+              "jcrit": score.judgeHeaven + score.judgeCritical,
+              "justice": score.judgeJustice,
+              "attack": score.judgeAttack,
+              "miss": score.judgeGuilty
+            },
+            "matchType": "inGameID",
+            "identifier": score.musicId.toString(),
+            "difficulty": DIFFICULTY_MAP[score.level],
+            "timeAchieved": score.sortNumber * 1000,
+            "optional": {
+              "maxCombo": score.maxCombo
+            }
+          })
+        }
+      }
+    }
+
+    if (data.userData.classEmblemMedal in DAN_MAP) {
+      output.classes["dan"] = DAN_MAP[data.userData.classEmblemMedal]
+    }
+
+    if (data.userData.classEmblemBase in DAN_MAP) {
+      output.classes["emblem"] = DAN_MAP[data.userData.classEmblemBase]
+    }
+
+    download(JSON.stringify(output), `AquaDX_chu3_BatchManualExport_${userbox.userName}.json`)
+    submitting = ""
+  }
+
+  function download(data: string, filename: string) {
+    const blob = new Blob([data]);
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = filename;
+    link.click();
+  }
+
+  let DDSreader: DDS | undefined;
+
+  let USERBOX_PROGRESS = 0;
+  let USERBOX_SETUP_RUN = false;
+  let USERBOX_SETUP_MODE = false;
+  let USERBOX_SETUP_TEXT = t("userbox.new.setup");
+
+  let USERBOX_ENABLED = useLocalStorage("userboxNew", false);
+  let USERBOX_PROFILE_ENABLED = useLocalStorage("userboxNewProfile", false);
+  let USERBOX_INSTALLED = false;
+  let USERBOX_SUPPORT = "webkitGetAsEntry" in DataTransferItem.prototype;
+
+  type OnlyNumberPropsOf<T extends Record<string, any>> = {[Prop in keyof T as (T[Prop] extends number ? Prop : never)]: T[Prop]}
+  let userboxSelected: keyof OnlyNumberPropsOf<UserBox> = "avatarWear";
+  const userboxNewOptions = ["systemVoice", "frame", "trophy", "mapIcon", "stage"]
+
+  async function userboxSafeDrop(event: Event & { currentTarget: EventTarget & HTMLInputElement; }) {
+    if (!event.target) return null;
+    let input = event.target as HTMLInputElement;
+    let folder = input.webkitEntries[0];
+    error = await userboxFileProcess(folder, (progress: number, progressString: string) => {
+      USERBOX_SETUP_TEXT = progressString;
+      USERBOX_PROGRESS = progress;
+    }) ?? "";
+  }
+
+  let USERBOX_URL_STATE = useLocalStorage("userboxURL", USERBOX_DEFAULT_URL);
+  function userboxHandleInput(baseURL: string, isSetByServer: boolean = false) {
+    if (baseURL != "")
+      try {
+        // validate url
+        new URL(baseURL, location.href);
+      } catch(err) {
+        if (isSetByServer)
+          return;
+        return error = t("userbox.new.error.invalidUrl")
+      }
+    USERBOX_URL_STATE.value = baseURL;
+    USERBOX_ENABLED.value = true;
+    USERBOX_PROFILE_ENABLED.value = true;
+    location.reload();
+  }
+
+  if (USERBOX_DEFAULT_URL && !USERBOX_URL_STATE.value)
+    userboxHandleInput(USERBOX_DEFAULT_URL, true);
+
+  indexedDB.databases().then(async (dbi) => {
+    let databaseExists = dbi.some(db => db.name == "userboxChusanDDS");
+    if (USERBOX_URL_STATE.value && databaseExists) {
+      indexedDB.deleteDatabase("userboxChusanDDS")
+    }
+    if (databaseExists) {
+      await initializeDb();
+    }
+    if (databaseExists || USERBOX_URL_STATE.value) {
+      DDSreader = new DDS(ddsDB);
+      USERBOX_INSTALLED = databaseExists || USERBOX_URL_STATE.value != "";
+    }
+  })
+
+</script>
+
+<StatusOverlays {error} loading={loading || !!submitting} />
+{#if !loading && !error}
+<div>
+  <div class="general-options">
+    <GameSettingFields game="chu3"/>
+
+    <InputField bind:field={userNameField}
+      callback={() => USERBOX.setUserBox({ field: "userName", value: userNameField.value })}/>
+
+    <!-- User Options -->
+    {#if userIsUsingPreset}
+      <blockquote class="info">
+        {t('settings.options.all.preset-warning')}
+      </blockquote>
+    {/if}
+    <div class="fields-ranges">
+      <UserOptionSlider 
+        game="chu3" type="headphone" 
+        minValue={0} maxValue={60} 
+        defaultValue={userOptions["headphone"]} 
+        getTextFunction={(value: number) => `${((value / 60) * 100).toFixed(0)}%`} 
+       />
+      <UserOptionSlider 
+        game="chu3" type="trackSkip" 
+        minValue={0} maxValue={7} 
+        defaultValue={userOptions["trackSkip"]} 
+        getTextFunction={(value: number) => [t('settings.options.all.none'), `S`, `S+`, `SS`, `SS+`, `SSS`, `SSS+`, t('settings.options.all.personal-best')][value]} 
+      />
+      <UserOptionSlider 
+        game="chu3" type="speed" 
+        minValue={0} maxValue={61} 
+        defaultValue={userOptions["speed"]} 
+        getTextFunction={(value: number) => value >= 61 ? "SONIC" : value < 55 ? `${(value / 4) + 1}` : `${value - 40}`} 
+      />
+      <UserOptionSlider 
+        game="chu3" type="speed_120" 
+        minValue={0} maxValue={61} 
+        defaultValue={userOptions["speed_120"]} 
+        getTextFunction={(value: number) => value >= 61 ? "SONIC" : value < 55 ? `${(value / 4) + 1}` : `${value - 40}`} 
+      />
+    </div>
+  </div>
+  <h2>{t("userbox.header.userbox")}</h2>
+  {#if !USERBOX_ENABLED.value || !USERBOX_INSTALLED}
+    <div class="fields">
+      {#each userItems as { iKey, ubKey, items }, i}
+        {#if items.length > 0}
+          <div class="field">
+            <label for={ubKey}>{ts(`userbox.${ubKey}`)}</label>
+            <div>
+              <select bind:value={userbox[ubKey]} id={ubKey} on:change={() => changed = [...changed, ubKey]}>
+                {#each items as option}
+                  <option value={option.itemId}>{allItems[iKey][option.itemId]?.name || `(unknown ${option.itemId})`}</option>
+                {/each}
+              </select>
+              {#if changed.includes(ubKey)}
+                <button transition:slide={{axis: "x"}} on:click={() => submit(ubKey)} disabled={!!submitting}>
+                  {t("settings.profile.save")}
+                </button>
+              {/if}
+            </div>
+          </div>
+        {/if}
+      {/each}
+    </div>
+  {:else}
+    <div class="chuni-userbox-container">
+      <ChuniUserplateComponent chuniIsUserbox={true} on:click={() => userboxSelected = "nameplateId"} chuniCharacter={userbox.characterId} chuniLevel={userbox.level.toString()} chuniRating={userbox.playerRating / 100}
+        chuniNameplate={userbox.nameplateId} chuniName={userbox.userName} chuniTrophyName={allItems.trophy[userbox.trophyId].name}></ChuniUserplateComponent>
+      <ChuniPenguinComponent chuniWear={userbox.avatarWear} chuniHead={userbox.avatarHead} chuniBack={userbox.avatarBack}
+        chuniFront={userbox.avatarFront} chuniFace={userbox.avatarFace} chuniItem={userbox.avatarItem}
+        chuniSkin={userbox.avatarSkin}></ChuniPenguinComponent>
+    </div>
+    <div class="chuni-userbox-row">
+      {#each avatarKinds as avatarKind}
+        {#await DDSreader?.getFile(`avatarAccessoryThumbnail:${userbox[`avatar${avatarKind}`].toString().padStart(8, "0")}`) then imageURL}
+          <button on:click={() => userboxSelected = `avatar${avatarKind}`}>
+            <img src={imageURL} class={userboxSelected == `avatar${avatarKind}` ? "focused" : ""} alt={allItems.avatarAccessory[userbox[`avatar${avatarKind}`]].name} title={allItems.avatarAccessory[userbox[`avatar${avatarKind}`]].name}>
+          </button>
+        {/await}
+      {/each}
+    </div>
+    <div class="chuni-userbox">
+      {#if userboxSelected == "nameplateId"}
+        {#each userItems.find(f => f.ubKey == "nameplateId")?.items ?? [] as item}
+          {#await DDSreader?.getFile(`nameplate:${item.itemId.toString().padStart(8, "0")}`) then imageURL}
+            <button class="nameplate" on:click={() => {userbox[userboxSelected] = item.itemId; submit(userboxSelected)}}>
+              <img src={imageURL} alt={allItems.namePlate[item.itemId].name} title={allItems.namePlate[item.itemId].name}>
+            </button>
+          {/await}
+        {/each}
+      {:else}
+        {#each userItems.find(f => f.ubKey == userboxSelected)?.items ?? [] as item}
+          {#await DDSreader?.getFile(`avatarAccessoryThumbnail:${item.itemId.toString().padStart(8, "0")}`) then imageURL}
+            <button on:click={() => {userbox[userboxSelected] = item.itemId; submit(userboxSelected)}}>
+              <img src={imageURL} alt={allItems.avatarAccessory[item.itemId].name} title={allItems.avatarAccessory[item.itemId].name}>
+            </button>
+          {/await}
+        {/each}
+      {/if}
+    </div>
+    <div class="fields">
+      {#each userItems.filter(i => userboxNewOptions.includes(i.iKey)) as { iKey, ubKey, items }, i}
+        {#if items.length > 0}
+          <div class="field">
+            <label for={ubKey}>{ts(`userbox.${ubKey}`)}</label>
+            <div>
+              <select bind:value={userbox[ubKey]} id={ubKey} on:change={() => changed = [...changed, ubKey]}>
+                {#each items as option}
+                  <option value={option.itemId}>{allItems[iKey][option.itemId]?.name || `(unknown ${option.itemId})`}</option>
+                {/each}
+              </select>
+              {#if changed.includes(ubKey)}
+                <button transition:slide={{axis: "x"}} on:click={() => submit(ubKey)} disabled={!!submitting}>
+                  {t("settings.profile.save")}
+                </button>
+              {/if}
+            </div>
+          </div>
+        {/if}
+      {/each}
+    </div>
+  {/if}
+
+  {#if USERBOX_INSTALLED}
+    <!-- god this is a mess but idgaf atp -->
+    <div class="field boolean" style:margin-top="1em">
+      <input type="checkbox" bind:checked={USERBOX_ENABLED.value} id="newUserbox">
+      <label for="newUserbox">
+        <span class="name">{t("userbox.new.activate")}</span>
+        <span class="desc">{t(`userbox.new.activate_desc`)}</span>
+      </label>
+    </div>
+    <div class="field boolean" style:margin-top="1em">
+      <input type="checkbox" bind:checked={USERBOX_PROFILE_ENABLED.value} id="newUserboxProfile">
+      <label for="newUserboxProfile">
+        <span class="name">{t("userbox.new.activate_profile")}</span>
+        <span class="desc">{t(`userbox.new.activate_profile_desc`)}</span>
+      </label>
+    </div>
+  {/if}
+  {#if USERBOX_SUPPORT && !USERBOX_DEFAULT_URL}
+    <p>
+      <button on:click={() => USERBOX_SETUP_RUN = !USERBOX_SETUP_RUN}>{t(!USERBOX_INSTALLED ? `userbox.new.activate_first` : `userbox.new.activate_update`)}</button>
+    </p>
+  {/if}
+  <ChuniMatchingSettings/><br>
+  <button class="exportButton" on:click={exportData}>
+    <Icon icon="bxs:file-export"/>
+    {t('settings.export')}
+  </button>
+  <button class="exportBatchManualButton" on:click={exportBatchManual}>
+    <Icon icon="bxs:file-export"/>
+    {t('settings.batchManualExport')}
+  </button>
+</div>
+{/if}
+
+{#if USERBOX_SETUP_RUN && !error}
+  <div class="overlay" transition:fade>
+    <div>
+      <h2>{t('userbox.new.name')}</h2>
+      <span>{USERBOX_SETUP_MODE ? t('userbox.new.url_warning') : USERBOX_SETUP_TEXT}</span>
+      <div class="actions">
+        {#if USERBOX_SETUP_MODE}
+          <input type="text" on:keyup={e => {if (e.key == "Enter") { userboxHandleInput((e.target as HTMLInputElement).value) }}} class="add-margin" placeholder="Base URL">
+        {:else}
+          {#if USERBOX_PROGRESS != 0}
+            <div class="progress">
+              <div class="progress-bar" style="width: {USERBOX_PROGRESS}%"></div>
+            </div>
+          {:else}
+          <p class="notice add-margin">
+            {t('userbox.new.setup.notice')}
+          </p>
+          <button class="drop-btn">
+            <input type="file" on:input={userboxSafeDrop} on:click={e => e.preventDefault()}>
+            {t('userbox.new.drop')}
+          </button>
+          {/if}
+        {/if}
+        {#if USERBOX_PROGRESS == 0}
+          <button on:click={() => USERBOX_SETUP_RUN = false}>
+            {t('back')}
+          </button>
+          <button on:click={() => USERBOX_SETUP_MODE = !USERBOX_SETUP_MODE}>
+            {t(USERBOX_SETUP_MODE ? 'userbox.new.switch.to_drop' : 'userbox.new.switch.to_url')}
+          </button>
+        {/if}
+      </div>
+    </div>
+  </div>
+{/if}
+
+<style lang="sass">
+@use "../../vars"
+
+input
+  width: 100%
+
+.general-options
+  display: flex
+  flex-direction: column
+  flex-wrap: wrap
+  gap: 12px
+
+p.notice
+  opacity: 0.6
+  margin-top: 0
+
+.progress
+  width: 100%
+  height: 10px
+  box-shadow: 0 0 1px 1px vars.$ov-lighter
+  border-radius: 25px
+  margin-bottom: 15px
+  overflow: hidden
+
+  .progress-bar
+    background: #b3c6ff
+    height: 100%
+    border-radius: 25px
+
+
+.add-margin, .drop-btn
+  margin-bottom: 1em
+
+.drop-btn
+  position: relative
+  width: 100%
+  aspect-ratio: 3
+  background: transparent
+  box-shadow: 0 0 1px 1px vars.$ov-lighter
+
+  > input
+    position: absolute
+    top: 0
+    left: 0
+    width: 100%
+    height: 100%
+    opacity: 0
+
+
+.fields
+  display: flex
+  flex-direction: column
+  gap: 12px
+  width: 100%
+  flex-grow: 0
+
+  label
+    display: flex
+    flex-direction: column
+
+  select
+    width: 100%
+
+.field
+  display: flex
+  flex-direction: column
+  width: 100%
+
+  label
+    max-width: max-content
+
+  > div:not(.bool)
+    display: flex
+    align-items: center
+    gap: 1rem
+    margin-top: 0.5rem
+
+    > select
+      flex: 1
+
+
+.field.boolean
+  display: flex
+  flex-direction: row
+  align-items: center
+  gap: 1rem
+  width: auto
+
+  input
+    width: auto
+    aspect-ratio: 1 / 1
+
+  label
+    display: flex
+    flex-direction: column
+    max-width: max-content
+
+    .desc
+      opacity: 0.6
+
+
+.fields-ranges
+  display: flex
+  flex-wrap: wrap
+  margin: 0.5rem 0
+  gap: 0 1rem
+  justify-content: center
+
+  :global(.field)
+    flex: calc(50% - 1rem)
+    width: 50%
+
+/* AquaBox */
+
+.chuni-userbox-row
+  width: 100%
+  display: flex
+
+  button
+    padding: 0
+    margin: 0
+    width: 100%
+    flex: 0 1 100%
+    background: none
+    aspect-ratio: 1
+
+    img
+      width: 100%
+      filter: brightness(50%)
+
+      &.focused
+        filter: brightness(75%)
+
+.chuni-userbox
+  width: calc(100% - 20px)
+  height: 350px
+
+  display: flex
+  flex-direction: row
+  flex-wrap: wrap
+  padding: 10px
+  background: vars.$c-bg
+  border-radius: 16px
+  overflow-y: auto
+  margin-bottom: 15px
+  justify-content: center
+
+  button
+    padding: 0
+    margin: 0
+    width: 20%
+    align-self: flex-start
+    background: none
+    aspect-ratio: 1
+
+    img
+      width: 100%
+
+    &.nameplate
+      width: 50%
+      aspect-ratio: unset
+      border: none
+
+.chuni-userbox-container
+  display: flex
+  align-items: center
+  justify-content: center
+
+@media (max-width: 1000px)
+  .chuni-userbox-container
+    flex-wrap: wrap
+</style>

AquaNet/src/components/settings/GameSettingFields.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import { slide } from "svelte/transition";
+  import { SETTING } from "../../libs/sdk";
+  import type { GameOption } from "../../libs/generalTypes";
+  import { ts } from "../../libs/i18n";
+  import StatusOverlays from "../StatusOverlays.svelte";
+  import InputWithButton from "../ui/InputWithButton.svelte";
+  import InputField from "../ui/InputField.svelte";
+
+  export let game: string;
+  let gameFields: GameOption[] = []
+  let submitting = ""
+  let error: string;
+
+  SETTING.get().then(s => {
+    gameFields = s.filter(it => it.game === game)
+  })
+
+  async function submitGameOption(field: string, value: any) {
+    if (submitting) return false
+    submitting = field
+
+    await SETTING.set(field, value).catch(e => error = e.message).finally(() => submitting = "")
+    return true
+  }
+</script>
+
+<div class="fields">
+  {#each gameFields as field}
+    <InputField field={field} callback={() => submitGameOption(field.key, field.value)}/>
+  {/each}
+</div>
+
+<StatusOverlays {error} loading={!gameFields.length || !!submitting}/>
+
+<style lang="sass">
+  .fields
+    display: flex
+    flex-direction: column
+    gap: 12px
+</style>

AquaNet/src/components/settings/GeneralGameSettings.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+  import { fade } from "svelte/transition";
+  import { FADE_IN, FADE_OUT } from "../../libs/config";
+  import { t, ts } from "../../libs/i18n";
+  import useLocalStorage from "../../libs/hooks/useLocalStorage.svelte";
+  import RegionSelector from "./RegionSelector.svelte";
+  import { USER } from "../../libs/sdk";
+  import type { AquaNetUser } from "../../libs/generalTypes";
+  import StatusOverlays from "../StatusOverlays.svelte";
+
+  const rounding = useLocalStorage("rounding", true);
+
+  let me: AquaNetUser;
+  let submitting = "";
+  let error = "";
+  let loading = true;
+
+  USER.me().then((m) => {
+    me = m;
+    loading = false;
+  }).catch(e => error = e.message)
+
+  function submit(field: string, value: string) {
+    if (submitting) return
+    submitting = field
+
+    USER.setting(field, value).then(() => {
+    }).catch(e => error = e.message).finally(() => submitting = "")
+  }
+</script>
+
+{#if !loading}
+  <div class="fields">
+    <blockquote class="info">
+      {ts("settings.siteNotice")}
+    </blockquote>
+    <div class="field">
+      <div class="bool">
+        <input id="rounding" type="checkbox" bind:checked={rounding.value}/>
+        <label for="rounding">
+          <span class="name">{ts(`settings.fields.rounding.name`)}</span>
+          <span class="desc">{ts(`settings.fields.rounding.desc`)}</span>
+        </label>
+      </div>
+    </div>
+    <div class="field m-t">
+      <div class="bool">
+          <input id="displayCandidates" type="checkbox" bind:checked={me.displayCandidates}
+            on:change={() => submit('displayCandidates', me.displayCandidates.toString())}/>
+          <label for="displayCandidates">
+            <span class="name">{ts(`settings.fields.displayCandidates.name`)}</span>
+            <span class="desc">{ts(`settings.fields.displayCandidates.desc`)}</span>
+          </label>
+      </div>
+    </div>
+    <div class="divider"></div>
+    <blockquote class="info">
+      {ts("settings.regionNotice")}
+    </blockquote>
+    <RegionSelector/>
+  </div>
+{/if}
+
+<StatusOverlays {error} {loading} />
+
+<style lang="sass">
+  @use "../../vars"
+
+  .fields
+    display: flex
+    flex-direction: column
+    gap: 12px
+
+  .bool
+    display: flex
+    align-items: center
+    gap: 1rem
+
+    label
+      display: flex
+      flex-direction: column
+
+      .desc
+        opacity: 0.6
+
+  .divider
+    width: 100%
+    height: 0.5px
+    background: white
+    opacity: 0.2
+    margin: 0.4rem 0
+</style>

AquaNet/src/components/settings/Mai2Settings.svelte

@@ -0,0 +1,315 @@
+<script lang="ts">
+  import { slide, fade } from "svelte/transition";
+  import { FADE_IN, FADE_OUT, DATA_HOST } from "../../libs/config";
+  import { t } from "../../libs/i18n.js";
+  import Icon from "@iconify/svelte";
+  import StatusOverlays from "../StatusOverlays.svelte";
+  import { GAME, SETTING, USER } from "../../libs/sdk";
+  import GameSettingFields from "./GameSettingFields.svelte";
+  import { download } from "../../libs/ui";
+  import UserOptionSlider from "./UserOptionSlider.svelte";
+  import type { GameUserOption } from "../../libs/generalTypes";
+  import InputField from "../ui/InputField.svelte";
+
+  let userNameField: any
+
+  let error: string
+  let submitting = ""
+  let loading = true
+  let changed: string[] = []
+
+  let userOptions: GameUserOption = {}
+  let userIsUsingPreset = false
+
+  USER.me().then(me =>
+    GAME.userSummary(me.username, 'mai2').then(async ({name}) => {
+      userNameField = {key: "gameUsername", value: name, type: "String"}
+
+      userOptions = await SETTING.optionGet('mai2').catch(_ => {
+        error = t("userbox.error.nodata")
+        loading = true
+      }) as GameUserOption
+      if (userOptions["optionKind"] != 3)
+        userIsUsingPreset = true
+      loading = false
+    }).catch(e => error = e.message));
+
+  async function exportBatchManual() {
+    submitting = "batchExport"
+    const DIFFICULTY_MAP: Record<number, string> = {
+      0: "Basic",
+      1: "Advanced",
+      2: "Expert",
+      3: "Master",
+      4: "Re:Master"
+    }
+
+    const DAN_MAP: Record<number, string> = {
+      1: "DAN_1",
+      2: "DAN_2",
+      3: "DAN_3",
+      4: "DAN_4",
+      5: "DAN_5",
+      6: "DAN_6",
+      7: "DAN_7",
+      8: "DAN_8",
+      9: "DAN_9",
+      10: "DAN_10",
+      11: "SHINDAN_1",
+      12: "SHINDAN_2",
+      13: "SHINDAN_3",
+      14: "SHINDAN_4",
+      15: "SHINDAN_5",
+      16: "SHINDAN_6",
+      17: "SHINDAN_7",
+      18: "SHINDAN_8",
+      19: "SHINDAN_9",
+      20: "SHINDAN_10",
+      21: "SHINKAIDEN",
+      22: "URAKAIDEN"
+    }
+
+    const CLASS_MAP: Record<number, string> = {
+      0: "B5",
+      1: "B4",
+      2: "B3",
+      3: "B2",
+      4: "B1",
+      5: "A5",
+      6: "A4",
+      7: "A3",
+      8: "A2",
+      9: "A1",
+      10: "S5",
+      11: "S4",
+      12: "S3",
+      13: "S2",
+      14: "S1",
+      15: "SS5",
+      16: "SS4",
+      17: "SS3",
+      18: "SS2",
+      19: "SS1",
+      20: "SSS5",
+      21: "SSS4",
+      22: "SSS3",
+      23: "SSS2",
+      24: "SSS1",
+      25: "LEGEND"
+    }
+
+    let data: any
+    let musicData: any
+    let output: any = {
+      "meta": {
+        "game": "maimaidx",
+        "playtype": "Single",
+        "service": "AquaDX-Manual"
+      },
+      "scores": [],
+      "classes": {}
+    }
+    try {
+      musicData = await fetch(`${DATA_HOST}/d/mai2/00/all-music.json`).then(res => res.json())
+    } catch (e: any) {
+      error = e.message;
+      submitting = ""
+      return;
+    }
+    try {
+      data = await GAME.export('mai2');
+    } catch (e: any) {
+      error = e.message;
+      submitting = ""
+      return;
+    }
+    if (data && "userPlaylogList" in data) {
+      for (let score of data.userPlaylogList) {
+        if(score.musicId > 100000){
+          continue; // UTAGE charts are not supported
+        }
+        const musicItem = musicData[score.musicId as string];
+        if (!musicItem) continue;
+        let difficulty = null;
+
+        if (!(score.level in DIFFICULTY_MAP))
+          continue;
+
+        const isDX = score.musicId >= 10000;
+        difficulty = isDX ? `DX ${DIFFICULTY_MAP[score.level]}` : DIFFICULTY_MAP[score.level];
+
+        const percent = score.achievement/10000;
+
+        const pcrit = score.tapCriticalPerfect + score.holdCriticalPerfect + score.slideCriticalPerfect + score.touchCriticalPerfect + score.breakCriticalPerfect;
+        const perfect = score.tapPerfect + score.holdPerfect + score.slidePerfect + score.touchPerfect + score.breakPerfect;
+        const great = score.tapGreat + score.holdGreat + score.slideGreat + score.touchGreat + score.breakGreat;
+        const good = score.tapGood + score.holdGood + score.slideGood + score.touchGood + score.breakGood;
+        const miss = score.tapMiss + score.holdMiss + score.slideMiss + score.touchMiss + score.breakMiss;
+        const judgements  = {
+          "pcrit": pcrit,
+          "perfect": perfect,
+          "great": great,
+          "good": good,
+          "miss": miss
+        }
+        let lamp = null;
+        if (score.isAllPerfect) {
+          lamp = "ALL PERFECT";
+          if (percent >= 101.0) {
+            lamp = "ALL PERFECT+";
+          }
+        } else if (score.isFullCombo) {
+          lamp = "FULL COMBO";
+          if (!good) {
+            lamp = "FULL COMBO+";
+          }
+        } else if (score.isClear) {
+          lamp = "CLEAR";
+        } else {
+          lamp = "FAILED";
+        }
+
+        const optional = {
+          "fast": score.fastCount,
+          "slow": score.lateCount,
+          "maxCombo": score.maxCombo
+        }
+
+        output.scores.push({
+          "percent": percent,
+          "lamp": lamp,
+          "matchType": "inGameID",
+          "identifier": score.musicId.toString(),
+          "difficulty": difficulty,
+          "timeAchieved": new Date(score.userPlayDate).getTime(),
+          "judgements": judgements,
+          "optional": optional
+        })
+      }
+    }
+
+    if(data.userData.courseRank in DAN_MAP){
+      output.classes["dan"] = DAN_MAP[data.userData.courseRank]
+    }
+    if(data.userData.classRank in CLASS_MAP){
+      output.classes["matchingClass"] = CLASS_MAP[data.userData.classRank]
+    }
+    download(JSON.stringify(output), `AquaDX_maimai2_BatchManualExport_${userNameField.value}.json`)
+    submitting = ""
+  }
+
+  function exportData() {
+    submitting = "export"
+    GAME.export('mai2')
+      .then(data => download(JSON.stringify(data), `AquaDX_maimai2_export_${userNameField.value}.json`))
+      .catch(e => error = e.message)
+      .finally(() => submitting = "")
+  }
+</script>
+
+{#if !loading}
+<div class="fields">
+  <InputField bind:field={userNameField}
+    callback={() => GAME.changeName('mai2', userNameField.value)}/>
+  {#if userIsUsingPreset}
+    <blockquote class="info">
+      {t('settings.options.all.preset-warning')}
+    </blockquote>
+  {/if}
+  <div class="fields-ranges">
+    <!-- TODO: determine min & max -->
+    <UserOptionSlider
+      game="mai2" type="noteSpeed"
+      minValue={0} maxValue={37}
+      defaultValue={userOptions["noteSpeed"]}
+      getTextFunction={(value: number) => value >= 37 ? "SONIC" : `${(value / 4) + 1}`}
+    />
+    <UserOptionSlider
+      game="mai2" type="touchSpeed"
+      minValue={0} maxValue={37}
+      defaultValue={userOptions["touchSpeed"]}
+      getTextFunction={(value: number) => value >= 37 ? "SONIC" : `${(value / 4) + 1}`}
+    />
+    <UserOptionSlider
+      game="mai2" type="slideSpeed"
+      minValue={0} maxValue={20}
+      defaultValue={userOptions["slideSpeed"]}
+      getTextFunction={(value: number) => value == 10 ? "Normal" : `${value > 10 ? "Late" : "Fast"} ${(Math.abs(value - 10) / 10).toFixed(1)}`}
+    />
+    <UserOptionSlider
+      game="mai2" type="headPhoneVolume"
+      minValue={0} maxValue={19}
+      defaultValue={userOptions["headPhoneVolume"]}
+      getTextFunction={(value: number) => `${((value / 19) * 100).toFixed(0)}%`}
+    />
+    <UserOptionSlider
+      game="mai2" type="trackSkip"
+      minValue={0} maxValue={11}
+      defaultValue={userOptions["trackSkip"]}
+      getTextFunction={(value: number) => [
+        t('settings.options.all.none'),
+        t('settings.options.all.push'),
+        `S`, `SS`, `SSS`,
+        t('settings.options.all.personal-best'),
+        t('settings.options.all.rival-score'),
+        `${t('settings.options.all.life')} 300`,
+        `${t('settings.options.all.life')} 100`,
+        `${t('settings.options.all.life')} 50`,
+        `${t('settings.options.all.life')} 10`,
+        `${t('settings.options.all.life')} 1`
+      ][value]}
+    />
+  </div>
+  <GameSettingFields game="mai2"/>
+  <button class="exportButton" on:click={exportData}>
+    <Icon icon="bxs:file-export"/>
+    {t('settings.export')}
+  </button>
+  <button class="exportBatchManualButton" on:click={exportBatchManual}>
+    <Icon icon="bxs:file-export"/>
+    {t('settings.batchManualExport')}
+  </button>
+</div>
+{/if}
+
+<StatusOverlays {error} loading={!userNameField || !!submitting || loading}/>
+
+<style lang="sass">
+  .fields
+    display: flex
+    flex-direction: column
+    gap: 12px
+
+  .field
+    display: flex
+    flex-direction: column
+
+    label
+      max-width: max-content
+
+    > div:not(.bool)
+      display: flex
+      align-items: center
+      gap: 1rem
+      margin-top: 0.5rem
+
+      > input
+        flex: 1
+
+  .fields-ranges
+    display: flex
+    flex-wrap: wrap
+    margin: 0.5rem 0
+    gap: 0 1rem
+    justify-content: center
+
+    :global(.field)
+      flex: calc(50% - 1rem)
+      width: 50%
+
+  .exportButton
+    display: flex
+    justify-content: center
+    align-items: center
+    gap: 5px
+</style>

AquaNet/src/components/settings/OngekiSettings.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import { fade } from "svelte/transition";
+  import { FADE_IN, FADE_OUT } from "../../libs/config";
+  import GameSettingFields from "./GameSettingFields.svelte";
+  import { GAME, SETTING, USER } from "../../libs/sdk";
+  import { download } from "../../libs/ui";
+  import InputField from "../ui/InputField.svelte";
+  import Icon from "@iconify/svelte";
+  import { t } from "../../libs/i18n";
+  import StatusOverlays from "../StatusOverlays.svelte";
+
+  let userNameField: any
+
+  let submitting = "";
+  let error: string
+  let loading = true;
+
+  USER.me().then(me =>
+    GAME.userSummary(me.username, 'ongeki').then(async ({name}) => {
+      userNameField = {key: "gameUsername", value: name, type: "String"}
+      loading = false;
+    }))
+  
+
+  function exportData() {
+      submitting = "export"
+      GAME.export('ongeki')
+        .then(data => download(JSON.stringify(data), `AquaDX_ongeki_export_${userNameField.value}.json`))
+        .catch(e => error = e.message)
+        .finally(() => submitting = "")
+    }
+</script>
+
+{#if !loading}
+  <div>
+    <div class="fields">
+      <InputField bind:field={userNameField}
+        callback={() => SETTING.detailSet('ongeki', 'userName', userNameField.value)}/>
+      <GameSettingFields game="ongeki"/>
+      <button class="exportButton" on:click={exportData}>
+        <Icon icon="bxs:file-export"/>
+        {t('settings.export')}
+      </button>
+    </div>
+  </div>
+{/if}
+
+<StatusOverlays {error} loading={!userNameField || !!submitting || loading}/>
+
+<style lang="sass">
+  .fields
+    display: flex
+    flex-direction: column
+    gap: 12px
+</style>

AquaNet/src/components/settings/RegionSelector.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+  import { USER} from "../../libs/sdk";
+  import { ts } from "../../libs/i18n";
+  import StatusOverlays from "../StatusOverlays.svelte";
+  let regionId = $state(0);
+  let submitting = $state("")
+  let error: string = $state("");
+
+  const prefectures = ["None","Aichi","Aomori","Akita","Ishikawa","Ibaraki","Iwate","Ehime","Oita","Osaka","Okayama","Okinawa","Kagawa","Kagoshima","Kanagawa","Gifu","Kyoto","Kumamoto","Gunma","Kochi","Saitama","Saga","Shiga","Shizuoka","Shimane","Chiba","Tokyo","Tokushima","Tochigi","Tottori","Toyama","Nagasaki","Nagano","Nara","Niigata","Hyogo","Hiroshima","Fukui","Fukuoka","Fukushima","Hokkaido","Mie","Miyagi","Miyazaki","Yamagata","Yamaguchi","Yamanashi","Wakayama"]
+
+  USER.me().then(user => {
+    const parsedRegion = parseInt(user.region);
+    if (!isNaN(parsedRegion) && parsedRegion > 0) {
+      regionId = parsedRegion - 1;
+    } else {
+      regionId = 0;
+    }
+  })
+
+  async function saveNewRegion() {
+    if (submitting) return false
+    submitting = "region"
+
+    await USER.changeRegion(regionId+1).catch(e => error = e.message).finally(() => submitting = "")
+    return true
+  }
+</script>
+
+<div class="fields">
+  <label for="rounding">
+    <span class="name">{ts(`settings.regionSelector.title`)}</span>
+    <span class="desc">{ts(`settings.regionSelector.desc`)}</span>
+  </label>
+  <select bind:value={regionId} onchange={saveNewRegion}>
+    <option value={0} disabled selected>{ts("settings.regionSelector.select")}</option>
+    {#each prefectures.slice(1) as prefecture, index}
+      <option value={index}>{prefecture}</option>
+    {/each}
+  </select>
+</div>
+
+<StatusOverlays {error} loading={!!submitting}/>
+
+<style lang="sass">
+  @use "../../vars"
+
+  .fields
+    display: flex
+    flex-direction: column
+    gap: 12px
+
+  label
+    display: flex
+    flex-direction: column
+
+    .desc
+      opacity: 0.6
+
+</style>

AquaNet/src/components/settings/UserOptionSlider.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+  import { t } from "../../libs/i18n";
+  import { EN_REF } from "../../libs/i18n/en_ref";
+  import type { GameName } from "../../libs/scoring";
+  import { SETTING } from "../../libs/sdk";
+
+    export let getTextFunction: (value: number) => string
+    export let defaultValue: number = 0
+
+    export let minValue: number = 0
+    export let maxValue: number = 0
+    export let type: string = "speed";
+    export let game: GameName;
+
+    export let disabled: boolean = false;
+
+    let value = defaultValue;
+    let rationalizedValue = defaultValue / maxValue;
+
+    async function submit() {
+        await SETTING.optionSet(game, type, value);
+    }
+</script>
+<div class="field range">
+    <div class="range-label">
+        {t(`settings.options.${game}.${type}` as keyof typeof EN_REF)} <!-- TODO: i18n -->
+    </div>
+    <div class="range-value">
+        <input 
+            type="range" min={minValue} {disabled}
+            on:change={submit} max={maxValue} bind:value={value} 
+        >
+        <div>
+            {getTextFunction(value)}
+        </div>
+    </div>
+</div>
+<style lang="sass">
+    @use "../../vars"
+
+    .field
+        width: 100%
+
+        .range-value
+            display: flex
+            align-items: center
+            
+            div 
+                min-width: 4rem
+                white-space: nowrap
+                display: flex
+                justify-content: center
+
+            input
+                flex: 100%
+    
+    input
+        -webkit-appearance: none
+        width: 100%
+        height: 5px !important
+        outline: none
+        transition: opacity 200ms
+        padding: 4px
+        border-radius: 4px
+        opacity: 80%
+        background: linear-gradient(to right, transparent 0%, #caf1 10%, #caf1 90%, transparent 100%)
+
+        margin: 16px 0
+
+        &:hover
+            opacity: 100%
+
+    *:focus
+        outline: none
+
+    input::-webkit-slider-thumb 
+        -webkit-appearance: none
+        appearance: none
+        width: 8px
+        height: 30px
+        background: vars.$c-main
+        border-radius: 8px
+        cursor: pointer
+        box-shadow: 0 0 2px 0 vars.$c-main
+    
+</style>

AquaNet/src/components/settings/UserSettings.svelte

@@ -0,0 +1,304 @@
+<script lang="ts">
+  import { slide, fade } from "svelte/transition";
+  import type { AquaNetUser, ConfirmProps } from "../../libs/generalTypes";
+  import { CARD, GAME, USER, type ExportGameName } from "../../libs/sdk";
+  import StatusOverlays from "../../components/StatusOverlays.svelte";
+  import Icon from "@iconify/svelte";
+  import { download, pfp } from "../../libs/ui";
+  import { t, ts } from "../../libs/i18n";
+  import Cropper from "svelte-easy-crop";
+
+  let me: AquaNetUser;
+  let error: string;
+  let submitting = ""
+  let loading = false;
+  let confirm: ConfirmProps | null = null;
+
+  const profileFields = [
+    [ 'displayName', t('settings.profile.name') ],
+    [ 'username', t('settings.profile.username') ],
+    [ 'password', t('settings.profile.password') ],
+    [ 'profileBio', t('settings.profile.bio') ],
+  ] as const
+
+  // Fetch user data
+  const getMe = () => {
+    loading = true;
+    USER.me().then((m) => {
+      if (pfpCropURL != null) {
+        URL.revokeObjectURL(pfpCropURL);
+        pfpField.value = "";
+        pfpCropURL = null;
+      }; me = m;
+      loading = false;
+    }).catch(e => error = e.message)
+  }
+  getMe();
+
+  let changed: string[] = []
+  let pfpField: HTMLInputElement
+  let pfpCropURL: string | null = null;
+  let pfpCrop = { width: 0, height: 0, x: 0, y: 0 };
+
+  function submit(field: string, value: string) {
+    if (submitting) return
+    submitting = field
+
+    USER.setting(field, value).then(() => {
+      changed = changed.filter(c => c !== field)
+    }).catch(e => error = e.message).finally(() => submitting = "")
+  }
+
+  function uploadPfp() {
+    if (submitting) return
+    let canvas = document.createElement("canvas");
+    let ctx = canvas.getContext("2d");
+    const size = Math.round(Math.min(pfpCrop.width, pfpCrop.height, 1024));
+    canvas.width = size;
+    canvas.height = size;
+    let img = document.createElement("img");
+    img.onload = () => {
+      ctx?.drawImage(img, pfpCrop.x, pfpCrop.y, pfpCrop.width, pfpCrop.height, 0, 0, size, size);
+      canvas.toBlob(blob => {
+        if (!blob) return;
+        submitting = 'profilePicture'
+        USER.uploadPfp(blob as File).then(() => {
+          me.profilePicture = me.username
+          setTimeout(getMe, 200);
+        }).catch(e => error = e.message).finally(() => submitting = "")
+      });
+    }
+    img.src = pfpCropURL ?? "";
+  }
+  function handlePfpUpload(e: Event & { currentTarget: HTMLInputElement }) {
+    if (!e.target) return;
+    let files = e?.currentTarget?.files;
+    if (!files || files.length <= 0) return;
+    let file = files[0];
+    console.log(me.username, me);
+    switch (file.type) {
+      case "image/gif":
+        USER.uploadPfp(file).then(() => {
+          me.profilePicture = me.username
+          // reload
+          setTimeout(getMe, 200);
+        }).catch(e => error = e.message).finally(() => submitting = "")
+        break;
+      case "image/png":
+      case "image/jpeg":
+      case "image/webp":
+        pfpCropURL = URL.createObjectURL(file);
+        break;
+      default:
+        error = t("settings.profile.bad-format");
+    }
+  };
+  function logOut() {
+    localStorage.removeItem("token");
+    location.href = "/";
+  }
+
+  function requestAccountDeletion() {
+    if (submitting) return;
+    confirm = {
+      title: t('settings.profile.delete-confirm-title'),
+      message: t('settings.profile.delete-confirm-message'),
+      dangerous: true,
+      cancel: () => confirm = null,
+      confirm: deleteAccount,
+    };
+  }
+
+  async function deleteAccount() {
+    if (submitting) return;
+    submitting = "deleteAccount";
+
+    try {
+      const gameSummary = await CARD.userGames(me.username);
+      const games = (['mai2', 'chu3', 'ongeki', 'wacca', 'diva'] as ExportGameName[])
+        .filter(game => gameSummary[game] !== null);
+      const exports = await Promise.all(games.map(async game => ({
+        game,
+        data: await GAME.export(game),
+      })));
+
+      exports.forEach(({game, data}) => download(
+        JSON.stringify(data, null, 2),
+        `AquaDX_${game}_export_${me.username}.json`,
+      ));
+      await USER.deleteAccount();
+      localStorage.removeItem("token");
+      location.href = "/";
+    } catch (e) {
+      error = (e as Error).message;
+      submitting = "";
+    }
+  }
+
+  const passwordAction = (node: HTMLInputElement, whether: boolean) => {
+    if (whether) node.type = 'password'
+  }
+</script>
+<StatusOverlays bind:confirm={confirm} {error} loading={!!submitting || loading} />
+{#if !submitting && !error && me}
+  <div>
+    <div class="fields">
+      <div class="field">
+        <label for="profile-upload">{t('settings.profile.picture')}</label>
+        <div>
+            {#if me && me.profilePicture}
+              <div on:click={() => pfpField.click()} on:keydown={e => e.key === 'Enter' && pfpField.click()}
+                      role="button" tabindex="0" class="clickable">
+                  <img use:pfp={me} alt="Profile" />
+              </div>
+            {:else}
+              <button on:click={() => pfpField.click()}>
+                  {t('settings.profile.upload-new')}
+              </button>
+            {/if}
+        </div>
+        <input id="profile-upload" type="file" accept="image/gif,image/png,image/jpeg,image/webp" hidden bind:this={pfpField}
+          on:change={handlePfpUpload} />
+      </div>
+      {#each profileFields as [field, name], i (field)}
+        <div class="field">
+          <label for={field}>{name}</label>
+          <div>
+            {#if field == "profileBio"}
+              <textarea id={field} bind:value={me[field]} on:input={() => changed = [...changed, field]} maxlength=255 placeholder={t('settings.profile.unset')}></textarea>
+            {:else}
+              <input id={field} type="text" use:passwordAction={field === 'password'}
+              bind:value={me[field]} on:input={() => changed = [...changed, field]}
+              placeholder={field === 'password' ? t('settings.profile.unchanged') : t('settings.profile.unset')}/>
+            {/if}
+
+            {#if changed.includes(field) && me[field]}
+                <button transition:slide={{axis: 'x'}} on:click={() => submit(field, me[field])}>
+                  {#if submitting === field}
+                    <Icon icon="line-md:loading-twotone-loop" />
+                  {:else}
+                    {t('settings.profile.save')}
+                  {/if}
+                </button>
+            {/if}
+          </div>
+        </div>
+      {/each}
+      <div class="field m-t">
+        <div class="bool">
+            <input id="optOutOfLeaderboard" type="checkbox" bind:checked={me.optOutOfLeaderboard}
+              on:change={() => submit('optOutOfLeaderboard', me.optOutOfLeaderboard.toString())}/>
+            <label for="optOutOfLeaderboard">
+              <span class="name">{ts(`settings.fields.optOutOfLeaderboard.name`)}</span>
+              <span class="desc">{ts(`settings.fields.optOutOfLeaderboard.desc`)}</span>
+            </label>
+        </div>
+      </div>
+      <div class="field m-t">
+        <div class="bool">
+            <input id="hideCountry" type="checkbox" bind:checked={me.hideCountry}
+              on:change={() => submit('hideCountry', me.hideCountry.toString())}/>
+            <label for="hideCountry">
+              <span class="name">{ts(`settings.fields.hideCountry.name`)}</span>
+              <span class="desc">{ts(`settings.fields.hideCountry.desc`)}</span>
+            </label>
+        </div>
+      </div>
+      <div class="field m-t">
+        <div>
+            <button on:click={logOut}>{ts(`settings.profile.logout`)}</button>
+        </div>
+      </div>
+      <div class="field danger-zone m-t">
+        <span class="name">{t('settings.profile.delete-title')}</span>
+        <span class="desc">{t('settings.profile.delete-description')}</span>
+        <div>
+          <button class="error" on:click={requestAccountDeletion}>
+            <Icon icon="tabler:trash-x-filled" />
+            {t('settings.profile.delete')}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+{/if}
+
+{#if pfpCropURL != null}
+  <div class="overlay" transition:fade>
+    <div>
+      <div class="cropper-container">
+        <Cropper maxZoom={1e9} oncropcomplete={(e) => pfpCrop = e.pixels} image={pfpCropURL ?? "assets/imgs/no_profile.png"} aspect={1} cropShape="round"></Cropper>
+      </div>
+      <button on:click={uploadPfp}>
+        {t("settings.profile.save")}
+      </button>
+      <button on:click={getMe}>
+        {t("back")}
+      </button>
+    </div>
+  </div>
+{/if}
+
+<style lang="sass">
+  @use "../../vars"
+
+  .fields
+    display: flex
+    flex-direction: column
+    gap: 12px
+
+  .bool
+    display: flex
+    align-items: center
+    gap: 1rem
+
+    label
+      display: flex
+      flex-direction: column
+
+      .desc
+        opacity: 0.6
+
+  .field
+    display: flex
+    flex-direction: column
+
+    label
+      max-width: max-content
+
+    > div:not(.bool)
+      display: flex
+      align-items: center
+      gap: 1rem
+      margin-top: 0.5rem
+
+      > input, > textarea
+        flex: 1
+
+    img
+      max-width: 100px
+      max-height: 100px
+      border-radius: vars.$border-radius
+      object-fit: cover
+      aspect-ratio: 1
+
+  .danger-zone
+    margin-top: 1.5rem
+    padding-top: 1.5rem
+    border-top: 1px solid vars.$ov-lighter
+
+    .desc
+      opacity: 0.6
+
+    button
+      display: flex
+      align-items: center
+      gap: 0.5rem
+
+
+
+  .cropper-container
+    position: relative
+    width: 400px
+    aspect-ratio: 1
+</style>

AquaNet/src/components/settings/WaccaSettings.svelte

@@ -0,0 +1,9 @@
+<script>
+  import { fade } from "svelte/transition";
+  import { FADE_IN, FADE_OUT } from "../../libs/config";
+  import GameSettingFields from "./GameSettingFields.svelte";
+</script>
+
+<div>
+  <GameSettingFields game="wacca"/>
+</div>

AquaNet/src/components/settings/userbox/ChuniPenguin.svelte

@@ -0,0 +1,227 @@
+<script lang="ts">
+  import { removeImg } from "../../../libs/ui";
+    import { DDS } from "../../../libs/userbox/dds"
+    import { ddsDB } from "../../../libs/userbox/userbox"
+
+    const DDSreader = new DDS(ddsDB);
+
+    export var chuniWear = 1100001;
+    export var chuniHead = 1200001;
+    export var chuniFace = 1300001;
+    export var chuniSkin = 1400001;
+    export var chuniItem = 1500001;
+    export var chuniFront = 1600001;
+    export var chuniBack = 1700001;
+    export var classPassthrough: string = ``;
+</script>
+<div class="chuni-penguin {classPassthrough}">
+    <div class="chuni-penguin-body">
+        <!-- Body -->
+        {#await DDSreader.getFileFromSheet(`avatarAccessory:${chuniSkin.toString().padStart(8, "0")}`, 0, 0, 256, 400, 0.75) then imageURL}
+            <img class="chuni-penguin-skin" src={imageURL} alt="Body" on:error={removeImg}>
+        {/await}
+
+        <!-- Face -->
+        {#await DDSreader.getFileFromSheet("surfboard:CHU_UI_Common_Avatar_face_00.dds", 0, 0, 225, 150, 0.75) then imageURL}
+            <img class="chuni-penguin-eyes chuni-penguin-accessory" src={imageURL} alt="Eyes" on:error={removeImg}>
+        {/await}
+        {#await DDSreader.getFileFromSheet("surfboard:CHU_UI_Common_Avatar_body_00.dds", 86, 103, 96, 43, 0.75) then imageURL}
+            <img class="chuni-penguin-beak chuni-penguin-accessory" src={imageURL} alt="Beak" on:error={removeImg}>
+        {/await}
+
+        {#if chuniItem != 1500001}
+            <!-- Arms (straight) -->
+            {#await DDSreader.getFileFromSheet("surfboard:CHU_UI_Common_Avatar_body_00.dds", 0, 0, 85, 160, 0.75) then imageURL}
+                <img class="chuni-penguin-arm-left chuni-penguin-arm" src={imageURL} alt="Left Arm" on:error={removeImg}/>
+                <div class="chuni-penguin-arm-left chuni-penguin-arm-type-1 chuni-penguin-arm">
+                    {#await DDSreader.getFileFromSheet(`avatarAccessory:${chuniItem.toString().padStart(8, "0")}`, 0, 0, 200, 544, 0.75) then imageURL}
+                        <img class="chuni-penguin-item chuni-penguin-accessory chuni-penguin-item-left" src={imageURL} alt="Item" on:error={removeImg}>
+                    {/await}
+                </div>
+            {/await}
+            {#await DDSreader.getFileFromSheet("surfboard:CHU_UI_Common_Avatar_body_00.dds", 0, 0, 85, 160, 0.75) then imageURL}
+                <img class="chuni-penguin-arm-right chuni-penguin-arm" src={imageURL} alt="Right Arm" on:error={removeImg}>
+                <div class="chuni-penguin-arm-right chuni-penguin-arm-type-1 chuni-penguin-arm">
+                    {#await DDSreader.getFileFromSheet(`avatarAccessory:${chuniItem.toString().padStart(8, "0")}`, 200, 0, 200, 544, 0.75) then imageURL}
+                        <img class="chuni-penguin-item chuni-penguin-accessory chuni-penguin-item-right" src={imageURL} alt="Item" on:error={removeImg}>
+                    {/await}
+                </div>
+            {/await}
+        {:else}
+            <!-- Arms (bent) -->
+            {#await DDSreader.getFileFromSheet("surfboard:CHU_UI_Common_Avatar_body_00.dds", 80, 0, 110, 100, 0.75) then imageURL}
+                <img class="chuni-penguin-arm-left chuni-penguin-arm chuni-penguin-arm-type-2" src={imageURL} alt="Left Arm" on:error={removeImg}>
+            {/await}
+            {#await DDSreader.getFileFromSheet("surfboard:CHU_UI_Common_Avatar_body_00.dds", 80, 0, 110, 100, 0.75) then imageURL}
+                <img class="chuni-penguin-arm-right chuni-penguin-arm chuni-penguin-arm-type-2" src={imageURL} alt="Right Arm" on:error={removeImg}>
+            {/await}
+        {/if}
+
+        <!-- Wear -->
+        {#await DDSreader.getFileScaled(`avatarAccessory:${chuniWear.toString().padStart(8, "0")}`, 0.75, `avatarAccessory:01100001`) then imageURL}
+            <img class="chuni-penguin-wear chuni-penguin-accessory" src={imageURL} alt="Wear" on:error={removeImg}>
+        {/await}
+
+        <!-- Head -->
+        {#await DDSreader.getFileScaled(`avatarAccessory:${chuniHead.toString().padStart(8, "0")}`, 0.75, `avatarAccessory:01200001`) then imageURL}
+            <img class="chuni-penguin-head chuni-penguin-accessory" src={imageURL} alt="Head" on:error={removeImg}>
+        {/await}
+        {#if chuniHead == 1200001}
+            <!-- If wearing original hat, add the feather -->
+            {#await DDSreader.getFileFromSheet("surfboard:CHU_UI_Common_Avatar_body_00.dds", 5, 160, 100, 150, 0.75) then imageURL}
+                <img class="chuni-penguin-head-3 chuni-penguin-accessory" src={imageURL} alt="Head3" on:error={removeImg}>
+            {/await}
+        {/if}
+        <!-- Oops, I realized just now that the thing on it's forehead applies to all hats. My mistake! -->
+        {#await DDSreader.getFileFromSheet("surfboard:CHU_UI_Common_Avatar_body_00.dds", 105, 153, 56, 58, 0.75) then imageURL}
+            <img class="chuni-penguin-head-2 chuni-penguin-accessory" src={imageURL} alt="Head2" on:error={removeImg}>
+        {/await}
+
+        <!-- Face (Accessory) -->
+        {#await DDSreader.getFileScaled(`avatarAccessory:${chuniFace.toString().padStart(8, "0")}`, 0.75, `avatarAccessory:01300001`) then imageURL}
+            <img class="chuni-penguin-face-accessory chuni-penguin-accessory" src={imageURL} alt="Face (Accessory)" on:error={removeImg}>
+        {/await}
+
+        <!-- Front -->
+        {#await DDSreader.getFileScaled(`avatarAccessory:${chuniFront.toString().padStart(8, "0")}`, 0.75) then imageURL}
+            <img class="chuni-penguin-front chuni-penguin-accessory" src={imageURL} alt="Front" on:error={removeImg}>
+        {/await}
+
+        <!-- Back -->
+        {#await DDSreader.getFileScaled(`avatarAccessory:${chuniBack.toString().padStart(8, "0")}`, 0.75) then imageURL}
+            <img class="chuni-penguin-back chuni-penguin-accessory" src={imageURL} alt="Back" on:error={removeImg}>
+        {/await}
+    </div>
+    <div class="chuni-penguin-feet">
+        <!-- Feet -->
+        {#await DDSreader.getFileFromSheet(`avatarAccessory:${chuniSkin.toString().padStart(8, "0")}`, 0, 410, 85, 80, 0.75) then imageURL}
+            <img src={imageURL} alt="Foot" on:error={removeImg}>
+        {/await}
+        {#await DDSreader.getFileFromSheet(`avatarAccessory:${chuniSkin.toString().padStart(8, "0")}`, 85, 410, 85, 80, 0.75) then imageURL}
+            <img src={imageURL} alt="Foot" on:error={removeImg}>
+        {/await}
+    </div>
+</div>
+<!-- Truly sorry for the horrors below -->
+<style lang="sass">
+    @keyframes chuniPenguinBodyBob
+        0%
+            transform: translate(-50%, 5px) translate(0%, -50%)
+        50%
+            transform: translate(-50%, 0%) translate(0%, -50%)
+        100%
+            transform: translate(-50%, 5px) translate(0%, -50%)
+    @keyframes chuniPenguinArmLeft
+        0%
+            transform: translate(-50%, 0) rotate(-2deg)
+        50%
+            transform: translate(-50%, 0) rotate(2deg)
+        100%
+            transform: translate(-50%, 0) rotate(-2deg)
+    @keyframes chuniPenguinArmRight
+        0%
+            transform: translate(-50%, 0) scaleX(-1) rotate(-2deg)
+        50%
+            transform: translate(-50%, 0) scaleX(-1) rotate(2deg)
+        100%
+            transform: translate(-50%, 0) scaleX(-1) rotate(-2deg)
+
+    img
+        -webkit-user-drag: none
+        user-select: none
+
+    .chuni-penguin
+        height: 512px
+        aspect-ratio: 1/2
+        position: relative
+        pointer-events: none
+
+        z-index: 1
+
+        &.chuni-penguin-float
+            position: absolute
+            top: 50%
+            left: 50%
+            transform: translate(-50%, -50%)
+
+        .chuni-penguin-body, .chuni-penguin-feet
+            transform: translate(-50%, -50%)
+            position: absolute
+            left: 50%
+
+        .chuni-penguin-body
+            top: 50%
+            z-index: 1
+            animation: chuniPenguinBodyBob 1s infinite cubic-bezier(0.45, 0, 0.55, 1)
+        .chuni-penguin-feet
+            top: 80%
+            z-index: 0
+            width: 175px
+            display: flex
+            justify-content: center
+
+            img
+                margin-left: auto
+                margin-right: auto
+
+        .chuni-penguin-arm
+            transform-origin: 90% 10%
+            position: absolute
+            top: 40%
+            z-index: 0
+            &.chuni-penguin-arm-type-1
+                width: calc(85px * 0.75)
+                height: calc(160px * 0.75)
+                z-index: 2
+            &.chuni-penguin-arm-type-2
+                transform-origin: 40% 10%
+                z-index: 2
+
+            &.chuni-penguin-arm-left
+                left: 0%
+                transform: translate(-50%, 0)
+                animation: chuniPenguinArmLeft 1s infinite cubic-bezier(0.45, 0, 0.55, 1)
+                &.chuni-penguin-arm-type-2
+                    left: 15%
+            &.chuni-penguin-arm-right
+                left: 72.5%
+                transform: translate(-50%, 0) scaleX(-1)
+                animation: chuniPenguinArmRight 1s infinite cubic-bezier(0.45, 0, 0.55, 1)
+                &.chuni-penguin-arm-type-2
+                    left: 95%
+
+        .chuni-penguin-accessory
+            transform: translate(-50%, -50%)
+            position: absolute
+            top: 50%
+            left: 50%
+
+        .chuni-penguin-item
+            z-index: 1
+            top: 25%
+            left: 0
+
+            &.chuni-penguin-item-left
+                transform: translate(-50%, -50%) rotate(-15deg)
+            &.chuni-penguin-item-right
+                transform: translate(-50%, -50%) scaleX(-1) rotate(15deg)
+
+        .chuni-penguin-eyes
+            top: 22.5%
+        .chuni-penguin-beak
+            top: 29.5%
+        .chuni-penguin-wear
+            top: 60%
+        .chuni-penguin-head
+            top: 7.5%
+            z-index: 10
+        .chuni-penguin-head-2
+            top: 13.5%
+        .chuni-penguin-head-3
+            top: -12.5%
+        .chuni-penguin-face-accessory
+            top: 27.5%
+        .chuni-penguin-back
+            z-index: -1
+
+</style>

AquaNet/src/components/settings/userbox/ChuniUserboxDisplay.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+  import { initializeDb } from "../../../libs/userbox/userbox"
+  import ChuniPenguinComponent from "./ChuniPenguin.svelte"
+  import ChuniUserplateComponent from "./ChuniUserplate.svelte"
+  import { type UserBox } from "../../../libs/generalTypes"
+  import { DATA, USERBOX } from "../../../libs/sdk"
+  import useLocalStorage from "../../../libs/hooks/useLocalStorage.svelte"
+  import { t } from "../../../libs/i18n"
+
+  /**
+   * This is a UserBox viewer on the Profile page (UserHome), added by raymond
+   * to view other user's penguins on their profile.
+   */
+
+  export let game: string
+  export let username: string
+  export let error: string = ""
+
+  let USERBOX_ACTIVE = useLocalStorage("userboxNewProfile", false)
+  let USERBOX_INSTALLED = false
+
+  let userbox: UserBox
+  let allItems: Record<string, Record<string, { name: string }>> = {}
+
+  if (game == "chu3" && USERBOX_ACTIVE.value) {
+    indexedDB.databases().then(async (dbi) => {
+      let databaseExists = dbi.some(db => db.name == "userboxChusanDDS")
+      if (databaseExists) {
+        await initializeDb()
+        const profile = await USERBOX.getUserProfile(username).catch(_ => null)
+        if (!profile) return
+        userbox = profile
+        console.log(userbox)
+
+        allItems = await DATA.allItems('chu3').catch(_ => {
+          error = t("userbox.error.nodata")
+        }) as typeof allItems
+        USERBOX_INSTALLED = databaseExists
+      }
+    })
+  }
+</script>
+
+{#if USERBOX_ACTIVE.value && USERBOX_INSTALLED && game == "chu3"}
+  <div class="chuni-userbox-container">
+    <ChuniUserplateComponent chuniCharacter={userbox.characterId} chuniRating={userbox.playerRating / 100} chuniLevel={userbox.level.toString()}
+      chuniNameplate={userbox.nameplateId} chuniName={userbox.userName} chuniTrophyName={allItems.trophy[userbox.trophyId].name}></ChuniUserplateComponent>
+    <div class="chuni-penguin-container">
+      <ChuniPenguinComponent classPassthrough="chuni-penguin-float" chuniWear={userbox.avatarWear} chuniHead={userbox.avatarHead} chuniBack={userbox.avatarBack}
+      chuniFront={userbox.avatarFront} chuniFace={userbox.avatarFace} chuniItem={userbox.avatarItem}
+      chuniSkin={userbox.avatarSkin}></ChuniPenguinComponent>
+    </div>
+  </div>
+{/if}
+
+<style lang="sass">
+.chuni-userbox-container
+  display: flex
+  align-items: center
+  justify-content: center
+
+  .chuni-penguin-container
+    height: 256px
+    aspect-ratio: 1
+    position: relative
+
+@media (max-width: 1000px)
+  .chuni-userbox-container
+    flex-wrap: wrap
+</style>

AquaNet/src/components/settings/userbox/ChuniUserplate.svelte

@@ -0,0 +1,192 @@
+<script lang="ts">
+    import { DDS, type RGB } from "../../../libs/userbox/dds"
+    import { ddsDB } from "../../../libs/userbox/userbox"
+
+    const DDSreader = new DDS(ddsDB);
+
+    export var chuniLevel: string = "╳"
+    export var chuniName: string = "AquaDX"
+    export var chuniRating: number = 1.23
+    export var chuniNameplate: number = 1
+    export var chuniCharacter: number = 0
+    export var chuniTrophyName: string = "NEWCOMER"
+    export var chuniIsUserbox: boolean = false;
+
+    let ratingToString = (rating: number) => {
+        return rating.toFixed(2)
+    }
+
+    interface RatingRange {
+        min: number,
+        offset: number,
+        color?: RGB
+    };
+    // https://en.wikipedia.org/wiki/Chunithm#Rating
+    const ratingColors: RatingRange[] = ([
+        {min: 0.00, offset: 4, color: {r: 0, g: 191, b: 64}},
+        {min: 4.00, offset: 4, color: {r: 255, g: 111, b: 0}},
+        {min: 7.00, offset: 4, color: {r: 255, g: 64, b: 64}},
+        {min: 10.00, offset: 4, color: {r: 147, g: 38, b: 255}},
+        {min: 12.00, offset: 3},
+        {min: 13.25, offset: 2},
+        {min: 14.50, offset: 1},
+        {min: 15.25, offset: 0},
+        {min: 16.00, offset: 5}
+    ]).filter(f => f.min <= chuniRating);
+    const ratingDigitOrder = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "."]
+    const ratingColorData = (ratingColors[ratingColors.length - 1] ?? ratingColors[0]);
+</script>
+{#await DDSreader?.getFile(`nameplate:${chuniNameplate.toString().padStart(8, "0")}`, `nameplate:00000001`) then nameplateURL}
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div on:click class="chuni-nameplate" class:chuni-nameplate-clickable={chuniIsUserbox} style:background={`url(${nameplateURL})`}>
+        {#await DDSreader?.getFile(`characterThumbnail:${chuniCharacter.toString().padStart(6, "0")}`, `characterThumbnail:000000`) then characterThumbnailURL}
+            <img class="chuni-character" src={characterThumbnailURL} alt="Character">
+        {/await}
+        {#await DDSreader?.getFileFromSheet("surfboard:CHU_UI_title_rank_00_v10.dds", 5, 5 + (75 * 2), 595, 64) then trophyURL}
+            <div class="chuni-trophy" title={chuniTrophyName}>
+                {chuniTrophyName}
+            </div>
+            <img src={trophyURL} class="chuni-trophy-bg" alt="Trophy" title={chuniTrophyName}>
+        {/await}
+        <div class="chuni-user-info">
+            <div class="chuni-user-name">
+                <span>
+                    Lv.
+                    <span class="chuni-user-level">
+                        {chuniLevel}
+                    </span>
+                </span>
+                <span class="chuni-user-name-text">
+                    {chuniName}
+                </span>
+            </div>
+            <div class={`chuni-user-rating color-${ratingColorData.color}`}>
+                
+                {#await DDSreader?.getFileFromSheet("surfboard:CHU_UI_Common_01_v11.dds", 485, 5 + (28 * ratingColorData.offset), 62, 15, undefined, ratingColorData.color) then url}
+                    {#if url}
+                        <img src={url} alt="Rating">
+                        <span class="chuni-user-rating-number">
+                            {#each ratingToString(chuniRating).split("") as digit}
+                                {#await DDSreader?.getFileFromSheet("surfboard:CHU_UI_Common_01_v11.dds", 552 + (24 * (ratingDigitOrder.indexOf(digit) ?? 0)), 1 + (28 * ratingColorData.offset), 16, 20, undefined, ratingColorData.color) then url}
+                                    <img src={url} alt="Rating Digit">
+                                {/await}
+                            {/each}
+                        </span>
+                    {:else}
+                        RATING
+                        <span class="chuni-user-rating-number">
+                            {ratingToString(chuniRating)}
+                        </span>
+                    {/if}
+                {/await}
+            </div>
+        </div>
+    </div>
+{/await}
+<style lang="sass">
+@use "../../../vars"
+
+@font-face
+    font-family: "Gothic A1"
+    src: url("/assets/fonts/GothicA1.woff2")
+
+.chuni-nameplate
+    width: 576px
+    height: 228px
+    position: relative
+    font-size: 16px
+    /* Overlap penguin avatar when put side to side */
+    z-index: 1 
+    
+    &.chuni-nameplate-clickable
+        cursor: pointer
+
+    .chuni-trophy
+        width: 390px
+        height: 45px
+        background-position: center
+        background-size: cover
+        color: black
+
+        display: flex
+        justify-content: center
+        align-items: center
+        position: absolute
+        right: 25px
+        top: 40px
+
+        font-size: 1.15em
+        font-family: "Gothic A1", sans-serif
+        font-weight: bold
+
+        overflow-x: hidden
+        white-space: nowrap
+        text-overflow: ellipsis
+
+        z-index: 1
+        text-shadow: 0 1px white
+        margin: 0 10px
+
+    img.chuni-trophy-bg
+        width: 410px
+        height: 45px
+        position: absolute
+        top: 40px
+        right: 25px
+        z-index: -1
+
+    .chuni-character
+        position: absolute
+        top: 87px
+        right: 25px
+        width: 82px
+        aspect-ratio: 1
+        box-shadow: 0 0 1px 1px white
+        background: #efefef
+
+    .chuni-user-info
+        height: 82px
+        width: 320px
+        position: absolute
+        top: 87px
+        right: 110px
+        background: #fff9
+        border-radius: 1px
+        box-shadow: 0 0 1px 1px #ccc
+        display: flex
+        flex-direction: column
+        
+        .chuni-user-name, .chuni-user-rating
+            margin: 0 4px
+            display: flex
+            align-items: center
+            color: black
+            font-family: "Gothic A1", sans-serif
+            font-weight: bold
+
+        .chuni-user-name
+            flex: 1 0 65%
+            box-shadow: 0 1px 0 #ccc
+            white-space: nowrap
+            text-overflow: ellipsis
+
+            .chuni-user-level
+                font-size: 1.5em
+                margin-left: 10px
+
+            .chuni-user-name-text
+                margin-left: auto
+                font-size: 2em
+
+        .chuni-user-rating
+            flex: 1 0 35%
+            font-size: 0.875em
+            text-shadow: #333 1px 1px, #333 1px -1px, #333 -1px 1px, #333 -1px -1px
+            color: #fff
+
+            .chuni-user-rating-number
+                font-size: 1.5em
+                margin-left: 10px
+
+</style>

AquaNet/src/components/ui/Error.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import { fade } from "svelte/transition";
+  import { t } from "../../libs/i18n";
+  import { DISCORD_INVITE } from "../../libs/config";
+
+  export let error: string;
+</script>
+
+<div class="overlay" transition:fade>
+  <div>
+    <h2 class="error">{t('status.error')}</h2>
+    <span class="detail">{error}</span>
+    <a class="hint" href="/support">{t("status.error.hint")}</a>
+    <div class="actions">
+      <button on:click={() => location.reload()} class="error">
+        {t('action.refresh')}
+      </button>
+      <button on:click={() => location.href = "/home"} class="error">
+        {t('action.home')}
+      </button>
+    </div>
+  </div>
+</div>
+
+<style lang="sass">
+  .actions
+    display: flex
+    gap: 0.5em
+
+    button
+      width: 100%
+
+  .detail
+    white-space: pre-line
+    line-height: 1.2
+
+  .hint
+    font-size: 0.875em
+
+  .overlay > div
+    min-width: 15rem
+    max-width: 25rem
+</style>

AquaNet/src/components/ui/InputField.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import { slide } from "svelte/transition";
+  import { ts } from "../../libs/i18n";
+  import InputWithButton from "./InputWithButton.svelte";
+
+  export let field: {key: string, value: any, type: string, changed?: boolean};
+  export let callback: () => Promise<boolean>;
+</script>
+
+<div class="field {field.type.toLowerCase()}">
+  {#if field.type.toLowerCase() === "boolean"}
+    <input id={field.key} type="checkbox" bind:checked={field.value} on:change={callback}/>
+    <label for={field.key}>
+      <span class="name">{ts(`settings.fields.${field.key}.name`)}</span>
+      <span class="desc">{ts(`settings.fields.${field.key}.desc`)}</span>
+    </label>
+  {/if}
+  {#if field.type.toLowerCase() === "string"}
+    <label for={field.key}>
+      <span class="name">{ts(`settings.fields.${field.key}.name`)}</span>
+      <span class="desc">{ts(`settings.fields.${field.key}.desc`)}</span>
+    </label>
+    <InputWithButton bind:field={field} callback={callback}/>
+  {/if}
+</div>
+
+<style lang="sass">
+  .field.string
+    flex-direction: column
+    align-items: flex-start
+    gap: 0.5rem
+
+  .field.boolean
+    align-items: center
+    gap: 1rem
+
+  .field
+    display: flex
+
+    label
+      display: flex
+      flex-direction: column
+      max-width: max-content
+
+      .desc
+        opacity: 0.6
+</style>

AquaNet/src/components/ui/InputWithButton.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { slide } from "svelte/transition";
+  import { ts } from "../../libs/i18n";
+
+  export let field: {key: string, value: string, changed?: boolean};
+  export let callback: () => Promise<boolean>;
+</script>
+
+<div class="field">
+  <input id={field.key} type="text" bind:value={field.value}
+  on:input={() => field.changed = true}/>
+  {#if field.changed}
+    <button on:click={async () => { if (await callback()) field.changed = false } }
+      transition:slide={{axis: 'x'}}>
+      {ts('settings.profile.save')}
+    </button>
+  {/if}
+</div>
+
+<style lang="sass">
+  .field
+    display: flex
+    align-items: center
+    gap: 1rem
+    width: 100%
+
+    input
+      flex: 1
+</style>

AquaNet/src/components/ui/Loading.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import Icon from '@iconify/svelte';
+  import { fade } from 'svelte/transition'
+</script>
+
+<div class="overlay loading" transition:fade>
+  <Icon class="icon" icon="svg-spinners:pulse-2"/>
+  <span><span>LOADING</span></span>
+</div>
+
+<style lang="sass">
+.loading.overlay
+  font-size: 28rem
+
+  :global(.icon)
+    opacity: 0.5
+
+  > span
+    position: absolute
+    inset: 0
+    display: flex
+    justify-content: center
+    align-items: center
+    background: transparent
+
+    letter-spacing: 20px
+    margin-left: 20px
+
+    font-size: 1.5rem
+</style>

AquaNet/src/libs/acUrl.ts

@@ -0,0 +1,35 @@
+// card handler. for dealing user QR scan.
+// this will assumes that the link of the generated QR code in [access code]
+// page has been altered by modder to link to custom 
+
+import { ACCESSCODE_QKEY } from "./config";
+
+const query = new URLSearchParams(location.hash.slice(1));
+const lsKey = "acurl"
+
+export const url_has = (): boolean => query.has(ACCESSCODE_QKEY);
+export const get = (): string => localStorage.getItem(lsKey) || "";
+export const has = (): boolean => !!localStorage.getItem(lsKey);
+export const clear = (): void => localStorage.removeItem(lsKey);
+
+export function check() {
+    if (!url_has()) return
+
+    console.log("Found access code in URL. Saving.")
+    localStorage.setItem(lsKey, query.get(ACCESSCODE_QKEY) || "")
+}
+
+export function preview() {
+  const card = get()
+  const masked =
+    card.slice(0, 4) +
+    "x".repeat(card.length - 4);
+
+  return masked.match(/.{1,4}/g)?.join(" ");
+}
+
+export function previewR() {
+  const card = get()
+
+  return card.match(/.{1,4}/g)?.join(" ");
+}

AquaNet/src/libs/announcement.ts

@@ -0,0 +1,11 @@
+import { writable } from "svelte/store"
+
+export const ANNOUNCEMENT = writable('')
+
+// This task must not bother the existing one. Keep it async in the background instead
+void (async () => {
+  let r = await fetch("/announcement.txt")
+  if (!r.ok) return;
+
+  ANNOUNCEMENT.set(await r.text())
+})()

AquaNet/src/libs/config.ts

@@ -0,0 +1,49 @@
+import type { ChusanMatchingOption } from "./generalTypes"
+
+export const AQUA_HOST = import.meta.env.VITE_AQUA_HOST
+export const DATA_HOST = import.meta.env.VITE_DATA_HOST
+
+// This will be displayed for users to connect from the client
+export const AQUA_CONNECTION = import.meta.env.VITE_AQUA_CONNECTION
+
+export const TURNSTILE_SITE_KEY = import.meta.env.VITE_TURNSTILE_SITE_KEY
+export const DISCORD_INVITE = import.meta.env.VITE_DISCORD_INVITE
+export const TELEGRAM_INVITE = import.meta.env.VITE_TELEGRAM_INVITE
+export const QQ_INVITE = import.meta.env.VITE_QQ_INVITE
+export const GITHUB_REPOSITORY = import.meta.env.VITE_GITHUB_REPOSITORY
+
+// UI
+export const FADE_OUT = { duration: 200 }
+export const FADE_IN = { delay: 400 }
+export const DEFAULT_PFP = '/assets/imgs/no_profile.png'
+
+// Key name for access key scanned from QR code
+export const ACCESSCODE_QKEY = import.meta.env.VITE_ACCESSCODE_QKEY || "accesskey"
+
+export const USERBOX_DEFAULT_URL = import.meta.env.VITE_USERBOX_DEFAULT_URL || ""
+
+export const HAS_USERBOX_ASSETS = true
+
+export const DEFAULT_GAME = import.meta.env.VITE_DEFAULT_GAME || "mai2"
+
+// Meow meow meow
+
+// Matching servers
+export const CHU3_MATCHINGS: ChusanMatchingOption[] = [
+  {
+    name: "Yukiotoko",
+    ui: "https://yukiotoko.metatable.sh/",
+    guide: "https://github.com/MewoLab/AquaDX/blob/v1-dev/docs/chu3-national-matching.md",
+    matching: "http://yukiotoko.chara.lol:9004/",
+    reflector: "http://yukiotoko.chara.lol:50201/",
+    coop: ["Missless", "CozyNet", "GMG"]
+  },
+  {
+    name: "林国对战",
+    ui: "https://chu3-match.sega.ink/rooms",
+    guide: "https://performai.evilleaker.com/manual/games/chunithm/national_battle/",
+    matching: "https://chu3-match.sega.ink/",
+    reflector: "http://reflector.naominet.live:18080/",
+    coop: ["RinNET", "MysteriaNET"],
+  },
+]

AquaNet/src/libs/generalTypes.ts

@@ -0,0 +1,176 @@
+export type Dict = Record<string, any>
+
+export interface TrendEntry {
+  date: string
+  rating: number
+  plays: number
+}
+
+export interface Card {
+  luid: string
+  registerTime: string
+  accessTime: string
+  linked: boolean
+  isGhost: boolean
+}
+
+export interface AquaNetUser {
+  username: string
+  email: string
+  displayName: string
+  country: string
+  region:string
+  lastLogin: number
+  regTime: number
+  profileLocation: string
+  profileBio: string
+  profilePicture: string
+  emailConfirmed: boolean
+  ghostCard: Card
+  cards: Card[]
+  computedName: string,
+  password: string,
+  optOutOfLeaderboard: boolean,
+  canModifyKeychips: boolean,
+  hideCountry: boolean,
+  displayCandidates: boolean
+}
+
+export interface CardSummaryGame {
+  name: string
+  rating: number
+  lastLogin: string
+}
+
+export interface CardSummary {
+  mai2: CardSummaryGame | null
+  chu3: CardSummaryGame | null
+  ongeki: CardSummaryGame | null
+  diva: CardSummaryGame | null
+  wacca: CardSummaryGame | null
+}
+
+
+export interface ConfirmProps {
+  title: string
+  message: string
+  confirm?: () => void
+  cancel?: () => void
+  dangerous?: boolean
+}
+
+export interface GenericGamePlaylog {
+  musicId: number
+  level: number
+  playDate: string
+  achievement: number
+  maxCombo: number
+  totalCombo: number
+  afterRating: number
+  beforeRating: number
+  isFullCombo?: boolean
+  isAllPerfect?: boolean
+  isAllJustice?: boolean
+}
+
+export interface GenericRanking {
+  name: string
+  username: string
+  rank: number
+  accuracy: number
+  rating: number
+  fullCombo: number
+  allPerfect: number
+  lastSeen: string
+}
+
+export interface RankCount {
+  name: string
+  count: number
+}
+
+export interface GenericGameSummary {
+  name: string
+  iconId: number
+  aquaUser?: AquaNetUser
+  serverRank: string
+  accuracy: number
+  rating: number
+  ratingHighest: number,
+  ratingNotGeneric: boolean,
+  ranks: RankCount[]
+  detailedRanks: { [key: number]: { [key: string]: number } }
+  maxCombo: number
+  fullCombo: number
+  allPerfect: number
+  totalScore: number
+  plays: number
+  totalPlayTime: number
+  joined: string
+  lastSeen: string
+  lastVersion: string
+  ratingComposition: { [key: string]: any }
+  recent: GenericGamePlaylog[]
+  rival?: boolean,
+  favorites?: number[]
+}
+
+export interface MusicMeta {
+  name: string,
+  composer: string,
+  bpm: number,
+  ver: number,
+  notes: {
+    lv: number
+    designer: string
+    lv_id: number
+    notes: number
+  }[],
+  worldsEndTag?: string
+  worldsEndStars?: number
+}
+
+export type AllMusic = { [key: string]: MusicMeta }
+
+export interface GameOption {
+  key: string
+  value: any
+  type: 'Boolean' | 'String'
+  game: string
+
+  changed?: boolean
+}
+
+export type GameUserOption = Record<string, number>
+
+export interface UserItem { itemKind: number, itemId: number, stock: number }
+export interface UserBox {
+  userName: string,
+  nameplateId: number,
+  frameId: number,
+  characterId: number,
+  trophyId: number,
+  trophyIdSub1: number,
+  trophyIdSub2: number,
+  mapIconId: number,
+  voiceId: number,
+  avatarWear: number,
+  avatarHead: number,
+  avatarFace: number,
+  avatarSkin: number,
+  avatarItem: number,
+  avatarFront: number,
+  avatarBack: number,
+
+  level: number
+  playerRating: number
+}
+
+export interface ChusanMatchingOption {
+  name: string
+  ui: string
+  guide: string
+  matching: string
+  reflector: string
+  coop: string[]
+}

AquaNet/src/libs/hooks/useLocalStorage.svelte.ts

@@ -0,0 +1,24 @@
+import { onMount } from 'svelte';
+
+const useLocalStorage = <T>(key: string, initialValue: T) => {
+  let value = initialValue;
+
+  const currentValue = localStorage.getItem(key);
+  if (currentValue) value = JSON.parse(currentValue);
+
+  const save = () => {
+    localStorage.setItem(key, JSON.stringify(value));
+  };
+
+  return {
+    get value() {
+      return value;
+    },
+    set value(v: T) {
+      value = v;
+      save();
+    },
+  };
+};
+
+export default useLocalStorage;

AquaNet/src/libs/i18n.ts

@@ -0,0 +1,93 @@
+import { EN_REF, type LocalizedMessages } from "./i18n/en_ref";
+import { ZH } from "./i18n/zh";
+import type { GameName } from "./scoring";
+
+import zhCountires from "./i18n/zh_countries.json"
+import enCountires from "./i18n/en_countries.json"
+
+type Lang = 'en' | 'zh'
+
+const msgs: Record<Lang, LocalizedMessages> = {
+  en: EN_REF,
+  zh: ZH
+}
+
+const countries: Record<Lang, typeof enCountires> = {
+  en: enCountires,
+  zh: zhCountires
+}
+
+let lang: Lang = 'en'
+
+// Infer language from browser
+if (navigator.language.startsWith('zh')) {
+  lang = 'zh'
+}
+
+export function ts(key: string, variables?: { [index: string]: any }) {
+  return t(key as keyof LocalizedMessages, variables)
+}
+
+/**
+ * Load the translation for the given key
+ *
+ * TODO: Check for translation completion on build
+ *
+ * @param key
+ * @param variables
+ */
+export function t(key: keyof LocalizedMessages, variables?: { [index: string]: any }): string {
+  // Check if the key exists
+  let msg = msgs[lang][key]
+  if (!msg) {
+    // Check if the key exists in English
+    if (!(msg = msgs.en[key])) {
+      msg = key
+      console.error(`ERROR!! Missing translation reference entry (English) for ${key}`)
+    }
+    else console.warn(`Missing translation for ${key} in ${lang}`)
+  }
+  // Replace variables
+  if (variables) {
+    return msg.replace(/\${(.*?)}/g, (_: string, v: string | number) => variables[v] + "")
+  }
+  return msg
+}
+Object.assign(window, { t })
+
+export function getCountryName(code: keyof typeof enCountires) {
+  return countries[lang][code]
+}
+
+export const GAME_TITLE: { [key in GameName]: string } =
+  {chu3: t("game.chu3"), mai2: t("game.mai2"), ongeki: t("game.ongeki"), wacca: t("game.wacca")}
+
+/**
+ * Converts a two-letter country code to its corresponding flag emoji.
+ *
+ * The Unicode flag emoji is represented by two Regional Indicator Symbols.
+ * Each letter in the country code is transformed into a Regional Indicator Symbol
+ * by adding its alphabetical position (A = 0, B = 1, etc.) to the base code point U+1F1E6.
+ *
+ * @param countryCode - A two-letter ISO country code (e.g., "US", "GB").
+ * @returns The corresponding flag emoji if the country code is valid; otherwise, an empty string.
+ */
+export function countryCodeToEmoji(countryCode: string): string {
+  if (!countryCode) return ""
+  if (countryCode.length !== 2) return ""
+
+  // Convert the country code to uppercase to standardize it
+  const code = countryCode.toUpperCase();
+
+  // The base code point for Regional Indicator Symbol Letter A is 0x1F1E6.
+  const OFFSET = 0x1F1E6;
+  const firstCharCode = code.charCodeAt(0);
+  const secondCharCode = code.charCodeAt(1);
+
+  // 'A' has a char code of 65.
+  const firstIndicator = OFFSET + (firstCharCode - 65);
+  const secondIndicator = OFFSET + (secondCharCode - 65);
+
+  // Create and return the flag emoji string
+  return String.fromCodePoint(firstIndicator, secondIndicator);
+}

AquaNet/src/libs/i18n/en_countries.json

@@ -0,0 +1,248 @@
+{
+  "AF": "Afghanistan",
+  "AX": "Aland Islands",
+  "AL": "Albania",
+  "DZ": "Algeria",
+  "AS": "American Samoa",
+  "AD": "Andorra",
+  "AO": "Angola",
+  "AI": "Anguilla",
+  "AQ": "Antarctica",
+  "AG": "Antigua And Barbuda",
+  "AR": "Argentina",
+  "AM": "Armenia",
+  "AW": "Aruba",
+  "AU": "Australia",
+  "AT": "Austria",
+  "AZ": "Azerbaijan",
+  "BS": "Bahamas",
+  "BH": "Bahrain",
+  "BD": "Bangladesh",
+  "BB": "Barbados",
+  "BY": "Belarus",
+  "BE": "Belgium",
+  "BZ": "Belize",
+  "BJ": "Benin",
+  "BM": "Bermuda",
+  "BT": "Bhutan",
+  "BO": "Bolivia",
+  "BA": "Bosnia And Herzegovina",
+  "BW": "Botswana",
+  "BV": "Bouvet Island",
+  "BR": "Brazil",
+  "IO": "British Indian Ocean Territory",
+  "BN": "Brunei Darussalam",
+  "BG": "Bulgaria",
+  "BF": "Burkina Faso",
+  "BI": "Burundi",
+  "KH": "Cambodia",
+  "CM": "Cameroon",
+  "CA": "Canada",
+  "CV": "Cape Verde",
+  "KY": "Cayman Islands",
+  "CF": "Central African Republic",
+  "TD": "Chad",
+  "CL": "Chile",
+  "CN": "China",
+  "CX": "Christmas Island",
+  "CC": "Cocos (Keeling) Islands",
+  "CO": "Colombia",
+  "KM": "Comoros",
+  "CG": "Congo",
+  "CD": "Congo, Democratic Republic",
+  "CK": "Cook Islands",
+  "CR": "Costa Rica",
+  "CI": "Cote D\"Ivoire",
+  "HR": "Croatia",
+  "CU": "Cuba",
+  "CY": "Cyprus",
+  "CZ": "Czech Republic",
+  "DK": "Denmark",
+  "DJ": "Djibouti",
+  "DM": "Dominica",
+  "DO": "Dominican Republic",
+  "EC": "Ecuador",
+  "EG": "Egypt",
+  "SV": "El Salvador",
+  "GQ": "Equatorial Guinea",
+  "ER": "Eritrea",
+  "EE": "Estonia",
+  "ET": "Ethiopia",
+  "FK": "Falkland Islands (Malvinas)",
+  "FO": "Faroe Islands",
+  "FJ": "Fiji",
+  "FI": "Finland",
+  "FR": "France",
+  "GF": "French Guiana",
+  "PF": "French Polynesia",
+  "TF": "French Southern Territories",
+  "GA": "Gabon",
+  "GM": "Gambia",
+  "GE": "Georgia",
+  "DE": "Germany",
+  "GH": "Ghana",
+  "GI": "Gibraltar",
+  "GR": "Greece",
+  "GL": "Greenland",
+  "GD": "Grenada",
+  "GP": "Guadeloupe",
+  "GU": "Guam",
+  "GT": "Guatemala",
+  "GG": "Guernsey",
+  "GN": "Guinea",
+  "GW": "Guinea-Bissau",
+  "GY": "Guyana",
+  "HT": "Haiti",
+  "HM": "Heard Island & Mcdonald Islands",
+  "VA": "Holy See (Vatican City State)",
+  "HN": "Honduras",
+  "HK": "Hong Kong",
+  "HU": "Hungary",
+  "IS": "Iceland",
+  "IN": "India",
+  "ID": "Indonesia",
+  "IR": "Iran, Islamic Republic Of",
+  "IQ": "Iraq",
+  "IE": "Ireland",
+  "IM": "Isle Of Man",
+  "IL": "Israel",
+  "IT": "Italy",
+  "JM": "Jamaica",
+  "JP": "Japan",
+  "JE": "Jersey",
+  "JO": "Jordan",
+  "KZ": "Kazakhstan",
+  "KE": "Kenya",
+  "KI": "Kiribati",
+  "KR": "Korea",
+  "KP": "North Korea",
+  "KW": "Kuwait",
+  "KG": "Kyrgyzstan",
+  "LA": "Lao People\"s Democratic Republic",
+  "LV": "Latvia",
+  "LB": "Lebanon",
+  "LS": "Lesotho",
+  "LR": "Liberia",
+  "LY": "Libyan Arab Jamahiriya",
+  "LI": "Liechtenstein",
+  "LT": "Lithuania",
+  "LU": "Luxembourg",
+  "MO": "Macao",
+  "MK": "Macedonia",
+  "MG": "Madagascar",
+  "MW": "Malawi",
+  "MY": "Malaysia",
+  "MV": "Maldives",
+  "ML": "Mali",
+  "MT": "Malta",
+  "MH": "Marshall Islands",
+  "MQ": "Martinique",
+  "MR": "Mauritania",
+  "MU": "Mauritius",
+  "YT": "Mayotte",
+  "MX": "Mexico",
+  "FM": "Micronesia, Federated States Of",
+  "MD": "Moldova",
+  "MC": "Monaco",
+  "MN": "Mongolia",
+  "ME": "Montenegro",
+  "MS": "Montserrat",
+  "MA": "Morocco",
+  "MZ": "Mozambique",
+  "MM": "Myanmar",
+  "NA": "Namibia",
+  "NR": "Nauru",
+  "NP": "Nepal",
+  "NL": "Netherlands",
+  "AN": "Netherlands Antilles",
+  "NC": "New Caledonia",
+  "NZ": "New Zealand",
+  "NI": "Nicaragua",
+  "NE": "Niger",
+  "NG": "Nigeria",
+  "NU": "Niue",
+  "NF": "Norfolk Island",
+  "MP": "Northern Mariana Islands",
+  "NO": "Norway",
+  "OM": "Oman",
+  "PK": "Pakistan",
+  "PW": "Palau",
+  "PS": "Palestinian Territory, Occupied",
+  "PA": "Panama",
+  "PG": "Papua New Guinea",
+  "PY": "Paraguay",
+  "PE": "Peru",
+  "PH": "Philippines",
+  "PN": "Pitcairn",
+  "PL": "Poland",
+  "PT": "Portugal",
+  "PR": "Puerto Rico",
+  "QA": "Qatar",
+  "RE": "Reunion",
+  "RO": "Romania",
+  "RU": "Russian Federation",
+  "RW": "Rwanda",
+  "BL": "Saint Barthelemy",
+  "SH": "Saint Helena",
+  "KN": "Saint Kitts And Nevis",
+  "LC": "Saint Lucia",
+  "MF": "Saint Martin",
+  "PM": "Saint Pierre And Miquelon",
+  "VC": "Saint Vincent And Grenadines",
+  "WS": "Samoa",
+  "SM": "San Marino",
+  "ST": "Sao Tome And Principe",
+  "SA": "Saudi Arabia",
+  "SN": "Senegal",
+  "RS": "Serbia",
+  "SC": "Seychelles",
+  "SL": "Sierra Leone",
+  "SG": "Singapore",
+  "SK": "Slovakia",
+  "SI": "Slovenia",
+  "SB": "Solomon Islands",
+  "SO": "Somalia",
+  "ZA": "South Africa",
+  "GS": "South Georgia And Sandwich Isl.",
+  "ES": "Spain",
+  "LK": "Sri Lanka",
+  "SD": "Sudan",
+  "SR": "Suriname",
+  "SJ": "Svalbard And Jan Mayen",
+  "SZ": "Swaziland",
+  "SE": "Sweden",
+  "CH": "Switzerland",
+  "SY": "Syrian Arab Republic",
+  "TW": "Taiwan",
+  "TJ": "Tajikistan",
+  "TZ": "Tanzania",
+  "TH": "Thailand",
+  "TL": "Timor-Leste",
+  "TG": "Togo",
+  "TK": "Tokelau",
+  "TO": "Tonga",
+  "TT": "Trinidad And Tobago",
+  "TN": "Tunisia",
+  "TR": "Turkey",
+  "TM": "Turkmenistan",
+  "TC": "Turks And Caicos Islands",
+  "TV": "Tuvalu",
+  "UG": "Uganda",
+  "UA": "Ukraine",
+  "AE": "United Arab Emirates",
+  "GB": "United Kingdom",
+  "US": "United States",
+  "UM": "United States Outlying Islands",
+  "UY": "Uruguay",
+  "UZ": "Uzbekistan",
+  "VU": "Vanuatu",
+  "VE": "Venezuela",
+  "VN": "Vietnam",
+  "VG": "Virgin Islands, British",
+  "VI": "Virgin Islands, U.S.",
+  "WF": "Wallis And Futuna",
+  "EH": "Western Sahara",
+  "YE": "Yemen",
+  "ZM": "Zambia",
+  "ZW": "Zimbabwe"
+}

AquaNet/src/libs/i18n/en_ref.ts

@@ -0,0 +1,398 @@
+export const EN_REF_USER = {
+  'UserHome.ServerRank': 'Server Rank',
+  'UserHome.DXRating': 'DX Rating',
+  'UserHome.Rating': 'Rating',
+  'UserHome.HighestDXRating': 'Peak DX Rating',
+  'UserHome.HighestRating': 'Peak Rating',
+  'UserHome.Statistics': 'Statistics',
+  'UserHome.Accuracy': 'Accuracy',
+  'UserHome.MaxCombo': 'Max Combo',
+  'UserHome.FullCombo': 'Full Combo',
+  'UserHome.AllPerfect': 'All Perfect',
+  'UserHome.DXScore': 'DX Score',
+  'UserHome.Score': 'Score',
+  'UserHome.PlayActivity': ' Play Activity',
+  'UserHome.Plays': 'Plays',
+  'UserHome.PlayTime': 'Play Time',
+  'UserHome.FirstSeen': 'First Seen',
+  'UserHome.LastSeen': 'Last Seen',
+  'UserHome.Version': 'Last Version',
+  'UserHome.RecentScores': 'Recent Scores',
+  'UserHome.NoData': 'No data in the past ${days} days',
+  'UserHome.UnknownSong': '(unknown song)',
+  'UserHome.Settings': 'Settings',
+  'UserHome.NoValidGame': 'The user hasn\'t played any game yet.',
+  'UserHome.ShowRanksDetails': 'Click to show details',
+  'UserHome.RankDetail.Title': 'Achievement Details',
+  'UserHome.RankDetail.Level': 'Level',
+  'UserHome.B50': 'B50',
+  'UserHome.RatingComposition.Best': 'Best ${n}',
+  'UserHome.RatingComposition.New': 'New ${n}',
+  'UserHome.RatingComposition.BestCandidates': 'Best ${n} Candidates',
+  'UserHome.RatingComposition.NewCandidates': 'New ${n} Candidates',
+  'UserHome.RatingComposition.Platinum': 'Platinum ${n}',
+  'UserHome.RatingComposition.PlatinumCandidates': 'Platinum ${n} Candidates',
+  'UserHome.RatingComposition.Recent': 'Recent ${n}',
+  'UserHome.AddRival': "Add to Rival",
+  'UserHome.RemoveRival': "Remove from Rival",
+  'UserHome.InvalidGame': "Game ${game} is not supported on the web UI yet. We only support maimai, chunithm, wacca, and ongeki for now.",
+  'UserHome.ShowMoreRecent': 'Show more',
+  'UserHome.FavoriteSongs': 'Favorite Songs'
+}
+
+export const EN_REF_Welcome = {
+  'back': 'Back',
+  'email': 'Email',
+  'password': 'Password',
+  'new-password': 'New password',
+  'username': 'Username',
+  'welcome.btn-login': 'Log in',
+  'welcome.btn-signup': 'Sign up',
+  'welcome.btn-reset-password': 'Forgot password?',
+  'welcome.btn-submit-reset-password': 'Send reset link',
+  'welcome.btn-submit-new-password': 'Change password',
+  'welcome.email-missing': 'Email is required',
+  'welcome.password-missing': 'Password is required',
+  'welcome.username-missing': 'Username/email is required',
+  'welcome.email-password-missing': 'Email and password are required',
+  'welcome.waiting-turnstile': 'Waiting for Turnstile to verify your network environment...',
+  'welcome.turnstile-error': 'Error verifying your network environment. Please turn off your VPN and try again.',
+  'welcome.turnstile-timeout': 'Network verification timed out. Please try again.',
+  'welcome.verification-sent': 'A verification email has been sent to ${email}. Please check your inbox!',
+  'welcome.reset-password-sent': 'A password reset email has been sent to ${email}. Please check your inbox!',
+  'welcome.verify-state-0': 'You haven\'t verified your email. A verification email has been sent to your inbox just now. Please check your inbox!',
+  'welcome.verify-state-1': 'You haven\'t verified your email. You have requested too many emails, please try again later.',
+  'welcome.verify-state-2': 'You haven\'t verified your email. We just sent you another verification email. Please check your inbox!',
+  'welcome.reset-state-0': 'A reset email has been sent to your inbox just now. Please check your inbox!',
+  'welcome.reset-state-1': 'Too many emails have been sent. Another will not be sent.',
+  'welcome.verifying': 'Verifying your email... please wait.',
+  'welcome.verified': 'Your email has been verified! You can now log in now.',
+  'welcome.verification-failed': 'Verification failed: ${message}. Please try again.',
+  'welcome.password-reset-done': 'Your password has been updated! Please log back in.',
+  'welcome.login_link': 'Login / register to link your card.'
+}
+
+export const EN_REF_LEADERBOARD = {
+  'Leaderboard.Title': 'Server Leaderboard',
+  'Leaderboard.Rank': 'Rank',
+  'Leaderboard.Rating': 'Rating',
+  'Leaderboard.LegacyRating': 'Legacy Rating',
+  'Leaderboard.ModernRating': 'Modern Rating',
+  'Leaderboard.Accuracy': 'Accuracy',
+  'Leaderboard.FC': 'FC',
+  'Leaderboard.AP': 'AP',
+  'Leaderboard.Loading': "Loading..."
+}
+
+export const EN_REF_GENERAL = {
+  'game.mai2': 'Mai',
+  'game.chu3': 'Chuni',
+  'game.ongeki': 'Ongeki',
+  'game.wacca': 'Wacca',
+  'status.error': 'Error',
+  'status.error.hint': 'Support',
+  'status.detail': 'Detail: ${detail}',
+  'action.refresh': 'Retry',
+  'action.cancel': 'Cancel',
+  'action.confirm': 'Confirm',
+  'action.home': 'Home',
+  'navigation.profile': 'Profile',
+  'navigation.maps': 'Maps',
+  'navigation.home': 'Home',
+  'navigation.rankings': 'Rankings',
+  'navigation.notice': 'Notice',
+  'loading': `Please wait...`,
+  '404': 'Page not found (${pathname}). If this is in error, please report it via an appropriate support channel.'
+}
+
+export const EN_REF_HOME = {
+  'home.nav.portal': 'Portal',
+  'home.nav.link-card': 'Link Card',
+  'home.nav.game-setup': 'Game Setup',
+  'home.nav.support': 'Support',
+  'home.user-profile': 'Profile',
+  'home.rankings': 'Rankings',
+  'home.settings': 'Settings',
+  'home.manage-cards': 'Manage Cards',
+  'home.manage-cards-description': 'Link, unlink, and manage your cards.',
+  'home.link-card': 'Link Card',
+  'home.link-cards-description': 'Link your Amusement IC / Aime card to play games.',
+  'home.join-community': 'Community & Support',
+  'home.join-community-description': 'Join our community for support and chatting with other players.',
+  'home.setup': 'Setup Network Connection',
+  'home.setup-description': 'Configure a game to connect to our servers.',
+  'home.import': 'Import Player Data',
+  'home.import-description': 'Add player data from a separate instance.',
+  'home.linkcard.cards': 'Your Cards',
+  'home.linkcard.description': 'Access cards that are currently linked',
+  'home.linkcard.account-card': 'Account Card',
+  'home.linkcard.registered': 'Registered',
+  'home.linkcard.lastused': 'Last used',
+  'home.linkcard.enter-info': 'Please enter either an Access Code or a Serial Number in the following boxes. Dragging and dropping aime.txt or felica.txt is also supported.',
+  'home.linkcard.access-code': 'If you have an Access Code, enter it below. Access Codes can be obtained from the back of your card or from the title screen of your game (press the Access Code button and card in). If you do not have an Access Code, you may generate one.',
+  'home.linkcard.enter-sn': 'If you have a Serial Number, enter it below. Serial Numbers can be obtained via most smartphones (NFC Tools: <a href="https://play.google.com/store/apps/details?id=com.wakdev.wdnfc">Android</a> / <a href="https://apps.apple.com/us/app/nfc-tools/id1252962749">Apple</a>) or a card reader.',
+  'home.linkcard.kdx-notice': 'If you are playing KanadeDX, please enter the virtual card number here (can be found in Settings > Card Number).',
+  'home.linkcard.link': 'Link',
+  'home.linkcard.data-conflict': 'Data Conflict',
+  'home.linkcard.name': 'Name',
+  'home.linkcard.rating': 'Rating',
+  'home.linkcard.last-login': 'Last Login',
+  'home.linkcard.linked-own': 'This card is already linked to your account',
+  'home.linkcard.linked-another': 'This card is already linked to another account',
+  'home.linkcard.notfound': 'Card not found',
+  'home.linkcard.unlink': 'Unlink Card',
+  'home.linkcard.unlink-notice': 'Are you sure you want to unlink this card?',
+  'home.linkcard.felica-ac-warning': 'This Access Code is of a FeliCa AIC card.\nIf you are logging in with a physical card (not aime.txt emulation), unlike the official server, you need to bind the FeliCa SN of the card (or the 00-prefixed card number shown in the game) instead of this code.\nIf you are logging in with aime.txt emulation, please ignore this warning and proceed.',
+  'home.linkcard.card-security-warning': 'Access Cards give full access to your games\' player data. Do not share your card information with anyone.',
+  'home.community.discord': 'Discord',
+  'home.community.telegram': 'Telegram (Chinese)',
+  'home.community.qq': 'QQ (Chinese)',
+  'home.community.github': 'GitHub Repository',
+  'home.import.unknown-game': 'Unknown game type. Currently only Mai and Chuni are supported for importing.',
+  'home.import.new-data': 'Data to import',
+  'home.import.data-conflict': 'Proceed will override your current data',
+}
+
+export const EN_REF_SETUP = {
+  'setup.welcome': `Welcome! If you have a game set up, please follow the instructions below to set up the connection with AquaDX.`,
+  'setup.keychip-warning': `Your keychip(s) are linked to your account and should be kept secure.`,
+  'setup.steps.one': `Pick a method of setting up network communications. Some browsers may not be able to do automatic setup.`,
+  'setup.steps.two': `Link your Aime card to your AquaDX account using the <a href="/cards">Cards</a> page via it's access code or serial number.`,
+  'setup.steps.three': `Start the game. Upon reaching the title screen, the network icon in the corner should now show green instead of grey.`,
+  'setup.support-info': `If you need additional assistance, feel free to make an inquiry in a <a href="/support">support channel</a>.`,
+  'setup.reveal-keychip': `Reveal keychip`,
+  'setup.type.automatic': `Automatic Setup`,
+  'setup.type.manual': `Manual Setup`,
+  'setup.manual': `Please modify your segatools.ini with the following information.`,
+  'setup.automatic': `Select your segatools.ini below to autofill the network information.`,
+  'setup.automatic.success': `Success, data has been updated`,
+  'setup.automatic.failure': `Failed to update information, please ensure access is not blocked and try again.`,
+  'setup.automatic.select': `Pick file`,
+  'setup.troubleshooting.header': 'Setup Troubleshooting (FAQ)',
+  'setup.troubleshooting.items.one': `» It displays DNS BAD on Network Test<br>
+    You likely misconfigured your segatools.ini. Ensure it's pointing to the DNS shown above (under Manual Setup).`,
+  'setup.troubleshooting.items.two': `» It displays タイトル サーバー BAD (Title Server BAD) on Network Test<br>
+    You should check your segatools.ini to ensure your keychip is set correctly.<br>
+    Additionally, Card Maker users and players using a game version higher than what's listed may need to disable encryption
+    <a target="_blank" href="https://gitea.tendokyu.moe/Dniel97/SEGAguide/wiki/SDED#patching-assemblycsharpdll">(instructions for Card Maker)</a>`,
+  'setup.troubleshooting.items.three': `» I can't scan my card<br>
+    The built-in emulated card reader, by default, is configured to use the Enter / Return key to scan in (hold the key).`,
+  'setup.keychip': 'Keychip Management',
+  'setup.keychip.warning': 'Keychips can be manually set here for cabinet owners with physical keychips trying to connect to AquaDX. Selecting a keychip will autofill it for the setup below.',
+  'setup.keychip.add': `Add keychip`,
+  'setup.keychip.delete': `Delete`,
+  'setup.keychip.placeholder': `New Keychip ID`
+}
+
+export const EN_REF_SETTINGS = {
+  'settings.title': 'Settings',
+  'settings.page-title': '${page} Settings',
+  'settings.tabs.profile': 'Profile',
+  'settings.tabs.global': 'Global',
+  'settings.tabs.chu3': 'Chuni',
+  'settings.tabs.mai2': 'Mai',
+  'settings.tabs.ongeki': 'Ongeki',
+  'settings.tabs.wacca': 'Wacca',
+  'settings.options.all.preset-warning': 'You are using a preset option set. Options may be reflected incorrectly.',
+  'settings.options.all.personal-best': 'Record',
+  'settings.options.all.rival-score': 'Rival',
+  'settings.options.all.life': 'Life',
+  'settings.options.all.push': 'Push',
+  'settings.options.all.none': 'None',
+  // Chuni User Options
+  'settings.options.chu3.speed': 'Lane Speed (60fps)',
+  'settings.options.chu3.speed_120': 'Lane Speed (120fps)',
+  'settings.options.chu3.trackSkip': 'Track Skip Type',
+  'settings.options.chu3.headphone': 'Headphone Volume',
+  // Maimai User Options
+  'settings.options.mai2.noteSpeed': 'Note Speed',
+  'settings.options.mai2.touchSpeed': 'Touch Speed',
+  'settings.options.mai2.slideSpeed': 'Slide Speed',
+  'settings.options.mai2.headPhoneVolume': 'Headphone Volume',
+  'settings.options.mai2.trackSkip': 'Track Skip Type',
+
+  'settings.fields.mai2UnlockMusic.name': 'Unlock All Music',
+  'settings.fields.mai2UnlockMusic.desc': 'Unlock all music and master difficulty.',
+  'settings.fields.mai2UnlockChara.name': 'Unlock All Characters',
+  'settings.fields.mai2UnlockChara.desc': 'Unlock all characters (new characters start at level 1).',
+  'settings.fields.mai2UnlockCharaMaxLevel.name': 'Max Character Level',
+  'settings.fields.mai2UnlockCharaMaxLevel.desc': 'Set all characters to max level.',
+  'settings.fields.mai2UnlockPartners.name': 'Unlock All Partners',
+  'settings.fields.mai2UnlockPartners.desc': 'Unlock all partners.',
+  'settings.fields.mai2UnlockCollectables.name': 'Unlock All Collectables',
+  'settings.fields.mai2UnlockCollectables.desc': 'Unlock all collectables (nameplate, title, icon, frame).',
+  'settings.fields.mai2UnlockTickets.name': 'Unlock All Tickets',
+  'settings.fields.mai2UnlockTickets.desc': 'Infinite tickets (Note: client still limits which tickets can be used).',
+  'settings.fields.waccaUnlockMusic.name': 'Unlock All Music',
+  'settings.fields.waccaUnlockMusic.desc': 'Unlock all music.',
+  'settings.fields.waccaUnlockPlates.name': 'Unlock All Plates',
+  'settings.fields.waccaUnlockPlates.desc': 'Unlock all plates.',
+  'settings.fields.waccaUnlockCollectables.name': 'Unlock All Collectables',
+  'settings.fields.waccaUnlockCollectables.desc': 'Unlock all collectables (icon, trophy).',
+  'settings.fields.waccaUnlockTickets.name': 'Infinite Tickets',
+  'settings.fields.waccaUnlockTickets.desc': 'Infinite tickets.',
+  'settings.fields.waccaInfiniteWp.name': 'Infinite WP',
+  'settings.fields.waccaInfiniteWp.desc': 'Set WP to 999999.',
+  'settings.fields.waccaAlwaysVip.name': 'Always VIP',
+  'settings.fields.waccaAlwaysVip.desc': 'Set VIP expiration date to 2077-01-01.',
+  'settings.fields.chusanTeamName.name': 'Team Name',
+  'settings.fields.chusanTeamName.desc': 'Customize the text displayed on the top of your profile.',
+  'settings.fields.chusanInfinitePenguins.name': 'Infinite Penguins',
+  'settings.fields.chusanInfinitePenguins.desc': 'Set penguin statues for character level prompting to 999.',
+  'settings.fields.chusanUnlock29672999Ultima.name': 'Unlock 2967, 2999 Ultima',
+  'settings.fields.chusanUnlock29672999Ultima.desc': 'Unlocks Ultima difficulty ONLY for musicIds 2967, 2999. Do not use if you don\'t know why you need this.',
+  'settings.fields.chusanLvUnlockAll.name': 'Unlock Linked Gates',
+  'settings.fields.chusanLvUnlockAll.desc': 'Incurs a long animated sequence, cannot be undone',
+  'settings.fields.chusanMatchingReflector.name': 'Matching Server Reflector',
+  'settings.fields.chusanMatchingReflector.desc': 'URL of the national matching server\'s UDP reflector.',
+  'settings.fields.chusanMatchingServer.name': 'Matching Server',
+  'settings.fields.chusanMatchingServer.desc': 'URL of the national matching server.',
+  'settings.fields.ongekiInfiniteKaika.name': 'Infinite Kaika',
+  'settings.fields.ongekiInfiniteKaika.desc': 'Set Kaika to 999',
+  'settings.fields.rounding.name': 'Score Rounding',
+  'settings.fields.rounding.desc': 'Round the score to one decimal place',
+  'settings.fields.gameUsername.name': 'Player Name',
+  'settings.fields.gameUsername.desc': 'Your name shown in game',
+  'settings.fields.optOutOfLeaderboard.name': 'Opt Out of Leaderboard',
+  'settings.fields.optOutOfLeaderboard.desc': 'It may take some time for this to take effect',
+  'settings.fields.hideCountry.name': 'Hide Country',
+  'settings.fields.hideCountry.desc': 'Your country of registration will not be visible on your profile',
+  'settings.fields.displayCandidates.name': 'Display Candidates',
+  'settings.fields.displayCandidates.desc': 'Shows upcoming songs that could improve your rating on your profile (when available)',
+  'settings.fields.enableMusicRank.name': 'Enable Recommended Music Rank on Your Machine',
+  'settings.fields.enableMusicRank.desc': 'If you have your own ranking, you can turn this off. It only affects your own machine',
+  'settings.profile.picture': 'Profile Picture',
+  'settings.profile.upload-new': 'Upload New',
+  'settings.profile.bad-format': 'Invalid image format. Supported types are PNG, JPG, JPEG, WEBP & GIF.',
+  'settings.profile.save': 'Save',
+  'settings.profile.name': 'Display Name',
+  'settings.profile.username': 'Username',
+  'settings.profile.password': 'Password',
+  'settings.profile.country': 'Country',
+  'settings.profile.location': 'Location',
+  'settings.profile.bio': 'Bio',
+  'settings.profile.unset': 'Unset',
+  'settings.profile.logout': 'Log out',
+  'settings.profile.unchanged': 'Unchanged',
+  'settings.profile.delete-title': 'Delete account',
+  'settings.profile.delete-description': 'Download a backup, then permanently delete your account and all associated game data.',
+  'settings.profile.delete': 'Delete account',
+  'settings.profile.delete-confirm-title': 'Permanently delete your account?',
+  'settings.profile.delete-confirm-message': 'A backup of all game data will be downloaded first. After that, your account and all associated game data will be permanently deleted. This cannot be undone.',
+  'settings.export': 'Export Player Data',
+  'settings.batchManualExport': "Export in Batch Manual (for Tachi)",
+  'settings.cabNotice': "These settings only apply for your keychip. If you're playing on someone else's setup, please ask them to change these settings.",
+  'settings.siteNotice': "These settings only apply to the website.",
+  'settings.regionNotice': "These settings are shared amongst Mai, Ongeki and Chuni.",
+  'settings.regionSelector.title': "Prefecture Selector",
+  'settings.regionSelector.desc': "Select the region where you want the game to identify you",
+  'settings.regionSelector.select': "Select Prefecture",
+}
+
+export const EN_REF_USERBOX = {
+  'userbox.header.general': 'General Settings',
+  'userbox.header.matching': 'National Matching',
+  'userbox.header.matching.symbolChat': 'Chat Symbols (Matching)',
+  'userbox.header.linkedVerse': 'Linked Verse',
+  'userbox.header.userbox': 'UserBox Settings',
+  'userbox.header.preview': 'UserBox Preview',
+  'userbox.nameplateId': 'Nameplate',
+  'userbox.frameId': 'Frame',
+  'userbox.trophyId': 'Trophy (Title)',
+  'userbox.trophyIdSub1': 'Trophy Sub #1 (Title)',
+  'userbox.trophyIdSub2': 'Trophy Sub #2 (Title)',
+  'userbox.mapIconId': 'Map Icon',
+  'userbox.voiceId': 'System Voice',
+  'userbox.stageId': 'Stage',
+  'userbox.avatarWear': 'Avatar Wear',
+  'userbox.avatarHead': 'Avatar Head',
+  'userbox.avatarFace': 'Avatar Face',
+  'userbox.avatarSkin': 'Avatar Skin',
+  'userbox.avatarItem': 'Avatar Item',
+  'userbox.avatarFront': 'Avatar Front',
+  'userbox.avatarBack': 'Avatar Back',
+  'userbox.preview.url': 'Image URL',
+  'userbox.error.nodata': 'Chuni data not found',
+
+  'userbox.matching.select': 'Select Matching Server',
+  'userbox.matching.select.sub': 'Choose the matching server you want to use.',
+  'userbox.matching.option.ui': 'Rooms',
+  'userbox.matching.option.guide': 'Guide',
+  'userbox.matching.option.collab': 'Collaborators',
+  'userbox.matching.custom.name': 'Custom',
+  'userbox.matching.custom.sub': 'Enter your own URL',
+  'userbox.matching.symbolChat': 'Message Choice',
+  'userbox.matching.symbolChat.default': 'Default',
+
+  'userbox.lv.help': 'Information about Linked Verse Difficulty',
+  'userbox.lv.diffnotice': 'In Linked Verse, you will be matched separately based on your difficulty.',
+  'userbox.lv.difficulty': 'Linked Verse Difficulty',
+  'userbox.lv.difficulty.0': 'LEVEL ∞ (Only for supported gates)',
+  'userbox.lv.difficulty.1': 'LEVEL V',
+  'userbox.lv.difficulty.2': 'LEVEL IV',
+  'userbox.lv.difficulty.3': 'LEVEL III',
+  'userbox.lv.difficulty.4': 'LEVEL II',
+  'userbox.lv.difficulty.5': 'LEVEL I',
+
+  'userbox.new.name': 'AquaBox',
+  'userbox.new.setup': 'Drag and drop your Chuni game folder (Lumi or newer) into the box below to display UserBoxes with their nameplate & avatar. All files are handled in-browser.',
+  'userbox.new.setup.notice': 'Select the highest folder containing your game data.',
+  'userbox.new.setup.processing_file': 'Processing',
+  'userbox.new.setup.finalizing': 'Saving to internal storage',
+  'userbox.new.drop': 'Drop game folder here',
+  'userbox.new.switch.to_url': 'Switch to URL mode',
+  'userbox.new.switch.to_drop': 'Switch to drop mode',
+  'userbox.new.url_warning': 'Enter in the path to access Userbox assets. You are responsible for any results in this state. Please read the documentation. Don\'t expect support for this mode.',
+  'userbox.new.activate_first': 'Enable AquaBox (game files required)',
+  'userbox.new.activate_update': 'Update AquaBox (game files required)',
+  'userbox.new.activate': 'Use AquaBox',
+  'userbox.new.activate_desc': 'Enable displaying UserBoxes with their nameplate & avatar',
+  'userbox.new.activate_profile': 'Use AquaBox on profiles',
+  'userbox.new.activate_profile_desc': 'Enable displaying UserBoxes with their nameplate & avatar on profile pages',
+  'userbox.new.error.invalidFolder': 'The folder you selected is invalid. Ensure that your game\'s version is Lumi or newer and that the "A000" option pack is present.',
+  'userbox.new.error.invalidUrl': 'The URL you inputted is invalid.'
+}
+
+export const EN_REF_MAI_PHOTO = {
+  'maiphoto.title': 'Mai Memorial Photo Gallery',
+  'maiphoto.url_warning': 'If you want to share a photo with your friend, please save the photo. Do not copy image URL because the URL contains sensitive information.',
+  'maiphoto.none': 'No photo found. You can upload photo by clicking upload at the end of each game session.',
+}
+
+export const EN_REF_AQUATRANS = {
+  'trans.title': '🏳️‍⚧️ AquaTrans™ Data Transfer',
+  'trans.confirm.unbackuped.title': 'Confirm transfer',
+  'trans.confirm.unbackuped.msg': "It seems like you haven't backed up your destination data. Are you sure you want to proceed? (This will overwrite your destination server's data)",
+  'trans.confirm.untested.title': 'Error',
+  'trans.confirm.untested.msg': "It seems like you haven't tested both connections yet. Please test the connections first.",
+  'trans.confirm.done.title': 'Done!',
+  'trans.confirm.done.msg': 'Transfer completed successfully! Your data on ${dst} is overwritten with your data from ${src}.',
+  'trans.alert.in-progress': "Transfer already in progress!",
+  'trans.prompt-html': `
+    <p>👋 Welcome to the AquaTrans™ server data transfer tool!</p>
+    <p>You can use this to export data from any server, and input data into any server using the connection credentials (card number, server address, and keychip id).</p>
+    <p>This tool will simulate a game client and pull your data from the source server, and push your data to the destination server.</p>
+    <p>Please fill out the info below to get started!</p>
+  `,
+  'trans.error.empty': 'Please fill out all fields.',
+  'trans.error.untested': 'Please test the connections first.',
+  'trans.success.import': 'Data imported successfully!',
+  'trans.source.title': 'Source Server',
+  'trans.target.title': 'Destination Server',
+  'trans.field.addr': 'Server Address',
+  'trans.field.keychip': 'Keychip ID',
+  'trans.field.game': 'Game',
+  'trans.field.version': 'Version',
+  'trans.field.card': 'Card Number',
+  'trans.btn.test': 'Test Connection',
+  'trans.btn.export': 'Export Data',
+  'trans.btn.import': 'Import Data',
+  'trans.blacklist': "This server may have rules against tools such as AquaTrans, please use caution.",
+}
+
+export const EN_REF = { ...EN_REF_USER, ...EN_REF_Welcome, ...EN_REF_GENERAL,
+  ...EN_REF_LEADERBOARD, ...EN_REF_HOME, ...EN_REF_SETTINGS, ...EN_REF_USERBOX,
+  ...EN_REF_MAI_PHOTO, ...EN_REF_AQUATRANS, ...EN_REF_SETUP
+}
+
+export type LocalizedMessages = typeof EN_REF