src/server/views/travel.ts

   1 import { TravelDTO } from "../../shared/map";
   2
   3 export function travelButton(blockTime: number): string {
   4   return `<button id="keep-walking" hx-post="/travel/step" class="${blockTime ? 'disabled': ''}" data-block="${blockTime}" ${blockTime ? 'disabled': ''}>Keep Walking</button>`;
   5 }
   6
   7 export function renderTravel(data: TravelDTO): string {
   8
   9   let promptText = data.walkingText;
  10   const blockTime = data.nextAction || 0;
  11
  12   /*
  13   if(blockTime) {
  14     updateStepButton();
  15   }
  16   */
  17
  18   let html = `<section id="explore" class="tab active" hx-swap-oob="true" style="background-image: linear-gradient(to left top, rgba(255,255,255,0) 0%,rgb(255,255,255) 100%), linear-gradient(to left, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 100%), url('/assets/img/map/${data.closestTown}.jpeg')">
  19 <div id="travelling">`;
  20   html += '<div id="travelling-actions">';
  21   html += travelButton(blockTime);
  22   if(data.things.length) {
  23     // ok you found something, for now we only support
  24     // monsters, but eventually that will change
  25     promptText = `You see a ${data.things[0].name}`;
  26     html += `<form hx-post="/fight" hx-target="#explore">
  27 <input type="hidden" name="monsterId" value="${data.things[0].id}">
  28 <button type="submit">Fight</button>
  29 </form>`;
  30   }
  31
  32   // end #travelling-actions
  33   html += '</div>';
  34   html += `<p>${promptText}</p>`;
  35
  36   html += '</div></section>';
  37
  38   return html;
  39 }