Spaces:

craigman1211
/

save-1

Running

App Files Files Community

craigman1211 commited on Apr 10, 2025

Commit

f784d2c

verified ·

1 Parent(s): 8c8ad25

Add 1 files

Browse files

Files changed (1) hide show

index.html +378 -256

index.html CHANGED Viewed

@@ -79,15 +79,6 @@
             transition: width 0.3s ease;
         }
-        .dialog-choice {
-            transition: all 0.2s ease;
-        }
-        .dialog-choice:hover {
-            transform: translateX(5px);
-            background-color: rgba(214, 158, 46, 0.2);
-        }
         .typewriter {
             overflow: hidden;
             border-right: 2px solid var(--accent);
@@ -121,35 +112,6 @@
             100% { transform: rotate(360deg); }
         }
-        .tooltip {
-            position: relative;
-            display: inline-block;
-        }
-        .tooltip .tooltiptext {
-            visibility: hidden;
-            width: 120px;
-            background-color: #2d3748;
-            color: #fff;
-            text-align: center;
-            border-radius: 6px;
-            padding: 5px;
-            position: absolute;
-            z-index: 1;
-            bottom: 125%;
-            left: 50%;
-            margin-left: -60px;
-            opacity: 0;
-            transition: opacity 0.3s;
-            font-size: 12px;
-            border: 1px solid #d69e2e;
-        }
-        .tooltip:hover .tooltiptext {
-            visibility: visible;
-            opacity: 1;
-        }
         .notification {
             position: fixed;
             top: 1rem;
@@ -206,6 +168,37 @@
             opacity: 0.5;
             cursor: not-allowed;
         }
     </style>
 </head>
 <body class="h-screen flex flex-col">
@@ -213,10 +206,6 @@
     <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 class="flex space-x-2">
-                <button id="visualNovelBtn" class="px-3 py-1 bg-yellow-600 hover:bg-yellow-700 text-white rounded medieval transition btn-click">Visual Novel</button>
-                <button id="textRpgBtn" class="px-3 py-1 bg-gray-700 hover:bg-gray-600 text-white rounded medieval transition btn-click">Text RPG</button>
-            </div>
         </div>
         <div class="flex items-center space-x-4">
             <button id="newGameBtn" class="text-yellow-400 hover:text-yellow-300 btn-click">
@@ -359,64 +348,36 @@
         <!-- Center Panel - Game Content -->
         <div class="flex-1 flex flex-col">
-            <!-- Visual Novel Mode -->
-            <div id="visualNovelMode" class="flex-1 flex flex-col">
-                <div class="flex-1 relative">
-                    <!-- Scene Image -->
-                    <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>
-                    <!-- Text Display -->
-                    <div id="vnTextContainer" class="absolute bottom-0 left-0 right-0 p-6">
-                        <div class="bg-gray-900 bg-opacity-80 rounded-lg p-4 parchment">
-                            <div id="vnCharacterName" class="text-yellow-400 font-bold mb-1 medieval">Old Man</div>
-                            <div id="vnText" class="text-white mb-4">
-                                Welcome, traveler, to the Rusty Tankard. What brings you to our humble establishment this fine evening?
-                            </div>
-                            <div id="vnChoices" class="space-y-2">
-                                <button class="dialog-choice w-full text-left p-2 bg-gray-800 hover:bg-gray-700 rounded border border-yellow-700 text-yellow-100 btn-click">
-                                    "I'm looking for work. Any jobs for a capable adventurer?"
-                                </button>
-                                <button class="dialog-choice w-full text-left p-2 bg-gray-800 hover:bg-gray-700 rounded border border-yellow-700 text-yellow-100 btn-click">
-                                    "Just passing through. What's good to drink here?"
-                                </button>
-                                <button class="dialog-choice w-full text-left p-2 bg-gray-800 hover:bg-gray-700 rounded border border-yellow-700 text-yellow-100 btn-click">
-                                    "I heard rumors of trouble in these parts. Know anything about that?"
-                                </button>
-                            </div>
-                        </div>
-                    </div>
                 </div>
             </div>
