<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <meta name="mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <title>Flappy Bird</title>
        <link rel="stylesheet" href="flappybird.css">
        <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
        <script src="highscores.js"></script>
        <script src="flappybird.js"></script>
    </head>
    <body>
        <header>
            <h1>Flappy Bird CTO</h1>
            <p>Press Space, Up Arrow, or X to jump!</p>
            <div class="social-links">
                <a href="https://x.com/FlappyBirdCTO" target="_blank" title="Follow us on X">
                    <img src="./x.png" alt="X">
                </a>
                <a href="https://t.co/VR37Vt2PbY" target="_blank" title="Join our Telegram">
                    <img src="./telegram.png" alt="Telegram">
                </a>
                <a href="https://dexscreener.com/solana/ck4gy81v5g4rsa9smkzberf4qbbdiprsbdmrimakjr7e" target="_blank" title="DexScreener">
                    <img src="./dexscreener.png" alt="DexScreener">
                </a>
                <a href="https://solscan.io/token/7DVgQAykPesn4fc62gSGvF5GuDAgWsY8nQeW2CZxpump" target="_blank" title="View on Solscan">
                    <img src="./solscan.png" alt="Solscan">
                </a>
                <a href="https://raydium.io/swap/?inputMint=sol&outputMint=7DVgQAykPesn4fc62gSGvF5GuDAgWsY8nQeW2CZxpump" target="_blank" title="Trade on Raydium">
                    <img src="./raydium.png" alt="Raydium">
                </a>
                <a href="https://jup.ag/swap/SOL-7DVgQAykPesn4fc62gSGvF5GuDAgWsY8nQeW2CZxpump" target="_blank" title="Trade on Jupiter">
                    <img src="./jupiter.png" alt="Jupiter">
                </a>
            </div>
            <div class="contract-address">
                CA: <span title="Click to copy" onclick="copyToClipboard('7DVgQAykPesn4fc62gSGvF5GuDAgWsY8nQeW2CZxpump')">ck4gy81v5g4rsa9smkzberf4qbbdiprsbdmrimakjr7e</span>
            </div>
        </header>
        <div class="game-container">
            <div class="game-wrapper">
                <canvas id="board"></canvas>
                <img id="bird-gif" src="./flappy.gif" alt="flappy bird">
                <div id="leaderboardContainer" class="leaderboard"></div>
                <div class="game-over-popup" id="startPopup">
                    <h2>FLAPPY BIRD</h2>
                    <button class="play-again-btn" onclick="startGame()">Start Flappy</button>
                </div>
                <div class="game-over-popup" id="simpleGameOverPopup">
                    <h2>GAME OVER</h2>
                    <div class="score">Score: <span id="finalScoreSimple">0</span></div>
                    <button class="play-again-btn" onclick="handleTryAgain()">Try Again</button>
                </div>
                <div class="game-over-popup" id="gameOverPopup">
                    <h2>NEW HIGHSCORE!</h2>
                    <div class="score">Score: <span id="finalScore">0</span></div>
                    <input type="text" id="playerNameInput" class="game-input" placeholder="Enter your name" maxlength="20">
                    <input type="text" id="twitterHandleInput" class="game-input" placeholder="Twitter handle (optional)" maxlength="15">
                    <button class="play-again-btn" onclick="submitScore()">Submit Score</button>
                </div>
                <audio id="backgroundMusic" loop preload="auto">
                    <source src="./bgm_mario.mp3" type="audio/mp3">
                </audio>
                <audio id="wingSound" preload="auto">
                    <source src="./sfx_wing.wav" type="audio/wav">
                </audio>
                <audio id="dieSound" preload="auto">
                    <source src="./die.mp3" type="audio/mp3">
                </audio>
            </div>
        </div>
    </body>
</html>