Spaces:
Running
Running
Create game engine similar to GameMaster, except with better LLM AI, more realism, and better. - Initial Deployment
fae4f3e verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>GameMaster Pro - Advanced AI Game Engine</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |
| .pulse-animation { | |
| animation: pulse 2s infinite; | |
| } | |
| .game-world { | |
| background-image: radial-gradient(circle, #1a2a3a 0%, #0d1117 100%); | |
| background-size: 400% 400%; | |
| animation: gradientBG 15s ease infinite; | |
| } | |
| @keyframes gradientBG { | |
| 0% { background-position: 0% 50%; } | |
| 50% { background-position: 100% 50%; } | |
| 100% { background-position: 0% 50%; } | |
| } | |
| .character-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3); | |
| } | |
| .dialog-box { | |
| clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%); | |
| } | |
| .scrollbar-hide::-webkit-scrollbar { | |
| display: none; | |
| } | |
| .scrollbar-hide { | |
| -ms-overflow-style: none; | |
| scrollbar-width: none; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-gray-100 min-h-screen"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Header --> | |
| <header class="flex flex-col md:flex-row justify-between items-center mb-8"> | |
| <div class="flex items-center mb-4 md:mb-0"> | |
| <i class="fas fa-dice-d20 text-4xl text-purple-500 mr-3"></i> | |
| <h1 class="text-3xl font-bold bg-gradient-to-r from-purple-500 to-blue-500 bg-clip-text text-transparent"> | |
| GameMaster Pro | |
| </h1> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <button class="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg flex items-center"> | |
| <i class="fas fa-save mr-2"></i> Save Game | |
| </button> | |
| <button class="px-4 py-2 bg-purple-600 hover:bg-purple-700 rounded-lg flex items-center"> | |
| <i class="fas fa-cog mr-2"></i> Settings | |
| </button> | |
| </div> | |
| </header> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Left Panel - Game Controls --> | |
| <div class="lg:col-span-1 bg-gray-800 rounded-xl p-6 shadow-lg"> | |
| <h2 class="text-xl font-semibold mb-4 flex items-center"> | |
| <i class="fas fa-gamepad mr-2 text-blue-400"></i> Game Controls | |
| </h2> | |
| <div class="mb-6"> | |
| <h3 class="text-lg font-medium mb-2 text-gray-300">Game Mode</h3> | |
| <div class="grid grid-cols-2 gap-2"> | |
| <button id="storyModeBtn" class="px-3 py-2 bg-blue-700 rounded-lg flex items-center justify-center"> | |
| <i class="fas fa-book mr-2"></i> Story | |
| </button> | |
| <button id="sandboxModeBtn" class="px-3 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg flex items-center justify-center"> | |
| <i class="fas fa-shapes mr-2"></i> Sandbox | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="text-lg font-medium mb-2 text-gray-300">AI Settings</h3> | |
| <div class="space-y-3"> | |
| <div> | |
| <label class="block text-sm text-gray-400 mb-1">AI Creativity</label> | |
| <input type="range" min="0" max="100" value="75" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-gray-400 mb-1">Realism Level</label> | |
| <input type="range" min="0" max="100" value="85" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-gray-400 mb-1">NPC Autonomy</label> | |
| <input type="range" min="0" max="100" value="65" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="text-lg font-medium mb-2 text-gray-300">Quick Actions</h3> | |
| <div class="grid grid-cols-3 gap-2"> | |
| <button class="p-2 bg-gray-700 hover:bg-gray-600 rounded-lg flex flex-col items-center"> | |
| <i class="fas fa-plus mb-1"></i> | |
| <span class="text-xs">Add NPC</span> | |
| </button> | |
| <button class="p-2 bg-gray-700 hover:bg-gray-600 rounded-lg flex flex-col items-center"> | |
| <i class="fas fa-random mb-1"></i> | |
| <span class="text-xs">Random Event</span> | |
| </button> | |
| <button class="p-2 bg-gray-700 hover:bg-gray-600 rounded-lg flex flex-col items-center"> | |
| <i class="fas fa-dungeon mb-1"></i> | |
| <span class="text-xs">New Location</span> | |
| </button> | |
| <button class="p-2 bg-gray-700 hover:bg-gray-600 rounded-lg flex flex-col items-center"> | |
| <i class="fas fa-question mb-1"></i> | |
| <span class="text-xs">Clue</span> | |
| </button> | |
| <button class="p-2 bg-gray-700 hover:bg-gray-600 rounded-lg flex flex-col items-center"> | |
| <i class="fas fa-fist-raised mb-1"></i> | |
| <span class="text-xs">Combat</span> | |
| </button> | |
| <button class="p-2 bg-gray-700 hover:bg-gray-600 rounded-lg flex flex-col items-center"> | |
| <i class="fas fa-magic mb-1"></i> | |
| <span class="text-xs">Magic</span> | |
| </button> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-medium mb-2 text-gray-300">World State</h3> | |
| <div class="bg-gray-900 rounded-lg p-3"> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Time:</span> | |
| <span class="font-mono">08:42 PM</span> | |
| </div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Weather:</span> | |
| <span class="font-mono">Light Rain</span> | |
| </div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Mood:</span> | |
| <span class="font-mono">Tense</span> | |
| </div> | |
| <div class="flex justify-between text-sm"> | |
| <span>Danger:</span> | |
| <span class="font-mono">Moderate</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Center Panel - Game World --> | |
| <div class="lg:col-span-2"> | |
| <div class="game-world rounded-xl p-6 shadow-lg h-full min-h-[500px] relative overflow-hidden"> | |
| <div class="absolute top-4 right-4 flex space-x-2"> | |
| <button class="p-2 bg-gray-800 bg-opacity-70 rounded-full"> | |
| <i class="fas fa-expand"></i> | |
| </button> | |
| <button class="p-2 bg-gray-800 bg-opacity-70 rounded-full"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| </div> | |
| <!-- Scene Description --> | |
| <div class="bg-black bg-opacity-50 rounded-lg p-4 mb-6"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mr-3"> | |
| <div class="w-10 h-10 rounded-full bg-purple-600 flex items-center justify-center"> | |
| <i class="fas fa-robot"></i> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="font-medium text-purple-400 mb-1">GameMaster AI</h3> | |
| <p class="text-gray-200"> | |
| You find yourselves in the dimly lit tavern "The Rusty Tankard." The smell of stale ale and roasted meat fills the air. | |
| A bard plays a melancholy tune in the corner while patrons murmur in hushed tones. | |
| The barkeep eyes your group warily as you enter. What do you do? | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Character Dialog --> | |
| <div class="dialog-box bg-gray-800 bg-opacity-80 rounded-lg p-4 mb-6 w-3/4 ml-12"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mr-3"> | |
| <div class="w-10 h-10 rounded-full bg-red-600 flex items-center justify-center"> | |
| <i class="fas fa-user"></i> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="font-medium text-red-400 mb-1">Barkeep (gruffly)</h3> | |
| <p class="text-gray-200"> | |
| "We don't want no trouble here. If you're looking for work, talk to the hooded figure in the corner. | |
| But mind your manners - he's not one to cross." | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Player Options --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-3 mt-8"> | |
| <button class="bg-gray-800 hover:bg-gray-700 rounded-lg p-3 text-left"> | |
| <span class="font-medium text-blue-400">1.</span> Approach the hooded figure cautiously | |
| </button> | |
| <button class="bg-gray-800 hover:bg-gray-700 rounded-lg p-3 text-left"> | |
| <span class="font-medium text-blue-400">2.</span> Buy drinks for the barkeep to loosen his tongue | |
| </button> | |
| <button class="bg-gray-800 hover:bg-gray-700 rounded-lg p-3 text-left"> | |
| <span class="font-medium text-blue-400">3.</span> Scan the room for potential threats | |
| </button> | |
| <button class="bg-gray-800 hover:bg-gray-700 rounded-lg p-3 text-left"> | |
| <span class="font-medium text-blue-400">4.</span> Ask the bard about recent rumors | |
| </button> | |
| </div> | |
| <!-- AI Thinking Indicator --> | |
| <div id="aiThinking" class="hidden absolute bottom-4 left-4 bg-gray-900 bg-opacity-80 rounded-lg p-3 flex items-center"> | |
| <div class="pulse-animation mr-2"> | |
| <i class="fas fa-brain text-purple-500"></i> | |
| </div> | |
| <span class="text-sm">GameMaster AI is thinking...</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Bottom Panel - Character Info and Log --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mt-6"> | |
| <!-- Character Info --> | |
| <div class="lg:col-span-1 bg-gray-800 rounded-xl p-6 shadow-lg"> | |
| <h2 class="text-xl font-semibold mb-4 flex items-center"> | |
| <i class="fas fa-users mr-2 text-green-400"></i> Player Characters | |
| </h2> | |
| <div class="space-y-4"> | |
| <div class="character-card bg-gray-700 rounded-lg p-4 transition-all duration-300 cursor-pointer"> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 rounded-full bg-blue-900 flex items-center justify-center mr-3"> | |
| <i class="fas fa-shield-alt text-xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-medium">Sir Aldric</h3> | |
| <p class="text-sm text-gray-400">Human Paladin</p> | |
| </div> | |
| </div> | |
| <div class="mt-2 flex justify-between text-xs"> | |
| <span class="px-2 py-1 bg-blue-900 rounded">HP: 32/32</span> | |
| <span class="px-2 py-1 bg-yellow-800 rounded">AC: 18</span> | |
| <span class="px-2 py-1 bg-purple-900 rounded">Lvl: 3</span> | |
| </div> | |
| </div> | |
| <div class="character-card bg-gray-700 rounded-lg p-4 transition-all duration-300 cursor-pointer"> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 rounded-full bg-green-900 flex items-center justify-center mr-3"> | |
| <i class="fas fa-leaf text-xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-medium">Elara</h3> | |
| <p class="text-sm text-gray-400">Elf Ranger</p> | |
| </div> | |
| </div> | |
| <div class="mt-2 flex justify-between text-xs"> | |
| <span class="px-2 py-1 bg-blue-900 rounded">HP: 24/24</span> | |
| <span class="px-2 py-1 bg-yellow-800 rounded">AC: 15</span> | |
| <span class="px-2 py-1 bg-purple-900 rounded">Lvl: 3</span> | |
| </div> | |
| </div> | |
| <div class="character-card bg-gray-700 rounded-lg p-4 transition-all duration-300 cursor-pointer"> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 rounded-full bg-red-900 flex items-center justify-center mr-3"> | |
| <i class="fas fa-fire text-xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-medium">Zorath</h3> | |
| <p class="text-sm text-gray-400">Tiefling Sorcerer</p> | |
| </div> | |
| </div> | |
| <div class="mt-2 flex justify-between text-xs"> | |
| <span class="px-2 py-1 bg-blue-900 rounded">HP: 18/18</span> | |
| <span class="px-2 py-1 bg-yellow-800 rounded">AC: 12</span> | |
| <span class="px-2 py-1 bg-purple-900 rounded">Lvl: 3</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Game Log --> | |
| <div class="lg:col-span-2 bg-gray-800 rounded-xl p-6 shadow-lg"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-semibold flex items-center"> | |
| <i class="fas fa-scroll mr-2 text-yellow-400"></i> Game Log | |
| </h2> | |
| <button class="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded-lg text-sm"> | |
| Clear Log | |
| </button> | |
| </div> | |
| <div class="bg-gray-900 rounded-lg p-4 h-64 overflow-y-auto scrollbar-hide"> | |
| <div class="space-y-3"> | |
| <div class="text-sm text-gray-400"> | |
| <span class="font-mono text-purple-400">[08:30 PM]</span> GameMaster AI: The adventure begins as you enter "The Rusty Tankard" tavern. | |
| </div> | |
| <div class="text-sm text-gray-400"> | |
| <span class="font-mono text-purple-400">[08:32 PM]</span> Sir Aldric: "I'll keep watch near the door while we assess the situation." | |
| </div> | |
| <div class="text-sm text-gray-400"> | |
| <span class="font-mono text-purple-400">[08:33 PM]</span> Elara: "I'll discretely scan the room for any hidden threats." | |
| </div> | |
| <div class="text-sm text-gray-400"> | |
| <span class="font-mono text-purple-400">[08:35 PM]</span> Zorath: "Perhaps the barkeep knows something useful. I'll approach him." | |
| </div> | |
| <div class="text-sm text-gray-400"> | |
| <span class="font-mono text-purple-400">[08:37 PM]</span> GameMaster AI: The barkeep warns you about the hooded figure in the corner. | |
| </div> | |
| <div class="text-sm text-gray-400"> | |
| <span class="font-mono text-purple-400">[08:39 PM]</span> System: Perception check passed - you notice a shady deal happening in the back. | |
| </div> | |
| <div class="text-sm text-gray-400"> | |
| <span class="font-mono text-purple-400">[08:40 PM]</span> GameMaster AI: The bard's song changes to a more ominous tune as you observe the room. | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Player Input --> | |
| <div class="mt-4 relative"> | |
| <input type="text" placeholder="What do you do?" | |
| class="w-full bg-gray-900 border border-gray-700 rounded-lg py-3 px-4 pr-12 focus:outline-none focus:ring-2 focus:ring-purple-600"> | |
| <button class="absolute right-3 top-3 text-purple-500 hover:text-purple-400"> | |
| <i class="fas fa-paper-plane text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Simple interactivity for the demo | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Mode buttons | |
| const storyModeBtn = document.getElementById('storyModeBtn'); | |
| const sandboxModeBtn = document.getElementById('sandboxModeBtn'); | |
| storyModeBtn.addEventListener('click', function() { | |
| storyModeBtn.classList.add('bg-blue-700'); | |
| storyModeBtn.classList.remove('bg-gray-700'); | |
| sandboxModeBtn.classList.add('bg-gray-700'); | |
| sandboxModeBtn.classList.remove('bg-blue-700'); | |
| }); | |
| sandboxModeBtn.addEventListener('click', function() { | |
| sandboxModeBtn.classList.add('bg-blue-700'); | |
| sandboxModeBtn.classList.remove('bg-gray-700'); | |
| storyModeBtn.classList.add('bg-gray-700'); | |
| storyModeBtn.classList.remove('bg-blue-700'); | |
| }); | |
| // Character cards | |
| const characterCards = document.querySelectorAll('.character-card'); | |
| characterCards.forEach(card => { | |
| card.addEventListener('click', function() { | |
| characterCards.forEach(c => c.classList.remove('ring-2', 'ring-blue-500')); | |
| this.classList.add('ring-2', 'ring-blue-500'); | |
| }); | |
| }); | |
| // Player options | |
| const playerOptions = document.querySelectorAll('.game-world button'); | |
| const aiThinking = document.getElementById('aiThinking'); | |
| playerOptions.forEach(option => { | |
| option.addEventListener('click', function() { | |
| aiThinking.classList.remove('hidden'); | |
| // Simulate AI processing | |
| setTimeout(() => { | |
| aiThinking.classList.add('hidden'); | |
| // Add to game log | |
| const gameLog = document.querySelector('.bg-gray-900.rounded-lg'); | |
| const newEntry = document.createElement('div'); | |
| newEntry.className = 'text-sm text-gray-400'; | |
| newEntry.innerHTML = ` | |
| <span class="font-mono text-purple-400">[${getCurrentTime()}]</span> | |
| Player: "${this.textContent.trim().substring(3)}" | |
| `; | |
| gameLog.appendChild(newEntry); | |
| gameLog.scrollTop = gameLog.scrollHeight; | |
| // Simulate AI response after another delay | |
| setTimeout(() => { | |
| const aiResponse = document.createElement('div'); | |
| aiResponse.className = 'text-sm text-gray-400'; | |
| aiResponse.innerHTML = ` | |
| <span | |
| <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=Markush9191/gamemaestro" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |