{{ 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 }}
    {{ else }}
        Hasil Ronde - Ronde Utama ke {{ player.round_number }} dari {{ total_rounds }}
    {{ endif }}

</div>
{{ endblock }}

{{ block content }}

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

<div class="game-wrapper">

    <div class="game-header">
        <h2>
            💣
            {{ if en }}
                "Avoid the Bomb!"
            {{ else }}
                "Menghindari Bom!"
            {{ endif }}
        </h2>
    </div>

    <div class="result-panel">

        <div class="result-card">

            {{ if player.bomb_exploded_otai }}

                <h3 class="result-lose">

                    {{ if en }}
                        💥 Bomb Exploded!
                    {{ else }}
                        💥 Bom Meledak!
                    {{ endif }}

                </h3>

                <div class="balance-box">

                    {{ if en }}
                        Boxes opened: {{ player.boxes_collected }}
                    {{ else }}
                        Kotak dibuka: {{ player.boxes_collected }}
                    {{ endif }}

                </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: {{ player.boxes_collected }}
                    {{ else }}
                        Kotak dibuka: {{ player.boxes_collected }}
                    {{ endif }}

                </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 Number Protected You
                                {{ else }}
                                    🛡️ Lucky Number Melindungi Anda
                                {{ endif }}

                            </h4>

                            <p>

                                {{ if en }}

                                    The bomb was at position
                                    <strong>{{ player.bomb_position }}</strong>,
                                    which is included in your lucky numbers.

                                {{ else }}

                                    Bom berada di posisi
                                    <strong>{{ player.bomb_position }}</strong>,
                                    yang termasuk dalam lucky numbers Anda.

                                {{ endif }}

                            </p>

                        </div>

                    {{ else }}

                        <div class="alert alert-info">

                            <h4>

                                {{ if en }}
                                    Lucky Number Not Used
                                {{ else }}
                                    Lucky Number Tidak Digunakan
                                {{ endif }}

                            </h4>

                            <p>

                                {{ if en }}
                                    You stopped before reaching your first lucky number.
                                {{ else }}
                                    Anda berhenti sebelum mencapai lucky number pertama.
                                {{ endif }}

                            </p>

                        </div>

                    {{ endif }}

                {{ endif }}

                <p class="result-win">

                    {{ if en }}
                        Earnings this round:
                        <strong>{{ player.payoff }} points</strong>
                    {{ else }}
                        Pendapatan ronde ini:
                        <strong>{{ player.payoff }} 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_otai }}

            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 }}