From 5bd0431349bd3c7791c480745af27b5fa86e4e82 Mon Sep 17 00:00:00 2001 From: Claude Date: Sat, 22 Nov 2025 08:31:22 +0000 Subject: [PATCH 1/3] feat: Add dynamic page titles with language, code language, and score - Result page title now includes UI language, code language, and score - Game play page title includes UI language and code language - Game play page title dynamically updates with remaining seconds every second --- app/routes/$lang.$codeLanguage.play.tsx | 28 +++++++++++++++++++++++++ app/routes/result.$id.tsx | 19 +++++++++++++++++ 2 files changed, 47 insertions(+) diff --git a/app/routes/$lang.$codeLanguage.play.tsx b/app/routes/$lang.$codeLanguage.play.tsx index f3a72cc..5471058 100644 --- a/app/routes/$lang.$codeLanguage.play.tsx +++ b/app/routes/$lang.$codeLanguage.play.tsx @@ -23,6 +23,25 @@ type GameState = { usedProblemIds: string[]; // IDs of problems that have been used }; +/** + * Meta function to set page title + */ +export function meta({ data }: Route.MetaArgs) { + if (!data) { + return [{ title: 'Bug Sniper' }]; + } + + const { lang, codeLanguage } = data; + const langName = lang === 'ja' ? '日本語' : 'English'; + const codeLangDisplay = codeLanguage.charAt(0).toUpperCase() + codeLanguage.slice(1); + + return [ + { + title: `${langName} | ${codeLangDisplay} | Bug Sniper`, + }, + ]; +} + /** * Validate route parameters and redirect if invalid */ @@ -145,6 +164,15 @@ export default function Play({ loaderData }: Route.ComponentProps) { } | null>(null); const [error, setError] = useState(null); + // Update page title with remaining seconds + useEffect(() => { + if (typeof document !== 'undefined' && !gameEnded) { + const langName = lang === 'ja' ? '日本語' : 'English'; + const codeLangDisplay = codeLanguage.charAt(0).toUpperCase() + codeLanguage.slice(1); + document.title = `(${gameState.remainingSeconds}s) ${langName} | ${codeLangDisplay} | Bug Sniper`; + } + }, [gameState.remainingSeconds, lang, codeLanguage, gameEnded]); + // Timer countdown useEffect(() => { if (gameEnded) return; diff --git a/app/routes/result.$id.tsx b/app/routes/result.$id.tsx index a12b330..e479aaa 100644 --- a/app/routes/result.$id.tsx +++ b/app/routes/result.$id.tsx @@ -21,6 +21,25 @@ type ScoreRecord = { llm_feedback: string | null; }; +/** + * Meta function to set page title + */ +export function meta({ data }: Route.MetaArgs) { + if (!data || !data.score) { + return [{ title: 'Result Not Found | Bug Sniper' }]; + } + + const { score } = data; + const langName = score.ui_language === 'ja' ? '日本語' : 'English'; + const codeLangDisplay = score.code_language.charAt(0).toUpperCase() + score.code_language.slice(1); + + return [ + { + title: `${langName} | ${codeLangDisplay} ${score.score}pt | Bug Sniper`, + }, + ]; +} + /** * Loader to fetch score data from D1 */ From 52ca921ce7d50b2358c85b7c079bc73d83c2e22e Mon Sep 17 00:00:00 2001 From: Claude Date: Sat, 22 Nov 2025 08:34:26 +0000 Subject: [PATCH 2/3] fix: Remove locale from page titles MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Remove UI language (日本語/English) from page titles - Keep only code language and score in titles --- app/routes/$lang.$codeLanguage.play.tsx | 10 ++++------ app/routes/result.$id.tsx | 3 +-- 2 files changed, 5 insertions(+), 8 deletions(-) diff --git a/app/routes/$lang.$codeLanguage.play.tsx b/app/routes/$lang.$codeLanguage.play.tsx index 5471058..cd23cf5 100644 --- a/app/routes/$lang.$codeLanguage.play.tsx +++ b/app/routes/$lang.$codeLanguage.play.tsx @@ -31,13 +31,12 @@ export function meta({ data }: Route.MetaArgs) { return [{ title: 'Bug Sniper' }]; } - const { lang, codeLanguage } = data; - const langName = lang === 'ja' ? '日本語' : 'English'; + const { codeLanguage } = data; const codeLangDisplay = codeLanguage.charAt(0).toUpperCase() + codeLanguage.slice(1); return [ { - title: `${langName} | ${codeLangDisplay} | Bug Sniper`, + title: `${codeLangDisplay} | Bug Sniper`, }, ]; } @@ -167,11 +166,10 @@ export default function Play({ loaderData }: Route.ComponentProps) { // Update page title with remaining seconds useEffect(() => { if (typeof document !== 'undefined' && !gameEnded) { - const langName = lang === 'ja' ? '日本語' : 'English'; const codeLangDisplay = codeLanguage.charAt(0).toUpperCase() + codeLanguage.slice(1); - document.title = `(${gameState.remainingSeconds}s) ${langName} | ${codeLangDisplay} | Bug Sniper`; + document.title = `(${gameState.remainingSeconds}s) ${codeLangDisplay} | Bug Sniper`; } - }, [gameState.remainingSeconds, lang, codeLanguage, gameEnded]); + }, [gameState.remainingSeconds, codeLanguage, gameEnded]); // Timer countdown useEffect(() => { diff --git a/app/routes/result.$id.tsx b/app/routes/result.$id.tsx index e479aaa..3c3eb8a 100644 --- a/app/routes/result.$id.tsx +++ b/app/routes/result.$id.tsx @@ -30,12 +30,11 @@ export function meta({ data }: Route.MetaArgs) { } const { score } = data; - const langName = score.ui_language === 'ja' ? '日本語' : 'English'; const codeLangDisplay = score.code_language.charAt(0).toUpperCase() + score.code_language.slice(1); return [ { - title: `${langName} | ${codeLangDisplay} ${score.score}pt | Bug Sniper`, + title: `${codeLangDisplay} ${score.score}pt | Bug Sniper`, }, ]; } From 225addd70d3c31282f5908f97d165143c3a4f093 Mon Sep 17 00:00:00 2001 From: Claude Date: Sat, 22 Nov 2025 08:37:46 +0000 Subject: [PATCH 3/3] fix: Use proper capitalization for language names in titles - Create getCodeLanguageDisplay helper function - JavaScript (not Javascript) - PHP (not Php) - Apply correct capitalization to all language names --- app/routes/$lang.$codeLanguage.play.tsx | 19 +++++++++++++++++-- app/routes/result.$id.tsx | 17 ++++++++++++++++- 2 files changed, 33 insertions(+), 3 deletions(-) diff --git a/app/routes/$lang.$codeLanguage.play.tsx b/app/routes/$lang.$codeLanguage.play.tsx index cd23cf5..276591b 100644 --- a/app/routes/$lang.$codeLanguage.play.tsx +++ b/app/routes/$lang.$codeLanguage.play.tsx @@ -23,6 +23,21 @@ type GameState = { usedProblemIds: string[]; // IDs of problems that have been used }; +/** + * Get proper display name for code language + */ +function getCodeLanguageDisplay(codeLanguage: string): string { + const languageMap: Record = { + javascript: 'JavaScript', + python: 'Python', + php: 'PHP', + ruby: 'Ruby', + java: 'Java', + dart: 'Dart', + }; + return languageMap[codeLanguage] || codeLanguage; +} + /** * Meta function to set page title */ @@ -32,7 +47,7 @@ export function meta({ data }: Route.MetaArgs) { } const { codeLanguage } = data; - const codeLangDisplay = codeLanguage.charAt(0).toUpperCase() + codeLanguage.slice(1); + const codeLangDisplay = getCodeLanguageDisplay(codeLanguage); return [ { @@ -166,7 +181,7 @@ export default function Play({ loaderData }: Route.ComponentProps) { // Update page title with remaining seconds useEffect(() => { if (typeof document !== 'undefined' && !gameEnded) { - const codeLangDisplay = codeLanguage.charAt(0).toUpperCase() + codeLanguage.slice(1); + const codeLangDisplay = getCodeLanguageDisplay(codeLanguage); document.title = `(${gameState.remainingSeconds}s) ${codeLangDisplay} | Bug Sniper`; } }, [gameState.remainingSeconds, codeLanguage, gameEnded]); diff --git a/app/routes/result.$id.tsx b/app/routes/result.$id.tsx index 3c3eb8a..120afe8 100644 --- a/app/routes/result.$id.tsx +++ b/app/routes/result.$id.tsx @@ -21,6 +21,21 @@ type ScoreRecord = { llm_feedback: string | null; }; +/** + * Get proper display name for code language + */ +function getCodeLanguageDisplay(codeLanguage: string): string { + const languageMap: Record = { + javascript: 'JavaScript', + python: 'Python', + php: 'PHP', + ruby: 'Ruby', + java: 'Java', + dart: 'Dart', + }; + return languageMap[codeLanguage] || codeLanguage; +} + /** * Meta function to set page title */ @@ -30,7 +45,7 @@ export function meta({ data }: Route.MetaArgs) { } const { score } = data; - const codeLangDisplay = score.code_language.charAt(0).toUpperCase() + score.code_language.slice(1); + const codeLangDisplay = getCodeLanguageDisplay(score.code_language); return [ {