All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
+### [0.2.14](https://git.xangelo.ca/?p=risinglegends.git;a=commitdiff;h=v0.2.14;hp=v0.2.13;ds=sidebyside) (2023-08-21)
+
+
+### Features
+
+* display travel progress d66fcf8
+
### [0.2.13](https://git.xangelo.ca/?p=risinglegends.git;a=commitdiff;h=v0.2.13;hp=v0.2.12;ds=sidebyside) (2023-08-21)
{
"name": "rising-legends",
- "version": "0.2.13",
+ "version": "0.2.14",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "rising-legends",
- "version": "0.2.13",
+ "version": "0.2.14",
"dependencies": {
"@honeycombio/opentelemetry-node": "^0.4.0",
"@opentelemetry/auto-instrumentations-node": "^0.37.0",
{
"name": "rising-legends",
"private": true,
- "version": "0.2.13",
+ "version": "0.2.14",
"scripts": {
"up": "npx prisma migrate dev --name \"init\"",
"start": "pm2 start dist/server/api.js",
gap: 1rem;
margin-bottom: 1rem;
}
+.travel-distance {
+ margin-bottom: 1rem;
+}
#explore .shop-inventory-listing {
--- /dev/null
+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>`;
+}
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>`;
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) {