jakeisnt / verde Goto Github PK

View Code? Open in Web Editor NEW

3.0 5.0 2.0 4.39 MB

make a game with react!

License: GNU General Public License v2.0

HTML 0.59% CSS 0.45% JavaScript 97.53% Nix 1.31% Shell 0.12%

react game-development game express azul

verde's Introduction

Verde

A reasonable starter kit for building React and Node.js turn-based games.

Development

This is a standard full stack JavaScript monorepo build with `yarn` and organized with lerna. Frontend and backend are found in `client/` and `server/`, respectively.

Start developing:

If you have `nix` and `direnv` set up, just open this directory. Everything will ‘just work’. Otherwise:

Make sure you have `yarn` installed globally and an `eslint` plugin, or a language server protocol plugin that will allow you to use `tsserver`, installed for your editor of choice. VSCode is your go-to option if you’re newer to software development.
Run `yarn install` in the root directory of the entire project to install all dependencies.
Run `yarn start` in the root directory to start up the hot reloading process.

Technologies

Front-end

React functional components for templating and structure. Industry standard.
CSS-in-JS (JSS): This is my personal preference, but it’s not something we have to use.

Backend

Express API with websockets. I think it’s best to use websockets and in-memory data as much as we can, because there isn’t much of a reason to create accounts and persist data yet (IMO).

Ops

All-in-one, strongly opinionated ESLint + Prettier linting and fixing. Feel free to convert errors into warnings if something is annoying you.
Some sort of deployment infrastructure

Design language

Mondrianesque, de Stijl inspired

verde's People

Contributors

Stargazers

Watchers

Forkers

tommy-mor denpang

verde's Issues

support chess

totally doable with the current game state, though may be annoying to implement the frontend
dependent on #34, as games can only have two players

import function ast to frontend directly from backend rather than serializing/deserializing

occasionally receive error 'cannot read property 'clickedLast' of undefined' when debugging locally

get error 'cannot read property clickedLast of undefined' when:

to reproduce (sometimes?):

start game in client a and take some actions
connect with client b
take more actions in client a

after adding 1 in current game, cannot get negative number for score and vice versa

after creating a game and clicking the '+1' button the score cannot drop below 0; likewise, if the '-1' button is initially pressed, the score cannot drop below 1, though '+1' and '-1' appear to otherwise function as intended in both scenarios

improve css on mobile

supoort sushi go

should we show same error after refreshing main page?

when refreshing main page, url doesn't change, so any previous error (as stored in url) will still be shown. it's not necessarily relevant after a refresh so this might be cconfusing to users

Enable private game state

Store private game logic that can be seen by the game configuration language on the server side but not by any client.

upgrade backend to es6

it is currently a commonjs module and can likely be upgraded to use - at the least - consistent import and export syntax.

ending game with current default game (count to 10) and one player results in undefined player

this is likely because no players exist after the game is over, so there is no player to reference
quick fix - null checking more - has been made, but there is more to investigate here

winner is prematurely declared

when the moderator ends the game, regardless of score the mod is displayed as the winner

in current game implementation, both buttons add 1 to player score

one button should subtract, as the buttons are '+1' and '-1'!

Abstract logic for determining if the user is a spectator, a moderator, etc

I don't think it makes sense to cache these, but these calculations shouldn't be repeated many times on the front-end.

Enable private user state

Currently, the state of each user is broadcast to every single user (or not at all). This is not ideal. Users need to be able to have some private state (for example, their hand in a game of cards), as well as a public state that is visible to everyone.

This requires:

A way to individually message users or a way to encrypt data that only one of the users can decrypt
A way to separately store public and private user state in the Game engine
API modifications to make it easy to work with. Explore existing ideas for this!

Worth considering:

More settings for the game API to enable/disable these behaviors

require minimum # users to start game

with one player, immediately ending game results in server error and undefined player

use emoji aesthetic

https://www.are.na/block/10509270/

switch to bolt for workspace management

https://github.com/boltpkg/bolt

hide spectate button when user is the only player or spectator

support one night ultimate werewolf

show network error to client when http requests fail

ie: client is loaded but the user doesn't have internet connection or the server isn't started, and the client isn't currently in a room

catch the http error rather than letting it silently fail and print to console
send the client back to the main page
show the client an error telling them that they've been disconnected from the network

clients joining a room after game starts should receive information about the current game

currently, if the game is started by some player 'a', if some player 'b' joins the game and player 'a' doesn't take any actions, player b is shown 'waiting for the game to start...' rather than the current gameState, as the websocket hasn't sent the game state to player b yet

implement chopsticks

good starter game with motivation for extending the capability of the api

use lerna for workspace management

add popup for GDPR and cookies

'add to game' button still visible to mod when a non mod player is an active member of a game

support cards against humanity

hot reload nodejs server during development

annoying to have to restart the nodejs server every time a change is made. would much rather just punch in the code and have it reload for us

update and enhance documentation

to onboard people onto the project and encourage greater participation, documentation has to be enhanced and updated to ensure that people new to javascript, react, whatever they want to work on in this repository is easy to use and well documented

Improve provided hooks

"TODO: combination of useUser and useSocket hook that provides some user data"
Is this worthwhile?

support texas hold em

swap json serialization for efficient binary spec

more space efficient and much more quickly parsed

this branch of capnproto looks good capnproto/capnproto#1229
protobuf option (better support) protobufjs/protobuf.js#689

the maximum number of players should be presented to the person creating the room while they choose the (optional) number of players
when the maximum number of players has been reached, the server should refuse to add any more players to the game. any spectators are stuck as spectators and cannot be made players by anyone.
when the minimum number of players is not met, the game cannot be started until there are at least that many users; the 'start game' button should be greyed out with a tooltip or other message on the client side until the minimum number of players constraint has been met.