deebloo / go-board

Go Board WebComponent

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. (<go-board debug></go-board>)

Demo

StackBlitz

All you need to get started is some markup and a script tag

<script src="https://cdn.jsdelivr.net/npm/go-board@latest/bundle/go-board.min.js"></script>

<go-board coords sfx="https://cdn.jsdelivr.net/npm/go-board@latest/assets/sfx">
  <go-stone color="black" slot="R17"></go-stone>
  <go-stone color="white" slot="R18"></go-stone>
  <go-stone color="black" slot="Q18"></go-stone>
  <go-stone color="white" slot="S18"></go-stone>
  <go-stone color="black" slot="S17"></go-stone>
  <go-stone color="white" slot="R19"></go-stone>
  <go-stone color="black" slot="Q19"></go-stone>
  <go-stone color="white" slot="T18"></go-stone>
  <go-stone color="black" slot="T17"></go-stone>
  <go-stone color="white" slot="Q16"></go-stone>
  <go-stone color="black" slot="S19"></go-stone>
  <go-stone color="white" slot="T19"></go-stone>
  <go-stone color="black" slot="S19"></go-stone>
</go-board>

The go-board element can display a game from a sgf file. You can display a game from OGS.

<go-board
  coords
  src="https://online-go.com/api/v1/games/53010116/sgf"
></go-board>

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.

<form action="/save-game">
  <go-board name="game">
    <go-stone color="black" slot="R17"></go-stone>
    <go-stone color="white" slot="R18"></go-stone>
    <go-stone color="black" slot="Q18"></go-stone>
  </go-board>
</form>

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.

<go-board>
  <go-stone slot="Q4" color="black">
    <go-marker>&check;</go-marker>
  </go-stone>
</go-board>

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

go-board's Issues

calculate score

should be able to calculate how many points a given player has on the board. prisoners will be be able to be passed in as atrributes

Calculate groups and liberties

Read-only attribute

Should be able to define a board as read-only. This makes it so a user cannot edit the board state in any way

Add custom CSS properties for board style

all hardcoded colors should be made to be css custom properties so that the board and stones can be easily themed

Sound Effects

Mark the last move made

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: undefined. Note: this is a nested preset so please contact the preset author if you are unable to fix it yourself.

bug?: All mouse buttons place stones.

I am not completely sure, but I think I don't like it.

My expectation as a use was: place with mouse left click.

If other mouse buttons shall work, they should do sth different. I mean, like: middle button always white, right button always black, or sth.

What do you mean?

Make responsive

loud thinking: getter, setter, or something?

I'm not sure whether I need it. So see this as loud thinking only.

My current test use case for the board is visualisation for something I try out in Julia.
Starting there I see that we have a distributed logic: I'm building a representation of the board to generate a (currently random) move, and remove stones in case it killes something. That same killing/removing is done by your board.

Usually doing things twice, in parallel, with the expectation of consistency, is worth avoiding.
Your use case(s) seem to differ, so ignore if not needed :-)

However. To do this right, we need to have
A) either a way to set stones and remove stones, going around your logic,
B) or have a way to retrieve your board state, to verify whether your and my logic did the same, e.g. in tests.

I'm not sure whether it is sensible to do this "right" here. I sometimes tend to make problems more difficult, so feel free to ignore this.

Note that I even don't know yet how to use any of those possibilities for my Pluto notebooks ...

Kind greetings, z.

calculate eyes for a group.

We are already calculating a group itself. we SHOULD be able to guess at how many eyes that group has. this will be necessary for being able to guess at a score.

Create hash of game state

If I ever want to provide online play I will need to make sure someone doesn't manually edit the HTML of the game state. Should add a hash algo so that when sending moves the receiver can check that the move was played in the correct state.

markers

On the other hand, it is nice to be able to set custom markers onto stones.

I'd hope that there are neat unicode symbols, that are just shown in a layer above the stones. So the user chooses what mark to add to a stone like

For problems: Switch off "last" marker

Hi Danny, on Mastodon you said "Let me know if there is anything you would like to see added", and I'm not sure you knew what can of worms ... grin

So, I start small. Not by something to add, but by sth to remove, or rather be removable. Sometimes it is only the shape I want to show, then it is confusing that some stone is marked. So I'd like to be able to switch this off. I'd hope for an attribute like "noMarker".

(By the way, I use the go-board in my spare time, and don't have much. So, expect me to be lazy/restrained with follow ups, and all that, and please only respond if you really have time.)

Kind greetings! z.

Add

Perf.

Reduce number of dom nodes used to build board.
Make dom lookups as fast as possible.
Cache previous dom nodes lookups to improve subsequent lookups.

add move viewer.

Should be able to see a list of moves in order.

Marker on empty position?

While expaining the board to a friend, I recognized that it 'd be good to have a possibility to mark empty positions too.

mark star points

"Tutorials"

go-logic acts as a switch statement.

<go-board>
  <!-- defines logic block -->
  <go-logic>
    <!-- defines step and potential responses to a move at D16 -->
    <go-logic-case space="D16">
      <go-stone slot="Q4"></go-stone>
      <go-stone slot="D4"></go-stone>
      <go-stone slot="Q16"></go-stone>
    </go-logic-case>

    <!-- defines step and potential responses to a move any move -->
    <go-logic-case space="*">
      <go-stone slot="C6"></go-stone>
    </go-logic-case>
  </go-logic>
</go-board>

Keyboard Navigation (arrow keys)

The current board is tab-able but should work with the arrow keys.

Do not allow moves that return board to the previous state.

Add stone sounds

Have game remove stones if group is dead

Form Associated

the board should keep track of moves in order (in addition to board state). On form submit it should submit an sgf file..

board size

It might be cool to change board size. I have no idea how difficult that is. Or if it is possible, how difficult it is to make it flexible.

Like for a 9x9 board.
Or even for a 9x13 board.

Kind greetings!

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• Update dependency @joist/di to v4.0.0-next.4
• Update dependency @joist/element to v4.0.0-next.4
• Update dependency @web/test-runner to v0.18.3
• Update dependency wireit to v0.14.7
• Update dependency firebase-tools to v13.15.1
• Update dependency rollup to v4.20.0
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

github-actions

.github/workflows/main.yml

• actions/checkout v4

npm

package.json

• @joist/di ^4.0.0-next.3
• @joist/element ^4.0.0-next.3
• tslib ^2.5.2
• @open-wc/testing ^4.0.0
• @rollup/plugin-node-resolve ^15.0.2
• @rollup/plugin-terser ^0.4.0
• @types/mocha ^10.0.1
• @web/test-runner ^0.18.0
• @web/test-runner-playwright ^0.11.0
• browser-sync ^3.0.0
• firebase-tools ^13.0.0
• minify-html-literals ^1.3.5
• prettier ^3.0.0
• rollup ^4.0.0
• typescript ^5.4.2
• wireit ^0.14.0

---

• Check this box to trigger a request for Renovate to run again on this repository

Add "Viewer"

Sometimes if you are embedding a game or a scenario in a page you only want to focus on a particular corner. A wrapper component that allows you to shift focus to different parts of the board could be helpful