index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Game Selector</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div class="container">
        <h1>Select Game</h1>
        <button id="newGameButton" class="new-game-button" onclick="redirectToNewGame()">New Game</button>
        <div id="gameButtons" class="button-list">
            <!-- Buttons from local storage will be added here -->
        </div>
    </div>

    <script> 
        // Function to populate the buttons based on local storage
        function loadButtonsFromLocalStorage() {
            const gameButtonsContainer = document.getElementById('gameButtons');
            gameButtonsContainer.innerHTML = ''; // Clear existing buttons

            // Get all keys from local storage
            const keys = Object.keys(localStorage);

            // Create a button for each key
            keys.forEach(key => {
                const buttonContainer = document.createElement('div');
                buttonContainer.className = 'button-container';

                // Main game button
                const button = document.createElement('button');
                button.className = 'game-button';
                button.textContent = key; // Use the key as the button label
                button.onclick = () => { 
                    window.location.href = `game.html?item=${key}`;
                };

                // Settings button
                const settingsButton = document.createElement('button');
                settingsButton.className = 'settings-button';
                settingsButton.onclick = () => {
                    window.location.href = `settings.html?item=${key}`;
                };

                // Add settings icon inside the button
                const settingsIcon = document.createElement('img');
                settingsIcon.src = 'images/settings.png';
                settingsIcon.alt = 'Settings';
                settingsButton.appendChild(settingsIcon);

                // Delete button
                const deleteButton = document.createElement('button');
                deleteButton.className = 'delete-button';
                deleteButton.textContent = 'X';
                deleteButton.onclick = () => {
                    localStorage.removeItem(key); // Remove item from local storage
                    loadButtonsFromLocalStorage(); // Reload the buttons
                };

                // Append buttons to the container
                buttonContainer.appendChild(button);
                buttonContainer.appendChild(settingsButton);
                buttonContainer.appendChild(deleteButton);
                gameButtonsContainer.appendChild(buttonContainer);
            });
        }

        // Redirect to area.html when "New Game" button is clicked
        function redirectToNewGame() {
            window.location.href = 'area.html';
        }

        // Load the buttons on page load
        window.onload = loadButtonsFromLocalStorage;
    </script>
</body>
</html>