Skip to main content

​
Quick Start Guide

Get Grimoire Infini running locally in just a few simple steps.

​
Prerequisites

Before you begin, make sure you have:

Node.js

Version 18 or higher

Git

For cloning the repository

Firebase Account

Free tier is sufficient

Code Editor

VS Code recommended

​
Step 1: Clone and Install

Clone the repository and install dependencies: 
# Clone the repository
git clone https://github.com/Martriss/GPE.git
cd GPE/front

# Install dependencies
npm install
The installation might take a few minutes as it downloads all necessary packages including Three.js and Firebase SDK.

​
Step 2: Firebase Setup

​
Create Firebase Project

  1. Go to Firebase Console
  2. Click Create a project
  3. Follow the setup wizard

​
Configure Firestore

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

​
Get Firebase Config

  1. Go to Project Settings (gear icon)
  2. Scroll down to Your apps section
  3. Click Add app → Web
  4. Register your app and copy the config object

​
Add Environment Variables

Create a .env.local file in the front directory: 
# front/.env.local
VITE_FIREBASE_API_KEY=your_api_key
VITE_FIREBASE_AUTH_DOMAIN=your_project_id.firebaseapp.com
VITE_FIREBASE_PROJECT_ID=your_project_id
VITE_FIREBASE_STORAGE_BUCKET=your_project_id.appspot.com
VITE_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
VITE_FIREBASE_APP_ID=your_app_id

​
Step 3: Start Development

Run the development server: 
npm run dev

​
Step 4: Test Multiplayer

To test the multiplayer functionality:
  1. Open multiple browser tabs or windows pointing to http://localhost:5173
  2. Create or join a room in each tab
  3. Move cards in one tab and watch them sync in the others
  4. Flip cards to test real-time state synchronization
Use incognito/private browsing windows to simulate different users more effectively.

​
What’s Next?

Now that your game is running, explore these key areas:

Architecture Overview

Understand how the system works

Multiplayer Controller

Deep dive into real-time sync

3D Rendering

Learn about Three.js integration

Customization

Modify cards and game rules

​
Troubleshooting

  • Verify your environment variables are correctly set
  • Check that Firestore is enabled in your Firebase project
  • Ensure your Firebase project has the correct domain in authorized domains
  • Check the browser console for JavaScript errors
  • Verify multiple clients are connected to the same room ID
  • Confirm Firestore security rules allow read/write access
  • Ensure your browser supports WebGL
  • Try disabling browser extensions that might interfere
  • Check for GPU/graphics driver updates
  • Make sure you’re in the front directory
  • Try deleting node_modules and running npm install again
  • Check that port 5173 is not in use by another application

​
Need Help?

Join our Community

Found a bug or need help with Grimoire Infini? Open an issue on GitHub and we’ll help you out!