Skip to content

Chessboard component. Chessground Svelte wrapper.

License

Notifications You must be signed in to change notification settings

gtim/svelte-chessground

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Dec 15, 2023
daa297c · Dec 15, 2023

History

76 Commits
Dec 9, 2023
Apr 7, 2023
Apr 10, 2023
Apr 10, 2023
Apr 9, 2023
Apr 4, 2023
Apr 4, 2023
Jun 22, 2023
Jun 21, 2023
Apr 4, 2023
Oct 29, 2023
Dec 15, 2023
Apr 4, 2023
Apr 4, 2023

Repository files navigation

Svelte Chessground

A Svelte chessboard component. Svelte-chessground is a wrapper around the full-featured Chessground, the open source chess UI developed for Lichess.

Chessground screenshots in 2D and 3D

Take a look at the live demos.

Note: Chessground does not contain chess logic. If you want a chessboard with legal moves and pawn promotion without additional code, you're looking for svelte-chess.

Usage

Install:

npm install svelte-chessground

Display a chessboard where any pieces can be moved:

<script>
    import {Chessground} from 'svelte-chessground';
</script>    

<Chessground />

The component expands to maximum width. Chessground is extensively configurable through props. Parameters and descriptions can be found in the original Chessground's config.ts. For instance, to display a specific position and flip the board:

<script>
    import {Chessground} from 'svelte-chessground';
    let fen = '7k/5K2/7P/6pP/8/8/8/8 w - - 0 1'; // Forsyth-Edwards Notation
    let orientation = 'black';
</script>    

<Chessground {fen} {orientation}/>

These props enjoy the usual svelte reactivity magic: changing orientation or fen at any time will change the board. You can find more examples in the svelte-chessground-examples, including:

Chessground contains no chess logic, and as such can be used for chess variations. Examples that require chess logic import chess.js.

Styling

Chessground can be completely restyled through CSS. The component imports default stylesheets. To apply your own, you have two options:

  1. Override specific CSS commands with a scoped :global and !important:

     <div class="override_background">
         <Chessground />
     </div>
     <style>
         div.override_background :global(.cg-wrap cg-board) {
             background-image:url("/my-board.jpg") !important; /* replace chessboard image */
         }
     </style>
    
  2. Apply your own full chessground stylesheet instead of the defaults by setting the class prop and importing your own stylesheet. By changing the class name from the default, none of the default stylesheets will apply, not even the piece SVGs. Additionally, you can use the provided ChessgroundUnstyled component, which is completely unstyled.

     <script>
         import {ChessgroundUnstyled} from 'svelte-chessground';
         import '$lib/my-chessboard.css';
     </script>
     <ChessgroundUnstyled class="my-chessboard" />
    

You can find working code for both approaches in the custom styles examples.

Building the package

To build the package yourself:

$ git clone https://github.com/gtim/svelte-chessground.git
$ cd svelte-chessground
$ npm run build