feat: modernized web application

.dockerignore

@@ -0,0 +1,21 @@
+# Dependencies and build outputs (reinstalled / rebuilt in image)
+node_modules
+**/node_modules
+.next
+**/.next
+
+# Git
+.git
+.gitignore
+
+# Other projects in the repo (not needed for the Next.js image)
+main-web
+tools
+twitch_chat_reader
+infra
+
+# Misc
+*.md
+.env
+.env.*
+!.env.example

build.sh

@@ -1,63 +1,2 @@
-#!/bin/sh
+APP_VERSION=1.0.0
-
+docker buildx build --platform linux/arm64 -f nextjs/Dockerfile -t cfc-web:$APP_VERSION .
-# create folder to pack all
-echo "Starting build process..."
-mkdir build
-
-# build janken tool and move
-cd tools/janken
-echo "Starting janken tool build..."
-npm run build
-cd ../../
-mv tools/janken/tool build
-echo "Finished janken tool build..."
-
-# build client and move
-cd main-web/client
-echo "Starting client build..."
-npm run build
-cd ../../
-mv main-web/client/client build
-echo "Finished client build..."
-
-# build admin and move
-cd main-web/admin
-echo "Starting admin ui build..."
-npm run build
-cd ../../
-mv main-web/admin/build build/admin
-echo "Finished admin ui build..."
-
-# build server and move
-cd main-web/server
-echo "Starting server build..."
-npm run build
-cd ../../
-cd build/
-echo "Starting retrieval of db credentials..."
-export catherine_db_endpoint=$(aws --region=ap-northeast-1 ssm get-parameter --name "db-endpoint" --with-decryption --output text --query Parameter.Value)
-export catherine_db_user=$(aws --region=ap-northeast-1 ssm get-parameter --name "db-username" --with-decryption --output text --query Parameter.Value)
-export catherine_db_pass=$(aws --region=ap-northeast-1 ssm get-parameter --name "db-password" --with-decryption --output text --query Parameter.Value)
-echo "Saving db credentials to .env file..."
-cat > .env <<EOL
-DB_ENDPOINT=${catherine_db_endpoint}
-DB_USER=${catherine_db_user}
-DB_PASS=${catherine_db_pass}
-EOL
-cd ../
-cp main-web/server/package.json build/
-cp main-web/server/tsconfig.json build/
-cp main-web/server/tslint.json build/
-mv main-web/server/build build/server
-echo "Finished server build..."
-
-echo "Compressing all files..."
-tar czf build.tar.gz build/
-echo "Finished compressing all files..."
-echo "Removing workfolder..."
-rm -rf build/
-echo "Removed workfolder..."
-
-echo "Upload built files to s3..."
-aws s3 cp build.tar.gz s3://catherine-fc-infra/
-echo "Finished build process..."

build_script.sh

@@ -1,40 +0,0 @@
-#!/bin/sh
-
-# create folder to pack all
-echo "Starting build process..."
-mkdir build
-
-# build janken tool and move
-cd tools/janken
-echo "Starting janken tool build..."
-npm install
-npm run build
-cd ../../
-mv tools/janken/tool build
-echo "Finished janken tool build..."
-
-# build client and move
-cd main-web/client
-echo "Starting client build..."
-npm install
-npm run build
-cd ../../
-mv main-web/client/client build/client
-echo "Finished client build..."
-
-# build server and move
-cd main-web/server
-echo "Starting server build..."
-npm install
-npm run build
-cd ../../
-cd build/
-
-echo "Saving db credentials to .env file..."
-
-cd ../
-cp main-web/server/package.json build/
-cp main-web/server/tsconfig.json build/
-cp main-web/server/tslint.json build/
-mv main-web/server/build build/server
-echo "Finished server build..."

nextjs/.env.example

@@ -0,0 +1,5 @@
+# MySQL (same as main-web/server)
+DB_ENDPOINT=localhost
+DB_PORT=3306
+DB_USER=
+DB_PASS=

nextjs/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

nextjs/.gitignore

@@ -0,0 +1,7 @@
+/node_modules
+/.next/
+/out/
+.env
+.env.local
+.env.*.local
+*.tsbuildinfo

nextjs/Dockerfile

@@ -0,0 +1,66 @@
+# syntax=docker/dockerfile:1
+#
+# Target: linux/arm64 (ARMv8 / aarch64). Build from the repository root:
+#   docker build -f nextjs/Dockerfile -t catherine-league-web .
+# Cross-build from amd64 (optional, requires QEMU/binfmt, e.g. Docker Desktop / buildx):
+#   docker buildx build --platform linux/arm64 -f nextjs/Dockerfile -t catherine-league-web .
+#
+# Run (set DB_* env vars as needed):
+#   docker run --rm -p 3000:3000 \
+#     -e DB_ENDPOINT=host.docker.internal \
+#     -e DB_PORT=3306 \
+#     -e DB_USER=... \
+#     -e DB_PASS=... \
+#     catherine-league-web
+
+FROM arm64v8/node:24-alpine AS deps
+RUN apk add --no-cache libc6-compat
+
+WORKDIR /app
+
+COPY package.json package-lock.json ./
+COPY nextjs/package.json ./nextjs/
+
+RUN npm ci
+
+FROM arm64v8/node:24-alpine AS builder
+RUN apk add --no-cache libc6-compat
+
+WORKDIR /app
+
+COPY --from=deps /app/node_modules ./node_modules
+COPY --from=deps /app/package.json ./package.json
+COPY --from=deps /app/package-lock.json ./package-lock.json
+COPY nextjs ./nextjs
+
+ENV NEXT_TELEMETRY_DISABLED=1
+
+RUN npm run build -w catherine-league-nextjs
+
+FROM arm64v8/node:24-alpine AS runner
+RUN apk add --no-cache libc6-compat
+
+WORKDIR /app
+
+ENV NODE_ENV=production
+ENV NEXT_TELEMETRY_DISABLED=1
+
+RUN addgroup --system --gid 1001 nodejs \
+  && adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/nextjs/public ./nextjs/public
+COPY --from=builder /app/nextjs/.next/standalone ./
+COPY --from=builder /app/nextjs/.next/static ./nextjs/.next/static
+
+RUN chown -R nextjs:nodejs /app
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT=3000
+ENV HOSTNAME=0.0.0.0
+
+WORKDIR /app/nextjs
+
+CMD ["node", "server.js"]

nextjs/next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+/// <reference path="./.next/types/routes.d.ts" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

nextjs/next.config.mjs

@@ -0,0 +1,15 @@
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  output: 'standalone',
+  outputFileTracingRoot: path.join(__dirname, '..'),
+  sassOptions: {
+    includePaths: ['src/styles'],
+  },
+};
+
+export default nextConfig;

nextjs/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "catherine-league-nextjs",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "dotenv": "^16.4.5",
+    "i18next": "^23.10.1",
+    "mysql2": "^3.11.0",
+    "next": "^15.5.14",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-i18next": "^14.1.0",
+    "react-youtube": "^10.1.0",
+    "semantic-ui-css": "^2.5.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.14.10",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "eslint": "^8.57.0",
+    "eslint-config-next": "^15.5.14",
+    "sass": "^1.77.8",
+    "typescript": "^5.5.4"
+  }
+}

nextjs/public/manifest.json

@@ -0,0 +1,9 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#ff2d7c",
+  "background_color": "#ffffff"
+}

nextjs/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

nextjs/src/app/about/page.tsx

@@ -0,0 +1,34 @@
+import style from '@/styles/web.module.scss';
+
+export default function AboutPage() {
+  return (
+    <div className={style.guideBody}>
+      <h2>About</h2>
+      <hr />
+      <div className={style.aboutNoticeBlock}>
+        <br />
+        <p>
+          Covid-19
+          の影響で、オフライン大会の実施なども困難であるため、オンラインによるランキングバトル（通称：ストレイシープ杯）を開催することになりました。
+        </p>
+        <p>
+          先日発売されたSwitch版＋各自の配信設備を用いて大会を実施するため、まずは少人数で進めていきます。（まずは第0回を実験的に開催）
+        </p>
+        <p>
+          キャサリンの対戦は、決着はわかりやすいですが、使われているテクニックなどが分かるともっと楽しめると思うので、解説なども交えながら実施する予定です。
+        </p>
+        <p>悪い点は改善し、良い点はつづけながら、継続的に続けていきたいと思います。</p>
+        <p>
+          もっとこうしてみては？次の大会から参加したい！などございましたら問い合わせフォームからご意見下さい！
+        </p>
+        <p>それでは、楽しんでいくめぇ。～</p>
+        <div className={style.sheepAbout} />
+        <div className={style.aboutContactBox}>
+          <a href="https://forms.gle/Dn4p7cFEPLK1zcTz5" rel="noopener noreferrer" target="_blank">
+            &nbsp;
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}

nextjs/src/app/api/archive/route.ts

@@ -0,0 +1,15 @@
+import { NextResponse } from 'next/server';
+
+import { getArchiveItems } from '@/lib/data';
+
+export const dynamic = 'force-dynamic';
+
+export async function GET() {
+  try {
+    const data = await getArchiveItems();
+    return NextResponse.json(data);
+  } catch (e) {
+    console.error(e);
+    return NextResponse.json([], { status: 500 });
+  }
+}

nextjs/src/app/api/contact/route.ts

@@ -0,0 +1,15 @@
+import { NextResponse } from 'next/server';
+
+import { getContactItems } from '@/lib/data';
+
+export const dynamic = 'force-dynamic';
+
+export async function GET() {
+  try {
+    const data = await getContactItems();
+    return NextResponse.json(data);
+  } catch (e) {
+    console.error(e);
+    return NextResponse.json([], { status: 500 });
+  }
+}

nextjs/src/app/api/guide/route.ts

@@ -0,0 +1,15 @@
+import { NextResponse } from 'next/server';
+
+import { getGuideItems } from '@/lib/data';
+
+export const dynamic = 'force-dynamic';
+
+export async function GET() {
+  try {
+    const data = await getGuideItems();
+    return NextResponse.json(data);
+  } catch (e) {
+    console.error(e);
+    return NextResponse.json([], { status: 500 });
+  }
+}

nextjs/src/app/api/players/[key]/route.ts

@@ -0,0 +1,23 @@
+import { NextResponse } from 'next/server';
+
+import { getPlayersForTournament } from '@/lib/data';
+
+export const dynamic = 'force-dynamic';
+
+type RouteContext = {
+  params: Promise<{ key: string }>;
+};
+
+export async function GET(_request: Request, context: RouteContext) {
+  try {
+    const { key } = await context.params;
+    const data = await getPlayersForTournament(key);
+    if (data === null) {
+      return NextResponse.json({ error: 'Tournament not found' }, { status: 404 });
+    }
+    return NextResponse.json(data);
+  } catch (e) {
+    console.error(e);
+    return NextResponse.json([], { status: 500 });
+  }
+}

nextjs/src/app/api/players/route.ts

@@ -0,0 +1,15 @@
+import { NextResponse } from 'next/server';
+
+import { getAllPlayers } from '@/lib/data';
+
+export const dynamic = 'force-dynamic';
+
+export async function GET() {
+  try {
+    const data = await getAllPlayers();
+    return NextResponse.json(data);
+  } catch (e) {
+    console.error(e);
+    return NextResponse.json([], { status: 500 });
+  }
+}

nextjs/src/app/archive/page.tsx

@@ -0,0 +1,9 @@
+import { ArchiveVideoList } from '@/components/ArchiveVideoList';
+import { getArchiveItems } from '@/lib/data';
+
+export const dynamic = 'force-dynamic';
+
+export default async function ArchivePage() {
+  const items = await getArchiveItems();
+  return <ArchiveVideoList items={items} />;
+}

nextjs/src/app/contact/page.tsx

@@ -0,0 +1,9 @@
+import { ContactList } from '@/components/ContactList';
+import { getContactItems } from '@/lib/data';
+
+export const dynamic = 'force-dynamic';
+
+export default async function ContactPage() {
+  const items = await getContactItems();
+  return <ContactList items={items} />;
+}

nextjs/src/app/globals.css

@@ -0,0 +1,17 @@
+body {
+  margin: 0;
+  font-family: var(--font-mplus), -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
+
+html,
+body {
+  min-height: 100%;
+}

nextjs/src/app/guide/page.tsx

@@ -0,0 +1,9 @@
+import { GuideVideoList } from '@/components/GuideVideoList';
+import { getGuideItems } from '@/lib/data';
+
+export const dynamic = 'force-dynamic';
+
+export default async function GuidePage() {
+  const items = await getGuideItems();
+  return <GuideVideoList items={items} />;
+}

nextjs/src/app/layout.tsx

@@ -0,0 +1,46 @@
+import type { Metadata, Viewport } from 'next';
+import { Indie_Flower, M_PLUS_Rounded_1c } from 'next/font/google';
+import type { ReactNode } from 'react';
+
+import { I18nProvider } from '@/components/I18nProvider';
+import { SiteLayout } from '@/components/SiteLayout';
+
+import 'semantic-ui-css/semantic.min.css';
+import './globals.css';
+
+const indieFlower = Indie_Flower({
+  weight: '400',
+  subsets: ['latin'],
+  variable: '--font-indie',
+  display: 'swap',
+});
+
+const mPlusRounded = M_PLUS_Rounded_1c({
+  weight: ['400', '700'],
+  subsets: ['latin'],
+  variable: '--font-mplus',
+  display: 'swap',
+  adjustFontFallback: false,
+});
+
+export const metadata: Metadata = {
+  title: 'キャサリン faito crab',
+  description: 'キャサリン faito crab',
+  manifest: '/manifest.json',
+};
+
+export const viewport: Viewport = {
+  themeColor: '#ff2d7c',
+};
+
+export default function RootLayout({ children }: { children: ReactNode }) {
+  return (
+    <html lang="ja" className={`${indieFlower.variable} ${mPlusRounded.variable}`}>
+      <body>
+        <I18nProvider>
+          <SiteLayout>{children}</SiteLayout>
+        </I18nProvider>
+      </body>
+    </html>
+  );
+}

nextjs/src/app/not-found.tsx

@@ -0,0 +1,7 @@
+export default function NotFound() {
+  return (
+    <div>
+      <p>404</p>
+    </div>
+  );
+}

nextjs/src/app/page.tsx

@@ -0,0 +1,34 @@
+import style from '@/styles/web.module.scss';
+
+export default function HomePage() {
+  return (
+    <div className={style.mainBody}>
+      <div className={style.evojapan2025} />
+      <div className={style.padding} />
+      <div className={style.evojapan2023kaisaikettei} />
+      <div className={style.padding} />
+      <div className={style.group}>
+        <div className={style.evojapan2023catherinetonamel}>
+          <a href="https://tonamel.com/competition/VD6y8" rel="noopener noreferrer" target="_blank">
+            &nbsp;
+          </a>
+        </div>
+        <div className={style.evojapan2023catherinefullbodytonamel}>
+          <a href="https://tonamel.com/competition/dgdQ9" rel="noopener noreferrer" target="_blank">
+            &nbsp;
+          </a>
+        </div>
+      </div>
+      <div className={style.padding} />
+      <div className={style.twitchHome}>
+        <a
+          href="https://www.twitch.tv/catherine_faito_crab"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          &nbsp;
+        </a>
+      </div>
+    </div>
+  );
+}

nextjs/src/app/players/page.tsx

@@ -0,0 +1,9 @@
+import { PlayersList } from '@/components/PlayersList';
+import { getAllPlayers } from '@/lib/data';
+
+export const dynamic = 'force-dynamic';
+
+export default async function PlayersPage() {
+  const players = await getAllPlayers();
+  return <PlayersList players={players} />;
+}

nextjs/src/app/tournaments/[tournament_key]/players/page.tsx

@@ -0,0 +1,19 @@
+import { notFound } from 'next/navigation';
+
+import { PlayersList } from '@/components/PlayersList';
+import { getPlayersForTournament } from '@/lib/data';
+
+export const dynamic = 'force-dynamic';
+
+type PageProps = {
+  params: Promise<{ tournament_key: string }>;
+};
+
+export default async function TournamentPlayersPage({ params }: PageProps) {
+  const { tournament_key } = await params;
+  const players = await getPlayersForTournament(tournament_key);
+  if (players === null) {
+    notFound();
+  }
+  return <PlayersList players={players} />;
+}

nextjs/src/app/tournaments/[tournament_key]/scoreboard/page.tsx

@@ -0,0 +1,9 @@
+import style from '@/styles/web.module.scss';
+
+export default function ScoreboardPage() {
+  return (
+    <div className={style.mainBody}>
+      <div className={style.scoreboardImage} />
+    </div>
+  );
+}

nextjs/src/app/tournaments/page.tsx

@@ -0,0 +1,7 @@
+export default function TournamentsPage() {
+  return (
+    <div>
+      <p>Tournaments</p>
+    </div>
+  );
+}

nextjs/src/components/ArchiveVideoList.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import { useTranslation } from 'react-i18next';
+import YouTube from 'react-youtube';
+
+import type { IGuideItem } from '@/models/IGuideItem';
+import style from '@/styles/web.module.scss';
+
+type Props = {
+  items: IGuideItem[];
+};
+
+const opts = {
+  height: '195',
+  width: '320',
+};
+
+export function ArchiveVideoList({ items }: Props) {
+  const { t } = useTranslation();
+
+  return (
+    <div className={style.guideBody}>
+      <h2>{t('archive')}</h2>
+      <hr />
+      <br />
+      {items.map((el) => (
+        <div
+          key={`archiveItemsLoop-${el.id}`}
+          className={style.characterBlock}
+          style={{
+            animationDelay: `${el.id * 0.2}s`,
+          }}
+        >
+          <h4>{el.title}</h4>
+          <hr />
+          <div className={style.centerVideo}>
+            <YouTube videoId={el.youtube_id} opts={opts} />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

nextjs/src/components/ContactList.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import { useTranslation } from 'react-i18next';
+
+import type { IContactQuestion } from '@/models/IContactQuestion';
+import style from '@/styles/web.module.scss';
+
+type Props = {
+  items: IContactQuestion[];
+};
+
+export function ContactList({ items }: Props) {
+  const { t } = useTranslation();
+
+  return (
+    <div className={style.guideBody}>
+      <h2>{t('qanda')}</h2>
+      <hr />
+      <div className={style.contactBox}>
+        <a href="https://forms.gle/Dn4p7cFEPLK1zcTz5" rel="noopener noreferrer" target="_blank">
+          &nbsp;
+        </a>
+      </div>
+      {items.map((el) => (
+        <div
+          key={`contactItemsLoop-${el.id}`}
+          className={style.characterBlock}
+          style={{
+            animationDelay: `${el.id * 0.2}s`,
+          }}
+        >
+          <h4>{el.question}</h4>
+          <hr />
+          <div>{el.answer}</div>
+        </div>
+      ))}
+    </div>
+  );
+}

nextjs/src/components/GuideVideoList.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import { useTranslation } from 'react-i18next';
+import YouTube from 'react-youtube';
+
+import type { IGuideItem } from '@/models/IGuideItem';
+import style from '@/styles/web.module.scss';
+
+type Props = {
+  items: IGuideItem[];
+};
+
+const opts = {
+  height: '195',
+  width: '320',
+};
+
+export function GuideVideoList({ items }: Props) {
+  const { t } = useTranslation();
+
+  return (
+    <div className={style.guideBody}>
+      <h2>{t('guide')}</h2>
+      <hr />
+      <br />
+      {items.map((el) => (
+        <div
+          key={`guideItemsLoop-${el.id}`}
+          className={style.characterBlock}
+          style={{
+            animationDelay: `${el.id * 0.2}s`,
+          }}
+        >
+          <h4>{el.title}</h4>
+          <hr />
+          <div>{el.description}</div>
+          <div className={style.centerVideo}>
+            <YouTube videoId={el.youtube_id} opts={opts} />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

nextjs/src/components/I18nProvider.tsx

@@ -0,0 +1,10 @@
+'use client';
+
+import { I18nextProvider } from 'react-i18next';
+import type { ReactNode } from 'react';
+
+import i18n from '@/i18n/client';
+
+export function I18nProvider({ children }: { children: ReactNode }) {
+  return <I18nextProvider i18n={i18n}>{children}</I18nextProvider>;
+}

nextjs/src/components/PlayersList.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import { useTranslation } from 'react-i18next';
+
+import type { IPlayerInfo } from '@/models/IPlayerInfo';
+import style from '@/styles/web.module.scss';
+
+type Props = {
+  players: IPlayerInfo[];
+};
+
+export function PlayersList({ players }: Props) {
+  const { t } = useTranslation();
+
+  return (
+    <div className={style.guideBody}>
+      <h2>Players</h2>
+      <hr />
+      <br />
+      {players.map((el) => {
+        const charClass =
+          style[`character-${el.name_id}` as keyof typeof style] ?? '';
+        return (
+          <div
+            key={`playerInfoLoop-${el.id}`}
+            className={style.characterBlock}
+            style={{
+              animationDelay: `${el.id * 0.2}s`,
+            }}
+          >
+            <div className={charClass} />
+            <div className={style.titlePlayer}>
+              <span className={style.titlePlayerBlock}>{t('player_name')}</span>
+            </div>
+            <div>{el.player_name}</div>
+            <div className={style.titlePlayer}>
+              <span className={style.titlePlayerBlock}>{t('use_character')}</span>
+            </div>
+            <div>{el.name_jp}</div>
+            <div className={style.titlePlayer}>
+              <span className={style.titlePlayerBlock}>{t('description')}</span>
+            </div>
+            <div>{el.description}</div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

nextjs/src/components/SiteLayout.tsx

@@ -0,0 +1,114 @@
+import Link from 'next/link';
+import type { ReactNode } from 'react';
+
+import style from '@/styles/web.module.scss';
+
+export function SiteLayout({ children }: { children: ReactNode }) {
+  return (
+    <div className={style.main}>
+      <div className={style.header}>
+        <div className={style.background} />
+        <div className={style.buynow}>
+          <a
+            href="https://www.atlus.co.jp/news/13264/"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            &nbsp;
+          </a>
+        </div>
+        <div className={style.logoHeader} />
+        <div className={style.logoSwitch} />
+        <div className={style.waveContainer}>
+          <svg
+            className={style.waves}
+            viewBox="0 24 150 28"
+            preserveAspectRatio="none"
+            shapeRendering="auto"
+          >
+            <defs>
+              <path
+                id="gentle-wave"
+                d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"
+              />
+            </defs>
+            <g>
+              <use
+                className={style.firstWave}
+                x={48}
+                y={7}
+                href="#gentle-wave"
+                fill="rgba(255,45,124,0.7)"
+              />
+              <use
+                className={style.secondWave}
+                x={48}
+                y={0}
+                href="#gentle-wave"
+                fill="#ff2d7c"
+              />
+            </g>
+          </svg>
+        </div>
+      </div>
+      <nav className={style.navigation}>
+        <ul>
+          <li>
+            <Link href="/">Home</Link>
+          </li>
+          <li>
+            <Link href="/players">Players</Link>
+          </li>
+          <li>
+            <Link href="/guide">Guide</Link>
+          </li>
+          <li>
+            <Link href="/archive">Archive</Link>
+          </li>
+          <li>
+            <Link href="/about">About</Link>
+          </li>
+          <li>
+            <Link href="/contact">Q&A</Link>
+          </li>
+        </ul>
+      </nav>
+      <div className={style.contents}>{children}</div>
+      <div className={style.footer}>
+        <div className={style.footerText}>
+          <p>
+            <a href="https://www.atlus.co.jp/copyright/" rel="noopener noreferrer" target="_blank">
+              ©ATLUS
+            </a>{' '}
+            ©SEGA All Rights Reserved.
+          </p>
+          <p>本ページは、株式会社ATLUS様のページとは異なるユーザーサイトです。</p>
+          <p>問い合わせなどをATLUS様に出されないよう、ご注意ください。</p>
+        </div>
+        <div className={style.twitter}>
+          <a href="https://twitter.com/catherine_f_c" rel="noopener noreferrer" target="_blank">
+            &nbsp;
+          </a>
+        </div>
+        <div className={style.twitch}>
+          <a
+            href="https://www.twitch.tv/catherine_faito_crab"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            &nbsp;
+          </a>
+        </div>
+        <div className={style.youtube}>
+          <a
+            href="https://www.youtube.com/channel/UC5cvyvCdOMbxwZqCT09cGNA/"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            &nbsp;
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}

nextjs/src/i18n/client.ts

@@ -0,0 +1,22 @@
+'use client';
+
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+
+import en from './en.json';
+import ja from './ja.json';
+
+if (!i18n.isInitialized) {
+  i18n.use(initReactI18next).init({
+    fallbackLng: 'ja',
+    resources: {
+      en: { translation: en },
+      ja: { translation: ja },
+    },
+    interpolation: {
+      escapeValue: false,
+    },
+  });
+}
+
+export default i18n;

nextjs/src/i18n/en.json

@@ -0,0 +1,9 @@
+{
+  "use_character": "Character",
+  "player_name": "Playername",
+  "description": "Description",
+  "archive": "Archive",
+  "guide": "Guide",
+  "about": "About",
+  "qanda": "Q&A"
+}

nextjs/src/i18n/ja.json

@@ -0,0 +1,9 @@
+{
+  "use_character": "使用キャラクター",
+  "player_name": "プレイヤー名",
+  "description": "紹介文",
+  "archive": "Archive",
+  "guide": "Guide",
+  "about": "About",
+  "qanda": "Q&A"
+}

nextjs/src/lib/data.ts

@@ -0,0 +1,74 @@
+import type { RowDataPacket } from 'mysql2';
+import { getPool } from './db';
+import type { IContactQuestion } from '@/models/IContactQuestion';
+import type { IGuideItem } from '@/models/IGuideItem';
+import type { IPlayerInfo } from '@/models/IPlayerInfo';
+
+let tournamentIdByKeyPromise: Promise<Record<string, number>> | null = null;
+
+async function loadTournamentMap(): Promise<Record<string, number>> {
+  const pool = getPool();
+  const [rows] = await pool.query<RowDataPacket[]>(
+    'SELECT id, tournament_key FROM tournaments'
+  );
+  const map: Record<string, number> = {};
+  for (const row of rows) {
+    map[row.tournament_key as string] = row.id as number;
+  }
+  return map;
+}
+
+export async function getTournamentIdByKey(): Promise<Record<string, number>> {
+  if (!tournamentIdByKeyPromise) {
+    tournamentIdByKeyPromise = loadTournamentMap();
+  }
+  return tournamentIdByKeyPromise;
+}
+
+export async function getAllPlayers(): Promise<IPlayerInfo[]> {
+  const pool = getPool();
+  const [rows] = await pool.query<RowDataPacket[]>(
+    `SELECT p.id, p.player_key, p.player_name, p.description, p.image, c.name_id, c.name, c.name_jp
+     FROM players p
+     JOIN characters c ON c.id = p.character_id`
+  );
+  return rows as IPlayerInfo[];
+}
+
+export async function getPlayersForTournament(
+  tournamentKey: string
+): Promise<IPlayerInfo[] | null> {
+  const tournaments = await getTournamentIdByKey();
+  const tournamentId = tournaments[tournamentKey];
+  if (tournamentId === undefined) {
+    return null;
+  }
+  const pool = getPool();
+  const [rows] = await pool.query<RowDataPacket[]>(
+    `SELECT p.id, p.player_key, p.player_name, p.description, p.image, c.name_id, c.name, c.name_jp
+     FROM players p
+     JOIN player_to_tournament ptt ON p.id = ptt.player_id
+     JOIN characters c ON c.id = p.character_id
+     WHERE ptt.tournament_id = ?`,
+    [tournamentId]
+  );
+  return rows as IPlayerInfo[];
+}
+
+export async function getGuideItems(): Promise<IGuideItem[]> {
+  const pool = getPool();
+  const [rows] = await pool.query<RowDataPacket[]>('SELECT * FROM guide');
+  return rows as IGuideItem[];
+}
+
+export async function getArchiveItems(): Promise<IGuideItem[]> {
+  const pool = getPool();
+  const [rows] = await pool.query<RowDataPacket[]>('SELECT * FROM archive');
+  return rows as IGuideItem[];
+}
+
+export async function getContactItems(): Promise<IContactQuestion[]> {
+  const pool = getPool();
+  const [rows] = await pool.query<RowDataPacket[]>('SELECT * FROM contact');
+  return rows as IContactQuestion[];
+}

nextjs/src/lib/db.ts

@@ -0,0 +1,23 @@
+import mysql from 'mysql2/promise';
+
+function createPool(): mysql.Pool {
+  const port = process.env.DB_PORT ? parseInt(process.env.DB_PORT, 10) : 3306;
+  return mysql.createPool({
+    connectionLimit: 10,
+    port,
+    host: process.env.DB_ENDPOINT,
+    user: process.env.DB_USER,
+    password: process.env.DB_PASS,
+    database: 'catherine_league',
+    charset: 'utf8mb4',
+  });
+}
+
+let pool: mysql.Pool | undefined;
+
+export function getPool(): mysql.Pool {
+  if (!pool) {
+    pool = createPool();
+  }
+  return pool;
+}

nextjs/src/models/IArchiveItem.ts

@@ -0,0 +1,5 @@
+export interface IArchiveItem {
+  id: number;
+  title: string;
+  youtube_id: string;
+}

nextjs/src/models/IContactQuestion.ts

@@ -0,0 +1,5 @@
+export interface IContactQuestion {
+  id: number;
+  question: string;
+  answer: string;
+}

nextjs/src/models/IGuideItem.ts

@@ -0,0 +1,6 @@
+export interface IGuideItem {
+  id: number;
+  title: string;
+  description: string;
+  youtube_id: string;
+}

nextjs/src/models/IPlayerInfo.ts

@@ -0,0 +1,10 @@
+export interface IPlayerInfo {
+  id: number;
+  player_key: string;
+  player_name: string;
+  description: string;
+  image: string;
+  name_id: string;
+  name: string;
+  name_jp: string;
+}

nextjs/src/styles/web.module.scss

@@ -0,0 +1,600 @@
+.header {
+  background-image: url('https://static.catherine-fc.com/media/bgbg.png');
+  background-repeat: none;
+  width: 100%;
+  height: 460px;
+}
+.buynow {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  margin: auto;
+  width: 235px;
+  height: 99px;
+  background-image: url('https://static.catherine-fc.com/media/buynow.png');
+  z-index: 1;
+  &> a {
+    display:block;
+    width: 235px;
+    height: 99px;
+  }
+  &:hover {
+    animation: bounce 1s;
+  }
+}
+.background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+  background-image: url('https://static.catherine-fc.com/media/bgimage.png');
+  background-repeat: none;
+  width: 1366px;
+  height: 401px;
+  animation: upAndDown 10s linear infinite;
+  transition: background-image 0.5s ease-in-out;
+  &:hover {
+    transition: background-image 0.5s ease-in-out;
+    background-image: url('https://static.catherine-fc.com/media/bgimagenight.png');
+  }
+}
+.logoHeader {
+  position: absolute;
+  top: -30px;
+  left: 0;
+  right: 0;
+  margin: auto;
+  width: 577px;
+  height: 401px;
+  background-image: url('https://static.catherine-fc.com/media/cat_fb_logo.png');
+  background-repeat: none;
+  z-index: 1;
+}
+
+.logoSwitch {
+  position: absolute;
+  top: 310px;
+  left: 0;
+  right: 0;
+  margin: auto;
+  width: 415px;
+  height: 64px;
+  background-image: url('https://static.catherine-fc.com/media/faito_crab.png');
+  background-repeat: none;
+  z-index: 1;
+}
+.contents {
+  flex-grow: 1;
+  padding: 30px;
+}
+.main {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  background-image: url('https://static.catherine-fc.com/media/background.png');
+  background-repeat: none;
+  color: white;
+  min-height: 100vh;
+}
+.footer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: row;
+  padding: 20px;
+  width: 100%;
+  background-color: black;
+  color: white;
+  bottom: 0;
+}
+.footerText {
+  float: left;
+  display: block;
+  justify-content: center;
+  align-items: center;
+  flex-direction: row;
+  & > p {
+    margin: 5px 0;
+  }
+}
+
+.twitch  {
+  float: right;
+  width: 113px;
+  height: 70px;
+  background-image: url('https://static.catherine-fc.com/media/twitch.png');
+  background-size: 142px 70px;
+  margin: 0 20px;
+  background-repeat: none;
+  background-size: contain;
+  &> a {
+    display:block;
+    width: 113px;
+    height: 70px;
+  }
+}
+.twitchHome  {
+  width: 113px;
+  height: 70px;
+  background-image: url('https://static.catherine-fc.com/media/twitch.png');
+  background-size: 142px 70px;
+  margin: auto;
+  background-repeat: none;
+  background-size: contain;
+  &> a {
+    display:block;
+    width: 113px;
+    height: 70px;
+  }
+}
+.twitter  {
+  float: right;
+  width: 70px;
+  height: 70px;
+  margin: 0 20px;
+  background-image: url('https://static.catherine-fc.com/media/twitter.png');
+  background-size: contain;
+  &> a {
+    display:block;
+    width: 70px;
+    height: 70px;
+  }
+}
+.youtube  {
+  float: right;
+  width: 100px;
+  height: 70px;
+  margin: 0 20px;
+  background-image: url('https://static.catherine-fc.com/media/youtube.png');
+  background-size: contain;
+  &> a {
+    display:block;
+    width: 100px;
+    height: 70px;
+  }
+}
+
+.waveContainer {
+  position: absolute;
+  top: 260px;
+  left: 0;
+  right: 0;
+  margin: auto;
+  z-index: 0;
+}
+.waves {
+  position: relative;
+  width: 100%;
+  height: 200px;
+  margin-bottom: -7px;
+
+  min-height: 100px;
+  max-height: 200px;
+}
+.firstWave {
+  animation: moveforever 25s cubic-bezier(.55, .5, .45, .5) infinite;
+  animation-delay: -2s;
+  animation-duration: 2s;
+}
+.secondWave {
+  animation: moveforever 25s cubic-bezier(.55, .5, .45, .5) infinite;
+  animation-delay: -4s;
+  animation-duration: 5s;
+}
+@keyframes moveforever {
+  0% {
+      transform: translate3d(-90px, 0, 0);
+  }
+  100% {
+      transform: translate3d(85px, 0, 0);
+  }
+}
+@keyframes bounce {
+	0%, 20%, 60%, 100% {
+		-webkit-transform: translateY(0);
+		transform: translateY(0);
+	}
+
+	40% {
+		-webkit-transform: translateY(-20px);
+		transform: translateY(-20px);
+	}
+
+	80% {
+		-webkit-transform: translateY(-10px);
+		transform: translateY(-10px);
+	}
+}
+
+.navigation {
+  position: absolute;
+  top: 400px;
+  left: 0;
+  right: 0;
+  margin: auto;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  &>ul {
+    list-style-type: none;
+    &>li {
+      float: left;
+      margin-left: 10px;
+      margin-right: 10px;
+      &>a {
+        background-color: black;
+        width: 90px;
+        height: 30px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: white;
+        font-size: 16px;
+        font-family: var(--font-indie), cursive;
+        color: white;
+        &:hover {
+          transform: rotate(-10deg);
+          font-weight: bold;
+          color: pink;
+        }
+      }
+    }
+  }
+}
+.characterBlock {
+  position: relative;
+  opacity: 0;
+  width: 980px;
+  height: 314px;
+  margin: 20px auto;
+  padding: 30px;
+  background-image: url('https://static.catherine-fc.com/media/playerbg.png');
+  background-repeat: none;
+  font-family: var(--font-mplus), sans-serif;
+  &:nth-child(odd) {
+    animation: slideInFromLeft 1s forwards;
+  }
+  &:nth-child(even) {
+    animation: slideInFromRight 1s forwards;
+  }
+}
+@keyframes slideInFromLeft {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@keyframes slideInFromRight {
+  0% {
+    transform: translateX(100%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@keyframes upAndDown {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-5%);
+  }
+}
+@media (max-width: 600px) {
+  .buynow {
+    display: none;
+  }
+}
+
+@mixin characterImage($url) {
+  width: 240px;
+  height: 240px;
+  margin: 0 20px 0 0;
+  background-image: url($url);
+  background-size: contain;
+  float: left;
+
+}
+
+.character-blue_cap {
+  @include characterImage('https://static.catherine-fc.com/media/00_bluecap_1204.png');
+}
+.character-red_cap {
+  @include characterImage('https://static.catherine-fc.com/media/00_redcap_1204.png');
+}
+.character-vincent_shirt {
+  @include characterImage('https://static.catherine-fc.com/media/01_vincent_1204.png');
+}
+.character-vincent_sheep {
+  @include characterImage('https://static.catherine-fc.com/media/01_sheep_vincent_1204.png');
+}
+.character-katherine {
+  @include characterImage('https://static.catherine-fc.com/media/02_katherine_1204.png');
+}
+.character-catherine {
+  @include characterImage('https://static.catherine-fc.com/media/03_catherine_1204.png');
+}
+.character-rin {
+  @include characterImage('https://static.catherine-fc.com/media/04_rin_1204.png');
+}
+.character-orlando {
+  @include characterImage('https://static.catherine-fc.com/media/05_orlando_1204.png');
+}
+.character-johny {
+  @include characterImage('https://static.catherine-fc.com/media/06_jonny_1204.png');
+}
+.character-tobby {
+  @include characterImage('https://static.catherine-fc.com/media/07_tobby_1204.png');
+}
+.character-erica {
+  @include characterImage('https://static.catherine-fc.com/media/08_erika_1204.png');
+}
+.character-master {
+  @include characterImage('https://static.catherine-fc.com/media/09_master_1204.png');
+}
+.character-joker {
+  @include characterImage('https://static.catherine-fc.com/media/13_joker_1204.png');
+}
+
+.titlePlayer {
+  position: relative;
+  display: flex;
+  margin-bottom: 10px;
+}
+
+.titlePlayerBlock {
+  padding: 5px 10px;
+  background-color: white;
+  transform: rotate(-5deg);
+  color: black;
+  font-family: var(--font-mplus), sans-serif;
+}
+
+.aboutNoticeBlock {
+  position: relative;
+  width: 980px;
+  height: 800px;
+  margin: 20px auto;
+  padding: 50px;
+  background-image: url('https://static.catherine-fc.com/media/playerbg.png');
+  background-repeat: none;
+  background-size: 980px 800px;
+  font-family: var(--font-mplus), sans-serif;
+}
+
+.sheepAbout {
+  position: relative;
+  width: 207px;
+  height: 350px;
+  float: left;
+  margin-top: 70px;
+  bottom: 0;
+  left: 0;
+  background-image: url('https://static.catherine-fc.com/media/title_sheep.png');
+  background-repeat: none;
+}
+.guideBody {
+  position: relative;
+  margin: 20px auto;
+  width: 980px;
+}
+.centerVideo {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.aboutContactBox {
+  position: relative;
+  width: 128px;
+  height: 128px;
+  margin: 20px;
+  background-image: url('https://static.catherine-fc.com/media/letterbox.png');
+  background-size: 128px 128px;
+  background-repeat: none;
+  & > a {
+    display: block;
+    width: 128px;
+    height: 128px;
+  }
+}
+.contactBox {
+  position: relative;
+  width: 128px;
+  height: 128px;
+  margin: 20px auto;
+  background-image: url('https://static.catherine-fc.com/media/letterbox.png');
+  background-size: 128px 128px;
+  background-repeat: none;
+  & > a {
+    display: block;
+    width: 128px;
+    height: 128px;
+  }
+}
+
+.mainBody {
+  position: flex;
+  margin: 20px auto;
+  width: 980px;
+  align-items: center;
+  justify-content: center;
+}
+.chalice {
+  width: 400px;
+  height: 340px;
+  margin: auto;
+  background-image: url('https://static.catherine-fc.com/media/chalice.png');
+  background-size: contain;
+  background-repeat: none;
+}
+.evojapan2023 {
+  width: 500px;
+  height: 471px;
+  margin: auto;
+  background-image: url('https://static.catherine-fc.com/media/evo_logo_shadow_drop.png');
+  background-size: contain;
+  background-repeat: none;
+}
+.evojapan2024 {
+  width: 500px;
+  height: 471px;
+  margin: auto;
+  background-image: url('https://static.catherine-fc.com/media/evo_2024_logo_shadow_drop.png');
+  background-size: contain;
+  background-repeat: none;
+}
+.evojapan2025 {
+  width: 500px;
+  height: 471px;
+  margin: auto;
+  background-image: url('https://static.catherine-fc.com/media/evo_logo_2025_shadow_drop.png');
+  background-size: contain;
+  background-repeat: none;
+}
+.evojapan2023kaisaikettei {
+  width: 846px;
+  height: 285px;
+  margin: auto;
+  background-image: url('https://static.catherine-fc.com/media/kaisaikettei3.png');
+  background-size: contain;
+}
+.evojapan2023catherinetonamel {
+  width: 412px;
+  height: 389px;
+  background-image: url('https://static.catherine-fc.com/media/catherine_logo_classic.png');
+  background-size: contain;
+  background-repeat: none;
+  &> a {
+    display:block;
+    width: 412px;
+    height: 389px;
+  }
+}
+.evojapan2023catherinefullbodytonamel {
+  width: 517px;
+  height: 319px;
+  background-image: url('https://static.catherine-fc.com/media/catherine_fullbody_logo.png');
+  background-size: contain;
+  background-repeat: none;
+  &> a {
+    display:block;
+    width: 517px;
+    height: 319px;
+  }
+}
+.group {
+  width: 900px;
+  height: 389px;
+  margin: auto;
+  display: flex;
+  background-size: contain;
+  background-repeat: none;
+}
+.players {
+  width: 900px;
+  height: 606px;
+  margin: auto;
+  background-image: url('https://static.catherine-fc.com/media/players.png');
+  background-size: contain;
+  background-repeat: none;
+}
+.scoreboardImage {
+  width: 567px;
+  height: 485px;
+  margin: auto;
+  background-image: url('https://static.catherine-fc.com/media/scoreboard.png');
+  background-size: contain;
+  background-repeat: none;
+}
+.titleImageStrayShip0 {
+  width: 808px;
+  height: 119px;
+  margin: auto;
+  background-image: url('https://static.catherine-fc.com/media/straysheepcup0.png');
+  background-size: contain;
+  background-repeat: none;
+}
+.titleImageStrayShip4 {
+  width: 808px;
+  height: 119px;
+  margin: auto;
+  background-image: url('https://static.catherine-fc.com/media/straysheepcup4.png');
+  background-size: contain;
+  background-repeat: none;
+}
+.rule  {
+  width: 900px;
+  height: 637px;
+  margin: auto;
+  background-image: url('https://static.catherine-fc.com/media/rule.png');
+  background-size: contain;
+  background-repeat: none;
+}
+.tonamel  {
+  width: 900px;
+  height: 637px;
+  margin: auto;
+  background-image: url('https://static.catherine-fc.com/media/tonamel.png');
+  background-size: contain;
+  background-repeat: none;
+  &> a {
+    display:block;
+    width: 900px;
+    height: 637px;
+  }
+}
+.padding  {
+  width: 900px;
+  height: 100px;
+  margin: auto;
+}
+.players0801  {
+  width: 899px;
+  height: 696px;
+  margin: auto;
+  background-image: url('https://static.catherine-fc.com/media/0801.png');
+  background-size: contain;
+  background-repeat: none;
+}
+
+.players0802  {
+  width: 900px;
+  height: 710px;
+  margin: auto;
+  background-image: url('https://static.catherine-fc.com/media/0802.png');
+  background-size: contain;
+  background-repeat: none;
+}
+.players0808  {
+  width: 900px;
+  height: 710px;
+  margin: auto;
+  background-image: url('https://static.catherine-fc.com/media/0808.png');
+  background-size: contain;
+  background-repeat: none;
+}
+.players0809  {
+  width: 900px;
+  height: 696px;
+  margin: auto;
+  background-image: url('https://static.catherine-fc.com/media/0809.png');
+  background-size: contain;
+  background-repeat: none;
+}
+.players0815  {
+  width: 900px;
+  height: 696px;
+  margin: auto;
+  background-image: url('https://static.catherine-fc.com/media/0815.png');
+  background-size: contain;
+  background-repeat: none;
+}

nextjs/tsconfig.json

@@ -0,0 +1,40 @@
+{
+  "compilerOptions": {
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    },
+    "target": "ES2017"
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

package.json

@@ -0,0 +1,7 @@
+{
+  "name": "catherine-league",
+  "private": true,
+  "workspaces": [
+    "nextjs"
+  ]
+}