CS160 Project Team 10

Project Overview

This project is a web-based messaging and gaming platform featuring multiple mini-games built with React (frontend), Node.js/Express (backend), and Unity (games). The platform includes user authentication, leaderboards, forums, game history, and chat functionality.

Tech Stack

Frontend

• React (v19.2.4) - UI framework
• Vite (v8.0.1) - Build tool and development server
• React Router DOM (v7.13.1) - Client-side routing
• Axios (v1.15.2) - HTTP client for API requests
• Socket.io Client (v4.8.3) - Real-time communication
• React Unity WebGL (v10.1.6) - Unity game integration

Backend

• Node.js - Runtime environment
• Express (v5.2.1) - Web framework
• MongoDB - NoSQL database
• Mongoose (v9.3.1) - MongoDB object modeling
• Socket.io (v4.8.3) - Real-time bidirectional communication
• JWT (v9.0.3) - JSON Web Tokens for authentication
• bcryptjs (v3.0.3) - Password hashing
• CORS (v2.8.6) - Cross-origin resource sharing

Games

• Unity - Game engine for 2D/3D game development
• C# - Programming language for Unity scripts

Development Tools

• ESLint - Code linting
• Vite Plugin React - React integration for Vite
• Git - Version control

Prerequisites

Before running this project locally, ensure you have the following installed:

• Node.js (version 16 or higher) - Download here
• MongoDB - Download here
• Unity Hub and Unity Editor (for developing/modifying Unity games) - Download here
• Git - Download here

Installation

1. Clone the repository:

   git clone https://github.com/justin2186/CS160ProjectTeam10.git
   cd CS160ProjectTeam10

2. Install frontend dependencies:

   cd frontend
   npm install
   cd ..

3. Install server dependencies:

   cd server
   npm install
   cd ..

4. Set up environment variables:

   • Create a .env file in the server/ directory
   • Add the following variables:

     MONGODB_URI=mongodb://localhost:27017/cs160project
     JWT_SECRET=your_jwt_secret_here
     PORT=3001
     

5. Start MongoDB:

   • Make sure MongoDB is running on your local machine (default port 27017)

Running the Project

1. Start the backend server:

   cd server
   node index.js

   The server will run on http://localhost:3001

2. Start the frontend development server:

   cd frontend
   npm run dev

   The frontend will run on http://localhost:5173 (or similar Vite dev server port)

3. Open your browser and navigate to the frontend URL

Project Structure

• frontend/ - React application with Vite
• server/ - Node.js/Express backend with MongoDB
• SpartanPlinko/ - Unity project for the Spartan Plinko game
• JumpJester/ - Unity project for the Jump Jester game
• SoaringDino/ - Unity project for the Soaring Dino game
• LightRush/ - Unity project for the Light Rush game
• frontend/public/games/ - Built WebGL games (SpartanPlinko, JumpJester, SoaringDino, LightRush)

Games Documentation

SpartanPlinko

Description: Spartan Plinko is a single-player game where the player plays 5 rounds of Plinko with the goal of trying to maximize their earnings while avoiding bankruptcy.

Controls: Use the mouse to interact with the button elements in the 'Bet Amount' Panel
Use the mouse to interact with the 'LOW,' 'MED,' 'HIGH,' and 'BET' buttons.

Objective: The player's goal is to survive all 5 rounds of Plinko without getting bankrupt.
The player's goal is to maximize money earned by the end of the 5 rounds.

Features: There is a Plinko Board where a ball will randomly drop anywhere above the board after the user presses the 'BET' button.
The 'BET' button confirms the current bet and will be the amount that gets multiplied by the multiplier in whatever bucket the ball lands in during that specific round.
There is a 'MIN' and 'MAX' button that sets the current bet amount to a set minimum amount of 100 and a maximum amount based on the player's current balance, respectively.
There is a '-' and '+' button that increments the current bet amount by '-10' and '+10' respectively.
There is a 'LOW,' 'MED,' and 'HIGH' button that adjusts the bucket multipliers in the Plinko Board. There is 3 distinct sets of bucket multipliers in total, one for each button.
There is a Round indicator that alerts the player of the current round.

