Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Isekai RPG Adventure</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> | |
| @import url('https://fonts.googleapis.com/css2?family=MedievalSharp&family=Roboto:wght@300;400;500&display=swap'); | |
| :root { | |
| --primary: #4a5568; | |
| --secondary: #2d3748; | |
| --accent: #d69e2e; | |
| --text: #e2e8f0; | |
| --dark: #1a202c; | |
| } | |
| body { | |
| font-family: 'Roboto', sans-serif; | |
| background-color: var(--dark); | |
| color: var(--text); | |
| overflow: hidden; | |
| } | |
| .medieval { | |
| font-family: 'MedievalSharp', cursive; | |
| } | |
| .scrollbar-custom::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| .scrollbar-custom::-webkit-scrollbar-track { | |
| background: #2d3748; | |
| } | |
| .scrollbar-custom::-webkit-scrollbar-thumb { | |
| background: #4a5568; | |
| border-radius: 4px; | |
| } | |
| .scrollbar-custom::-webkit-scrollbar-thumb:hover { | |
| background: #718096; | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.5s ease-in-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| .parchment { | |
| background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%23f7fafc" opacity="0.1"/><path d="M0,0 L100,0 L100,100 L0,100 Z" fill="none" stroke="%23d69e2e" stroke-width="2"/></svg>'); | |
| background-size: 100% 100%; | |
| border: 1px solid #d69e2e; | |
| box-shadow: 0 0 15px rgba(214, 158, 46, 0.3); | |
| } | |
| .health-bar { | |
| background: linear-gradient(to right, #e53e3e, #c53030); | |
| height: 100%; | |
| transition: width 0.3s ease; | |
| } | |
| .mana-bar { | |
| background: linear-gradient(to right, #4299e1, #3182ce); | |
| height: 100%; | |
| transition: width 0.3s ease; | |
| } | |
| .xp-bar { | |
| background: linear-gradient(to right, #48bb78, #38a169); | |
| height: 100%; | |
| transition: width 0.3s ease; | |
| } | |
| .typewriter { | |
| overflow: hidden; | |
| border-right: 2px solid var(--accent); | |
| white-space: pre-wrap; | |
| margin: 0 auto; | |
| letter-spacing: 0.15em; | |
| 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: var(--accent) } | |
| } | |
| .loading-spinner { | |
| border: 3px solid rgba(255, 255, 255, 0.3); | |
| border-radius: 50%; | |
| border-top: 3px solid #d69e2e; | |
| width: 20px; | |
| height: 20px; | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| .notification { | |
| position: fixed; | |
| top: 1rem; | |
| right: 1rem; | |
| padding: 1rem; | |
| background-color: #38a169; | |
| color: white; | |
| border-radius: 0.5rem; | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); | |
| z-index: 50; | |
| animation: slideIn 0.5s forwards, fadeOut 0.5s 2.5s forwards; | |
| } | |
| @keyframes slideIn { | |
| from { transform: translateX(100%); } | |
| to { transform: translateX(0); } | |
| } | |
| @keyframes fadeOut { | |
| from { opacity: 1; } | |
| to { opacity: 0; } | |
| } | |
| .equipped-item { | |
| border: 2px solid #d69e2e; | |
| box-shadow: 0 0 10px rgba(214, 158, 46, 0.5); | |
| } | |
| .skill-progress { | |
| height: 4px; | |
| background-color: #4a5568; | |
| border-radius: 2px; | |
| margin-top: 2px; | |
| } | |
| .skill-progress-bar { | |
| height: 100%; | |
| background-color: #d69e2e; | |
| border-radius: 2px; | |
| transition: width 0.3s ease; | |
| } | |
| /* Button click animation */ | |
| .btn-click { | |
| transition: transform 0.1s ease, background-color 0.3s ease; | |
| } | |
| .btn-click:active { | |
| transform: scale(0.95); | |
| } | |
| /* Disabled button styling */ | |
| button:disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| } | |
| /* Chat message styling */ | |
| .chat-message { | |
| max-width: 80%; | |
| margin-bottom: 1rem; | |
| padding: 0.75rem 1rem; | |
| border-radius: 0.5rem; | |
| word-wrap: break-word; | |
| } | |
| .player-message { | |
| background-color: #2d3748; | |
| border-left: 3px solid #d69e2e; | |
| margin-left: auto; | |
| margin-right: 0; | |
| } | |
| .npc-message { | |
| background-color: #2d3748; | |
| border-left: 3px solid #4299e1; | |
| margin-right: auto; | |
| margin-left: 0; | |
| } | |
| .system-message { | |
| background-color: #2d3748; | |
| border-left: 3px solid #48bb78; | |
| margin-right: auto; | |
| margin-left: 0; | |
| font-style: italic; | |
| } | |
| /* Dropdown menu */ | |
| .dropdown-menu { | |
| position: absolute; | |
| right: 0; | |
| top: 100%; | |
| background-color: #2d3748; | |
| border: 1px solid #4a5568; | |
| border-radius: 0.25rem; | |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); | |
| z-index: 100; | |
| min-width: 150px; | |
| display: none; | |
| } | |
| .dropdown-menu.show { | |
| display: block; | |
| } | |
| .dropdown-item { | |
| padding: 0.5rem 1rem; | |
| color: #e2e8f0; | |
| cursor: pointer; | |
| transition: background-color 0.2s; | |
| } | |
| .dropdown-item:hover { | |
| background-color: #4a5568; | |
| } | |
| .dropdown-divider { | |
| height: 1px; | |
| background-color: #4a5568; | |
| margin: 0.25rem 0; | |
| } | |
| </style> | |
| </head> | |
| <body class="h-screen flex flex-col"> | |
| <!-- Game Header --> | |
| <header class="bg-gray-900 text-yellow-500 p-4 flex justify-between items-center border-b border-yellow-700"> | |
| <div class="flex items-center space-x-4"> | |
| <h1 class="text-2xl font-bold medieval">Isekai RPG Adventure</h1> | |
| </div> | |
| <div class="flex items-center space-x-4 relative"> | |
| <div class="relative"> | |
| <button id="menuBtn" class="text-yellow-400 hover:text-yellow-300 btn-click"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| <div id="menuDropdown" class="dropdown-menu"> | |
| <div class="dropdown-item" id="newGameOption"> | |
| <i class="fas fa-plus mr-2"></i> New Game | |
| </div> | |
| <div class="dropdown-item" id="saveOption"> | |
| <i class="fas fa-save mr-2"></i> Save Game | |
| </div> | |
| <div class="dropdown-item" id="loadOption"> | |
| <i class="fas fa-folder-open mr-2"></i> Load Game | |
| </div> | |
| <div class="dropdown-divider"></div> | |
| <div class="dropdown-item" id="settingsOption"> | |
| <i class="fas fa-cog mr-2"></i> Settings | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Game Container --> | |
| <div class="flex flex-1 overflow-hidden"> | |
| <!-- Left Panel - Character Stats --> | |
| <div class="w-64 bg-gray-800 p-4 flex flex-col border-r border-gray-700"> | |
| <div class="mb-6"> | |
| <h2 class="text-lg font-bold text-yellow-400 mb-2 medieval">Character</h2> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-16 h-16 rounded-full bg-gray-700 border-2 border-yellow-500 flex items-center justify-center"> | |
| <i class="fas fa-user text-3xl text-yellow-400"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="font-bold" id="charName">Sir Aldric</p> | |
| <p class="text-sm text-gray-400" id="charClass">Knight</p> | |
| </div> | |
| </div> | |
| <div class="mb-3"> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Level <span id="charLevel">5</span></span> | |
| <span>XP: <span id="charXP">1200</span>/<span id="charNextLevel">2000</span></span> | |
| </div> | |
| <div class="h-2 bg-gray-700 rounded-full overflow-hidden"> | |
| <div id="xpBar" class="xp-bar" style="width: 60%"></div> | |
| </div> | |
| </div> | |
| <div class="mb-3"> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Health</span> | |
| <span><span id="charHealth">75</span>/<span id="charMaxHealth">100</span></span> | |
| </div> | |
| <div class="h-2 bg-gray-700 rounded-full overflow-hidden"> | |
| <div id="healthBar" class="health-bar" style="width: 75%"></div> | |
| </div> | |
| </div> | |
| <div class="mb-3"> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Mana</span> | |
| <span><span id="charMana">40</span>/<span id="charMaxMana">60</span></span> | |
| </div> | |
| <div class="h-2 bg-gray-700 rounded-full overflow-hidden"> | |
| <div id="manaBar" class="mana-bar" style="width: 66%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h2 class="text-lg font-bold text-yellow-400 mb-2 medieval">Attributes</h2> | |
| <div class="grid grid-cols-2 gap-2 text-sm"> | |
| <div class="bg-gray-700 p-2 rounded"> | |
| <div class="text-yellow-400">Strength</div> | |
| <div id="charStr" class="font-bold">16</div> | |
| </div> | |
| <div class="bg-gray-700 p-2 rounded"> | |
| <div class="text-yellow-400">Dexterity</div> | |
| <div id="charDex" class="font-bold">12</div> | |
| </div> | |
| <div class="bg-gray-700 p-2 rounded"> | |
| <div class="text-yellow-400">Constitution</div> | |
| <div id="charCon" class="font-bold">14</div> | |
| </div> | |
| <div class="bg-gray-700 p-2 rounded"> | |
| <div class="text-yellow-400">Intelligence</div> | |
| <div id="charInt" class="font-bold">10</div> | |
| </div> | |
| <div class="bg-gray-700 p-2 rounded"> | |
| <div class="text-yellow-400">Wisdom</div> | |
| <div id="charWis" class="font-bold">8</div> | |
| </div> | |
| <div class="bg-gray-700 p-2 rounded"> | |
| <div class="text-yellow-400">Charisma</div> | |
| <div id="charCha" class="font-bold">13</div> | |
| </div> | |
| </div> | |
| <div class="mt-2 text-xs text-gray-400" id="statPointsDisplay">Stat Points: 0</div> | |
| </div> | |
| <div class="mb-6"> | |
| <h2 class="text-lg font-bold text-yellow-400 mb-2 medieval">Equipped Items</h2> | |
| <div class="bg-gray-700 rounded p-2 h-24 overflow-y-auto scrollbar-custom"> | |
| <div class="grid grid-cols-3 gap-2" id="equippedItems"> | |
| <div class="bg-gray-600 p-1 rounded text-center"> | |
| <i class="fas fa-question text-gray-400"></i> | |
| <div class="text-xs">None</div> | |
| </div> | |
| <div class="bg-gray-600 p-1 rounded text-center"> | |
| <i class="fas fa-question text-gray-400"></i> | |
| <div class="text-xs">None</div> | |
| </div> | |
| <div class="bg-gray-600 p-1 rounded text-center"> | |
| <i class="fas fa-question text-gray-400"></i> | |
| <div class="text-xs">None</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h2 class="text-lg font-bold text-yellow-400 mb-2 medieval">Inventory</h2> | |
| <div class="bg-gray-700 rounded p-2 h-40 overflow-y-auto scrollbar-custom"> | |
| <div class="grid grid-cols-3 gap-2" id="inventoryItems"> | |
| <!-- Items will be populated here --> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h2 class="text-lg font-bold text-yellow-400 mb-2 medieval">Skills & Abilities</h2> | |
| <div class="bg-gray-700 rounded p-2 h-40 overflow-y-auto scrollbar-custom" id="skillsList"> | |
| <!-- Skills will be populated here --> | |
| </div> | |
| </div> | |
| <div class="mt-auto"> | |
| <h2 class="text-lg font-bold text-yellow-400 mb-2 medieval">Current Location</h2> | |
| <div class="bg-gray-700 rounded p-3"> | |
| <div class="font-bold" id="currentLocation">Tavern</div> | |
| <div class="text-sm text-gray-300" id="locationDesc">The Rusty Tankard</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Center Panel - Game Content --> | |
| <div class="flex-1 flex flex-col"> | |
| <!-- Scene Image --> | |
| <div class="h-1/3 relative"> | |
| <div id="sceneImage" class="absolute inset-0 bg-gray-900 flex items-center justify-center"> | |
| <div class="w-full h-full bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1518709766631-a6a7f45921c3?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');"></div> | |
| <div class="absolute inset-0 bg-black bg-opacity-40"></div> | |
| </div> | |
| </div> | |
| <!-- Chat Log --> | |
| <div id="chatLog" class="flex-1 p-4 overflow-y-auto scrollbar-custom"> | |
| <div class="chat-message system-message"> | |
| Welcome to the world of Eldoria. Your adventure begins now. | |
| </div> | |
| <div class="chat-message npc-message"> | |
| <div class="font-bold text-blue-400 medieval">Old Man:</div> | |
| Welcome, traveler, to the Rusty Tankard. What brings you to our humble establishment this fine evening? | |
| </div> | |
| </div> | |
| <!-- Chat Input --> | |
| <div class="p-4 border-t border-gray-700"> | |
| <div class="flex"> | |
| <input type="text" id="chatInput" placeholder="What will you do or say?" class="flex-1 bg-gray-700 border border-yellow-700 rounded-l px-4 py-2 text-white focus:outline-none focus:ring-1 focus:ring-yellow-500"> | |
| <button id="chatSubmit" class="bg-yellow-600 hover:bg-yellow-700 text-white px-4 py-2 rounded-r medieval flex items-center justify-center min-w-[100px] btn-click"> | |
| <span id="submitText">Send</span> | |
| <div id="submitSpinner" class="loading-spinner ml-2 hidden"></div> | |
| </button> | |
| </div> | |
| <div class="mt-2 text-xs text-gray-400"> | |
| Examples: "I ask the old man about work", "I draw my sword", "I look around the tavern" | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Panel - Game Log and Map --> | |
| <div class="w-64 bg-gray-800 p-4 flex flex-col border-l border-gray-700"> | |
| <div class="mb-6"> | |
| <h2 class="text-lg font-bold text-yellow-400 mb-2 medieval">Game Log</h2> | |
| <div id="gameLog" class="bg-gray-700 rounded p-2 h-40 overflow-y-auto text-sm scrollbar-custom"> | |
| <div class="text-green-400">> Entered the Rusty Tankard</div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h2 class="text-lg font-bold text-yellow-400 mb-2 medieval">Mini Map</h2> | |
| <div class="bg-gray-700 rounded p-3"> | |
| <div class="grid grid-cols-5 gap-1" id="miniMapGrid"> | |
| <!-- Map cells will be populated here --> | |
| </div> | |
| </div> | |
| <div class="mt-2 text-sm"> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 bg-yellow-600 mr-2"></div> | |
| <span>Your position</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 bg-gray-500 mr-2"></div> | |
| <span>Unexplored</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 bg-blue-500 mr-2"></div> | |
| <span>Points of interest</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-auto"> | |
| <h2 class="text-lg font-bold text-yellow-400 mb-2 medieval">Quest Log</h2> | |
| <div id="questLog" class="bg-gray-700 rounded p-3 h-40 overflow-y-auto scrollbar-custom"> | |
| <!-- Quests will be populated here --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- New Game Modal --> | |
| <div id="newGameModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50"> | |
| <div class="bg-gray-800 rounded-lg w-full max-w-md border border-yellow-700"> | |
| <div class="p-4 border-b border-gray-700 flex justify-between items-center"> | |
| <h3 class="text-xl font-bold text-yellow-400 medieval">Create New Character</h3> | |
| <button id="closeNewGame" class="text-gray-400 hover:text-white btn-click"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="p-6"> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-gray-300 mb-1">Character Name</label> | |
| <input type="text" id="newCharName" class="w-full bg-gray-800 border border-gray-600 rounded px-3 py-2 text-white" placeholder="Enter your name"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-300 mb-1">Class/Role</label> | |
| <input type="text" id="newCharClass" class="w-full bg-gray-800 border border-gray-600 rounded px-3 py-2 text-white" placeholder="e.g. Slime Sage, Cyber Samurai"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-300 mb-1">World Setting</label> | |
| <input type="text" id="newWorldSetting" class="w-full bg-gray-800 border border-gray-600 rounded px-3 py-2 text-white" placeholder="e.g. Medieval Fantasy, Cyberpunk"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-300 mb-1">Time Period</label> | |
| <input type="text" id="newTimePeriod" class="w-full bg-gray-800 border border-gray-600 rounded px-3 py-2 text-white" placeholder="e.g. Year 1200, Future 3000"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-300 mb-1">Starting Stats</label> | |
| <div class="grid grid-cols-3 gap-2 text-sm"> | |
| <div class="bg-gray-700 p-2 rounded"> | |
| <div class="text-yellow-400">STR</div> | |
| <input type="number" id="newCharStr" class="w-full bg-gray-800 border border-gray-600 rounded px-1 py-1 text-white text-center" value="10" min="1" max="20"> | |
| </div> | |
| <div class="bg-gray-700 p-2 rounded"> | |
| <div class="text-yellow-400">DEX</div> | |
| <input type="number" id="newCharDex" class="w-full bg-gray-800 border border-gray-600 rounded px-1 py-1 text-white text-center" value="10" min="1" max="20"> | |
| </div> | |
| <div class="bg-gray-700 p-2 rounded"> | |
| <div class="text-yellow-400">CON</div> | |
| <input type="number" id="newCharCon" class="w-full bg-gray-800 border border-gray-600 rounded px-1 py-1 text-white text-center" value="10" min="1" max="20"> | |
| </div> | |
| <div class="bg-gray-700 p-2 rounded"> | |
| <div class="text-yellow-400">INT</div> | |
| <input type="number" id="newCharInt" class="w-full bg-gray-800 border border-gray-600 rounded px-1 py-1 text-white text-center" value="10" min="1" max="20"> | |
| </div> | |
| <div class="bg-gray-700 p-2 rounded"> | |
| <div class="text-yellow-400">WIS</div> | |
| <input type="number" id="newCharWis" class="w-full bg-gray-800 border border-gray-600 rounded px-1 py-1 text-white text-center" value="10" min="1" max="20"> | |
| </div> | |
| <div class="bg-gray-700 p-2 rounded"> | |
| <div class="text-yellow-400">CHA</div> | |
| <input type="number" id="newCharCha" class="w-full bg-gray-800 border border-gray-600 rounded px-1 py-1 text-white text-center" value="10" min="1" max="20"> | |
| </div> | |
| </div> | |
| <div class="mt-2 text-xs text-gray-400">Total points used: <span id="statPointsUsed">60</span>/60</div> | |
| </div> | |
| </div> | |
| <div class="flex justify-end space-x-3 mt-6"> | |
| <button id="startNewGame" class="bg-yellow-600 hover:bg-yellow-700 text-white px-4 py-2 rounded medieval btn-click">Begin Adventure</button> | |
| <button id="cancelNewGame" class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded medieval btn-click">Cancel</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Settings Modal --> | |
| <div id="settingsModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50"> | |
| <div class="bg-gray-800 rounded-lg w-full max-w-2xl border border-yellow-700"> | |
| <div class="p-4 border-b border-gray-700 flex justify-between items-center"> | |
| <h3 class="text-xl font-bold text-yellow-400 medieval">Game Settings</h3> | |
| <button id="closeSettings" class="text-gray-400 hover:text-white btn-click"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="p-6"> | |
| <div class="mb-6"> | |
| <h4 class="text-lg font-bold text-yellow-400 mb-3 medieval">AI Configuration</h4> | |
| <div class="space-y-4"> | |
| <!-- Story Teller Configuration --> | |
| <div class="bg-gray-700 p-4 rounded border border-gray-600"> | |
| <h5 class="font-bold text-yellow-300 mb-2">Story Teller Model</h5> | |
| <div class="space-y-2"> | |
| <div> | |
| <label class="block text-gray-300 mb-1">API Key</label> | |
| <input type="text" id="storyTellerApiKey" class="w-full bg-gray-800 border border-gray-600 rounded px-3 py-2 text-white" placeholder="Enter API key"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-300 mb-1">URL/IP</label> | |
| <input type="text" id="storyTellerUrl" class="w-full bg-gray-800 border border-gray-600 rounded px-3 py-2 text-white" placeholder="http://localhost:5000/story"> | |
| </div> | |
| <button id="testStoryTeller" class="mt-2 bg-gray-600 hover:bg-gray-500 text-white px-3 py-1 rounded text-sm medieval btn-click"> | |
| Test Connection | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Mechanics Configuration --> | |
| <div class="bg-gray-700 p-4 rounded border border-gray-600"> | |
| <h5 class="font-bold text-yellow-300 mb-2">Mechanics Model</h5> | |
| <div class="space-y-2"> | |
| <div> | |
| <label class="block text-gray-300 mb-1">API Key</label> | |
| <input type="text" id="mechanicsApiKey" class="w-full bg-gray-800 border border-gray-600 rounded px-3 py-2 text-white" placeholder="Enter API key"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-300 mb-1">URL/IP</label> | |
| <input type="text" id="mechanicsUrl" class="w-full bg-gray-800 border border-gray-600 rounded px-3 py-2 text-white" placeholder="http://localhost:5001/mechanics"> | |
| </div> | |
| <button id="testMechanics" class="mt-2 bg-gray-600 hover:bg-gray-500 text-white px-3 py-1 rounded text-sm medieval btn-click"> | |
| Test Connection | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h4 class="text-lg font-bold text-yellow-400 mb-3 medieval">Gameplay Settings</h4> | |
| <div class="space-y-3"> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="autoSave" class="mr-2" checked> | |
| <label for="autoSave" class="text-gray-300">Enable Auto-Save</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="typewriterEffect" class="mr-2" checked> | |
| <label for="typewriterEffect" class="text-gray-300">Typewriter Text Effect</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="showImages" class="mr-2" checked> | |
| <label for="showImages" class="text-gray-300">Show Scene Images</label> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-end space-x-3"> | |
| <button id="saveSettings" class="bg-yellow-600 hover:bg-yellow-700 text-white px-4 py-2 rounded medieval btn-click">Save Settings</button> | |
| <button id="cancelSettings" class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded medieval btn-click">Cancel</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Save/Load Modal --> | |
| <div id="saveLoadModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50"> | |
| <div class="bg-gray-800 rounded-lg w-full max-w-md border border-yellow-700"> | |
| <div class="p-4 border-b border-gray-700 flex justify-between items-center"> | |
| <h3 id="modalTitle" class="text-xl font-bold text-yellow-400 medieval">Save Game</h3> | |
| <button id="closeSaveLoad" class="text-gray-400 hover:text-white btn-click"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="p-6"> | |
| <div class="space-y-3 mb-6" id="saveSlots"> | |
| <!-- Save slots will be populated here --> | |
| </div> | |
| <div class="flex justify-end space-x-3"> | |
| <button id="confirmSaveLoad" class="bg-yellow-600 hover:bg-yellow-700 text-white px-4 py-2 rounded medieval btn-click">Confirm</button> | |
| <button id="cancelSaveLoad" class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded medieval btn-click">Cancel</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Skill Notification --> | |
| <div id="skillNotification" class="notification hidden"></div> | |
| <script> | |
| // Game State Management | |
| const gameState = { | |
| character: { | |
| name: 'Sir Aldric', | |
| class: 'Knight', | |
| level: 5, | |
| xp: 1200, | |
| nextLevel: 2000, | |
| health: 75, | |
| maxHealth: 100, | |
| mana: 40, | |
| maxMana: 60, | |
| str: 16, | |
| dex: 12, | |
| con: 14, | |
| int: 10, | |
| wis: 8, | |
| cha: 13, | |
| statPoints: 0, | |
| baseStats: { | |
| str: 10, | |
| dex: 10, | |
| con: 10, | |
| int: 10, | |
| wis: 10, | |
| cha: 10 | |
| } | |
| }, | |
| equipped: { | |
| weapon: null, | |
| armor: null, | |
| accessory: null | |
| }, | |
| location: { | |
| name: 'Tavern', | |
| description: 'The Rusty Tankard', | |
| x: 2, | |
| y: 2 | |
| }, | |
| inventory: [ | |
| { name: "Longsword", type: "weapon", equipped: false, effect: { str: 3 }, icon: "fa-sword" }, | |
| { name: "Shield", type: "armor", equipped: false, effect: { con: 2 }, icon: "fa-shield-alt" }, | |
| { name: "Health Potion", type: "consumable", quantity: 3, effect: { heal: 20 }, icon: "fa-flask" }, | |
| { name: "Ring of Wisdom", type: "accessory", equipped: false, effect: { wis: 2 }, icon: "fa-ring" }, | |
| { name: "Scroll of Fireball", type: "consumable", quantity: 1, effect: { damage: 30 }, icon: "fa-scroll" }, | |
| { name: "50 Gold", type: "currency", quantity: 50, icon: "fa-coins" } | |
| ], | |
| skills: [ | |
| { name: "Sword Mastery", level: 2, xp: 45, nextLevel: 100, description: "Increased proficiency with swords", effect: { str: 1 } }, | |
| { name: "Shield Block", level: 1, xp: 20, nextLevel: 100, description: "Improved defense with shields", effect: { con: 1 } } | |
| ], | |
| abilities: [ | |
| { name: "Power Strike", description: "Deliver a powerful sword attack", requirements: [{ skill: "Sword Mastery", level: 2 }] } | |
| ], | |
| quests: [ | |
| { | |
| title: 'The Bandit Threat', | |
| description: 'The tavern keeper mentioned bandits attacking travelers on the north road. Investigate and deal with the threat.', | |
| status: 'active' | |
| }, | |
| { | |
| title: 'The Missing Heirloom', | |
| description: 'A distressed woman lost her family ring somewhere in the tavern. Help her find it.', | |
| status: 'active' | |
| } | |
| ], | |
| worldMap: [], | |
| gameLog: ["> Entered the Rusty Tankard"], | |
| settings: { | |
| autoSave: true, | |
| typewriterEffect: true, | |
| showImages: true | |
| } | |
| }; | |
| // AI Configuration | |
| let aiConfig = { | |
| storyTeller: { apiKey: "", url: "http://localhost:5000/story" }, | |
| mechanics: { apiKey: "", url: "http://localhost:5001/mechanics" } | |
| }; | |
| // Load saved AI config from localStorage if available | |
| try { | |
| const savedConfig = localStorage.getItem('aiConfig'); | |
| if (savedConfig) { | |
| aiConfig = JSON.parse(savedConfig); | |
| console.log('Loaded AI config from localStorage'); | |
| } | |
| } catch (error) { | |
| console.error('Error loading AI config:', error); | |
| } | |
| // DOM Elements | |
| const menuBtn = document.getElementById('menuBtn'); | |
| const menuDropdown = document.getElementById('menuDropdown'); | |
| const newGameOption = document.getElementById('newGameOption'); | |
| const saveOption = document.getElementById('saveOption'); | |
| const loadOption = document.getElementById('loadOption'); | |
| const settingsOption = document.getElementById('settingsOption'); | |
| const settingsModal = document.getElementById('settingsModal'); | |
| const closeSettings = document.getElementById('closeSettings'); | |
| const newGameModal = document.getElementById('newGameModal'); | |
| const closeNewGame = document.getElementById('closeNewGame'); | |
| const startNewGame = document.getElementById('startNewGame'); | |
| const cancelNewGame = document.getElementById('cancelNewGame'); | |
| const saveLoadModal = document.getElementById('saveLoadModal'); | |
| const closeSaveLoad = document.getElementById('closeSaveLoad'); | |
| const modalTitle = document.getElementById('modalTitle'); | |
| const confirmSaveLoad = document.getElementById('confirmSaveLoad'); | |
| const cancelSaveLoad = document.getElementById('cancelSaveLoad'); | |
| const chatInput = document.getElementById('chatInput'); | |
| const chatSubmit = document.getElementById('chatSubmit'); | |
| const submitText = document.getElementById('submitText'); | |
| const submitSpinner = document.getElementById('submitSpinner'); | |
| const chatLog = document.getElementById('chatLog'); | |
| const sceneImage = document.getElementById('sceneImage'); | |
| const gameLog = document.getElementById('gameLog'); | |
| const questLog = document.getElementById('questLog'); | |
| const inventoryItems = document.getElementById('inventoryItems'); | |
| const equippedItems = document.getElementById('equippedItems'); | |
| const skillsList = document.getElementById('skillsList'); | |
| const miniMapGrid = document.getElementById('miniMapGrid'); | |
| const statPointsDisplay = document.getElementById('statPointsDisplay'); | |
| const skillNotification = document.getElementById('skillNotification'); | |
| // New Game Modal elements | |
| const newCharName = document.getElementById('newCharName'); | |
| const newCharClass = document.getElementById('newCharClass'); | |
| const newWorldSetting = document.getElementById('newWorldSetting'); | |
| const newTimePeriod = document.getElementById('newTimePeriod'); | |
| const newCharStr = document.getElementById('newCharStr'); | |
| const newCharDex = document.getElementById('newCharDex'); | |
| const newCharCon = document.getElementById('newCharCon'); | |
| const newCharInt = document.getElementById('newCharInt'); | |
| const newCharWis = document.getElementById('newCharWis'); | |
| const newCharCha = document.getElementById('newCharCha'); | |
| const statPointsUsed = document.getElementById('statPointsUsed'); | |
| // Settings modal elements | |
| const storyTellerApiKey = document.getElementById('storyTellerApiKey'); | |
| const storyTellerUrl = document.getElementById('storyTellerUrl'); | |
| const mechanicsApiKey = document.getElementById('mechanicsApiKey'); | |
| const mechanicsUrl = document.getElementById('mechanicsUrl'); | |
| const testStoryTeller = document.getElementById('testStoryTeller'); | |
| const testMechanics = document.getElementById('testMechanics'); | |
| const saveSettings = document.getElementById('saveSettings'); | |
| const cancelSettings = document.getElementById('cancelSettings'); | |
| const autoSave = document.getElementById('autoSave'); | |
| const typewriterEffect = document.getElementById('typewriterEffect'); | |
| const showImages = document.getElementById('showImages'); | |
| // Save/Load modal elements | |
| const saveSlots = document.getElementById('saveSlots'); | |
| // Initialize world map with default values | |
| function initWorldMap() { | |
| gameState.worldMap = []; | |
| for (let y = 0; y < 5; y++) { | |
| gameState.worldMap[y] = []; | |
| for (let x = 0; x < 5; x++) { | |
| gameState.worldMap[y][x] = { | |
| explored: false, | |
| name: '', | |
| description: '', | |
| type: '' | |
| }; | |
| } | |
| } | |
| // Set starting location | |
| gameState.worldMap[2][2] = { | |
| explored: true, | |
| name: 'Tavern', | |
| description: 'The Rusty Tankard', | |
| type: 'building' | |
| }; | |
| } | |
| // Initialize game state and UI | |
| function initGame() { | |
| // Initialize world map | |
| initWorldMap(); | |
| // Update all UI displays | |
| updateCharacterDisplay(); | |
| updateInventory(); | |
| updateEquippedItems(); | |
| updateSkillsList(); | |
| updateGameLog(); | |
| updateQuestLog(); | |
| updateMiniMap(); | |
| updateSaveSlots(); | |
| } | |
| // Toggle modal visibility | |
| function toggleModal(modal) { | |
| if (!modal) { | |
| console.error('Modal element not found'); | |
| return; | |
| } | |
| modal.classList.toggle('hidden'); | |
| } | |
| // Open settings modal and load current settings | |
| function openSettingsModal() { | |
| console.log('Opening settings modal'); | |
| // Load current config into settings modal | |
| if (storyTellerApiKey) storyTellerApiKey.value = aiConfig.storyTeller.apiKey; | |
| if (storyTellerUrl) storyTellerUrl.value = aiConfig.storyTeller.url; | |
| if (mechanicsApiKey) mechanicsApiKey.value = aiConfig.mechanics.apiKey; | |
| if (mechanicsUrl) mechanicsUrl.value = aiConfig.mechanics.url; | |
| // Load game settings | |
| if (autoSave) autoSave.checked = gameState.settings.autoSave; | |
| if (typewriterEffect) typewriterEffect.checked = gameState.settings.typewriterEffect; | |
| if (showImages) showImages.checked = gameState.settings.showImages; | |
| toggleModal(settingsModal); | |
| } | |
| // Open save modal | |
| function openSaveModal() { | |
| console.log('Opening save modal'); | |
| if (!modalTitle || !saveLoadModal) return; | |
| modalTitle.textContent = 'Save Game'; | |
| updateSaveSlots(); | |
| toggleModal(saveLoadModal); | |
| } | |
| // Open load modal | |
| function openLoadModal() { | |
| console.log('Opening load modal'); | |
| if (!modalTitle || !saveLoadModal) return; | |
| modalTitle.textContent = 'Load Game'; | |
| updateSaveSlots(); | |
| toggleModal(saveLoadModal); | |
| } | |
| // Handle save/load confirmation based on current modal mode | |
| function handleSaveLoadConfirm() { | |
| if (!modalTitle || !saveLoadModal) return; | |
| if (modalTitle.textContent === 'Save Game') { | |
| saveGame(); | |
| } else { | |
| loadGame(); | |
| } | |
| toggleModal(saveLoadModal); | |
| } | |
| // Update character stats display | |
| function updateCharacterDisplay() { | |
| const char = gameState.character; | |
| // Update text content | |
| if (document.getElementById('charName')) document.getElementById('charName').textContent = char.name; | |
| if (document.getElementById('charClass')) document.getElementById('charClass').textContent = char.class; | |
| if (document.getElementById('charLevel')) document.getElementById('charLevel').textContent = char.level; | |
| if (document.getElementById('charXP')) document.getElementById('charXP').textContent = char.xp; | |
| if (document.getElementById('charNextLevel')) document.getElementById('charNextLevel').textContent = char.nextLevel; | |
| if (document.getElementById('charHealth')) document.getElementById('charHealth').textContent = char.health; | |
| if (document.getElementById('charMaxHealth')) document.getElementById('charMaxHealth').textContent = char.maxHealth; | |
| if (document.getElementById('charMana')) document.getElementById('charMana').textContent = char.mana; | |
| if (document.getElementById('charMaxMana')) document.getElementById('charMaxMana').textContent = char.maxMana; | |
| if (document.getElementById('charStr')) document.getElementById('charStr').textContent = char.str; | |
| if (document.getElementById('charDex')) document.getElementById('charDex').textContent = char.dex; | |
| if (document.getElementById('charCon')) document.getElementById('charCon').textContent = char.con; | |
| if (document.getElementById('charInt')) document.getElementById('charInt').textContent = char.int; | |
| if (document.getElementById('charWis')) document.getElementById('charWis').textContent = char.wis; | |
| if (document.getElementById('charCha')) document.getElementById('charCha').textContent = char.cha; | |
| if (statPointsDisplay) statPointsDisplay.textContent = `Stat Points: ${char.statPoints}`; | |
| // Update progress bars | |
| if (document.getElementById('healthBar')) document.getElementById('healthBar').style.width = `${(char.health / char.maxHealth) * 100}%`; | |
| if (document.getElementById('manaBar')) document.getElementById('manaBar').style.width = `${(char.mana / char.maxMana) * 100}%`; | |
| if (document.getElementById('xpBar')) document.getElementById('xpBar').style.width = `${(char.xp / char.nextLevel) * 100}%`; | |
| // Update location | |
| if (document.getElementById('currentLocation')) document.getElementById('currentLocation').textContent = gameState.location.name; | |
| if (document.getElementById('locationDesc')) document.getElementById('locationDesc').textContent = gameState.location.description; | |
| } | |
| // Update inventory display | |
| function updateInventory() { | |
| if (!inventoryItems) return; | |
| inventoryItems.innerHTML = ''; | |
| gameState.inventory.forEach(item => { | |
| const itemElement = document.createElement('div'); | |
| itemElement.className = 'bg-gray-600 p-1 rounded text-center cursor-pointer hover:bg-gray-500 transition'; | |
| // Add equipped class if item is equipped | |
| if (item.equipped) { | |
| itemElement.classList.add('equipped-item'); | |
| } | |
| itemElement.innerHTML = ` | |
| <i class="fas ${item.icon} ${item.type === 'currency' ? 'text-yellow-400' : 'text-gray-300'}"></i> | |
| <div class="text-xs mt-1">${item.name}${item.quantity > 1 ? ` (${item.quantity})` : ''}</div> | |
| `; | |
| // Add click handler for item actions | |
| itemElement.addEventListener('click', () => showItemActions(item)); | |
| inventoryItems.appendChild(itemElement); | |
| }); | |
| } | |
| // Show item actions menu | |
| function showItemActions(item) { | |
| // Create a simple popup menu | |
| const menu = document.createElement('div'); | |
| menu.className = 'absolute bg-gray-800 border border-yellow-700 rounded shadow-lg p-2 z-50'; | |
| menu.style.minWidth = '150px'; | |
| // Position near the clicked item | |
| const rect = event.target.getBoundingClientRect(); | |
| menu.style.left = `${rect.left}px`; | |
| menu.style.top = `${rect.bottom}px`; | |
| // Add menu items based on item type | |
| if (['weapon', 'armor', 'accessory'].includes(item.type)) { | |
| const equipText = item.equipped ? 'Unequip' : 'Equip'; | |
| const equipBtn = document.createElement('button'); | |
| equipBtn.className = 'w-full text-left px-2 py-1 hover:bg-gray-700 rounded'; | |
| equipBtn.textContent = equipText; | |
| equipBtn.addEventListener('click', () => { | |
| toggleEquipItem(item); | |
| document.body.removeChild(menu); | |
| }); | |
| menu.appendChild(equipBtn); | |
| } | |
| if (item.type === 'consumable') { | |
| const useBtn = document.createElement('button'); | |
| useBtn.className = 'w-full text-left px-2 py-1 hover:bg-gray-700 rounded'; | |
| useBtn.textContent = 'Use'; | |
| useBtn.addEventListener('click', () => { | |
| useItem(item); | |
| document.body.removeChild(menu); | |
| }); | |
| menu.appendChild(useBtn); | |
| } | |
| const cancelBtn = document.createElement('button'); | |
| cancelBtn.className = 'w-full text-left px-2 py-1 hover:bg-gray-700 rounded'; | |
| cancelBtn.textContent = 'Cancel'; | |
| cancelBtn.addEventListener('click', () => { | |
| document.body.removeChild(menu); | |
| }); | |
| menu.appendChild(cancelBtn); | |
| // Add menu to body | |
| document.body.appendChild(menu); | |
| // Close menu when clicking elsewhere | |
| const closeMenu = (e) => { | |
| if (!menu.contains(e.target)) { | |
| document.body.removeChild(menu); | |
| document.removeEventListener('click', closeMenu); | |
| } | |
| }; | |
| document.addEventListener('click', closeMenu); | |
| } | |
| // Toggle item equip/unequip | |
| function toggleEquipItem(item) { | |
| if (!item) return; | |
| if (item.equipped) { | |
| // Unequip the item | |
| item.equipped = false; | |
| gameState.equipped[item.type] = null; | |
| addToGameLog(`> Unequipped ${item.name}`); | |
| } else { | |
| // Equip the item | |
| // First unequip any currently equipped item of this type | |
| if (gameState.equipped[item.type]) { | |
| const currentEquipped = gameState.inventory.find(i => i.name === gameState.equipped[item.type]); | |
| if (currentEquipped) { | |
| currentEquipped.equipped = false; | |
| } | |
| } | |
| item.equipped = true; | |
| gameState.equipped[item.type] = item.name; | |
| addToGameLog(`> Equipped ${item.name}`); | |
| } | |
| // Update displays | |
| updateInventory(); | |
| updateEquippedItems(); | |
| updateCharacterDisplay(); | |
| } | |
| // Use a consumable item | |
| async function useItem(item) { | |
| if (!item || item.type !== 'consumable') { | |
| addToGameLog(`> Cannot use ${item?.name || 'item'} - not a consumable`); | |
| return; | |
| } | |
| // Process item effect | |
| const result = await calculateMechanics('useItem', item); | |
| // Reduce quantity or remove if last one | |
| if (item.quantity > 1) { | |
| item.quantity--; | |
| } else { | |
| const index = gameState.inventory.indexOf(item); | |
| if (index > -1) { | |
| gameState.inventory.splice(index, 1); | |
| } | |
| } | |
| // Update displays | |
| updateInventory(); | |
| updateCharacterDisplay(); | |
| addToGameLog(`> Used ${item.name}. ${result}`); | |
| // Auto-save if enabled | |
| if (gameState.settings.autoSave) { | |
| saveGame(); | |
| } | |
| } | |
| // Update equipped items display | |
| function updateEquippedItems() { | |
| if (!equippedItems) return; | |
| equippedItems.innerHTML = ''; | |
| // Create slots for each equipment type | |
| const equipmentTypes = ['weapon', 'armor', 'accessory']; | |
| equipmentTypes.forEach(type => { | |
| const slot = document.createElement('div'); | |
| slot.className = 'bg-gray-600 p-1 rounded text-center'; | |
| const equippedItem = gameState.inventory.find(item => | |
| item.equipped && item.type === type | |
| ); | |
| if (equippedItem) { | |
| slot.innerHTML = ` | |
| <i class="fas ${equippedItem.icon} text-yellow-400"></i> | |
| <div class="text-xs mt-1">${equippedItem.name}</div> | |
| `; | |
| slot.classList.add('equipped-item'); | |
| } else { | |
| slot.innerHTML = ` | |
| <i class="fas fa-question text-gray-400"></i> | |
| <div class="text-xs">None</div> | |
| `; | |
| } | |
| equippedItems.appendChild(slot); | |
| }); | |
| } | |
| // Update skills list display | |
| function updateSkillsList() { | |
| if (!skillsList) return; | |
| skillsList.innerHTML = ''; | |
| gameState.skills.forEach(skill => { | |
| const skillElement = document.createElement('div'); | |
| skillElement.className = 'mb-2 p-2 bg-gray-800 rounded'; | |
| skillElement.innerHTML = ` | |
| <div class="flex justify-between items-center"> | |
| <span class="font-medium">${skill.name} (Lvl ${skill.level})</span> | |
| <span class="text-xs text-gray-400">${skill.xp}/${skill.nextLevel} XP</span> | |
| </div> | |
| <div class="text-xs text-gray-300 mb-1">${skill.description}</div> | |
| <div class="skill-progress"> | |
| <div class="skill-progress-bar" style="width: ${(skill.xp / skill.nextLevel) * 100}%"></div> | |
| </div> | |
| `; | |
| skillsList.appendChild(skillElement); | |
| }); | |
| } | |
| // Update game log display | |
| function updateGameLog() { | |
| if (!gameLog) return; | |
| gameLog.innerHTML = ''; | |
| gameState.gameLog.forEach(logEntry => { | |
| const entry = document.createElement('div'); | |
| entry.className = 'text-green-400'; | |
| entry.textContent = logEntry; | |
| gameLog.appendChild(entry); | |
| }); | |
| // Scroll to bottom | |
| gameLog.scrollTop = gameLog.scrollHeight; | |
| } | |
| // Add entry to game log | |
| function addToGameLog(text) { | |
| if (!text) return; | |
| gameState.gameLog.push(text); | |
| updateGameLog(); | |
| } | |
| // Update quest log display | |
| function updateQuestLog() { | |
| if (!questLog) return; | |
| questLog.innerHTML = ''; | |
| gameState.quests.forEach(quest => { | |
| const questElement = document.createElement('div'); | |
| questElement.className = 'mb-3 p-2 bg-gray-800 rounded'; | |
| questElement.innerHTML = ` | |
| <div class="font-bold text-yellow-400">${quest.title}</div> | |
| <div class="text-sm text-gray-300">${quest.description}</div> | |
| <div class="text-xs text-right mt-1 ${quest.status === 'completed' ? 'text-green-400' : 'text-yellow-400'}"> | |
| ${quest.status} | |
| </div> | |
| `; | |
| questLog.appendChild(questElement); | |
| }); | |
| } | |
| // Update mini map display | |
| function updateMiniMap() { | |
| if (!miniMapGrid) return; | |
| miniMapGrid.innerHTML = ''; | |
| for (let y = 0; y < 5; y++) { | |
| for (let x = 0; x < 5; x++) { | |
| const cell = document.createElement('div'); | |
| cell.className = 'aspect-square rounded-sm'; | |
| // Set cell color based on exploration and player position | |
| if (x === gameState.location.x && y === gameState.location.y) { | |
| cell.classList.add('bg-yellow-600'); | |
| } else if (gameState.worldMap[y][x].explored) { | |
| cell.classList.add('bg-blue-500'); | |
| } else { | |
| cell.classList.add('bg-gray-500'); | |
| } | |
| miniMapGrid.appendChild(cell); | |
| } | |
| } | |
| } | |
| // Update save slots display | |
| function updateSaveSlots() { | |
| if (!saveSlots) return; | |
| saveSlots.innerHTML = ''; | |
| // Create 3 save slots | |
| for (let i = 1; i <= 3; i++) { | |
| const slot = document.createElement('div'); | |
| slot.className = 'bg-gray-700 p-3 rounded border border-gray-600'; | |
| // Check if save exists | |
| const saveKey = `isekaiRpgSave_${i}`; | |
| const saveData = localStorage.getItem(saveKey); | |
| if (saveData) { | |
| try { | |
| const parsed = JSON.parse(saveData); | |
| slot.innerHTML = ` | |
| <div class="font-bold">Slot ${i}</div> | |
| <div class="text-sm text-gray-300">${parsed.character.name} - Lvl ${parsed.character.level}</div> | |
| <div class="text-xs text-gray-400 mt-1">${new Date(parsed.timestamp).toLocaleString()}</div> | |
| `; | |
| } catch (e) { | |
| slot.innerHTML = ` | |
| <div class="font-bold">Slot ${i}</div> | |
| <div class="text-sm text-gray-300">Corrupted Save</div> | |
| `; | |
| } | |
| } else { | |
| slot.innerHTML = ` | |
| <div class="font-bold">Slot ${i}</div> | |
| <div class="text-sm text-gray-300">Empty Slot</div> | |
| `; | |
| } | |
| // Add click handler | |
| slot.addEventListener('click', () => selectSaveSlot(i)); | |
| saveSlots.appendChild(slot); | |
| } | |
| } | |
| // Select save slot for save/load | |
| function selectSaveSlot(slotNumber) { | |
| if (!saveSlots) return; | |
| // Highlight selected slot | |
| const slots = saveSlots.querySelectorAll('div'); | |
| slots.forEach((slot, index) => { | |
| if (index + 1 === slotNumber) { | |
| slot.classList.add('border-yellow-500'); | |
| } else { | |
| slot.classList.remove('border-yellow-500'); | |
| } | |
| }); | |
| // Store selected slot in modal | |
| if (saveLoadModal) saveLoadModal.dataset.selectedSlot = slotNumber; | |
| } | |
| // Save game to selected slot | |
| function saveGame() { | |
| if (!saveLoadModal) return; | |
| const slotNumber = saveLoadModal.dataset.selectedSlot; | |
| if (!slotNumber) { | |
| alert('Please select a save slot first!'); | |
| return; | |
| } | |
| const saveKey = `isekaiRpgSave_${slotNumber}`; | |
| // Add timestamp to save data | |
| const saveData = { | |
| ...gameState, | |
| timestamp: Date.now() | |
| }; | |
| try { | |
| localStorage.setItem(saveKey, JSON.stringify(saveData)); | |
| addToGameLog(`> Game saved to slot ${slotNumber}`); | |
| // Show notification | |
| showNotification('Game saved successfully!'); | |
| } catch (e) { | |
| console.error('Error saving game:', e); | |
| alert('Failed to save game!'); | |
| } | |
| } | |
| // Load game from selected slot | |
| function loadGame() { | |
| if (!saveLoadModal) return; | |
| const slotNumber = saveLoadModal.dataset.selectedSlot; | |
| if (!slotNumber) { | |
| alert('Please select a save slot first!'); | |
| return; | |
| } | |
| const saveKey = `isekaiRpgSave_${slotNumber}`; | |
| const saveData = localStorage.getItem(saveKey); | |
| if (!saveData) { | |
| alert('No save data found in this slot!'); | |
| return; | |
| } | |
| try { | |
| const parsed = JSON.parse(saveData); | |
| // Update game state with loaded data | |
| Object.assign(gameState, parsed); | |
| addToGameLog(`> Game loaded from slot ${slotNumber}`); | |
| // Update all displays | |
| updateCharacterDisplay(); | |
| updateInventory(); | |
| updateEquippedItems(); | |
| updateSkillsList(); | |
| updateGameLog(); | |
| updateQuestLog(); | |
| updateMiniMap(); | |
| // Show notification | |
| showNotification('Game loaded successfully!'); | |
| } catch (e) { | |
| console.error('Error loading game:', e); | |
| alert('Failed to load game! Save file may be corrupted.'); | |
| } | |
| } | |
| // Handle chat input | |
| async function handleChatInput() { | |
| if (!chatInput || !chatSubmit || !submitText || !submitSpinner || !chatLog) return; | |
| const input = chatInput.value.trim(); | |
| if (!input) return; | |
| try { | |
| // Show loading state | |
| submitText.textContent = "Processing..."; | |
| submitSpinner.classList.remove('hidden'); | |
| chatSubmit.disabled = true; | |
| // Add player message to chat | |
| addToChatLog(input, 'player'); | |
| addToGameLog(`> ${input}`); | |
| // Clear input | |
| chatInput.value = ''; | |
| // Process input with Story Teller AI | |
| const response = await getStoryTellerResponse(input); | |
| // Add response to chat | |
| addToChatLog(response.text, 'npc', response.character); | |
| // Handle mechanics if present | |
| if (response.mechanics) { | |
| if (response.mechanics.quest) { | |
| const questExists = gameState.quests.some(q => q.title === response.mechanics.quest); | |
| if (!questExists) { | |
| gameState.quests.push({ | |
| title: response.mechanics.quest, | |
| description: response.mechanics.description, | |
| status: 'active' | |
| }); | |
| updateQuestLog(); | |
| } | |
| } | |
| if (response.mechanics.location) { | |
| gameState.location.name = response.mechanics.location.name; | |
| gameState.location.description = response.mechanics.location.description; | |
| updateCharacterDisplay(); | |
| } | |
| if (response.mechanics.image) { | |
| updateSceneImage(response.mechanics.image); | |
| } | |
| } | |
| // Auto-save if enabled | |
| if (gameState.settings.autoSave) { | |
| saveGame(); | |
| } | |
| } catch (error) { | |
| console.error('Error processing input:', error); | |
| addToChatLog("An error occurred while processing your input.", 'system'); | |
| } finally { | |
| // Reset button state | |
| submitText.textContent = "Send"; | |
| submitSpinner.classList.add('hidden'); | |
| chatSubmit.disabled = false; | |
| } | |
| } | |
| // Add message to chat log | |
| function addToChatLog(message, type, character = '') { | |
| if (!chatLog) return; | |
| const messageElement = document.createElement('div'); | |
| messageElement.className = `chat-message ${type}-message`; | |
| if (type === 'player') { | |
| messageElement.innerHTML = ` | |
| <div class="font-bold text-yellow-400 medieval">You:</div> | |
| <div class="text-gray-300">${message}</div> | |
| `; | |
| } else if (type === 'npc') { | |
| messageElement.innerHTML = ` | |
| <div class="font-bold text-blue-400 medieval">${character}:</div> | |
| <div class="text-gray-300">${message}</div> | |
| `; | |
| } else { | |
| messageElement.innerHTML = ` | |
| <div class="text-gray-300">${message}</div> | |
| `; | |
| } | |
| chatLog.appendChild(messageElement); | |
| // Scroll to bottom | |
| chatLog.scrollTop = chatLog.scrollHeight; | |
| } | |
| // Update scene image | |
| function updateSceneImage(imageUrl) { | |
| if (!sceneImage) return; | |
| const imageDiv = sceneImage.querySelector('div'); | |
| if (imageDiv) { | |
| imageDiv.style.backgroundImage = `url('${imageUrl}')`; | |
| } | |
| } | |
| // Show notification | |
| function showNotification(message) { | |
| if (!skillNotification) return; | |
| skillNotification.textContent = message; | |
| skillNotification.classList.remove('hidden'); | |
| setTimeout(() => { | |
| skillNotification.classList.add('hidden'); | |
| }, 3000); | |
| } | |
| // Get response from Story Teller AI | |
| async function getStoryTellerResponse(input) { | |
| // In a real implementation, this would call your AI API | |
| // For demo purposes, we'll simulate a response | |
| const responses = [ | |
| { | |
| text: "The old man strokes his beard thoughtfully. 'Work, you say? Well, there's been trouble with bandits on the north road. The local merchants would pay handsomely to have that problem dealt with.'", | |
| character: "Old Man", | |
| mechanics: { | |
| quest: "The Bandit Threat", | |
| description: "The tavern keeper mentioned bandits attacking travelers on the north road. Investigate and deal with the threat." | |
| } | |
| }, | |
| { | |
| text: "'Ah, our house specialty is Dragon's Breath Ale!' the old man says with a chuckle. 'Strong enough to put hair on a dwarf's chest, that one.'", | |
| character: "Old Man" | |
| }, | |
| { | |
| text: "The old man's expression darkens. 'Aye, there's been strange happenings in these parts. Folk disappearing in the night, livestock found drained of blood. Some say it's vampires, others blame the cult that's taken up in the old ruins.'", | |
| character: "Old Man", | |
| mechanics: { | |
| image: "https://images.unsplash.com/photo-1518709766631-a6a7f45921c3?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" | |
| } | |
| } | |
| ]; | |
| // Return a random response for demo purposes | |
| return responses[Math.floor(Math.random() * responses.length)]; | |
| } | |
| // Calculate game mechanics | |
| async function calculateMechanics(action, item) { | |
| // In a real implementation, this would call your mechanics API | |
| // For demo purposes, we'll simulate results | |
| if (action === 'useItem') { | |
| if (item.name === 'Health Potion') { | |
| const healAmount = item.effect.heal; | |
| gameState.character.health = Math.min( | |
| gameState.character.health + healAmount, | |
| gameState.character.maxHealth | |
| ); | |
| return `Restored ${healAmount} health.`; | |
| } else if (item.name === 'Scroll of Fireball') { | |
| return "You unleash a fiery explosion! (30 damage)"; | |
| } | |
| } | |
| return "Action completed."; | |
| } | |
| // Test AI connection | |
| async function testAIConnection(type) { | |
| const apiKey = document.getElementById(`${type}ApiKey`)?.value; | |
| const url = document.getElementById(`${type}Url`)?.value; | |
| if (!apiKey || !url) { | |
| alert('Please enter both API Key and URL'); | |
| return; | |
| } | |
| try { | |
| // In a real implementation, this would test the API connection | |
| // For demo purposes, we'll simulate a successful test | |
| showNotification(`${type} connection successful!`); | |
| } catch (error) { | |
| console.error(`Error testing ${type} connection:`, error); | |
| alert(`Failed to connect to ${type} API`); | |
| } | |
| } | |
| // Save settings handler | |
| function saveSettingsHandler() { | |
| // Save AI config | |
| aiConfig.storyTeller.apiKey = storyTellerApiKey?.value || ''; | |
| aiConfig.storyTeller.url = storyTellerUrl?.value || ''; | |
| aiConfig.mechanics.apiKey = mechanicsApiKey?.value || ''; | |
| aiConfig.mechanics.url = mechanicsUrl?.value || ''; | |
| // Save game settings | |
| gameState.settings.autoSave = autoSave?.checked || false; | |
| gameState.settings.typewriterEffect = typewriterEffect?.checked || false; | |
| gameState.settings.showImages = showImages?.checked || false; | |
| // Save to localStorage | |
| try { | |
| localStorage.setItem('aiConfig', JSON.stringify(aiConfig)); | |
| showNotification('Settings saved successfully!'); | |
| toggleModal(settingsModal); | |
| } catch (error) { | |
| console.error('Error saving settings:', error); | |
| alert('Failed to save settings!'); | |
| } | |
| } | |
| // Start new game handler | |
| function startNewGameHandler() { | |
| if (!newCharName || !newCharClass) return; | |
| const name = newCharName.value.trim(); | |
| const charClass = newCharClass.value.trim(); | |
| if (!name || !charClass) { | |
| alert('Please enter both character name and class'); | |
| return; | |
| } | |
| // Create new character | |
| gameState.character = { | |
| name, | |
| class: charClass, | |
| level: 1, | |
| xp: 0, | |
| nextLevel: 100, | |
| health: 100, | |
| maxHealth: 100, | |
| mana: 50, | |
| maxMana: 50, | |
| str: parseInt(newCharStr?.value) || 10, | |
| dex: parseInt(newCharDex?.value) || 10, | |
| con: parseInt(newCharCon?.value) || 10, | |
| int: parseInt(newCharInt?.value) || 10, | |
| wis: parseInt(newCharWis?.value) || 10, | |
| cha: parseInt(newCharCha?.value) || 10, | |
| statPoints: 0, | |
| baseStats: { | |
| str: 10, | |
| dex: 10, | |
| con: 10, | |
| int: 10, | |
| wis: 10, | |
| cha: 10 | |
| } | |
| }; | |
| // Reset other game state | |
| gameState.inventory = [ | |
| { name: "Rusty Sword", type: "weapon", equipped: true, effect: { str: 1 }, icon: "fa-sword" }, | |
| { name: "Health Potion", type: "consumable", quantity: 2, effect: { heal: 20 }, icon: "fa-flask" }, | |
| { name: "10 Gold", type: "currency", quantity: 10, icon: "fa-coins" } | |
| ]; | |
| gameState.equipped = { | |
| weapon: "Rusty Sword", | |
| armor: null, | |
| accessory: null | |
| }; | |
| gameState.skills = [ | |
| { name: "Sword Mastery", level: 1, xp: 0, nextLevel: 100, description: "Basic proficiency with swords", effect: { str: 1 } } | |
| ]; | |
| gameState.quests = []; | |
| gameState.gameLog = ["> Game started"]; | |
| // Initialize world map | |
| initWorldMap(); | |
| // Update all displays | |
| updateCharacterDisplay(); | |
| updateInventory(); | |
| updateEquippedItems(); | |
| updateSkillsList(); | |
| updateGameLog(); | |
| updateQuestLog(); | |
| updateMiniMap(); | |
| // Clear chat and add welcome message | |
| if (chatLog) chatLog.innerHTML = ''; | |
| addToChatLog("Welcome to your new adventure!", 'system'); | |
| // Close modal | |
| toggleModal(newGameModal); | |
| } | |
| // Update stat points used in new game modal | |
| function updateStatPointsUsed() { | |
| if (!statPointsUsed) return; | |
| const str = parseInt(newCharStr?.value) || 10; | |
| const dex = parseInt(newCharDex?.value) || 10; | |
| const con = parseInt(newCharCon?.value) || 10; | |
| const int = parseInt(newCharInt?.value) || 10; | |
| const wis = parseInt(newCharWis?.value) || 10; | |
| const cha = parseInt(newCharCha?.value) || 10; | |
| const totalPoints = str + dex + con + int + wis + cha - 60; | |
| statPointsUsed.textContent = totalPoints; | |
| // Highlight if over limit | |
| if (totalPoints > 0) { | |
| statPointsUsed.classList.add('text-red-400'); | |
| } else { | |
| statPointsUsed.classList.remove('text-red-400'); | |
| } | |
| } | |
| // Setup event listeners | |
| function setupEventListeners() { | |
| // Menu button and dropdown | |
| if (menuBtn) { | |
| menuBtn.addEventListener('click', () => { | |
| menuDropdown.classList.toggle('show'); | |
| }); | |
| } | |
| // Close dropdown when clicking elsewhere | |
| document.addEventListener('click', (e) => { | |
| if (!menuBtn.contains(e.target) && !menuDropdown.contains(e.target)) { | |
| menuDropdown.classList.remove('show'); | |
| } | |
| }); | |
| // Menu options | |
| if (newGameOption) { | |
| newGameOption.addEventListener('click', () => { | |
| menuDropdown.classList.remove('show'); | |
| toggleModal(newGameModal); | |
| }); | |
| } | |
| if (saveOption) { | |
| saveOption.addEventListener('click', () => { | |
| menuDropdown.classList.remove('show'); | |
| openSaveModal(); | |
| }); | |
| } | |
| if (loadOption) { | |
| loadOption.addEventListener('click', () => { | |
| menuDropdown.classList.remove('show'); | |
| openLoadModal(); | |
| }); | |
| } | |
| if (settingsOption) { | |
| settingsOption.addEventListener('click', () => { | |
| menuDropdown.classList.remove('show'); | |
| openSettingsModal(); | |
| }); | |
| } | |
| // New Game Modal | |
| if (closeNewGame) { | |
| closeNewGame.addEventListener('click', () => toggleModal(newGameModal)); | |
| } | |
| if (cancelNewGame) { | |
| cancelNewGame.addEventListener('click', () => toggleModal(newGameModal)); | |
| } | |
| if (startNewGame) { | |
| startNewGame.addEventListener('click', startNewGameHandler); | |
| } | |
| // Stat point allocation in new game modal | |
| [newCharStr, newCharDex, newCharCon, newCharInt, newCharWis, newCharCha].forEach(input => { | |
| if (input) { | |
| input.addEventListener('change', updateStatPointsUsed); | |
| } | |
| }); | |
| // Settings Modal | |
| if (closeSettings) { | |
| closeSettings.addEventListener('click', () => toggleModal(settingsModal)); | |
| } | |
| if (cancelSettings) { | |
| cancelSettings.addEventListener('click', () => toggleModal(settingsModal)); | |
| } | |
| if (saveSettings) { | |
| saveSettings.addEventListener('click', saveSettingsHandler); | |
| } | |
| // Test connection buttons | |
| if (testStoryTeller) { | |
| testStoryTeller.addEventListener('click', () => testAIConnection('storyTeller')); | |
| } | |
| if (testMechanics) { | |
| testMechanics.addEventListener('click', () => testAIConnection('mechanics')); | |
| } | |
| // Save/Load Modal | |
| if (closeSaveLoad) { | |
| closeSaveLoad.addEventListener('click', () => toggleModal(saveLoadModal)); | |
| } | |
| if (cancelSaveLoad) { | |
| cancelSaveLoad.addEventListener('click', () => toggleModal(saveLoadModal)); | |
| } | |
| if (confirmSaveLoad) { | |
| confirmSaveLoad.addEventListener('click', handleSaveLoadConfirm); | |
| } | |
| // Chat Input | |
| if (chatSubmit) { | |
| chatSubmit.addEventListener('click', handleChatInput); | |
| } | |
| if (chatInput) { | |
| chatInput.addEventListener('keypress', (e) => { | |
| if (e.key === 'Enter') { | |
| handleChatInput(); | |
| } | |
| }); | |
| } | |
| } | |
| // Initialize the game when DOM is loaded | |
| document.addEventListener('DOMContentLoaded', () => { | |
| console.log('DOM fully loaded and parsed'); | |
| setupEventListeners(); | |
| initGame(); | |
| }); | |
| </script> | |
| </html> |