narcissus-yuan / react-chess-app

A two-player chess game created with React

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Chess React App

This is a chess app created using React. (View Demo)

Interface Screenshot

chess_interface

Usage

Basics (Rather Intuitive)

  • To select piece, click on the specific piece
  • To unselect piece, click on the specific piece
  • To unselect current piece and select another, you can
    1. unselect and select manually, or
    2. double-click on the piece you want to select
  • To select destination, click on the specific piece

Buttons

  • Button1 (top left): click to open piece count table
  • Button2 near turn indicator: click to reset game / start new game
  • Button3 (top right): click to display piece positions (for better visualization when using 'Keyboard Control')
  • Button4 (top right): click to switch color mode (light / dark)
  • Button5 (top right): click to undo one step
  • Button6 (top right): click to open settings
  • Button7 (bottom right): click to open keyboard control

Keyboard Control

keyboard_control

  • Enter select piece position and destination position
  • Click 'Submit Query'
  • If move is invalid, there will be a warning

Settings

Appearance (Switches)

appearance

  • Controls whether or not to indicate possible chess movement when piece is selected
  • Controls whether or not to open piece count table (coordinated with Button1)

Color Mode (coordinated with Button4)

color_mode

  • light mode
  • dark mode
  • system mode (OS default)

Chess Piece Style

piece_style

  • plain chess style (default)
  • fancy chess style

History (Time Travel)

history

  • click to open chess history
  • click on entry to reverse specific step and succeeding steps
  • empty when there's no history

Time Limit

time_limit

  • none (no time limit; default)
  • other options
  • custom option

Indicators

  • Turn indicator (top center): indicates turn (black / white)
  • Movement indicator: indicates movement options when piece is selected
  • Movement correctness indicator: indicates whether chess move is correct

About

A two-player chess game created with React


Languages

Language:JavaScript 65.8%Language:CSS 29.8%Language:HTML 4.4%