Spaces:

pysolver33
/

awesome-games

Running

App Files Files Community

awesome-games / index.html

pysolver33

Add 1 files

9d095b4 verified 3 months ago

raw

history blame contribute delete

64.2 kB

	<!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; }
	}
	.car {
	position: absolute;
	width: 50px;
	height: 90px;
	background-color: #3498db;
	border-radius: 10px;
	}
	.opponent-car {
	position: absolute;
	width: 50px;
	height: 90px;
	background-color: #e74c3c;
	border-radius: 10px;
	}
	.road {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #34495e;
	}
	.lane-marker {
	position: absolute;
	width: 10px;
	height: 60px;
	background-color: #f1c40f;
	}
	.adventure-tile {
	position: absolute;
	width: 60px;
	height: 60px;
	background-color: #2ecc71;
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-weight: bold;
	cursor: pointer;
	transition: transform 0.2s;
	}
	.adventure-tile:hover {
	transform: scale(1.05);
	}
	.npc {
	background-color: #9b59b6;
	}
	.item {
	background-color: #e67e22;
	}
	</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 relative overflow-hidden">
	<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;
	let racingInterval = null;
	let adventureState = null;

	// 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() {
	this.load.image('sky', 'assets/sky.png');
	this.load.image('ground', 'assets/platform.png');
	this.load.image('star', 'assets/star.png');
	this.load.spritesheet('player', 'assets/player.png', {
	frameWidth: 32, frameHeight: 48
	});
	},
	create: function() {
	// Create world
	this.add.image(400, 300, 'sky');

	// Platforms
	const platforms = this.physics.add.staticGroup();
	platforms.create(400, 568, 'ground').setScale(2).refreshBody();

	// Player
	this.player = this.physics.add.sprite(100, 450, 'player');
	this.player.setBounce(0.2);
	this.player.setCollideWorldBounds(true);

	// Physics
	this.physics.add.collider(this.player, platforms);

	// Controls
	this.cursors = this.input.keyboard.createCursorKeys();
	},
	update: function() {
	// Movement logic
	if (this.cursors.left.isDown) {
	this.player.setVelocityX(-160);
	} else if (this.cursors.right.isDown) {
	this.player.setVelocityX(160);
	} else {
	this.player.setVelocityX(0);
	}

	if (this.cursors.up.isDown && this.player.body.touching.down) {
	this.player.setVelocityY(-330);
	}
	}
	}
	};

	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 score = 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;
	noteEl.addEventListener('click', () => {
	synth.triggerAttackRelease(note, "8n");
	score += 10;
	});
	container.appendChild(noteEl);
	});

	// Start music
	Tone.Transport.bpm.value = 120;
	Tone.Transport.scheduleRepeat(time => {
	const note = notes[Math.floor(Math.random() * notes.length)];
	synth.triggerAttackRelease(note, "8n", time);
	}, "8n");

	Tone.Transport.start();
	}`,
	puzzle: `// Puzzle game based on: "${prompt}"
	class PuzzleGame {
	constructor() {
	this.gridSize = 4;
	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() {
	const container = document.getElementById('gameContainer');
	container.innerHTML = '';

	this.pieces.forEach(row => {
	row.forEach(piece => {
	const pieceEl = document.createElement('div');
	pieceEl.className = 'puzzle-piece';
	pieceEl.style.backgroundColor = \`hsl(\${Math.random() * 360}, 70%, 60%)\`;
	pieceEl.addEventListener('click', () => this.handleClick(piece));
	container.appendChild(pieceEl);
	});
	});
	}

	handleClick(piece) {
	// Handle puzzle piece click
	}
	}`,
	shooter: `// Shooter game based on: "${prompt}"
	const config = {
	type: Phaser.AUTO,
	width: 800,
	height: 600,
	physics: {
	default: 'arcade',
	arcade: { debug: false }
	},
	scene: {
	preload: function() {
	this.load.image('player', 'assets/ship.png');
	this.load.image('bullet', 'assets/bullet.png');
	this.load.image('enemy', 'assets/enemy.png');
	},
	create: function() {
	// Player
	this.player = this.physics.add.sprite(400, 500, 'player');
	this.player.setCollideWorldBounds(true);

	// Bullets
	this.bullets = this.physics.add.group();

	// Enemies
	this.enemies = this.physics.add.group();
	this.time.addEvent({
	delay: 1000,
	callback: this.spawnEnemy,
	callbackScope: this,
	loop: true
	});

	// Controls
	this.cursors = this.input.keyboard.createCursorKeys();
	this.input.on('pointerdown', this.shoot, this);
	},
	update: function() {
	// Movement
	if (this.cursors.left.isDown) {
	this.player.setVelocityX(-200);
	} else if (this.cursors.right.isDown) {
	this.player.setVelocityX(200);
	} else {
	this.player.setVelocityX(0);
	}
	},
	shoot: function() {
	const bullet = this.bullets.create(this.player.x, this.player.y, 'bullet');
	bullet.setVelocityY(-300);
	},
	spawnEnemy: function() {
	const x = Phaser.Math.Between(50, 750);
	const enemy = this.enemies.create(x, 0, 'enemy');
	enemy.setVelocityY(100);
	}
	}
	};

	const game = new Phaser.Game(config);`,
	adventure: `// Adventure game based on: "${prompt}"
	class AdventureGame {
	constructor() {
	this.worldSize = { width: 10, height: 10 };
	this.playerPos = { x: 0, y: 0 };
	this.npcs = [
	{ x: 3, y: 2, name: 'Wizard', dialog: 'Seek the magic orb!' },
	{ x: 7, y: 5, name: 'Merchant', dialog: 'I have potions for sale.' }
	];
	this.items = [
	{ x: 5, y: 8, name: 'Magic Orb', description: 'Grants wishes' }
	];

	this.renderWorld();
	}

	renderWorld() {
	const container = document.getElementById('gameContainer');
	container.innerHTML = '';

	// Render tiles
	for (let y = 0; y < this.worldSize.height; y++) {
	for (let x = 0; x < this.worldSize.width; x++) {
	const tile = document.createElement('div');
	tile.className = 'adventure-tile';
	tile.style.left = \`\${x * 7}%\`;
	tile.style.top = \`\${y * 7}%\`;
	container.appendChild(tile);
	}
	}

	// Render NPCs
	this.npcs.forEach(npc => {
	const npcEl = document.createElement('div');
	npcEl.className = 'adventure-tile npc';
	npcEl.style.left = \`\${npc.x * 7}%\`;
	npcEl.style.top = \`\${npc.y * 7}%\`;
	npcEl.textContent = npc.name[0];
	npcEl.title = npc.name;
	container.appendChild(npcEl);
	});

	// Render items
	this.items.forEach(item => {
	const itemEl = document.createElement('div');
	itemEl.className = 'adventure-tile item';
	itemEl.style.left = \`\${item.x * 7}%\`;
	itemEl.style.top = \`\${item.y * 7}%\`;
	itemEl.textContent = item.name[0];
	itemEl.title = item.name;
	container.appendChild(itemEl);
	});
	}
	}`,
	racing: `// Racing game based on: "${prompt}"
	class RacingGame {
	constructor() {
	this.playerCar = { x: 50, y: 400, speed: 0 };
	this.opponents = [
	{ x: 150, y: 100, speed: 3 },
	{ x: 250, y: 0, speed: 4 },
	{ x: 350, y: -100, speed: 3.5 }
	];
	this.road = [];

	this.initGame();
	this.startRace();
	}

	initGame() {
	const container = document.getElementById('gameContainer');
	container.innerHTML = '';

	// Create road
	for (let i = 0; i < 20; i++) {
	const marker = document.createElement('div');
	marker.className = 'lane-marker';
	marker.style.left = '45%';
	marker.style.top = \`\${i * 120}px\`;
	container.appendChild(marker);
	}

	// Create player car
	const car = document.createElement('div');
	car.className = 'car';
	car.style.left = \`\${this.playerCar.x}px\`;
	car.style.top = \`\${this.playerCar.y}px\`;
	container.appendChild(car);

	// Create opponent cars
	this.opponents.forEach(opp => {
	const oppCar = document.createElement('div');
	oppCar.className = 'opponent-car';
	oppCar.style.left = \`\${opp.x}px\`;
	oppCar.style.top = \`\${opp.y}px\`;
	container.appendChild(oppCar);
	});
	}

	startRace() {
	// Handle keyboard controls
	document.addEventListener('keydown', (e) => {
	if (e.key === 'ArrowLeft') this.playerCar.x = Math.max(50, this.playerCar.x - 20);
	if (e.key === 'ArrowRight') this.playerCar.x = Math.min(350, this.playerCar.x + 20);
	if (e.key === 'ArrowUp') this.playerCar.speed = Math.min(10, this.playerCar.speed + 0.5);
	if (e.key === 'ArrowDown') this.playerCar.speed = Math.max(0, this.playerCar.speed - 0.5);

	// Update player car position
	document.querySelector('.car').style.left = \`\${this.playerCar.x}px\`;
	});

	// Game loop
	setInterval(() => {
	// Move opponents
	this.opponents.forEach(opp => {
	opp.y += opp.speed;
	if (opp.y > 600) opp.y = -100;
	document.querySelectorAll('.opponent-car')[this.opponents.indexOf(opp)].style.top = \`\${opp.y}px\`;
	});

	// Move road markers
	const markers = document.querySelectorAll('.lane-marker');
	markers.forEach(marker => {
	const currentTop = parseInt(marker.style.top);
	marker.style.top = \`\${(currentTop + this.playerCar.speed) % 600}px\`;
	});
	}, 16);
	}
	}`
	};

	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();
	}
	if (racingInterval) {
	clearInterval(racingInterval);
	racingInterval = null;
	}
	currentGame = null;
	}

	// Hide placeholder
	placeholderText.style.display = 'none';
	gameContainer.innerHTML = '';

	// Create game based on scaffold type
	switch (gameData.scaffold) {
	case 'platformer':
	createPlatformerGame(gameData);
	break;
	case 'rhythm':
	createRhythmGame(gameData);
	break;
	case 'puzzle':
	createPuzzleGame(gameData);
	break;
	case 'shooter':
	createShooterGame(gameData);
	break;
	case 'adventure':
	createAdventureGame(gameData);
	break;
	case 'racing':
	createRacingGame(gameData);
	break;
	default:
	// Fallback
	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
	}
	};
	}

	// Create a shooter game
	function createShooterGame(gameData) {
	const config = {
	type: Phaser.AUTO,
	width: gameContainer.clientWidth,
	height: gameContainer.clientHeight,
	physics: {
	default: 'arcade',
	arcade: {
	debug: false
	}
	},
	parent: 'gameContainer',
	scene: {
	preload: preload,
	create: create,
	update: update
	}
	};

	currentGame = new Phaser.Game(config);

	function preload() {
	// Load assets
	this.load.image('ship', 'https://labs.phaser.io/assets/sprites/thrust_ship2.png');
	this.load.image('bullet', 'https://labs.phaser.io/assets/sprites/bullets/bullet6.png');
	this.load.image('enemy', 'https://labs.phaser.io/assets/sprites/asteroid.png');
	}

	function create() {
	// Add background
	this.add.rectangle(0, 0, config.width, config.height, 0x1a1a2e).setOrigin(0);

	// Player
	this.player = this.physics.add.sprite(config.width / 2, config.height - 50, 'ship');
	this.player.setCollideWorldBounds(true);

	// Bullets
	this.bullets = this.physics.add.group();

	// Enemies
	this.enemies = this.physics.add.group();
	this.time.addEvent({
	delay: 1000,
	callback: spawnEnemy,
	callbackScope: this,
	loop: true
	});

	// Controls
	this.cursors = this.input.keyboard.createCursorKeys();
	this.input.on('pointerdown', shoot, this);

	// Score
	this.score = 0;
	this.scoreText = this.add.text(16, 16, 'Score: 0', {
	fontSize: '24px',
	fill: '#fff',
	fontFamily: 'Arial'
	});

	function shoot() {
	const bullet = this.bullets.create(this.player.x, this.player.y - 20, 'bullet');
	bullet.setVelocityY(-300);

	if (isSoundOn) {
	const synth = new Tone.Synth().toDestination();
	synth.triggerAttackRelease("A2", "8n");
	}
	}

	function spawnEnemy() {
	const x = Phaser.Math.Between(50, config.width - 50);
	const enemy = this.enemies.create(x, 0, 'enemy');
	enemy.setScale(0.5);
	enemy.setVelocityY(Phaser.Math.Between(50, 150));

	// Collision
	this.physics.add.collider(this.bullets, this.enemies, hitEnemy, null, this);

	function hitEnemy(bullet, enemy) {
	bullet.destroy();
	enemy.destroy();

	this.score += 10;
	this.scoreText.setText('Score: ' + this.score);

	if (isSoundOn) {
	const synth = new Tone.Synth().toDestination();
	synth.triggerAttackRelease("C5", "8n");
	}
	}
	}
	}

	function update() {
	// Movement
	if (this.cursors.left.isDown) {
	this.player.setVelocityX(-200);
	} else if (this.cursors.right.isDown) {
	this.player.setVelocityX(200);
	} else {
	this.player.setVelocityX(0);
	}
	}
	}

	// Create an adventure game
	function createAdventureGame(gameData) {
	// Clear container
	gameContainer.innerHTML = '';

	// Game state
	adventureState = {
	playerPos: { x: 0, y: 0 },
	inventory: [],
	npcs: [
	{ x: 3, y: 2, name: 'Wizard', dialog: 'Seek the magic orb to win the game!' },
	{ x: 7, y: 5, name: 'Merchant', dialog: 'I have potions for sale. (Coming soon!)' }
	],
	items: [
	{ x: 5, y: 8, name: 'Magic Orb', description: 'The legendary orb that grants wishes' }
	]
	};

	// Render world
	renderAdventureWorld();

	currentGame = {
	cleanup: () => {
	adventureState = null;
	}
	};

	function renderAdventureWorld() {
	// Clear container
	gameContainer.innerHTML = '';

	// Create grid
	const gridSize = 10;
	const tileSize = Math.min(
	gameContainer.clientWidth / gridSize - 2,
	gameContainer.clientHeight / gridSize - 2
	);

	// Render tiles
	for (let y = 0; y < gridSize; y++) {
	for (let x = 0; x < gridSize; x++) {
	const tile = document.createElement('div');
	tile.className = 'adventure-tile';
	tile.style.width = `${tileSize}px`;
	tile.style.height = `${tileSize}px`;
	tile.style.left = `${x * (tileSize + 2)}px`;
	tile.style.top = `${y * (tileSize + 2)}px`;

	// Mark player position
	if (x === adventureState.playerPos.x && y === adventureState.playerPos.y) {
	tile.innerHTML = '<i class="fas fa-user"></i>';
	tile.style.backgroundColor = '#3498db';
	}

	gameContainer.appendChild(tile);
	}
	}

	// Render NPCs
	adventureState.npcs.forEach(npc => {
	const npcEl = document.createElement('div');
	npcEl.className = 'adventure-tile npc';
	npcEl.style.width = `${tileSize}px`;
	npcEl.style.height = `${tileSize}px`;
	npcEl.style.left = `${npc.x * (tileSize + 2)}px`;
	npcEl.style.top = `${npc.y * (tileSize + 2)}px`;
	npcEl.innerHTML = `<i class="fas fa-hat-wizard"></i>`;
	npcEl.title = npc.name;

	npcEl.addEventListener('click', () => {
	alert(`${npc.name}: ${npc.dialog}`);
	});

	gameContainer.appendChild(npcEl);
	});

	// Render items
	adventureState.items.forEach(item => {
	const itemEl = document.createElement('div');
	itemEl.className = 'adventure-tile item';
	itemEl.style.width = `${tileSize}px`;
	itemEl.style.height = `${tileSize}px`;
	itemEl.style.left = `${item.x * (tileSize + 2)}px`;
	itemEl.style.top = `${item.y * (tileSize + 2)}px`;
	itemEl.innerHTML = `<i class="fas fa-gem"></i>`;
	itemEl.title = item.name;

	itemEl.addEventListener('click', () => {
	if (Math.abs(adventureState.playerPos.x - item.x) <= 1 &&
	Math.abs(adventureState.playerPos.y - item.y) <= 1) {
	alert(`You found the ${item.name}! ${item.description}`);
	adventureState.items = adventureState.items.filter(i => i !== item);
	renderAdventureWorld();
	} else {
	alert(`You need to get closer to the ${item.name}!`);
	}
	});

	gameContainer.appendChild(itemEl);
	});

	// Add controls
	document.addEventListener('keydown', (e) => {
	const newPos = {...adventureState.playerPos};

	switch(e.key) {
	case 'ArrowUp':
	newPos.y = Math.max(0, adventureState.playerPos.y - 1);
	break;
	case 'ArrowDown':
	newPos.y = Math.min(gridSize - 1, adventureState.playerPos.y + 1);
	break;
	case 'ArrowLeft':
	newPos.x = Math.max(0, adventureState.playerPos.x - 1);
	break;
	case 'ArrowRight':
	newPos.x = Math.min(gridSize - 1, adventureState.playerPos.x + 1);
	break;
	}

	if (newPos.x !== adventureState.playerPos.x \|\| newPos.y !== adventureState.playerPos.y) {
	adventureState.playerPos = newPos;
	renderAdventureWorld();
	}
	});
	}
	}

	// Create a racing game
	function createRacingGame(gameData) {
	// Clear container
	gameContainer.innerHTML = '';

	// Game state
	const state = {
	player: { x: 175, y: 400, speed: 0, maxSpeed: 10 },
	opponents: [
	{ x: 75, y: -100, speed: 3 },
	{ x: 175, y: -300, speed: 4 },
	{ x: 275, y: -500, speed: 3.5 }
	],
	roadMarkers: Array.from({ length: 20 }, (_, i) => ({ y: i * 120 })),
	score: 0
	};

	// Create road
	const road = document.createElement('div');
	road.className = 'road';
	gameContainer.appendChild(road);

	// Create road markers
	state.roadMarkers.forEach(marker => {
	const markerEl = document.createElement('div');
	markerEl.className = 'lane-marker';
	markerEl.style.left = '45%';
	markerEl.style.top = `${marker.y}px`;
	gameContainer.appendChild(markerEl);
	});

	// Create player car
	const playerCar = document.createElement('div');
	playerCar.className = 'car';
	playerCar.style.left = `${state.player.x}px`;
	playerCar.style.top = `${state.player.y}px`;
	gameContainer.appendChild(playerCar);

	// Create opponent cars
	state.opponents.forEach(opp => {
	const oppCar = document.createElement('div');
	oppCar.className = 'opponent-car';
	oppCar.style.left = `${opp.x}px`;
	oppCar.style.top = `${opp.y}px`;
	gameContainer.appendChild(oppCar);
	});

	// Score display
	const scoreEl = document.createElement('div');
	scoreEl.className = 'absolute top-4 left-4 text-white font-bold text-xl';
	scoreEl.textContent = `Score: ${state.score}`;
	gameContainer.appendChild(scoreEl);

	// Controls
	document.addEventListener('keydown', (e) => {
	if (e.key === 'ArrowLeft') state.player.x = Math.max(75, state.player.x - 100);
	if (e.key === 'ArrowRight') state.player.x = Math.min(275, state.player.x + 100);
	if (e.key === 'ArrowUp') state.player.speed = Math.min(state.player.maxSpeed, state.player.speed + 0.5);
	if (e.key === 'ArrowDown') state.player.speed = Math.max(0, state.player.speed - 0.5);

	// Update player car position
	playerCar.style.left = `${state.player.x}px`;
	});

	// Game loop
	racingInterval = setInterval(() => {
	// Move opponents
	state.opponents.forEach(opp => {
	opp.y += opp.speed;
	if (opp.y > gameContainer.clientHeight) {
	opp.y = -100;
	state.score += 10;
	scoreEl.textContent = `Score: ${state.score}`;
	}

	// Check collision
	if (Math.abs(opp.x - state.player.x) < 50 &&
	Math.abs(opp.y - state.player.y) < 50) {
	state.player.speed = Math.max(0, state.player.speed - 1);
	}

	// Update opponent position
	document.querySelectorAll('.opponent-car')[state.opponents.indexOf(opp)].style.top = `${opp.y}px`;
	});

	// Move road markers
	state.roadMarkers.forEach(marker => {
	marker.y += state.player.speed;
	if (marker.y > gameContainer.clientHeight) {
	marker.y = 0;
	}

	// Update marker position
	const markers = document.querySelectorAll('.lane-marker');
	markers[state.roadMarkers.indexOf(marker)].style.top = `${marker.y}px`;
	});

	// Update score based on speed
	state.score += Math.floor(state.player.speed / 10);
	scoreEl.textContent = `Score: ${state.score}`;
	}, 16);

	currentGame = {
	cleanup: () => {
	if (racingInterval) {
	clearInterval(racingInterval);
	racingInterval = null;
	}
	}
	};
	}

	// 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' }
	],
	shooter: [
	{ label: 'Left/Right', keys: '← →', desc: 'Move ship' },
	{ label: 'Shoot', keys: 'Click', desc: 'Fire bullets' }
	],
	adventure: [
	{ label: 'Move', keys: 'Arrow Keys', desc: 'Navigate the world' },
	{ label: 'Interact', keys: 'Click', desc: 'Talk to NPCs or collect items' }
	],
	racing: [
	{ label: 'Left/Right', keys: '← →', desc: 'Change lanes' },
	{ label: 'Accelerate/Brake', keys: '↑ ↓', desc: 'Control speed' }
	],
	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>