JSFiddle - React, Tailwind, and code Playground

by prankol57

HTML

<canvas id="c" width="350" height="350"></canvas>
<canvas id="h" width="100" height="350"></canvas>
<textarea id="t"></textarea><button>Run</button>
<p id="legend"></p>
<p id="output"></p>

CSS

canvas {
    border: 1px solid;
}
.label {
    width: 20px;
    font-weight: bold;
}

JavaScript

var cache = {};
var scale = 10;
var tx = $("canvas")[0].width / 2,
    ty = $("canvas")[0].height / 2;

function parseLine(ln) {
    var ret = {
        players: []
    };
    var parts = ln.split("!");

    console.log(parts);
    var players = parts[0].split(";");
    if (players[players.length - 1] === "") players.pop();
    for (var i = 0; i < players.length; ++i) {
        var player = players[i].split(":");
        ret.players.push({
            name: player[0],
            location: player[1].split(",").map(parseFloat),
            score: player[2]
        });
    };
    var balloon = parts[1].split(",").map(parseFloat);
    ret.balloon = {
        location: balloon.slice(0, 2),
        height: balloon[2]
    };
    return ret;
}

var interval;
$("button").click(function () {
    clearTimeout(interval);
    var lines = $("#t").val().split("\n").filter(function (a) {
        return a !== "";
    }).map(parseLine),
        i = 0;
    
     tx = $("canvas")[0].width / 2;
    ty = $("canvas")[0].height / 2;
    interval = setInterval(function () {
        drawLine(lines[i++]);
        if (i === lines.length) {
            clearTimeout(interval);
        }
    }, 50);
});

function drawLine(ln) {
    var canvas = $("canvas")[0];
    var ctx = canvas.getContext("2d");
    var players = ln.players;
    var scores = {};
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.save();
    ctx.translate(tx, ty);
    ctx.fillText("(0, 0)", 0, 0);
    ctx.scale(scale, scale);
    for (var i = 0; i < players.length; ++i) {
        ctx.fillStyle = randColor(players[i].name);
        circleAt(ctx, players[i].location);
        scores[players[i].name] = players[i].score;
    }
    ctx.fillStyle = "rgba(255, 0, 0, A)".replace("A", 1 - ln.balloon.height / 40);
    circleAt(ctx, ln.balloon.location);
    ctx.restore();
    $("#legend").html(makeLegend(scores));
    
    var c2 = $("canvas")[1];
    var ctx2 = c2.getContext("2d");
    ctx2.clearRect(0, 0, canvas.width,...