<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Waffenlager Menü</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="menu-container">
    <div class="menu-title">Waffenlager</div>
    <div class="vehicle-list" id="weaponList"></div>
</div>

<script>
    function createWeaponMenu(weapons) {
    const weaponList = document.getElementById('weaponList');
    weaponList.innerHTML = ''; 

    weapons.forEach(weapon => {
        const weaponOption = document.createElement('div');
        weaponOption.className = 'vehicle-option';
        weaponOption.onclick = () => chooseWeapon(weapon.name);

        const weaponName = document.createElement('span');
        weaponName.className = 'vehicle-name';
        weaponName.textContent = weapon.name;

        const weaponLevel = document.createElement('span');
        weaponLevel.className = 'vehicle-level';
        weaponLevel.textContent = `(Level: ${weapon.level})`;

        weaponOption.appendChild(weaponName);
        weaponOption.appendChild(weaponLevel);

        weaponList.appendChild(weaponOption);
    });
}


    function chooseWeapon(weaponName) {
        if ('alt' in window) { 
            alt.emit("weaponSelection", weaponName);
        } 
    }

    if ('alt' in window) {
        alt.on("sendWeaponList", createWeaponMenu);
    }
</script>

</body>
</html>