zischwartz/board.js

## 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)`
      // )
      // 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
}

## game.js

// EDIT THIS FILE
// EDIT THIS FILE
// EDIT THIS FILE

class Game {
  constructor(render_data){
    this.render_data = render_data
    // Note: each object data must have a unique id, it's how the board knows which is which
    // CHANGE AND ADD YOUR OWN CODE HERE
    this.data = [
      {
        kind:'player',
        icon:'🐄',
        row:5,
        col:6,
        id:0
      },
      {
        kind:'tree',
        icon:'🌲',
        row:8,
        col:8,
        id:1
      }
    ]
    this.render_data(this.data)
  }
  keypressed(keyname){
    // CHANGE AND ADD YOUR OWN CODE HERE
    let player = this.get_player()
    if (keyname == 'ArrowUp'){
      player.row-=1
    }
    else if (keyname == 'ArrowDown'){
      player.row+=1
    }
    // For example, try making the cow/player go left and right as well
    //
    // render the data
    this.render_data(this.data)
  }
  //helper
  // this assumes you only have one object in your data with type 'player'
  get_player(){
    return this.data.find( x=> x.kind=='player')
  }
  // helper
  get_by_id(id){
    return this.data.find( x=> x.id==id)
  }
  // do_every_second() automatically gets called once a second in index.html
  // say, if you want to have an enemy move.
  // use it to call other functions you write in this class
  do_every_second(){
    // CHANGE AND ADD YOUR OWN CODE HERE
    this.move_tree() // replace move_tree with your own function!
    // FOR EXAMPLE
    // this.move_enemy()
    // this.check_collision()
    this.render_data(this.data)
  }
  // a super simple example replace with your own!
  move_tree(){
    let tree = this.get_by_id(1)
    tree.col-=1
    if (tree.col< 0) { tree.col = 7}
  }
  // ADD YOUR OWN FUNCTIONS HERE
}

## 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: 5px;
      /* 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; */
    }
    /* .bar {  fill: steelblue;  }
    .bar:hover { fill: brown; }
    .axis--x path {  display: none; }
    img {display: block; margin-left: auto; margin-right: auto; } */
    </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="board.js"></script>
  <script src="game.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 svg = wrap.append('svg')
  let sel = svg.append('g').attr('id', 'game')
  function render_data(data){
    let board = Board()
    .tile_size(800/10)
    sel.datum(data).call(board)
  }

  let game = new Game(render_data)
  // register our event listener
  document.addEventListener('keydown', (event) => {
    game.keypressed(event.key)
    // console.log(event.key)
  })
  // call game's do_every_second
  setInterval(game.do_every_second.bind(game), 1000)

  </script>

</html>

	// 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)`
	// )
	// 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
	}

	// EDIT THIS FILE
	// EDIT THIS FILE
	// EDIT THIS FILE

	class Game {
	constructor(render_data){
	this.render_data = render_data
	// Note: each object data must have a unique id, it's how the board knows which is which
	// CHANGE AND ADD YOUR OWN CODE HERE
	this.data = [
	{
	kind:'player',
	icon:'🐄',
	row:5,
	col:6,
	id:0
	},
	{
	kind:'tree',
	icon:'🌲',
	row:8,
	col:8,
	id:1
	}
	]
	this.render_data(this.data)
	}
	keypressed(keyname){
	// CHANGE AND ADD YOUR OWN CODE HERE
	let player = this.get_player()
	if (keyname == 'ArrowUp'){
	player.row-=1
	}
	else if (keyname == 'ArrowDown'){
	player.row+=1
	}
	// For example, try making the cow/player go left and right as well
	//
	// render the data
	this.render_data(this.data)
	}
	//helper
	// this assumes you only have one object in your data with type 'player'
	get_player(){
	return this.data.find( x=> x.kind=='player')
	}
	// helper
	get_by_id(id){
	return this.data.find( x=> x.id==id)
	}
	// do_every_second() automatically gets called once a second in index.html
	// say, if you want to have an enemy move.
	// use it to call other functions you write in this class
	do_every_second(){
	// CHANGE AND ADD YOUR OWN CODE HERE
	this.move_tree() // replace move_tree with your own function!
	// FOR EXAMPLE
	// this.move_enemy()
	// this.check_collision()
	this.render_data(this.data)
	}
	// a super simple example replace with your own!
	move_tree(){
	let tree = this.get_by_id(1)
	tree.col-=1
	if (tree.col< 0) { tree.col = 7}
	}
	// ADD YOUR OWN FUNCTIONS HERE
	}
	<!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: 5px;
	/* 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; */
	}
	/* .bar { fill: steelblue; }
	.bar:hover { fill: brown; }
	.axis--x path { display: none; }
	img {display: block; margin-left: auto; margin-right: auto; } */
	</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="board.js"></script>
	<script src="game.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 svg = wrap.append('svg')
	let sel = svg.append('g').attr('id', 'game')
	function render_data(data){
	let board = Board()
	.tile_size(800/10)
	sel.datum(data).call(board)
	}

	let game = new Game(render_data)
	// register our event listener
	document.addEventListener('keydown', (event) => {
	game.keypressed(event.key)
	// console.log(event.key)
	})
	// call game's do_every_second
	setInterval(game.do_every_second.bind(game), 1000)

	</script>

	</html>