src/server/views/fight.ts

   1 import { FightRound } from "shared/fight";
   2 import { MonsterForFight } from "../../shared/monsters";
   3
   4 export function renderRoundDetails(roundData: FightRound): string {
   5   let html: string[] = roundData.roundDetails.map(d => `<div>${d}</div>`);
   6
   7   switch(roundData.winner) {
   8     case 'player':
   9       html.push(`<div>You defeated the ${roundData.monster.name}!</div>`);
  10       if(roundData.rewards.gold) {
  11         html.push(`<div>You gained ${roundData.rewards.gold} gold`);
  12       }
  13       if(roundData.rewards.exp) {
  14         html.push(`<div>You gained ${roundData.rewards.exp} exp`);
  15       }
  16       if(roundData.rewards.levelIncrease) {
  17         html.push(`<div>You gained a level! ${roundData.player.level}`);
  18       }
  19     break;
  20     case 'monster':
  21       // prompt to return to town and don't let them do anything
  22       html.push(`<p>You were killed...</p>`);
  23       html.push('<p><button hx-get="/player/explore" hx-target="#explore">Back to Town</button></p>');
  24     break;
  25     case 'in-progress':
  26       // still in progress?
  27       console.log('in progress still');
  28     break;
  29   }
  30
  31
  32   return html.join("\n");
  33 }
  34
  35 export function renderFight(monster: MonsterForFight, results: string = '', displayFightActions: boolean = true) {
  36   const hpPercent = Math.floor((monster.hp / monster.maxHp) * 100);
  37
  38   let html = `<div id="fight-container">
  39     <div id="defender-info">
  40       <div class="avatar-container">
  41         <img id="avatar" src="https://via.placeholder.com/64x64">
  42       </div>
  43       <div id="defender-stat-bars">
  44         <div id="defender-name">${monster.name}</div>
  45         <div class="progress-bar" id="defender-hp-bar" style="background: linear-gradient(to right, red, red ${hpPercent}%, transparent ${hpPercent}%, transparent)" title="${hpPercent}% - ${monster.hp}/${monster.maxHp}">${hpPercent}% - ${monster.hp} / ${monster.maxHp}</div>
  46       </div>
  47     </div>
  48     <div id="fight-actions">
  49       ${displayFightActions ? `
  50       <form hx-post="/fight/turn" hx-target="#fight-container">
  51         <select id="fight-target" name="fightTarget">
  52           <option value="head">Head</option>
  53           <option value="body">Body</option>
  54           <option value="arms">Arms</option>
  55           <option value="legs">Legs</option>
  56         </select>
  57         <button type="submit" class="fight-action" name="action" value="attack">Attack</button>
  58         <button type="submit" class="fight-action" name="action" value="cast">Cast</button>
  59         <button type="submit" class="fight-action" name="action" value="flee">Flee</button>
  60       </form>
  61       `: ''}
  62       </div>
  63   </form>
  64     <div id="fight-results">${results}</div>
  65   </div>`;
  66
  67   return html;
  68 }