src/server/views/travel.ts

   1 import { TravelDTO } from "../../shared/map";
   2 import { ProgressBar } from './components/progress-bar';
   3 import { ButtonWithBlock } from './components/button';
   4
   5 export function travelButton(blockTime: number): string {
   6   return ButtonWithBlock({
   7     id: 'keep-walking',
   8     'hx-post': '/travel/step'
   9   }, 'Keep Walking', blockTime);
  10 }
  11
  12 export function renderTravel(data: TravelDTO): string {
  13
  14   let promptText = data.walkingText;
  15   const blockTime = data.nextAction || 0;
  16
  17   let html = `<section id="explore" class="tab active" hx-swap-oob="true" style="background-image: url('/assets/img/map/${data.closestTown}.jpeg')">
  18
  19 <div id="travelling" class="city-details">
  20   <div class="travel-distance">
  21     <p>Travelling from ${data.travelPlan.source_city_name} to ${data.travelPlan.destination_city_name}</p>
  22     ${ProgressBar(data.travelPlan.current_position, data.travelPlan.total_distance, 'travel-plan', {
  23       startingColor: '#d9975a',
  24       endingColor: '#bb724c'
  25     })}
  26   </div>
  27 `;
  28   html += '<div id="travelling-actions">';
  29   html += travelButton(blockTime);
  30   if(data.things.length) {
  31     // ok you found something, for now we only support
  32     // monsters, but eventually that will change
  33     promptText = `You see a ${data.things[0].name}`;
  34     html += `<form hx-post="/fight" hx-target="#explore">
  35 <input type="hidden" name="monsterId" value="${data.things[0].id}">
  36 <button type="submit" class="red">Fight</button>
  37 </form>`;
  38   }
  39
  40   // end #travelling-actions
  41   html += '</div>';
  42   html += `<p>${promptText}</p>`;
  43
  44   html += `<p align="right"><a href="#" hx-post="/travel/return-to-source">Return to ${data.travelPlan.source_city_name}</a></p>`;
  45
  46   html += '</div></section>';
  47
  48   return html;
  49 }