spookonomics/ui/shopui.js

import gsap from "gsap"
import { addValueToSave, playBottleClink, removeValueFromSave, updatePotionShelfDisplay } from "../game.js"


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

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

export async function shopUI(game, stageData) {
    document.getElementById("shop-container").addEventListener('click', () => {
        closeShopUI(game, stageData)
    })

    document.getElementById('shop-panel').addEventListener('click', (event) => {
        event.stopPropagation()
    })

    document.getElementById('start-selling').addEventListener('click', (event) => {
        stageData.beginSell()
    })
}

function displayPotionInventory(game, stageData) {
    const container = document.getElementById("shop-potions-container")
    container.innerHTML = ''

    const groupedPotionInventory = {}
    stageData.potionInventory.forEach(potionName => {
        if (!groupedPotionInventory[potionName]) {
            groupedPotionInventory[potionName] = 1
        } else {
            groupedPotionInventory[potionName]++
        }
    })


    Object.keys(groupedPotionInventory).forEach((potionName) => {
        const potionToDisplay = stageData.potionInfo.find(potion => potion.name == potionName)
        const potionContainer = document.createElement('div')
        potionContainer.className = "potion-container"
        potionContainer.title = potionToDisplay.title
        potionContainer.setAttribute('data-potion', potionToDisplay.name)
        const potionImage = document.createElement('img')
        potionImage.src = potionToDisplay.image
        potionImage.title = potionToDisplay.title
        const potionCount = document.createElement('div')
        potionCount.className = 'potion-inventory-count'
        potionCount.innerHTML = `${groupedPotionInventory[potionName]}`

        potionContainer.appendChild(potionImage)
        potionContainer.appendChild(potionCount)
        container.appendChild(potionContainer)
    })

    const potionButtons = document.getElementById('shop-potions-container').children
    for (const button of potionButtons) {
        button.addEventListener("click", (event) => {
            event.stopPropagation()
            if (stageData.potionStocked.length < 6) {
                stageData.soundEffects['audio/click1.ogg'].play()
                const potionName = button.getAttribute('data-potion')
                addValueToSave(stageData.potionStocked, 'potion-stocked', potionName)
                removeValueFromSave(stageData.potionInventory, 'potion-inventory', potionName)

                stageData.potionInventory.sort()
                stageData.potionStocked.sort()

                

                //playBottleClink()
            }

            displayPotionInventory(game, stageData)
            displayStockedPotions(game, stageData)
        })
    }
}

function displayStockedPotions(game, stageData) {

    
    const container = document.getElementById('shop-shelves-container')
    container.innerHTML = ''


    let bottleCount = 0

    for (let i = 0; i < 6; i++) {
        if (bottleCount % 2 == 0) {
            const shelf = document.createElement('div')
            shelf.className = 'shop-shelf'
            container.appendChild(shelf)
        }

        const currentShelf = container.getElementsByClassName('shop-shelf')[Math.floor(bottleCount / 2)]
        bottleCount++
        const potionName = stageData.potionStocked[i]
        if (!potionName) {
            const potionContainer = document.createElement('div')
            potionContainer.className = "stocked-potion-container disabled-stocked-potion"
            currentShelf.appendChild(potionContainer)
            continue
        }

        const potionToDisplay = stageData.potionInfo.find(potion => potion.name == potionName)
        const potionContainer = document.createElement('div')
        potionContainer.className = "stocked-potion-container"
        potionContainer.title = potionToDisplay.title
        potionContainer.setAttribute('data-potion', potionToDisplay.name)
        const potionImage = document.createElement('img')
        potionImage.src = potionToDisplay.image
        potionImage.title = potionToDisplay.title

        potionContainer.appendChild(potionImage)
        currentShelf.appendChild(potionContainer)
    }

    const potionStockedButtons = document.getElementById('shop-shelves-container').getElementsByClassName('stocked-potion-container')
    for (const button of potionStockedButtons) {
        if (button.classList.contains('disabled-stocked-potion')) {
            continue
        }
        button.addEventListener("click", (event) => {
            event.stopPropagation()
            if (stageData.potionStocked.length > 0) {
                stageData.soundEffects['audio/click1.ogg'].play()
                const potionName = button.getAttribute('data-potion')
                removeValueFromSave(stageData.potionStocked, 'potion-stocked', potionName)
                addValueToSave(stageData.potionInventory, 'potion-inventory', potionName)

                stageData.potionInventory.sort()
                stageData.potionStocked.sort()

                //playBottleClink()

                
            }

            displayPotionInventory(game, stageData)
            displayStockedPotions(game, stageData)
        })
    }

    updatePotionShelfDisplay()
}


export async function openShopUI(game, stageData) {
    const shopContainer = document.getElementById("shop-container")
    shopContainer.style.display = "block"

    displayPotionInventory(game, stageData)
    displayStockedPotions(game, stageData)

    const shopPanel = document.getElementById("shop-panel")
    gsap.to(shopPanel, {
        x: 0, duration: 0.8, onComplete: () => {
            stageData.chest.isStocking = true
        }
    })
}

export async function closeShopUI(game, stageData) {
    stageData.chest.isStocking = false

    const shopPanel = document.getElementById("shop-panel")
    gsap.to(shopPanel, {
        x: 1024, duration: 0.8, onComplete: () => {
            const shopContainer = document.getElementById("shop-container")
            shopContainer.style.display = "none"

        }
    })
}