src/server/views/monster-selector.ts

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