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 displayLoginSignupForm(): string {
   6   return `
   7 <div id="signup-prompt" hx-swap-oob="true">
   8   <p>Hey there! It looks like you're using a SESSION account. This allows you to play right away, but the account is tied to your current device, and will be lost if you ever clear your cookies.</p><p>
   9   <form id="signup" hx-post="/auth" hx-swap="none">
  10   <div class="form-group">
  11   <label>Username:</label>
  12   <input type="text" name="username">
  13   </div>
  14   <div class="form-group">
  15   <label>Password:</label>
  16   <input type="password" name="password">
  17   </div>
  18   <button type="submit" name="authType" value="signup">Create your Account</button>
  19   <button type="submit" name="authType" value="login" id="login">Login To Existing Account</button>
  20   </form></p>
  21 </div>
  22 `
  23
  24 }
  25
  26 function generateProgressBar(current: number, max: number, color: string, displayPercent: boolean = true): string {
  27   let percent = 0;
  28   if(max > 0) {
  29     percent = Math.floor((current / max) * 100);
  30   }
  31   const display = `${displayPercent? `${percent}% - `: ''}`;
  32   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>`;
  33 }
  34
  35 function calcAp(inventoryItem: EquippedItemDetails[]): string {
  36   const ap: Record<any | EquipmentSlot, {currentAp: number, maxAp: number}> = {};
  37   inventoryItem.forEach(item => {
  38     if(item.is_equipped && item.type === 'ARMOUR') {
  39       ap[item.equipment_slot] = {
  40         currentAp: item.currentAp,
  41         maxAp: item.maxAp
  42       };
  43     }
  44   });
  45
  46   return `
  47   <div>
  48     <img src="/assets/img/helm.png" class="icon">
  49     ${generateProgressBar(ap.HEAD?.currentAp || 0, ap.HEAD?.maxAp || 0, '#7be67b')}
  50   </div>
  51   <div>
  52     <img src="/assets/img/arms.png" class="icon">
  53     ${generateProgressBar(ap.ARMS?.currentAp || 0, ap.ARMS?.maxAp || 0, '#7be67b')}
  54   </div>
  55   <div>
  56     <img src="/assets/img/chest.png" class="icon">
  57     ${generateProgressBar(ap.CHEST?.currentAp || 0, ap.CHEST?.maxAp || 0, '#7be67b')}
  58   </div>
  59   <div>
  60     <img src="/assets/img/legs.png" class="icon">
  61     ${generateProgressBar(ap.LEGS?.currentAp || 0, ap.LEGS?.maxAp || 0, '#7be67b')}
  62   </div>
  63 `;
  64 }
  65
  66 function progressBar(current: number, max: number, id: string, color: string) {
  67   let percent = 0;
  68   if(max > 0) {
  69     percent = Math.floor((current / max) * 100);
  70   }
  71
  72   return `<div class="progress-bar" id="${id}" style="background: linear-gradient(to right, ${color}, ${color} ${percent}%, transparent ${percent}%, transparent)"
  73 title="${percent}% - ${current}/${max}">${current}/${max} - ${percent}</div>`;
  74 }
  75
  76 export function renderPlayerBar(player: Player, inventory: EquippedItemDetails[]): string {
  77   return `
  78     <div id="stat-bars" hx-swap-oob="true">
  79       <div id="player-section">
  80         <div id="username">${player.username}, level ${player.level} ${player.profession}</div>
  81         <div class="gold">${player.gold.toLocaleString()}</div>
  82       </div>
  83       <div id="ap-bar">${calcAp(inventory)}</div>
  84       ${progressBar(player.hp, maxHp(player.constitution, player.level), 'hp-bar', '#ff7070')}
  85       ${progressBar(player.exp, expToLevel(player.level + 1), 'exp-bar', '#5997f9')}
  86     </div>
  87     ${player.account_type === 'session' ? displayLoginSignupForm() : ''}
  88   `;
  89
  90 }