Skip to content

wdudek82/find-the-pair-react

Repository files navigation

Find the Pair

http://pairs.wojtekdudek.xyz

Hosted

  • DigitalOcean VPS
  • Nginx
  • http-server

Tools Used

  • React 16.4
  • Redux / react-redux
  • Styled Components
  • Flow (static type checker)
  • ESLint

ToDo

  • create a sandbox Square component with div that will rotate in x axis on click event - each side should have a different color
  • Square component should return to it's original position after a specified amount of time
  • images will return to initial position only if two are selected
  • and only two images may be activated at the same time
  • create random array of cards (odd number, 2 for each selected image)
  • allow player to choose game's board size
  • add reset button
  • restyling
  • make it fully responsive
  • add animation for SuccessModal (to appear & disappear)
  • while responsive, it's still not to convenient to play on small screen - resize cards depending on viewport size
  • gameReducer cleanup - now it's messy and ugly (extract, when necessary, helper functions)...
  • add prettier animations for SuccessModal?
  • add timer
  • add warning when player tries to change board size during the game
  • add score table (top x)
  • move state to Redux store
  • add persistence (localstore would be best here, I guess)
  • add themes (plants, animals, GoT characters, etc...)
  • add tests ;D

Bugs

  • - number of tries is incremented after timeout (hence the delay) - should be increased immediately
  • - success modal needs to be centered vertically (now its position depends on board size)
  • - ~~~clicking on matched images multiple times increments "matched" counter~~~
  • - ~~~successfull match must reset timeout~~~

About

Find the Pair game (React)

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published