hax_POC.js

var width = 1000;
var height = 540;
var inputs = 8;
var space_per_input = 15;
var space_per_output = 20;
var wire_length = 20;

var core_bg_color = '#c0c0c0';
var core_border_color = 'black';
var core_border_width = 2;
var core_powerline_color = '#404040';
var core_powerline_dash = [2, 1];
var core_powercell_bg_color = '#e0e0e0';
var core_powercell_border_color = 'black';
var core_powercell_border_dash = [1, 1];

var core_powerline_inactive_color = 'black';

var player_size = space_per_output * inputs;

var Game = {};
Game.View = {};

Game.View.Core = {
  space_per_input: 15,

  layer: null,
  canvas_width: null,
  canvas_height: null,
  inputs: null,
  core_size: null,
  half_input: 0,

  core_x: 0,
  core_y: 0,

  playerA: 0,
  playerB: 0,
  core: 0,

  init: function(cwidth, cheight, inputs) {
    this.canvas_width = cwidth;
    this.canvas_height = cheight;
    this.inputs = inputs;

    this.core_size = space_per_input * inputs;
    this.half_input = space_per_input / 2;
    this.core_x = cwidth / 2 - this.core_size / 2;
    this.core_y = cheight / 2 - this.core_size / 2;

    // Player A's wires
    this.playerA = {
      x: 0,
      y: 0,
      size: player_size,
      space_per_wire: space_per_output
    };

    // Player B's wires
    this.playerB = {
      x: cwidth-player_size,
      y: cheight-player_size,
      size: player_size,
      space_per_wire: space_per_output
    };

    this.core = {
      x: this.core_x,
      y: this.core_y,
      size: this.core_size,
      space_per_wire: this.space_per_input
    }

    this.layer = new Kinetic.Layer();
    return this.layer;
  },

  drawChip: function(layer) {
    var coreChip = new Kinetic.Rect({
      x: this.core_x,
      y: this.core_y,
      width: this.core_size,
      height: this.core_size,
      fill: core_bg_color,
      stroke: core_border_color,
      strokeWidth: core_border_width
    });
    layer.add(coreChip);
  },
    calcWireCoords: function(target, side, n) {
    var mod_x = 0, base_x = target.x,
        mod_y = 1, base_y = target.y;

    // side 1 and 3 - top and right, flip mod_x and mod_y
    if (side % 2 == 1) { mod_x = 1; mod_y = 0; }
    // sides 2 and 3 - 2nd player, flip mod sign
    if (side > 1) {
      mod_x = -mod_x; mod_y = -mod_y;
      base_x = base_x + target.size;
      base_y = base_y + target.size;
    }

    var half_space = target.space_per_wire / 2;

    var x1 = base_x + (n * target.space_per_wire + half_space) * mod_x;
    var y1 = base_y + (n * target.space_per_wire + half_space) * mod_y;
    var x2 = x1 - wire_length * mod_y;
    var y2 = y1 - wire_length * mod_x;
    return {
      x1: x1,
      y1: y1,
      x2: x2,
      y2: y2
    }
  },

  buildWire: function(target, side, n) {
    var coords = this.calcWireCoords(target, side, n);
    var wire = new Kinetic.Line({
      points: [coords.x1, coords.y1, coords.x2, coords.y2],
      stroke: core_powerline_inactive_color,
      strokeWidth: 1
    });
    return(wire);
  },

  drawConnections: function(layer) {
    for (var side=0; side<4; side++) {
      for (var i=0; i<this.inputs; i++) {
        this.layer.add(this.buildWire(this.core, side, i));
      }
    }
  },

  buildPowerline: function(side, n) {
    var mod_x = 0,
        mod_y = 1;
    if (side % 2 == 1) { mod_x = 1; mod_y = 0; }

    var offset = n * space_per_input + this.half_input;
    var x1 = this.core_x + offset * mod_x;
    var y1 = this.core_y + offset * mod_y;
    var x2 = x1 + this.core_size * mod_y;
    var y2 = y1 + this.core_size * mod_x;

    var powerline = new Kinetic.Line({
      points: [x1, y1, x2, y2],
      stroke: core_powerline_color,
      strokeWidth: 1,
      dash: core_powerline_dash
    });
    return powerline;
  },

  drawPowerlines: function(layer) {
    for (var i=0; i<this.inputs; i++) {
      this.layer.add(this.buildPowerline(0, i));
      this.layer.add(this.buildPowerline(1, i));
    }
  },

  buildPowercell: function(row, col) {
    var cx = this.core_x + this.half_input + col * space_per_input;
    var cy = this.core_y + this.half_input + row * space_per_input;
    var cell_size = this.half_input - 2;

    var powercell = new Kinetic.Line({
      points: [ cx, cy - cell_size,
                cx - cell_size, cy,
                cx, cy + cell_size,
                cx + cell_size, cy ],
      closed: true,
      fill: core_powercell_bg_color,
      stroke: core_powercell_border_color,
      strokeWidth: 1,
      dash: core_powercell_border_dash
    });
    return(powercell);
  },

  drawPowercells: function(layer) {
    for (var i=0; i<this.inputs; i++) {
      for (var j=0; j<this.inputs; j++) {
        this.layer.add(this.buildPowercell(i, j));
      }
    }
  },

  drawPlayers: function(layer) {
    var rectA = new Kinetic.Rect({
      x: 0,
      y: 0,
      width: player_size,
      height: player_size,
      sides: 4,
      radius: 100,
      fillLinearGradientStartPoint: {x:0, y:0},
      fillLinearGradientEndPoint: {x:player_size, y:player_size},
      fillLinearGradientColorStops: [0, 'blue', 1, 'green'],
      opacity:0.8,
      stroke: 'black',
      strokeWidth: 1
      });
    var rectB = new Kinetic.Rect({
      x: this.canvas_width-player_size,
      y: this.canvas_height-player_size,
      width: player_size,
      height: player_size,
      sides: 4,
      radius: 100,
      fillLinearGradientStartPoint: {x:0, y:0},
      fillLinearGradientEndPoint: {x:player_size, y:player_size},
      fillLinearGradientColorStops: [0, 'red', 1, 'yellow'],
      opacity:0.8,
      stroke: 'black',
      strokeWidth: 1
    });
    layer.add(rectA);
    layer.add(rectB);

    //Drawing wires on layer
    for(i=0; i<inputs; i++) {
      layer.add(this.buildWire(this.playerA, 2, i));
      layer.add(this.buildWire(this.playerA, 3, i));
      layer.add(this.buildWire(this.playerB, 0, i));
      layer.add(this.buildWire(this.playerB, 1, i));
    }
  },

  connectWires: function(layer, target, side){
      for(i=0; i<inputs; i++){
        var player_coord = this.calcWireCoords(target, side, i);
        var chip_coord = this.calcWireCoords(this.core, 3 - side, i);

        var point1 = [player_coord.x2, player_coord.y2];
        var point2 = side % 2 == 0 ?
                                    [chip_coord.x2, player_coord.y2] :
                                    [player_coord.x2, chip_coord.y2];
        var point3 = [chip_coord.x2, chip_coord.y2];

        var wire = new Kinetic.Line({
          points: point1.concat(point2).concat(point3),
          stroke: 'red',
          strokeWidth: 1,
        });
        layer.add(wire);
      }
  },

  draw: function() {
    this.drawChip(this.layer);
    this.drawConnections(this.layer);
    this.drawPowerlines(this.layer);
    this.drawPowercells(this.layer);
    this.drawPlayers(this.layer);
    this.connectWires(this.layer, this.playerA, 2);
    this.connectWires(this.layer, this.playerA, 3);
    this.connectWires(this.layer, this.playerB, 0);
    this.connectWires(this.layer, this.playerB, 1);
  }
}

var stage = new Kinetic.Stage({
  container: 'gamefield',
  width: width,
  height: height
});

var core = Game.View.Core;
core.init(width, height, inputs);
core.draw();
stage.add(core.layer);