Tetrarena

jmischler72

Monorepo for Tetrarena - Multiplayer Game. A multiplayer game based on tetris made with Svelte, PixiJS and Colyseus

tetrarena

A multiplayer game based on tetris made with Svelte, PixiJS and Colyseus
Explore the docs »

View Demo · Report Bug ·

Table of Contents

About The Project
- Built With
Getting Started
- Prerequisites
- Installation
Architecture of the repo
Usage
Contributing
License
Contact
Acknowledgments

About The Project

Welcome to the tetrarena repo. This project aims to bring the classic Tetris experience to both single-player and competitive multiplayer modes. Here’s an overview of what this project offers:

Game Overview

This game recreates the classic Tetris experience, but with exciting new features to cater to both solo players and competitive enthusiasts:

Single-Player Mode: Enjoy the traditional Tetris gameplay on your own. Perfect for practicing your skills or playing at your own pace.
Multiplayer Ranked Matches: Queue up for a ranked game and compete against other players. Your rank will increase or decrease based on your performance in matches, adding a competitive edge to your Tetris experience.
Custom Rooms: Create your own game room with customizable options. Invite friends or other players to join and enjoy a personalized Tetris match with your preferred settings.

User Authentication

When you first enter the game, you'll be logged in as a guest, allowing you to jump straight into the action. However, you can also create an account using your email to unlock additional features:

Change Username: Personalize your gaming experience by choosing your unique username.
Save Progress: Keep track of your game statistics and rank across different sessions.

(back to top)

Built With

(back to top)

Architecture of the repo

This project is structured as a monorepo, meaning both the client and server codebases are housed within a single repository. This setup facilitates easier management of dependencies, shared code, and versioning, ensuring consistency across the entire project.

The tools used are:

PNPM: package manager that also provides a workspace feature
TurboRepo: Cache operations such as building

For the different workspaces, there are two apps:

client
server

And two packages:

core: all the game logic
shared: shared types or functions between client and server

This repo also uses husky to lint commit messages, they must conform to conventional commits specification.

Getting Started

This is an example of how you may give instructions on setting up your project locally. To get a local copy up and running follow these simple example steps.

Prerequisites

This project uses pnpm as the package manager

Pnpm
```
npm install -g pnpm
```

Installation

Below is an example of how you can instruct your audience on installing and setting up your app. This template doesn't rely on any external dependencies or services.

Clone the repo

git clone https://github.com/jmischler72/tetrarena.git

Install PNPM packages
```
pnpm install
```

Build packages

pnpm turbo run build --filter @jmischler72/shared --filter @jmischler72/core

Configuration

To enable authentication and real-time data storage, you'll need to set up a Firebase project and configure both the Firebase SDK for your client application and the Firebase Admin SDK for your server.

Create a Firebase Project

Go to Firebase Console
Add a New Project: Click on the "Add project" button.
Project Name: Enter a name for your project (e.g., "Tetris Multiplayer Game").
Enable Google Analytics (Optional): You can choose to enable Google Analytics for your project.
Create Project: Click "Create project" and wait for Firebase to set it up.

Configure the firebase project

Once you have created the project you need to activate Firebase Authentication with these connections methods:

Anonymous
Mail/Password

You will also need to activate Realtime Database and enter the rules that you can find in the file firebase.rules in the root of the repo

Configure client side

You then need to go to the project settings and create a web application, then copy the firebaseConfig and replace the config from apps/client/src/lib/data/config/firebase.config.ts

It should look like that with your credentials:

export const firebaseConfig = {
  apiKey: "",
  authDomain: "",
  databaseURL: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
  measurementId: ""
};

Configure server side

You need to go to the firebase console, in the settings go to Service Accounts, click generate new private key.

Then copy the file .env.example from apps/server to .env and copy from the file you just downloaded the variable needed in the environment file, you will also need DATABASE_URL shown in firebase console

(back to top)