Tactics board, freehand draw

Built with blockbuilder.org

A draggable tactics board for soccer (Think Andy Townsend circa late 1990s).

forked from jalapic's block: James' tactics board

Adding to Ian Baldwin's and James modifications:

Changes made:

Black and white.
Goals added.

More info here: http://jalapic.github.io/tacticsboard

forked from balders93's block: Tactics board with ball

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%; height: 100% }
    
    
  </style>
</head>

<body>
  <script>
   
    
var scl=3/4   
var wdth = 1050*scl;
var hgt  = 680*scl;

var holder = d3.select("body") // select the 'body' element
      .append("svg")           // append an SVG element to the body
      .attr("width", wdth+60*scl)      
      .attr("height", hgt)
; //

// draw a rectangle - pitch
holder.append("rect")        // attach a rectangle
    .attr("x", 0+30*scl)         // position the left of the rectangle
    .attr("y", 0)          // position the top of the rectangle
    .attr("height", hgt)    // set the height
    .attr("width", wdth)    // set the width
    .style("stroke-width", 5)    // set the stroke width
    .style("stroke", "#001400")    // set the line colour
    .style("fill", "#FFFFFF");    // set the fill colour

// draw a rectangle - halves
holder.append("rect")        // attach a rectangle
    .attr("x", 0+30*scl)         // position the left of the rectangle
    .attr("y", 0)          // position the top of the rectangle
    .attr("height", hgt)    // set the height
    .attr("width", wdth/2)    // set the width
    .style("stroke-width", 5)    // set the stroke width
    .style("stroke", "#001400")    // set the line colour
    .style("fill", "#FFFFFF");    // set the fill colour

// draw a circle - center circle
holder.append("circle")          // attach a circle
    .attr("cx", wdth/2+30*scl)             // position the x-centre
    .attr("cy", hgt/2)             // position the y-centre
    .attr("r", 91.5*scl)               // set the radius
    .style("stroke-width", 5)    // set the stroke width
    .style("stroke", "#001400")      // set the line colour
    .style("fill", "none");      // set the fill colour

// draw a rectangle - penalty area 1
holder.append("rect")        // attach a rectangle
    .attr("x", 0+30*scl)         // position the left of the rectangle
    .attr("y", 138.5*scl)          // position the top of the rectangle
    .attr("height", 403*scl)    // set the height
    .attr("width", 165*scl)    // set the width
    .style("stroke-width", 5)    // set the stroke width
    .style("stroke", "#001400")    // set the line colour
    .style("fill", "#FFFFFF");    // set the fill colour

// draw a rectangle - penalty area 2
holder.append("rect")        // attach a rectangle
    .attr("x", (885+30)*scl)         // position the left of the rectangle
    .attr("y", 138.5*scl)          // position the top of the rectangle
    .attr("height", 403*scl)    // set the height
    .attr("width", 165*scl)    // set the width
    .style("stroke-width", 5)    // set the stroke width
    .style("stroke", "#001400")    // set the line colour
    .style("fill", "#FFFFFF");    // set the fill colour

// draw a rectangle - six yard box 1
holder.append("rect")        // attach a rectangle
    .attr("x", 0+30*scl)         // position the left of the rectangle
    .attr("y", 248.5*scl)          // position the top of the rectangle
    .attr("height", 183*scl)    // set the height
    .attr("width", 55*scl)    // set the width
    .style("stroke-width", 5)    // set the stroke width
    .style("stroke", "#001400")    // set the line colour
    .style("fill", "#FFFFFF");    // set the fill colour

// draw a rectangle - six yard box 2
holder.append("rect")        // attach a rectangle
    .attr("x", (995+30)*scl)         // position the left of the rectangle
    .attr("y", 248.5*scl)          // position the top of the rectangle
    .attr("height", 183*scl)    // set the height
    .attr("width", 55*scl)    // set the width
    .style("stroke-width", 5)    // set the stroke width
    .style("stroke", "#001400")    // set the line colour
    .style("fill", "#FFFFFF");    // set the fill colour

// draw a rectangle - goal 1
holder.append("rect")        // attach a rectangle
    .attr("x", (-24+30)*scl)         // position the left of the rectangle
    .attr("y", (248.5+55)*scl)          // position the top of the rectangle
    .attr("height", 73.22*scl)    // set the height
    .attr("width", 24*scl)    // set the width
    .style("stroke-width", 5)    // set the stroke width
    .style("stroke", "#001400")    // set the line colour
    .style("fill", "#FFFFFF");    // set the fill colour 
    
