nodejavascript/card-sharks

A single player card game where you guess if the next card is higher or lower.

card-sharks

A single player card game where you guess if the next card is higher or lower.

Takeaways

Yes, this is simple. This game was made to highlight simplicity in my portfolio.

App design

• All game logic components are intentionally saved in one Site.js, to make code review easier

• Rules and high score Alert boxes can be closed by user, because user likes to know if they read it

• Implemented game wrapper with fullScreen mode so users on phone can ignore the fluff

• No local storage or cookies. All state based using React 18.x

Devops

• Images hosting on cloudinary.com to minimize hosting resources
• CI/CD is automated and hosted statelessly using self-hosted coolify.io through pushing to master on github.com/nodejavascript/card-sharks
• Uptime Kuma is used to detect downtime
• cloudflare.com for DNS, coolify.io provides SSL certificate
• analytics.google.com used for page views to determine if usage justifies new features (unless you contribute)
• Self hosted cAdvisor metrics from this docker app are exported to prometheus, and grafana is used to monitor container resource usage

LIVE https://card-sharks.nodejavascript.com

Code review

• Main game code: https://github.com/nodejavascript/card-sharks/blob/master/src/site/Site.js

Game uses one useState

• const [game, setGame] = useState()

Variables

• Score = number of correct guesses in a row during the game
• High Score = best Score, from game to game
• Sum of correct guesses are displayed to user at end of game

ButtonView

• Display if playing
• call onGuess() for higher or lower button click
  • determine next card and evaluate for Right, Wrong or Tied
  • set / display user feedback message
  • increment scores for correct guesses
  • update game state setGame()

Game uses one useEffect, for [game]

• displaying user feedback message on:
  • new game
  • user click was Right, Wrong, or Tied
  • in addition to above, display when game is over as message

CardView

• Display if playing
• Show styled playing card

GameOverView

• Display if game over
• Show user how many correct guesses in game

NewGameButton

• Dependent on game state
• Show new game when appropriate (when app starts and when game is over)
• Show restart game during game play
• Pull shuffled cards from this script

Attribution

Thank you freepik for the free flaticon.com icon 👍

Thank you @hayeah for the playing cards 👍