Embed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tap Champ</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #e0f7fa;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
        }
        .container {
            text-align: center;
            width: 100%;
            max-width: 600px;
        }
        h1 {
            font-size: 2em;
            margin-bottom: 20px;
        }
        .button, .level {
            display: inline-block;
            background-color: #ff9800;
            color: white;
            padding: 15px 30px;
            text-align: center;
            border-radius: 10px;
            text-decoration: none;
            font-size: 1.2em;
            margin: 20px 0;
            cursor: pointer;
        }
        .level.locked {
            background-color: #bdbdbd;
            cursor: not-allowed;
        }
        .message {
            margin-top: 20px;
            font-size: 1em;
        }
        .hidden {
            display: none;
        }
        .status {
            font-size: 1.2em;
            margin: 10px 0;
        }
        .timer {
            font-size: 3em;
            margin: 20px 0;
        }
        .progress-circle {
            position: relative;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: conic-gradient(#76c7c0 0% 0%, #ddd 0% 100%);
            margin: 20px auto;
        }
        .progress-circle span {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 1.5em;
        }
        .instructions {
            font-size: 1em;
            margin: 20px 0;
        }
        .button-container {
            display: flex;
            justify-content: space-around;
            margin: 20px 0;
        }
        .button {
            background-color: #ff9800;
            color: white;
            padding: 15px 30px;
            border-radius: 10px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="container" id="mainScreen">
        <h1>Tap Champ</h1>
        <a href="#" class="button" id="playNow" style="background-color: #ff9800; color: white;">Play Now</a>
        <p class="message">Download the full game on iOS and Android</p>
        <p class="message">If Play Now is lagging, please refresh the screen</p>
    </div>
    <div class="container hidden" id="levelScreen">
        <h1>Levels</h1>
        <div id="levels">
            <a href="#" class="level" data-level="1">Level 1</a>
            <a href="#" class="level locked" data-level="2">Level 2</a>
            <a href="#" class="level locked" data-level="3">Level 3</a>
            <a href="#" class="level locked" data-level="4">Level 4</a>
            <a href="#" class="level locked" data-level="5">Level 5</a>
        </div>
    </div>
    <div class="container hidden" id="gameplayScreen">
        <div class="timer" id="timer">30s</div>
        <div class="progress-circle" id="progressCircle">
            <span id="progressText">0%</span>
        </div>
        <div class="instructions">
            You can only earn points towards the progress bar if you hit the buttons right to left or left to right.
            You need to make <span id="remainingTaps">100</span> more taps to win!
        </div>
        <div class="button-container">
            <div class="button" id="tapLeft" style="background-color: #ff9800; color: white;">Tap! (X)</div>
            <div class="button" id="tapRight" style="background-color: #ff9800; color: white;">Tap! (B)</div>
        </div>
        <div class="button" id="backButton">Back to Levels</div>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const playNowButton = document.getElementById('playNow');
            const mainScreen = document.getElementById('mainScreen');
            const levelScreen = document.getElementById('levelScreen');
            const gameplayScreen = document.getElementById('gameplayScreen');
            const levels = document.querySelectorAll('.level');
            const timerSpan = document.getElementById('timer');
            const progressCircle = document.getElementById('progressCircle');
            const progressText = document.getElementById('progressText');
            const remainingTapsSpan = document.getElementById('remainingTaps');
            const tapLeftButton = document.getElementById('tapLeft');
            const tapRightButton = document.getElementById('tapRight');
            const backButton = document.getElementById('backButton');

            let timer;
            let remainingTaps = 100;
            let progress = 0;
            let lastTap = null;
            let currentLevel = 1;

            playNowButton.addEventListener('click', (e) => {
                e.preventDefault();
                mainScreen.classList.add('hidden');
                levelScreen.classList.remove('hidden');
            });

            levels.forEach(level => {
                level.addEventListener('click', (e) => {
                    if (!level.classList.contains('locked')) {
                        currentLevel = parseInt(level.getAttribute('data-level'));
                        startGame(currentLevel);
                    } else {
                        alert('This level is locked. Complete previous levels to unlock.');
                    }
                });
            });

            backButton.addEventListener('click', (e) => {
                e.preventDefault();
                clearInterval(timer);
                gameplayScreen.classList.add('hidden');
                levelScreen.classList.remove('hidden');
            });

            function startGame(levelNumber) {
                levelScreen.classList.add('hidden');
                gameplayScreen.classList.remove('hidden');
                resetGame(levelNumber);
                startTimer();
            }

            function resetGame(levelNumber) {
                switch (levelNumber) {
                    case 1:
                    case 2:
                    case 3:
                        remainingTaps = levelNumber * 100;
                        break;
                    case 4:
                        remainingTaps = 350;
                        break;
                    case 5:
                        remainingTaps = 415;
                        break;
                    default:
                        remainingTaps = levelNumber * 100;
                }
                progress = 0;
                lastTap = null;
                remainingTapsSpan.textContent = remainingTaps;
                updateProgressCircle();
            }

            function startTimer() {
                let timeRemaining = 30;
                timerSpan.textContent = `${timeRemaining}s`;
                timer = setInterval(() => {
                    timeRemaining--;
                    timerSpan.textContent = `${timeRemaining}s`;
                    if (timeRemaining <= 0) {
                        clearInterval(timer);
                        endGame(false);
                    }
                }, 1000);
            }

            function endGame(won) {
                if (won) {
                    alert(currentLevel === levels.length ? 'You are the Tap Champ!' : `You beat level ${currentLevel}!`);
                    unlockNextLevel(currentLevel);
                } else {
                    alert('You are not the Tap Champ. Try again!');
                }
                gameplayScreen.classList.add('hidden');
                levelScreen.classList.remove('hidden');
            }

            function unlockNextLevel(currentLevel) {
                if (currentLevel < levels.length) {
                    levels[currentLevel].classList.remove('locked');
                }
            }

            function handleTap(side) {
                if (lastTap === side) {
                    return;
                } else {
                    lastTap = side;
                    remainingTaps--;
                    remainingTapsSpan.textContent = remainingTaps;
                    progress = ((100 - remainingTaps) / 100) * 100;
                    updateProgressCircle();
                    if (remainingTaps <= 0) {
                        clearInterval(timer);
                        endGame(true);
                    }
                }
            }

            function updateProgressCircle() {
                progressCircle.style.background = `conic-gradient(#76c7c0 ${progress}%, #ddd ${progress}% 100%)`;
                progressText.textContent = `${Math.round(progress)}%`;
            }

            document.addEventListener('keydown', (event) => {
                if (event.key === 'x' || event.key === 'X') {
                    handleTap('left');
                } else if (event.key === 'b' || event.key === 'B') {
                    handleTap('right');
                }
            });

            tapLeftButton.addEventListener('click', () => handleTap('left'));
            tapRightButton.addEventListener('click', () => handleTap('right'));

            function unlockLevels() {
                const completedLevels = 0; // Placeholder value
                levels.forEach((level, index) => {
                    if (index <= completedLevels) {
                        level.classList.remove('locked');
                    }
                });
            }

            unlockLevels();
        });
    </script>
</body>
</html>
