From 0fa8d88845dae3c93f019f0862fe70cbacb3aad8 Mon Sep 17 00:00:00 2001 From: xangelo Date: Mon, 25 Nov 2024 13:53:01 -0500 Subject: [PATCH] fix(store, inventory): improve display of requirements --- public/assets/css/store.css | 4 + public/assets/css/tabs.css | 264 ++++++++++++++------------- src/server/views/components/stats.ts | 3 +- src/server/views/inventory.ts | 2 +- src/server/views/stores.ts | 11 +- 5 files changed, 154 insertions(+), 130 deletions(-) diff --git a/public/assets/css/store.css b/public/assets/css/store.css index 9a546e4..bbbcd1b 100644 --- a/public/assets/css/store.css +++ b/public/assets/css/store.css @@ -24,5 +24,9 @@ color: #6d251c; grid-column: 1 / -1; } + + .requirement-title::after { + content: ': '; + } } } \ No newline at end of file diff --git a/public/assets/css/tabs.css b/public/assets/css/tabs.css index 0789a22..7a7ba44 100644 --- a/public/assets/css/tabs.css +++ b/public/assets/css/tabs.css @@ -1,169 +1,189 @@ nav { - text-align: center; - padding: 1rem 0; + text-align: center; + padding: 1rem 0; - li { - display: inline-block; - list-style: none; + li { + display: inline-block; + list-style: none; - &:before { - content: '['; - } + &:before { + content: '['; + } - &:after { - content: ']'; - } + &:after { + content: ']'; } + } - a { - text-decoration: none; + a { + text-decoration: none; - &.active { - font-weight: bold; - text-decoration: underline; - } + &.active { + font-weight: bold; + text-decoration: underline; } + } - &.filter { - margin: 0; - text-align: right; - border: 0; - padding: 0; - position: relative; - bottom: 5px; - - a { - border-bottom-width: 0; - z-index: 1; - padding: 0.6rem; - position: relative; - - &.active { - background-color: #fff; - border: solid #6d251c; - border-width: 1px 1px 0; - z-index: 4; - } - } + &.filter { + margin: 0; + text-align: right; + border: 0; + padding: 0; + position: relative; + bottom: 5px; + + a { + border-bottom-width: 0; + z-index: 1; + padding: 0.6rem; + position: relative; + + &.active { + background-color: #fff; + border: solid #6d251c; + border-width: 1px 1px 0; + z-index: 4; + } } + } } .filter-container { - .listing { - border: solid 1px #6d251c; - z-index: 2; - position: relative; - background-color: #fff; - max-height: 400px; - width: 100%; - overflow: auto; + .listing { + border: solid 1px #6d251c; + z-index: 2; + position: relative; + background-color: #fff; + max-height: 400px; + width: 100%; + overflow: auto; - .filter-result { - display: none; + .filter-result { + display: none; - &.active { - display: block !important; - } - } + &.active { + display: block !important; + } } + } } #main-nav { - margin-bottom: 1rem; - position: relative; + margin-bottom: 1rem; + position: relative; - section { - min-height: 344px; - } + section { + min-height: 344px; + } } .tab { - display: none; + display: none; - &.active { - display: block; - } + &.active { + display: block; + } } .list-item { - display: flex; - text-align: left; - padding: 0.5rem; - overflow: hidden; + display: flex; + text-align: left; + padding: 0.5rem; + overflow: hidden; - &:nth-child(even) { - background-color: #f2f0ec; - } + &:nth-child(even) { + background-color: #f2f0ec; + } - .icon-wrapper { - position: relative; - margin-right: 0.5rem; - width: 77px; - - .icon { - width: 64px; - height: 64px; - padding: 0; - background-repeat: no-repeat; - background-size: contain; - position: relative; - border: solid 1px #6d251c; - box-sizing: border-box; - } + .icon-wrapper { + position: relative; + margin-right: 0.5rem; + width: 77px; + + .icon { + width: 64px; + height: 64px; + padding: 0; + background-repeat: no-repeat; + background-size: contain; + position: relative; + border: solid 1px #6d251c; + box-sizing: border-box; + } - .actions { - margin-top: 0.2rem; + .actions { + margin-top: 0.2rem; - button { - width: 100%; - font-size: 0.7rem; - padding: 0.3rem 0.5rem; - } + button { + width: 100%; + font-size: 0.7rem; + padding: 0.3rem 0.5rem; + } - } } + } - .details { - padding: 0 0.4rem; - line-height: 1rem; - flex-grow: 2; - width: 100%; + .details { + padding: 0 0.4rem; + line-height: 1rem; + flex-grow: 2; + width: 100%; - &>div { - margin-bottom: 4px; - } + &>div { + margin-bottom: 4px; + } - .name { - font-weight: bold; - background: linear-gradient(90deg, #ecd4a8 0%, transparent 40%); - border-bottom: 2px solid #6d251c; - padding: 4px; - font-size: 0.9rem; - } + .name { + font-weight: bold; + background: linear-gradient(90deg, #ecd4a8 0%, transparent 40%); + border-bottom: 2px solid #6d251c; + padding: 4px; + font-size: 0.9rem; + } - .stat-mods { - font-size: 0.8rem; - display: grid; - grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); - gap: 0.2rem; + .stat-mods { + font-size: 0.8rem; + display: grid; + grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); + gap: 0.2rem; + margin: 0.5rem 0; + + .requirement { + display: grid; + grid-template-columns: auto 1fr; + gap: 0.2rem; + border: solid 1px #b19e81; + font-size: 0.7rem; + + .requirement-title { + text-transform: uppercase; + background-color: #e2d6c3; + border-right: solid 1px #b19e81; + padding: 0.1rem 0.2rem; + width: 35px; + text-align: center; } - .requirements { - font-size: 0.8rem; - display: grid; - grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); - gap: 0.2rem; - - .requirement-title { - font-weight: bold; - text-transform: capitalize; - } + .requirement-value { + padding: 0.1rem; + background-color: #fefbf4; } + } + } + .requirements { + font-size: 0.8rem; + display: grid; + grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); + gap: 0.2rem; + .requirement-title { + font-weight: bold; + text-transform: capitalize; + } } - + } } \ No newline at end of file diff --git a/src/server/views/components/stats.ts b/src/server/views/components/stats.ts index 61c3a1e..116defa 100644 --- a/src/server/views/components/stats.ts +++ b/src/server/views/components/stats.ts @@ -16,6 +16,5 @@ export function renderStatBoostWithPlayerIncrease(player: Player, name: ItemStat const diff = effectiveDamage - val; // calculate any stat boost from the player - return `
${name}: -${valSign}${effectiveDamage}
`; + return `
${name}${valSign}${effectiveDamage}
`; } diff --git a/src/server/views/inventory.ts b/src/server/views/inventory.ts index 1cd533f..41857e5 100644 --- a/src/server/views/inventory.ts +++ b/src/server/views/inventory.ts @@ -96,7 +96,7 @@ function renderStatBoost(name: string, val: number | string, percent: boolean = if(typeof val === 'number') { valSign = val > 0 ? '+' : '-'; } - return `
${name}: ${valSign}${val}${percent ? '%' : ''}
`; + return `
${name}${valSign}${val}${percent ? '%' : ''}
`; } function renderInventoryItem(player: Player, item: EquippedItemDetails , action: (item: EquippedItemDetails) => string): string { diff --git a/src/server/views/stores.ts b/src/server/views/stores.ts index 33413ff..6b68bd7 100644 --- a/src/server/views/stores.ts +++ b/src/server/views/stores.ts @@ -20,7 +20,7 @@ function renderStat(title: string, display: string, val: any, options?: RenderSt valSign = val > 0 ? '+' : '-'; } - return `${display}: ${opts.unsigned ? val : `${valSign}${val}`}`; + return `
${display}${opts.unsigned ? val : `${valSign}${val}`}
`; } function renderStatBoost(name: ItemStatBoostAbbr, val: number | string, title?: string): string { @@ -28,7 +28,7 @@ function renderStatBoost(name: ItemStatBoostAbbr, val: number | string, title?: if(typeof val === 'number') { valSign = val > 0 ? '+' : '-'; } - return `
${name}: ${valSign}${val}
`; + return `
${name}${valSign}${val}
`; } function renderRequirement(name: string, val: number | string, currentVal?: number): string { @@ -36,7 +36,7 @@ function renderRequirement(name: string, val: number | string, currentVal?: numb if (currentVal && typeof val === 'number') { colorIndicator = currentVal >= val ? 'success' : 'error'; } - return `
${name}: ${val.toLocaleString()}
`; + return `
${name}${val.toLocaleString()}
`; } function renderShopItem(item: (ShopItem & Item), action: (item: (ShopItem & Item)) => string): string { @@ -61,7 +61,9 @@ export function renderEquipmentDetails(item: ShopEquipment, player: Player): str return `
-
${item.name}${item.equipment_slot === 'TWO_HANDED' ? ' (2H)': ''}
+
${item.name}${item.equipment_slot === 'TWO_HANDED' ? ' (2H)': ''} + ${item.cost.toLocaleString()}G +
${item.boosts.defence ? renderStatBoost('DEF', item.boosts.defence) : ''} ${item.boosts.strength ? renderStatBoost('STR', item.boosts.strength) : ''} @@ -72,7 +74,6 @@ export function renderEquipmentDetails(item: ShopEquipment, player: Player): str ${item.boosts.damage_mitigation ? renderStatBoost('MIT', item.boosts.damage_mitigation.toString())+'%' : ''} ${renderStat(isSpell ? 'Uses': 'Durability', isSpell ? 'Uses': 'DUR', item.maxAp, { unsigned: true })}
- ${item.hasOwnProperty('id') ? `
${item.cost.toLocaleString()}G
` : ''}
${item.requirements.level ? renderRequirement('LVL', item.requirements.level, player.level): ''} ${item.requirements.strength ? renderRequirement('STR', item.requirements.strength, player.strength): ''} -- 2.25.1