Skip to content

MarckRamon/FatesHand

Repository files navigation

Fate's Hand 🎴

A multiplayer horror browser game inspired by the Game of Life board game. Escape the darkness while a terrifying chaser pursues you!

Features

  • 🎮 Multiplayer: 2-8 players or solo with bots
  • 🎲 Board Game Mechanics: Spin, move, and draw fate cards
  • 👻 Horror Theme: Fog of war, jump scares, and a menacing chaser
  • 🃏 Card System: 15+ unique cards with different effects
  • 🌐 Real-time Sync: Firebase Realtime Database for live multiplayer
  • 🔐 Authentication: Email/password and Google sign-in

Tech Stack

  • Framework: Next.js 14 + TypeScript
  • 3D Engine: Three.js via React Three Fiber
  • Database: Firebase Realtime Database
  • Auth: Firebase Authentication
  • State: Zustand
  • Styling: Tailwind CSS
  • Audio: Howler.js

Getting Started

  1. Install dependencies

    npm install
  2. Run development server

    npm run dev
  3. Open in browser Navigate to http://localhost:3000

Firebase Setup

The Firebase configuration is already set up. The following services are used:

  • Authentication (Email/Password + Google)
  • Realtime Database

Project Structure

src/
├── app/                    # Next.js app router pages
│   ├── game/[roomId]/      # Main game page
│   ├── lobby/              # Game lobby
│   ├── login/              # Authentication
│   ├── menu/               # Main menu
│   └── profile/            # User profile
├── components/
│   ├── 3d/                 # Three.js components
│   │   ├── GameCanvas.tsx  # Main 3D canvas
│   │   ├── GameBoard.tsx   # Board tiles
│   │   ├── PlayerCharacter.tsx
│   │   ├── Chaser.tsx      # Enemy entity
│   │   └── FogSystem.tsx   # Fog of war
│   └── game/               # UI components
│       ├── CardSelector.tsx
│       ├── GameHUD.tsx
│       ├── Spinner.tsx
│       └── JumpScareOverlay.tsx
├── context/
│   └── AuthContext.tsx     # Authentication context
├── lib/
│   ├── firebase.ts         # Firebase config
│   ├── roomManager.ts      # Room CRUD operations
│   ├── cardSystem.ts       # Card generation
│   └── botAI.ts            # Solo mode bots
└── store/
    └── gameStore.ts        # Zustand game state

Deployment

This project is configured for Vercel deployment:

  1. Push to GitHub
  2. Connect repository to Vercel
  3. Deploy

License

MIT

About

A multiplayer horror browser game inspired by the Game of Life board game. Escape the darkness while a terrifying chaser pursues you!

Resources

Stars

Watchers

Forks

Contributors