tysiachnyi

the-floor

TypeScriptOther

This is a two-player voice guessing game inspired by "The Floor". Each player takes turns guessing images from categories.

View on GitHub
Stars
1
Forks
0
Open issues
0

The Floor - Voice Recognition Game

A voice-controlled guessing game inspired by "The Floor" where players use speech recognition to identify images. Built with Next.js, React, and the Web Speech API.

🎮 Game Overview

Players take turns guessing images by speaking the correct answer aloud. The game uses Russian speech recognition to detect player responses and automatically progresses through questions.

Features

  • Voice Recognition: Real-time speech-to-text
  • Progressive Gameplay: Automatic question progression after correct answers
  • Visual Feedback: Success animations and game state indicators
  • Responsive Design: Modern UI with Tailwind CSS
  • State Management: Clean React state machine pattern

🚀 Getting Started

Prerequisites

  • Node.js 18+
  • Chrome browser (recommended for best speech recognition support)
  • Microphone access

Installation

  1. Clone the repository

    git clone <repository-url>
cd the-floor

  2. Install dependencies

    npm install

  3. Run the development server

    npm run dev

  4. Open your browser Navigate to http://localhost:3000/game

🎯 How to Play

  1. Start the Game: Click the "Start (ru-RU)" button
  2. Listen for Questions: The game will display the current question
  3. Speak Your Answer: Say the correct answer clearly into your microphone
  4. Get Feedback: Correct answers show "SUPER!!!" and automatically progress
  5. Complete the Game: Answer all questions to finish

Example Gameplay

  • Question: "пицца" → Say: "пицца" → Success!
  • Question: "volkswagen" → Say: "volkswagen" → Success!

🛠️ Technical Stack

  • Framework: Next.js 14 with App Router
  • Language: TypeScript
  • Styling: Tailwind CSS
  • Speech Recognition: Web Speech API via react-speech-recognition
  • State Management: React hooks with state machine pattern

📁 Project Structure

the-floor/
├── app/
│   ├── components/
│   │   └── Button.tsx          # Reusable button component
│   ├── game/
│   │   └── page.tsx            # Main game component
│   ├── globals.css             # Global styles and theme
│   └── layout.tsx              # Root layout
├── public/                     # Static assets
└── package.json

Main game logic with:

  • Speech recognition state management
  • Question progression
  • Success feedback
  • Game completion detection

Browser Compatibility

  • Chrome: Full support (recommended)
  • Firefox: Limited support
  • Safari: Limited support
  • Edge: Full support

🐛 Troubleshooting

Speech Recognition Not Working

  1. Check browser support: Use Chrome for best compatibility
  2. Enable microphone: Allow microphone access when prompted
  3. Check permissions: Ensure microphone permissions are granted
  4. Clear browser cache: Try refreshing or clearing cache

📝 License

This project is licensed under the MIT License.

Happy Gaming! 🎮🎤