From 93aeef588a8d8a58b49cf70e6f763dba0dab438e Mon Sep 17 00:00:00 2001 From: xangelo Date: Fri, 18 Aug 2023 14:18:28 -0400 Subject: [PATCH] fix: move purchase button under icon in stores --- public/assets/css/game.css | 52 ++++++++++++++++++++++++++--------- src/server/views/inventory.ts | 5 ++-- src/server/views/stores.ts | 18 ++++-------- 3 files changed, 47 insertions(+), 28 deletions(-) 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 `
-
- +
${item.name}
@@ -117,7 +116,7 @@ function renderInventoryItem(item: EquippedItemDetails , action: (item: Equipped
${item.hasOwnProperty('id') ? `
${item.cost.toLocaleString()}G
` : ''}
-
+
${action(item)}
`; 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 `
-
- +
+
${action(item)}
${item.name}
${item.description}
- ${item.hasOwnProperty('id') ? `
${item.price_per_unit.toLocaleString()}G
` : ''} -
-
- ${action(item)} + ${item.hasOwnProperty('id') ? `
${item.price_per_unit.toLocaleString()}G
` : ''}
`; } @@ -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())}
- ${item.hasOwnProperty('id') ? `
${item.cost.toLocaleString()}G
` : ''} + ${item.hasOwnProperty('id') ? `
${item.cost.toLocaleString()}G
` : ''}
` @@ -67,13 +64,10 @@ export function renderEquipmentDetails(item: ShopEquipment, player: Player): str function renderShopEquipment(item: ShopEquipment, action: (item: ShopEquipment) => string, player: Player): string { return `
-
- +
+
${action(item)}
${renderEquipmentDetails(item, player)} -
- ${action(item)} -
`; } -- 2.25.1