From: xangelo <me@xangelo.ca>
Date: Fri, 18 Aug 2023 18:18:28 +0000 (-0400)
Subject: fix: move purchase button under icon in stores
X-Git-Tag: v0.2.10~3
X-Git-Url: https://git.xangelo.ca/?a=commitdiff_plain;h=93aeef588a8d8a58b49cf70e6f763dba0dab438e;p=risinglegends.git

fix: move purchase button under icon in stores
---

diff --git a/public/assets/css/game.css b/public/assets/css/game.css
index b29a4ec..55a52fc 100644
--- a/public/assets/css/game.css
+++ b/public/assets/css/game.css
@@ -513,14 +513,10 @@ h3 {
 .store-list {
   display: flex;
   text-align: left;
-  margin: 0 0 0.3rem 0.3rem;
-}
-.store-list:last-child {
-  margin-bottom: 0;
+  padding: 0.5rem;
 }
-.store-list img {
-  width: 64px;
-  height: 64px;
+.store-list:nth-child(even) {
+  background-color: #f2f0ec;
 }
 .store-list .details {
   padding: 0 0.4rem;
@@ -530,19 +526,49 @@ h3 {
 .store-list .name {
   font-weight: bold;
 }
+.requirements {
+  margin-top: 0.5rem;
+  line-height: 1.3rem;
+}
 .requirement-title {
   font-weight: bold;
   text-transform: capitalize;
 }
+.store-cost {
+  margin-top: 0.5rem;
+}
+.store-icon {
+  width: 64px;
+  height: calc(64px + 27px);
+  padding: 0;
+  background-repeat: no-repeat;
+  background-size: contain;
+  position: relative;
+  margin-right: 0.5rem;
+}
+.inventory-icon {
+  width: 64px;
+  height: 64px;;
+  padding: 0;
+  background-repeat: no-repeat;
+  background-size: contain;
+  position: relative;
+  margin-right: 0.5rem;
+}
 .store-actions {
-  width: 75px;
-  margin: 0.3rem;
-  align-items: center;
-  display: flex;
-  flex-direction: column;
+  width: 100%;
+  position: absolute;
+  bottom: 0;
 }
 .store-actions button {
-  width: 75px;
+  width: 100%;
+  padding: 0.3rem 0.5rem;
+}
+.inventory-actions {
+  width: 74px;
+}
+.inventory-actions button {
+  width: 100%;
   padding: 0.3rem 0.5rem;
 }
 
diff --git a/src/server/views/inventory.ts b/src/server/views/inventory.ts
index c027dd0..adf4105 100644
--- a/src/server/views/inventory.ts
+++ b/src/server/views/inventory.ts
@@ -93,8 +93,7 @@ function generateProgressBar(current: number, max: number, color: string, displa
 
 function renderInventoryItem(item: EquippedItemDetails , action: (item: EquippedItemDetails) => string): string {
   return `<div class="store-list">
-    <div>
-      <img src="${icon(item.icon)}">
+    <div class="inventory-icon" style="background-image: url('${icon(item.icon)}')">
     </div>
     <div class="details">
       <div class="name">${item.name}</div>
@@ -117,7 +116,7 @@ function renderInventoryItem(item: EquippedItemDetails , action: (item: Equipped
       </div>
       ${item.hasOwnProperty('id') ? `<div>${item.cost.toLocaleString()}G</div>` : ''}
       </div>
-      <div class="store-actions">
+      <div class="inventory-actions">
         ${action(item)}
       </div>
     </div>`;
diff --git a/src/server/views/stores.ts b/src/server/views/stores.ts
index 08745f7..81b2273 100644
--- a/src/server/views/stores.ts
+++ b/src/server/views/stores.ts
@@ -22,18 +22,15 @@ function renderRequirement(name: string, val: number | string, currentVal?: numb
 
 function renderShopItem(item: (ShopItem & Item), action: (item: (ShopItem & Item)) => string): string {
     return `<div class="store-list">
-    <div>
-      <img src="/assets/img/icons/items/${item.icon_name}" title="${item.name}">
+    <div class="store-icon">
+      <img src="/assets/img/icons/items/${item.icon_name}" title="${item.name}"><div class="store-actions">${action(item)}</div>
     </div>
     <div class="details">
       <div class="name">${item.name}</div>
       <div class="requirements">
         ${item.description}
       </div>
-      ${item.hasOwnProperty('id') ? `<div>${item.price_per_unit.toLocaleString()}G</div>` : ''}
-    </div>
-    <div class="store-actions">
-      ${action(item)}
+      ${item.hasOwnProperty('id') ? `<div class="store-cost">${item.price_per_unit.toLocaleString()}G</div>` : ''}
     </div>
     </div>`;
 }
@@ -59,7 +56,7 @@ export function renderEquipmentDetails(item: ShopEquipment, player: Player): str
       ${item.boosts.damage_mitigation ? renderStatBoost('MIT', item.boosts.damage_mitigation.toString())+'%' : ''}
       ${['WEAPON','SPELL'].includes(item.type) ? '' : renderStatBoost('AP', item.maxAp.toString())}
       </div>
-      ${item.hasOwnProperty('id') ? `<div>${item.cost.toLocaleString()}G</div>` : ''}
+      ${item.hasOwnProperty('id') ? `<div class="store-cost">${item.cost.toLocaleString()}G</div>` : ''}
     </div>
 `
 
@@ -67,13 +64,10 @@ export function renderEquipmentDetails(item: ShopEquipment, player: Player): str
 
 function renderShopEquipment(item: ShopEquipment, action: (item: ShopEquipment) => string, player: Player): string {
     return `<div class="store-list">
-    <div>
-      <img src="${item.icon ? `/assets/img/icons/equipment/${item.icon}` : 'https://via.placeholder.com/64x64'}">
+    <div class="store-icon" style="background-image: url('${item.icon ? `/assets/img/icons/equipment/${item.icon}` : 'https://via.placeholder.com/64x64'}')">
+      <div class="store-actions">${action(item)}</div>
     </div>
     ${renderEquipmentDetails(item, player)}
-    <div class="store-actions">
-      ${action(item)}
-    </div>
     </div>`;
 }