SINGLE-CODE-BLOCK 1.09

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 Entities</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 { border: 3px solid darkblue; border-radius: 20px; }
    </style>
  </head>
  <body>
    <canvas></canvas>
    <script>
      const iconSize = 80;
      const hexGridPadding = 30;
      const gridBasecolor = 'yellow';
      const gridBordercolor = 'red';

      // Separate data for units and obstacles
      const unitsData = {
        TANK: {
          title: 'Lightweight-Tank',
          type: 'army',
          color: 'green',
          bgColor: 'lightgrey',
          capacity1: 0,
          capacity2: 0,
          energy: 10,
          armory: 10,
          health: 10,
          visibility: true,
          radarability: false,
          skills: [],
          weapons: [],
          pic: 'https://i.imgur.com/FVUrbn1.png'
        }
      };

      const obstaclesData = {
        FOREST: {
          title: 'forest',
          type: 'terrain',
          color: 'red',
          bgColor: 'green',
          capacity1: 0,
          capacity2: 0,
          energy: 10,
          armory: 10,
          health: 10,
          visibility: true,
          radarability: false,
          skills: [],
          weapons: [],
          pic: ''
        },
        STONE: {
          title: 'stone',
          type: 'terrain',
          color: 'green',
          bgColor: 'green',
          capacity1: 0,
          capacity2: 0,
          energy: 10,
          armory: 10,
          health: 10,
          visibility: true,
          radarability: false,
          skills: [],
          weapons: [],
          pic: 'https://i.imgur.com/yWF4P2J.png'
        }
      };

     ...

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 {
            border: 3px solid darkblue;
            border-radius: 20px;
            background-color: grey;
            box-shadow: 0 4px 8px rgba(110, 110, 110, 0.5);
            width: 60%; /* Ensure proper scaling */
            height: auto;
            display: block; /* Helps in centering if within a flex container */
        }


       


        

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

JavaScript

/*
 const entityData = {
      TANK: { 
      	title: 'Lightweight-Tank', 
        type: 'army', 
        color: 'green', 
        bgColor: 'lightgrey', 
        capacity1: 0, 
        capacity2: 0, 
        energy: 10, 
        armory: 10, 
        health: 10, 
        visibility: true, 
        radarability: false, 
        skills: [], weapons: [], 
        pic: 'https://i.imgur.com/FVUrbn1.png' 
     },
      FOREST: {
      	title: 'Forest', 
        type: 'terrain', 
        color: 'green', 
        bgColor: 'lightgreen', 
        capacity1: 0, 
        capacity2: 0, 
        energy: 10, 
        armory: 10, 
        health: 10, 
        visibility: true, 
        radarability: false, 
        skills: [], 
        weapons: [], 
        pic: 'https://i.imgur.com/yWF4P2J.png'
      }
    };
    
    */