/rock-paper-scissors

rps to play alone or with a friend

Primary LanguageJavaScript

Rock Paper Scissors

A simple multiplayer rock paper scissors game. People can play against the computer or against a friend by sharing a link, multiple pairs can play at the same time. generate random usernames for players (?)

Backend

  • Tech stack: Node.js with Express, Socket.io

Frontend

  • Tech stack: React with TypeScript, Tailwind

Steps

  • setup ci/cd
  • design prototype (mobile, tablet and desktop)
  • fe: setup modes (pc or friend) [don't forget tests!]
  • fe: setup game logic and basic ui
  • be: setup be stuff [don't forget tests!]

Requirements

  • multiplayer

  • light-dark-whimsical mode, other ui improvements, animations // in progress

  • mobile first & responsiveness // in progress

  • accessibility: semantic html, aria-labels // in progress

  • modes: vs computer, vs friend (share a link)

  • add score

  • performance

  • security

  • usability

Optional/advanced
  • add chat popup
  • add game history
  • add leaderboard (wins in a row)
  • add optional login to save progress
  • improve ui > create 3D graphics?

rock-paper-scissors/ ├── backend/ │ ├── src/ │ │ ├── index.js │ │ ├── gameRoomManager.js │ │ └── ... │ ├── package.json │ └── ... ├── frontend/ │ ├── src/ │ │ ├── components/ │ │ │ ├── Lobby.tsx │ │ │ ├── SinglePlayerMode.tsx │ │ │ ├── MultiplayerMode/ │ │ │ │ ├── GameRoom.tsx │ │ │ │ └── GameRoomUtils.ts │ │ │ └── RockPaperScissors.tsx │ │ ├── types/ │ │ │ ├── game.types.ts │ │ │ └── ... │ │ ├── utils/ │ │ │ ├── gameReducer.ts │ │ │ └── ... │ │ ├── api/ │ │ │ ├── gameApi.ts │ │ │ └── ... │ │ ├── ... │ │ └── index.js │ ├── package.json │ └── ... ├── README.md └── ... `