Spaces:

yazdaabdul
/

mount-and-blade

Running

App Files Files Community

yazdaabdul commited on 1 day ago

Commit

b891a0a

verified ·

1 Parent(s): 761fccd

Show NPCs in party in a separate window - Follow Up Deployment

Browse files

Files changed (1) hide show

index.html +90 -1

index.html CHANGED Viewed

@@ -96,6 +96,23 @@
         .victory { color: #4CAF50; }
         .defeat { color: #F44336; }
         .neutral { color: #FFC107; }
     </style>
 </head>
 <body class="bg-gray-900 text-white">
@@ -204,6 +221,9 @@
                                 </div>
                                 <span class="text-sm">Health: <span id="health-text">100</span>/100</span>
                             </div>
                             ${gameState.npcParty.length > 0 ? `
                             <div class="border-t border-gray-700 pt-2">
                                 <h4 class="font-semibold mb-1">NPC Party (${gameState.npcParty.length}/${gameState.maxNPCs}):</h4>
@@ -383,6 +403,19 @@
         </div>
     </div>
     <script>
         // Game State
         const gameState = {
@@ -1417,6 +1450,7 @@
             // Update UI
             updatePlayerInfo();
             const settlement = gameState.settlements.find(s => s.id === gameState.player.location);
             if (settlement) {
                 selectSettlement(settlement.id);
@@ -1454,8 +1488,63 @@
             gameState.gameLog.push(message);
         }
         // Initialize the game when page loads
-        window.addEventListener('DOMContentLoaded', initGame);
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=yazdaabdul/mount-and-blade" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

         .victory { color: #4CAF50; }
         .defeat { color: #F44336; }
         .neutral { color: #FFC107; }
+        #npc-window {
+            z-index: 1000;
+        }
+        #npc-window-content::-webkit-scrollbar {
+            width: 5px;
+        }
+        #npc-window-content::-webkit-scrollbar-track {
+            background: #2d3748;
+        }
+        #npc-window-content::-webkit-scrollbar-thumb {
+            background: #6b46c1;
+            border-radius: 5px;
+        }
     </style>
 </head>
 <body class="bg-gray-900 text-white">
                                 </div>
                                 <span class="text-sm">Health: <span id="health-text">100</span>/100</span>
                             </div>
+                            <button id="toggle-npc-window" class="w-full mt-2 px-3 py-1 bg-purple-700 hover:bg-purple-800 rounded text-sm">
+                                <i class="fas fa-users mr-1"></i> Show NPC Party
+                            </button>
                             ${gameState.npcParty.length > 0 ? `
                             <div class="border-t border-gray-700 pt-2">
                                 <h4 class="font-semibold mb-1">NPC Party (${gameState.npcParty.length}/${gameState.maxNPCs}):</h4>
         </div>
     </div>
+    <!-- NPC Party Window -->
+    <div id="npc-window" class="fixed bottom-4 right-4 w-64 bg-gray-800 rounded-lg shadow-lg border border-purple-700 hidden">
+        <div class="flex justify-between items-center bg-purple-800 px-4 py-2 rounded-t-lg">
+            <h3 class="font-bold">NPC Party</h3>
+            <button id="close-npc-window" class="text-gray-300 hover:text-white">
+                <i class="fas fa-times"></i>
+            </button>
+        </div>
+        <div id="npc-window-content" class="p-3 max-h-96 overflow-y-auto">
+            <!-- NPCs will be listed here -->
+        </div>
+    </div>
     <script>
         // Game State
         const gameState = {
             // Update UI
             updatePlayerInfo();
+            updateNPCWindow();
             const settlement = gameState.settlements.find(s => s.id === gameState.player.location);
             if (settlement) {
                 selectSettlement(settlement.id);
             gameState.gameLog.push(message);
         }
+        // Toggle NPC window
+        function toggleNPCWindow() {
+            const npcWindow = document.getElementById('npc-window');
+            const toggleBtn = document.getElementById('toggle-npc-window');
+            if (npcWindow.classList.contains('hidden')) {
+                npcWindow.classList.remove('hidden');
+                toggleBtn.innerHTML = '<i class="fas fa-users mr-1"></i> Hide NPC Party';
+                updateNPCWindow();
+            } else {
+                npcWindow.classList.add('hidden');
+                toggleBtn.innerHTML = '<i class="fas fa-users mr-1"></i> Show NPC Party';
+            }
+        }
+        // Update NPC window content
+        function updateNPCWindow() {
+            const npcWindowContent = document.getElementById('npc-window-content');
+            if (gameState.npcParty.length === 0) {
+                npcWindowContent.innerHTML = '<div class="text-gray-400 italic text-center py-4">No NPCs in party</div>';
+                return;
+            }
+            npcWindowContent.innerHTML = gameState.npcParty.map(npc => `
+                <div class="border-b border-gray-700 pb-2 mb-2">
+                    <div class="flex items-center justify-between">
+                        <div class="flex items-center">
+                            <i class="fas ${getNPCIcon(npc.type)} ${getNPCColor(npc.type)} mr-2"></i>
+                            <span>${npc.name}</span>
+                        </div>
+                        <button onclick="dismissNPC('${npc.id}')"
+                                class="px-2 py-1 bg-red-700 hover:bg-red-800 rounded text-xs">
+                            Dismiss
+                        </button>
+                    </div>
+                    <div class="grid grid-cols-2 gap-1 text-xs mt-1">
+                        <div>Level: ${npc.level || 1}</div>
+                        <div>Health: ${npc.health || 100}</div>
+                        <div>Power: ${getNPCPower(npc)}</div>
+                        <div>Type: ${npc.type}</div>
+                    </div>
+                    <div class="w-full bg-gray-700 rounded-full h-1.5 mt-1">
+                        <div class="bg-red-600 h-1.5 rounded-full" style="width: ${(npc.health || 100)}%"></div>
+                    </div>
+                </div>
+            `).join('');
+        }
         // Initialize the game when page loads
+        window.addEventListener('DOMContentLoaded', () => {
+            initGame();
+            // Set up NPC window toggle
+            document.getElementById('toggle-npc-window').addEventListener('click', toggleNPCWindow);
+            document.getElementById('close-npc-window').addEventListener('click', toggleNPCWindow);
+        });
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=yazdaabdul/mount-and-blade" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>