Miyagi - Puzzle Slider

Miyagi - Puzzle Slider

Host
Vercel
Stack
React
TypeScript
Vercel
CSS
Order
2
Status
Done
CI/CD
Github Actions
Description
A classic puzzle slider game with a twist
Deployed
Deployed

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
 
  1. Error Boundary
  1. 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)