{% extends "global/Page.html" %}
{% load static otree %}

{% block title %}
<div style="display: flex; justify-content: center;">
    <span>Coin Flipping Task</span>
</div>
{% endblock %}

{% block content %}

<div class="task-container">
    <h3>Round {{ round_number }}</h3>

        <p><strong>Number of Heads:</strong> {{ N_CoinFlip }}</p>



<div class="coin-container" style="text-align: center; margin: 30px 0;">
    <div id="coin" class="flipping">
        <div class="heads"><img src="/static/head.png" style="width:100%; height:100%; object-fit: contain;"></div>
        <div class="tails"><img src="/static/tail.png" style="width:100%; height:100%; object-fit: contain;"></div>
    </div>
</div>

<div id="result" style="text-align: center; font-size: 24px; display: none;">
    Result: <strong>{{ player.flip_result }}</strong>
</div>
</div>

<style>
        .task-container {
        max-width: 600px;
        margin: 0 auto;
        text-align: center;
    }

    .coin-container {
        perspective: 1000px;
    }

    #coin {
        width: 150px;
        height: 150px;
        margin: 0 auto;
        position: relative;
        transform-style: preserve-3d;
    }

    #coin .heads, #coin .tails {
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        backface-visibility: hidden;
        overflow: hidden;
    }

    #coin .heads {
        transform: rotateY(0deg);
    }

    #coin .tails {
        transform: rotateY(180deg);
    }

    .flipping {
        animation: flip 3s ease-out forwards;
    }

    .stats {
        display: flex;
        justify-content: space-around;
        margin: 20px 0;
    }

    @keyframes flip {
        0% {
            transform: rotateY(0);
        }
        50% {
            transform: rotateY(1800deg); /* Multiple rotations for spinning effect */
        }
        100% {
            transform: rotateY({% if player.flip_result == 'Heads' %}0{% else %}180{% endif %}deg);
        }
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Show result after animation completes
        setTimeout(function() {
            document.getElementById('result').style.display = 'block';
        }, 3000); // matches animation duration
    });


</script>

{% endblock %}