Wordverse

FBLA Game Development 2022-2023

By Bryan Lawless & Jack Houchin.

View Demo · Report Bug · Request Feature

📜 About the Project

The Wordverse is a multiplayer word game platform where players can compete against each other in a variety of different game modes, such as word scramble and pictionary. All the game modes get progressively more difficult as the player gets more points. Players are able to communicate with one another using the built-in text and voice chat system.

---

(back to top)

📝 Requirements Met

Our project meets the following requirements from the guidelines stated here: FBLA Topics.

• The game should be an executable game, either through the internet or through a local installation.
  • The game can be ran using the internet, without any download.
• The game should contain a scoreboard.
  • A scoreboard along with coin and trophy count are displayed to all players.
• The game should contain a leader board and celebratory messages.
  • The player receives messages depending on if they got a correct answer, a leader board is displayed at the end of the game.
• The game should have a minimum of three levels.
  • The word level increases in difficultly depending on the score that you have.
• The game should have an instructional display.
  • The game has a "How to Play" popup dialog on the home screen.

(back to top)

🧰 Core Technologies Used

Technology	Description	Link
	Runtime environment for JavaScript	https://nodejs.org/en/
	Static typing for JavaScript	https://www.typescriptlang.org/
	Frontend JavaScript framework.	https://vuejs.org/
	Frontend module and asset bundler.	https://vitejs.dev/
	Library for bi-directional communication.	https://socket.io/
	Database and storage solution.	https://www.mongodb.com/
	Hosting for backend codebase.	https://www.heroku.com/
	Hosting for frontend codebase.	https://vercel.com/
	Frontend CSS framework.	https://tailwindcss.com/
	STUN/TURN servers for voice calling.	https://www.twilio.com/

(back to top)

🔧 Installation

Prerequisites

• NodeJS 16+
• A MongoDB Account
• A Twilio Account

1. Clone the repo git clone https://github.com/TheLawlessDev/Wordverse.git
2. Open a terminal in the cloned folder.
3. Navigate to cd ./server in the terminal, then run npm install.
4. Repeat the previous step for the ./client folder.
5. Configure the .env files in both the ./client and ./server folder. Refer to the .env.example file in each folder for reference on how to setup these values.
6. Once configured, run npm run dev in first the ./client folder, then the ./server folder.
7. The client and server should be running on the following localhost ports:
   • Client: http://127.0.0.1:5173/
   • Server: http://127.0.0.1:5000/

(back to top)

💾 Inner Workings

This project has a lot of moving parts, the core inner-workings are explained below.

• Peer-to-peer Voice Calling Flow

  • When a player joins a game, they are given a list of other player ids that are currently in the voice chat.
  • When a player joins the voice chat, their socket id is added to the game room voice store.
  • A payload will be sent to the player in order to establish a connection with Twilio's STUN/TURN servers.
  • The player will then be prompted to provide permission in order for the game to use their microphone.
    • If they do not have a working microphone, they will be unable to join the voice chat.
  • After permission is given, the player will establish a WebRTC connection with others already in the voice chat.
  • The player will then be able to hear and speak to other players in the voice chat.
  • Upon disconnecting from the voice chat, the player will be removed from the game room voice store and the WebRTC connection will be closed.

---

• Websocket Gateway & Game Flow

  • When a player first loads onto the page, they are immediately connected to the websocket server.
    • The player will be assigned a unique socket ID, in the future this will be replaced with a persistent session token.
  • The player will receive a unique socket ID each time they connect.
  • Game Flow
    • When a player joins a game and chooses a nickname, they are added to the game room.
    • The game room is the ID of the game.
    • The UPDATE_PLAYER_LIST event is emitted to all the players in the room currently in the starting lobby.
    • The PLAYER_JOIN_SUCCESS event is emitted to the connecting player if they were able to join the game room successfully.
  • From here the player is currently waiting for the game host to start the game.
  • Once the host starts the game, the GAME_STARTING event is emitted to all players in the game room.
    • If the host unexpectedly disconnects from a game, the players are redirected to the join page.
  • The GAME_TIMER_SET event is emitted to all players in the game room.
    • A future timestamp is sent with this event to the client; the client will manage the timer. This saves server resources.
  • The players will continue to receive and send back events and data based on the game mode they are playing.
  • Once the game concludes, the GAME_OVER event will be emitted to all players in the game room.
  • All players in the game room will then be redirected to the leader board or end game screen.

(back to top)

🧹 Code Formatting and Structure

• The layout and design of the frontend and backend is adapted from CLEAN architecture principles. These design principles separate the presentation layer, logic layer, model layer, and database layer.

• Code security, style, and best practices are kept track of using DeepSource.

• Code and Variable Formatting

  • All code is formatted using Prettier and linted with eslint.
  • General variables and function arguments use camel case.
    • Example: helloWorld.
  • All constants, config or environment variables use snake case with all uppercase letters.
    • Example: HELLO_WORLD.
  • Object, map or JSON keys use snake case with all lowercase letters.
    • Example: hello_world.

(back to top)

🚧 Future Road Map

• Improve websocket infrastructure.
• Improve spam protection and security.
• Text chat.
• Peer-to-peer voice chat.
• Design improvements.
• Improve responsiveness.
• Different game-modes.
• Improve in-memory stores.
• General code cleanup and improvements.
• Switch to TypeScript.

See the open issues for a full list of proposed features as well as known issues.

(back to top)

📜 License

Distributed under the GNU Affero General Public License v3.0. See LICENSE for more information.

(back to top)

🪙 Acknowledgments

• Markdown Badges

(back to top)