Old school D3 from simpler times

All examples By author By category About

BrunoDumas

Full window Github gist

TATUBAAR

Built with blockbuilder.org

forked from BrunoDumas's block: TATUBAAR - map creator

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.1/socket.io.slim.js"></script>
  
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    .instructions {
      -webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;}
  </style>
</head>

<body>
  <script src="display.js"></script>
  <script src="event.js"></script>
  <script src="game.js"></script>
  <script>
    
    // Converts from degrees to radians.
    Math.radians = function(degrees) {
      return degrees * Math.PI / 180;
    };

// Converts from radians to degrees.
    Math.degrees = function(radians) {
      return radians * 180 / Math.PI;
    };
    var margin = {top: 20, right: 10, bottom: 20, left: 10};
    var width = 960 - margin.left - margin.right,
    		height = 500 - margin.top - margin.bottom;
    
    var svg = d3.select("body").append("svg")
    	.attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
  		.append("g")
    	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    
    var color_scale = d3.scaleOrdinal(d3["schemeCategory10"])
    
    var graphics = []
    d3.xml("character_hat.xml").mimeType("image/svg+xml").get(function(error, xml) {
    	if (error) {
        console.log("an error occured");
        return;
      }
      var importedNode = document.importNode(xml.documentElement, true);
      importedNode = importedNode.getElementById("whole_character")
      svg.node().appendChild(importedNode.cloneNode(true));
      
      //document.getElementById("whole_character")
      
      graphics["character_hat"] = {"model": importedNode, "bbox": svg.select("#whole_character").node().getBBox()}
      svg.select("#whole_character").remove()
    	draw_cells()
  	});
    
   
    var max_nb_teams = 10
    var map_size = {"width": 8, "height": 8};
    var cell_size = Math.min(Math.floor(width / map_size["width"]), Math.floor(height / map_size["height"]), 100);

