npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

tiny-chessboard

v1.0.1

Published

A small, lightweight, and mobile friendly JavaScript chessboard library without any dependencies.

Downloads

3

Readme

tiny-chessboard

A modern, lighweight, JavaScript chessboard (written in TypeScript). Built-in responsiveness, mobile friendly, and no dependencies.

What is tiny-chessboard?

tiny-chessboard is just the board. It's purely just a "view".

What tiny-chessboard is not

It is not capable how determining what moves are legal, whether a position is in check, who's turn it is, etc.. It has no concept of rules nor any ability to "think" or play moves.

If you need the ability to generate moves, position detection, etc., consider using the chess.js library.

Installation

You can add tiny-chessboard to your project using any of the following:

  1. Download the latest file here.
  2. Install with npm install tiny-chessboard
  3. From a CDN

Usage

Step 1

Create a container element. Make sure you give it a width, either inline or in your CSS:

<div id="board" style="width: 200px"></div>

or

<style>
    #board {
        width: 50%;
    }
</style>

<div id="board"></div>

Step 2

Step 2a

Import tiny-chessboard into your JavaScript (remember to make the path relative to the file location, if you downloaded the file):

import Chessboard from "tiny-chessboard";

Note: If you use this in a script tag, remember to include type="module":

<script type="module">
    import Chessboard from "tiny-chessboard";
    ...
</script>

Step 2b

Create the board element:

const board = new Chessboard("board");
// or...
const board = new Chessboard(document.getElementById("board"));

This is a minimal setup and will result in a board in the start position.

Multiple boards

Multiple boards can be created on a page:

<div id="board1"></div>
<div id="board2"></div>
<div id="board3"></div>

<script>
    const board1 = new Chessboard("board1");
    const board2 = new Chessboard("board2");
    const board3 = new Chessboard("board3");
</script>

Configuration

Below is the default configuration object:

const config = {
    position: "start", // FEN string or "start"
    draggable: false, // allow pieces to be dragged
    onDragStart: function() { },
    onDrop: function() { },
    flipped: false, // true for black to be at the bottom
}

In both the onDragStart and onDrop events, use return false to cancel the default behavior.

Methods

constructor

new Chessboard(element, config)

  • element (required): A string or DOM element. A string will be used to find the element by ID.
  • config (optional): A config object (see the Configuration section above)

SetPosition(fen)

Sets the board position to the fen.

Move(move)

move is a string containing the start and end square. Like e2e4 or b1c3.

Clear()

Removes all pieces from the board

Destroy()

Removes the board from the DOM.

Licenses

tiny-chessboard: MIT License

Piece graphics by Colin M.L. Burnett, GPLv2+