Madge JSON Parser

by Sam Fereday

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/randomcolor/0.4.4/randomColor.min.js"></script>
<svg id="svg"></svg>
<div id="output">.</div>

CSS

* {
  box-sizing: border-box;
}

body {
  font: 75%/1.4em arial;
}

#output {
  width: 100%;
  float: left;
}

#output div {
  width: 124px;
  height: 124px;
  float: left;
  margin: 2em;
}

.top-node {
  float: left;
  text-align: center;
  padding: 2em;
  color: #fff;
  background: #333;
  word-wrap: break-word;
}

.top-node span {
  display: block;
}

svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

JavaScript

let data = {
  "Animation": [],
  "CombatChoiceState": [
    "CombatSelectTargetState",
    "EventQueue",
    "GlobalState"
  ],
  "CombatSelectTargetState": [],
  "CombatState": [
    "EventQueue",
    "GlobalState"
  ],
  "Entity": [
    "CombatState",
    "StateMachine"
  ],
  "EventQueue": [],
  "GlobalState": [],
  "Helpers": [],
  "StateMachine": [],
  "StoryBoard": [
    "GlobalState"
  ],
  "combat-events/CEAttack": [
    "GlobalState",
    "StoryBoard"
  ],
  "combat-events/CETurn": [
    "CombatChoiceState",
    "GlobalState"
  ],
  "combat-states/CSDamage": [
    "CombatState"
  ],
  "combat-states/CSDodge": [],
  "combat-states/CSHurt": [],
  "combat-states/CSIdle": [
    "Animation"
  ],
  "combat-states/CSMove": [],
  "combat-states/CSRunAnim": [
    "Animation"
  ],
  "data/Definitions": [],
  "data/HitResults": [],
  "formulas/CombatFormula": [
    "Helpers"
  ],
  "main": [
    "CombatState",
    "Entity"
  ],
  "require.conf": []
};

var out = document.getElementById("output");
var sv = document.getElementById("svg");

function drawLines(b1, b2, scale1, scale2) {

  var b1Center = {
    x: b1.left + (b1.width / 2),
    y: b1.top + (b1.height / 2),
    scale: scale1
  };

  var b2Center = {
    x: b2.left + (b2.width / 2),
    y: b2.top + (b2.height / 2),
    scale: scale2
  };

	// https://github.com/davidmerfield/randomColor
  let color = randomColor();

  var ln = document.createElementNS("http://www.w3.org/2000/svg", 'line');
  
  ln.setAttribute('x1', b1Center.x);
  ln.setAttribute('y1', b1Center.y);
  ln.setAttribute('x2', b2Center.x);
  ln.setAttribute('y2', b2Center.y);

  ln.style.stroke = color;
  ln.style.strokeWidth = Math.floor(b1Center.scale + b2Center.scale);

  var circle = document.createElementNS("http://www.w3.org/2000/svg", 'circle');
  circle.setAttribute('cx', b1Center.x);
  circle.setAttribute('cy', b1Center.y);
  circle.setAttribute('r', b1Center.scale * 3);
  circle.style.fill = color;

  var circle2 =...