src/server/views/profile.ts

   1 import { EquippedItemDetails } from "../../shared/equipped";
   2 import { expToLevel, maxHp, maxVigor, Player, StatDef, StatDisplay, totalDefence } from "../../shared/player";
   3
   4 function statPointIncreaser(stat: StatDisplay) {
   5   return `<button class="increase-stat" hx-post="/player/stat/${stat.id}" hx-target="#profile">+</button>`;
   6 }
   7
   8 export function renderProfilePage(player: Player, equipment: EquippedItemDetails[]): string {
   9
  10   let statBreakdown = '';
  11
  12   StatDef.forEach(stat => {
  13     statBreakdown += `<tr>
  14       <th title="${stat.description}" tabindex="0">${stat.display}</th>
  15       <td class="${stat.id}">
  16         ${player[stat.id].toLocaleString()}
  17         ${player.stat_points ? statPointIncreaser(stat) : ''}
  18       </td>
  19     </tr>`;
  20   });
  21
  22   const html = `<div id="extra-inventory-info">
  23   <table class="stat-breakdown">
  24     <tr>
  25       <th title="The total amount of damage you can take before you pass out" tabindex="0">HP</th>
  26       <td>${player.hp.toLocaleString()}/${maxHp(player.constitution, player.level).toLocaleString()}</td>
  27     </tr>
  28     <tr>
  29       <th title="Your energy level. Low vigor will cause your overall defence and damage to drop." tabindex="0">Vigor</th>
  30       <td>${player.vigor.toLocaleString()}/${maxVigor(player.constitution, player.level).toLocaleString()}</td>
  31     </tr>
  32     <tr>
  33       <th title="How many experience points you need to get to your next level" tabindex="0">EXP</th>
  34       <td>${player.exp.toLocaleString()}/${expToLevel(player.level + 1).toLocaleString()}</td>
  35     </tr>
  36     <tr>
  37       <th title="The max defence you can have (and your true defence affected by your vigor)" tabindex="0">Defence</th>
  38       <td>${totalDefence(equipment, player, false).toLocaleString()} (${totalDefence(equipment, player).toLocaleString()})</td>
  39     </tr>
  40     <tr>
  41       <th title="You can use these to increase the base stats below" tabindex="0">Stat Points</th>
  42       <td class="stat_points">${player.stat_points}</td>
  43     </tr>
  44     ${statBreakdown}
  45   </table>
  46   </div>
  47   <div id="announcements">
  48 <p>Hi, thanks for checking out this VERY early build of Rising Legends.</p>
  49 <p>If you have any questions or run into any bugs, feel free to drop an email on our mailing list: <a href="mailto:~xangelo/rising-legends-discuss@lists.sr.ht">~xangelo/rising-legends-discuss@lists.sr.ht</a>
  50   </div>
  51 `;
  52
  53   return html;
  54 }