yazdaabdul commited on
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
  1. index.html +90 -1
index.html CHANGED
@@ -96,6 +96,23 @@
96
  .victory { color: #4CAF50; }
97
  .defeat { color: #F44336; }
98
  .neutral { color: #FFC107; }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
99
  </style>
100
  </head>
101
  <body class="bg-gray-900 text-white">
@@ -204,6 +221,9 @@
204
  </div>
205
  <span class="text-sm">Health: <span id="health-text">100</span>/100</span>
206
  </div>
 
 
 
207
  ${gameState.npcParty.length > 0 ? `
208
  <div class="border-t border-gray-700 pt-2">
209
  <h4 class="font-semibold mb-1">NPC Party (${gameState.npcParty.length}/${gameState.maxNPCs}):</h4>
@@ -383,6 +403,19 @@
383
  </div>
384
  </div>
385
 
 
 
 
 
 
 
 
 
 
 
 
 
 
386
  <script>
387
  // Game State
388
  const gameState = {
@@ -1417,6 +1450,7 @@
1417
 
1418
  // Update UI
1419
  updatePlayerInfo();
 
1420
  const settlement = gameState.settlements.find(s => s.id === gameState.player.location);
1421
  if (settlement) {
1422
  selectSettlement(settlement.id);
@@ -1454,8 +1488,63 @@
1454
  gameState.gameLog.push(message);
1455
  }
1456
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1457
  // Initialize the game when page loads
1458
- window.addEventListener('DOMContentLoaded', initGame);
 
 
 
 
 
 
1459
  </script>
1460
  <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>
1461
  </html>
 
96
  .victory { color: #4CAF50; }
97
  .defeat { color: #F44336; }
98
  .neutral { color: #FFC107; }
99
+
100
+ #npc-window {
101
+ z-index: 1000;
102
+ }
103
+
104
+ #npc-window-content::-webkit-scrollbar {
105
+ width: 5px;
106
+ }
107
+
108
+ #npc-window-content::-webkit-scrollbar-track {
109
+ background: #2d3748;
110
+ }
111
+
112
+ #npc-window-content::-webkit-scrollbar-thumb {
113
+ background: #6b46c1;
114
+ border-radius: 5px;
115
+ }
116
  </style>
117
  </head>
118
  <body class="bg-gray-900 text-white">
 
221
  </div>
222
  <span class="text-sm">Health: <span id="health-text">100</span>/100</span>
223
  </div>
224
+ <button id="toggle-npc-window" class="w-full mt-2 px-3 py-1 bg-purple-700 hover:bg-purple-800 rounded text-sm">
225
+ <i class="fas fa-users mr-1"></i> Show NPC Party
226
+ </button>
227
  ${gameState.npcParty.length > 0 ? `
228
  <div class="border-t border-gray-700 pt-2">
229
  <h4 class="font-semibold mb-1">NPC Party (${gameState.npcParty.length}/${gameState.maxNPCs}):</h4>
 
403
  </div>
404
  </div>
405
 
406
+ <!-- NPC Party Window -->
407
+ <div id="npc-window" class="fixed bottom-4 right-4 w-64 bg-gray-800 rounded-lg shadow-lg border border-purple-700 hidden">
408
+ <div class="flex justify-between items-center bg-purple-800 px-4 py-2 rounded-t-lg">
409
+ <h3 class="font-bold">NPC Party</h3>
410
+ <button id="close-npc-window" class="text-gray-300 hover:text-white">
411
+ <i class="fas fa-times"></i>
412
+ </button>
413
+ </div>
414
+ <div id="npc-window-content" class="p-3 max-h-96 overflow-y-auto">
415
+ <!-- NPCs will be listed here -->
416
+ </div>
417
+ </div>
418
+
419
  <script>
420
  // Game State
421
  const gameState = {
 
1450
 
1451
  // Update UI
1452
  updatePlayerInfo();
1453
+ updateNPCWindow();
1454
  const settlement = gameState.settlements.find(s => s.id === gameState.player.location);
1455
  if (settlement) {
1456
  selectSettlement(settlement.id);
 
1488
  gameState.gameLog.push(message);
1489
  }
1490
 
1491
+ // Toggle NPC window
1492
+ function toggleNPCWindow() {
1493
+ const npcWindow = document.getElementById('npc-window');
1494
+ const toggleBtn = document.getElementById('toggle-npc-window');
1495
+
1496
+ if (npcWindow.classList.contains('hidden')) {
1497
+ npcWindow.classList.remove('hidden');
1498
+ toggleBtn.innerHTML = '<i class="fas fa-users mr-1"></i> Hide NPC Party';
1499
+ updateNPCWindow();
1500
+ } else {
1501
+ npcWindow.classList.add('hidden');
1502
+ toggleBtn.innerHTML = '<i class="fas fa-users mr-1"></i> Show NPC Party';
1503
+ }
1504
+ }
1505
+
1506
+ // Update NPC window content
1507
+ function updateNPCWindow() {
1508
+ const npcWindowContent = document.getElementById('npc-window-content');
1509
+
1510
+ if (gameState.npcParty.length === 0) {
1511
+ npcWindowContent.innerHTML = '<div class="text-gray-400 italic text-center py-4">No NPCs in party</div>';
1512
+ return;
1513
+ }
1514
+
1515
+ npcWindowContent.innerHTML = gameState.npcParty.map(npc => `
1516
+ <div class="border-b border-gray-700 pb-2 mb-2">
1517
+ <div class="flex items-center justify-between">
1518
+ <div class="flex items-center">
1519
+ <i class="fas ${getNPCIcon(npc.type)} ${getNPCColor(npc.type)} mr-2"></i>
1520
+ <span>${npc.name}</span>
1521
+ </div>
1522
+ <button onclick="dismissNPC('${npc.id}')"
1523
+ class="px-2 py-1 bg-red-700 hover:bg-red-800 rounded text-xs">
1524
+ Dismiss
1525
+ </button>
1526
+ </div>
1527
+ <div class="grid grid-cols-2 gap-1 text-xs mt-1">
1528
+ <div>Level: ${npc.level || 1}</div>
1529
+ <div>Health: ${npc.health || 100}</div>
1530
+ <div>Power: ${getNPCPower(npc)}</div>
1531
+ <div>Type: ${npc.type}</div>
1532
+ </div>
1533
+ <div class="w-full bg-gray-700 rounded-full h-1.5 mt-1">
1534
+ <div class="bg-red-600 h-1.5 rounded-full" style="width: ${(npc.health || 100)}%"></div>
1535
+ </div>
1536
+ </div>
1537
+ `).join('');
1538
+ }
1539
+
1540
  // Initialize the game when page loads
1541
+ window.addEventListener('DOMContentLoaded', () => {
1542
+ initGame();
1543
+
1544
+ // Set up NPC window toggle
1545
+ document.getElementById('toggle-npc-window').addEventListener('click', toggleNPCWindow);
1546
+ document.getElementById('close-npc-window').addEventListener('click', toggleNPCWindow);
1547
+ });
1548
  </script>
1549
  <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>
1550
  </html>