chore(release): 0.1.0

[risinglegends.git] / src / client / index.ts

diff --git a/src/client/index.ts b/src/client/index.ts
index 9cd0ea02a979af31b81d52831be5a6b1aaa3d7f3..832eccc33038ccb4ca7f25795b5f3c326f48d7cb 100644 (file)
--- a/src/client/index.ts
+++ b/src/client/index.ts
@@ -1,6 +1,6 @@
 import { io } from 'socket.io-client';
 import $ from 'jquery';
-import {expToLevel, maxHp, Player} from '../shared/player';
+import {expToLevel, maxHp, Player, StatDef, StatDisplay} from '../shared/player';
 import { authToken, http } from './http';
 import { CustomEventManager } from './events';
 import {Fight, MonsterForFight, MonsterForList} from '../shared/monsters';
@@ -108,6 +108,7 @@ function updatePlayer() {
           </form></p>`).removeClass('hidden');
   }
 
+  $('#extra-inventory-info').html(renderStatDetails());
 }
 
 socket.on('connect', () => {
@@ -277,28 +278,27 @@ function renderEquipmentPlacementGrid(items: EquippedItemDetails[]) {
 
   return html;
 }
+function statPointIncreaser(stat: StatDisplay) {
+  return `<button class="increase-stat emit-event" data-event="spend-stat-point" data-args="${stat.id}">+</button>`;
+}
 function renderStatDetails() {
   const player: Player = cache.get('player');
-  const html = `
-  <table id="stat-breakdown">
-  <tr>
-  <th>Strength</th>
-  <td class="strength">${player.strength}</td>
-  </tr>
-  <tr>
-  <th>Constitution</th>
-  <td class="constitution">${player.constitution}</td>
-  </tr>
-  <tr>
-  <th>Dexterity</th>
-  <td class="dexterity">${player.dexterity}</td>
-  </tr>
-  <tr>
-  <th>Intelligence</th>
-  <td class="intelligence">${player.intelligence}</td>
-  </tr>
-  </table>
-  `;
+  let html = '<table id="stat-breakdown">';
+
+  StatDef.forEach(stat => {
+    html += `<tr>
+      <th>${stat.display}</th>
+      <td class="${stat.id}">
+        ${player[stat.id]}
+        ${player.stat_points ? statPointIncreaser(stat) : ''}
+      </td>
+    </tr>`;
+  });
+
+  html += `<tr><th>Stat Points</th><td class="stat_points">${player.stat_points}</td></tr>`;
+
+  html += '</table>';
+
   return html;
 }
 
@@ -461,10 +461,6 @@ events.on('renderMap', async function renderMap(data: { city: City, locations: L
   $('#map').html(html);
 });
 
-socket.on('city:service:healer', (data: {text: string}) => {
-  $('#map').html(data.text);
-});
-
 function renderRequirement(name: string, val: number | string, currentVal?: number): string {
   let colorIndicator = '';
   if(currentVal) {
@@ -502,6 +498,7 @@ function renderInventoryItem(item: EquippedItemDetails , action: (item: Equipped
       ${item.boosts.dexterity ? renderStatBoost('DEX', item.boosts.dexterity) : ''}
       ${item.boosts.intelligence ? renderStatBoost('INT', item.boosts.intelligence) : ''}
       ${item.boosts.damage ? renderStatBoost('DMG', item.boosts.damage) : ''}
+      ${item.boosts.damage_mitigation ? renderStatBoost('MIT', item.boosts.damage_mitigation)+'%' : ''}
       ${['WEAPON','SPELL'].includes(item.type) ? '': generateProgressBar(item.currentAp, item.maxAp, '#7be67b')}
       </div>
       ${item.hasOwnProperty('id') ? `<div>${item.cost.toLocaleString()}G</div>` : ''}
@@ -534,6 +531,7 @@ function renderShopItem(item: ShopItem, action: (item: ShopItem) => string): str
       ${item.boosts.dexterity ? renderStatBoost('DEX', item.boosts.dexterity) : ''}
       ${item.boosts.intelligence ? renderStatBoost('INT', item.boosts.intelligence) : ''}
       ${item.boosts.damage ? renderStatBoost(item.affectedSkills.includes('restoration_magic') ? 'HP' : 'DMG', item.boosts.damage) : ''}
+      ${item.boosts.damage_mitigation ? renderStatBoost('MIT', item.boosts.damage_mitigation)+'%' : ''}
       ${['WEAPON','SPELL'].includes(item.type) ? '' : renderStatBoost('AP', item.maxAp)}
       </div>
       ${item.hasOwnProperty('id') ? `<div>${item.cost.toLocaleString()}G</div>` : ''}
@@ -584,6 +582,16 @@ $('body').on('click', '.purchase-item', e => {
   }
 });
 
+$('body').on('click', '.emit-event', e => {
+  const $el = $(e.target);
+
+  const eventName = $el.data('event');
+  const args = $el.data('args');
+
+  console.log(`Sending event ${eventName}`, { args });
+  socket.emit(eventName, { args });
+});
+
 $('body').on('click', '.city-emit-event', e => {
   const $el = $(e.target);
 
@@ -637,7 +645,6 @@ function renderFight(monster: MonsterForFight | Fight) {
         <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>
       </div>
     </div>
-    <div id="fight-results"></div>
     <div id="fight-actions">
       <select id="fight-target">
         <option value="head">Head</option>
@@ -649,6 +656,7 @@ function renderFight(monster: MonsterForFight | Fight) {
       <button type="button" class="fight-action" data-action="cast">Cast</button>
       <button type="button" class="fight-action" data-action="flee">Flee</button>
     </div>
+    <div id="fight-results"></div>
   </div>`;
 
   return html;
@@ -683,13 +691,13 @@ socket.on('fight-over', (data: {roundData: FightRound, monsters: MonsterForFight
 
   if(monsters.length) {
     const lastSelectedMonster = cache.get('last-selected-monster');
-    html.push('<br><hr><h2>Fight Again</h2>');
-    html.push(`<form id="fight-selector"><select id="monster-selector">
+    // put this above the fight details
+    html.unshift(`<h2>Fight Again</h2><form id="fight-selector"><select id="monster-selector">
       ${monsters.map(monster => {
         return `<option value="${monster.id}" ${lastSelectedMonster == monster.id ? 'selected': ''}>${monster.name}</option>`;
       }).join("\n")}
       </select> <button type="submit">Fight</button></option>
-    </select></form>`);
+    </select></form><hr>`);
   }
 
   $('#fight-results').html(html.join("\n"));