// script.js
var canvas = document.getElementById('hexmap');
var ctx = canvas.getContext('2d');

function resizeCanvas() {
    var headerHeight = document.querySelector('header').clientHeight;
    var headerWidth = document.querySelector('header').clientWidth;
    canvas.width = headerWidth;
    canvas.height = headerHeight;
}

window.addEventListener('resize', resizeCanvas);
resizeCanvas();

const hexagonAngle = Math.PI / 6; // 30 degrees in radians
const sideLength = 15;
const hexHeight = Math.sin(hexagonAngle) * sideLength;
const hexRadius = Math.cos(hexagonAngle) * sideLength;
const hexRectangleHeight = sideLength + 2 * hexHeight;
const hexRectangleWidth = 2 * hexRadius;

ctx.strokeStyle = "#CCCCCC";
ctx.lineWidth = 1;

let opacityValues = [];

function initializeOpacityValues() {
    for (let i = 0; i < Math.ceil(canvas.height / (hexHeight * 1.5)); i++) {
        let row = [];
        for (let j = 0; j < Math.ceil((canvas.width - (i % 2) * hexRadius) / hexRectangleWidth); j++) {
            row.push(Math.random());
        }
        opacityValues.push(row);
    }
}

function drawHexagon(x, y, opacity) {
    ctx.beginPath();
    for (let i = 0; i < 6; i++) {
        let angle = Math.PI / 3 * i;
        ctx.lineTo(
            x + hexRadius * Math.cos(angle),
                   y + hexRadius * Math.sin(angle)
        );
    }
    ctx.closePath();
    ctx.globalAlpha = opacity;
    ctx.stroke();
    ctx.globalAlpha = 1; // Reset global alpha after drawing
}

function drawBoard() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (let i = 0; i < opacityValues.length; i++) {
        let offset = (i % 2) * hexRadius;
        for (let j = 0; j < opacityValues[i].length; j++) {
            drawHexagon(
                j * hexRectangleWidth + offset,
                i * (hexHeight * 1.5),
                        opacityValues[i][j]
            );
        }
    }
}

function animate() {
    for (let i = 0; i < opacityValues.length; i++) {
        for (let j = 0; j < opacityValues[i].length; j++) {
            opacityValues[i][j] += Math.random() * 0.1 - 0.05;
            if (opacityValues[i][j] > 1) opacityValues[i][j] = 1;
            if (opacityValues[i][j] < 0) opacityValues[i][j] = 0;
        }
    }
    drawBoard();
    requestAnimationFrame(animate);
}

initializeOpacityValues();
animate();