src/server/views/monster-selector.ts

   1 import { LocationWithCity } from "../../shared/map";
   2 import { Monster, MonsterForFight } from "../../shared/monsters";
   3
   4 export function renderOnlyMonsterSelector(monsters: Monster[] | MonsterForFight[], activeMonsterId: number = 0, location?: LocationWithCity): string {
   5   let html = `
   6 <div class="city-title-wrapper">
   7   <div class="city-title">${location?.city_name}</div>
   8 </div>
   9 <div class="city-details">
  10   <h3 class="location-name"><span>${location?.name}</span></h3>
  11   ${renderMonsterSelector(monsters, activeMonsterId, location)}
  12 </div>
  13 `;
  14
  15   return html;
  16 }
  17
  18 export function renderMonsterSelector(monsters: Monster[] | MonsterForFight[], activeMonsterId: number = 0, location?: LocationWithCity): string {
  19   let html = `
  20 <div class="service-in-town"><form id="fight-selector" hx-post="/fight" hx-target="#explore">
  21   <input type="hidden" name="fightTrigger" value="explore">
  22   <select id="monsterId" name="monsterId">
  23   ${monsters.map((monster: (Monster | MonsterForFight)) => {
  24       return `<option value="${monster.id}" ${monster.id === activeMonsterId ? 'selected': ''}>${monster.name}</option>`;
  25   }).join("\n")}
  26   </select> <button type="submit" class="red">Fight</button></form></div>
  27 `;
  28
  29   return html;
  30 }