[WIP] Add optional remote leaderboard using Firebase Firestore and integration

[Copilot]

Thanks for asking me to work on this. I will get started on it and keep this PR's description up to date as I form a plan and make progress.

Original description:

Issue: The game currently stores leaderboard data in localStorage, so users visiting the GitHub Pages site cannot see each other's scores. Task: Add an optional remote leaderboard implementation using Firebase Firestore, with a safe fallback to localStorage when Firebase is not configured. Make the change minimal and opt-in (the site should continue to work without Firebase config). Deliver a PR that implements the following changes:

1. Add a firebase-config.example.js file in the repository root with placeholder fields and instructions. The file should export a window.FIREBASE_CONFIG object (or similar) that users can fill with their Firebase web app config. Also include a short comment explaining where to get the config in the Firebase console.

2. Modify index.html to optionally load Firebase SDKs only when window.FIREBASE_CONFIG is present. If present, initialize Firebase app, Firestore, and (optionally) anonymous authentication. Replace the existing local addScore/loadBoard/saveBoard/renderBoard functions so that when FIREBASE_CONFIG exists, the app stores and reads leaderboard entries from a Firestore collection named "leaderboard". The Firestore query should sort by level desc, question desc, time asc, and limit to 50 entries. Keep the original localStorage implementations as a fallback when FIREBASE_CONFIG is not present.

3. Implement robust behavior:

   • If Firebase is used, show a brief console.info message indicating remote leaderboard is active.
   • If a Firestore write fails, fall back to localStorage and notify the user with a non-blocking alert or toast.
   • The UI rendering (boardTable) should be unchanged; reuse existing DOM elements.

4. Update README.md with a short section (Chinese) explaining how to enable remote leaderboard using Firebase: create Firebase project, enable Firestore, create web app, copy config into firebase-config.example.js (and rename to firebase-config.js or load directly), and recommend Firestore security rules (allow authenticated writes or anonymous auth). Keep the README short — only instructions for enabling the remote leaderboard, not full Firebase tutorial.

5. Keep changes minimal and contained to index.html, add firebase-config.example.js, and README.md. Ensure the app continues to work in the absence of firebase-config.js.

Please create a branch, modify files, and open a pull request with a clear description of the changes and how to configure Firebase. Do not commit actual Firebase API keys; only include the example file with placeholders. Ensure code is commented so a developer can find the Firebase-specific code easily.

Files to change/add:

• index.html (modify leaderboard functions and add optional firebase initialization)
• firebase-config.example.js (new)
• README.md (update with short instructions)

Make sure the PR title and description are clear and concise. Include any migration notes if applicable.

This pull request was created as a result of the following prompt from Copilot chat.

Issue: The game currently stores leaderboard data in localStorage, so users visiting the GitHub Pages site cannot see each other's scores. Task: Add an optional remote leaderboard implementation using Firebase Firestore, with a safe fallback to localStorage when Firebase is not configured. Make the change minimal and opt-in (the site should continue to work without Firebase config). Deliver a PR that implements the following changes:

1. Add a firebase-config.example.js file in the repository root with placeholder fields and instructions. The file should export a window.FIREBASE_CONFIG object (or similar) that users can fill with their Firebase web app config. Also include a short comment explaining where to get the config in the Firebase console.

2. Modify index.html to optionally load Firebase SDKs only when window.FIREBASE_CONFIG is present. If present, initialize Firebase app, Firestore, and (optionally) anonymous authentication. Replace the existing local addScore/loadBoard/saveBoard/renderBoard functions so that when FIREBASE_CONFIG exists, the app stores and reads leaderboard entries from a Firestore collection named "leaderboard". The Firestore query should sort by level desc, question desc, time asc, and limit to 50 entries. Keep the original localStorage implementations as a fallback when FIREBASE_CONFIG is not present.

3. Implement robust behavior:

   • If Firebase is used, show a brief console.info message indicating remote leaderboard is active.
   • If a Firestore write fails, fall back to localStorage and notify the user with a non-blocking alert or toast.
   • The UI rendering (boardTable) should be unchanged; reuse existing DOM elements.

4. Update README.md with a short section (Chinese) explaining how to enable remote leaderboard using Firebase: create Firebase project, enable Firestore, create web app, copy config into firebase-config.example.js (and rename to firebase-config.js or load directly), and recommend Firestore security rules (allow authenticated writes or anonymous auth). Keep the README short — only instructions for enabling the remote leaderboard, not full Firebase tutorial.

5. Keep changes minimal and contained to index.html, add firebase-config.example.js, and README.md. Ensure the app continues to work in the absence of firebase-config.js.

Please create a branch, modify files, and open a pull request with a clear description of the changes and how to configure Firebase. Do not commit actual Firebase API keys; only include the example file with placeholders. Ensure code is commented so a developer can find the Firebase-specific code easily.

Files to change/add:

• index.html (modify leaderboard functions and add optional firebase initialization)
• firebase-config.example.js (new)
• README.md (update with short instructions)

Make sure the PR title and description are clear and concise. Include any migration notes if applicable.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.