From: xangelo Date: Mon, 21 Aug 2023 20:34:03 +0000 (-0400) Subject: feat: display travel progress X-Git-Tag: v0.2.14~1 X-Git-Url: https://git.xangelo.ca/?a=commitdiff_plain;h=d66fcf80663480018b6d50a8f3fdcef7fcfce312;p=risinglegends.git 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 4060899..7afe629 100644 --- 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 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 `
${current}/${max} - ${percent}%
`; +} diff --git a/src/server/views/travel.ts b/src/server/views/travel.ts index 9aff00e..f1775f0 100644 --- 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 ``; @@ -11,7 +12,15 @@ export function renderTravel(data: TravelDTO): string { let html = `
-
`; +
+
+

Travelling from ${data.travelPlan.source_city_name} to ${data.travelPlan.destination_city_name}

+ ${ProgressBar(data.travelPlan.current_position, data.travelPlan.total_distance, 'travel-plan', { + startingColor: '#d9975a', + endingColor: '#bb724c' + })} +
+`; html += '
'; html += travelButton(blockTime); if(data.things.length) {