zischwartz/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
    body {
      background-color: black;
      height: 100vh;
      overflow: hidden;
    }
    #app {
      margin-left: auto;
      margin-right: auto;
      width: 800px;
      height: 800px;
      /* margin-top: 0px; */
      /* background-color: black; */
    }
    svg {
      background-color: rgb(40,40,40);
      width: 800px;
      height: 800px;
    }
    svg text {
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
    svg text::selection {
      background: none;
    }
    svg text {
      fill: white;
    }
    rect {
      fill: none;
      /* fill: black; */
    }
    #score {
      color: rgb(250,250,250);
      text-align: right;
      font-family: sans-serif;
    }

    </style>
  </head>
  <body>
    <div id="app"></div>

  </body>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <!-- For offline dev -->
  <!-- <script src="d3.v4.min.js"></script> -->
  <script src="tinyboard.js"></script>
  <!-- <script src="game.js"></script> -->
  <script src="starter_game.js"></script>
  <!-- <script src="game_examples.js"></script> -->

  <script>
  // XXX YOU PROBABLY DON'T NEED TO EDIT THIS FILE
  // Go edit game.js instead
  let wrap = d3.select( document.getElementById("app") )
  let score_el = wrap.append('div').attr('id', 'score')
  let svg = wrap.append('svg')
  let sel = svg.append('g').attr('id', 'game')
  function render_board(data){
    let board = Board()
    .tile_size(800/10)
    sel.datum(data).call(board)
  }
  function set_score(score){
    score_el.html(score)
  }
  let game = new Game(render_board, set_score)
  // register our event listener
  document.addEventListener('keydown', (event) => {
    if (game.keypressed){
      game.keypressed(event.key)
    }
    // console.log(event.key)
  })
  // call game's do_every_second
  if (game.do_every_second){
    setInterval(game.do_every_second.bind(game), 1000)
  }

  </script>

</html>

## starter_game.js

// EDIT THIS FILE

class Game {
  constructor(render_board, set_score){
    // render_board is the function we call to render our board
    // we pass it the data array we want to render
    this.render_board = render_board
    // example cow
    let cow = {icon:'🐄', row:5, col:6}
    this.data = [cow]

    // render the board for the first time with our data
    this.render_board(this.data)
  }
  keypressed(keyname){
    if (keyname == 'ArrowUp'){
      console.log('key up pressed')
    }
    else if (keyname == 'ArrowDown'){
      console.log('down key pressed')
    }
    else if (keyname == 'ArrowLeft'){
      console.log('left key pressed')
    }
    else if (keyname == 'ArrowRight'){
      console.log('right key pressed')
    }
    this.render_board(this.data)
  }
  // a helper that returns an object from this.data with the matching id
  // this only matters once you have ids
  get_by_id(id){
     return this.data.find( x=> x.id==id)
   }
  // do_every_second() automatically gets called once a second in index.html
  do_every_second(){
    // you can use it to move things around without user interaction
    // change this.data and uncomment this line
    // this.render_board(this.data)
  }
}

## tinyboard.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_by_id = function(d) {
  return d.id
}

let is_data_invalid = function(data){
  let have_ids = data.filter( (x) => typeof x.id != 'undefined' )
  if (have_ids.length >0 && have_ids.length != data.length){
    return true
  }
  else {
    return false
  }
}