-            <!-- Text RPG Mode -->
-            <div id="textRpgMode" class="flex-1 flex flex-col hidden">
-                <div class="flex-1 p-4 overflow-y-auto scrollbar-custom">
-                    <div id="rpgTextLog" class="space-y-3">
-                        <div class="text-yellow-400 font-bold medieval">System:</div>
-                        <div class="text-gray-300">Welcome to the world of Eldoria. Your adventure begins now.</div>
-                        <div class="text-yellow-400 font-bold medieval">Narrator:</div>
-                        <div class="text-gray-300">You find yourself standing in the middle of a bustling tavern. The air is thick with the smell of ale and roasted meat. Patrons laugh loudly at nearby tables while a bard strums a lute in the corner. The tavern keeper wipes down the bar with a rag, occasionally glancing in your direction.</div>
-                        <div class="text-yellow-400 font-bold medieval">System:</div>
-                        <div class="text-gray-300">What would you like to do? You can examine your surroundings, talk to NPCs, or check your inventory.</div>
-                    </div>
                 </div>
-                <div class="p-4 border-t border-gray-700">
-                    <div class="flex">
-                        <input type="text" id="rpgInput" placeholder="What will you do?" 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="rpgSubmit" 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">Submit</span>
-                            <div id="submitSpinner" class="loading-spinner ml-2 hidden"></div>
-                        </button>
-                    </div>
-                    <div class="mt-2 text-xs text-gray-400">
-                        Try commands like: look, examine [thing], talk to [person], inventory, stats, go [direction]
-                    </div>
                 </div>
             </div>
         </div>
@@ -577,42 +538,6 @@
                                 </button>
                             </div>
                         </div>
-                        <!-- Summarizer Configuration -->
-                        <div class="bg-gray-700 p-4 rounded border border-gray-600">
-                            <h5 class="font-bold text-yellow-300 mb-2">Summarizer Model</h5>
-                            <div class="space-y-2">
-                                <div>
-                                    <label class="block text-gray-300 mb-1">API Key</label>
-                                    <input type="text" id="summarizerApiKey" 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="summarizerUrl" class="w-full bg-gray-800 border border-gray-600 rounded px-3 py-2 text-white" placeholder="http://localhost:5002/summarize">
-                                </div>
-                                <button id="testSummarizer" 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>
-                        <!-- Diffusion Model Configuration -->
-                        <div class="bg-gray-700 p-4 rounded border border-gray-600">
-                            <h5 class="font-bold text-yellow-300 mb-2">Diffusion Model</h5>
-                            <div class="space-y-2">
-                                <div>
-                                    <label class="block text-gray-300 mb-1">API Key</label>
-                                    <input type="text" id="diffusionApiKey" 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="diffusionUrl" class="w-full bg-gray-800 border border-gray-600 rounded px-3 py-2 text-white" placeholder="http://localhost:5003/diffusion">
-                                </div>
-                                <button id="testDiffusion" 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>
@@ -644,8 +569,7 @@
     <!-- 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-8
