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