BiscType - Typing Game with Firebase Leaderboard

A beautiful typing game with real-time leaderboards powered by Firebase Firestore.

Features

• Three Game Modes: Normal, Endless, and Accuracy Challenge
• Real-time Leaderboards: Powered by Firebase Firestore
• User Profiles: XP, levels, and game history
• Beautiful UI: Pixel art effects and dark/light theme
• Responsive Design: Works on desktop and mobile

Firebase Setup

1. Create a Firebase Project

1. Go to Firebase Console
2. Click "Create a project" or "Add project"
3. Enter a project name (e.g., "bisctype-typing-game")
4. Follow the setup wizard (you can disable Google Analytics if not needed)

2. Enable Firestore Database

1. In your Firebase project, go to "Firestore Database"
2. Click "Create database"
3. Choose "Start in test mode" (for development)
4. Select a location close to your users
5. Click "Done"

3. Get Firebase Configuration

1. In your Firebase project, click the gear icon ⚙️ next to "Project Overview"
2. Select "Project settings"
3. Scroll down to "Your apps" section
4. Click the web icon (</>)
5. Register your app with a nickname (e.g., "BiscType Web")
6. Copy the firebaseConfig object

4. Update Configuration

1. Open firebase-config.js
2. Replace the placeholder values with your actual Firebase configuration:

const firebaseConfig = {
  apiKey: "your-actual-api-key",
  authDomain: "your-project-id.firebaseapp.com",
  projectId: "your-project-id",
  storageBucket: "your-project-id.appspot.com",
  messagingSenderId: "your-messaging-sender-id",
  appId: "your-app-id"
};

5. Set Up Firestore Security Rules

In your Firebase Console, go to Firestore Database > Rules and update the rules:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // Allow read/write access to leaderboards
    match /leaderboards/{leaderboardType}/entries/{entryId} {
      allow read, write: if true;
    }
    
    // Allow read/write access to user profiles
    match /userProfiles/{username} {
      allow read, write: if true;
    }
  }
}

Note: These rules allow public read/write access. For production, implement proper authentication and security rules.

Running the Game

1. Open index.html in a web browser
2. Enter a username to start playing
3. Choose a game mode and begin typing!

File Structure

Typing Game/
├── index.html              # Main HTML file
├── script.js               # Game logic
├── styles.css              # Styling
├── firebase-config.js      # Firebase configuration
├── firebase-service.js     # Firebase service functions
└── README.md              # This file

Firebase Collections

The app creates the following Firestore collections:

• leaderboards/{type}/entries - Leaderboard entries for level, wpm, and endless modes
• userProfiles/{username} - User profiles with stats and game history

Features

Real-time Updates

• Leaderboards update in real-time when other users play
• No need to refresh the page to see new scores

Fallback System

• If Firebase is unavailable, the app falls back to localStorage
• Ensures the game works even without internet connection

Data Persistence

• User profiles and leaderboards are stored in Firebase
• Theme preferences are stored locally

Troubleshooting

Common Issues

1. "Firebase is not defined" error

   • Make sure you've included the Firebase SDK scripts in index.html
   • Check that firebase-config.js is loaded before firebase-service.js

2. Leaderboard not updating

   • Check your Firebase configuration in firebase-config.js
   • Verify Firestore security rules allow read/write access
   • Check browser console for error messages

3. CORS errors

   • Make sure you're running the app from a web server (not just opening the HTML file)
   • Use a local server like python -m http.server or Live Server extension

Development Server

To run a local development server:

# Using Python 3
python -m http.server 8000

# Using Node.js (if you have http-server installed)
npx http-server

# Using PHP
php -S localhost:8000

Then open http://localhost:8000 in your browser.

Security Considerations

For production deployment:

1. Implement Firebase Authentication
2. Set up proper Firestore security rules
3. Enable Firebase App Check
4. Use environment variables for Firebase config
5. Implement rate limiting for leaderboard updates

License

This project is open source and available under the MIT License.