System Architecture
Requirements
A game field of 3x3 with 8 blocks and one gap; if a block is clicked that borders the gap, it moves into the gap
Random start locations; but without any duplicate blocks
The blocks are numbered; 1 to 8
Responsiveness; the game size adjusts to screen size
A counter tracking the number of moves
- Error Boundary
- Toast Component
Data Flow and State Management
Passing required data throughout the entire game was important. For a small application, Context API was used to tackle React's data flow problem
- gameState ( "Pause", "Resume", "Reset")
- puzzleSize (3x3, 4x4, 5x5, 6x6)
- time, moves and hints per game
Data Storage
Since it's a frontend application with little data, I made use of Local Storage from the Browser to save
- Save/Load Game Data ( time, moves, puzzleSize)
- Player Name (currently generated using a random name generator using Dragon Ball Z and Rick and Morty Character names
Context Providers
- Portrait Mode
- Game Settings Context/Provider
- Puzzle Configuration Context/Provider
Important hooks
- useWindowDimensions
- useAndRequireContext
- usePuzzleSize
Component Organisation
- React Context and Hooks to feed data to components
State Design
- React Context is the parent which controls state and data sharing for all components.
- When a component requires data/or state, it uses a provided hook from the parent
- When the context state is updated, the rest of the components receive the updated state/data
Challenges / Fallbacks
- possible improvements would be converting some useState hooks to useReducer to store the entire game properties instead singularly
Responsiveness
- Portrait Mode used to monitor the screen orientation of devices
- For desktop screen sizes and higher, we use a 1fr 65ch 1fr layout.
- According to "The elements of typographic style by Robert Bringhurst 1992, Republished 2012”, the ideal length is 65 characters ( anywhere between 45 to 85 is acceptable in the context of roman alphabet)