https://github.com/desgeeko/svgoban

Goban with SVG shapes
https://github.com/desgeeko/svgoban

go-game goban javascript svg

Last synced: 4 days ago
JSON representation

Goban with SVG shapes

• Host: GitHub
• URL: https://github.com/desgeeko/svgoban
• Owner: desgeeko
• License: mit
• Created: 2015-10-25T19:26:53.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2016-07-31T16:40:27.000Z (about 9 years ago)
• Last Synced: 2025-08-11T21:34:40.029Z (about 2 months ago)
• Topics: go-game, goban, javascript, svg
• Language: JavaScript
• Homepage:
• Size: 40 KB
• Stars: 13
• Watchers: 2
• Forks: 6
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
SVGoban

=======

*A lightweight JavaScript library that generates a Goban representation as layered sets of SVG shapes*

## Project Guidelines

* Pure functions (no state, no side-effects)

* Scalable to any size without quality loss (SVG!)

* No dependencies

* Any goban size

* CSS styling

* Default themes with plain colors and very light gradients

## Demo

![SVGoban demo](demo/demo.png)

Generate a SVG sample output from this repository:

`node demo/test_19classic_4stones.js > sample.svg`

## Installation

SVGoban may be installed as a NPM package: `npm install svgoban --save`

## API

"Pseudo-" elements are regular objects with a type attribute matching the target SVG element and other related attributes.

### Attributes

* `size` = a number between `9` and `19`

* `color` = `"black"` or `"white"`

* `position` = an object containing coordinates and colors as keys and values 

* `config` = an object containing `size` and `theme` attributes

* `noMargin` and `hideMargin` = booleans

* `coordSystem` = `"A1"` or `"aa"`

* `zoom` = an object describing either:

  * [`mode` = `"zone"`] a region (`"NW"`/`"NE"`/`"SE"`/`"SW"`)

  * [`mode` = `"point"`] or a center point and a zoom ratio

### Geometry

* `shapeBackground(noMargin)` returns 1 pseudo-square whose area may include the margin

* `shapeGrid(size)` returns an array of 2*size pseudo-lines

* `shapeStarPoints(size)` returns an array of pseudo-circles

* `shapeLabels(size, coordSystem)` returns an array of 4*size pseudo-text

* `shapeStones(size, positions)` returns an array of size*size pseudo-circles (stones and placeholders)

* `shapeStone(size, intersection, color)` returns 1 pseudo-circle

* `shapeMarkers(size, markers, positions)` returns an array of pseudo-elements drawing triangles, squares,...

* `shapeArea(hideMargin, zoom, size)` returns a view box with optional margin and zoom in

### Styles

* `defineRadialColors(color)` returns gradient colors

* `Themes` is an array of predefined themes: `"classic"` and `"paper"`

### Helper

* `serialize(config, position, markers)` returns a string containing a full SVG goban