fix: move purchase button under icon in stores

diff --git a/public/assets/css/game.css b/public/assets/css/game.css
index b29a4ec21a5a6af341bc869a0e98061e4402584f..55a52fc9ff1022d80c50c920123c91b712211a78 100644 (file)
--- 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 c027dd01d199196ac95251b483ae02b64124c8f0..adf4105c11ebff58565b82d9cb18beefac5f7907 100644 (file)
--- 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 08745f70b24d74e93c825762093055a2d7075f04..81b227373b4aaff559de06b1e2f4c378a785eae2 100644 (file)
--- 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>`;
 }