chore(release): 0.4.0

[risinglegends.git] / src / server / views / map.ts

diff --git a/src/server/views/map.ts b/src/server/views/map.ts
index 63c3496914f47b825d38b3a41644f7e555efad32..0b6f2c255d7bb4175aef53c3281241a72c47cfe2 100644 (file)
--- a/src/server/views/map.ts
+++ b/src/server/views/map.ts
@@ -1,6 +1,6 @@
 import { LocationType, Location, Path, City } from "../../shared/map";
 
-export async function renderMap(data: { city: City, locations: Location[], paths: Path[]}): Promise<string> {
+export async function renderMap(data: { city: City, locations: Location[], paths: Path[]}, closestTown: number): Promise<string> {
 
   if(!data) {
     console.error('oh no.. this got triggered without any city data');
@@ -9,16 +9,18 @@ export async function renderMap(data: { city: City, locations: Location[], paths
   const servicesParsed: Record<LocationType, string[]> = {
     'SERVICES': [],
     'STORES': [],
-    'EXPLORE': []
+    'EXPLORE': [],
+    'DUNGEON': []
   };
 
   data.locations.forEach(l => {
-    servicesParsed[l.type].push(`<a href="#" hx-get="/city/${data.city.id}/location/${l.id}/" hx-trigger="click" id="location-${l.id}">${l.name}</a>`);
+    servicesParsed[l.type].push(`<a href="#" hx-get="/city/${l.type.toLowerCase()}/${l.event_name}/${l.id}" hx-target="#explore">${l.name}</a>`);
   });
 
-  let html = `<div hx-target="#map">
-<h1>${data.city.name}</h1>
-  <div class="city-details">`;
+  let html = `
+<section id="explore" class="tab active" style="background-image: url('/assets/img/map/${closestTown}.jpeg')" hx-swap-oob="true">
+<div class="city-title-wrapper"><div class="city-title">${data.city.name}</div></div>
+  <div class="city-details flex">`;
 
   if(servicesParsed.SERVICES.length) {
     html += `<div><h3>Services</h3>${servicesParsed.SERVICES.join("<br>")}</div>`
@@ -27,17 +29,21 @@ export async function renderMap(data: { city: City, locations: Location[], paths
     html += `<div><h3>Stores</h3>${servicesParsed.STORES.join("<br>")}</div>`
   }
   if(servicesParsed.EXPLORE.length) {
-    html += `<div><h3>Explore</h3>${servicesParsed.EXPLORE.join("<br>")}</div>`
+    html += `
+    <div><h3>Explore</h3>${servicesParsed.EXPLORE.join("<br>")}
+    ${servicesParsed.DUNGEON.length ? `<br>${servicesParsed.DUNGEON.join("<br>")}` : ''}
+    </div>`;
   }
   html += `
     <div>
       <h3>Travel</h3>
       ${data.paths.map(path => {
-        return `<a href="#" class="city-emit-event" data-event="city:travel" data-args="${path.ending_city}">${path.ending_city_name}</a>`
+        return `<a href="#" hx-post="/travel/${path.ending_city}" hx-target="#explore">${path.ending_city_name}</a>`
       }).join("<br>")}
     </div>
   </div>
 </div>
+</section>
   `;
 
   return html;