chess-game

A web component for displaying chess games.

Chessboard functionality is provided by gchessboard.
This web component adds next and previous buttons and the list of moves on the side.

This is my first javascript project.
I started it in order to learn web components.
It might not adhere to the best practices.

Not recommended for production use yet.

!screenshot

Usage

``html










`

es-module-shims.js is needed because most browsers other than Chrome don't support import map.

$3

You can remove es-module-shims.js and the import map:

`html








`

In that case you have to download index.js, chess.js and gchessboard to the root directory of your web server,
and modify index.js import statements like this:

`javascript
import { Chess } from './chess.js'
import { GChessBoardElement } from './gchessboard.js' // or whatever filename you choose for gchessboard
`

$3

You can set an intial position by adding a FEN tag to the PGN:

`html

`

$3

All elements are sized in em units, so you can change the size of the web component by changing the font size:

`html

`

$3

Users can enable/disable autoplay by clicking the autoplay button.

If you want autoplay to be enabled when the web page is loaded, you can use the autoplay attribute:

`html

`

By default autoplay makes 1 move per second, so the period is 1 second.
You can use the autoplay-period attribute to set the period in milliseconds:

`html

`

$3

Users can flip the board by clicking the ⇵ button.

By default the chessboard is displayed from the white side.

You can set the orienation to black:

`html

``

Contributing

Bug reports, bug fixes, and UI improvements, are welcome.
New features should be discussed first.

License

Copyright (C) 2022 Charalampos Mitsakis

This software is licensed under the terms of the Apache License, Version 2.0