{{ block title }}
    A/B Pressing Game
{{ endblock }}

{{ block content }}
<div class="container">
    <div class="row">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <h3>A/B Pressing Game</h3>
                </div>
                <div class="card-body">
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <div class="card bg-primary text-white">
                                <div class="card-body text-center">
                                    <h4>Timer</h4>
                                    <h2 id="timer">10:00</h2>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card bg-success text-white">
                                <div class="card-body text-center">
                                    <h4>Score</h4>
                                    <h2 id="score">0</h2>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-body text-center">
                                    <h5>Current Sequence</h5>
                                    <h3 id="sequence">-</h3>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-body text-center">
                                    <h5>Total Presses</h5>
                                    <h3 id="total-presses">0</h3>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="text-center mb-4">
                        <div id="game-instructions" class="alert alert-info">
                            <h5>Instructions:</h5>
                            <p>Press A and B keys on your keyboard in alternating sequence to gain points.</p>
                            <p>Each complete A-B sequence gives you 1 point.</p>
                            <p>You have 10 minutes to score as many points as possible.</p>
                            
                            {% if condition == 1 %}
                            <div class="alert alert-success mt-3">
                                <p><strong>Your score will not affect your payment in any way.</strong></p>
                            </div>
                            {% elif condition == 2 %}
                            <div class="alert alert-success mt-3">
                                <p><strong>As a bonus, the Red Cross charitable fund will be given 10 cents for every 100 points that you score.</strong></p>
                            </div>
                            {% else %}
                            {% if self_select_choice == 1 %}
                            <div class="alert alert-success mt-3">
                                <p><strong>Your score will not affect your payment in any way.</strong></p>
                            </div>
                            {% else %}
                            <div class="alert alert-success mt-3">
                                <p><strong>As a bonus, the Red Cross charitable fund will be given 10 cents for every 100 points that you score.</strong></p>
                            </div>
                            {% endif %}
                            {% endif %}
                        </div>
                        
                        <div id="game-controls" class="mb-4">
                            <button id="start-btn" type="button" class="btn btn-success btn-lg" onclick="startGame(event)">
                                Start Game
                            </button>
                        </div>
                        
                        <div id="game-instructions-keyboard" style="display: none;" class="alert alert-warning">
                            <h5>Keyboard Controls:</h5>
                            <p><strong>Press 'A' key</strong> to start an A-B sequence</p>
                            <p><strong>Press 'B' key</strong> to complete an A-B sequence</p>
                            <p>Each complete A-B sequence gives you 1 point!</p>
                        </div>
                    </div>
                    
                    <div id="game-status" class="alert alert-secondary text-center">
                        <h5>Game Status: <span id="status-text">Ready to Start</span></h5>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
let gameStarted = false;
let gameFinished = false;

// Initialize the page
document.addEventListener('DOMContentLoaded', function() {
    // Add keyboard event listeners
    document.addEventListener('keydown', handleKeyPress);
    
    // Check if liveSend is available
    if (typeof liveSend === 'undefined') {
        console.error('liveSend is not available! This might not be a live page.');
        return;
    }
    
    // Request current game state
    liveSend({'get_state': true});
    
    // Update timer display every second
    setInterval(updateTimerDisplay, 1000);
});

function startGame(event) {
    if (event) {
        event.preventDefault();
    }
    if (!gameStarted && !gameFinished) {
        liveSend({'action': 'start_game'});
    }
    return false;
}

function handleKeyPress(event) {
    // Only handle A and B keys
    if (event.key.toLowerCase() === 'a' || event.key.toLowerCase() === 'b') {
        event.preventDefault();
        
        if (gameStarted && !gameFinished) {
            const button = event.key.toUpperCase();
            console.log('Key pressed:', button);
            liveSend({'action': 'press', 'button': button});
            
            // Visual feedback for key press
            showKeyPressFeedback(button);
        }
    }
}

