Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/deebloo/go-board
Go Board WebComponent
https://github.com/deebloo/go-board
baduk go webcomponents webdev
Last synced: 2 months ago
JSON representation
Go Board WebComponent
- Host: GitHub
- URL: https://github.com/deebloo/go-board
- Owner: deebloo
- Created: 2020-08-24T17:29:35.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-10-27T16:03:05.000Z (2 months ago)
- Last Synced: 2024-10-27T18:49:16.439Z (2 months ago)
- Topics: baduk, go, webcomponents, webdev
- Language: TypeScript
- Homepage:
- Size: 2.78 MB
- Stars: 23
- Watchers: 2
- Forks: 2
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# go-board
Go Board WebComponent. The entire library weights less than 5kb gzip and less than 4k brotli which makes it performant to embed into existing web pages. If you want to see exactly what the board is calculating you can enable debugging by adding the "debug" attribute to go-board. (``)
[Demo](https://go-viewer.web.app?coords&sfx)
[StackBlitz](https://stackblitz.com/edit/go-board-demo?file=index.html)
## All you need to get started is some markup and a script tag
```html
```
The go-board element can display a game from a sgf file. You can display a game from [OGS](https://online-go.com).
```html
```
`go-board` can also be used as a form element. It will submit the game key of the current board. This can can be parsed to set the board state manually.
Being form associated also means that you can send data to your own servers without writing any JavaScript.
```html
```
Stones and spaces can be decorated with markers. The `go-marker` element can be passed as a child to `go-stone` and you can add any icon or html entity that you like.
```html
✓
```
## Attributes
| Item | description |
| ----------------- | -------------------------------------------------------------------- |
| coords | determines if the column and row lables are displayed |
| src | path to a sgf file. sfg files describe the steps in a game of go |
| readonly | disables manually placing stones |
| sfx | enable sound effects. Point to a directory with sound files |
| disablelastmarker | disable marking the last stone placed. Useful for documenting shapes |
| novalidate | disables all stone placement logic |
## Development
Start in dev mode
```sh
npm start --watch
```
Run tests
```sh
npm test
```
Prepare prod demo
```sh
npm run build
```