GOOD-OPTION

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 gridBorderColor = 'red';

    // Placeholder for players and computed (enemy) colors
    const players = {
      player1: { color: 'blue' },
      player2: { color: 'green' },
      player3: { color: 'yellow' },
    };

    const computed = {
      comp1: { color: 'red' },
      comp2: { color: 'purple' },
      comp3: { color: 'orange' },
    };

    // Data for units (army)
    const unitsData = {
      TANK: {
        title: 'Lightweight-Tank',
        type: 'army',
        color: 'green',
        pic: 'https://i.imgur.com/FVUrbn1.png'
      }
    };

    // Data for obstacles (terrain)
    const obstaclesData = {
      STONE: {
        title: 'stone',
        type: 'terrain',
        color: 'grey',
        pic: 'https://i.imgur.com/yWF4P2J.png'
      }
    };

    window.onload = () => {
      const canvas = document.querySelector('canvas');
      const rows = 19;
      const cols = 28;
      const hexSize = iconSize / 1.6;
      const spacing = 1;
      const hexWidth = 2 * hexSize * Math.cos(Math.PI / 6) + spacing;
      const hexHeight = hexSize * 1.5 + spacing;
      const gridWidth = (cols - 1) * hexWidth + hexWidth + (hexSize - spacing) + hexGridPadding * 2;
      const gridHeight = (rows - 1) * hexHeight + hexHeight + spacing + hexGridPadding * 2;

      canvas.width = gridWidth;
      canvas.height = gridHeight;

      drawGrid(canvas, rows, cols, hexSize); // Initialize...

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: lightgrey;
            box-shadow: 0 4px 8px rgba(110, 110, 110, 0.5);
            width: 60%;            
        }