Chessmite

Chessmite is a tile-based puzzle game, featuring chess-like mechanics. It is inspired by a childhood puzzle classic. This game is packaged as a React component and designed to offer an engaging and strategic puzzle-solving experience.

The game can be found and played on the official website.

Table of Contents

• Installation
• Usage
• How to Play
• License

Installation

npm install chessmite

Usage

import React from 'react'
import Chessmite from 'chessmite'

const App = () => {
  return (
    <div>
      <Chessmite />
    </div>
  )
}

Props

displayScore - boolean

Displays the score (and a 'Game Over' message):

<Chessmite displayScore={true} />

tileOne - string

tileTwo - string

tileThree - string

tileComplete - string

Overrides default colour of specified tile layer:

<Chessmite tileOne='#CCCCFF' />

customLayer1 - object (array)

customLayer2 - object (array)

customLayer3 - object (array)

Sets board layer to a custom arrangment:

const myLayer = [
  [1, 1, 1, 1, 1, 1],
  [2, 2, 2, 2, 2, 2],
  [3, 3, 3, 3, 3, 3],
  [4, 4, 4, 4, 4, 4],
  ['N','B','R','Q', 'W'],
  [1, 1, 1, 1, 1, 1]
];

return (
  <Chessmite customLayer1={myLayer} />
)

A layer must be a 6x6 array. Valid number tiles include numbers 1-4. Valid chess tiles include 'N', 'B', 'R', & 'Q' (knight, bishop, rook, and queen, respectively). Lastly, the wildcard tile: 'W'.

Note: The game produces a wildcard tile whenever a layer is completed, regardless of customization.

updateScore - object (function)

Pass your own score handler:

<Chessmite updateScore={myScoreHandler}/>

Note: This is largely intended to allow a custom display of the score. Any complex changes to the scoring system would likely require tinkering with the source code.

updateGameOver - object (function)

Pass your own 'game over' handler:

<Chessmite updateGameOver={myGameOverHandler} />

persistMode - boolean

Saves puzzle progress:

<Chessmite persistMode={true} />

States will not reset upon closing or refreshing page (even if the cache is cleared). This is intended to be used in conjuction with resetState. Otherwise, clearing local storage is required.

resetState - boolean (state)

setResetState - object (setter)

Resets puzzle:

const [reset, setReset] = useState(false)
const handleReset = () => {
  setReset(true)      // triggers reset
}

return (
  <div>
    <Chessmite persistMode={true} resetState={reset} setResetState={setReset} />
    <button onClick={handleReset}>Reset Game</button>
  </div>
)

Note: For the component to correctly reset the puzzle, both the state and it's corresponding setter are required. In other words using resetState alone is not enough.

shuffleOnReset - boolean

Generates new random board on reset:

<Chessmite persistMode={true} resetState={reset} setResetState={setReset} shuffleOnReset={true} />

How to Play

Objective

The objective of the puzzle is to clear the board by clicking each square three times. When a square is clicked three times, it becomes "complete" and can no longer be used. The puzzle ends when all squares are completed or when no valid moves are available.

Gameplay

You start with a board of 36 grey squares. Each square can be clicked up to three times:

• First click: The square turns from grey to green.
• Second click: The square turns from green to orange.
• Third click: The square is 'complete' and becomes unclickable.

The initial move can be made by clicking any square. Subsequent moves are determined by the symbol on the last clicked square. Each time a square is clicked, it is replaced by a new square with a random symbol.

Pieces

There are two sets of pieces: numeric (1, 2, 3, 4) and chess pieces (Knight, Bishop, Rook, and Queen). These symbols indicate which squares may be clicked next. If a destination square is already 'completed' or beyond the puzzle's border, that move is invalid. Destination squares, if available, are highlighted.

Numeric Pieces

A number on a square indicates the distance to the next clickable square. For example, clicking a 2 allows the player to click any available square exactly 2 squares away horizontally, vertically, or diagonally.

Chess Pieces

Chess pieces move as they do in chess:

• Bishop: Moves diagonally to the border.
• Rook: Moves vertically or horizontally to the border.
• Knight: Moves in an "L" shape (2 x 1 squares or 1 x 2 squares).
• Queen: Moves diagonally, vertically, or horizontally to the border.

Except for the Knight, pieces always move to the board's edge and cannot stop midway. The next click cannot be on the same square as the previous one.

Wild Card

The fleur-de-lis (⚜) is a wild card tile allowing any incomplete square (except itself) to be clicked. The wild card appears when all squares of a color have been flipped. The last square of a particular color to be flipped will reveal the fleur-de-lis.

License

This project is licensed under the MIT License