-00 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">
@@ -678,7 +602,6 @@ document.addEventListener('DOMContentLoaded', () => {
      * This object holds all the game state data including character info, inventory, etc.
      */
     const gameState = {
-        mode: 'visualNovel',
         character: {
             name: 'Sir Aldric',
             class: 'Knight',
@@ -744,9 +667,7 @@ document.addEventListener('DOMContentLoaded', () => {
             }
         ],
         worldMap: [],
-        currentDialogue: null,
         gameLog: ["> Entered the Rusty Tankard"],
-        summaries: [],
         settings: {
             autoSave: true,
             typewriterEffect: true,
@@ -757,9 +678,7 @@ document.addEventListener('DOMContentLoaded', () => {
     // AI Configuration
     let aiConfig = {
         storyTeller: { apiKey: "", url: "http://localhost:5000/story" },
-        mechanics: { apiKey: "", url: "http://localhost:5001/mechanics" },
-        summarizer: { apiKey: "", url: "http://localhost:5002/summarize" },
-        diffusion: { apiKey: "", url: "http://localhost:5003/diffusion" }
     };
     // Load saved AI config from localStorage if available
@@ -777,10 +696,6 @@ document.addEventListener('DOMContentLoaded', () => {
      * DOM Elements
      * Cache all frequently accessed DOM elements for better performance
      */
-    const visualNovelBtn = document.getElementById('visualNovelBtn');
-    const textRpgBtn = document.getElementById('textRpgBtn');
-    const visualNovelMode = document.getElementById('visualNovelMode');
-    const textRpgMode = document.getElementById('textRpgMode');
     const newGameBtn = document.getElementById('newGameBtn');
     const settingsBtn = document.getElementById('settingsBtn');
     const saveBtn = document.getElementById('saveBtn');
@@ -796,14 +711,11 @@ document.addEventListener('DOMContentLoaded', () => {
     const modalTitle = document.getElementById('modalTitle');
     const confirmSaveLoad = document.getElementById('confirmSaveLoad');
     const cancelSaveLoad = document.getElementById('cancelSaveLoad');
-    const rpgInput = document.getElementById('rpgInput');
-    const rpgSubmit = document.getElementById('rpgSubmit');
     const submitText = document.getElementById('submitText');
     const submitSpinner = document.getElementById('submitSpinner');
-    const rpgTextLog = document.getElementById('rpgTextLog');
-    const vnChoices = document.getElementById('vnChoices');
-    const vnText = document.getElementById('vnText');
-    const vnCharacterName = document.getElementById('vnCharacterName');
     const sceneImage = document.getElementById('sceneImage');
     const gameLog = document.getElementById('gameLog');
     const questLog = document.getElementById('questLog');
@@ -832,14 +744,8 @@ document.addEventListener('DOMContentLoaded', () => {
     const storyTellerUrl = document.getElementById('storyTellerUrl');
     const mechanicsApiKey = document.getElementById('mechanicsApiKey');
     const mechanicsUrl = document.getElementById('mechanicsUrl');
-    const summarizerApiKey = document.getElementById('summarizerApiKey');
-    const summarizerUrl = document.getElementById('summarizerUrl');
-    const diffusionApiKey = document.getElementById('diffusionApiKey');
-    const diffusionUrl = document.getElementById('diffusionUrl');
     const testStoryTeller = document.getElementById('testStoryTeller');
     const testMechanics = document.getElementById('testMechanics');
-    const testSummarizer = document.getElementById('testSummarizer');
-    const testDiffusion = document.getElementById('testDiffusion');
     const saveSettings = document.getElementById('saveSettings');
     const cancelSettings = document.getElementById('cancelSettings');
     const autoSave = document.getElementById('autoSave');
@@ -851,12 +757,12 @@ document.addEventListener('DOMContentLoaded', () => {
     // Verify all required elements exist
     const requiredElements = [
-        visualNovelBtn, textRpgBtn, visualNovelMode, textRpgMode, newGameBtn, settingsBtn,
-        saveBtn, loadBtn, settingsModal, closeSettings, newGameModal, closeNewGame,
-        startNewGame, cancelNewGame, saveLoadModal, closeSaveLoad, modalTitle,
-        confirmSaveLoad, cancelSaveLoad, rpgInput, rpgSubmit, submitText, submitSpinner,
-        rpgTextLog, vnChoices, vnText, vnCharacterName, sceneImage, gameLog, questLog,
-        inventoryItems, equippedItems, skillsList, miniMapGrid, statPointsDisplay, skillNotification
     ];
     requiredElements.forEach(element => {
@@ -870,10 +776,6 @@ document.addEventListener('DOMContentLoaded', () => {
      * Set up all event handlers for user interactions
      */
     function setupEventListeners() {
-        // Mode switching buttons
-        visualNovelBtn?.addEventListener('click', switchToVisualNovelMode);
-        textRpgBtn?.addEventListener('click', switchToTextRpgMode);
         // Main menu buttons
         newGameBtn?.addEventListener('click', () => toggleModal(newGameModal));
         settingsBtn?.addEventListener('click', openSettingsModal);
@@ -898,26 +800,17 @@ document.addEventListener('DOMContentLoaded', () => {
         // Test connection buttons
         testStoryTeller?.addEventListener('click', () => testAIConnection('storyTeller'));
         testMechanics?.addEventListener('click', () => testAIConnection('mechanics'));
-        testSummarizer?.addEventListener('click', () => testAIConnection('summarizer'));
-        testDiffusion?.addEventListener('click', () => testAIConnection('diffusion'));
         // Save/Load Modal
         closeSaveLoad?.addEventListener('click', () => toggleModal(saveLoadModal));
         cancelSaveLoad?.addEventListener('click', () => toggleModal(saveLoadModal));
         confirmSaveLoad?.addEventListener('click', handleSaveLoadConfirm);
-        // RPG Mode Input
-        rpgSubmit?.addEventListener('click', handleRpgInput);
-        rpgInput?.addEventListener('keypress', (e) => {
             if (e.key === 'Enter') {
-                handleRpgInput();
-            }
-        });
-        // Visual Novel Choices - Using event delegation for dynamic elements
-        vnChoices?.addEventListener('click', function(e) {
-            if (e.target && e.target.classList.contains('dialog-choice')) {
-                handleVNChoice(e.target.textContent.trim());
             }
         });
     }
@@ -952,9 +845,6 @@ document.addEventListener('DOMContentLoaded', () => {
      * Initialize game state and UI
      */
     function initGame() {
-        // Set initial mode
-        switchToVisualNovelMode();
         // Initialize world map
         initWorldMap();
@@ -969,36 +859,6 @@ document.addEventListener('DOMContentLoaded', () => {
         updateSaveSlots();
     }
-    /**
-     * Switch to Visual Novel mode
-     */
-    function switchToVisualNovelMode() {
-        console.log('Switching to Visual Novel mode');
-        gameState.mode = 'visualNovel';
-        visualNovelMode?.classList.remove('hidden');
-        textRpgMode?.classList.add('hidden');
-        visualNovelBtn?.classList.add('bg-yellow-600', 'hover:bg-yellow-700');
-        visualNovelBtn?.classList.remove('bg-gray-700', 'hover:bg-gray-600');
-        textRpgBtn?.classList.add('bg-gray-700', 'hover:bg-gray-600');
-        textRpgBtn?.classList.remove('bg-yellow-600', 'hover:bg-yellow-700');
-        addToGameLog("Switched to Visual Novel mode");
-    }
-    /**
-     * Switch to Text RPG mode
-     */
-    function switchToTextRpgMode() {
-        console.log('Switching to Text RPG mode');
-        gameState.mode = 'textRpg';
-        visualNovelMode?.classList.add('hidden');
-        textRpgMode?.classList.remove('hidden');
-        textRpgBtn?.classList.add('bg-yellow-600', 'hover:bg-yellow-700');
-        textRpgBtn?.classList.remove('bg-gray-700', 'hover:bg-gray-600');
-        visualNovelBtn?.classList.add('bg-gray-700', 'hover:bg-gray-600');
-        visualNovelBtn?.classList.remove('bg-yellow-600', 'hover:bg-yellow-700');
-        addToGameLog("Switched to Text RPG mode");
-    }
     /**
      * Toggle modal visibility
      * @param {HTMLElement} modal - The modal element to toggle
@@ -1015,15 +875,13 @@ document.addEventListener('DOMContentLoaded', () => {
      * Open settings modal and load current settings
      */
     function openSettingsModal() {
         // 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;
-        if (summarizerApiKey) summarizerApiKey.value = aiConfig.summarizer.apiKey;
-        if (summarizerUrl) summarizerUrl.value = aiConfig.summarizer.url;
-        if (diffusionApiKey) diffusionApiKey.value = aiConfig.diffusion.apiKey;
-        if (diffusionUrl) diffusionUrl.value = aiConfig.diffusion.url;
         // Load game settings
         if (autoSave) autoSave.checked = gameState.settings.autoSave;
@@ -1037,6 +895,7 @@ document.addEventListener('DOMContentLoaded', () => {
      * Open save modal
      */
     function openSaveModal() {
         if (!modalTitle || !saveLoadModal) return;
         modalTitle.textContent = 'Save Game';
         updateSaveSlots();
@@ -1047,6 +906,7 @@ document.addEventListener('DOMContentLoaded', () => {
      * Open load modal
      */
     function openLoadModal() {
         if (!modalTitle || !saveLoadModal) return;
         modalTitle.textContent = 'Load Game';
         updateSaveSlots();
@@ -1538,58 +1398,320 @@ document.addEventListener('DOMContentLoaded', () => {
     }
     /**
-     * Handle RPG mode input
      */
-    async function handleRpgInput() {
-        if (!rpgInput || !rpgSubmit || !submitText || !submitSpinner || !rpgTextLog) return;
-        const input = rpgInput.value.trim();
         if (!input) return;
         try {
             // Show loading state
             submitText.textContent = "Processing...";
             submitSpinner.classList.remove('hidden');
-            rpgSubmit.disabled = true;
-            // Add player input to log
-            addToRpgLog(`<div class="text-green-400 font-bold medieval">You:</div><div class="text-gray-300">${input}</div>`);
             addToGameLog(`> ${input}`);
-            // Check for special commands
-            if (input.toLowerCase().startsWith('equip ')) {
-                const itemName = input.substring(6).trim();
-                handleEquipItem(itemName);
-            } else if (input.toLowerCase().startsWith('use ')) {
-                const itemName = input.substring(4).trim();
-                await useItem(gameState.inventory.find(item =>
-                    item.name.toLowerCase() === itemName.toLowerCase()
-                ));
-            } else if (input.toLowerCase().startsWith('go ')) {
-                const direction = input.substring(3).trim().toLowerCase();
-                await handleMovement(direction);
-            } else {
-                // Process input with Story Teller AI
-                const response = await getStoryTellerResponse(input);
-                // Add response to log
-                addToRpgLog(`<div class="text-yellow-400 font-bold medieval">${response.character}:</div><div class="text-gray-300">${response.text}</div>`);
-                // 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();
-                        }
                     }
                 }
-                // Generate image if in visual novel mode
-                if (gameState
 </html>

             transition: width 0.3s ease;
         }
         .typewriter {
             overflow: hidden;
             border-right: 2px solid var(--accent);
             100% { transform: rotate(360deg); }
         }
         .notification {
             position: fixed;
             top: 1rem;
             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;
+        }
     </style>
 </head>
 <body class="h-screen flex flex-col">
     <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">
             <button id="newGameBtn" class="text-yellow-400 hover:text-yellow-300 btn-click">
         <!-- 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>
                                 </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">
      * This object holds all the game state data including character info, inventory, etc.
      */
     const gameState = {
         character: {
             name: 'Sir Aldric',
             class: 'Knight',
             }
         ],
         worldMap: [],
         gameLog: ["> Entered the Rusty Tankard"],
         settings: {
             autoSave: true,
             typewriterEffect: 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
      * DOM Elements
      * Cache all frequently accessed DOM elements for better performance
      */
     const newGameBtn = document.getElementById('newGameBtn');
     const settingsBtn = document.getElementById('settingsBtn');
     const saveBtn = document.getElementById('saveBtn');
     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 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');
     // Verify all required elements exist
     const requiredElements = [
+        newGameBtn, settingsBtn, saveBtn, loadBtn, settingsModal, closeSettings,
+        newGameModal, closeNewGame, startNewGame, cancelNewGame, saveLoadModal,
+        closeSaveLoad, modalTitle, confirmSaveLoad, cancelSaveLoad, chatInput,
+        chatSubmit, submitText, submitSpinner, chatLog, sceneImage, gameLog,
+        questLog, inventoryItems, equippedItems, skillsList, miniMapGrid,
+        statPointsDisplay, skillNotification
     ];
     requiredElements.forEach(element => {
      * Set up all event handlers for user interactions
      */
     function setupEventListeners() {
         // Main menu buttons
         newGameBtn?.addEventListener('click', () => toggleModal(newGameModal));
         settingsBtn?.addEventListener('click', openSettingsModal);
         // Test connection buttons
         testStoryTeller?.addEventListener('click', () => testAIConnection('storyTeller'));
         testMechanics?.addEventListener('click', () => testAIConnection('mechanics'));
         // Save/Load Modal
         closeSaveLoad?.addEventListener('click', () => toggleModal(saveLoadModal));
         cancelSaveLoad?.addEventListener('click', () => toggleModal(saveLoadModal));
         confirmSaveLoad?.addEventListener('click', handleSaveLoadConfirm);
+        // Chat Input
+        chatSubmit?.addEventListener('click', handleChatInput);
+        chatInput?.addEventListener('keypress', (e) => {
             if (e.key === 'Enter') {
+                handleChatInput();
             }
         });
     }
      * Initialize game state and UI
      */
     function initGame() {
         // Initialize world map
         initWorldMap();
         updateSaveSlots();
     }
     /**
      * Toggle modal visibility
      * @param {HTMLElement} modal - The modal element to toggle
      * 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;
      * Open save modal
      */
     function openSaveModal() {
+        console.log('Opening save modal');
         if (!modalTitle || !saveLoadModal) return;
         modalTitle.textContent = 'Save Game';
         updateSaveSlots();
      * Open load modal
      */
     function openLoadModal() {
+        console.log('Opening load modal');
         if (!modalTitle || !saveLoadModal) return;
         modalTitle.textContent = 'Load Game';
         updateSaveSlots();
     }
     /**
+     * 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
+     * @param {string} message - The message text
+     * @param {string} type - The message type (player, npc, system)
+     * @param {string} [character] - The character name for NPC messages
+     */
+    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
+     * @param {string} imageUrl - The URL of the new scene image
+     */
+    function updateSceneImage(imageUrl) {
+        if (!sceneImage) return;
+        const imageDiv = sceneImage.querySelector('div');
+        if (imageDiv) {
+            imageDiv.style.backgroundImage = `url('${imageUrl}')`;
+        }
+    }
+    /**
+     * Show notification
+     * @param {string} message - The notification message
+     */
+    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
+     * @param {string} input - The player's input
+     * @returns {Promise<Object>} - The AI response
+     */
+    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
+     * @param {string} action - The action being performed
+     * @param {Object} item - The item being used (if applicable)
+     * @returns {Promise<string>} - The result description
+     */
+    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
+     * @param {string} type - The AI type to test (storyTeller, mechanics)
+     */
+    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("
 </html>