Spaces:

crocro
/

anycoder-810ad0dc

Running

App Files Files Community

crocro commited on Dec 14, 2025

Commit

b808025

verified ·

1 Parent(s): b3d7cf1

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +1180 -19

index.html CHANGED Viewed

@@ -1,19 +1,1180 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mattel Handheld Football Clone</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Arial', sans-serif;
+        }
+        body {
+            background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%);
+            color: white;
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            overflow: hidden;
+            position: relative;
+        }
+        body::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-image:
+                radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.05) 0%, transparent 50%),
+                radial-gradient(circle at 90% 80%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
+            pointer-events: none;
+        }
+        .header {
+            position: absolute;
+            top: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            text-align: center;
+            z-index: 100;
+        }
+        .header h1 {
+            font-size: 2.5rem;
+            font-weight: 800;
+            text-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
+            margin-bottom: 10px;
+            background: linear-gradient(90deg, #ff0000, #ff8c00);
+            -webkit-background-clip: text;
+            background-clip: text;
+            color: transparent;
+        }
+        .header .anycoder-link {
+            font-size: 0.9rem;
+            color: #ccc;
+            text-decoration: none;
+            transition: all 0.3s ease;
+        }
+        .header .anycoder-link:hover {
+            color: #fff;
+            text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
+        }
+        .container {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            max-width: 1200px;
+            padding: 20px;
+        }
+        .game-container {
+            perspective: 1000px;
+            width: 100%;
+            max-width: 800px;
+            height: 600px;
+            margin-bottom: 30px;
+            position: relative;
+        }
+        #game-canvas {
+            width: 100%;
+            height: 100%;
+            background: transparent;
+            border-radius: 10px;
+            box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
+        }
+        .controls {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 20px;
+            margin-bottom: 20px;
+        }
+        .button-row {
+            display: flex;
+            gap: 20px;
+        }
+        .game-button {
+            width: 80px;
+            height: 80px;
+            border-radius: 50%;
+            background: linear-gradient(145deg, #333, #111);
+            border: none;
+            color: white;
+            font-size: 1.2rem;
+            font-weight: bold;
+            cursor: pointer;
+            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
+            transition: all 0.2s ease;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: relative;
+            overflow: hidden;
+        }
+        .game-button::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(45deg, rgba(255, 255, 255, 0.1), transparent);
+            transform: translate(-100%, -100%);
+            transition: transform 0.3s ease;
+        }
+        .game-button:active::before {
+            transform: translate(100%, 100%);
+        }
+        .game-button:active {
+            transform: translateY(2px);
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+        }
+        .game-button.red {
+            background: linear-gradient(145deg, #ff0000, #cc0000);
+        }
+        .game-button.blue {
+            background: linear-gradient(145deg, #0066ff, #0033cc);
+        }
+        .game-button.green {
+            background: linear-gradient(145deg, #00ff00, #00cc00);
+        }
+        .game-button.yellow {
+            background: linear-gradient(145deg, #ffff00, #cccc00);
+        }
+        .game-info {
+            background: rgba(0, 0, 0, 0.7);
+            border-radius: 10px;
+            padding: 20px;
+            margin-top: 20px;
+            max-width: 600px;
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        .game-info h2 {
+            color: #ff0000;
+            margin-bottom: 15px;
+            text-align: center;
+        }
+        .game-info p {
+            margin-bottom: 10px;
+            line-height: 1.6;
+        }
+        .game-stats {
+            display: flex;
+            justify-content: space-around;
+            margin-top: 15px;
+        }
+        .stat {
+            text-align: center;
+            padding: 10px 20px;
+            border-radius: 5px;
+            background: rgba(255, 255, 255, 0.1);
+        }
+        .stat h3 {
+            color: #00ff00;
+            font-size: 1.5rem;
+        }
+        .stat p {
+            font-size: 0.9rem;
+            color: #ccc;
+        }
+        .instructions {
+            background: rgba(0, 0, 0, 0.7);
+            border-radius: 10px;
+            padding: 20px;
+            margin-top: 20px;
+            max-width: 600px;
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        .instructions h3 {
+            color: #00ffff;
+            margin-bottom: 15px;
+        }
+        .instructions ul {
+            list-style-type: none;
+            padding-left: 0;
+        }
+        .instructions li {
+            margin-bottom: 8px;
+            padding-left: 20px;
+            position: relative;
+        }
+        .instructions li::before {
+            content: "•";
+            color: #ff0000;
+            position: absolute;
+            left: 0;
+        }
+        .loading {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            background: rgba(0, 0, 0, 0.8);
+            z-index: 1000;
+            backdrop-filter: blur(5px);
+        }
+        .loading h2 {
+            color: #ff0000;
+            margin-bottom: 20px;
+            font-size: 2rem;
+        }
+        .loading .spinner {
+            width: 50px;
+            height: 50px;
+            border: 5px solid rgba(255, 255, 255, 0.3);
+            border-top-color: #ff0000;
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+        }
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+        .sound-toggle {
+            position: absolute;
+            top: 20px;
+            right: 20px;
+            background: rgba(255, 255, 255, 0.1);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            color: white;
+            padding: 8px 15px;
+            border-radius: 20px;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            transition: all 0.3s ease;
+            z-index: 100;
+        }
+        .sound-toggle:hover {
+            background: rgba(255, 255, 255, 0.2);
+        }
+        .sound-toggle i {
+            font-size: 1rem;
+        }
+        .sound-toggle.on i::before {
+            content: "🔊";
+        }
+        .sound-toggle.off i::before {
+            content: "🔇";
+        }
+        @media (max-width: 768px) {
+            .game-container {
+                height: 400px;
+            }
+            .button-row {
+                flex-direction: column;
+                gap: 10px;
+            }
+            .game-button {
+                width: 60px;
+                height: 60px;
+                font-size: 1rem;
+            }
+            .header h1 {
+                font-size: 1.8rem;
+            }
+            .game-info, .instructions {
+                padding: 15px;
+            }
+        }
+        @media (max-width: 480px) {
+            body {
+                padding: 10px;
+            }
+            .game-container {
+                height: 300px;
+            }
+            .game-button {
+                width: 50px;
+                height: 50px;
+                font-size: 0.9rem;
+            }
+            .header h1 {
+                font-size: 1.5rem;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="header">
+        <h1>MATTEL HANDHELD FOOTBALL</h1>
+        <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link" target="_blank">Built with anycoder</a>
+    </div>
+    <div class="sound-toggle" id="sound-toggle">
+        <i></i>
+        <span>Sound</span>
+    </div>
+    <div class="container">
+        <div class="game-container">
+            <canvas id="game-canvas"></canvas>
+            <div class="loading" id="loading">
+                <h2>Loading Game...</h2>
+                <div class="spinner"></div>
+            </div>
+        </div>
+        <div class="controls">
+            <div class="button-row">
+                <button class="game-button red" id="pass-button">PASS</button>
+                <button class="game-button blue" id="run-button">RUN</button>
+                <button class="game-button green" id="kick-button">KICK</button>
+                <button class="game-button yellow" id="reset-button">RESET</button>
+            </div>
+        </div>
+        <div class="game-info">
+            <h2>Game Status</h2>
+            <div class="game-stats">
+                <div class="stat">
+                    <h3 id="score">0-0</h3>
+                    <p>Score</p>
+                </div>
+                <div class="stat">
+                    <h3 id="down">1st</h3>
+                    <p>Down</p>
+                </div>
+                <div class="stat">
+                    <h3 id="yards">10</h3>
+                    <p>Yards to Go</p>
+                </div>
+                <div class="stat">
+                    <h3 id="quarter">1</h3>
+                    <p>Quarter</p>
+                </div>
+            </div>
+        </div>
+        <div class="instructions">
+            <h3>How to Play</h3>
+            <ul>
+                <li><strong>PASS:</strong> Attempt a forward pass (red button)</li>
+                <li><strong>RUN:</strong> Run with the ball (blue button)</li>
+                <li><strong>KICK:</strong> Kick the ball (green button)</li>
+                <li><strong>RESET:</strong> Reset the game (yellow button)</li>
+                <li>Get 10 yards in 4 downs to continue</li>
+                <li>Score touchdowns to win!</li>
+            </ul>
+        </div>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.182.0/build/three.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.182.0/examples/js/controls/OrbitControls.js"></script>
+    <script>
+        // Game state variables
+        let gameState = {
+            score: [0, 0],
+            down: 1,
+            yardsToGo: 10,
+            yardsGained: 0,
+            quarter: 1,
+            possession: 0,
+            gameOver: false,
+            playInProgress: false,
+            lastPlay: null,
+            fieldPosition: 50,
+            soundEnabled: true
+        };
+        // Three.js variables
+        let scene, camera, renderer, controls;
+        let device, screen, buttons = [];
+        let field, ball;
+        let clock = new THREE.Clock();
+        let mixer, animations = [];
+        // Sound effects
+        let soundEffects = {
+            pass: null,
+            run: null,
+            kick: null,
+            touchdown: null,
+            tackle: null
+        };
+        // Initialize the game
+        function init() {
+            // Set up the scene
+            scene = new THREE.Scene();
+            scene.background = new THREE.Color(0x0a0a0a);
+            // Set up the camera
+            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+            camera.position.set(0, 10, 20);
+            // Set up the renderer
+            renderer = new THREE.WebGLRenderer({
+                canvas: document.getElementById('game-canvas'),
+                antialias: true,
+                alpha: true
+            });
+            renderer.setSize(window.innerWidth * 0.8, window.innerHeight * 0.6);
+            renderer.setPixelRatio(window.devicePixelRatio);
+            renderer.shadowMap.enabled = true;
+            // Add orbit controls
+            controls = new THREE.OrbitControls(camera, renderer.domElement);
+            controls.enableDamping = true;
+            controls.dampingFactor = 0.05;
+            controls.screenSpacePanning = false;
+            controls.minDistance = 10;
+            controls.maxDistance = 50;
+            controls.maxPolarAngle = Math.PI / 2 - 0.1;
+            // Add lights
+            const ambientLight = new THREE.AmbientLight(0x404040, 0.5);
+            scene.add(ambientLight);
+            const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
+            directionalLight.position.set(10, 20, 10);
+            directionalLight.castShadow = true;
+            directionalLight.shadow.mapSize.width = 1024;
+            directionalLight.shadow.mapSize.height = 1024;
+            scene.add(directionalLight);
+            const hemisphereLight = new THREE.HemisphereLight(0xffffbb, 0x080820, 0.3);
+            scene.add(hemisphereLight);
+            // Create the device
+            createDevice();
+            // Create the field
+            createField();
+            // Create the ball
+            createBall();
+            // Load sounds
+            loadSounds();
+            // Set up event listeners
+            setupEventListeners();
+            // Start the game loop
+            animate();
+            // Hide loading screen
+            document.getElementById('loading').style.display = 'none';
+        }
+        // Create the handheld device
+        function createDevice() {
+            // Device base
+            const baseGeometry = new THREE.BoxGeometry(12, 8, 2);
+            const baseMaterial = new THREE.MeshPhongMaterial({
+                color: 0x333333,
+                shininess: 30
+            });
+            device = new THREE.Mesh(baseGeometry, baseMaterial);
+            device.position.y = 4;
+            device.castShadow = true;
+            device.receiveShadow = true;
+            scene.add(device);
+            // Device top (screen area)
+            const topGeometry = new THREE.BoxGeometry(10, 6, 0.5);
+            const topMaterial = new THREE.MeshPhongMaterial({
+                color: 0x111111,
+                shininess: 50
+            });
+            const top = new THREE.Mesh(topGeometry, topMaterial);
+            top.position.set(0, 0.5, 1.25);
+            device.add(top);
+            // Screen
+            const screenGeometry = new THREE.PlaneGeometry(8, 4.5);
+            const screenMaterial = new THREE.MeshBasicMaterial({
+                color: 0x00ff00,
+                transparent: true,
+                opacity: 0.8
+            });
+            screen = new THREE.Mesh(screenGeometry, screenMaterial);
+            screen.position.set(0, 0.5, 1.5);
+            device.add(screen);
+            // Screen border
+            const borderGeometry = new THREE.BoxGeometry(8.2, 4.7, 0.1);
+            const borderMaterial = new THREE.MeshPhongMaterial({
+                color: 0x000000,
+                shininess: 100
+            });
+            const border = new THREE.Mesh(borderGeometry, borderMaterial);
+            border.position.set(0, 0.5, 1.45);
+            device.add(border);
+            // Create buttons
+            createButtons();
+            // Add some details
+            addDeviceDetails();
+        }
+        // Create the buttons
+        function createButtons() {
+            const buttonPositions = [
+                { x: -3, y: -2, color: 0xff0000, label: 'PASS' },
+                { x: -1, y: -2, color: 0x0000ff, label: 'RUN' },
+                { x: 1, y: -2, color: 0x00ff00, label: 'KICK' },
+                { x: 3, y: -2, color: 0xffff00, label: 'RESET' }
+            ];
+            buttonPositions.forEach(pos => {
+                const buttonGroup = new THREE.Group();
+                // Button base
+                const buttonGeometry = new THREE.CylinderGeometry(0.8, 0.8, 0.3, 32);
+                const buttonMaterial = new THREE.MeshPhongMaterial({
+                    color: pos.color,
+                    shininess: 50
+                });
+                const button = new THREE.Mesh(buttonGeometry, buttonMaterial);
+                button.position.set(pos.x, pos.y, 1.5);
+                button.rotation.x = Math.PI / 2;
+                button.castShadow = true;
+                buttonGroup.add(button);
+                // Button label
+                const labelCanvas = document.createElement('canvas');
+                labelCanvas.width = 128;
+                labelCanvas.height = 128;
+                const labelContext = labelCanvas.getContext('2d');
+                labelContext.fillStyle = 'white';
+                labelContext.font = 'Bold 20px Arial';
+                labelContext.textAlign = 'center';
+                labelContext.textBaseline = 'middle';
+                labelContext.fillText(pos.label, 64, 64);
+                const labelTexture = new THREE.CanvasTexture(labelCanvas);
+                const labelMaterial = new THREE.SpriteMaterial({ map: labelTexture });
+                const labelSprite = new THREE.Sprite(labelMaterial);
+                labelSprite.position.set(pos.x, pos.y, 1.5);
+                labelSprite.scale.set(1, 1, 1);
+                buttonGroup.add(labelSprite);
+                buttons.push({
+                    group: buttonGroup,
+                    mesh: button,
+                    label: pos.label,
+                    originalColor: pos.color,
+                    pressed: false
+                });
+                device.add(buttonGroup);
+            });
+        }
+        // Add device details
+        function addDeviceDetails() {
+            // Speaker grills
+            const grillGeometry = new THREE.BoxGeometry(1.5, 0.2, 0.1);
+            const grillMaterial = new THREE.MeshPhongMaterial({ color: 0x555555 });
+            for (let i = 0; i < 4; i++) {
+                const grill = new THREE.Mesh(grillGeometry, grillMaterial);
+                grill.position.set(-4.5 + i * 0.4, 3, 1.5);
+                device.add(grill);
+            }
+            // Brand logo
+            const logoGeometry = new THREE.BoxGeometry(2, 0.5, 0.1);
+            const logoMaterial = new THREE.MeshPhongMaterial({ color: 0xff0000 });
+            const logo = new THREE.Mesh(logoGeometry, logoMaterial);
+            logo.position.set(0, 3.5, 1.5);
+            device.add(logo);
+            // Create a simple "MATTEL" text
+            const logoCanvas = document.createElement('canvas');
+            logoCanvas.width = 256;
+            logoCanvas.height = 64;
+            const logoContext = logoCanvas.getContext('2d');
+            logoContext.fillStyle = 'white';
+            logoContext.font = 'Bold 30px Arial';
+            logoContext.textAlign = 'center';
+            logoContext.textBaseline = 'middle';
+            logoContext.fillText('MATTEL', 128, 32);
+            const logoTexture = new THREE.CanvasTexture(logoCanvas);
+            const logoSpriteMaterial = new THREE.SpriteMaterial({ map: logoTexture });
+            const logoSprite = new THREE.Sprite(logoSpriteMaterial);
+            logoSprite.position.set(0, 3.5, 1.51);
+            logoSprite.scale.set(2, 0.5, 1);
+            device.add(logoSprite);
+        }
+        // Create the football field
+        function createField() {
+            // Field base
+            const fieldGeometry = new THREE.PlaneGeometry(30, 15);
+            const fieldMaterial = new THREE.MeshStandardMaterial({
+                color: 0x008000,
+                roughness: 0.8,
+                metalness: 0.2
+            });
+            field = new THREE.Mesh(fieldGeometry, fieldMaterial);
+            field.rotation.x = -Math.PI / 2;
+            field.position.y = 0;
+            field.receiveShadow = true;
+            scene.add(field);
+            // Field lines
+            const lineMaterial = new THREE.LineBasicMaterial({ color: 0xffffff });
+            // Sideline
+            const sidelineGeometry = new THREE.BufferGeometry();
+            const sidelineVertices = [];
+            sidelineVertices.push(-15, 0, -7.5);
+            sidelineVertices.push(15, 0, -7.5);
+            sidelineVertices.push(15, 0, 7.5);
+            sidelineVertices.push(-15, 0, 7.5);
+            sidelineVertices.push(-15, 0, -7.5);
+            sidelineGeometry.setAttribute('position', new THREE.Float32BufferAttribute(sidelineVertices, 3));
+            const sideline = new THREE.Line(sidelineGeometry, lineMaterial);
+            field.add(sideline);
+            // Yard lines
+            for (let i = -14; i <= 14; i += 2) {
+                const yardLineGeometry = new THREE.BufferGeometry();
+                const yardLineVertices = [];
+                yardLineVertices.push(i, 0, -7);
+                yardLineVertices.push(i, 0, 7);
+                yardLineGeometry.setAttribute('position', new THREE.Float32BufferAttribute(yardLineVertices, 3));
+                const yardLine = new THREE.Line(yardLineGeometry, lineMaterial);
+                field.add(yardLine);
+            }
+            // End zones
+            const endZoneGeometry = new THREE.PlaneGeometry(3, 15);
+            const endZoneMaterial = new THREE.MeshStandardMaterial({
+                color: 0xff0000,
+                roughness: 0.8,
+                metalness: 0.2
+            });
+            const endZone1 = new THREE.Mesh(endZoneGeometry, endZoneMaterial);
+            endZone1.rotation.x = -Math.PI / 2;
+            endZone1.position.set(-13.5, 0.01, 0);
+            field.add(endZone1);
+            const endZone2 = new THREE.Mesh(endZoneGeometry, endZoneMaterial);
+            endZone2.rotation.x = -Math.PI / 2;
+            endZone2.position.set(13.5, 0.01, 0);
+            field.add(endZone2);
+            // Goal posts
+            const postGeometry = new THREE.CylinderGeometry(0.1, 0.1, 5, 16);
+            const postMaterial = new THREE.MeshStandardMaterial({
+                color: 0xffff00,
+                metalness: 0.8,
+                roughness: 0.2
+            });
+            const post1 = new THREE.Mesh(postGeometry, postMaterial);
+            post1.position.set(-15, 2.5, 0);
+            field.add(post1);
+            const post2 = new THREE.Mesh(postGeometry, postMaterial);
+            post2.position.set(15, 2.5, 0);
+            field.add(post2);
+            // Crossbars
+            const crossbarGeometry = new THREE.BoxGeometry(3, 0.1, 0.1);
+            const crossbar1 = new THREE.Mesh(crossbarGeometry, postMaterial);
+            crossbar1.position.set(-15, 5, 0);
+            field.add(crossbar1);
+            const crossbar2 = new THREE.Mesh(crossbarGeometry, postMaterial);
+            crossbar2.position.set(15, 5, 0);
+            field.add(crossbar2);
+        }
+        // Create the football
+        function createBall() {
+            const ballGroup = new THREE.Group();
+            // Main ball shape
+            const ballGeometry = new THREE.SphereGeometry(0.5, 32, 32);
+            const ballMaterial = new THREE.MeshStandardMaterial({
+                color: 0xffffff,
+                roughness: 0.4,
+                metalness: 0.1,
+                map: createFootballTexture()
+            });
+            ball = new THREE.Mesh(ballGeometry, ballMaterial);
+            ball.position.set(0, 0.5, 0);
+            ball.castShadow = true;
+            ballGroup.add(ball);
+            // Laces
+            const laceGeometry = new THREE.BoxGeometry(0.8, 0.1, 0.05);
+            const laceMaterial = new THREE.MeshStandardMaterial({ color: 0x000000 });
+            const lace = new THREE.Mesh(laceGeometry, laceMaterial);
+            lace.position.set(0, 0.5, 0);
+            lace.rotation.z = Math.PI / 4;
+            ballGroup.add(lace);
+            scene.add(ballGroup);
+        }
+        // Create football texture
+        function createFootballTexture() {
+            const canvas = document.createElement('canvas');
+            canvas.width = 512;
+            canvas.height = 256;
+            const context = canvas.getContext('2d');
+            // Draw white base
+            context.fillStyle = '#ffffff';
+            context.fillRect(0, 0, canvas.width, canvas.height);
+            // Draw brown panels
+            context.fillStyle = '#8B4513';
+            context.beginPath();
+            context.moveTo(0, 0);
+            context.lineTo(256, 0);
+            context.lineTo(128, 256);
+            context.closePath();
+            context.fill();
+            context.beginPath();
+            context.moveTo(256, 0);
+            context.lineTo(512, 0);
+            context.lineTo(384, 256);
+            context.lineTo(128, 256);
+            context.closePath();
+            context.fill();
+            // Draw stitching
+            context.strokeStyle = '#000000';
+            context.lineWidth = 2;
+            // Vertical stitching
+            for (let i = 0; i < 5; i++) {
+                const x = i * 100 + 20;
+                context.beginPath();
+                context.moveTo(x, 0);
+                context.lineTo(x + 50, 256);
+                context.stroke();
+            }
+            return new THREE.CanvasTexture(canvas);
+        }
+        // Load sound effects
+        function loadSounds() {
+            // In a real implementation, we would load actual sound files
+            // For this demo, we'll simulate sound effects with console logs
+            soundEffects.pass = () => playSoundEffect('pass');
+            soundEffects.run = () => playSoundEffect('run');
+            soundEffects.kick = () => playSoundEffect('kick');
+            soundEffects.touchdown = () => playSoundEffect('touchdown');
+            soundEffects.tackle = () => playSoundEffect('tackle');
+        }
+        // Play sound effect
+        function playSoundEffect(type) {
+            if (!gameState.soundEnabled) return;
+            // Simulate sound effects
+            const sounds = {
+                pass: 'Whoosh!',
+                run: 'Thud! Thud! Thud!',
+                kick: 'Boom!',
+                touchdown: 'Touchdown! Crowd cheering!',
+                tackle: 'Crunch!'
+            };
+            console.log(`[SOUND] ${sounds[type]}`);
+        }
+        // Set up event listeners
+        function setupEventListeners() {
+            // Button clicks
+            document.getElementById('pass-button').addEventListener('click', () => handleButtonClick('PASS'));
+            document.getElementById('run-button').addEventListener('click', () => handleButtonClick('RUN'));
+            document.getElementById('kick-button').addEventListener('click', () => handleButtonClick('KICK'));
+            document.getElementById('reset-button').addEventListener('click', resetGame);
+            // Sound toggle
+            document.getElementById('sound-toggle').addEventListener('click', toggleSound);
+            // Window resize
+            window.addEventListener('resize', onWindowResize);
+        }
+        // Handle button clicks
+        function handleButtonClick(buttonLabel) {
+            if (gameState.gameOver || gameState.playInProgress) return;
+            gameState.playInProgress = true;
+            gameState.lastPlay = buttonLabel;
+            // Highlight the pressed button
+            const button = buttons.find(b => b.label === buttonLabel);
+            if (button) {
+                button.mesh.material.color.setHex(0xffffff);
+            }
+            // Simulate the play
+            setTimeout(() => {
+                executePlay(buttonLabel);
+                gameState.playInProgress = false;
+                // Restore button color
+                if (button) {
+                    button.mesh.material.color.setHex(button.originalColor);
+                }
+            }, 1000);
+        }
+        // Execute the play
+        function executePlay(playType) {
+            let yardsGained = 0;
+            let playDescription = '';
+            // Determine outcome based on play type
+            switch (playType) {
+                case 'PASS':
+                    soundEffects.pass();
+                    const passOutcomes = [
+                        { yards: 20, desc: 'Long pass completion!' },
+                        { yards: 10, desc: 'Short pass completion' },
+                        { yards: 5, desc: 'Screen pass' },
+                        { yards: 0, desc: 'Incomplete pass' },
+                        { yards: -2, desc: 'Sacked!' }
+                    ];
+                    const passResult = passOutcomes[Math.floor(Math.random() * passOutcomes.length)];
+                    yardsGained = passResult.yards;
+                    playDescription = passResult.desc;
+                    break;
+                case 'RUN':
+                    soundEffects.run();
+                    const runOutcomes = [
+                        { yards: 8, desc: 'Big run up the middle!' },
+                        { yards: 4, desc: 'Solid run' },
+                        { yards: 2, desc: 'Short gain' },
+                        { yards: 0, desc: 'No gain' },
+                        { yards: -1, desc: 'Tackled for loss' }
+                    ];
+                    const runResult = runOutcomes[Math.floor(Math.random() * runOutcomes.length)];
+                    yardsGained = runResult.yards;
+                    playDescription = runResult.desc;
+                    break;
+                case 'KICK':
+                    soundEffects.kick();
+                    if (gameState.down === 4) {
+                        // Field goal attempt
+                        const distance = gameState.fieldPosition > 50 ? 100 - gameState.fieldPosition : gameState.fieldPosition;
+                        if (distance <= 30) {
+                            yardsGained = 3; // Field goal
+                            playDescription = 'Field goal is GOOD!';
+                            gameState.score[gameState.possession] += 3;
+                        } else {
+                            playDescription = 'Field goal attempt missed!';
+                        }
+                    } else {
+                        // Punt
+                        yardsGained = Math.floor(Math.random() * 30) + 20;
+                        playDescription = `Punt travels ${yardsGained} yards`;
+                        gameState.possession = gameState.possession === 0 ? 1 : 0;
+                    }
+                    break;
+            }
+            // Update game state
+            if (playType !== 'KICK' || gameState.down !== 4) {
+                gameState.yardsGained += yardsGained;
+                gameState.fieldPosition += gameState.possession === 0 ? yardsGained : -yardsGained;
+                // Check for touchdown
+                if (gameState.fieldPosition >= 100) {
+                    playDescription = 'TOUCHDOWN!';
+                    soundEffects.touchdown();
+                    gameState.score[gameState.possession] += 6;
+                    gameState.fieldPosition = 80; // Kickoff from 20 yard line
+                    gameState.possession = gameState.possession === 0 ? 1 : 0;
+                    gameState.down = 1;
+                    gameState.yardsToGo = 10;
+                    gameState.yardsGained = 0;
+                } else if (gameState.fieldPosition <= 0) {
+                    playDescription = 'TOUCHDOWN!';
+                    soundEffects.touchdown();
+                    gameState.score[gameState.possession] += 6;
+                    gameState.fieldPosition = 20; // Kickoff from 20 yard line
+                    gameState.possession = gameState.possession === 0 ? 1 : 0;
+                    gameState.down = 1;
+                    gameState.yardsToGo = 10;
+                    gameState.yardsGained = 0;
+                } else {
+                    // Update down and distance
+                    if (gameState.yardsGained >= gameState.yardsToGo) {
+                        // First down
+                        gameState.down = 1;
+                        gameState.yardsToGo = 10;
+                        gameState.yardsGained = 0;
+                        playDescription += ' First down!';
+                    } else {
+                        gameState.down++;
+                        gameState.yardsToGo -= gameState.yardsGained;
+                        if (gameState.down > 4) {
+                            // Turnover on downs
+                            playDescription = 'Turnover on downs!';
+                            gameState.possession = gameState.possession === 0 ? 1 : 0;
+                            gameState.down = 1;
+                            gameState.yardsToGo = 10;
+                            gameState.yardsGained = 0;
+                        }
+                    }
+                }
+            } else {
+                // After kick, switch possession
+                gameState.down = 1;
+                gameState.yardsToGo = 10;
+                gameState.yardsGained = 0;
+            }
+            // Update ball position
+            const fieldWidth = 30;
+            const fieldLength = 15;
+            const ballX = THREE.MathUtils.mapLinear(gameState.fieldPosition, 0, 100, -fieldWidth/2, fieldWidth/2);
+            const ballZ = (Math.random() - 0.5) * fieldLength * 0.8; // Random position across width
+            // Animate ball movement
+            animateBallMovement(ballX, ballZ);
+            // Update UI
+            updateGameUI();
+            // Show play result on screen
+            showPlayResult(playDescription);
+        }
+        // Animate ball movement
+        function animateBallMovement(targetX, targetZ) {
+            const startPosition = ball.position.clone();
+            const targetPosition = new THREE.Vector3(targetX, 0.5, targetZ);
+            const duration = 1.0; // seconds
+            let elapsed = 0;
+            // Create a simple animation
+            const animate = () => {
+                elapsed += clock.getDelta();
+                const progress = Math.min(elapsed / duration, 1);
+                // Ease in out animation
+                const easedProgress = progress < 0.5
+                    ? 2 * progress * progress
+                    : -1 + (4 - 2 * progress) * progress;
+                ball.position.lerpVectors(startPosition, targetPosition, easedProgress);
+                if (progress < 1) {
+                    requestAnimationFrame(animate);
+                }
+            };
+            animate();
+        }
+        // Show play result on the LED screen
+        function showPlayResult(description) {
+            // Create a texture with the play result
+            const canvas = document.createElement('canvas');
+            canvas.width = 256;
+            canvas.height = 128;
+            const context = canvas.getContext('2d');
+            // Draw green background
+            context.fillStyle = '#00ff00';
+            context.fillRect(0, 0, canvas.width, canvas.height);
+            // Draw black border
+            context.strokeStyle = '#000000';
+            context.lineWidth = 4;
+            context.strokeRect(0, 0, canvas.width, canvas.height);
+            // Draw play description
+            context.fillStyle = '#000000';
+            context.font = 'Bold 16px Arial';
+            context.textAlign = 'center';
+            // Split text into multiple lines if needed
+            const words = description.split(' ');
+            let line = '';
+            let y = 40;
+            words.forEach(word => {
+                const testLine = line + word + ' ';
+                const metrics = context.measureText(testLine);
+                if (metrics.width > canvas.width - 40 && line.length > 0) {
+                    context.fillText(line.trim(), canvas.width / 2, y);
+                    line = word + ' ';
+                    y += 25;
+                } else {
+                    line = testLine;
+                }
+            });
+            context.fillText(line.trim(), canvas.width / 2, y);
+            // Add game stats
+            y += 30;
+            context.font = 'Bold 14px Arial';
+            context.fillText(`Score: ${gameState.score[0]}-${gameState.score[1]}`, canvas.width / 2, y);
+            y += 20;
+            context.fillText(`Down: ${gameState.down}`, canvas.width / 2, y);
+            y += 20;
+            context.fillText(`Yards: ${gameState.yardsToGo}`, canvas.width / 2, y);
+            // Update screen texture
+            const texture = new THREE.CanvasTexture(canvas);
+            screen.material.map = texture;
+            screen.material.needsUpdate = true;
+            // Revert to original screen after delay
+            setTimeout(() => {
+                screen.material.map = null;
+                screen.material.color.setHex(0x00ff00);
+                screen.material.needsUpdate = true;
+            }, 3000);
+        }
+        // Update game UI
+        function updateGameUI() {
+            document.getElementById('score').textContent = `${gameState.score[0]}-${gameState.score[1]}`;
+            const downText = ['1st', '2nd', '3rd', '4th'][gameState.down - 1] || '4th';
+            document.getElementById('down').textContent = downText;
+            document.getElementById('yards').textContent = gameState.yardsToGo;
+            document.getElementById('quarter').textContent = gameState.quarter;
+        }
+        // Reset the game
+        function resetGame() {
+            gameState = {
+                score: [0, 0],
+                down: 1,
+                yardsToGo: 10,
+                yardsGained: 0,
+                quarter: 1,
+                possession: 0,
+                gameOver: false,
+                playInProgress: false,
+                lastPlay: null,
+                fieldPosition: 50,
+                soundEnabled: gameState.soundEnabled
+            };
+            // Reset ball position
+            ball.position.set(0, 0.5, 0);
+            // Update UI
+            updateGameUI();
+            // Clear screen
+            screen.material.map = null;
+            screen.material.color.setHex(0x00ff00);
+            screen.material.needsUpdate = true;
+        }
+        // Toggle sound
+        function toggleSound() {
+            gameState.soundEnabled = !gameState.soundEnabled;
+            const toggle = document.getElementById('sound-toggle');
+            toggle.classList.toggle('on', gameState.soundEnabled);
+            toggle.classList.toggle('off', !gameState.soundEnabled);
+        }
+        // Handle window resize
+        function onWindowResize() {
+            camera.aspect = window.innerWidth / window.innerHeight;
+            camera.updateProjectionMatrix();
+            renderer.setSize(window.innerWidth * 0.8, window.innerHeight * 0.6);
+        }
+        // Animation loop
+        function animate() {
+            requestAnimationFrame(animate);
+            // Update controls
+            controls.update();
+            // Rotate the device slightly for better viewing
+            if (device) {
+                device.rotation.y += 0.005;
+            }
+            // Render the scene
+            renderer.render(scene, camera);
+        }
+        // Start the game
+        init();
+    </script>
+</body>
+</html>