src/server/views/inventory.ts

   1 import { EquipmentSlot } from "shared/inventory";
   2 import { EquippedItemDetails } from "../../shared/equipped";
   3 import { PlayerItem } from "../../shared/items";
   4 import { capitalize } from "lodash";
   5 import { ProgressBar } from "./components/progress-bar";
   6
   7 function icon(icon_name?: string): string {
   8   const placeholder = 'https://placehold.co/64x64/af936c/6d5f4d';
   9   const icon = icon_name ? `/assets/img/icons/equipment/${icon_name}` : placeholder;
  10
  11   return icon;
  12 }
  13
  14 function renderEquipmentPlacementGrid(items: EquippedItemDetails[]) {
  15   // @ts-ignore
  16   const map: Record<EquipmentSlot, EquippedItemDetails> = items.filter(item => item.is_equipped).reduce((acc, item) => {
  17     acc[item.equipment_slot] = item;
  18     return acc;
  19   }, {});
  20
  21   const html = `
  22 <table id="character-equipment-placement">
  23 <tr>
  24 <td>
  25 </td>
  26 <td style="background-image: url('${icon(map.HEAD?.icon)}');" title="${map.HEAD ? map.HEAD.name : 'Empty'}">
  27 ${map.HEAD ? (map.HEAD.icon ? '' : map.HEAD.name) : 'HEAD'}
  28 </td>
  29 <td style="background-image: url('${icon(map.ARMS?.icon)}');" title="${map.ARMS ? map.ARMS.name : 'Empty'}">
  30 ${map.ARMS ? (map.ARMS.icon ? '' : map.ARMS.name) : 'ARMS'}
  31 </td>
  32 </tr>
  33 <tr>
  34 <td style="background-image: url('${icon(map.LEFT_HAND ? map.LEFT_HAND.icon : map.TWO_HANDED?.icon)}');" title="${map.LEFT_HAND ? map.LEFT_HAND.name : (map.TWO_HANDED ? map.TWO_HANDED.name : '')}">
  35 ${map.LEFT_HAND ? (map.LEFT_HAND.icon ? '' : map.LEFT_HAND.name) : (map.TWO_HANDED ? (map.TWO_HANDED.icon ? '' : map.TWO_HANDED.name) : 'L_HAND')}
  36 </td>
  37 <td style="background-image: url('${icon(map.CHEST?.icon)}');" title="${map.CHEST ? map.CHEST.name : ''}">
  38 ${map.CHEST ? (map.CHEST.icon ? '' : map.CHEST.name) : 'CHEST'}
  39 </td>
  40 <td style="background-image: url('${icon(map.RIGHT_HAND ? map.RIGHT_HAND.icon : map.TWO_HANDED?.icon)}');" title="${map.RIGHT_HAND ? map.RIGHT_HAND.name : (map.TWO_HANDED ? map.TWO_HANDED.name : '')}">
  41 ${map.RIGHT_HAND ? (map.RIGHT_HAND.icon ? '' : map.RIGHT_HAND.name) : (map.TWO_HANDED ? (map.TWO_HANDED.icon ? '' : map.TWO_HANDED.name) : 'R_HAND')}
  42 </td>
  43 </tr>
  44 <tr>
  45 <td>
  46 </td>
  47 <td style="background-image: url('${icon(map.LEGS?.icon)}');" title="${map.LEGS ? map.LEGS.name : ''}">
  48 ${map.LEGS ? (map.LEGS.icon ? '' : map.LEGS.name) : 'LEGS'}
  49 </td>
  50 <td>
  51 </td>
  52 </tr>
  53 </table>
  54 `;
  55
  56   return html;
  57 }
  58
  59 function renderInventoryItems(items: PlayerItem[]): string {
  60   return items.map(item => {
  61     return `
  62 <div class="player-item" hx-get="/modal/items/${item.item_id}" hx-target="#modal-wrapper">
  63 <img src="/assets/img/icons/items/${item.icon_name}" title="${item.name}">
  64 <span class="amount">${item.amount.toLocaleString()}</span>
  65 </div>`;
  66   }).join("<br>");
  67 }
  68
  69
  70 function renderRequirement(name: string, val: number | string, currentVal?: number): string {
  71   let colorIndicator = '';
  72   if(currentVal) {
  73     colorIndicator = currentVal >= val ? 'success' : 'error';
  74   }
  75   return `<span class="requirement-title">${name}</span>: <span class="requirement-value ${colorIndicator}">${val.toLocaleString()}</span>`;
  76 }
  77
  78 function renderStatBoost(name: string, val: number | string): string {
  79   let valSign: string = '';
  80   if(typeof val === 'number') {
  81     valSign = val > 0 ? '+' : '-';
  82   }
  83   return `<span class="requirement-title">${name}</span>: <span class="requirement-value ${typeof val === 'number' ? (val > 0 ? "success": "error") : ""}">${valSign}${val}</span>`;
  84 }
  85
  86 function renderInventoryItem(item: EquippedItemDetails , action: (item: EquippedItemDetails) => string): string {
  87   return `<div class="store-list">
  88     <div class="inventory-icon" style="background-image: url('${icon(item.icon)}')">
  89     </div>
  90     <div class="details">
  91       <div class="name">${item.name}</div>
  92       <div class="requirements">
  93         ${item.requirements.level ? renderRequirement('LVL', item.requirements.level): ''}
  94         ${item.requirements.strength ? renderRequirement('STR', item.requirements.strength): ''}
  95         ${item.requirements.constitution ? renderRequirement('CON', item.requirements.constitution): ''}
  96         ${item.requirements.dexterity ? renderRequirement('DEX', item.requirements.dexterity): ''}
  97         ${item.requirements.intelligence ? renderRequirement('INT', item.requirements.intelligence): ''}
  98         ${renderRequirement('PRF', item.profession)}
  99       </div>
 100       <div class="stat-mods">
 101         ${item.boosts.defence ? renderStatBoost('DEF', item.boosts.defence) : ''}
 102         ${item.boosts.strength ? renderStatBoost('STR', item.boosts.strength) : ''}
 103         ${item.boosts.constitution ? renderStatBoost('CON', item.boosts.constitution) : ''}
 104         ${item.boosts.dexterity ? renderStatBoost('DEX', item.boosts.dexterity) : ''}
 105         ${item.boosts.intelligence ? renderStatBoost('INT', item.boosts.intelligence) : ''}
 106         ${item.boosts.damage ? renderStatBoost('DMG', item.boosts.damage) : ''}
 107         ${item.boosts.damage_mitigation ? renderStatBoost('MIT', item.boosts.damage_mitigation.toString())+'%' : ''}
 108         ${ProgressBar(item.currentAp, item.maxAp, `dur-${item.item_id}`, {
 109           startingColor: '#7be67b',
 110           endingColor: '#7be67b',
 111           displayPercent: false,
 112           title: item.type === 'SPELL' ? 'Uses' : 'Durability'
 113         })}
 114       </div>
 115       ${item.hasOwnProperty('id') ? `<div>${item.cost.toLocaleString()}G</div>` : ''}
 116       </div>
 117       <div class="inventory-actions">
 118         ${action(item)}
 119       </div>
 120     </div>`;
 121 }
 122
 123 function renderInventorySection(inventory: EquippedItemDetails[]): string {
 124   return inventory.map(item => {
 125     return renderInventoryItem(item, item => {
 126       if(item.is_equipped) {
 127         return `<button type="button" class="unequip-item red" hx-post="/player/unequip/${item.item_id}">Unequip</button>`;
 128       }
 129       else {
 130         if(item.equipment_slot === 'ANY_HAND') {
 131           return `<button type="button" class="equip-item" hx-post="/player/equip/${item.item_id}/LEFT_HAND">Equip L</button>
 132 <button type="button" class="equip-item" hx-post="/player/equip/${item.item_id}/RIGHT_HAND">Equip R</button>`;
 133         }
 134         else if(item.equipment_slot === 'LEFT_HAND') {
 135           return `<button type="button" class="equip-item" hx-post="/player/equip/${item.item_id}/${item.equipment_slot}">Equip Left</button>`;
 136         }
 137         else if(item.equipment_slot === 'RIGHT_HAND') {
 138           return `<button type="button" class="equip-item" hx-post="/player/equip/${item.item_id}/${item.equipment_slot}">Equip Right</button>`;
 139         }
 140         else {
 141           return `<button type="button" class="equip-item" hx-post="/player/equip/${item.item_id}/${item.equipment_slot}">Equip</button>`;
 142         }
 143       }
 144     })
 145   }).join("\n");
 146 }
 147
 148
 149 export function renderInventoryPage(inventory: EquippedItemDetails[], items: PlayerItem[], requestedSlot: string = 'ARMOUR') {
 150   const sectionedInventory: {ARMOUR: EquippedItemDetails[], WEAPON: EquippedItemDetails[], SPELL: EquippedItemDetails[], ITEMS: PlayerItem[]} = {
 151     ARMOUR: [],
 152     WEAPON: [],
 153     SPELL: [],
 154     ITEMS: []
 155   };
 156
 157   inventory.forEach(item => {
 158     sectionedInventory[item.type].push(item);
 159   });
 160   items.forEach(item => {
 161     sectionedInventory.ITEMS.push(item);
 162   });
 163
 164   const html = `
 165   <div id="inventory-page" hx-target="section#inventory" hx-swap="true">
 166     <div id="character-summary">
 167       ${renderEquipmentPlacementGrid(inventory)}
 168     </div>
 169     <div id="inventory-section" class="filter-container">
 170       <nav class="filter" id="inventory-section">
 171         ${Object.keys(sectionedInventory).map((type) => {
 172           return `<a href="#" data-filter="${type}" class="${type === requestedSlot ? 'active': ''}">${capitalize(type)}</a>`;
 173         }).join("")}
 174       </nav>
 175
 176       <div class="inventory-listing listing">
 177         ${Object.keys(sectionedInventory).map((type) => {
 178           return `<div class="filter-result inventory-${type} ${type === requestedSlot ? 'active': 'hidden'}" data-filter="${type}" id="filter_${type}">
 179           ${type === 'ITEMS' ? renderInventoryItems(sectionedInventory[type]) : renderInventorySection(sectionedInventory[type])}
 180           </div>`;
 181         }).join("")}
 182       </div>
 183     </div>
 184   </div>
 185   `;
 186
 187   return html;
 188
 189 }