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