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

chess-image-generator

v1.0.9

Published

Generate images based on various forms of chess notation.

Downloads

93

Readme

Overview

chess-image-generator creates a PNG file or PNG Buffer from either a:

  • FEN
  • PGN
  • array data

Passed in options allow you to choose:

  • size of the canvas
  • colors of board
  • style of pieces

Output to either:

  • a PNG to given path
  • PNG Buffer

Documentation

Installation

Install via node:

$ npm i -S chess-image-generator

Then import the package and instantiate:

var ChessImageGenerator = require('chess-image-generator');

var imageGenerator = new ChessImageGenerator();

or pass in options for customization:

var ChessImageGenerator = require('chess-image-generator');

var imageGenerator = new ChessImageGenerator({
    size: 720,
    light: 'rgb(200, 200, 200)',
    dark: '#333333',
    style: 'merida'
});

Load in your chess position with one of three methods depending on the format of your board position, and export to PNG file or Buffer.

Loading in a Chess Position

Once you've created an instance of the chess-image-generator, you can load a chess position using one of three formats.

Available Formats

Loading By FEN

.loadFEN(fen)

| Parameter | Type | Description | |---------|----------|----------------------| | fen | string | Board FEN. |

FEN appears in the follow format:

r2qk2r/p1p5/bpnbp2p/1N1p1p2/P2P1p1N/2PQ2P1/1P2PPBP/R4RK1 b kq - 1 13

Each piece is notated by a character.

| Char | Value | Example | |----------------|-------------------------|--------------------| | Uppercase Char | White Pieces | K, Q, R, B, N, P | | Lowercase Char | Black Pieces | k, q, r, b, n, p | | Slash | New Row | / | | Numbers | Count of blank spaces | 3, 1, 4 |

Loading by PGN

.loadPGN(pgn)

| Parameter | Type | Description | |---------|----------|----------------------| | pgn | string | Game PGN. |

PGN appears in the follow format:

[Event "F/S Return Match"]
[Site "Belgrade, Serbia JUG"]
[Date "1992.11.04"]
[Round "29"]
[White "Fischer, Robert J."]
[Black "Spassky, Boris V."]
[Result "1/2-1/2"]

1. e4 e5 2. Nf3 Nc6 3. Bb5 a6 {This opening is called the Ruy Lopez.}
4. Ba4 Nf6 5. O-O Be7 6. Re1 b5 7. Bb3 d6 8. c3 O-O 9. h3 Nb8 10. d4 Nbd7
11. c4 c6 12. cxb5 axb5 13. Nc3 Bb7 14. Bg5 b4 15. Nb1 h6 16. Bh4 c5 17. dxe5
Nxe4 18. Bxe7 Qxe7 19. exd6 Qf6 20. Nbd2 Nxd6 21. Nc4 Nxc4 22. Bxc4 Nb6
23. Ne5 Rae8 24. Bxf7+ Rxf7 25. Nxf7 Rxe1+ 26. Qxe1 Kxf7 27. Qe3 Qg5 28. Qxg5
hxg5 29. b3 Ke6 30. a3 Kd6 31. axb4 cxb4 32. Ra5 Nd5 33. f3 Bc8 34. Kf2 Bf5
35. Ra7 g6 36. Ra6+ Kc5 37. Ke1 Nf4 38. g3 Nxh3 39. Kd2 Kb5 40. Rd6 Kc5 41. Ra6
Nf2 42. g4 Bd3 43. Re6 1/2-1/2

Chess.com's Published-Data API returns games in this format. If you want to use their API check out the chess-web-api wrapper I created for it!.

Loading by Array

.loadArray(array)

| Parameter | Type | Description | |---------|----------|----------------------| | array | array of arrays | Board array with characters. |

Array should be passed with the following format:

[
    ['r','n','b','q','k','b','n','r',],
    ['p','p','p','p','p','p','p','p',],
    [' ',' ',' ',' ',' ',' ',' ',' ',],
    [' ',' ',' ',' ',' ',' ',' ',' ',],
    [' ',' ',' ',' ',' ',' ',' ',' ',],
    [' ',' ',' ',' ',' ',' ',' ',' ',],
    ['P','P','P','P','P','P','P','P',],
    ['R','N','B','Q','K','B','N','R',],
]

Piece notation follows the same rules as FEN.

| Char | Value | Example | |----------------|-------------------------|--------------------| | Uppercase Char | White Pieces | K, Q, R, B, N, P | | Lowercase Char | Black Pieces | k, q, r, b, n, p |

Generate an Image

After you've loaded a chess position into an instance of the chess-image-generator, use the following functions to generate your image with one of two outputs:

Generate a PNG

.generatePNG(path)

The path should be relative to where it is called and include the end name of the PNG.

A new PNG file will be generated with position.

| Parameter | Type | Description | |---------|----------|----------------------| | path | string | Path of where to save PNG, relative to method call. |

| Return Type | Return Description | |----------|----------------------| | string | Path to PNG |

Generate a Buffer

.generateBuffer()

The buffer will be returned from the function. Use promises or async await to ensure its completion.

| Return Type | Return Description | |----------|----------------------| | Buffer | PNG Buffer |

Image Customization

You have three options for customization of the resulting PNG:

These customizations are passed to the constructor when you create an instance of chess-image-generator:

var imageGenerator = new ChessImageGenerator({
    size: 720,
    light: 'rgb(200, 200, 200)',
    dark: '#333333',
    style: 'merida'
});

Canvas Size

| Option | Type | Default | Example | |----------|----------|---------|------------------| | size | number | 480 | 250, 800, 1200 |

Canvas size determines in pixels how large the resulting PNG will be.

Example:

var imageGenerator = new ChessImageGenerator({
    size: 1200,
});

The resulting PNG's will be 1200px by 1200px.

Board Colors

| Option | Type | Default | Example | |----------|----------|---------|------------------| | light | string | "rgb(181, 136, 99)" | "rgb(250,250,250)", "white", "#ffffff" | | dark | string | "rgb(181, 136, 99)" | "rgb(0,0,0)", "black", "#000000" |

Light and dark determines the colors of both the light and dark squares respectively.

Colors can be passed in a variety of formats:

| Color Type | Example | |------------------------|------------------------------| | Hexadecimal Color | "#00FF00" | | RGB Color | "rgb(20, 20, 20)" | | RGBA Color | "rgba(20, 20, 20, .8)" | | HSL Color | "hsl(120, 100%, 50%)" | | HSLA Color | "hsla(120, 60%, 70%, 0.3)" | | Predefined Color Names | "blue" |

Default Coloring:

Customized Coloring:

Example:

var imageGenerator = new ChessImageGenerator({
    light: 'rgb(200, 200, 200)',
    dark: 'rgb(20, 20, 20)',
});

Piece Style

| Option | Type | Default | Example | |----------|----------|---------|------------------| | style | string | "merida"" | "alpha", "cheq" |

The piece style determines the used style of pieces to create the image.

Style Choices:

  • alpha
  • cburnett
  • cheq
  • leipzig
  • merida

All images were found at Marcel van Kervinck! Thanks :)

Example:

var imageGenerator = new ChessImageGenerator({
    style: alpha,
});

Dependencies


Hope you make some cool stuff!

dog

- Andrew Young