Battle-Isle-REBORN 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>Perfectly Centered Hexagonal Grid with Units and Obstacles</title>
    <style>
      
    </style>
    
    <script>
      // Function to create elements with optional classes, content, attributes, and styles
      function createElement(tag, classes = '', content = '', attrs = {}, styles = {}) {
        const el = document.createElement(tag);
        if (classes) { el.className = classes; }
        if (content) { el.textContent = content; }
        Object.keys(attrs).forEach(attr => el.setAttribute(attr, attrs[attr]));
        Object.keys(styles).forEach(style => el.style[style] = styles[style]);
        return el;
      }
      // Function to create multiple buttons and append them to a parent container
      function createButtons(labels, parentElement, buttonClass = 'buttonSidemenu') {
        labels.forEach(label => {
          const button = createElement('div', buttonClass, label, { id: `btn${label}` });
          parentElement.appendChild(button);
        });
      }
      // Function to style all divs with display: flex
      function styleDivs() {
        const allDivs = document.querySelectorAll('div');
        allDivs.forEach(function(div) {
          div.style.display = 'flex';
          div.style.alignItems = 'center';
          div.style.justifyContent = 'center';
          div.style.margin = '5px';
          div.style.borderRadius = '5px';
        });
      }
    </script>    
    
    
    <script>        
      class HexGrid {
        constructor(canvas, rows, cols, hexSize, spacing) {
          this.canvas = canvas;
          this.ctx = canvas.getContext('2d');
          this.rows = rows;
          this.cols = cols;
          this.hexSize = hexSize;
          this.spacing = spacing;
          this.hexWidth = 2 * hexSize * Math.cos(Math.PI / 6) + spacing;
          this.hexHeight = hexSize * 1.5...

CSS

body {
    font-family: 'Arial', sans-serif;
    background: #f4f4f4;
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
    flex-direction: row;
    background: linear-gradient(#7a8b50, #5d6b37);
  }

  canvas {
    border-radius: 20px;
    background-color: #4d5d44;
    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 */
    margin: 70px;
  }

  canvas:hover {
    border: 3px solid black;
    cursor: pointer;
    box-shadow: 0 8px 10px rgba(0, 0, 0, 0.5);
    margin: 68px;
    
  }
  /* Sidebar and Button Styling */
  .buttonSidemenu {
    height: 70px;
    width: 98%;
    color: #fff; /* White text */
    font-weight: bold;   
    cursor: pointer;
    transition: background-color 0.1s ease, transform 0.1s ease-in-out;      
    background: #2c3034;
  }

  .buttonSidemenu:hover {
    background-color: #3b4c32; /* Darker green on hover */
    transform: scale(1.05); /* Slight scaling effect */
    border: 3px solid white;
  }

  .buttonSidemenu:active {
    background-color: #2f3b28; /* Even darker green on click */
    transform: scale(0.95); /* Slight compression effect */

  }

  /* Main Container */
  .itf-maincontainer {
    max-width: 800px;
    width: 50%;
  }

  /* Left Section */
  .itf-left {
    width: 10%;
    height: 98%;
    display: flex;
    flex-direction: column;

  }

  /* Main Section */
  .itf-center {
    width: 78%;
    height: 98%;
    display: flex;
    flex-direction: column;
    border-left: 2px solid #4d5d44; /* Subtle separator */
    background-color: #2c3034;
  }

  /* Top, Center, and Bottom sections in the main section */
  .itf-topmenu, .itf-centermenu, .itf-botmenu {
    background-color: #4d5d44; 
    color: #fff;
    text-align: center;
    line-height: 100px; /* Vertical centering */
    border-radius: 5px;

  }

  /*...