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