react-puzzle-games / 15-puzzle Goto Github PK

• I'm not sure this is possible or not in a browser, much less a mobile one
• But if it is possible, then try to solve the board using heuristics
• Save the number of moves
• When the user submits his solution, rank it compared to that number and award a high score

This is a nice way to prevent accidentally losing your progress, just have an alert on page reload only if a game is currently underway.

Not sure how it'll look on mobile, though, need to try it out and see how it feels.

The buttons and messages could do with a Material UI overhaul. The nice part about using it is it's already great on mobile devices so no need to spend a lot of effort on that front.

Will need a mockup though before starting work.

Unlike the Reset button, the New game button should start the game with a new random order of the tiles.

It would be nice to also see how much time has elapsed since you started the game.

On huge displays the tiles are quite small. Introduce a few breakpoints once we have a newer material-ui version.

Hello,

I'm creating a race car game and researching different ways in which the timers are implemented in the games created in react so I wanted to know what made you use setInterval vs requestAnimationFrame?

The method of updating CSS top and left is not sufficiently performant, translateX and translateY will lead to a much smoother animation.

We need a quick way to win the game as debugging and testing out the game is getting tricky 😄

Ideally a keyboard combination should be used to instantly trigger the win game state, and it should be something obscure so it doesn't get accidentally triggered by users.

WIP

Reasons:

• not enough flexibility over Babel transforms
• can't upgrade dependencies
• can't use any other linting without ignoring certain rules (like no implicit imports)
• no option but to use CSS
• no hot module reload

Steps:

• yarn eject
• Keep the same targets to ensure backwards compatibility
• Simplify configuration:
  • Babel
  • Webpack

It would be nice to have the same footer like in the other games.

• new target in package.json called "lint"
• runs eslint src/* --ext js,jsx
• add this to pre-commit under lint-staged field just after prettier runs

I'm thinking the arrow keys and wasd should be used.

How I see it:

• at any moment, you have two or three tiles that can move, depending on the grid
• the keypress should determine which tile moves, if a tile that can move to the direction indicated by the key exists, then it should move, otherwise, move the next tile

Still wondering if there are more edge cases here...

Define Game states as Symbols and check the game status. Implement "grid lock" after game ended.

• Game progress should be saved to LocalStorage
• This will allow users to continue the game even if they close their browser/tab
• What needs to be saved?
  • Some sort of user id, we don't want a full login system yet so we'll have to generate a UUID for him and save it
  • It's 2017, we don't care about browsers not supporting LocalStorage, so no cookie workarounds 😄
  • The game needs to be paused when leaving the app and the state must be persisted
    • This is required because otherwise you will reload the game and the timer will start immediately and it will be confusing
  • Every move a user makes needs to be saved
    • This will be easier in the long term than just saving a snapshot of the game, we can implement replays for example or even (wait for it) have some sort of async multiplayer mode
    • This needs to be light so a format like [ [0,'r'], [1, 'l'], [3, 'u'], [2, 'd'] ] should be used (tile index 0 to 14 and direction 'r' = 'right', etc...
• On new game we can clear the history until we have a backend to save them (way long term)
• We'll need full 100% unit-test coverage for this functionality because it will be very easy to break stuff and it's very hard to debug local storage issues
• Also need to take care of users having inconsistent data in local storage due to application bugs
• There are literally dozens of LocalStorage libs out there, need to research on which one is the lightest and suits our needs

There should be some way to start a new game, canceling any progress that you may have.

• create-react-app linting is pretty lax
• AirBnB is superior so the project will benefit from it