board.js

// XXX YOU ARE NOT MEANT TO EDIT THIS FILE
// XXX YOU ARE NOT MEANT TO EDIT THIS FILE
// XXX YOU ARE NOT MEANT TO EDIT THIS FILE

let key_func = function(d){ return d.id }
// https://bost.ocks.org/mike/chart/

// XXX meant to be used with datum(), not data()
// i.e. selection should just be a single g
function Board() {
  // All options that should be accessible to caller
  let tile_size = 30
  let margin = 1
  let click = () => {}

  function board(selection) {
    selection.each(function(data, i) {
      let spaces = d3
        .select(this)
        .selectAll(".space")
        // .data(data)
        .data(data, key_func)
      let spacesEnter = spaces
        .enter()
        .append("g")
        .attr("class", "space")
      spacesEnter.append("rect")
      spacesEnter.append("text")
      // just for start
      // spacesEnter.attr(
      //   "transform",
      //   (d, i) => `translate(${i % 2 == 0 ? -100 : 800}, -50)`
      // )
      spacesEnter.attr(
        "transform",
        (d, i) => `translate(${d.col * tile_size}, ${d.row * tile_size})`
      )
      // enter+update
      let spacesMerge = spacesEnter.merge(spaces)

      spaces.exit().remove()

      spacesMerge
        .transition()
        // .duration(400)
        .attr(
          "transform",
          (d, i) => `translate(${d.col * tile_size}, ${d.row * tile_size})`
        )
        .select("rect")
        .attr("width", tile_size - margin)
        .attr("height", tile_size - margin)

      spacesMerge
        .select("text")
        .attr("font-size", 48)
        .text(d => {
          return d.icon
        })
        // .attr("y", ".3em")
        .attr("y", (tile_size - margin) / 1.5)
        .attr("x", (tile_size - margin) / 2)
        .attr("text-anchor", "middle")
        .attr("text-align", "center")

      spacesMerge.on("click", click)


      // console.log(cluesMerge)
    }) // end selection.each
  } // end board function we return

  board.tile_size = function(value) {
    if (!arguments.length) return tile_size
    tile_size = value
    // if (typeof updateWidth === "function") updateWidth()
    return board
  }
  board.margin = function(value) {
    if (!arguments.length) return margin
    margin = value
    // if (typeof updateHeight === "function") updateHeight()
    return board
  }
  board.click = function(value) {
    if (!arguments.length) return click
    click = value
    return board
  }


  return board
}