https://github.com/grayhatdevelopers/vite-react-ts-multiplayer-game

Multiplayer game template built in Vite, React, TypeScript and PlayroomKit 🚀
https://github.com/grayhatdevelopers/vite-react-ts-multiplayer-game

boilerplate playroom playroom-kit playroomkit react template vite

Last synced: 3 months ago
JSON representation

Multiplayer game template built in Vite, React, TypeScript and PlayroomKit 🚀

• Host: GitHub
• URL: https://github.com/grayhatdevelopers/vite-react-ts-multiplayer-game
• Owner: grayhatdevelopers
• License: other
• Created: 2024-01-23T16:02:43.000Z (10 months ago)
• Default Branch: main
• Last Pushed: 2024-07-18T08:57:12.000Z (4 months ago)
• Last Synced: 2024-07-18T11:09:53.207Z (4 months ago)
• Topics: boilerplate, playroom, playroom-kit, playroomkit, react, template, vite
• Language: TypeScript
• Homepage:
• Size: 518 KB
• Stars: 14
• Watchers: 0
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# %projectName%

A bootstrapped game template with multiplayer with PlayroomKit, built with multiplayer routing in mind.

Best used with [create-multiplayer-game](https://github.com/grayhatdevelopers/create-multiplayer-game).

## Features

- **🎮 Multiplayer, out-of-box**: Batteries-included for multiplayer, using [PlayroomKit](https://docs.joinplayroom.com/setup). If the host navigates to a screen, **everyone navigates**! (This, of course, is controlled through a variable called `broadcast`. If broadcast is false, only the user themselves navigate to the route)

- **🚧 Silent routing**: This game follows "silent" routing patterns. The game's phases are controlled by the route, however the route isn't visible to the player (it's stored in memory), giving a nice feel. Players only see `/play`.

- **🐡 PWA Compatible**: Using [PWABuilder](https://www.pwabuilder.com/), deploy this game to App Store, Play Store, Microsoft Store, and Quest, with just a bit of configuration!

- **⚡️ Asset Preloading**: Integrated some basic asset loading, to prevent players from seeing loading screens for images.

- **✨ Asset Optimization and Caching**: Integrated some heavy PWA caching to ensure the game doesn't need to do too many unnecessary network calls. Also added some image optimization to compress images before builds.

- **📺 Template screens**: This template comes with some nice screens which you might want to have in your game. Completely unstyled.

For reference on how a template like this can turn into a final product, check out:

- [Guess the Language](https://guessthelanguage.grayhat.studio/)

- [Tic-Tac-Toe: Infinity](https://tictactoeinfinity.grayhat.studio/)

- [Meme, Chat, Robots!](https://memechatrobots.grayhat.studio)

- [Death by AI](https://deathbyai.gg)

## Available Scripts

In the project directory, you can run:

### `pnpm dev`

Runs the app in the development mode.\

Open [http://localhost:3000](http://localhost:3000) to view it in your browser.

The page will reload when you make changes.\

You may also see any lint errors in the console.

Preferably, Player 1 should be on your computer.

You can also use your phone as Player 2, as long as your phone and your computer are on the same network.

### `pnpm build`

Builds the app for production to the `build` folder.\

It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.\

Your app is ready to be deployed!