{{ extends "global/Page.html" }}

{{ block styles }}
<link rel="stylesheet" href="{{ static 'coin_flip.css' }}">
{{ endblock }}

{{ block title }}
<div style="color: blue; text-align: center;">

    {{ if en }}
        Round Result – Main Round {{ player.round_number }}
        of {{ total_rounds_lucky }}
    {{ else }}
        Hasil Ronde – Ronde Utama ke {{ player.round_number }}
        dari {{ total_rounds_lucky }}
    {{ endif }}

</div>
{{ endblock }}

{{ block content }}

<div id="confetti-container"></div>

<div class="game-wrapper">

    <div class="game-header">
        <h2>
            💣
            {{ if en }}
                Game Result
            {{ else }}
                Hasil Permainan
            {{ endif }}
        </h2>
    </div>

    <div class="result-panel">

        <div class="result-card">

            {{ if player.bomb_exploded }}

                <h3 class="result-lose">
                    💥
                    {{ if en }}
                        Bomb Exploded!
                    {{ else }}
                        Bom Meledak!
                    {{ endif }}
                </h3>

                <div class="balance-box">
                    {{ if en }}
                        Boxes opened:
                    {{ else }}
                        Kotak dibuka:
                    {{ endif }}
                    {{ player.boxes_collected }}
                </div>

                <p>
                    {{ if en }}
                        Bomb position:
                    {{ else }}
                        Posisi bom:
                    {{ endif }}
                    <strong>{{ player.bomb_position }}</strong>
                </p>

                <p class="result-lose">
                    {{ if en }}
                        Earnings this round:
                        <strong>0 points</strong>
                    {{ else }}
                        Pendapatan ronde ini:
                        <strong>0 poin</strong>
                    {{ endif }}
                </p>

            {{ else }}

                <h3 class="result-win">
                    🎉
                    {{ if en }}
                        Safe!
                    {{ else }}
                        Aman!
                    {{ endif }}
                </h3>

                <div class="balance-box">
                    {{ if en }}
                        Boxes opened:
                    {{ else }}
                        Kotak dibuka:
                    {{ endif }}
                    {{ player.boxes_collected }}
                </div>

                <p>
                    {{ if en }}
                        Actual bomb position:
                    {{ else }}
                        Posisi bom sebenarnya:
                    {{ endif }}
                    <strong>{{ player.bomb_position }}</strong>
                </p>

                {{ if player.variant == C.VARIANT_LUCKY and player.bought_lucky_numbers }}

                    {{ if player.lucky_number_saved_player }}

                        <div class="alert alert-success">

                            <h4>
                                🛡️
                                {{ if en }}
                                    Lucky Numbers Protected You
                                {{ else }}
                                    Angka Keberuntungan Melindungi Anda
                                {{ endif }}
                            </h4>

                            <p>
                                {{ if en }}

                                    The bomb was at position
                                    <strong>{{ player.bomb_position }}</strong>,
                                    which was included in your Lucky Numbers.

                                {{ else }}

                                    Bom berada pada posisi
                                    <strong>{{ player.bomb_position }}</strong>,
                                    yang termasuk dalam Angka Keberuntungan Anda.

                                {{ endif }}
                            </p>

                        </div>

                    {{ else }}

                        <div class="alert alert-info">

                            <h4>
                                {{ if en }}
                                    Lucky Numbers Not Used
                                {{ else }}
                                    Angka Keberuntungan Tidak Digunakan
                                {{ endif }}
                            </h4>

                            <p>
                                {{ if en }}

                                    The bomb did not fall on any of your Lucky Numbers.

                                {{ else }}

                                    Bom tidak berada pada salah satu Angka Keberuntungan Anda.

                                {{ endif }}
                            </p>

                        </div>

                    {{ endif }}

                {{ endif }}

                <p class="result-win">

                    {{ if en }}
                        Earnings this round:
                        <strong>{{ player.payoff_lucky }} points</strong>
                    {{ else }}
                        Pendapatan ronde ini:
                        <strong>{{ player.payoff_lucky }} poin</strong>
                    {{ endif }}

                </p>

            {{ endif }}

        </div>

        <div class="next-btn">
            {{ next_button }}
        </div>

    </div>

</div>


<!-- Visual Effects -->
<img id="bombImage"
     src="{{ static 'bomb.png' }}"
     class="bomb-effect">

<img id="explosionGif"
     src="{{ static 'Explotion_VisualTimmy.gif' }}"
     class="explosion-effect">

<style>
.bomb-effect, .explosion-effect {
    position: fixed;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%);
    width: 350px;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
}

.fade-in {
    animation: fadeIn 0.4s forwards;
}

.fade-out {
    animation: fadeOut 0.5s forwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}
</style>

<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.min.js"></script>

<script>
window.onload = function () {

    const roundKey = "bret_result_round_{{ player.round_number }}";

    if (sessionStorage.getItem(roundKey)) return;
    sessionStorage.setItem(roundKey, 'true');

    setTimeout(function () {

        {{ if not player.bomb_exploded }}

            confetti({
                particleCount: 1200,
                spread: 200,
                startVelocity: 45,
                origin: { y: 0.4 }
            });

            setTimeout(() => {
                confetti({
                    particleCount: 200,
                    spread: 180,
                    startVelocity: 35,
                    origin: { y: 0.55 }
                });
            }, 250);

        {{ else }}

            const bomb = document.getElementById("bombImage");
            const explosion = document.getElementById("explosionGif");

            if (bomb && explosion) {

                bomb.classList.add("fade-in");

                setTimeout(() => {
                    explosion.style.opacity = 1;
                    bomb.classList.remove("fade-in");
                    bomb.classList.add("fade-out");
                }, 500);

            }

        {{ endif }}

    }, 200);
};
</script>

{{ endblock }}