spookonomics/ui/gameui.js

import gsap from 'gsap'
import '../library/arrayhelpers.js'

const unknownPotion = {"image": "./images/potion_unknown.png", "title": "Unknown", "properties": []}

function displaySelectedIngredients(game, stageData) {
    const ingredientSelectedButtons = document.getElementById('brew-selected-container').children
    for(let buttonIndex = 0; buttonIndex < ingredientSelectedButtons.length; buttonIndex++) {
        ingredientSelectedButtons[buttonIndex].classList.add("disabled")
        ingredientSelectedButtons[buttonIndex].getElementsByClassName('disabled-selected-ingredient')[0].style.display = "block"
        ingredientSelectedButtons[buttonIndex].getElementsByClassName('active-selected-ingredient')[0].style.display = "none"
    }


    for(let ingredientIndex = 0; ingredientIndex < stageData.selectedIngredients.length; ingredientIndex++) {
        const ingredientName = stageData.selectedIngredients[ingredientIndex]
        const ingredientData = stageData.ingredientInfo[ingredientName]
        ingredientSelectedButtons[ingredientIndex].classList.remove("disabled")
        ingredientSelectedButtons[ingredientIndex].getElementsByClassName('disabled-selected-ingredient')[0].style.display = "none"
        const selectedIngredient = ingredientSelectedButtons[ingredientIndex].getElementsByClassName('active-selected-ingredient')[0]
        selectedIngredient.style.display = "flex"

        selectedIngredient.getElementsByClassName("selected-ingredient-image")[0].getElementsByTagName('img')[0].src = ingredientData.image
        
        selectedIngredient.getElementsByClassName("selected-ingredient-description")[0].getElementsByTagName('h2')[0].innerText = ingredientData.title
        selectedIngredient.getElementsByClassName("selected-ingredient-description")[0].getElementsByTagName('p')[0].innerText = ingredientData.description
    }
}

function displayBrewPotion(game, stageData) {
    const possiblePotions = stageData.potionInfo.filter(potion => stageData.selectedIngredients.equals(potion.ingredients, false))
    let potionToBrew = unknownPotion
    stageData.potionToBrew = null
    if(possiblePotions.length == 1) {
        potionToBrew = possiblePotions[0]
        stageData.potionToBrew = potionToBrew
    }

    document.getElementById('potion-icon').innerHTML = ''
    let potionIcon = document.createElement('img')
    potionIcon.src = potionToBrew.image
    document.getElementById('potion-icon').appendChild(potionIcon)

    const groupedPotionInventory = stageData.potionInventory.groupCount()
    const potionCount = groupedPotionInventory[potionToBrew.name] ?? 0

    const potionCountElement = document.getElementById('potion-icon-container').getElementsByClassName("potion-inventory-count")[0]
    if(potionCount == 0) {
        potionCountElement.style.display = "none"
    } else {
        potionCountElement.style.display = "block"
        potionCountElement.innerHTML = potionCount
    }
    document.getElementById('potion-name').innerText = potionToBrew.title
    document.getElementById('potion-properties-list').innerHTML = ''
    potionToBrew.properties.forEach(property => {
        let propElement = document.createElement('li')
        propElement.innerText = property
        document.getElementById('potion-properties-list').appendChild(propElement)
    })

    
}

export function updateIngredients(game, stageData) {
    const container = document.getElementById("brew-ingredients-container")
    container.innerHTML = ''
    const groupedIngredientInventory = stageData.ingredientInventory.groupCount()

    for(let ingredientName in stageData.ingredientInfo) {
        const info = stageData.ingredientInfo[ingredientName]
        
        const ingredientContainer = document.createElement('div')
        ingredientContainer.className = 'ingredient-container'
        ingredientContainer.setAttribute('data-ingredient', ingredientName)

        const ingredientImage = document.createElement('img')
        ingredientImage.src = info.image
        ingredientImage.title = info.title


        const ingredientCount = document.createElement('div')
        ingredientCount.className = 'ingredient-inventory-brew-count'
        ingredientCount.innerHTML = groupedIngredientInventory[ingredientName] ?? 0

        ingredientContainer.appendChild(ingredientImage)
        ingredientContainer.appendChild(ingredientCount)
        ingredientContainer.addEventListener('click', (event) => {
            event.stopPropagation()
            if(stageData.selectedIngredients.length < 2) {
                stageData.soundEffects['audio/click1.ogg'].play()
                const ingredientName = ingredientContainer.getAttribute('data-ingredient')

                stageData.selectedIngredients.push(ingredientName)
                displaySelectedIngredients(game, stageData)
            }

            displayBrewPotion(game, stageData)
         })

        container.appendChild(ingredientContainer)
    }
}