Development Notes: Reference Tutorial: https://youtu.be/MfM3X18MQIg?si=q-I3XZVfGz6BcBhN
Background Music: https://freesound.org/people/Mrthenoronha/sounds/511892/

Jump Jester

Description: Jump Jester is a 2D platformer where the player is a Jester who has to jump on multiple platforms and avoid different enemy variants to get to the highest elevations.

Controls: 'A' and 'D' keys or left and right arrow keys to move the Jester left or right Spacebar to jump (the longer spacebar is held, the higher the Jester jumps)

Objective: Reach the highest elevation that you can before getting eliminated by an enemy or falling below

Features: Mute/Unmute audio + interactive buttons for navigation between main menu scene and game scene, player movement mechanics, procedurally generated platforms/enemies, player wraps around screen, elevation score tracked and submitted, and player/enemy/(weak)platform animations

Development Notes: Player/Enemy sprites + animations were made by Segnah: https://segnah.itch.io/
Ground/Platform/Decoration sprites made by Cainos: https://cainos.itch.io/pixel-art-platformer-village-props
Text font for labels made by YukiPixels: https://assetstore.unity.com/publishers/122542
Sound effects from Pixabay, from the freesound_community account: https://pixabay.com/users/freesound_community-46691455/
UI buttons (specifically the mute/unmute button) made by Kicked-in-Teeth: https://kicked-in-teeth.itch.io/button-ui
Background scenery art made by Free Game Assets (GUI, Sprite, Tilesets): https://free-game-assets.itch.io/nature-landscapes-free-pixel-art

Soaring Dino

Description: SoaringDino is a 2D side-scrolling runner game where the player controls a dinosaur that jumps across platforms, collects coins, and avoids flying obstacles while trying to survive as long as possible.

Controls: Use the spacebar to jump. The player can jump once from the ground and once more in the air. Use the mouse to interact with menu buttons, restart buttons, and leaderboard/navigation buttons.

Objective: The goal is to earn the highest score possible by surviving, collecting coins, and avoiding obstacles. The player loses points when they die, then respawns and continues playing.

Features: The game includes an endless running player, randomly spawning platforms, collectible coins, flying obstacles, score tracking, death/respawn logic, audio controls, and leaderboard integration. Collecting a coin adds 10 points to the score. Getting hit by an obstacle or dying subtracts 25 points. The score pauses when the player dies and resumes after the player respawns. The game also includes UI elements such as a timer, score display, restart/game over state, and leaderboard submission through Reach.

Development Notes: All the Sprites were found on itch.io: https://itch.io/ Background music can be found on Pixabay: https://pixabay.com/ Reference for creating the game: https://youtube.com/playlist?list=PLUNW2q_AhRbdoO6oaIasVH9cf3bLKfMDS&si=PMvy8kStHiv-pAmG

Light Rush

Description: Light Rush is a single-player game where the player must collect 6 coints as fast as they can while avoiding enemies and figuring out the maze to make it to the the finish line which is the goal.

Controls: The up, down, left, and right arrow keys are used to move the player around the maze and to help the player avoid enemies.

Objective: Collect all the coins, avoid the enemies, and get out of the maze as fast as possible to get the highest score! The faster the player is able to get out of the maze, the more points they score!

Features: There is a start game button, at the end of the game there is a restart game which takes you to the start game screen and there is also a save scores button which saves your score to the leaderboard! There is enemy movement, there are hitboxes so that if the player gets hit it is game over. There are coin objects that need to be collected. There is a timer that keeps track of how long you have left to get out of the maze and what your score would be if you left now. There is also a textbox that tracks the amount of coins you have picked up so far.

Development Notes: Reference Tutorial: https://www.youtube.com/watch?v=yGidpBVWPx0
Player movement: https://learn.unity.com/course/2d-beginner-adventure-game/unit/player-character-and-movement/tutorial/OLD-set-up-a-2d-player-character?version=2022.3
Sprites: https://assetstore.unity.com/packages/2d/environments/free-platform-game-assets-85838
Music: https://assetstore.unity.com/packages/audio/music/25-fantasy-rpg-game-tracks-music-pack-240154 Background: https://claude.ai