// 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) {
      if (is_data_invalid(data)){
        throw Error('Doh! Your data is not consistent - It looks like some of your items have the `id` property and some do not')
      }
      let spaces
      if (data.filter( (x) => typeof x.id != 'undefined' ).length){
        spaces = d3.select(this).selectAll(".space").data(data, key_func_by_id)
      } else {
        spaces = d3.select(this).selectAll(".space").data(data)
      }

      let spacesEnter = spaces
        .enter()
        .append("g")
        .attr("class", "space")
      spacesEnter.append("rect")
      spacesEnter.append("text")

      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", 13)
        .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
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title></title>
	<style>
	body {
	background-color: black;
	height: 100vh;
	overflow: hidden;
	}
	#app {
	margin-left: auto;
	margin-right: auto;
	width: 800px;
	height: 800px;
	/* margin-top: 0px; */
	/* background-color: black; */
	}
	svg {
	background-color: rgb(40,40,40);
	width: 800px;
	height: 800px;
	}
	svg text {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	}
	svg text::selection {
	background: none;
	}
	svg text {
	fill: white;
	}
	rect {
	fill: none;
	/* fill: black; */
	}
	#score {
	color: rgb(250,250,250);
	text-align: right;
	font-family: sans-serif;
	}

	</style>
	</head>
	<body>
	<div id="app"></div>

	</body>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<!-- For offline dev -->
	<!-- <script src="d3.v4.min.js"></script> -->
	<script src="tinyboard.js"></script>
	<!-- <script src="game.js"></script> -->
	<script src="starter_game.js"></script>
	<!-- <script src="game_examples.js"></script> -->

	<script>
	// XXX YOU PROBABLY DON'T NEED TO EDIT THIS FILE
	// Go edit game.js instead
	let wrap = d3.select( document.getElementById("app") )
	let score_el = wrap.append('div').attr('id', 'score')
	let svg = wrap.append('svg')
	let sel = svg.append('g').attr('id', 'game')
	function render_board(data){
	let board = Board()
	.tile_size(800/10)
	sel.datum(data).call(board)
	}
	function set_score(score){
	score_el.html(score)
	}
	let game = new Game(render_board, set_score)
	// register our event listener
	document.addEventListener('keydown', (event) => {
	if (game.keypressed){
	game.keypressed(event.key)
	}
	// console.log(event.key)
	})
	// call game's do_every_second
	if (game.do_every_second){
	setInterval(game.do_every_second.bind(game), 1000)
	}

	</script>

	</html>

	// EDIT THIS FILE

	class Game {
	constructor(render_board, set_score){
	// render_board is the function we call to render our board
	// we pass it the data array we want to render
	this.render_board = render_board
	// example cow
	let cow = {icon:'🐄', row:5, col:6}
	this.data = [cow]

	// render the board for the first time with our data
	this.render_board(this.data)
	}
	keypressed(keyname){
	if (keyname == 'ArrowUp'){
	console.log('key up pressed')
	}
	else if (keyname == 'ArrowDown'){
	console.log('down key pressed')
	}
	else if (keyname == 'ArrowLeft'){
	console.log('left key pressed')
	}
	else if (keyname == 'ArrowRight'){
	console.log('right key pressed')
	}
	this.render_board(this.data)
	}
	// a helper that returns an object from this.data with the matching id
	// this only matters once you have ids
	get_by_id(id){
	return this.data.find( x=> x.id==id)
	}
	// do_every_second() automatically gets called once a second in index.html
	do_every_second(){
	// you can use it to move things around without user interaction
	// change this.data and uncomment this line
	// this.render_board(this.data)
	}
	}
	// 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_by_id = function(d) {
	return d.id
	}

	let is_data_invalid = function(data){
	let have_ids = data.filter( (x) => typeof x.id != 'undefined' )
	if (have_ids.length >0 && have_ids.length != data.length){
	return true
	}
	else {
	return false
	}
	}

	// 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) {
	if (is_data_invalid(data)){
	throw Error('Doh! Your data is not consistent - It looks like some of your items have the `id` property and some do not')
	}
	let spaces
	if (data.filter( (x) => typeof x.id != 'undefined' ).length){
	spaces = d3.select(this).selectAll(".space").data(data, key_func_by_id)
	} else {
	spaces = d3.select(this).selectAll(".space").data(data)
	}

	let spacesEnter = spaces
	.enter()
	.append("g")
	.attr("class", "space")
	spacesEnter.append("rect")
	spacesEnter.append("text")

	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", 13)
	.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
	}