export async function brewUI(game, stageData) {
    document.getElementById("brew-container").addEventListener('click', () => {
        closeBrewUI(game, stageData)
    })

    document.getElementById('brew-right-side').addEventListener('click', (event) => {
        event.stopPropagation()
    })    

    updateIngredients(game, stageData)   
    
    const ingredientSelectedButtons = document.getElementById('brew-selected-container').children
     for(let buttonIndex = 0; buttonIndex < ingredientSelectedButtons.length; buttonIndex++) {
         const button = ingredientSelectedButtons[buttonIndex]
         button.addEventListener("click", (event) => {
            event.stopPropagation()
            if(button.classList.contains('disabled')) {
                return
             }
             stageData.soundEffects['audio/click1.ogg'].play()
             stageData.selectedIngredients.splice(buttonIndex, 1)
             displaySelectedIngredients(game, stageData)
             displayBrewPotion(game, stageData)         
         })
    }

    document.getElementById("start-brew").addEventListener('click', () => {
        stageData.beginBrew()
    })

    
}

export async function openBrewUI(game,stageData) {
    if(stageData.cauldron.brewMenuOpen) {
        return
    }
    
    
    const brewContainer = document.getElementById("brew-container")
    brewContainer.style.display = "block"
    if(game.canvas.clientWidth >= 1024) {
        let currentPosition = stageData.cameraPositions[stageData.currentRoom-1]
        gsap.to(game.lookAtFocus, {x: currentPosition.focus.x + 2.5, duration: 0.8})
        gsap.to(game.camera.position, {x: currentPosition.camera.x + 2.5, duration: 0.8})
    } else {
        let currentPosition = stageData.cameraPositions[stageData.currentRoom-1]
        gsap.to(game.lookAtFocus, {y: currentPosition.focus.y - 1.5, duration: 0.8})
        gsap.to(game.camera.position, {y: currentPosition.camera.y - 1.5, duration: 0.8})
    }

    updateIngredients(game, stageData)
    displaySelectedIngredients(game, stageData)
    displayBrewPotion(game, stageData)

    stageData.soundEffects['audio/drawKnife2.ogg'].play()
    const brewRightSide = document.getElementById("brew-right-side")
    gsap.to(brewRightSide, {x: 0, duration: 0.8, onComplete: () => {
        stageData.cauldron.brewMenuOpen = true
    }})
}


export async function closeBrewUI(game, stageData) {
    if(!stageData.cauldron.brewMenuOpen) {
        return
    }
    stageData.cauldron.brewMenuOpen = false
    const brewContainer = document.getElementById("brew-container")
    
    if(game.canvas.clientWidth >= 1024) {
        let currentPosition = stageData.cameraPositions[stageData.currentRoom-1]
        gsap.to(game.lookAtFocus, {x: currentPosition.focus.x, duration: 0.8})
        gsap.to(game.camera.position, {x: currentPosition.camera.x, duration: 0.8})
    } else {
        let currentPosition = stageData.cameraPositions[stageData.currentRoom-1]
        gsap.to(game.lookAtFocus, {y: currentPosition.focus.y, duration: 0.8})
        gsap.to(game.camera.position, {y: currentPosition.camera.y, duration: 0.8})
    }

    stageData.soundEffects['audio/drawKnife2.ogg'].play()
    const brewRightSide = document.getElementById("brew-right-side")
    gsap.to(brewRightSide, {x: 1024, duration: 0.8, onComplete: () => {
        brewContainer.style.display = "none"
        
    }})
}