JSFiddle - React, Tailwind, and code Playground

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hexagonal Grid with Obstacles</title>
    <style>        
        #mainContainer {
            display: flex;
            justify-content: space-around;
            margin: 20px;
        }
        #menuContainer {
            width: 150px;
        }
        #hexContainer canvas {
            display: block;
            margin: auto;
            background-color: #f5f5f5;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div id="mainContainer">
        <div id="menuContainer">
            <h1>Enemies-Total</h1>
            <div id="divEnemyCounter">Enemies: 0</div>
            <div id="divPlayerCounter">Players: 0</div>
            <h1>Player-Total</h1>
        </div>
        <div id="hexContainer"><canvas></canvas></div>
    </div>

    <script>
        const unitData = {
            TANK: { 
                title: 'Lightweight-Tank', 
                color: 'blue', 
                terrainType: 'land',
                energy: 10, 
                armory: 10, 
                health: 10, 
                skill: 5,             
                weapons: [],
                capacity: [],
                pic: 'https://i.imgur.com/FVUrbn1.png' 
            },
            INFANTRY: { title: 'Heavy-Infantry', color: 'green', terrainType: 'land', capacity: 1, energy: 5, armory: 7, health: 15, skill: 3, pic: 'https://i.imgur.com/VrwtpSQ.png' },
            MEDIC: { title: 'Field-Medic', color: 'orange', terrainType: 'land', capacity: 1, energy: 8, armory: 2, health: 5, skill: 10, pic: 'https://i.imgur.com/wswXEzz.png' },
            TOWER: { title: 'Field-Tower', color: 'black', terrainType: 'land', capacity: 1, energy: 8, armory: 2, health: 5, skill: 10, pic: 'https://i.imgur.com/Eb6OyCy.png' }
        };
                
        const obstacleData = {
            FOREST: { title: 'Forest',...