LinguaFender 🎮

A retro-styled language learning game that combines the excitement of space invaders with educational vocabulary training. Defend Earth by translating falling alien words in this engaging 8-bit inspired experience.

Features

🎯 Game Mechanics

• Space Invaders-Style Gameplay - Translate falling alien words before they reach Earth
• Multiple Difficulty Modes:
  • 🌱 Beginner: Slower speed, 5 lives, extended learning time
  • ⚡ Normal: Balanced gameplay with 3 lives
  • 🔥 Expert: Fast-paced challenge with only 2 lives
• Progressive Difficulty - Speed increases gradually with each level
• Combo System - Chain correct translations for bonus points
• Lives System - Strategic gameplay with limited chances

🌍 Language Learning

• Dynamic Translation System - Powered by Google Translate API
• Multiple Languages - Support for various language pairs
• Contextual Learning - Words appear with difficulty-appropriate vocabulary
• Progress Tracking - Monitor your learning advancement across languages

🎨 Retro Aesthetics

• Pixel-Perfect 8-bit Design - Authentic retro gaming visuals
• Press Start 2P Font - Classic arcade typography
• Neon Color Palette - Electric blue, hot pink, and neon green accents
• Smooth Animations - Particle effects and transitions
• Responsive Design - Optimized for both mobile and desktop

🔧 Technical Features

• Firebase Authentication - Save progress across devices
• Real-time Score System - Instant feedback and leaderboards
• Progressive Web App - Install and play offline
• TypeScript - Type-safe development
• Next.js 14 - Modern React framework

Tech Stack

• Frontend: Next.js 14, React, TypeScript, Tailwind CSS
• Authentication: Firebase Auth
• Database: Firebase Firestore
• Translation: Google Translate API
• Deployment: Vercel
• Styling: Tailwind CSS with custom retro components

Getting Started

Prerequisites

• Node.js 18+
• Firebase account
• Google Cloud account (for Translate API)

Installation

1. Clone the repository:

git clone https://github.com/yourusername/linguafender.git
cd linguafender

2. Install dependencies:

npm install

3. Set up environment variables:

cp .env.local.example .env.local

Edit .env.local with your Firebase and Google Cloud credentials:

NEXT_PUBLIC_FIREBASE_API_KEY=your_firebase_api_key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id
GOOGLE_TRANSLATE_API_KEY=your_translate_api_key

4. Run the development server:

npm run dev

5. Open http://localhost:3000 in your browser.

Game Controls

Desktop

• Type translations using your keyboard
• Enter to submit answers
• Escape to pause/resume

Mobile

• Touch the translation input field
• On-screen keyboard for typing
• Tap submit button to confirm answers

Difficulty Modes

Mode	Speed	Lives	Spawn Rate	Score Multiplier
Beginner	0.8x	5	4 seconds	0.8x
Normal	1.2x	3	3 seconds	1.0x
Expert	2.0x	2	2 seconds	1.5x

Firebase Setup

1. Create a new Firebase project at Firebase Console
2. Enable Authentication with Email/Password
3. Create a Firestore database
4. Add your domain to authorized domains
5. Copy configuration to .env.local

Google Translate API Setup

1. Create a project in Google Cloud Console
2. Enable the Cloud Translation API
3. Create credentials (API Key)
4. Add the API key to your .env.local file

Deployment

Vercel (Recommended)

1. Connect your GitHub repository to Vercel
2. Add environment variables in Vercel dashboard
3. Deploy automatically on push to main branch

Manual Deployment

npm run build
npm run start

Development

Project Structure

linguafender/
├── app/
│   ├── globals.css
│   ├── layout.tsx
│   └── page.tsx
├── lib/
│   ├── firebase.ts
│   └── translations.ts
├── hooks/
│   ├── useAuth.ts
│   └── useGameStats.ts
├── components/
│   ├── GameHeader.tsx
│   ├── GameArea.tsx
│   ├── FallingWord.tsx
│   └── ...
└── public/
    └── fonts/

Adding New Languages

1. Update the language list in lib/translations.ts
2. Add language-specific vocabulary sets
3. Test translation accuracy
4. Update UI language selector

Custom Styling

The game uses Tailwind CSS with custom retro-themed components. Key design tokens:

• Colors: Neon green (#00FF41), Electric blue (#0099FF), Hot pink (#FF0080)
• Font: Press Start 2P for headings, system fonts for body text
• Spacing: 8px grid system
• Animations: CSS transitions with easing functions

Contributing

1. Fork the repository
2. Create a feature branch: git checkout -b feature-name
3. Commit changes: git commit -am 'Add feature'
4. Push to branch: git push origin feature-name
5. Submit a Pull Request

Development Guidelines

• Follow TypeScript best practices
• Use Tailwind CSS utilities over custom CSS
• Test on multiple devices and screen sizes
• Maintain the retro aesthetic consistency
• Add proper error handling for API calls

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• Inspired by classic arcade games
• Built with modern web technologies
• Community feedback and contributions
• Retro gaming aesthetic principles

Support

• 📧 Email: support@linguafender.com
• 🐛 Issues: GitHub Issues
• 💬 Discussions: GitHub Discussions

---

Made with ❤️ for language learners and retro gaming enthusiasts