This a multi-round sketching game built using ReactJS, and utilizes @googlecreativelab/quickdraw-dataset machine learning dataset to recognise the user's drawings.
This app has been tested and working with node 10.16.0 - 14.17.0 on MacOS, please ensure you have a version installed within this range.
To install:
npm install # Install dependencies
npm run start # Run gameThe rounds are timed. For each round, a time counts down from 20 seconds.
If by the end of those 20 seconds the player has failed to draw a passable sketch, no points will be awarded, and the player will proceed to the next round.
If the player passes the round by sketching a passable drawing, a point is awarded, and the player advances to the next round.
The final view displays the amount of points obtained, as well as a text that indicates whether the player has won or lost the game.
This app uses React-Router to navigate between the start screen and game-play.
I made appropriate use of the following React functions and patterns:
- Both class-based and function-based components
- Custom hooks
- Appropriate use of the useReducer() hook
- Appropriate use of side-effects
- i.e. the useEffect() hook, or the componentDidMount() lifecycle methods
- Use of Context to avoid "prop-drilling"
- Three test suites that test the features of the UI
- Create & add gameplay GIFs to docs
- Add more integration / unit tests for game & results views
- Make the score a factor in the time allowed per round ("hard" mode)
- Improve / expand detection and no. of recognised things
- Move styles out of JSX and use
styled-components - Improve / polish the window size + mobile platform usability