feat: display travel progress

When you're travelling it shows you your:
- Starting city
- Destination
- How long it will take you to get there

diff --git a/public/assets/css/game.css b/public/assets/css/game.css
index 4060899f36c8779d646649f0e12aba787a262e95..7afe6295627ce058ac4c73e848c825882b788092 100644 (file)
--- a/public/assets/css/game.css
+++ b/public/assets/css/game.css
@@ -486,6 +486,9 @@ h3 {
   gap: 1rem;
   margin-bottom: 1rem;
 }
+.travel-distance {
+  margin-bottom: 1rem;
+}
 
 
 #explore .shop-inventory-listing  {

diff --git a/src/server/views/components/progress-bar.ts b/src/server/views/components/progress-bar.ts
new file mode 100644 (file)
index 0000000..7d7677d
--- /dev/null
+++ b/src/server/views/components/progress-bar.ts
@@ -0,0 +1,14 @@
+export interface ProgressBarOptions {
+  startingColor: string;
+  endingColor: string;
+}
+
+export function ProgressBar(current: number, max: number, id: string, opts: ProgressBarOptions) {
+  let percent = 0;
+  if(max > 0) {
+    percent = Math.floor((current / max) * 100);
+  }
+
+  return `<div class="progress-bar" id="${id}" style="background: linear-gradient(to right, ${opts.startingColor}, ${opts.endingColor} ${percent}%, transparent ${percent}%, transparent)"
+title="${percent}% - ${current}/${max}">${current}/${max} - ${percent}%</div>`;
+}

diff --git a/src/server/views/travel.ts b/src/server/views/travel.ts
index 9aff00eea77a0aefafdc89be0ab83b03787a7aa2..f1775f0ab09efe0ed6aca2419735c9be1b6cc59c 100644 (file)
--- a/src/server/views/travel.ts
+++ b/src/server/views/travel.ts
@@ -1,4 +1,5 @@
 import { TravelDTO } from "../../shared/map";
+import { ProgressBar } from './components/progress-bar';
 
 export function travelButton(blockTime: number): string {
   return `<button id="keep-walking" hx-post="/travel/step" class="${blockTime ? 'disabled': ''}" data-block="${blockTime}" ${blockTime ? 'disabled': ''}>Keep Walking</button>`;
@@ -11,7 +12,15 @@ export function renderTravel(data: TravelDTO): string {
 
   let html = `<section id="explore" class="tab active" hx-swap-oob="true" style="background-image: url('/assets/img/map/${data.closestTown}.jpeg')">
 
-<div id="travelling" class="city-details">`;
+<div id="travelling" class="city-details">
+  <div class="travel-distance">
+    <p>Travelling from ${data.travelPlan.source_city_name} to ${data.travelPlan.destination_city_name}</p>
+    ${ProgressBar(data.travelPlan.current_position, data.travelPlan.total_distance, 'travel-plan', {
+      startingColor: '#d9975a',
+      endingColor: '#bb724c'
+    })}
+  </div>
+`;
   html += '<div id="travelling-actions">';
   html += travelButton(blockTime);
   if(data.things.length) {