<!DOCTYPE html>
<html lang="hu">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }

            @font-face {
                font-family: "BebasNeue";
                src: url("../fonts/bebas.ttf") format("truetype");
                font-weight: normal;
                font-style: normal;
            }

            @font-face {
                font-family: "gta";
                src: url("../fonts/gtafont.ttf") format("truetype");
                font-weight: normal;
                font-style: normal;
            }

            body {
                background-color: transparent;
                color: black;
                height: 100vh;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .hud {
                position: absolute;
                top: 20px;
                right: 20px;
                padding: 10px;
                border-radius: 4px;
                width: 340px;
            }

            .hud-item {
                margin-bottom: 10px;
                font-size: 18px;
                display: flex;
                align-items: center;
            }

            .icon {
                width: 25px;
                height: 25px;
                margin-right: 10px;
                background-color: transparent;
            }

            .bar-container {
                background-color: rgba(0, 0, 0, 0.2);
                border-radius: 4px;
                width: 100%;
                height: 20px;
                display: flex;
                align-items: center;
                overflow: hidden;
            }

            .health,
            .armor,
            .hunger,
            .thirst {
                height: 100%;
                border-top-left-radius: 4px;
                border-bottom-left-radius: 4px;
                border-top-right-radius: 0px;
                border-bottom-right-radius: 0px;
                transition: width 0.5s ease;
            }

            .health {
                background-color: #e74c3c;
            }

            .armor {
                background-color: #1abc9c;
            }

            .hunger {
                background-color: #f39c12;
            }

            .thirst {
                background-color: #3498db;
            }

            h2 {
                font-family: "BebasNeue";
                font-size: 35px;
                color: white;
                text-align: right;
                letter-spacing: 2.2px;
            }

            .money {
                color: #4c9e6f;
                font-weight: bold;
                margin: 0 5px;
            }

            .money-change {
                font-family: "BebasNeue";
                font-size: 35px;
                font-weight: bold;
                color: white;
                margin-right: 5px;
                text-align: right;
                margin-top: 5px;
                margin-bottom: -7px;
                height: 30px;
                transition: opacity 0.5s ease;
            }

            .money-increase {
                color: #4c9e6f;
            }

            .money-decrease {
                color: #e74c3c;
            }
        </style>
    </head>
    <body>
        <div class="hud-container"></div>
        <div class="hud">
            <div class="hud-item">
                <img src="../files/Heart.png" class="icon" alt="Heart" />
                <div class="bar-container">
                    <div class="health"></div>
                </div>
            </div>
            <div class="hud-item">
                <img src="../files/Shield.png" class="icon" alt="Armor" />
                <div class="bar-container">
                    <div class="armor"></div>
                </div>
            </div>
            <div class="hud-item">
                <img src="../files/Hamburger.png" class="icon" alt="Hunger" />
                <div class="bar-container">
                    <div class="hunger"></div>
                </div>
            </div>
            <div class="hud-item">
                <img src="../files/Drink.png" class="icon" alt="Thirst" />
                <div class="bar-container">
                    <div class="thirst"></div>
                </div>
            </div>
            <h2 class="money-text">Betöltés....</h2>
            <div class="money-change"></div>
        </div>
    </body>
    <script>
        let previousMoney = undefined;

        function updateHud(type, value) {
            const typeElement = document.querySelector("." + type);
            typeElement.style.width = value + "%";
            if (value == 100) {
                typeElement.style.borderBottomRightRadius = "4px";
                typeElement.style.borderTopRightRadius = "4px";
            } else if (value == 0) {
                typeElement.style.color = "transparent";
            } else if (value <= 0) {
                typeElement.style.width = "0%";
            } else {
                typeElement.style.borderBottomRightRadius = "0px";
                typeElement.style.borderTopRightRadius = "0px";
            }
        }

        function updateMoney(value) {
            const moneyChange = document.querySelector(".money-change");
            let difference = value - previousMoney;
            let formattedDifference =
                Math.abs(difference).toLocaleString("hu-HU");

            if (previousMoney === undefined) {
                previousMoney = value;
                handleMoneyUpdate(value);
                return;
            }

            if (difference > 0) {
                moneyChange.innerHTML = `+${formattedDifference} $`;
                moneyChange.classList.add("money-increase");
                moneyChange.classList.remove("money-decrease");
            } else if (difference < 0) {
                moneyChange.innerHTML = `-${formattedDifference} $`;
                moneyChange.classList.add("money-decrease");
                moneyChange.classList.remove("money-increase");
            }

            moneyChange.style.opacity = 1;
            setTimeout(() => {
                moneyChange.style.opacity = 0;
                setTimeout(() => {
                    handleMoneyUpdate(value);
                }, 500);
            }, 1500);
        }

        function handleMoneyUpdate(value) {
            let moneyWithSpace = value
                .toString()
                .replace(/\B(?=(\d{3})+(?!\d))/g, " ");
            document.querySelector(".money-text").innerHTML =
                "<span id='money-number'>" +
                moneyWithSpace +
                "</span><span class='money'>$</span>";
            previousMoney = value;

            const moneyNumber = document.getElementById("money-number");
            if (value < 0) {
                moneyNumber.classList.add("money-decrease");
            }
        }
    </script>
</html>
