1.10

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';

      // 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',
          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'
        }
      };

      // Data for obstacles (terrain)
      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',
     ...

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;
        padding: 0;
      }

      /* Container for the Canvas Elements */
      .canvas-container {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 90%;  /* Can be adjusted for better scaling */
        max-width: 1200px;  /* Maximum width to prevent the canvas from becoming too large */
        height: 90vh;  /* Adjust height relative to viewport height */
        max-height: 800px;  /* Maximum height to keep it within reasonable bounds */
        margin: 0 auto;  /* Ensure the container itself is centered */
      }

      /* Styling for Grid Canvas */
      #gridCanvas {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);  /* Centering gridCanvas */
        width: 100%;
        height: 100%;
        border: 3px solid darkblue;
        border-radius: 20px;

        box-shadow: 0 4px 8px rgba(110, 110, 110, 0.5);
      }

      /* Styling for Units Canvas */
      #unitsCanvas {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);  /* Centering unitsCanvas */
        width: 100%;
        height: 100%;
        pointer-events: none;  /* Prevents the units canvas from blocking mouse events */
      }

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

      /* Scaling the canvas elements to stay centered and proportionally sized */
      #gridCanvas,
      #unitsCanvas {
        max-width: 2000px;  /* Limit max width */
        max-height: 1500px; /* Limit max height */
        width: 90%;       ...