Svelte Use Chessground

Maintenance Status

This repository and the package are not being actively maintained. Consider using alternatives such as:

• gtim/svelte-chessground

A wrapper around https://github.com/ornicar/chessground that allows it to be used with svelte through use:

Usage

The package has two named exports, Chessground and cgStylesHelper along with css files to change how the board looks.

If you decide to use the stylesheets provided by the package, the chessboard will be 100% width and height of the parent. The following css variables are available for basic customisation.

The first two can be set manually or you can use the cgStylesHelper action to set them.

<script>
    import { Chessground, cgStylesHelper } from 'svelte-use-chessground';
    import 'svelte-use-chessground/cgstyles/chessground.css';

    let cgApi;
    let config = {};

    function initializer(api) {
        cgApi = api;
        // A named function might not be necessary but I've encountered infinite loops while using an inline initializer function.
    }
</script>

<div
    use:Chessground="{{config, initializer}}"
    use:cgStylesHelper="{{ piecesFolderUrl: '/images/pieces/merida', boardUrl: '/images/board/blue.svg' }}"
/>

SvelteKit

When using with svelte-kit, adding chessground to vite.ssr.noExternal might be a good idea.

Demo here: https://svelte-use-chessground.netlify.app

Developing

Once you've created a project and installed dependencies with pnpm install.

pnpm run dev

# or start the server and open the app in a new browser tab
pnpm run dev -- --open

Packaging

pnpm run package