Inventar Test sio-roleplay bartek

testing lol
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FiveM Inventar</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="inventory"></div>

    <script src="script.js"></script>
</body>
</html>


<!--

CSS

 -->


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f4f4f4;
}

#inventory {
    display: grid;
    grid-gap: 10px;
    justify-content: center;
}

.slot {
    width: 100px;
    height: 100px;
    background-color: #ddd;
    border: 2px solid #aaa;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    color: #333;
    font-weight: bold;
    cursor: pointer;
}

.slot:hover {
    background-color: #ccc;
}





 <!-- 
 
 Javascript
 
  -->


  const totalSlots = 13;

const columns = Math.ceil(Math.sqrt(totalSlots));
const inventory = {};

function createInventory() {
    const inventoryContainer = document.getElementById('inventory');
    inventoryContainer.style.gridTemplateColumns = `repeat(${columns}, 100px)`;

    for (let i = 1; i <= totalSlots; i++) {
        const slotElement = document.createElement('div');
        slotElement.classList.add('slot');
        slotElement.id = `slot-${i}`;
        slotElement.setAttribute('data-slot', i);
        inventoryContainer.appendChild(slotElement);
    }
}

function updateSlot(slot, item) {
    inventory[slot] = item;
    const slotElement = document.getElementById(`slot-${slot}`);
    slotElement.textContent = item ? `${item.quantity}x ${item.name}` : '';
}

const bread = { name: 'Brot', quantity: 2 };
const water = { name: 'Wasser', quantity: 3 };
const massin = { name: 'Massin', quantity: 10 };


function fillInventory() {
    updateSlot(3, bread);
    updateSlot(5, water);
    updateSlot(6, massin);
}

document.addEventListener('DOMContentLoaded', () => {
    createInventory();
    fillInventory();

    document.querySelectorAll('.slot').forEach(slot => {
        slot.addEventListener('click', (e) => {
            const slotId = e.target.getAttribute('data-slot');
            /*alert(`Slot ${slotId} enthält: ${inventory[slotId] ? `${inventory[slotId].quantity}x ${inventory[slotId].name}` : 'nichts'}`);*/
        });
    });
});
Editor is loading...