JSFiddle - React, Tailwind, and code Playground

by disfated

HTML

<button>Update</button>
<br>
<canvas id="canvas"></canvas><br>
<img id="canv" />

<br>
<img src="https://github.com/Mogidin/DSO.Battle/raw/master/python/img/Rekrut.png" id="Rekrut" />
<img src="https://github.com/Mogidin/DSO.Battle/raw/master/python/img/Soldat.png" id="Soldat" />

<img src="https://github.com/Mogidin/DSO.Battle/raw/master/python/img/Maat.png" id="Maat" />

<img src="https://github.com/Mogidin/DSO.Battle/raw/master/python/img/mark.png" id="mark" />
<img src="https://github.com/Mogidin/DSO.Battle/raw/master/python/img/back.png" id="back" />

CSS

.troop {
    display: inline-block;
    width: 55px;
    height: 65px;
    text-align: center;
    background: hsl(0, 0%, 90%);
    border-radius: 8px;
    cursor: pointer;
    padding: 4px;
    font-size: 45px;
    line-height: 65px;
    font-weight: bold;
    color: hsl(0, 0%, 70%);
    text-shadow: 0px 1px 3px hsla(0, 0%, 0%, 0.20);
    position: relative;
    vertical-align: top;
}

.troop:hover {
    color: hsl(0, 0%, 50%);
    background: hsl(0, 0%, 85%);
}

.troop > ul {
    display: block;
    position: absolute;
    top: 100%;
}

.troop > ul > li {
    display: inline-block;
}

.troop > ul > li > img {
    display: inline-block;
}

JavaScript

/*
$(document).ready(function() {

    var $usr = $('#usr');
    var $cpu = $('#cpu');
    
    function Selector(elem, units) {
        var self = this;
        var $add = $('<span class="troop add">+</span>');
        var $list = $('<ul></ul>');
        
        var $current = null;
        var $unit;
        
        function makeTroop(elem) {
            return elem.hover(function() {
                $current = elem;
                $list.appendTo(elem).show();
            }, function() {
                $list.hide().detach();
            });
        }
        
        $.each(units, function(id, src) {
            var $img = $('<img src="' + units[id] + '" />');
            $('<li title="' + id + '"></li>').append($img).appendTo($list).on('click', function() {
                if ($current === $add) {
                    $current = makeTroop($('<span class="troop"></span>').insertBefore($add));
                } else if ($current) {
                    $current.find('img').remove();
                }
                $current.append($img.clone());
                $list.hide().detach();
            });
        });
        
        makeTroop($add);
        elem.append($add);
        
    }
    
    new Selector($usr, {
        'Rekrut': 'https://github.com/Mogidin/DSO.Battle/raw/master/python/img/Rekrut.png',
        'Soldat': 'https://github.com/Mogidin/DSO.Battle/raw/master/python/img/Soldat.png'
    });
    

});
*/



/* saving
var canvas = document.getElementById("mycanvas");
var img    = canvas.toDataURL("image/png");
document.write('<img src="'+img+'"/>');
*/


$(document).ready(function() {
    
    $('button').on('click', function() {
        var input = 'Rekrut 0 100 | Soldat 50 75 || Maat 10 50';
        var padding = 2;
        var fillColor = '#504429';
        
        var armies = input.split(/\s*\|\|\s*/);
        
        var slots = [];
        
        var back = document.getElementById('mark');
        var canvas =...