Spaces:

vs4vijay
/

rock-paper-scissors

Running

File size: 19,252 Bytes

ae67fb7

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rock Paper Scissors for Kids</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/handpose@latest"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&display=swap');
        
        body {
            font-family: 'Comic Neue', cursive;
            background-color: #f0f9ff;
        }
        
        .hand-animation {
            animation: bounce 0.5s infinite alternate;
        }
        
        @keyframes bounce {
            from { transform: translateY(0); }
            to { transform: translateY(-10px); }
        }
        
        .result-bubble {
            animation: pop 0.3s ease-out;
        }
        
        @keyframes pop {
            0% { transform: scale(0.5); opacity: 0; }
            80% { transform: scale(1.1); }
            100% { transform: scale(1); opacity: 1; }
        }
        
        .emoji {
            font-size: 2rem;
        }
        
        .animate-pulse {
            animation: pulse 0.5s ease-in-out;
        }
        
        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.2); }
        }
    </style>
</head>
<body class="min-h-screen flex flex-col items-center justify-center p-4">
    <div class="max-w-4xl w-full bg-white rounded-3xl shadow-xl overflow-hidden">
        <!-- Header -->
        <div class="bg-gradient-to-r from-blue-500 to-purple-600 p-6 text-center">
            <h1 class="text-4xl font-bold text-white mb-2">👋 Rock Paper Scissors 👋</h1>
            <p class="text-white text-lg">Show your hand to the camera to play!</p>
        </div>
        
        <!-- Game Area -->
        <div class="p-6 md:p-8 grid grid-cols-1 md:grid-cols-2 gap-8">
            <!-- Camera Section -->
            <div class="bg-blue-50 rounded-2xl p-4 flex flex-col items-center">
                <h2 class="text-2xl font-bold text-blue-800 mb-4">Your Move</h2>
                <div class="relative w-full aspect-square max-w-md bg-gray-200 rounded-xl overflow-hidden mb-4">
                    <video id="video" class="w-full h-full object-cover" playsinline autoplay muted></video>
                    <div id="overlay" class="absolute inset-0"></div>
                </div>
                <div class="flex gap-4 mb-4">
                    <button id="startCamera" class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded-full transition">
                        Start Camera
                    </button>
                    <button id="stopCamera" class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded-full transition">
                        Stop Camera
                    </button>
                </div>
                <div class="text-center">
                    <p class="text-gray-700 mb-2">Show one of these to the camera:</p>
                    <div class="flex justify-center gap-6">
                        <div class="text-center">
                            <div class="emoji">✊</div>
                            <p class="text-sm">Rock</p>
                        </div>
                        <div class="text-center">
                            <div class="emoji">✋</div>
                            <p class="text-sm">Paper</p>
                        </div>
                        <div class="text-center">
                            <div class="emoji">✌️</div>
                            <p class="text-sm">Scissors</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Game Section -->
            <div class="bg-purple-50 rounded-2xl p-4 flex flex-col items-center justify-between">
                <h2 class="text-2xl font-bold text-purple-800 mb-4">Game</h2>
                
                <!-- Score Board -->
                <div class="w-full bg-white rounded-xl p-4 mb-6 shadow-md">
                    <div class="flex justify-between items-center">
                        <div class="text-center">
                            <p class="text-sm text-gray-600">You</p>
                            <p id="playerScore" class="text-3xl font-bold text-blue-600">0</p>
                        </div>
                        <div class="text-2xl font-bold text-gray-500">VS</div>
                        <div class="text-center">
                            <p class="text-sm text-gray-600">Computer</p>
                            <p id="computerScore" class="text-3xl font-bold text-purple-600">0</p>
                        </div>
                    </div>
                </div>
                
                <!-- Moves Display -->
                <div class="w-full flex justify-center gap-8 mb-8">
                    <div class="text-center">
                        <p class="text-sm text-gray-600 mb-2">You</p>
                        <div id="playerMove" class="text-6xl bg-white rounded-full w-20 h-20 flex items-center justify-center shadow-md">?</div>
                    </div>
                    <div class="text-center">
                        <p class="text-sm text-gray-600 mb-2">Computer</p>
                        <div id="computerMove" class="text-6xl bg-white rounded-full w-20 h-20 flex items-center justify-center shadow-md">?</div>
                    </div>
                </div>
                
                <!-- Result Display -->
                <div id="resultDisplay" class="mb-6 text-center hidden">
                    <div class="result-bubble inline-block bg-yellow-100 text-yellow-800 px-6 py-3 rounded-full text-xl font-bold">
                        Let's Play!
                    </div>
                </div>
                
                <!-- Controls -->
                <div class="flex flex-col items-center w-full">
                    <button id="playButton" class="bg-gradient-to-r from-pink-500 to-orange-500 hover:from-pink-600 hover:to-orange-600 text-white font-bold py-3 px-8 rounded-full text-xl shadow-lg transition transform hover:scale-105 mb-4">
                        Play!
                    </button>
                    <button id="resetButton" class="text-gray-600 hover:text-gray-800 font-medium">
                        Reset Game
                    </button>
                </div>
            </div>
        </div>
        
        <!-- Instructions -->
        <div class="bg-gray-100 p-6">
            <h3 class="text-xl font-bold text-gray-800 mb-3">How to Play:</h3>
            <ol class="list-decimal pl-5 space-y-2 text-gray-700">
                <li>Click "Start Camera" and allow access to your camera</li>
                <li>Show your hand to the camera (rock ✊, paper ✋, or scissors ✌️)</li>
                <li>Click "Play!" when you're ready</li>
                <li>The computer will choose its move and show who won!</li>
            </ol>
        </div>
    </div>

    <script>
        // Game variables
        let playerScore = 0;
        let computerScore = 0;
        let playerMove = '';
        let computerMove = '';
        let gameActive = false;
        let videoStream = null;
        let handposeModel = null;
        
        // DOM elements
        const playerScoreElement = document.getElementById('playerScore');
        const computerScoreElement = document.getElementById('computerScore');
        const playerMoveElement = document.getElementById('playerMove');
        const computerMoveElement = document.getElementById('computerMove');
        const resultDisplay = document.getElementById('resultDisplay');
        const playButton = document.getElementById('playButton');
        const resetButton = document.getElementById('resetButton');
        const startCameraButton = document.getElementById('startCamera');
        const stopCameraButton = document.getElementById('stopCamera');
        const videoElement = document.getElementById('video');
        const overlayElement = document.getElementById('overlay');
        
        // Initialize the game
        function initGame() {
            updateScores();
            resetMoves();
            
            // Event listeners
            playButton.addEventListener('click', playRound);
            resetButton.addEventListener('click', resetGame);
            startCameraButton.addEventListener('click', startCamera);
            stopCameraButton.addEventListener('click', stopCamera);
            
            // Load handpose model
            loadHandposeModel();
        }
        
        // Load TensorFlow handpose model
        async function loadHandposeModel() {
            try {
                handposeModel = await handpose.load();
                console.log('Handpose model loaded');
            } catch (error) {
                console.error('Error loading handpose model:', error);
            }
        }
        
        // Start camera
        async function startCamera() {
            try {
                videoStream = await navigator.mediaDevices.getUserMedia({ 
                    video: { 
                        facingMode: 'user',
                        width: { ideal: 640 },
                        height: { ideal: 480 }
                    }, 
                    audio: false 
                });
                videoElement.srcObject = videoStream;
                gameActive = true;
                detectHandGesture();
            } catch (error) {
                console.error('Error accessing camera:', error);
                alert('Could not access the camera. Please make sure you have granted permission.');
            }
        }
        
        // Stop camera
        function stopCamera() {
            if (videoStream) {
                videoStream.getTracks().forEach(track => track.stop());
                videoElement.srcObject = null;
                gameActive = false;
            }
        }
        
        // Detect hand gesture from camera
        async function detectHandGesture() {
            if (!gameActive || !handposeModel) return;
            
            try {
                // Predict hand landmarks
                const predictions = await handposeModel.estimateHands(videoElement);
                
                // Clear overlay
                overlayElement.innerHTML = '';
                
                if (predictions.length > 0) {
                    const hand = predictions[0];
                    const fingersUp = countFingersUp(hand.landmarks);
                    
                    // Determine move based on fingers up
                    if (fingersUp === 0) {
                        playerMove = 'rock';
                        playerMoveElement.textContent = '✊';
                    } else if (fingersUp >= 4) {
                        playerMove = 'paper';
                        playerMoveElement.textContent = '✋';
                    } else if (fingersUp === 2) {
                        playerMove = 'scissors';
                        playerMoveElement.textContent = '✌️';
                    } else {
                        playerMove = '';
                        playerMoveElement.textContent = '?';
                    }
                    
                    // Draw landmarks (for visualization)
                    drawLandmarks(hand.landmarks);
                } else {
                    playerMove = '';
                    playerMoveElement.textContent = '?';
                }
            } catch (error) {
                console.error('Hand detection error:', error);
            }
            
            // Continue detecting
            requestAnimationFrame(detectHandGesture);
        }
        
        // Count how many fingers are up
        function countFingersUp(landmarks) {
            // Simplified finger detection (thumb, index, middle, ring, pinky)
            const fingerTips = [4, 8, 12, 16, 20]; // Landmark indices for finger tips
            const fingerPips = [2, 6, 10, 14, 18]; // Landmark indices for finger PIP joints
            
            let count = 0;
            
            for (let i = 1; i < 5; i++) { // Skip thumb (i=0)
                const tip = landmarks[fingerTips[i]];
                const pip = landmarks[fingerPips[i]];
                
                // Check if finger is extended (tip is above PIP joint)
                if (tip[1] < pip[1]) { // Compare y-coordinates
                    count++;
                }
            }
            
            return count;
        }
        
        // Draw hand landmarks on overlay
        function drawLandmarks(landmarks) {
            const canvas = document.createElement('canvas');
            canvas.width = videoElement.videoWidth;
            canvas.height = videoElement.videoHeight;
            const ctx = canvas.getContext('2d');
            
            // Draw landmarks
            ctx.fillStyle = 'red';
            landmarks.forEach(landmark => {
                ctx.beginPath();
                ctx.arc(landmark[0], landmark[1], 5, 0, 2 * Math.PI);
                ctx.fill();
            });
            
            // Draw connections (simplified)
            ctx.strokeStyle = 'blue';
            ctx.lineWidth = 2;
            
            // Palm connections
            drawConnection(ctx, landmarks, [0, 1, 2, 5, 9, 13, 17, 0]);
            
            // Thumb
            drawConnection(ctx, landmarks, [1, 2, 3, 4]);
            
            // Index finger
            drawConnection(ctx, landmarks, [5, 6, 7, 8]);
            
            // Middle finger
            drawConnection(ctx, landmarks, [9, 10, 11, 12]);
            
            // Ring finger
            drawConnection(ctx, landmarks, [13, 14, 15, 16]);
            
            // Pinky finger
            drawConnection(ctx, landmarks, [17, 18, 19, 20]);
            
            overlayElement.innerHTML = '';
            overlayElement.appendChild(canvas);
        }
        
        // Helper function to draw connections between landmarks
        function drawConnection(ctx, landmarks, indices) {
            ctx.beginPath();
            for (let i = 0; i < indices.length; i++) {
                const landmark = landmarks[indices[i]];
                if (i === 0) {
                    ctx.moveTo(landmark[0], landmark[1]);
                } else {
                    ctx.lineTo(landmark[0], landmark[1]);
                }
            }
            ctx.stroke();
        }
        
        // Play a round of the game
        function playRound() {
            if (!playerMove) {
                showResult('Show your hand to the camera! ✊✋✌️');
                playerMoveElement.classList.add('animate-pulse');
                setTimeout(() => {
                    playerMoveElement.classList.remove('animate-pulse');
                }, 1000);
                return;
            }
            
            // Computer chooses random move
            const moves = ['rock', 'paper', 'scissors'];
            computerMove = moves[Math.floor(Math.random() * moves.length)];
            
            // Update computer move display
            computerMoveElement.textContent = 
                computerMove === 'rock' ? '✊' : 
                computerMove === 'paper' ? '✋' : '✌️';
            
            // Determine winner
            const result = determineWinner(playerMove, computerMove);
            
            // Update scores and display result
            if (result === 'win') {
                playerScore++;
                showResult('You win! 🎉');
            } else if (result === 'lose') {
                computerScore++;
                showResult('Computer wins! 😢');
            } else {
                showResult("It's a tie! 🤝");
            }
            
            updateScores();
        }
        
        // Determine the winner of a round
        function determineWinner(player, computer) {
            if (player === computer) return 'tie';
            
            if (
                (player === 'rock' && computer === 'scissors') ||
                (player === 'paper' && computer === 'rock') ||
                (player === 'scissors' && computer === 'paper')
            ) {
                return 'win';
            }
            
            return 'lose';
        }
        
        // Show game result
        function showResult(message) {
            resultDisplay.classList.remove('hidden');
            const resultElement = resultDisplay.querySelector('div');
            
            // Update styling based on result
            if (message.includes('win')) {
                resultElement.className = 'result-bubble inline-block bg-green-100 text-green-800 px-6 py-3 rounded-full text-xl font-bold';
            } else if (message.includes('lose')) {
                resultElement.className = 'result-bubble inline-block bg-red-100 text-red-800 px-6 py-3 rounded-full text-xl font-bold';
            } else if (message.includes('tie')) {
                resultElement.className = 'result-bubble inline-block bg-yellow-100 text-yellow-800 px-6 py-3 rounded-full text-xl font-bold';
            } else {
                resultElement.className = 'result-bubble inline-block bg-blue-100 text-blue-800 px-6 py-3 rounded-full text-xl font-bold';
            }
            
            resultElement.textContent = message;
        }
        
        // Update score displays
        function updateScores() {
            playerScoreElement.textContent = playerScore;
            computerScoreElement.textContent = computerScore;
        }
        
        // Reset moves display
        function resetMoves() {
            playerMove = '';
            computerMove = '';
            playerMoveElement.textContent = '?';
            computerMoveElement.textContent = '?';
            showResult("Let's Play!");
        }
        
        // Reset the entire game
        function resetGame() {
            playerScore = 0;
            computerScore = 0;
            updateScores();
            resetMoves();
        }
        
        // Initialize the game when the page loads
        window.addEventListener('DOMContentLoaded', initGame);
    </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=vs4vijay/rock-paper-scissors" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>