function showKeyPressFeedback(key) {
    // Create a temporary visual indicator for the key press
    const feedback = document.createElement('div');
    feedback.className = 'key-feedback';
    feedback.textContent = key;
    feedback.style.cssText = `
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 48px;
        font-weight: bold;
        color: ${key === 'A' ? '#dc3545' : '#ffc107'};
        background: rgba(0,0,0,0.8);
        padding: 20px;
        border-radius: 10px;
        z-index: 1000;
        pointer-events: none;
        animation: keyPressAnimation 0.3s ease-out;
    `;
    
    document.body.appendChild(feedback);
    
    // Remove after animation
    setTimeout(() => {
        if (feedback.parentNode) {
            feedback.parentNode.removeChild(feedback);
        }
    }, 300);
}

function liveRecv(data) {
    if (data.type === 'game_started') {
        gameStarted = true;
        document.getElementById('start-btn').style.display = 'none';
        document.getElementById('game-instructions-keyboard').style.display = 'block';
        document.getElementById('status-text').textContent = 'Game Started! Use A and B keys!';
        document.getElementById('game-status').className = 'alert alert-success text-center';
        updateDisplay(data);
        
    } else if (data.type === 'press_result') {
        updateDisplay(data);
        
    } else if (data.type === 'game_state') {
        gameStarted = data.game_started;
        gameFinished = data.game_finished;
        
        if (gameStarted && !gameFinished) {
            document.getElementById('start-btn').style.display = 'none';
            document.getElementById('game-instructions-keyboard').style.display = 'block';
            document.getElementById('status-text').textContent = 'Game in Progress - Use A and B keys!';
            document.getElementById('game-status').className = 'alert alert-success text-center';
        } else if (gameFinished) {
            document.getElementById('game-instructions-keyboard').style.display = 'none';
            document.getElementById('status-text').textContent = 'Game Finished!';
            document.getElementById('game-status').className = 'alert alert-warning text-center';
        }
        updateDisplay(data);
        
    } else if (data.type === 'time_update') {
        // Update timer display with server time
        let minutes = Math.floor(data.remaining_time / 60);
        let seconds = data.remaining_time % 60;
        
        document.getElementById('timer').textContent = 
            minutes.toString().padStart(2, '0') + ':' + seconds.toString().padStart(2, '0');
        
        // Auto-advance when game is finished
        if (data.game_finished) {
            gameFinished = true;
            document.getElementById('game-instructions-keyboard').style.display = 'none';
            document.getElementById('status-text').textContent = 'Time\'s Up! Game Finished!';
            document.getElementById('game-status').className = 'alert alert-warning text-center';
            
            // Auto-advance after 2 seconds
            setTimeout(function() {
                const form = document.querySelector('form');
                if (form) {
                    form.submit();
                }
            }, 2000);
        }
    }
}

function updateDisplay(data) {
    if (data.score !== undefined) {
        document.getElementById('score').textContent = data.score;
    }
    if (data.sequence !== undefined) {
        document.getElementById('sequence').textContent = data.sequence || '-';
    }
    if (data.total_presses !== undefined) {
        document.getElementById('total-presses').textContent = data.total_presses;
    }
}

function updateTimerDisplay() {
    // Request current time from server
    if (gameStarted && !gameFinished) {
        liveSend({'get_time': true});
    }
}
</script>

<style>
.card {
    margin-bottom: 20px;
}

.btn-lg {
    padding: 15px 30px;
    font-size: 18px;
    font-weight: bold;
}

#timer, #score {
    font-family: 'Courier New', monospace;
    font-weight: bold;
}

#sequence {
    font-family: 'Courier New', monospace;
    font-weight: bold;
    color: #007bff;
}

.alert {
    border-radius: 10px;
}

.card-header {
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
}

.btn:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

@keyframes keyPressAnimation {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 0;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
    }
}

.key-feedback {
    animation: keyPressAnimation 0.3s ease-out;
}
</style>

{{ endblock }}