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

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

{{ block title }}
Round Result - Practice Round {{ player.round_number }} of {{ total_rounds_trial }}
{{ endblock }}

{{ block content }}

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

<div class="game-wrapper">

    <div class="game-header">
        <h2>💣 "Avoid the Bomb!" Result</h2>
    </div>

    <div class="result-panel">

        <div class="result-card">

            {{ if player.bomb_exploded }}

                <h3 class="result-lose">💥 The Bomb Exploded!</h3>

                <div class="balance-box">
                    Boxes opened: {{ player.boxes_collected }}
                </div>

                <p>
                    Bomb position:
                    <strong>{{ player.bomb_position }}</strong>
                </p>

                <p class="result-lose">
                    Earnings this round:
                    <strong>0 points</strong>
                </p>

            {{ else }}

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

                <div class="balance-box">
                    Boxes opened: {{ player.boxes_collected }}
                </div>

                <p>
                    Actual bomb position:
                    <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 Protected You</h4>
                            <p>
                                The bomb was at position
                                <strong>{{ player.bomb_position }}</strong>,
                                which was included in your lucky numbers.
                            </p>
                        </div>

                    {{ else }}

                        <div class="alert alert-info">
                            <h4>Lucky Number Not Used</h4>
                            <p>
                                You stopped before reaching your first lucky number.
                            </p>
                        </div>

                    {{ endif }}

                {{ endif }}

                <p class="result-win">
                    Earnings this round:
                    <strong>{{ player.payoff_trial }} points</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 }}