PERFECT-GRID 1.03

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>
    <style>
    
    </style>
  </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: 'https://i.imgur.com/yWF4P2J.png'
        },
        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',
            range: 'Medium',
            capacity: 5,
            pic: 'https://i.imgur.com/FVUrbn1.png',
          },
          weapons: {
            primary: 'Cannon',
            secondary: ['Missiles'],
            special: ['EMP'],
          },
          capabilities: {
            automated: false,
  ...

CSS

body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        background: white;
      }

      .canvas-container {
        position: relative;
        border-radius: 20px;
      }

      canvas {
        position: absolute;
        width: 100%;
        height: 100%;
      }