fix: background not appearing if reload during fight

If you reload during a fight the city background was not properly
appearing. You would need to complete the fight, then revisit the
Explore tab for the city background to load.

diff --git a/src/server/api.ts b/src/server/api.ts
index 923e716bba6ee4571987fa99ec072269389ec565..8a7eec80dc29f03b1363e194597a55b4839a6abe 100644 (file)
--- a/src/server/api.ts
+++ b/src/server/api.ts
@@ -544,8 +544,13 @@ async function blockPlayerInFight(req: AuthRequest, res: Response, next) {
 
 app.get('/player/explore', authEndpoint, async (req: AuthRequest, res: Response) => {
   const fight = await loadMonsterFromFight(req.player.id);
+  const travelPlan = await getTravelPlan(req.player.id);
   let closestTown = req.player.city_id;
 
+  if(travelPlan) {
+      closestTown = (travelPlan.current_position / travelPlan.total_distance) > 0.5 ? travelPlan.destination_id : travelPlan.source_id;
+  }
+
   const equippedItems = await getEquippedItems(req.player.id);
   if(fight) {
     const data: MonsterForFight = {
@@ -558,20 +563,16 @@ app.get('/player/explore', authEndpoint, async (req: AuthRequest, res: Response)
     };
     const location = await getMonsterLocation(fight.ref_id);
 
-    res.send(renderPlayerBar(req.player, equippedItems) + renderFightPreRound(data, true, location));
+
+    res.send(renderPlayerBar(req.player, equippedItems) + renderFightPreRound(data, true, location, closestTown));
   }
   else {
-    const travelPlan = await getTravelPlan(req.player.id);
     if(travelPlan) {
       // traveling!
-      const travelPlan = await getTravelPlan(req.player.id);
-
-      const closest: number = (travelPlan.current_position / travelPlan.total_distance) > 0.5 ? travelPlan.destination_id : travelPlan.source_id;
-
       const chanceToSeeMonster = random(0, 100);
       const things: any[] = [];
       if(chanceToSeeMonster <= 30) {
-        const monster = await getRandomMonster([closest]);
+        const monster = await getRandomMonster([closestTown]);
         things.push(monster);
       }
 
@@ -581,7 +582,7 @@ app.get('/player/explore', authEndpoint, async (req: AuthRequest, res: Response)
       res.send(renderPlayerBar(req.player, equippedItems) + renderTravel({
         things,
         nextAction,
-        closestTown: closest,
+        closestTown: closestTown,
         walkingText: '',
         travelPlan
       }));
@@ -902,7 +903,7 @@ app.post('/fight', authEndpoint, async (req: AuthRequest, res: Response) => {
     fight_trigger: fight.fight_trigger
   };
 
-  res.send(renderFightPreRound(data, true, location));
+  res.send(renderFightPreRound(data, true, location, location.city_id));
 });
 
 app.post('/travel/step', authEndpoint, async (req: AuthRequest, res: Response) => {

diff --git a/src/server/views/fight.ts b/src/server/views/fight.ts
index 4663c62a9d476dda531363bb0d0635477e1a4761..400a7d82520d19f3ffa9dae9fa5231ed7ecd8509 100644 (file)
--- a/src/server/views/fight.ts
+++ b/src/server/views/fight.ts
@@ -69,10 +69,11 @@ export function renderFight(monster: MonsterForFight, results: string = '', disp
   return html;
 }
 
-export function renderFightPreRound(monster: MonsterForFight,  displayFightActions: boolean = true, location: LocationWithCity) {
+export function renderFightPreRound(monster: MonsterForFight,  displayFightActions: boolean = true, location: LocationWithCity, closestTown: number) {
   const hpPercent = Math.floor((monster.hp / monster.maxHp) * 100);
 
   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">${location.city_name}</div>
   </div>
@@ -106,7 +107,9 @@ export function renderFightPreRound(monster: MonsterForFight,  displayFightActio
       </div>
     <div id="fight-results"></div>
   </div>
-</div>`;
+</div>
+</section>
+`;
 
   return html;
 }

diff --git a/src/server/views/map.ts b/src/server/views/map.ts
index 76a546b9914dbf38b0d26c86f2f2faa92a11f644..e432ebd31a0e49b6f8ab29ed2bb05de6d79242fc 100644 (file)
--- a/src/server/views/map.ts
+++ b/src/server/views/map.ts
@@ -39,6 +39,7 @@ export async function renderMap(data: { city: City, locations: Location[], paths
     </div>
   </div>
 </div>
+</section>
   `;
 
   return html;