spookonomics/ui/mainmenuui.js

import gsap from "gsap"
import { showNavigationUI } from "./navigationui.js"
import { clearSaveData, loadSaveData } from "../game.js"
import { showGameStatusUI } from "./gamestatusui.js"

export function brewTutorialPrompt(stageData) {
    if(stageData.brewTutorial1.alreadySeen) {
        return
    }
    stageData.brewInactivityHandle = setTimeout(() => {
        gsap.to(stageData.brewTutorial1.material, {duration: 1.5, opacity: 1, onStart: () => {
            stageData.brewTutorial1.castShadow = true
        }})
    }, 5000)
}

export async function mainMenuUI(game, stageData) {
    const container = document.getElementById('main-menu-container')
    document.getElementById("play-button").addEventListener('click', () => {

        brewTutorialPrompt(stageData)
        closeMainMenuUI(game, stageData)
        showNavigationUI(game, stageData)
        showGameStatusUI(game, stageData)
        const camPosition = stageData.cameraPositions[1]
        gsap.to(game.camera.position, {duration: 2.5, x: camPosition.camera.x, y:camPosition.camera.y, z:camPosition.camera.z})
        gsap.to(game.lookAtFocus, { duration: 2.5, x: camPosition.focus.x, y: camPosition.focus.y, z: camPosition.focus.z })
    })

    document.getElementById("reset-save-button").addEventListener('click', () => {
        let shouldDelete = confirm("Are you sure you want to delete your Spookonomics save data? This cannot be undone.")
        if(shouldDelete) {
            clearSaveData(stageData)
            loadSaveData(stageData)
        }
    })

    container.addEventListener('click', (event) => {
        event.stopPropagation()
    })
}

export async function openMainMenuUI(game, stageData) {
    const container = document.getElementById("main-menu-container")
    container.style.display = "block"
    const display = document.getElementById("main-menu-display")
    display.style.opacity = 0
    gsap.to(display, {opacity: 1, duration: 0.8})
}

export async function closeMainMenuUI(game, stageData) {
    const container = document.getElementById("main-menu-container")
    const display = document.getElementById("main-menu-display")
    gsap.to(display, {
        opacity: 0, duration: 0.8, onComplete: () => {
            container.style.display = "none"

        }
    })
}