const number_levels = 2;

function byId(el) {
    return document.getElementById(el);
}

// Get elements
const startScreen = byId("startScreen")
const gameScreen = byId("gameScreen")
const levelChoicesTarget = byId("levelChoice")
const startGameBtn = byId("startGameBtn")
const stopGameBtn = byId("stopGameBtn")


/**
 * Show main screen
 */
function showMainScreen() {
    startScreen.style.display = "unset";
    gameScreen.style.display = "none";
}

/**
 * Start a new game
 */
async function startGame(gameID) {
    startScreen.style.display = "none";
    gameScreen.style.display = "unset";
}

/**
 * Change the currently active window
 */
function changeWindow() {
    
    // Try to get game ID
    const gameID = Number(window.location.hash.substr(1));

    if(gameID > 0)
        startGame(gameID);
    else
        showMainScreen();
}







// Initialize page

/// Listen to events
window.addEventListener("hashchange", (e) => changeWindow())


// Make game levels form lives
for (let index = 1; index < number_levels + 1; index++) {
    levelChoicesTarget.innerHTML += "<li>" +
        "<input type='radio' name='level' value='"+index+"' "+(index == 1 ? "checked" : "")+" />" +
        " Level " + index + "</li>";
}

startGameBtn.addEventListener("click", (ev) => {
    ev.preventDefault();

    const gameID = document.querySelector("input[name='level']:checked").value
    location.href = "#" + gameID;
})


// Stop game
stopGameBtn.addEventListener("click", () => {
    location.href = "#";
})

// Refresh current window
changeWindow();