Interact with NPCs by recruiting them in your party. Maximum 3 NPCs - Follow Up Deployment

index.html

@@ -204,6 +204,23 @@
                                 </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>
+                                ${gameState.npcParty.map(npc => `
+                                    <div class="flex items-center justify-between py-1">
+                                        <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-sm">
+                                            Dismiss
+                                        </button>
+                                    </div>
+                                `).join('')}
+                            </div>
+                            ` : ''}
                         </div>
                     </div>
                     
@@ -422,7 +439,10 @@
             combatEnemy: null,
             selectedSettlement: null,
             gameLog: [],
-            actionsThisTurn: 0
+            actionsThisTurn: 0,
+            npcs: [],
+            npcParty: [],
+            maxNPCs: 3
         };
 
         // DOM Elements
@@ -452,8 +472,43 @@
         const endTurnBtn = document.getElementById('end-turn');
         const mapTooltip = document.getElementById('map-tooltip');
 
+        // Generate random NPCs
+        function generateNPCs() {
+            const maleTypes = ['noble son', 'merchant', 'mercenary', 'peasant'];
+            const femaleTypes = ['noble daughter', 'merchant', 'healer', 'witch'];
+            const firstNamesMale = ['Heinrich', 'Konrad', 'Friedrich', 'Ludwig', 'Albrecht', 'Johann', 'Ulrich', 'Werner'];
+            const firstNamesFemale = ['Adelheid', 'Gertrud', 'Elisabeth', 'Mechthild', 'Agnes', 'Hedwig', 'Margarete', 'Katharina'];
+            const lastNames = ['von Bayern', 'von Schwaben', 'von Franken', 'von Sachsen', 'von Lothringen', 'von Habsburg', 'von Wittelsbach', 'von Hohenzollern'];
+
+            // Create 1-2 NPCs per major town
+            gameState.settlements
+                .filter(s => s.type === 'town')
+                .forEach(settlement => {
+                    const npcCount = Math.floor(Math.random() * 2) + 1;
+                    for (let i = 0; i < npcCount; i++) {
+                        const isFemale = Math.random() > 0.5;
+                        const types = isFemale ? femaleTypes : maleTypes;
+                        const firstNames = isFemale ? firstNamesFemale : firstNamesMale;
+                        
+                        const npc = {
+                            id: `npc-${settlement.id}-${i}`,
+                            name: `${firstNames[Math.floor(Math.random() * firstNames.length)]} ${lastNames[Math.floor(Math.random() * lastNames.length)]}`,
+                            type: types[Math.floor(Math.random() * types.length)],
+                            gender: isFemale ? 'female' : 'male',
+                            location: settlement.id,
+                            relation: Math.floor(Math.random() * 60) - 30, // -30 to 30
+                            quest: null
+                        };
+                        gameState.npcs.push(npc);
+                    }
+                });
+        }
+
         // Initialize game
         function initGame() {
+            // Generate NPCs
+            generateNPCs();
+            
             // Set up event listeners
             startGameBtn.addEventListener('click', startGame);
             endTurnBtn.addEventListener('click', endTurn);
@@ -612,9 +667,14 @@
                     <div><span class="font-semibold">Garrison:</span> ${settlement.garrison}</div>
                     <div><span class="font-semibold">Wealth:</span> ${settlement.wealth}</div>
                 </div>
-                <div class="text-sm text-gray-400 italic">
+                <div class="text-sm text-gray-400 italic mb-3">
                     ${getSettlementDescription(settlement)}
                 </div>
+                <div class="border-t border-gray-700 pt-2">
+                    <h4 class="font-semibold mb-1">Notable Persons:</h4>
+                    ${getSettlementNPCs(settlement.id)}
+                    ${getRecruitableNPCs(settlement.id)}
+                </div>
             `;
             
             // Enable/disable action buttons based on settlement
@@ -636,6 +696,117 @@
             document.querySelector(`.settlement[data-id="${settlementId}"]`).classList.add('border-2', 'border-white');
         }
 
