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 Dynamic Aspect Ratio</title>
  </head>
  <body>
    <div class="canvas-container" id="canvasContainer"></div>

    <script>
      const obstaclesData = {
        FOREST: {
          title: 'forest',
          type: 'terrain',
          color: 'lightgreen',
          energy: 10,
          armory: 10,
          health: 10,
          skill: 5,
          weapons: [],
          capacity: [],
          pic: ''
        },
        WATER: {
          title: 'water',
          type: 'terrain',
          color: 'lightblue',
          energy: 10,
          armory: 10,
          health: 10,
          skill: 5,
          weapons: [],
          capacity: [],
          pic: 'https://i.imgur.com/HfHFk9Y.png'
        },
        STONE: {
          title: 'stone',
          type: 'terrain',
          color: 'grey',
          energy: 10,
          armory: 10,
          health: 10,
          skill: 5,
          weapons: [],
          capacity: [],
          pic: 'https://i.imgur.com/b4IuXIc.png'
        }
      };

      const unitData = {
        TANK: {
          title: 'Lightweight-Tank',
          militaryType: 'army',
          terrainType: 'ground-forces',
          unitType: 'vehicle',
          combatType: 'offensive',
          combatLevel: 'light',
          attributes: {
            health: 100,
            energy: 10,
            armory: 15,
            skill: 7,
            color: 'black', // Corrected: unit color
            range: 'Medium',
            capacity: 5,
            pic: '', // No image for this one
          },
          weapons: {
            primary: 'Cannon',
            secondary: ['Missiles'],
            special: ['EMP'],
          },
          capabilities: {
            automated: false,
            radar: true,
            detection: false,
            transport: false,
       ...