src/server/views/player-bar.ts

   1 import { EquippedItemDetails } from "shared/equipped";
   2 import { EquipmentSlot } from "shared/inventory";
   3 import { expToLevel, maxHp, Player } from "../../shared/player";
   4
   5 function generateProgressBar(current: number, max: number, color: string, displayPercent: boolean = true): string {
   6   let percent = 0;
   7   if(max > 0) {
   8     percent = Math.floor((current / max) * 100);
   9   }
  10   const display = `${displayPercent? `${percent}% - `: ''}`;
  11   return `<div class="progress-bar" style="background: linear-gradient(to right, ${color}, ${color} ${percent}%, transparent ${percent}%, transparent)" title="${display}${current}/${max}">${display}${current}/${max}</div>`;
  12 }
  13
  14 function calcAp(inventoryItem: EquippedItemDetails[]): string {
  15   const ap: Record<any | EquipmentSlot, {currentAp: number, maxAp: number}> = {};
  16   inventoryItem.forEach(item => {
  17     if(item.is_equipped && item.type === 'ARMOUR') {
  18       ap[item.equipment_slot] = {
  19         currentAp: item.currentAp,
  20         maxAp: item.maxAp
  21       };
  22     }
  23   });
  24
  25   return `
  26   <div>
  27     <img src="/assets/img/helm.png" class="icon">
  28     ${generateProgressBar(ap.HEAD?.currentAp || 0, ap.HEAD?.maxAp || 0, '#7be67b')}
  29   </div>
  30   <div>
  31     <img src="/assets/img/arms.png" class="icon">
  32     ${generateProgressBar(ap.ARMS?.currentAp || 0, ap.ARMS?.maxAp || 0, '#7be67b')}
  33   </div>
  34   <div>
  35     <img src="/assets/img/chest.png" class="icon">
  36     ${generateProgressBar(ap.CHEST?.currentAp || 0, ap.CHEST?.maxAp || 0, '#7be67b')}
  37   </div>
  38   <div>
  39     <img src="/assets/img/legs.png" class="icon">
  40     ${generateProgressBar(ap.LEGS?.currentAp || 0, ap.LEGS?.maxAp || 0, '#7be67b')}
  41   </div>
  42 `;
  43 }
  44
  45 function progressBar(current: number, max: number, id: string, color: string) {
  46   let percent = 0;
  47   if(max > 0) {
  48     percent = Math.floor((current / max) * 100);
  49   }
  50
  51   return `<div class="progress-bar" id="${id}" style="background: linear-gradient(to right, ${color}, ${color} ${percent}%, transparent ${percent}%, transparent)"
  52 title="${percent}% - ${current}/${max}">${current}/${max} - ${percent}</div>`;
  53 }
  54
  55 export function renderPlayerBar(player: Player, inventory: EquippedItemDetails[]): string {
  56   return `
  57     <div id="stat-bars" hx-swap-oob="true">
  58       <div id="player-section">
  59         <div id="username">${player.username}, level ${player.level} ${player.profession}</div>
  60         <div class="gold">${player.gold.toLocaleString()}</div>
  61       </div>
  62       <div id="ap-bar">${calcAp(inventory)}</div>
  63       ${progressBar(player.hp, maxHp(player.constitution, player.level), 'hp-bar', '#ff7070')}
  64       ${progressBar(player.exp, expToLevel(player.level + 1), 'exp-bar', '#5997f9')}
  65     </div>
  66   `;
  67
  68 }