// draw a rectangle - goal 2
holder.append("rect")        // attach a rectangle
    .attr("x", (30+1050)*scl)         // position the left of the rectangle
    .attr("y", (248.5+55)*scl)          // position the top of the rectangle
    .attr("height", 73.22*scl)    // set the height
    .attr("width", 24*scl)    // set the width
    .style("stroke-width", 5)    // set the stroke width
    .style("stroke", "#001400")    // set the line colour
    .style("fill", "#FFFFFF");    // set the fill colour

// draw a circle - penalty spot 1
holder.append("circle")        // attach a circle
    .attr("cx", (110+30)*scl)           // position the x-centre
    .attr("cy", 340*scl)           // position the y-centre
    .attr("r", 5)             // set the radius
    .style("fill", "#001400");     // set the fill colour

// draw a circle - penalty spot 2
holder.append("circle")        // attach a circle
    .attr("cx", (940+30)*scl)           // position the x-centre
    .attr("cy", 340*scl)           // position the y-centre
    .attr("r", 5)             // set the radius
    .style("fill", "#001400");     // set the fill colour

// draw a circle - center spot
holder.append("circle")        // attach a circle
    .attr("cx", (525+30)*scl)           // position the x-centre
    .attr("cy", 340*scl)           // position the y-centre
    .attr("r", 5)             // set the radius
    .style("fill", "#001400");     // set the fill colour

// penalty box semi-circle 1
var vis = d3.select("body").append("svg")
var pi = Math.PI;
    
var arc = d3.svg.arc()
    .innerRadius(89*scl)
    .outerRadius(94*scl)
    .startAngle(0.64) //radians
    .endAngle(2.5) //just radians

//I DIDNT KNOW HOW TO DO THE TRANSLATION TO SCALE!!!?!!
var arc2 = d3.svg.arc()
    .innerRadius(89*scl)
    .outerRadius(94*scl)
    .startAngle(-0.64) //radians
    .endAngle(-2.5) //just radians
    holder.append("path")
    .attr("d", arc)
    .attr("fill", "#001400")
    .attr("transform", "translate(105,255)")
    holder.append("path")
    .attr("d", arc2)
    .attr("fill", "#001400")
    .attr("transform", "translate(727.5,255)");

// Dragging players

var color = d3.scale.ordinal().range(["darkgrey", "white", "black"]);
var color1 = d3.scale.ordinal().range(["black", "black", "black"]);
var size = d3.scale.ordinal().range([16, 16, 8]);

//var color = d3.scale.category10();

var drag = d3.behavior.drag()
    .origin(function(d) { return d; })
    .on("dragstart", dragstarted)
    .on("drag", dragged)
    .on("dragend", dragended);

d3.csv("dots.txt", dottype, function(error, dots) {
  dot = holder.append("g")
      .attr("class", "dot")
    .selectAll("circle")
      .data(dots)
    .enter().append("circle")
      .attr("r", function(d) { return size(d.team); })
      .attr("cx", function(d) { return d.x*scl; })
      .attr("cy", function(d) { return d.y*scl; })
      .style("fill", function(d) { return color(d.team); })
      .style("stroke", function(d) { return color1(d.team); })
  		.style("stroke-width", 3)
      .call(drag);
});

// functions for above...

function dottype(d) {
  d.x = +d.x;
  d.y = +d.y;
  return d;
}

function dragstarted(d) {
  d3.event.sourceEvent.stopPropagation();
  d3.select(this)
  //.classed("dragging", true);
;
}

function dragged(d) {
  d3.select(this)
  .attr("cx", d.x = d3.event.x*scl)
  .attr("cy", d.y = d3.event.y*scl)
  .style("opacity", .5);
}

function dragended(d) {
  d3.select(this)
  .style("opacity", 1) 
//  .classed("dragging", false);
;
}

// This allows freehand drawing with mouse
   
    var line = d3.svg.line()
        .interpolate("basis")
   ;
    
    var drawObj = {
      isDown: false,
      dataPoints: [],
      currentPath: null,
    }
    
    holder.on("mousedown", function(){
      drawObj.isDown = true;
      
    });

holder.on("mousemove", function(){
      if (drawObj.isDown){
        drawObj.dataPoints.push(
          [d3.event.x, d3.event.y]
        );
        if (!drawObj.currentPath){
          drawObj.currentPath = holder.append("path")
            .attr("class","currentPath")
            .style("stroke-width", 4)
            .style("stroke", "white")
            .style("fill", "none");
        }
        drawObj.currentPath
          .datum(drawObj.dataPoints)
          .attr("d", line);
      }
    });
    
    holder.on("mouseup", function(){
      drawObj.isDown = false;
      drawObj.currentPath.attr("class","oldPath");
      drawObj.dataPoints = [];
      drawObj.currentPath = null;
    })
    
  </script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js