src/server/views/player-bar.ts

   1 import { expToLevel, maxHp, maxVigor, Player } from "../../shared/player";
   2 import { ProgressBar } from "./components/progress-bar";
   3
   4 function displayLoginSignupForm(): string {
   5   return `
   6   <details id="signup-prompt" hx-swap-oob="true" open>
   7     <summary>
   8       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.
   9     </summary>
  10     <form id="signup" hx-post="/auth" hx-swap="none">
  11       <div class="form-group">
  12         <label>Username:</label>
  13         <input type="text" name="username">
  14       </div>
  15       <div class="form-group">
  16         <label>Password:</label>
  17         <input type="password" name="password">
  18       </div>
  19       <button type="submit" name="authType" value="signup">Create your Account</button>
  20       <button type="submit" name="authType" value="login" id="login">Login To Existing Account</button>
  21     </form>
  22   </details>
  23 `
  24
  25 }
  26
  27 export function renderPlayerBar(player: Player): string {
  28   return `
  29     <div id="stat-bars" hx-swap-oob="true">
  30       <div id="player-section">
  31         <div id="username">${player.username}, level ${player.level} ${player.profession}</div>
  32         <div class="gold">${player.gold.toLocaleString()}</div>
  33       </div>
  34       ${ProgressBar(player.hp, maxHp(player.constitution, player.level), 'hp-bar', { endingColor: '#ff7070', startingColor: '#d62f2f', title: 'HP', displayPercent: true })}
  35       ${ProgressBar(player.vigor, maxVigor(player.constitution, player.level), 'vigor-bar', { endingColor: '#5ebb5e', startingColor: '#7be67b', title: 'Vigor', displayPercent: true})}
  36       ${ProgressBar(player.exp, expToLevel(player.level + 1), 'exp-bar', { endingColor: '#5997f9', startingColor: '#1d64d4', title: 'EXP', displayPercent: true})}
  37     </div>
  38     ${player.account_type === 'session' ? displayLoginSignupForm() : ''}
  39   `;
  40
  41 }