src/server/views/map.ts

   1 import { LocationType, Location, Path, City } from "../../shared/map";
   2
   3 export async function renderMap(data: { city: City, locations: Location[], paths: Path[]}, closestTown: number): Promise<string> {
   4
   5   if(!data) {
   6     console.error('oh no.. this got triggered without any city data');
   7   }
   8
   9   const servicesParsed: Record<LocationType, string[]> = {
  10     'SERVICES': [],
  11     'STORES': [],
  12     'EXPLORE': [],
  13     'DUNGEON': []
  14   };
  15
  16   data.locations.forEach(l => {
  17     servicesParsed[l.type].push(`<a href="#" hx-get="/city/${l.type.toLowerCase()}/${l.event_name}/${l.id}" hx-target="#explore">${l.name}</a>`);
  18   });
  19
  20   let html = `
  21 <section id="explore" class="tab active" style="background-image: url('/assets/img/map/${closestTown}.jpeg')" hx-swap-oob="true">
  22 <div class="city-title-wrapper"><div class="city-title">${data.city.name}</div></div>
  23   <div class="city-details flex">`;
  24
  25   if(servicesParsed.SERVICES.length) {
  26     html += `<div><h3>Services</h3>${servicesParsed.SERVICES.join("<br>")}</div>`
  27   }
  28   if(servicesParsed.STORES.length) {
  29     html += `<div><h3>Stores</h3>${servicesParsed.STORES.join("<br>")}</div>`
  30   }
  31   if(servicesParsed.EXPLORE.length) {
  32     html += `
  33     <div><h3>Explore</h3>${servicesParsed.EXPLORE.join("<br>")}
  34     ${servicesParsed.DUNGEON.length ? `<br>${servicesParsed.DUNGEON.join("<br>")}` : ''}
  35     </div>`;
  36   }
  37   html += `
  38     <div>
  39       <h3>Travel</h3>
  40       ${data.paths.map(path => {
  41         return `<a href="#" hx-post="/travel/${path.ending_city}" hx-target="#explore">${path.ending_city_name}</a>`
  42       }).join("<br>")}
  43     </div>
  44   </div>
  45 </div>
  46 </section>
  47   `;
  48
  49   return html;
  50 };