Spaces:

pysolver33
/

awesome-games

Running

App Files Files Community

pysolver33 commited on Apr 12

Commit

63b58c1

verified ·

1 Parent(s): b1e0f41

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +954 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Awesome Games
-emoji: 🚀
-colorFrom: red
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: awesome-games
+emoji: 🐳
+colorFrom: purple
+colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,954 @@
-<!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>AI Game Creator</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/tone@14.7.77/build/Tone.min.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        .gradient-bg {
+            background: linear-gradient(135deg, #6e8efb, #a777e3);
+        }
+        .game-canvas {
+            border-radius: 12px;
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+            background-color: #1a1a2e;
+        }
+        .prompt-input {
+            transition: all 0.3s ease;
+        }
+        .prompt-input:focus {
+            box-shadow: 0 0 0 3px rgba(167, 119, 227, 0.3);
+        }
+        .scaffold-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
+        }
+        .loading-dots::after {
+            content: '.';
+            animation: dots 1.5s steps(5, end) infinite;
+        }
+        @keyframes dots {
+            0%, 20% { content: '.'; }
+            40% { content: '..'; }
+            60% { content: '...'; }
+            80%, 100% { content: ''; }
+        }
+        .typewriter {
+            overflow: hidden;
+            border-right: 3px solid #a777e3;
+            white-space: nowrap;
+            margin: 0 auto;
+            letter-spacing: 2px;
+            animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
+        }
+        @keyframes typing {
+            from { width: 0 }
+            to { width: 100% }
+        }
+        @keyframes blink-caret {
+            from, to { border-color: transparent }
+            50% { border-color: #a777e3; }
+        }
+    </style>
+</head>
+<body class="gradient-bg min-h-screen text-white">
+    <div class="container mx-auto px-4 py-12">
+        <!-- Header -->
+        <header class="text-center mb-12">
+            <h1 class="text-5xl font-bold mb-4 flex items-center justify-center">
+                <i class="fas fa-gamepad mr-4"></i>
+                <span class="typewriter">AI Game Creator</span>
+            </h1>
+            <p class="text-xl opacity-90 max-w-2xl mx-auto">
+                Describe your dream game and watch it come to life with AI magic!
+            </p>
+        </header>
+        <!-- Main Content -->
+        <div class="flex flex-col lg:flex-row gap-8">
+            <!-- Left Panel - Input & Scaffolds -->
+            <div class="w-full lg:w-1/3 space-y-6">
+                <!-- Prompt Input -->
+                <div class="bg-white/10 backdrop-blur-sm rounded-xl p-6 shadow-lg">
+                    <h2 class="text-2xl font-semibold mb-4 flex items-center">
+                        <i class="fas fa-lightbulb mr-2"></i> Game Concept
+                    </h2>
+                    <textarea
+                        id="gamePrompt"
+                        class="w-full h-32 px-4 py-3 rounded-lg bg-white/20 border border-white/30 text-white placeholder-white/50 prompt-input focus:outline-none"
+                        placeholder="Describe your game idea... (e.g. 'A platformer where you play as a cat collecting fish while avoiding dogs')"></textarea>
+                    <div class="mt-4 flex justify-between items-center">
+                        <button id="generateBtn" class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-lg transition flex items-center">
+                            <i class="fas fa-magic mr-2"></i> Generate Game
+                        </button>
+                        <div id="loadingIndicator" class="hidden items-center text-sm">
+                            <span class="loading-dots">Generating</span>
+                            <i class="fas fa-spinner fa-spin ml-2"></i>
+                        </div>
+                    </div>
+                </div>
+                <!-- Scaffold Selection -->
+                <div class="bg-white/10 backdrop-blur-sm rounded-xl p-6 shadow-lg">
+                    <h2 class="text-2xl font-semibold mb-4 flex items-center">
+                        <i class="fas fa-layer-group mr-2"></i> Game Templates
+                    </h2>
+                    <div class="grid grid-cols-1 gap-4" id="scaffoldContainer">
+                        <!-- Scaffold cards will be inserted here by JavaScript -->
+                    </div>
+                </div>
+                <!-- Generated Code Preview -->
+                <div class="bg-white/10 backdrop-blur-sm rounded-xl p-6 shadow-lg">
+                    <h2 class="text-2xl font-semibold mb-4 flex items-center">
+                        <i class="fas fa-code mr-2"></i> Generated Code
+                    </h2>
+                    <div class="bg-gray-900 rounded-lg p-4 h-64 overflow-auto">
+                        <pre id="generatedCode" class="text-sm text-green-400 font-mono">// Your generated game code will appear here...</pre>
+                    </div>
+                </div>
+            </div>
+            <!-- Right Panel - Game Display -->
+            <div class="w-full lg:w-2/3">
+                <div class="bg-white/10 backdrop-blur-sm rounded-xl p-6 shadow-lg h-full">
+                    <div class="flex justify-between items-center mb-4">
+                        <h2 class="text-2xl font-semibold flex items-center">
+                            <i class="fas fa-play-circle mr-2"></i> Game Preview
+                        </h2>
+                        <div class="flex space-x-2">
+                            <button id="fullscreenBtn" class="bg-white/10 hover:bg-white/20 p-2 rounded-lg transition">
+                                <i class="fas fa-expand"></i>
+                            </button>
+                            <button id="soundToggle" class="bg-white/10 hover:bg-white/20 p-2 rounded-lg transition">
+                                <i class="fas fa-volume-up"></i>
+                            </button>
+                        </div>
+                    </div>
+                    <div id="gameContainer" class="game-canvas w-full h-[500px] flex items-center justify-center">
+                        <div id="placeholderText" class="text-center p-8">
+                            <i class="fas fa-gamepad text-5xl mb-4 opacity-30"></i>
+                            <p class="text-xl opacity-50">Your AI-generated game will appear here</p>
+                        </div>
+                    </div>
+                    <div class="mt-4 flex flex-wrap gap-2" id="gameControls">
+                        <!-- Dynamic game controls will appear here -->
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Game Scaffolds Data
+        const scaffolds = [
+            {
+                id: 'platformer',
+                title: 'Platformer',
+                icon: 'fas fa-running',
+                description: 'Jump and run through levels with obstacles and enemies',
+                keywords: ['platform', 'jump', 'run', 'side-scroller', 'mario']
+            },
+            {
+                id: 'rhythm',
+                title: 'Rhythm Game',
+                icon: 'fas fa-music',
+                description: 'Hit notes to the beat of the music',
+                keywords: ['music', 'beat', 'dance', 'rhythm', 'sound']
+            },
+            {
+                id: 'puzzle',
+                title: 'Puzzle Game',
+                icon: 'fas fa-puzzle-piece',
+                description: 'Solve challenging puzzles to progress',
+                keywords: ['puzzle', 'solve', 'brain', 'logic', 'challenge']
+            },
+            {
+                id: 'shooter',
+                title: 'Shooter',
+                icon: 'fas fa-space-shuttle',
+                description: 'Shoot enemies and avoid projectiles',
+                keywords: ['shoot', 'space', 'bullet', 'enemy', 'arcade']
+            },
+            {
+                id: 'adventure',
+                title: 'Adventure',
+                icon: 'fas fa-map',
+                description: 'Explore a world and complete quests',
+                keywords: ['explore', 'quest', 'story', 'rpg', 'world']
+            },
+            {
+                id: 'racing',
+                title: 'Racing',
+                icon: 'fas fa-car',
+                description: 'Race against time or opponents',
+                keywords: ['race', 'speed', 'car', 'track', 'drive']
+            }
+        ];
+        // DOM Elements
+        const gamePrompt = document.getElementById('gamePrompt');
+        const generateBtn = document.getElementById('generateBtn');
+        const loadingIndicator = document.getElementById('loadingIndicator');
+        const scaffoldContainer = document.getElementById('scaffoldContainer');
+        const gameContainer = document.getElementById('gameContainer');
+        const placeholderText = document.getElementById('placeholderText');
+        const gameControls = document.getElementById('gameControls');
+        const generatedCode = document.getElementById('generatedCode');
+        const fullscreenBtn = document.getElementById('fullscreenBtn');
+        const soundToggle = document.getElementById('soundToggle');
+        // Current game state
+        let currentGame = null;
+        let selectedScaffold = null;
+        let isSoundOn = true;
+        // Initialize the app
+        function init() {
+            renderScaffoldCards();
+            setupEventListeners();
+        }
+        // Render scaffold selection cards
+        function renderScaffoldCards() {
+            scaffoldContainer.innerHTML = '';
+            scaffolds.forEach(scaffold => {
+                const card = document.createElement('div');
+                card.className = `bg-white/5 hover:bg-white/10 border border-white/10 rounded-lg p-4 cursor-pointer transition scaffold-card ${selectedScaffold?.id === scaffold.id ? 'border-purple-500 bg-purple-500/10' : ''}`;
+                card.innerHTML = `
+                    <div class="flex items-center">
+                        <div class="w-10 h-10 rounded-full bg-purple-600/30 flex items-center justify-center mr-3">
+                            <i class="${scaffold.icon} text-purple-300"></i>
+                        </div>
+                        <div>
+                            <h3 class="font-semibold">${scaffold.title}</h3>
+                            <p class="text-sm opacity-80">${scaffold.description}</p>
+                        </div>
+                    </div>
+                `;
+                card.addEventListener('click', () => {
+                    selectedScaffold = scaffold;
+                    renderScaffoldCards();
+                    updateUI();
+                });
+                scaffoldContainer.appendChild(card);
+            });
+        }
+        // Set up event listeners
+        function setupEventListeners() {
+            generateBtn.addEventListener('click', generateGame);
+            fullscreenBtn.addEventListener('click', toggleFullscreen);
+            soundToggle.addEventListener('click', toggleSound);
+            // Allow Enter key to trigger generation
+            gamePrompt.addEventListener('keydown', (e) => {
+                if (e.key === 'Enter' && !e.shiftKey) {
+                    e.preventDefault();
+                    generateGame();
+                }
+            });
+        }
+        // Generate game based on prompt and selected scaffold
+        async function generateGame() {
+            const prompt = gamePrompt.value.trim();
+            if (!prompt) {
+                showAlert('Please enter a game description', 'error');
+                return;
+            }
+            if (!selectedScaffold) {
+                showAlert('Please select a game template', 'error');
+                return;
+            }
+            // Show loading state
+            generateBtn.disabled = true;
+            loadingIndicator.classList.remove('hidden');
+            try {
+                // In a real app, this would call your backend API
+                // For this demo, we'll simulate the API call
+                const gameData = await simulateLLMGeneration(prompt, selectedScaffold);
+                // Create the game
+                createGame(gameData);
+                // Update the code preview
+                generatedCode.textContent = gameData.code || '// No code generated';
+                showAlert('Game generated successfully!', 'success');
+            } catch (error) {
+                console.error('Error generating game:', error);
+                showAlert('Failed to generate game. Please try again.', 'error');
+            } finally {
+                // Hide loading state
+                generateBtn.disabled = false;
+                loadingIndicator.classList.add('hidden');
+            }
+        }
+        // Simulate LLM generation (in a real app, this would be an API call)
+        async function simulateLLMGeneration(prompt, scaffold) {
+            // Simulate network delay
+            await new Promise(resolve => setTimeout(resolve, 2000));
+            // Generate mock game data based on scaffold type
+            let gameData = {
+                scaffold: scaffold.id,
+                prompt: prompt,
+                code: generateMockCode(scaffold.id, prompt),
+                config: {}
+            };
+            // Add scaffold-specific config
+            switch (scaffold.id) {
+                case 'platformer':
+                    gameData.config = {
+                        player: { speed: 300, jumpForce: 600 },
+                        platforms: generatePlatforms(10),
+                        enemies: generateEnemies(3),
+                        collectibles: generateCollectibles(5)
+                    };
+                    break;
+                case 'rhythm':
+                    gameData.config = {
+                        bpm: 120,
+                        notes: generateNotes(16),
+                        difficulty: 'medium'
+                    };
+                    break;
+                case 'puzzle':
+                    gameData.config = {
+                        gridSize: 8,
+                        pieces: generatePuzzlePieces(6),
+                        movesAllowed: 20
+                    };
+                    break;
+                case 'shooter':
+                    gameData.config = {
+                        player: { speed: 400, fireRate: 500 },
+                        enemies: generateSpaceEnemies(5),
+                        powerups: generatePowerups(2)
+                    };
+                    break;
+                case 'adventure':
+                    gameData.config = {
+                        worldSize: { width: 10, height: 10 },
+                        npcs: generateNPCs(3),
+                        items: generateAdventureItems(4)
+                    };
+                    break;
+                case 'racing':
+                    gameData.config = {
+                        track: generateTrack(),
+                        opponents: 3,
+                        laps: 3
+                    };
+                    break;
+            }
+            return gameData;
+        }
+        // Generate mock code for preview
+        function generateMockCode(scaffoldId, prompt) {
+            const codeSnippets = {
+                platformer: `// Platformer game based on: "${prompt}"
+const config = {
+    type: Phaser.AUTO,
+    width: 800,
+    height: 600,
+    physics: {
+        default: 'arcade',
+        arcade: { gravity: { y: 300 }, debug: false }
+    },
+    scene: {
+        preload: function() {
+            // Load assets here
+        },
+        create: function() {
+            // Create player, platforms, enemies
+            this.player = this.physics.add.sprite(100, 450, 'player');
+            this.player.setCollideWorldBounds(true);
+            // Generated platforms
+            const platforms = this.physics.add.staticGroup();
+            platforms.create(400, 568, 'ground').setScale(2).refreshBody();
+            // Physics
+            this.physics.add.collider(this.player, platforms);
+        },
+        update: function() {
+            // Game loop
+        }
+    }
+};
+const game = new Phaser.Game(config);`,
+                rhythm: `// Rhythm game based on: "${prompt}"
+const synth = new Tone.Synth().toDestination();
+const notes = ['C4', 'D4', 'E4', 'F4', 'G4'];
+let currentNote = 0;
+function setupGame() {
+    // Create note targets
+    const container = document.getElementById('gameContainer');
+    notes.forEach((note, i) => {
+        const noteEl = document.createElement('div');
+        noteEl.className = 'note-target';
+        noteEl.style.left = \`\${(i + 1) * 15}%\`;
+        noteEl.dataset.note = note;
+        container.appendChild(noteEl);
+    });
+    // Start music
+    Tone.Transport.bpm.value = 120;
+    Tone.Transport.scheduleRepeat(time => {
+        synth.triggerAttackRelease(notes[currentNote], "8n", time);
+        currentNote = (currentNote + 1) % notes.length;
+    }, "8n");
+    Tone.Transport.start();
+}`,
+                puzzle: `// Puzzle game based on: "${prompt}"
+class PuzzleGame {
+    constructor() {
+        this.gridSize = 8;
+        this.pieces = [];
+        this.selectedPiece = null;
+        this.initBoard();
+    }
+    initBoard() {
+        // Generate random puzzle pieces
+        for (let i = 0; i < this.gridSize; i++) {
+            this.pieces[i] = [];
+            for (let j = 0; j < this.gridSize; j++) {
+                this.pieces[i][j] = {
+                    type: Math.floor(Math.random() * 6),
+                    x: i,
+                    y: j
+                };
+            }
+        }
+        this.render();
+    }
+    render() {
+        // Draw the puzzle board
+        const container = document.getElementById('gameContainer');
+        container.innerHTML = '';
+        this.pieces.forEach(row => {
+            row.forEach(piece => {
+                const pieceEl = document.createElement('div');
+                pieceEl.className = \`puzzle-piece type-\${piece.type}\`;
+                pieceEl.dataset.x = piece.x;
+                pieceEl.dataset.y = piece.y;
+                container.appendChild(pieceEl);
+            });
+        });
+    }
+}`
+            };
+            return codeSnippets[scaffoldId] || '// No template found for this game type';
+        }
+        // Create the actual game
+        function createGame(gameData) {
+            // Clear previous game if exists
+            if (currentGame) {
+                if (currentGame instanceof Phaser.Game) {
+                    currentGame.destroy(true);
+                } else if (typeof currentGame.cleanup === 'function') {
+                    currentGame.cleanup();
+                }
+                currentGame = null;
+            }
+            // Hide placeholder
+            placeholderText.style.display = 'none';
+            // Create game based on scaffold type
+            switch (gameData.scaffold) {
+                case 'platformer':
+                    createPlatformerGame(gameData);
+                    break;
+                case 'rhythm':
+                    createRhythmGame(gameData);
+                    break;
+                case 'puzzle':
+                    createPuzzleGame(gameData);
+                    break;
+                default:
+                    // For other types, just show a placeholder
+                    placeholderText.style.display = 'block';
+                    placeholderText.innerHTML = `
+                        <i class="fas fa-gamepad text-5xl mb-4 opacity-30"></i>
+                        <p class="text-xl opacity-50">Preview not available for ${selectedScaffold.title} template</p>
+                        <p class="text-sm opacity-30 mt-2">Check the code tab to see the generated code</p>
+                    `;
+            }
+            // Update game controls
+            updateGameControls(gameData.scaffold);
+        }
+        // Create a platformer game
+        function createPlatformerGame(gameData) {
+            const config = {
+                type: Phaser.AUTO,
+                width: gameContainer.clientWidth,
+                height: gameContainer.clientHeight,
+                physics: {
+                    default: 'arcade',
+                    arcade: {
+                        gravity: { y: 300 },
+                        debug: false
+                    }
+                },
+                parent: 'gameContainer',
+                scene: {
+                    preload: preload,
+                    create: create,
+                    update: update
+                }
+            };
+            currentGame = new Phaser.Game(config);
+            function preload() {
+                // Load assets (in a real app, these would be generated or selected based on prompt)
+                this.load.image('sky', 'https://labs.phaser.io/assets/skies/space3.png');
+                this.load.image('ground', 'https://labs.phaser.io/assets/platform.png');
+                this.load.image('star', 'https://labs.phaser.io/assets/sprites/star.png');
+                this.load.spritesheet('dude', 'https://labs.phaser.io/assets/sprites/dude.png', {
+                    frameWidth: 32, frameHeight: 48
+                });
+            }
+            function create() {
+                // Add background
+                this.add.image(400, 300, 'sky').setDisplaySize(config.width, config.height);
+                // Platforms
+                const platforms = this.physics.add.staticGroup();
+                // Ground
+                platforms.create(400, 568, 'ground').setScale(2).refreshBody();
+                // Additional platforms
+                platforms.create(600, 400, 'ground');
+                platforms.create(50, 250, 'ground');
+                platforms.create(750, 220, 'ground');
+                // Player
+                const player = this.physics.add.sprite(100, 450, 'dude');
+                player.setBounce(0.2);
+                player.setCollideWorldBounds(true);
+                // Animation
+                this.anims.create({
+                    key: 'left',
+                    frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),
+                    frameRate: 10,
+                    repeat: -1
+                });
+                this.anims.create({
+                    key: 'turn',
+                    frames: [ { key: 'dude', frame: 4 } ],
+                    frameRate: 20
+                });
+                this.anims.create({
+                    key: 'right',
+                    frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }),
+                    frameRate: 10,
+                    repeat: -1
+                });
+                // Stars
+                const stars = this.physics.add.group({
+                    key: 'star',
+                    repeat: 11,
+                    setXY: { x: 12, y: 0, stepX: 70 }
+                });
+                stars.children.iterate(function (child) {
+                    child.setBounceY(Phaser.Math.FloatBetween(0.4, 0.8));
+                });
+                // Physics
+                this.physics.add.collider(player, platforms);
+                this.physics.add.collider(stars, platforms);
+                this.physics.add.overlap(player, stars, collectStar, null, this);
+                // Input
+                this.cursors = this.input.keyboard.createCursorKeys();
+                // Score
+                this.score = 0;
+                this.scoreText = this.add.text(16, 16, 'Score: 0', {
+                    fontSize: '32px',
+                    fill: '#fff',
+                    fontFamily: 'Arial'
+                });
+                function collectStar(player, star) {
+                    star.disableBody(true, true);
+                    this.score += 10;
+                    this.scoreText.setText('Score: ' + this.score);
+                    // Play sound if enabled
+                    if (isSoundOn) {
+                        const synth = new Tone.Synth().toDestination();
+                        synth.triggerAttackRelease("C5", "8n");
+                    }
+                }
+            }
+            function update() {
+                const cursors = this.cursors;
+                const player = this.physics.world.bodies.entries[0].gameObject;
+                if (cursors.left.isDown) {
+                    player.setVelocityX(-160);
+                    player.anims.play('left', true);
+                } else if (cursors.right.isDown) {
+                    player.setVelocityX(160);
+                    player.anims.play('right', true);
+                } else {
+                    player.setVelocityX(0);
+                    player.anims.play('turn');
+                }
+                if (cursors.up.isDown && player.body.touching.down) {
+                    player.setVelocityY(-330);
+                }
+            }
+        }
+        // Create a rhythm game
+        function createRhythmGame(gameData) {
+            // Clear container
+            gameContainer.innerHTML = '';
+            // Create note targets
+            const notes = ['C', 'D', 'E', 'F', 'G'];
+            const colors = ['#FF5252', '#FFD740', '#69F0AE', '#40C4FF', '#E040FB'];
+            notes.forEach((note, i) => {
+                const noteEl = document.createElement('div');
+                noteEl.className = 'w-16 h-16 rounded-full flex items-center justify-center text-white font-bold cursor-pointer transition-transform hover:scale-110';
+                noteEl.style.backgroundColor = colors[i];
+                noteEl.style.position = 'absolute';
+                noteEl.style.left = `${(i + 1) * 15}%`;
+                noteEl.style.top = '50%';
+                noteEl.style.transform = 'translate(-50%, -50%)';
+                noteEl.textContent = note;
+                noteEl.dataset.note = `${note}4`;
+                noteEl.addEventListener('click', () => {
+                    if (isSoundOn) {
+                        const synth = new Tone.Synth().toDestination();
+                        synth.triggerAttackRelease(noteEl.dataset.note, "8n");
+                    }
+                    noteEl.style.transform = 'translate(-50%, -50%) scale(1.2)';
+                    setTimeout(() => {
+                        noteEl.style.transform = 'translate(-50%, -50%) scale(1)';
+                    }, 200);
+                });
+                gameContainer.appendChild(noteEl);
+            });
+            // Add visualizer
+            const visualizer = document.createElement('div');
+            visualizer.className = 'w-full h-2 bg-white/20 rounded-full absolute bottom-8 left-0';
+            visualizer.style.overflow = 'hidden';
+            const progress = document.createElement('div');
+            progress.className = 'h-full bg-purple-500 rounded-full';
+            progress.style.width = '0%';
+            progress.style.transition = 'width 0.1s linear';
+            visualizer.appendChild(progress);
+            gameContainer.appendChild(visualizer);
+            // Start music if sound is on
+            if (isSoundOn) {
+                const synth = new Tone.Synth().toDestination();
+                const notes = ['C4', 'D4', 'E4', 'F4', 'G4'];
+                let currentNote = 0;
+                Tone.Transport.bpm.value = 120;
+                Tone.Transport.scheduleRepeat(time => {
+                    synth.triggerAttackRelease(notes[currentNote], "8n", time);
+                    currentNote = (currentNote + 1) % notes.length;
+                    // Update visualizer
+                    progress.style.width = `${(currentNote / notes.length) * 100}%`;
+                }, "8n");
+                Tone.Transport.start();
+            }
+            currentGame = {
+                cleanup: () => {
+                    Tone.Transport.cancel();
+                    Tone.Transport.stop();
+                }
+            };
+        }
+        // Create a puzzle game
+        function createPuzzleGame(gameData) {
+            // Clear container
+            gameContainer.innerHTML = '';
+            // Create puzzle board
+            const boardSize = 4;
+            const pieceSize = gameContainer.clientWidth / boardSize - 10;
+            // Create pieces
+            for (let i = 0; i < boardSize * boardSize; i++) {
+                const piece = document.createElement('div');
+                piece.className = 'absolute bg-white/20 border border-white/30 rounded-lg cursor-pointer transition-all hover:bg-white/30';
+                piece.style.width = `${pieceSize}px`;
+                piece.style.height = `${pieceSize}px`;
+                piece.style.left = `${(i % boardSize) * (pieceSize + 10)}px`;
+                piece.style.top = `${Math.floor(i / boardSize) * (pieceSize + 10)}px`;
+                // Random color
+                const hue = Math.floor(Math.random() * 360);
+                piece.style.backgroundColor = `hsla(${hue}, 80%, 60%, 0.7)`;
+                piece.addEventListener('click', () => {
+                    piece.style.transform = 'scale(0.95) rotate(5deg)';
+                    setTimeout(() => {
+                        piece.style.transform = '';
+                    }, 200);
+                    if (isSoundOn) {
+                        const note = ['C4', 'E4', 'G4', 'C5'][Math.floor(Math.random() * 4)];
+                        const synth = new Tone.Synth().toDestination();
+                        synth.triggerAttackRelease(note, "8n");
+                    }
+                });
+                gameContainer.appendChild(piece);
+            }
+            currentGame = {
+                cleanup: () => {
+                    // No special cleanup needed
+                }
+            };
+        }
+        // Update game controls based on game type
+        function updateGameControls(gameType) {
+            gameControls.innerHTML = '';
+            const controls = {
+                platformer: [
+                    { label: 'Left/Right', keys: '← →', desc: 'Move player' },
+                    { label: 'Jump', keys: '↑', desc: 'Jump' }
+                ],
+                rhythm: [
+                    { label: 'Tap', keys: 'Click', desc: 'Hit notes' }
+                ],
+                puzzle: [
+                    { label: 'Select', keys: 'Click', desc: 'Select pieces' }
+                ],
+                default: [
+                    { label: 'No controls', desc: 'This game type has no interactive controls' }
+                ]
+            };
+            const currentControls = controls[gameType] || controls.default;
+            currentControls.forEach(control => {
+                const controlEl = document.createElement('div');
+                controlEl.className = 'bg-white/10 rounded-lg px-4 py-2 flex items-center';
+                const keysEl = document.createElement('div');
+                keysEl.className = 'bg-purple-600 rounded px-2 py-1 mr-3 font-mono text-sm';
+                keysEl.textContent = control.keys || '';
+                const textEl = document.createElement('div');
+                textEl.className = 'text-sm';
+                textEl.innerHTML = `<span class="font-semibold">${control.label}</span>: ${control.desc}`;
+                if (control.keys) {
+                    controlEl.appendChild(keysEl);
+                }
+                controlEl.appendChild(textEl);
+                gameControls.appendChild(controlEl);
+            });
+        }
+        // Toggle fullscreen mode
+        function toggleFullscreen() {
+            if (!document.fullscreenElement) {
+                gameContainer.requestFullscreen().catch(err => {
+                    console.error('Error attempting to enable fullscreen:', err);
+                });
+            } else {
+                document.exitFullscreen();
+            }
+        }
+        // Toggle sound on/off
+        function toggleSound() {
+            isSoundOn = !isSoundOn;
+            soundToggle.innerHTML = isSoundOn ? '<i class="fas fa-volume-up"></i>' : '<i class="fas fa-volume-mute"></i>';
+            if (isSoundOn && currentGame && selectedScaffold?.id === 'rhythm') {
+                // Restart music if it's a rhythm game
+                createGame({ scaffold: 'rhythm' });
+            }
+        }
+        // Show alert message
+        function showAlert(message, type) {
+            const alert = document.createElement('div');
+            alert.className = `fixed top-4 right-4 px-6 py-3 rounded-lg shadow-lg z-50 transition-all ${
+                type === 'error' ? 'bg-red-500' : 'bg-green-500'
+            }`;
+            alert.textContent = message;
+            document.body.appendChild(alert);
+            setTimeout(() => {
+                alert.style.opacity = '0';
+                setTimeout(() => {
+                    alert.remove();
+                }, 300);
+            }, 3000);
+        }
+        // Helper functions for mock data generation
+        function generatePlatforms(count) {
+            return Array.from({ length: count }, (_, i) => ({
+                x: Math.floor(Math.random() * 700) + 50,
+                y: Math.floor(Math.random() * 400) + 100,
+                width: Math.floor(Math.random() * 200) + 50
+            }));
+        }
+        function generateEnemies(count) {
+            return Array.from({ length: count }, (_, i) => ({
+                type: ['dog', 'ghost', 'spider'][Math.floor(Math.random() * 3)],
+                x: Math.floor(Math.random() * 700) + 50,
+                speed: Math.floor(Math.random() * 100) + 50,
+                patrol: Math.random() > 0.5 ? 'left-right' : 'up-down'
+            }));
+        }
+        function generateCollectibles(count) {
+            return Array.from({ length: count }, (_, i) => ({
+                type: ['coin', 'gem', 'star'][Math.floor(Math.random() * 3)],
+                x: Math.floor(Math.random() * 700) + 50,
+                y: Math.floor(Math.random() * 500) + 50,
+                value: Math.floor(Math.random() * 5) + 1
+            }));
+        }
+        function generateNotes(count) {
+            return Array.from({ length: count }, (_, i) => ({
+                time: i * 0.5,
+                note: ['C', 'D', 'E', 'F', 'G'][Math.floor(Math.random() * 5)],
+                duration: 0.25
+            }));
+        }
+        function generatePuzzlePieces(count) {
+            return Array.from({ length: count }, (_, i) => ({
+                type: i,
+                color: `hsl(${Math.floor(Math.random() * 360)}, 80%, 60%)`,
+                shape: ['circle', 'square', 'triangle'][Math.floor(Math.random() * 3)]
+            }));
+        }
+        function generateSpaceEnemies(count) {
+            return Array.from({ length: count }, (_, i) => ({
+                type: ['alien', 'asteroid', 'ufo'][Math.floor(Math.random() * 3)],
+                health: Math.floor(Math.random() * 3) + 1,
+                speed: Math.floor(Math.random() * 150) + 50,
+                pattern: ['straight', 'zigzag', 'circle'][Math.floor(Math.random() * 3)]
+            }));
+        }
+        function generatePowerups(count) {
+            return Array.from({ length: count }, (_, i) => ({
+                type: ['shield', 'speed', 'multishot'][Math.floor(Math.random() * 3)],
+                duration: Math.floor(Math.random() * 5) + 3
+            }));
+        }
+        function generateNPCs(count) {
+            return Array.from({ length: count }, (_, i) => ({
+                name: ['Wizard', 'Merchant', 'Guard'][Math.floor(Math.random() * 3)],
+                dialogue: [
+                    'Hello adventurer!',
+                    'Have you seen my lost treasure?',
+                    'Beware of the dragon!'
+                ][Math.floor(Math.random() * 3)],
+                quest: Math.random() > 0.5
+            }));
+        }
+        function generateAdventureItems(count) {
+            return Array.from({ length: count }, (_, i) => ({
+                name: ['Sword', 'Potion', 'Key', 'Map'][Math.floor(Math.random() * 4)],
+                description: [
+                    'A sharp blade for combat',
+                    'Restores health when consumed',
+                    'Opens locked doors',
+                    'Shows hidden locations'
+                ][Math.floor(Math.random() * 4)]
+            }));
+        }
+        function generateTrack() {
+            return {
+                length: Math.floor(Math.random() * 5) + 3,
+                turns: ['sharp', 'wide', 's-curve'][Math.floor(Math.random() * 3)],
+                obstacles: Math.floor(Math.random() * 10)
+            };
+        }
+        // Update UI based on current state
+        function updateUI() {
+            // Update generate button state
+            generateBtn.disabled = !gamePrompt.value.trim() || !selectedScaffold;
+        }
+        // Initialize the app when DOM is loaded
+        document.addEventListener('DOMContentLoaded', init);
+        // Update UI when prompt changes
+        gamePrompt.addEventListener('input', updateUI);
+    </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=pysolver33/awesome-games" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>