JSFiddle - React, Tailwind, and code Playground

by arcm111

HTML

<script src="http://data.tiberium-alliances.com/world/154?dummy=.js"></script>
<div id="bg">
    <canvas id="map"></canvas>
    <div id="mask"></div>
</div>
<button id="zoomIn">+</button>
<button id="zoomOut">-</button>

CSS

#bg {
    background: url("http://archeikhmeri.co.uk/images/map_bg.jpg") center center no-repeat;
    width: 500px;
    height: 500px;
    overflow: hidden;
    position: relative;
}
#map{
    /*background: url("http://archeikhmeri.co.uk/images/map_mask.png") top left no-repeat;*/
    position: absolute;
    user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
}
button{
    width: 30px;
    height: 30px;
    z-index: 1000;
    position: relative;
}
#mask{
    position: absolute;
    top: 0;
    left: 0;
    background: url("http://archeikhmeri.co.uk/images/map_mask.png") center center no-repeat;
    width: 500px;
    height: 500px;
}

JavaScript

var colors = {
        "bases": {
            "alliance": "#86d3fb",
            "owner": "#ffc48b",
            "enemy": "#ff8e8b"
        },
        "pois": [
            ["#8dc186", "#273900"],
            ["#5b9dcb", "#"],
            ["#8cc1c7", "#"],
            ["#d7d49c", "#"],
            ["#dbb476", "#"],
            ["#c47f76", "#"],
            ["#928195", "#"]
            ]
    };

var circles = [[197, 53], [167, 85], [137, 113], [101, 145], [7, 242]];
var alliances = {};

ccmapData.alliances.map(function(x){
    alliances[x.an] = x.a;
});
var scale = 1;
var map = function(s){
var getData = function(name){
    var allianceId = alliances[name],
        alliance = {},
        players = {},
        pid = [],
        bases = [],
        pois = [];
    
    alliance.id = allianceId;
    alliance.name = name;
    
    ccmapData.players.map(function (x) {
        var playerName = x.n,
            playerId = x.i;
        if (x.a == allianceId){
            pid.push(playerId);
            var player = {};            
            player.id = playerId;
            player.bases = [];
            
            ccmapData.bases.map(function (base) {
                if (base.pi == playerId) player.bases.push(base);
            });
            players[playerName] = player;
        }
    });
    
    ccmapData.pois.map(function (poi) {
        if (poi.a == allianceId) pois.push(poi);
    });
    alliance.players = players;
    alliance.pois = pois;
    return alliance;
};

var ctx = document.getElementById('map').getContext("2d");
var zoom = function(n){
    var canvas = document.getElementById('map');
    var container = document.getElementById('bg');
    canvas.width = n * 500;
    canvas.height = n * 500;
    ctx.scale(n, n);
};

zoom(s);

for(var circle in circles){
    var p = circles[circle][0],
        r = circles[circle][1];
    ctx.beginPath();
    ctx.arc(250, 250, r, 0, Math.PI * 2, true);
    ctx.closePath();
    ctx.lineWidth = circle == 4 ? 1/s : 0.5/s;
 ...