Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>MicroCreations Editor</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <style> | |
| .tool-btn { | |
| transition: all 0.2s ease; | |
| } | |
| .tool-btn:hover { | |
| transform: scale(1.05); | |
| background-color: #e2e8f0; | |
| } | |
| .draggable { | |
| position: absolute; | |
| cursor: move; | |
| user-select: none; | |
| } | |
| #creationCanvas { | |
| background-color: #f8fafc; | |
| min-height: 400px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100"> | |
| <!-- Editor Navigation --> | |
| <nav class="bg-indigo-600 text-white shadow-lg"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16 items-center"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <i class="fas fa-magic text-2xl mr-2"></i> | |
| <span class="text-xl font-bold">MicroCreations Editor</span> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button id="saveBtn" class="bg-indigo-700 hover:bg-indigo-800 px-4 py-2 rounded-lg text-sm font-medium"> | |
| <i class="fas fa-save mr-2"></i> Save | |
| </button> | |
| <button id="publishBtn" class="bg-white text-indigo-600 hover:bg-gray-100 px-4 py-2 rounded-lg text-sm font-medium"> | |
| <i class="fas fa-share-alt mr-2"></i> Publish | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Editor Main Area --> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6"> | |
| <div class="grid grid-cols-1 lg:grid-cols-4 gap-6"> | |
| <!-- Tools Panel --> | |
| <div class="lg:col-span-1 bg-white rounded-lg shadow-md p-4"> | |
| <h3 class="text-lg font-bold mb-4 text-gray-800">Create Your Mini Game</h3> | |
| <div class="mb-6"> | |
| <h4 class="font-medium mb-2 text-gray-700">Elements</h4> | |
| <div class="grid grid-cols-2 gap-2"> | |
| <button data-type="character" class="tool-btn bg-gray-100 p-3 rounded-lg flex flex-col items-center"> | |
| <i class="fas fa-user text-xl mb-1 text-blue-500"></i> | |
| <span class="text-xs">Character</span> | |
| </button> | |
| <button data-type="enemy" class="tool-btn bg-gray-100 p-3 rounded-lg flex flex-col items-center"> | |
| <i class="fas fa-ghost text-xl mb-1 text-red-500"></i> | |
| <span class="text-xs">Enemy</span> | |
| </button> | |
| <button data-type="platform" class="tool-btn bg-gray-100 p-3 rounded-lg flex flex-col items-center"> | |
| <i class="fas fa-square text-xl mb-1 text-green-500"></i> | |
| <span class="text-xs">Platform</span> | |
| </button> | |
| <button data-type="collectible" class="tool-btn bg-gray-100 p-3 rounded-lg flex flex-col items-center"> | |
| <i class="fas fa-star text-xl mb-1 text-yellow-500"></i> | |
| <span class="text-xs">Collectible</span> | |
| </button> | |
| <button data-type="text" class="tool-btn bg-gray-100 p-3 rounded-lg flex flex-col items-center"> | |
| <i class="fas fa-font text-xl mb-1 text-purple-500"></i> | |
| <span class="text-xs">Text</span> | |
| </button> | |
| <button data-type="background" class="tool-btn bg-gray-100 p-3 rounded-lg flex flex-col items-center"> | |
| <i class="fas fa-image text-xl mb-1 text-pink-500"></i> | |
| <span class="text-xs">Background</span> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h4 class="font-medium mb-2 text-gray-700">Game Logic</h4> | |
| <div class="space-y-2"> | |
| <button class="tool-btn bg-gray-100 p-2 rounded-lg w-full text-left"> | |
| <i class="fas fa-flag mr-2 text-green-500"></i> Win Condition | |
| </button> | |
| <button class="tool-btn bg-gray-100 p-2 rounded-lg w-full text-left"> | |
| <i class="fas fa-heart mr-2 text-red-500"></i> Lives System | |
| </button> | |
| <button class="tool-btn bg-gray-100 p-2 rounded-lg w-full text-left"> | |
| <i class="fas fa-stopwatch mr-2 text-yellow-500"></i> Timer | |
| </button> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-medium mb-2 text-gray-700">AI Assistant</h4> | |
| <button id="aiHelpBtn" class="tool-btn bg-indigo-100 text-indigo-700 p-2 rounded-lg w-full"> | |
| <i class="fas fa-magic mr-2"></i> Get AI Suggestions | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Canvas Area --> | |
| <div class="lg:col-span-3"> | |
| <div class="bg-white rounded-lg shadow-md p-4"> | |
| <div id="creationCanvas" class="border-2 border-dashed border-gray-300 rounded-lg mb-4"> | |
| <!-- Elements will be added here by JavaScript --> | |
| </div> | |
| <div class="flex justify-between"> | |
| <button id="clearBtn" class="bg-gray-200 text-gray-700 hover:bg-gray-300 px-4 py-2 rounded-lg"> | |
| <i class="fas fa-trash-alt mr-2"></i> Clear Canvas | |
| </button> | |
| <div class="flex space-x-2"> | |
| <button id="testBtn" class="bg-blue-100 text-blue-700 hover:bg-blue-200 px-4 py-2 rounded-lg"> | |
| <i class="fas fa-play mr-2"></i> Test Game | |
| </button> | |
| <button id="previewBtn" class="bg-purple-100 text-purple-700 hover:bg-purple-200 px-4 py-2 rounded-lg"> | |
| <i class="fas fa-eye mr-2"></i> Preview | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Game Settings --> | |
| <div class="bg-white rounded-lg shadow-md p-4 mt-4"> | |
| <h3 class="text-lg font-bold mb-4 text-gray-800">Game Settings</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Title</label> | |
| <input type="text" class="w-full border border-gray-300 rounded-lg px-3 py-2"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Category</label> | |
| <select class="w-full border border-gray-300 rounded-lg px-3 py-2"> | |
| <option>Mini Game</option> | |
| <option>Interactive Story</option> | |
| <option>Music Loop</option> | |
| <option>Art Creation</option> | |
| </select> | |
| </div> | |
| <div class="md:col-span-2"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Description</label> | |
| <textarea class="w-full border border-gray-300 rounded-lg px-3 py-2" rows="2"></textarea> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Simple drag and drop functionality for the editor | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const canvas = document.getElementById('creationCanvas'); | |
| const toolButtons = document.querySelectorAll('[data-type]'); | |
| // Add elements to canvas | |
| toolButtons.forEach(button => { | |
| button.addEventListener('click', function() { | |
| const type = this.getAttribute('data-type'); | |
| let element; | |
| switch(type) { | |
| case 'character': | |
| element = createElement('fa-user', 'bg-blue-500', 'Character'); | |
| break; | |
| case 'enemy': | |
| element = createElement('fa-ghost', 'bg-red-500', 'Enemy'); | |
| break; | |
| case 'platform': | |
| element = createElement('fa-square', 'bg-green-500', 'Platform'); | |
| break; | |
| case 'collectible': | |
| element = createElement('fa-star', 'bg-yellow-500', 'Collectible'); | |
| break; | |
| case 'text': | |
| element = document.createElement('div'); | |
| element.className = 'draggable bg-white p-2 rounded border border-gray-300'; | |
| element.textContent = 'Double click to edit'; | |
| element.style.width = '100px'; | |
| element.addEventListener('dblclick', function() { | |
| const newText = prompt('Enter text:', this.textContent); | |
| if (newText) this.textContent = newText; | |
| }); | |
| break; | |
| case 'background': | |
| alert('Background selection would appear here'); | |
| return; | |
| } | |
| // Position randomly on canvas | |
| const maxX = canvas.offsetWidth - 50; | |
| const maxY = canvas.offsetHeight - 50; | |
| const posX = Math.floor(Math.random() * maxX); | |
| const posY = Math.floor(Math.random() * maxY); | |
| element.style.left = posX + 'px'; | |
| element.style.top = posY + 'px'; | |
| canvas.appendChild(element); | |
| makeDraggable(element); | |
| }); | |
| }); | |
| // Clear canvas | |
| document.getElementById('clearBtn').addEventListener('click', function() { | |
| if (confirm('Are you sure you want to clear the canvas?')) { | |
| canvas.innerHTML = ''; | |
| } | |
| }); | |
| // Test game | |
| document.getElementById('testBtn').addEventListener('click', function() { | |
| alert('Game testing would start here'); | |
| }); | |
| // Preview | |
| document.getElementById('previewBtn').addEventListener('click', function() { | |
| alert('Preview mode would start here'); | |
| }); | |
| // Save | |
| document.getElementById('saveBtn').addEventListener('click', function() { | |
| alert('Creation saved to your account'); | |
| }); | |
| // Publish | |
| document.getElementById('publishBtn').addEventListener('click', function() { | |
| const link = 'https://microcreations.app/c/' + Math.random().toString(36).substring(7); | |
| alert(`Your creation is published! Share this link: ${link}`); | |
| }); | |
| // AI Help | |
| document.getElementById('aiHelpBtn').addEventListener('click', function() { | |
| const suggestions = [ | |
| "Try adding more collectibles for higher score", | |
| "Your game needs a win condition", | |
| "Consider adding moving platforms", | |
| "Great start! Add some enemies for challenge" | |
| ]; | |
| const randomSuggestion = suggestions[Math.floor(Math.random() * suggestions.length)]; | |
| alert(`AI Suggestion: ${randomSuggestion}`); | |
| }); | |
| // Helper function to create draggable elements | |
| function createElement(icon, color, label) { | |
| const element = document.createElement('div'); | |
| element.className = `draggable ${color} rounded w-12 h-12 flex items-center justify-center text-white`; | |
| element.innerHTML = `<i class="fas ${icon}"></i>`; | |
| element.setAttribute('title', label); | |
| return element; | |
| } | |
| // Make elements draggable | |
| function makeDraggable(element) { | |
| let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; | |
| element.onmousedown = dragMouseDown; | |
| function dragMouseDown(e) { | |
| e = e || window.event; | |
| e.preventDefault(); | |
| pos3 = e.clientX; | |
| pos4 = e.clientY; | |
| document.onmouseup = closeDragElement; | |
| document.onmousemove = elementDrag; | |
| } | |
| function elementDrag(e) { | |
| e = e || window.event; | |
| e.preventDefault(); | |
| pos1 = pos3 - e.clientX; | |
| pos2 = pos4 - e.clientY; | |
| pos3 = e.clientX; | |
| pos4 = e.clientY; | |
| element.style.top = (element.offsetTop - pos2) + "px"; | |
| element.style.left = (element.offsetLeft - pos1) + "px"; | |
| } | |
| function closeDragElement() { | |
| document.onmouseup = null; | |
| document.onmousemove = null; | |
| } | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |