feat: added reject image and migrated to tailwindcss

feat: made it smartphone friendly

nextjs/src/lib/adminUi.ts

@@ -0,0 +1,54 @@
+/** Tailwind class bundles for admin (replaces admin.module.scss). */
+
+export const wrap = 'max-w-[960px] mx-auto px-4 py-6 pb-12 font-sans text-neutral-900';
+
+export const card = 'mb-5 rounded-lg border border-neutral-200 bg-white p-5';
+
+export const title = 'mb-2 text-2xl font-semibold';
+
+export const sub = 'mb-4 text-[0.95rem] text-neutral-600';
+
+export const form = 'flex max-w-[360px] flex-col gap-3';
+
+/** Same as `form` but max-width 480px (add/edit blocks). */
+export const formWide = 'flex max-w-[480px] flex-col gap-3';
+
+export const label = 'flex flex-col gap-1 text-sm';
+
+export const input = 'rounded border border-neutral-300 px-2.5 py-2 text-base';
+
+export const textarea = 'min-h-[100px] font-inherit';
+
+export const btn =
+  'cursor-pointer rounded border-none bg-blue-600 px-4 py-2.5 text-base text-white hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-60';
+
+export const btnDanger =
+  'cursor-pointer rounded border-none bg-red-600 px-4 py-2.5 text-base text-white hover:bg-red-700';
+
+export const btnGhost =
+  'cursor-pointer rounded border-none bg-neutral-100 px-4 py-2.5 text-base text-neutral-900 hover:bg-neutral-200';
+
+export const error = 'text-sm text-red-700';
+
+export const success = 'text-sm text-green-700';
+
+export const nav = 'mb-6 flex flex-wrap gap-3 border-b border-neutral-200 pb-4';
+
+export const navLink = 'text-blue-600 no-underline hover:underline';
+
+export const table = 'w-full border-collapse text-sm';
+
+export const thTd = 'border border-neutral-200 p-2 text-left align-top';
+
+export const th = 'bg-neutral-50';
+
+export const rowActions = 'flex flex-wrap gap-2';
+
+export const hr = 'my-4 border-0 border-t border-neutral-200';
+
+export const sectionBlock = 'mb-6 border-b border-neutral-200 pb-4';
+
+export const metaLine = 'mb-2 text-sm text-neutral-600';
+
+/** Smaller heading for “Add player” / “New entry” blocks (replaces title + inline font size). */
+export const sectionTitle = 'mb-2 text-[1.1rem] font-semibold';

nextjs/src/lib/characterPortrait.ts

@@ -0,0 +1,32 @@
+import type { CSSProperties } from 'react';
+
+/** Character portrait background URLs (former .character-* SCSS). */
+
+const M = 'https://static.catherine-fc.com/media';
+
+const PORTRAIT_BY_NAME_ID: Record<string, string> = {
+  blue_cap: `${M}/00_bluecap_1204.png`,
+  red_cap: `${M}/00_redcap_1204.png`,
+  vincent_shirt: `${M}/01_vincent_1204.png`,
+  vincent_sheep: `${M}/01_sheep_vincent_1204.png`,
+  katherine: `${M}/02_katherine_1204.png`,
+  catherine: `${M}/03_catherine_1204.png`,
+  rin: `${M}/04_rin_1204.png`,
+  orlando: `${M}/05_orlando_1204.png`,
+  johny: `${M}/06_jonny_1204.png`,
+  tobby: `${M}/07_tobby_1204.png`,
+  erica: `${M}/08_erika_1204.png`,
+  master: `${M}/09_master_1204.png`,
+  joker: `${M}/13_joker_1204.png`,
+};
+
+export function characterPortraitStyle(nameId: string): CSSProperties {
+  const url = PORTRAIT_BY_NAME_ID[nameId];
+  if (!url) return {};
+  return {
+    backgroundImage: `url(${url})`,
+  };
+}
+
+export const characterPortraitBox =
+  'float-none mx-auto mb-4 h-[200px] w-[200px] shrink-0 bg-contain bg-no-repeat sm:float-left sm:mb-0 sm:mr-5 sm:h-[240px] sm:w-[240px] sm:mx-0';

nextjs/src/lib/data.ts

