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 Units and Obstacles</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background: #f4f4f4;
            color: #333;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            overflow: hidden;
            flex-direction: column;
        }

        .canvas-container {
            position: relative;
            width: 80%;
            height: 80%;
        }

        canvas {
            position: absolute;
            border: 3px solid darkblue;
            border-radius: 20px;
            background-color: grey;
            box-shadow: 0 4px 8px rgba(110, 110, 110, 0.5);
            width: 100%;
            height: 100%;
            display: block;
        }

        /* Hover effect for canvas */
        canvas:hover {
            cursor: pointer;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
        }
    </style>
    <script>
       
    </script>
</head>
<body>
    <canvas id="hexCanvas"></canvas>

</body>
</html>

CSS

body {
    font-family: 'Arial', sans-serif;
    background: #f4f4f4;
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    overflow: hidden;
    flex-direction: column;
}

.canvas-container {
    position: relative;
    width: 80%;
    height: 80%;
    display: flex;
    justify-content: center;
    align-items: center;  /* Ensures the canvases are centered inside the container */
}

canvas {
    position: absolute;
    border: 3px solid darkblue;
    border-radius: 20px;
    background-color: transparent; /* Ensures no background color */
    box-shadow: 0 4px 8px rgba(110, 110, 110, 0.5);
    display: block;
}

/* Layer stacking and transparency fixes */
canvas:nth-child(1) { 
    z-index: 1; 
    background-color: red;  /* Background layer (set to red) */
}

canvas:nth-child(2) { 
    z-index: 2; 
    background-color: transparent;  /* Grid layer (semi-transparent) */
}

canvas:nth-child(3) { 
    z-index: 3; 
    background-color: transparent;  /* Units and obstacles layer (top layer) */
}

/* Hover effect for canvas */
canvas:hover {
    cursor: pointer;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
}

JavaScript

// Configurable Data for Units and Obstacles
const gridColor = '#f0f0f0';
const gridBorderColor = '#cccccc';
const usedHexColor = '#9c9c9c';
const iconSize = 80;  // Size for icons on units
const hexGridPadding = 30;

// Unit and Obstacle Data (Example)
const unitTypes = ['TANK', 'INFANTRY', 'MEDIC', 'TOWER'];
const unitData = {
    TANK: { 
        title: 'Lightweight-Tank', 
        color: 'green', 
        energy: 10, 
        armory: 10, 
        health: 10, 
        skill: 5,             
        weapons: [],
        capacity: [],
        pic: 'https://i.imgur.com/FVUrbn1.png' },
    INFANTRY: { title: 'Heavy-Infantry', color: 'green', capacity: 1, energy: 5, armory: 7, health: 15, skill: 3, pic: '' },
    MEDIC: { title: 'Field-Medic', color: 'orange', capacity: 1, energy: 8, armory: 2, health: 5, skill: 10, pic: 'https://i.imgur.com/wswXEzz.png' },
    TOWER: { title: 'Field-Tower', color: 'black', capacity: 1, energy: 8, armory: 2, health: 5, skill: 10, pic: 'https://i.imgur.com/Eb6OyCy.png' }
};
const obstacleData = {
    FOREST: { title: 'Forest', color: 'green', bgColor: 'lightgreen', capacity: 0, energy: 0, armory: 0, health: 10, skill: 0, pic: 'https://i.imgur.com/yWF4P2J.png' },
    BRIDGE: { title: 'Bridge', color: 'grey', bgColor: 'lightgreen', capacity: 1, energy: 5, armory: 7, health: 15, skill: 3, pic: 'https://i.imgur.com/yWF4P2J.png' },
    STONE: { title: 'Stone', color: 'grey', bgColor: 'darkgrey', capacity: 1, energy: 8, armory: 2, health: 5, skill: 10, pic: 'https://i.imgur.com/b4IuXIc.png' },
    WATER: { title: 'Waterfalls', color: 'grey', bgColor: 'lightblue', capacity: 0, energy: 0, armory: 0, health: 10, skill: 0, pic: 'https://i.imgur.com/HfHFk9Y.png' }
};

// Colors for players and enemies
const playerColors = { TANK: 'blue', INFANTRY: 'blue', MEDIC: 'blue', TOWER: 'blue' };
const enemyColors = { TANK: 'red', INFANTRY: 'red', MEDIC: 'red', TOWER: 'red' };

class HexGrid {
    constructor(canvas, rows, cols, hexSize, spacing) {
    ...