Spaces:
Running
Running
хорошо, добавь прокрутку в редактор, а то нельзя добраться до некоторых настроек, создай самого персонажа и сделай игровое поле с сеткой после редакторы персонажа с тестовой картой и интерфейсом
3f8b4a4 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>NeuroScape - Simulation</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| 'void-dark': '#0f172a', | |
| 'neural-blue': '#0ea5e9', | |
| 'blood-red': '#7f1d1d', | |
| 'flesh-tan': '#78350f', | |
| 'synapse-glow': '#38bdf8', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .game-grid { | |
| display: grid; | |
| grid-template-columns: repeat(20, 1fr); | |
| grid-template-rows: repeat(15, 1fr); | |
| gap: 1px; | |
| background: #1e293b; | |
| border: 2px solid #334155; | |
| aspect-ratio: 4/3; | |
| } | |
| .grid-cell { | |
| background: #0f172a; | |
| position: relative; | |
| cursor: pointer; | |
| transition: background-color 0.1s; | |
| } | |
| .grid-cell:hover { | |
| background: #1e3a5f; | |
| } | |
| .grid-cell.wall { | |
| background: #334155; | |
| } | |
| .grid-cell.floor { | |
| background: #1e293b; | |
| } | |
| .grid-cell.grass { | |
| background: #1a2e1a; | |
| } | |
| .grid-cell.water { | |
| background: #0c4a6e; | |
| } | |
| .character-sprite { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| width: 80%; | |
| height: 80%; | |
| border-radius: 50%; | |
| background: linear-gradient(135deg, #0ea5e9, #38bdf8); | |
| box-shadow: 0 0 10px rgba(14, 165, 233, 0.5); | |
| animation: character-idle 2s ease-in-out infinite; | |
| z-index: 10; | |
| } | |
| @keyframes character-idle { | |
| 0%, 100% { transform: translate(-50%, -50%) scale(1); } | |
| 50% { transform: translate(-50%, -50%) scale(1.05); } | |
| } | |
| .enemy-sprite { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| width: 70%; | |
| height: 70%; | |
| border-radius: 3px; | |
| background: linear-gradient(135deg, #dc2626, #991b1b); | |
| box-shadow: 0 0 8px rgba(220, 38, 38, 0.5); | |
| } | |
| .item-sprite { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| width: 50%; | |
| height: 50%; | |
| border-radius: 2px; | |
| background: #fbbf24; | |
| box-shadow: 0 0 5px rgba(251, 191, 36, 0.5); | |
| } | |
| .action-btn { | |
| transition: all 0.2s; | |
| } | |
| .action-btn:hover:not(:disabled) { | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3); | |
| } | |
| .action-btn:disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| } | |
| .selected-cell { | |
| box-shadow: inset 0 0 0 2px #0ea5e9; | |
| } | |
| .move-highlight { | |
| background: rgba(14, 165, 233, 0.2) ; | |
| } | |
| .attack-highlight { | |
| background: rgba(220, 38, 38, 0.2) ; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-void-dark text-slate-300 font-sans antialiased h-screen flex flex-col overflow-hidden"> | |
| <site-nav></site-nav> | |
| <div class="flex flex-1 overflow-hidden relative min-h-0"> | |
| <!-- Background Decor --> | |
| <div class="absolute inset-0 z-0 opacity-10 pointer-events-none"> | |
| <div class="absolute top-0 left-0 w-full h-full" style="background-image: radial-gradient(#38bdf8 1px, transparent 1px); background-size: 40px 40px;"></div> | |
| </div> | |
| <!-- Game Area --> | |
| <main class="flex-1 flex flex-col relative z-10 min-h-0 p-4 overflow-hidden"> | |
| <!-- Top Bar --> | |
| <div class="bg-slate-900/90 backdrop-blur border border-slate-700 rounded-xl p-4 mb-4 flex-shrink-0"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-6"> | |
| <!-- Character Portrait --> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-12 h-12 rounded-lg overflow-hidden border border-slate-600"> | |
| <img src="http://static.photos/people/640x800/12" alt="Character" class="object-cover w-full h-full"> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-white" id="game-char-name">Unknown</h3> | |
| <p class="text-xs text-slate-500">Level 1 • <span id="game-char-class">Survivor</span></p> | |
| </div> | |
| </div> | |
| <!-- Health Bar --> | |
| <div class="flex items-center space-x-2"> | |
| <i data-feather="heart" class="w-4 h-4 text-red-400"></i> | |
| <div class="w-32"> | |
| <div class="flex justify-between text-xs mb-1"> | |
| <span class="text-slate-400">Health</span> | |
| <span class="text-white font-mono" id="health-text">100/100</span> | |
| </div> | |
| <div class="w-full bg-slate-700 h-2 rounded-full overflow-hidden"> | |
| <div class="bg-gradient-to-r from-red-600 to-red-400 h-full transition-all duration-300" id="health-bar" style="width: 100%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Sanity Bar --> | |
| <div class="flex items-center space-x-2"> | |
| <i data-feather="brain" class="w-4 h-4 text-purple-400"></i> | |
| <div class="w-32"> | |
| <div class="flex justify-between text-xs mb-1"> | |
| <span class="text-slate-400">Sanity</span> | |
| <span class="text-white font-mono" id="sanity-text">85/100</span> | |
| </div> | |
| <div class="w-full bg-slate-700 h-2 rounded-full overflow-hidden"> | |
| <div class="bg-gradient-to-r from-purple-600 to-purple-400 h-full transition-all duration-300" id="sanity-bar" style="width: 85%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Action Points --> | |
| <div class="flex items-center space-x-2"> | |
| <i data-feather="zap" class="w-4 h-4 text-yellow-400"></i> | |
| <div class="w-24"> | |
| <div class="flex justify-between text-xs mb-1"> | |
| <span class="text-slate-400">AP</span> | |
| <span class="text-white font-mono" id="ap-text">6/6</span> | |
| </div> | |
| <div class="flex space-x-1"> | |
| <div class="ap-dot w-3 h-3 bg-yellow-400 rounded-full"></div> | |
| <div class="ap-dot w-3 h-3 bg-yellow-400 rounded-full"></div> | |
| <div class="ap-dot w-3 h-3 bg-yellow-400 rounded-full"></div> | |
| <div class="ap-dot w-3 h-3 bg-yellow-400 rounded-full"></div> | |
| <div class="ap-dot w-3 h-3 bg-yellow-400 rounded-full"></div> | |
| <div class="ap-dot w-3 h-3 bg-yellow-400 rounded-full"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Turn Info --> | |
| <div class="flex items-center space-x-4"> | |
| <div class="text-center"> | |
| <div class="text-2xl font-bold text-white font-mono" id="turn-counter">1</div> | |
| <div class="text-xs text-slate-500">Turn</div> | |
| </div> | |
| <button id="end-turn-btn" class="bg-emerald-600 hover:bg-emerald-500 text-white px-4 py-2 rounded-lg font-semibold flex items-center space-x-2 transition-all"> | |
| <i data-feather="skip-forward" class="w-4 h-4"></i> | |
| <span>End Turn</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Game Grid Container --> | |
| <div class="flex-1 flex gap-4 min-h-0"> | |
| <!-- Main Game Grid --> | |
| <div class="flex-1 flex items-center justify-center min-h-0"> | |
| <div class="w-full max-w-5xl"> | |
| <div id="game-grid" class="game-grid rounded-lg overflow-hidden"> | |
| <!-- Grid cells will be generated by JS --> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Side Panel --> | |
| <div class="w-72 flex flex-col gap-4 flex-shrink-0"> | |
| <!-- Actions Panel --> | |
| <div class="bg-slate-900/90 backdrop-blur border border-slate-700 rounded-xl p-4 flex-shrink-0"> | |
| <h3 class="text-sm font-bold text-white uppercase mb-3 flex items-center"> | |
| <i data-feather="crosshair" class="w-4 h-4 mr-2 text-neural-blue"></i> | |
| Actions | |
| </h3> | |
| <div class="space-y-2" id="actions-panel"> | |
| <button class="action-btn w-full bg-slate-800 hover:bg-slate-700 border border-slate-600 rounded-lg p-3 text-left flex items-center space-x-3" data-action="move"> | |
| <div class="w-8 h-8 bg-blue-900/50 rounded flex items-center justify-center text-blue-400"> | |
| <i data-feather="move" class="w-4 h-4"></i> | |
| </div> | |
| <div> | |
| <div class="text-sm font-medium text-slate-200">Move</div> | |
| <div class="text-xs text-slate-500">1 AP per tile</div> | |
| </div> | |
| </button> | |
| <button class="action-btn w-full bg-slate-800 hover:bg-slate-700 border border-slate-600 rounded-lg p-3 text-left flex items-center space-x-3" data-action="attack"> | |
| <div class="w-8 h-8 bg-red-900/50 rounded flex items-center justify-center text-red-400"> | |
| <i data-feather="sword" class="w-4 h-4"></i> | |
| </div> | |
| <div> | |
| <div class="text-sm font-medium text-slate-200">Attack</div> | |
| <div class="text-xs text-slate-500">2 AP, Melee</div> | |
| </div> | |
| </button> | |
| <button class="action-btn w-full bg-slate-800 hover:bg-slate-700 border border-slate-600 rounded-lg p-3 text-left flex items-center space-x-3" data-action="wait"> | |
| <div class="w-8 h-8 bg-yellow-900/50 rounded flex items-center justify-center text-yellow-400"> | |
| <i data-feather="clock" class="w-4 h-4"></i> | |
| </div> | |
| <div> | |
| <div class="text-sm font-medium text-slate-200">Wait</div> | |
| <div class="text-xs text-slate-500">Skip action</div> | |
| </div> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Log Panel --> | |
| <div class="bg-slate-900/90 backdrop-blur border border-slate-700 rounded-xl p-4 flex-1 flex flex-col min-h-0"> | |
| <h3 class="text-sm font-bold text-white uppercase mb-3 flex items-center"> | |
| <i data-feather="file-text" class="w-4 h-4 mr-2 text-neural-blue"></i> | |
| Combat Log | |
| </h3> | |
| <div class="flex-1 overflow-y-auto space-y-2 text-sm custom-scrollbar" id="combat-log"> | |
| <div class="text-slate-500 text-xs">[Turn 1] Simulation initiated...</div> | |
| <div class="text-green-400 text-xs">> Character spawned at [10, 7]</div> | |
| </div> | |
| </div> | |
| <!-- Stats Panel --> | |
| <div class="bg-slate-900/90 backdrop-blur border border-slate-700 rounded-xl p-4 flex-shrink-0"> | |
| <h3 class="text-sm font-bold text-white uppercase mb-3 flex items-center"> | |
| <i data-feather="bar-chart-2" class="w-4 h-4 mr-2 text-neural-blue"></i> | |
| Stats | |
| </h3> | |
| <div class="grid grid-cols-2 gap-2 text-xs"> | |
| <div class="bg-slate-800 rounded p-2"> | |
| <div class="text-slate-500">STR</div> | |
| <div class="text-white font-bold" id="stat-str">5</div> | |
| </div> | |
| <div class="bg-slate-800 rounded p-2"> | |
| <div class="text-slate-500">AGI</div> | |
| <div class="text-white font-bold" id="stat-agi">5</div> | |
| </div> | |
| <div class="bg-slate-800 rounded p-2"> | |
| <div class="text-slate-500">TOU</div> | |
| <div class="text-white font-bold" id="stat-tou">5</div> | |
| </div> | |
| <div class="bg-slate-800 rounded p-2"> | |
| <div class="text-slate-500">PER</div> | |
| <div class="text-white font-bold" id="stat-per">5</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <script src="components/navbar.js"></script> | |
| <script src="script.js"></script> | |
| <script src="game.js"></script> | |
| <script>feather.replace();</script> | |
| </body> | |
| </html> |