@@ -4,6 +4,9 @@ import type { IContactQuestion } from '@/models/IContactQuestion';
 import type { IGuideItem } from '@/models/IGuideItem';
 import type { IPlayerInfo } from '@/models/IPlayerInfo';
 
+/** Public players list: items per page (main /tournaments/.../players). */
+export const PLAYERS_PAGE_SIZE = 5;
+
 let tournamentIdByKeyPromise: Promise<Record<string, number>> | null = null;
 
 async function loadTournamentMap(): Promise<Record<string, number>> {
@@ -30,11 +33,38 @@ export async function getAllPlayers(): Promise<IPlayerInfo[]> {
   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`
+     JOIN characters c ON c.id = p.character_id
+     ORDER BY p.id`
   );
   return rows as IPlayerInfo[];
 }
 
+export async function getAllPlayersPaged(
+  page: number
+): Promise<{ players: IPlayerInfo[]; total: number }> {
+  const pool = getPool();
+  const pageSize = PLAYERS_PAGE_SIZE;
+  const offset = (page - 1) * pageSize;
+
+  const [countRows] = await pool.query<RowDataPacket[]>(
+    `SELECT COUNT(*) AS cnt
+     FROM players p
+     JOIN characters c ON c.id = p.character_id`
+  );
+  const total = Number((countRows[0] as { cnt: number }).cnt);
+
+  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
+     ORDER BY p.id
+     LIMIT ? OFFSET ?`,
+    [pageSize, offset]
+  );
+
+  return { players: rows as IPlayerInfo[], total };
+}
+
 export async function getPlayersForTournament(
   tournamentKey: string
 ): Promise<IPlayerInfo[] | null> {
@@ -49,12 +79,50 @@ export async function getPlayersForTournament(
      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 = ?`,
+     WHERE ptt.tournament_id = ?
+     ORDER BY p.id`,
     [tournamentId]
   );
   return rows as IPlayerInfo[];
 }
 
+export async function getPlayersForTournamentPaged(
+  tournamentKey: string,
+  page: number
+): Promise<{ players: IPlayerInfo[]; total: number } | null> {
+  const tournaments = await getTournamentIdByKey();
+  const tournamentId = tournaments[tournamentKey];
+  if (tournamentId === undefined) {
+    return null;
+  }
+  const pool = getPool();
+  const pageSize = PLAYERS_PAGE_SIZE;
+  const offset = (page - 1) * pageSize;
+
+  const [countRows] = await pool.query<RowDataPacket[]>(
+    `SELECT COUNT(*) AS cnt
+     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]
+  );
+  const total = Number((countRows[0] as { cnt: number }).cnt);
+
+  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 = ?
+     ORDER BY p.id
+     LIMIT ? OFFSET ?`,
+    [tournamentId, pageSize, offset]
+  );
+
+  return { players: rows as IPlayerInfo[], total };
+}
+
 export async function getGuideItems(): Promise<IGuideItem[]> {
   const pool = getPool();
   const [rows] = await pool.query<RowDataPacket[]>('SELECT * FROM guide');

nextjs/src/lib/siteContentClasses.ts

@@ -0,0 +1,19 @@
+/** Shared Tailwind class strings for public site (matches former web.module.scss). */
+
+export const guideBody =
+  'relative my-5 mx-auto w-full max-w-[980px] px-4 sm:px-5 md:px-0';
+
+/** Player/guide/archive Q&A cards. Use 100%×100% so the frame stretches with the box; 100%×auto only painted one band and tall content spilled past the art. */
+export const characterBlock =
+  'relative overflow-hidden break-words opacity-0 w-full max-w-[980px] min-h-0 md:h-[314px] h-auto my-5 mx-auto p-4 sm:p-6 md:p-[30px] bg-[url(https://static.catherine-fc.com/media/playerbg.png)] bg-no-repeat [background-position:center] [background-size:100%_100%] font-mplus odd:animate-slide-in-l even:animate-slide-in-r';
+
+export const titlePlayer = 'relative flex mb-2.5';
+
+export const titlePlayerBlock =
+  'px-2.5 py-1.5 bg-white -rotate-2 text-black font-mplus text-sm sm:text-base';
+
+export const centerVideo =
+  'w-full flex justify-center overflow-x-auto [&_iframe]:max-w-full';
+
+export const mainBody =
+  'flex my-5 mx-auto w-full max-w-[980px] items-center justify-center px-4 sm:px-5 md:px-0';