var cells = {};
    //var characters = [];
    for (var i in Array.from({length: map_size["width"]}, (x,i) => i)){
      for (var j in Array.from({length: map_size["height"]}, (x,i) => i)){
        cells[i + "_" + j] = {"x": i, "y": j, "content": '_'}
      }
    }
    
    function draw_cells() {
      var data = d3.entries(cells)
      var cell = svg.selectAll("g.cell").data(data)
      
      cell.selectAll("rect")
      	.attr("fill", function(d){
          switch(d.value.content){
            case '_': // Walkable cell
              return "white"
            case '#': // Obstacle
              return "grey"
            case 'O': // Hole
              return "black"
            case 'S': // Character spawn
              return color_scale(parseInt(d.value.team_id)) //"green"
          }})
        .classed("obstacle", function(d){return d.value.content == '#'})
        .classed("hole", function(d){return d.value.content == 'O'})
        .classed("spawn", function(d){return ! isNaN(d.value.content)})
     
    cell.filter(function (d) {
        return d.value.content != 'S'
      })
      .selectAll("g.character")
      .remove()
    
    cell.filter(function (d) {
        	return d.value.content == 'S' && d.value.draw
      	})
      	.append(function(d) { 
          cells[d.key].draw = false;
      		return graphics["character_hat"].model.cloneNode(true)
    		})
        .classed("character", true)
    		.attr("transform", function(d) {
        	// Scale
        	var scale_factor = Math.min(graphics["character_hat"].bbox.width / cell_size, graphics["character_hat"].bbox.height / cell_size)

var scale = "scale(" + scale_factor + ", " + scale_factor + ")"
          //scale = ""
          //scale_factor = 1
          var translate_point = {
            "x": (
                d.value.x * cell_size / scale_factor
                - graphics["character_hat"].bbox.x
                - graphics["character_hat"].bbox.width / 2
                + cell_size / 2 / scale_factor
              ), 
            "y": (
                d.value.y * cell_size / scale_factor
                - graphics["character_hat"].bbox.y
                - graphics["character_hat"].bbox.height / 2 
                + cell_size / 2 / scale_factor
              )}
      		var translate = "translate(" + 
              translate_point.x + ", " + translate_point.y + ")"
          //translate = ""
          var angle = 90 + Math.degrees(Math.atan2(map_size.height / 2 - d.value.y - 0.5, map_size.width / 2 - d.value.x - 0.5))
          var rotate = "rotate(" + angle + ", " + (graphics["character_hat"].bbox.width / 2 + graphics["character_hat"].bbox.x) + ", " + (graphics["character_hat"].bbox.height / 2 + graphics["character_hat"].bbox.y) + ")"
      	
          return scale + " " + translate + " " + rotate;
    		})
        /*.attr("transform", function(d) {
      		return "translate(" + (d.value.x * cell_size - graphics["character_hat"].bbox.width / 2) + ", " + (d.value.y * cell_size - graphics["character_hat"].bbox.height / 2) + ")"
    		})*/
        .attr("id", function(d) {return "character_" + d.key})
        .on("contextmenu", function(){
        	//console.log("contextmenu")
          d3.event.preventDefault();
        }, true)
    
			cell.exit().remove();
      
      var cell_enter = cell.enter().append("g")
        .classed("cell", true)
        .attr("id", function(d) {return  d.key})
      	.on("click", function(d){
          //console.log(d)
          if (cells[d.key].content == '#'){
            cells[d.key].content = 'O'
          } else {
            cells[d.key].content = '#'
          }
          //console.log(cells[d.key])
          
          draw_cells()
          d3.event.stopPropagation();
        })
        .on("contextmenu", function(d) {
          //console.log("contextmenu : g")
          d3.event.preventDefault();
          if (cells[d.key].content == '_'){
            cells[d.key].team_id = 1
            cells[d.key].content = 'S'
          } else if (cells[d.key].content == 'S'){ // Character spawn
            cells[d.key].team_id = cells[d.key].team_id + 1
            if (cells[d.key].team_id % (max_nb_teams + 1) == 0) {
              cells[d.key].content = '_'
            }
          } else {
            cells[d.key].content = '_'
          }
          
          cells[d.key].draw = true
          draw_cells()
        }, true)
      cell_enter
      	.append("rect")
        .attr("x", function(d){ return d.value.x * cell_size })
        .attr("y", function(d){ return d.value.y * cell_size })
        .attr("width", cell_size)
        .attr("height", cell_size)
        .attr("fill", function(d){
          switch(d.value.content){
            case '_': // Walkable cell
              return "white"
            case '#': // Obstacle
              return "grey"
            case 'O': // Hole
              return "black"
            default: // Character spawn
              return color_scale(parseInt(d.value.team_id)) //"green"
          }})
        .attr("stroke", "black")
        .classed("obstacle", function(d){return d.value.content == '#'})
        .classed("hole", function(d){return d.value.content == 'O'})
        .classed("spawn", function(d){return ! isNaN(d.value.content)})
      	
      cell_enter.filter(function (d) {
        	return d.value.content == 'S'
      	})
      	.append(function() { return graphics["character_hat"].model.cloneNode(true) })
        .classed("character", true)
      	.attr("transform", function(d) {
        	// Scale
        	var scale_factor = Math.min(graphics["character_hat"].bbox.width / cell_size, graphics["character_hat"].bbox.height / cell_size)
          console.log(scale_factor)
        	var scale = "scale(" + scale_factor + ", " + scale_factor + ")"
          //scale = ""
          //scale_factor = 1
          var translate_point = {
            "x": (
                d.value.x * cell_size / scale_factor
                - graphics["character_hat"].bbox.x
                - graphics["character_hat"].bbox.width / 2
                + cell_size / 2 / scale_factor
              ), 
            "y": (
                d.value.y * cell_size / scale_factor
                - graphics["character_hat"].bbox.y
                - graphics["character_hat"].bbox.height / 2 
                + cell_size / 2 / scale_factor
              )}
      		var translate = "translate(" + 
              translate_point.x + ", " + translate_point.y + ")"
          //translate = ""
          var angle = 90 + Math.degrees(Math.atan2(map_size.height / 2 - d.value.y - 0.5, map_size.width / 2 - d.value.x - 0.5))
          var rotate = "rotate(" + angle + ", " + (graphics["character_hat"].bbox.width / 2 + graphics["character_hat"].bbox.x) + ", " + (graphics["character_hat"].bbox.height / 2 + graphics["character_hat"].bbox.y) + ")"
      	
          return scale + " " + translate + " " + rotate;
    		})
      
        /*.attr("transform", function(d) { return "translate(" + (d.value.x * cell_size - 32.3050752) + ", " + (d.value.y * cell_size - 106.56564) + ")"})*/
        .attr("id", function(d) {return "character_" + d.key})
        .on("contextmenu", function(){
          d3.event.preventDefault();
        }, true)
     
    	
    }

</script>
</body>

https://d3js.org/d3.v4.min.js

https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.1/socket.io.slim.js