+        function getRecruitableNPCs(settlementId) {
+            const recruitableNPCs = gameState.npcs.filter(npc => 
+                npc.location === settlementId && 
+                npc.relation >= 0 &&
+                !gameState.npcParty.some(p => p.id === npc.id)
+            );
+            
+            if (recruitableNPCs.length === 0 || gameState.npcParty.length >= gameState.maxNPCs) {
+                return '';
+            }
+            
+            return `
+                <div class="mt-3">
+                    <h4 class="font-semibold mb-1">Available for Recruitment:</h4>
+                    ${recruitableNPCs.map(npc => `
+                        <div class="flex items-center justify-between py-1">
+                            <div class="flex items-center">
+                                <i class="fas ${getNPCIcon(npc.type)} ${getNPCColor(npc.type)} mr-2"></i>
+                                <span>${npc.name} (${npc.type})</span>
+                            </div>
+                            <button onclick="recruitNPC('${npc.id}')" 
+                                    class="px-2 py-1 bg-green-700 hover:bg-green-800 rounded text-sm">
+                                Recruit
+                            </button>
+                        </div>
+                    `).join('')}
+                </div>
+            `;
+        }
+
+        function getNPCIcon(type) {
+            switch(type) {
+                case 'noble son':
+                case 'noble daughter': return 'fa-crown';
+                case 'merchant': return 'fa-coins';
+                case 'mercenary': return 'fa-swords';
+                case 'peasant': return 'fa-wheat';
+                case 'healer': return 'fa-heart';
+                case 'witch': return 'fa-magic';
+                default: return 'fa-user';
+            }
+        }
+
+        function getNPCColor(type) {
+            switch(type) {
+                case 'noble son':
+                case 'noble daughter': return 'text-yellow-400';
+                case 'merchant': return 'text-green-400';
+                case 'mercenary': return 'text-red-400';
+                case 'peasant': return 'text-brown-400';
+                case 'healer': return 'text-pink-400';
+                case 'witch': return 'text-purple-400';
+                default: return 'text-gray-300';
+            }
+        }
+
+        function getSettlementNPCs(settlementId) {
+            const npcs = gameState.npcs.filter(npc => npc.location === settlementId);
+            if (npcs.length === 0) {
+                return '<div class="text-gray-500 italic">No notable persons present</div>';
+            }
+            
+            return npcs.map(npc => {
+                let icon = '';
+                let color = 'text-gray-300';
+                
+                switch(npc.type) {
+                    case 'noble son':
+                    case 'noble daughter':
+                        icon = 'fa-crown';
+                        color = 'text-yellow-400';
+                        break;
+                    case 'merchant':
+                        icon = 'fa-coins';
+                        color = 'text-green-400';
+                        break;
+                    case 'mercenary':
+                        icon = 'fa-swords';
+                        color = 'text-red-400';
+                        break;
+                    case 'peasant':
+                        icon = 'fa-wheat';
+                        color = 'text-brown-400';
+                        break;
+                    case 'healer':
+                        icon = 'fa-heart';
+                        color = 'text-pink-400';
+                        break;
+                    case 'witch':
+                        icon = 'fa-magic';
+                        color = 'text-purple-400';
+                        break;
+                }
+                
+                const relationText = npc.relation > 20 ? 'Friendly' : 
+                                    npc.relation < -20 ? 'Hostile' : 'Neutral';
+                const relationColor = npc.relation > 20 ? 'text-green-400' : 
+                                     npc.relation < -20 ? 'text-red-400' : 'text-gray-400';
+                
+                return `
+                    <div class="flex items-center justify-between py-1">
+                        <div class="flex items-center">
+                            <i class="fas ${icon} ${color} mr-2"></i>
+                            <span>${npc.name} (${npc.type})</span>
+                        </div>
+                        <span class="${relationColor} text-sm">${relationText}</span>
+                    </div>
+                `;
+            }).join('');
+        }
+
         function getSettlementDescription(settlement) {
             const faction = gameState.factions[settlement.faction];
             const playerFaction = gameState.factions[gameState.player.faction];
@@ -798,6 +969,36 @@
         }
 
         // Handle combat retreat
+        function recruitNPC(npcId) {
+            if (gameState.npcParty.length >= gameState.maxNPCs) {
+                addGameLog(`You can only have ${gameState.maxNPCs} NPCs in your party.`);
+                return;
+            }
+
+            const npc = gameState.npcs.find(n => n.id === npcId);
+            if (!npc || npc.relation < 0) {
+                addGameLog("This NPC cannot be recruited.");
+                return;
+            }
+
+            // Add to party
+            gameState.npcParty.push(npc);
+            
+            // Remove from settlement
+            const settlementIndex = gameState.settlements.findIndex(s => s.id === npc.location);
+            if (settlementIndex !== -1) {
+                gameState.settlements[settlementIndex].npcIds = gameState.settlements[settlementIndex].npcIds?.filter(id => id !== npc.id) || [];
+            }
+
+            addGameLog(`You recruited ${npc.name} (${npc.type}) to your party!`);
+            
+            // Update UI
+            const settlement = gameState.settlements.find(s => s.id === npc.location);
+            if (settlement) {
+                selectSettlement(settlement.id);
+            }
+        }
+
         function combatRetreat() {
             if (!gameState.inCombat) return;
             
@@ -1145,6 +1346,28 @@
         }
 
         // Update player info display
+        function dismissNPC(npcId) {
+            const npcIndex = gameState.npcParty.findIndex(n => n.id === npcId);
+            if (npcIndex === -1) return;
+
+            const npc = gameState.npcParty[npcIndex];
+            
+            // Return to current location
+            npc.location = gameState.player.location;
+            
+            // Remove from party
+            gameState.npcParty.splice(npcIndex, 1);
+            
+            addGameLog(`You dismissed ${npc.name} from your party.`);
+            
+            // Update UI
+            updatePlayerInfo();
+            const settlement = gameState.settlements.find(s => s.id === gameState.player.location);
+            if (settlement) {
+                selectSettlement(settlement.id);
+            }
+        }
+
         function updatePlayerInfo() {
             playerNameEl.textContent = gameState.player.name;
             playerFactionEl.textContent = gameState.factions[gameState.player.faction].name;