fix(repair): fix rendering of repair equipment view

We missed this when we refactored the shop/inventory views

diff --git a/src/server/views/repair.ts b/src/server/views/repair.ts
index fafc28dde5aac3a8b23709af9e1ad7ce4557c6c1..52f001a7713959b8ad1be0026e0a3d4c362c49e4 100644 (file)
--- a/src/server/views/repair.ts
+++ b/src/server/views/repair.ts
@@ -7,12 +7,17 @@ import { ProgressBar } from "./components/progress-bar";
 import * as City from './components/city';
 import { BackToTown } from "./components/button";
 
+
+type RenderStatOptions = {
+  unsigned: boolean
+}
+
 function renderStatBoost(name: string, val: number | string): string {
   let valSign: string = '';
   if(typeof val === 'number') {
     valSign = val > 0 ? '+' : '-';
   }
-  return `<span class="requirement-title">${name}</span>: <span class="requirement-value ${typeof val === 'number' ? (val > 0 ? "success": "error") : ""}">${valSign}${val}</span>`;
+  return `<div class="requirement"><span class="requirement-title">${name}</span><span class="requirement-value ${typeof val === 'number' ? (val > 0 ? "success": "error") : ""}">${valSign}${val}</span></div>`;
 }
 
 function renderRequirement(name: string, val: number | string, currentVal?: number): string {
@@ -26,7 +31,9 @@ function renderRequirement(name: string, val: number | string, currentVal?: numb
 export function renderEquipmentDetails(item: EquippedItemDetails, player: Player): string {
   return `
     <div class="details">
-      <div class="name">${item.name}${item.equipment_slot === 'TWO_HANDED' ? ' (2H)': ''}</div>
+      <div class="name">${item.name}${item.equipment_slot === 'TWO_HANDED' ? ' (2H)': ''}
+        <span class="right store-cost">${repairCost(item).toLocaleString()}G</span>
+      </div>
       <div class="requirements">
       ${item.requirements.level ? renderRequirement('LVL', item.requirements.level, player.level): ''}
       ${item.requirements.strength ? renderRequirement('STR', item.requirements.strength, player.strength): ''}
@@ -42,24 +49,27 @@ export function renderEquipmentDetails(item: EquippedItemDetails, player: Player
       ${item.boosts.dexterity ? renderStatBoost('DEX', item.boosts.dexterity) : ''}
       ${item.boosts.intelligence ? renderStatBoost('INT', item.boosts.intelligence) : ''}
       ${item.boosts.damage ? renderStatBoost(item.affectedSkills.includes('restoration_magic') ? 'HP' : 'DMG', item.boosts.damage) : ''}
-      ${item.boosts.damage_mitigation ? renderStatBoost('MIT', item.boosts.damage_mitigation.toString())+'%' : ''}
-      ${ProgressBar(item.currentAp, item.maxAp, `${item.item_id}-ap`, {
-displayPercent: false,
-title: item.type === 'SPELL' ? 'Uses' : 'Durability',
-startingColor: '#7be67b',
-endingColor: '#7be67b'
-})}
+      ${item.boosts.damage_mitigation ? renderStatBoost('MIT', item.boosts.damage_mitigation.toString()+'%') : ''}
+      </div>
+      <div class="durability-container">
+        ${ProgressBar(item.currentAp, item.maxAp, `${item.item_id}-ap`, {
+          displayPercent: false,
+          title: item.type === 'SPELL' ? 'Uses' : 'Durability',
+          startingColor: '#7be67b',
+          endingColor: '#7be67b'
+        })}
       </div>
-      <div class="store-cost">${repairCost(item).toLocaleString()}G to Repair</div>
     </div>
 `
 
 }
 
 function renderEquipmentToRepair(item: EquippedItemDetails, action: (item: EquippedItemDetails) => string, player: Player): string {
-    return `<div class="store-list">
-    <div class="store-icon" style="background-image: url('${item.icon ? `/assets/img/icons/equipment/${item.icon}` : 'https://via.placeholder.com/64x64'}')">
-      <div class="store-actions">${action(item)}</div>
+    return `<div class="list-item">
+    <div class="icon-wrapper">
+      <div class="icon" style="background-image: url('${item.icon ? `/assets/img/icons/equipment/${item.icon}` : 'https://via.placeholder.com/64x64'}')">
+      </div>
+      <div class="actions">${action(item)}</div>
     </div>
     ${renderEquipmentDetails(item, player)}
     </div>`;
@@ -108,11 +118,12 @@ export function renderRepairService(equipment: EquippedItemDetails[], player: Pl
   let html = `
     ${City.Title(location.city_name)}
     ${City.Details(location.name, `
-<div class="shop-inventory-listing filter-container">
-    <nav class="filter" id="shop-inventory-listing">${nav.join("")}</nav><div class="inventory-listing listing">
+  <div class="filter-container">
+    <nav class="filter" id="repair-listing">${nav.join("")}</nav><div class="inventory-listing listing">
       ${finalListing.join("\n")}
     </div>
   </div>
+  <br>
   ${BackToTown()}
 `)}`;