Rock, Paper, Scissors
Rock,Paper,ScissorsbuiltwithReact
Overview
Rock, Paper, Scissors is the classic game built with React and TypeScript, and with a special bonus mode of Rock, Paper, Scissors, Lizard, Spock.
This is a one-player game against the computer. If the player wins, they gain 1 point. If the computer wins, the player loses one point. Scores are stored locally so that the player can continue after refreshing the browser.
STACK
- React
- TypeScript
LIVE
View siteCODE
RepositoryPurpose and Goal
This project was my solution to a Frontend Mentor Challenge and an opportunity to develop something a little different, i.e. a game. The design and image files were supplied by Frontend Mentor.
Implementation
Stack & State
This is a client-side single page application built with React. Application state is built with useReducer and useContext hooks. I chose that particular combination to create a Redux-like global state. The useReducer hook, which is called with a reducer function and initial state, returns an array with the current state and a dispatch function that lets you update the state and trigger a re-render. Both are then passed down the component tree (the entire application) by the useContext hook.
Different Modes
The mode being played (classic or bonus) and the player score in that mode are stored locally in the browser using localStorage. This way a user can leave and return to the game with their score in both modes kept intact.
Players can switch between modes by clicking the button on the bottom left, but only in-between rounds. A modal with the rules of each mode can be accessed at any time by clicking the button in the bottom right.
Result mobile screens
Game Engine
The game engine is a function with a switch statement that evaluates the concatenated string value of the user's and computer's picks (e.g. “scissorspaper”). The concatenated value is checked against the cases where the result returns either “You Win”, “You Lose” or “It's A Draw”. In the aforementioned example, “scissorspaper” would return “You Win”, because the computer's pick is concatenated to the end of the user's pick and scissors beats paper.
Users can access a diagram of the rules at any time
Lessons Learned
This project was good to practice TypeScript and trying to find a way to handle small application state rather than by using an external library. Features that could be introduced to this app include adding other variations of the game (e.g. Rock, Paper, Scissors, Fire, Water) and adding two-player capabilities using WebSocket.