sigmar/script.js

import Svg from "./svg.js"

class Board {
  constructor() {
    this.$board = document.getElementById('board');
    // this.cells = [];

    const { rx, ry } = this.xyToCoord(5, 5);
    let polygon = Svg.makeNode("polygon", {
      'points': "43,-25 0,-50 -43,-25 -43,25 0,50 43,25",
      'transform': "translate("+rx+","+ry+"),scale(10.7),rotate(30)",
      'fill': '#7e6c56', //'#AE9B79'
    });
    this.$board.appendChild(polygon);

    this.buf0 = [];
    this.buf1 = [];

    for (let y = 0; y < 6; y++) {
      for (let x = 0; x < 6 + y; x++) {
        this.makeCell(x, y);
      }
    }
    for (let y = 0; y < 5; y++) {
      for (let x = 0; x < 10 - y; x++) {
        this.makeCell(x+y+1, 6+y);
      }
    }

    this.buf0.forEach((elem) => {
      this.$board.appendChild(elem);
    });

    this.buf1.forEach((elem) => {
      this.$board.appendChild(elem);
    });
  }

  xyToIndex(x, y) {
    return y * 11 + x
  }

  xyToCoord(x, y) {
    const gap = 6;
    const xstep = 86+gap;
    const ystep = 75+gap;
    const xbase = 300;
    const ybase = 60;

    let rx = xbase + xstep * x - y*Math.floor(xstep/2);
    let ry = ybase + ystep * y;

    return { rx, ry }
  }

  makeCell(x, y, color='gray') {
    const bdr = 5;
    const idx = this.xyToIndex(x, y);
    const { rx, ry } = this.xyToCoord(x, y);

    let polygon_shadow = Svg.makeNode("polygon", {
      'points': "43,-25 0,-50 -43,-25 -43,25 0,50 43,25",
      'transform': "translate("+rx+","+ry+"),scale(1.1)",
      'fill': '#000000',
      'filter': "url('#dropshadow')",
    });

    let polygon = Svg.makeNode("polygon", {
      'points': "43,-25 0,-50 -43,-25 -43,25 0,50 43,25",
      'transform': "translate("+rx+","+ry+")",
      'fill': '#C8B898',
    });

    let left_line = Svg.makeNode("polyline", {
      'points': "-43,-24 -43,24",
      'transform': "translate("+rx+","+ry+")",
      'stroke': '#B6A986',
      'stroke-width': bdr,
      'fill': 'transparent',
      'stroke-linecap': 'square',
    });

    let bottom_line = Svg.makeNode("polyline", {
      'points': "-42,25 0,50 42,25",
      'transform': "translate("+rx+","+ry+")",
      'stroke': '#9E906D',
      'stroke-width': bdr,
      'fill': 'transparent',
      'stroke-linecap': 'square',
    });

    let up_line = Svg.makeNode("polyline", {
      'points': "43,25 43,-25 0,-50 -43,-25",
      'transform': "translate("+rx+","+ry+")",
      'stroke': '#CCC3AA',
      'stroke-width': bdr,
      'fill': 'transparent',
      'stroke-linecap': 'none',
    });

    let circle = Svg.makeNode("ellipse", {
      'transform': "translate("+rx+","+ry+")",
      'cx': 0,
      'cy': 0,
      'rx': 39,
      'ry': 39,
      'fill': 'url(#slotbg)',
    });

    // this.cells[idx] = polygon;
    this.buf0.push(polygon_shadow);
    this.buf1.push(polygon);
    this.buf1.push(left_line);
    this.buf1.push(bottom_line);
    this.buf1.push(up_line);
    this.buf1.push(circle);
    return polygon;
  }
}

new Board();