spookonomics/ui/gameoverui.js

import gsap from "gsap"
import { clearSaveData, returnToMainMenu } from "../game.js"
export function gameOverUI(game, stageData) {
    document.getElementById("play-again").addEventListener('click', event => {
        hideGameOverUI(game, stageData)

        clearSaveData(stageData)
        returnToMainMenu(game, stageData)
    })
}

export function showGameOverUI(game, stageData) {
    document.getElementById("game-over-container").style.display = "block"
    const blackoutContainer = document.getElementById("game-over-blackout")
    gsap.to(blackoutContainer, { duration: 2, opacity: 1 })

    const gameOverPanel = document.getElementById("game-over-panel")
    gameOverPanel.getElementsByTagName("p")[0].innerHTML = `You made ${stageData.currency} gold in:`
    gameOverPanel.getElementsByTagName("h2")[0].innerHTML = `${stageData.currentDay - 1} days`
}

export function hideGameOverUI(game, stageData) {

    const blackoutContainer = document.getElementById("game-over-blackout")
    gsap.to(blackoutContainer, {
        duration: 2, opacity: 0, onComplete: () => {
            document.getElementById("game-over-container").style.display = "none"
        }
    })
}