@sabaki/shudan/src/Coord.js

A highly customizable, low-level Preact Goban component.

import { createElement as h, Component } from "preact";
import { alpha } from "./helper.js";

export class CoordX extends Component {
  render() {
    let {
      style,
      xs,
      coordX = (i) => alpha[i] || alpha[alpha.length - 1],
    } = this.props;

    return h(
      "div",
      {
        className: "shudan-coordx",
        style: {
          display: "flex",
          textAlign: "center",
          ...style,
        },
      },

      xs.map((i) =>
        h(
          "div",
          { key: i, style: { width: "1em" } },
          h("span", { style: { display: "block" } }, coordX(i))
        )
      )
    );
  }
}

export class CoordY extends Component {
  render() {
    let { style, height, ys, coordY = (i) => height - i } = this.props;

    return h(
      "div",
      {
        className: "shudan-coordy",
        style: {
          textAlign: "center",
          ...style,
        },
      },

      ys.map((i) =>
        h(
          "div",
          { key: i, style: { height: "1em" } },
          h("span", { style: { display: "block" } }, coordY(i))
        )
      )
    );
  }
}