JSFiddle - React, Tailwind, and code Playground

by molecule

HTML

<link rel="stylesheet" href="http://www.dark-project.cz/wesnoth/css/screen.css">
<link rel="stylesheet" href="http://www.dark-project.cz/wesnoth/css/print.css">
<link rel="stylesheet" href="http://www.dark-project.cz/wesnoth/css/base.css">
<script src="http://www.dark-project.cz/wesnoth/js/netteForms.js"></script>
<link rel="stylesheet" href="http://www.dark-project.cz/wesnoth/css/map/terrain.css">
<link rel="stylesheet" href="http://www.dark-project.cz/wesnoth/css/map/units.css">
<div id="playground"> 
    <div class="grass-rocks1 ground" id="1" style="top: 0px; left: 0px;"></div> 
    <div class="grass6 ground" id="2" style="top: 36px; left: 54px;"></div> 
    <div class="village2 ground" id="3" style="top: 0px; left: 108px;"></div> 
    <div class="grass5 ground" id="4" style="top: 36px; left: 162px;"></div> 
    <div class="village1 ground" id="6" style="top: 72px; left: 0px;"></div> 
    <div class="grass3 ground" id="7" style="top: 108px; left: 54px;"></div> 
    <div class="grass-rocks1 ground" id="8" style="top: 72px; left: 108px;"></div> 
    <div class="grass5 ground" id="9" style="top: 108px; left: 162px;"></div> 
    <div class="castleGround ground" id="15" style="top: 180px; left: 54px;"></div> 
    <div class="castleGround ground" id="14" style="top: 144px; left: 108px;"></div> 
    <div class="grass6 ground" id="13" style="top: 144px; left: 0px;"></div> 
    <div class="castleGround ground" id="16" style="top: 180px; left: 162px;"></div> 
    <div class="castleTower ground" id="17" style="top: 216px; left: 108px;"></div> 
    <div class="castleGround ground" id="18" style="top: 252px; left: 54px;"></div> 
    <div class="castleGround ground" id="19" style="top: 252px; left: 162px;"></div> 
    <div class="castleGround ground" id="20" style="top: 288px; left: 108px;"></div> 
    <div class="grass-rocks1 ground" id="21" style="top: 216px; left: 0px;"></div> 
    <div class="grass6 ground" id="22" style="top: 288px; left: 0px;"></div> 
    <div...

JavaScript

$(document).ready(function() {
    var getHovered = function(x, y) {
        var target = null;
        $('.unitImg').each(function(i, node) {
            var minX = $(node).offset().left,
                minY = $(node).offset().top;
            var maxX = minX + $(node).width(),
                maxY = minY + $(node).height();
            if (minX <= x && x < maxX && minY <= y && y < maxY) {
                target = node;
                return false;
            }
        });
        return target;
    };
    $('#mapHover').click(function(e) {
        var newTarget = getHovered(e.pageX, e.pageY);
        if (newTarget) $(newTarget).trigger('click');
    });


    $('#playground div.ground, #units div.unit').hover(function() {
        var x = $(this).css('left');
        var y = $(this).css('top');
        $('#mapHover').css({
            'top': y,
            'left': x,
            'display': 'block'
        });
    });

    $('div.unitImg').click(function() {
        var movement = $(this).find('div.data.movement').text();
        alert(movement);
    });
});