Spaces:
Running
Running
Show NPCs in party in a separate window - Follow Up Deployment
Browse files- 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',
|
|
|
|
|
|
|
|
|
|
|
|
|
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>
|