Add per-game character selection to scoreboard panel

2026-06-06 03:32:06 +00:00 · 2026-02-12 01:54:32 +01:00
parent ea92c08d7b
commit f38d15c681
6 changed files with 216 additions and 0 deletions
@@ -0,0 +1,69 @@
+export interface FightingCharacterOption {
+  label: string;
+  value: string;
+  image: string;
+}
+
+const characterNamesByGame: Record<string, string[]> = {
+  'Street Fighter 6': ['Ryu', 'Ken', 'Chun-Li', 'Luke', 'Juri', 'Cammy'],
+  'TEKKEN 8': ['Jin', 'Kazuya', 'Nina', 'King', 'Asuka', 'Reina'],
+  'Guilty Gear -Strive-': ['Sol Badguy', 'Ky Kiske', 'May', 'Zato-1', 'I-No', 'Baiken'],
+  'Mortal Kombat 1': ['Scorpion', 'Sub-Zero', 'Raiden', 'Liu Kang', 'Kitana', 'Mileena'],
+  'The King of Fighters XV': ['Kyo Kusanagi', 'Iori Yagami', 'Terry Bogard', 'Mai Shiranui', 'Leona', 'Athena'],
+  'Granblue Fantasy Versus: Rising': ['Gran', 'Djeeta', 'Lancelot', 'Narmaya', 'Vira', 'Belial'],
+  '2XKO': ['Ahri', 'Darius', 'Ekko', 'Yasuo', 'Illaoi', 'Jinx'],
+};
+
+const paletteByGame: Record<string, [string, string]> = {
+  'Street Fighter 6': ['#f97316', '#b91c1c'],
+  'TEKKEN 8': ['#2563eb', '#111827'],
+  'Guilty Gear -Strive-': ['#facc15', '#9333ea'],
+  'Mortal Kombat 1': ['#84cc16', '#1f2937'],
+  'The King of Fighters XV': ['#38bdf8', '#1d4ed8'],
+  'Granblue Fantasy Versus: Rising': ['#60a5fa', '#7c3aed'],
+  '2XKO': ['#22d3ee', '#0f766e'],
+};
+
+const toCharacterValue = (character: string) => character.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '');
+
+const toDataUrl = (svg: string) => `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
+
+const buildCharacterImage = (game: string, character: string) => {
+  const [startColor, endColor] = paletteByGame[game] ?? ['#334155', '#0f172a'];
+  const initials = character
+    .split(/\s+/)
+    .map((part) => part[0])
+    .join('')
+    .slice(0, 2)
+    .toUpperCase();
+
+  const svg = `
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 220" role="img" aria-label="${character}">
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="${startColor}"/>
+      <stop offset="100%" stop-color="${endColor}"/>
+    </linearGradient>
+  </defs>
+  <rect width="480" height="220" fill="url(#bg)" rx="18"/>
+  <circle cx="90" cy="110" r="64" fill="rgba(255,255,255,0.13)"/>
+  <text x="90" y="130" text-anchor="middle" fill="#ffffff" font-family="Arial, sans-serif" font-size="56" font-weight="700">${initials}</text>
+  <text x="170" y="96" fill="#e2e8f0" font-family="Arial, sans-serif" font-size="20" font-weight="700">${game}</text>
+  <text x="170" y="145" fill="#ffffff" font-family="Arial, sans-serif" font-size="38" font-weight="700">${character}</text>
+</svg>`;
+
+  return toDataUrl(svg.trim());
+};
+
+export const fightingCharactersByGame: Record<string, FightingCharacterOption[]> = Object.fromEntries(
+  Object.entries(characterNamesByGame).map(([game, characterNames]) => [
+    game,
+    characterNames.map((character) => ({
+      label: character,
+      value: toCharacterValue(character),
+      image: buildCharacterImage(game, character),
+    })),
+  ]),
+);
+
+export const getCharactersByGame = (game: string) => fightingCharactersByGame[game] ?? [];