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

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

{{ block title }}
<div style="color: blue; text-align: center;">
Hasil Ronde - Ronde Latihan ke {{ player.round_number }} of {{ total_rounds_trial }}
</div>
{{ endblock }}

{{ block content }}

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

<div class="game-wrapper">

    <div class="game-header">
        <h2>💣 Hasil Permainan</h2>
    </div>

    <div class="result-panel">

        <div class="result-card">

            {{ if player.bomb_exploded }}

                <h3 class="result-lose">💥 Bom Meledak!</h3>

                <div class="balance-box">
                    Kotak dibuka : {{ player.boxes_collected_otai_trial }}
                </div>

                <p>
                    Posisi bom:
                    <strong>{{ player.bomb_position }}</strong>
                </p>

                <p class="result-lose">
                    Pendapatan ronde ini:
                    <strong>0 poin</strong>
                </p>

            {{ else }}

                <h3 class="result-win">🎉 Aman!</h3>

                <div class="balance-box">
                    Kotak dibuka: {{ player.boxes_collected_otai_trial }}
                </div>

                <p>
                    Posisi bom sebenarnya:
                    <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>🛡️ Lucky Number Melindungi Anda</h4>
                            <p>
                                Bom berada di posisi
                                <strong>{{ player.bomb_position }}</strong>,
                                yang termasuk dalam lucky numbers Anda.
                            </p>
                        </div>

                    {{ else }}

                        <div class="alert alert-info">
                            <h4>Lucky Number Tidak Digunakan</h4>
                            <p>
                                Anda berhenti sebelum mencapai lucky number pertama.
                            </p>
                        </div>

                    {{ endif }}

                {{ endif }}

                <p class="result-win">
                    Pendapatan ronde ini:
                    <strong>{{ player.payoff_trial }} poin</strong>
                </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 }}