From a60901e59b92e57ce97eda04e481000f4a9d7656 Mon Sep 17 00:00:00 2001 From: Kalle <38327916+Sendouc@users.noreply.github.com> Date: Wed, 18 Jan 2023 01:04:33 +0200 Subject: [PATCH] Build Analyzer: New weapon "info cards" style --- app/features/build-analyzer/analyzer.css | 46 ++++---- .../build-analyzer/routes/analyzer.tsx | 107 +++++++++++------- app/styles/plus.css | 6 - app/styles/utils.css | 4 - app/styles/vars.css | 4 +- public/locales/da/analyzer.json | 2 +- public/locales/de/analyzer.json | 2 +- public/locales/en/analyzer.json | 2 +- public/locales/es-ES/analyzer.json | 2 +- public/locales/es-US/analyzer.json | 2 +- public/locales/fr/analyzer.json | 2 +- public/locales/it/analyzer.json | 2 +- public/locales/ja/analyzer.json | 2 +- public/locales/nl/analyzer.json | 2 +- public/locales/ru/analyzer.json | 2 +- public/locales/zh/analyzer.json | 2 +- 16 files changed, 99 insertions(+), 90 deletions(-) diff --git a/app/features/build-analyzer/analyzer.css b/app/features/build-analyzer/analyzer.css index 389c4e543..1c8d88fce 100644 --- a/app/features/build-analyzer/analyzer.css +++ b/app/features/build-analyzer/analyzer.css @@ -14,28 +14,6 @@ gap: var(--s-8); } -.analyzer__weapon-info-badges { - display: flex; - flex-wrap: wrap; - color: var(--text-lighter); - font-size: var(--fonts-xxs); - font-weight: var(--semi-bold); - gap: var(--s-2); -} - -.analyzer__weapon-info-badge { - display: flex; - align-items: center; - justify-content: center; - border: 2px solid var(--border); - border-radius: var(--rounded); - background-color: var(--bg-darker); - gap: var(--s-2); - padding-block: var(--s-1); - padding-inline: var(--s-2); - white-space: nowrap; -} - .analyzer__effects-selector { display: grid; gap: var(--s-2); @@ -78,17 +56,35 @@ .analyzer__summary { border-radius: var(--rounded); - background-color: var(--bg-lighter); + background-color: var(--bg-light-variation); font-size: var(--fonts-md); font-weight: var(--bold); padding-block: var(--s-2); padding-inline: var(--s-3); + position: relative; } .analyzer__details:has(.analyzer__stat-card-highlighted) .analyzer__summary { background-color: var(--theme-transparent); } +.analyzer__weapon-info-badge { + display: inline-flex; + font-size: var(--fonts-xs); + gap: var(--s-2); + align-items: center; + background-color: var(--bg-darker); + border-radius: var(--rounded); + padding: var(--s-0-5) var(--s-3); + margin-inline-start: auto; + /** Decided to do it absolutely because + summary really dislikes becoming a flex + (arrow disappears) */ + position: absolute; + right: 10px; + top: 6.5px; +} + .analyzer__stat-collection { display: grid; gap: var(--s-2); @@ -102,7 +98,7 @@ justify-content: space-between; padding: var(--s-2); border-radius: var(--rounded); - background-color: var(--bg-darker); + background-color: var(--bg-lighter); gap: var(--s-4); } @@ -175,7 +171,7 @@ width: 100%; padding: var(--s-3); border-radius: var(--rounded); - background-color: var(--bg-darker); + background-color: var(--bg-lighter); margin-block-start: var(--s-4); padding-block: var(--s-2); } diff --git a/app/features/build-analyzer/routes/analyzer.tsx b/app/features/build-analyzer/routes/analyzer.tsx index 625cc0693..da4e4cc12 100644 --- a/app/features/build-analyzer/routes/analyzer.tsx +++ b/app/features/build-analyzer/routes/analyzer.tsx @@ -32,6 +32,7 @@ import { type SendouRouteHandle } from "~/utils/remix"; import { makeTitle } from "~/utils/strings"; import { ANALYZER_URL, + mainWeaponImageUrl, navIconUrl, objectDamageCalculatorPage, specialWeaponImageUrl, @@ -180,7 +181,6 @@ export default function BuildAnalyzerPage() { clearsInputOnFocus /> -
{mainWeaponCategoryItems.length > 0 && ( - + + {t(`weapons:MAIN_${mainWeaponId}`)} + {t(`weapons:MAIN_${mainWeaponId}`)} +
+ } + > {mainWeaponCategoryItems} )} - + + {t(`weapons:SUB_${analyzed.weapon.subWeaponSplId}`)} + {t(`weapons:SUB_${analyzed.weapon.subWeaponSplId}`)} +
+ } + > - + + {t( + {t(`weapons:SPECIAL_${analyzed.weapon.specialWeaponSplId}`)} + + } + > + -
- {t(`weapons:SUB_${analyzed.weapon.subWeaponSplId}`)} - {t(`weapons:SUB_${analyzed.weapon.subWeaponSplId}`)} -
-
- {t("analyzer:attribute.weight")}{" "} - {t(`analyzer:attribute.weight.${analyzed.weapon.speedType}`)} -
-
- {t(`weapons:SPECIAL_${analyzed.weapon.specialWeaponSplId}`)} - {t(`weapons:SPECIAL_${analyzed.weapon.specialWeaponSplId}`)} -
- - ); -} - function EffectsSelector({ build, effects, @@ -880,15 +897,20 @@ function StatCategory({ children, containerClassName = "analyzer__stat-collection", textBelow, + summaryRightContent, }: { title: string; children: React.ReactNode; containerClassName?: string; textBelow?: string; + summaryRightContent?: React.ReactNode; }) { return (
- {title} + + {title} + {summaryRightContent} +
{children}
{textBelow && (
{textBelow}
@@ -905,16 +927,17 @@ function StatCard({ abilityPoints, }: { title: string; - stat: Stat | Stat | number; + stat: Stat | Stat | number | string; suffix?: string; popoverInfo?: string; abilityPoints: AbilityPoints; }) { const { t } = useTranslation("analyzer"); - const baseValue = typeof stat === "number" ? stat : stat.baseValue; + const isStaticValue = typeof stat === "number" || typeof stat === "string"; + const baseValue = isStaticValue ? stat : stat.baseValue; const showBuildValue = () => { - if (typeof stat === "number") return false; + if (isStaticValue) return false; // slightly hacky but handles the edge case // where baseValue === value which can happen when @@ -971,9 +994,7 @@ function StatCard({
- {typeof stat !== "number" && ( - - )} + {!isStaticValue && }
); @@ -1079,7 +1100,7 @@ function ConsumptionTable({ {new Array(maxSubsToUse + 1).fill(null).map((_, subsUsed) => { return ( - + ×{subsUsed} {options .filter((opt) => opt.subsUsed === subsUsed) diff --git a/app/styles/plus.css b/app/styles/plus.css index 28292f590..b09de521e 100644 --- a/app/styles/plus.css +++ b/app/styles/plus.css @@ -59,12 +59,6 @@ font-weight: var(--semi-bold); } -.plus__comment { - min-width: auto; - overflow-wrap: break-word; - white-space: pre-wrap; -} - .plus__comment-time { color: var(--text-lighter); font-size: var(--fonts-xxs); diff --git a/app/styles/utils.css b/app/styles/utils.css index 696ac5700..ce5dcedbd 100644 --- a/app/styles/utils.css +++ b/app/styles/utils.css @@ -50,10 +50,6 @@ fill: var(--theme-warning); } -.bg-darker-important { - background-color: var(--bg-darker) !important; -} - .bg-transparent-important { background-color: transparent !important; } diff --git a/app/styles/vars.css b/app/styles/vars.css index 4901328da..ce20a4037 100644 --- a/app/styles/vars.css +++ b/app/styles/vars.css @@ -1,8 +1,9 @@ html { --bg: #ebebf0; --bg-darker: #f8f8f8; - --bg-lighter: #fff; + --bg-lighter: rgb(250 250 250); --bg-lightest: #fff; + --bg-light-variation: #fff; --bg-lighter-transparent: hsla(225deg 100% 88% / 50%); --bg-darker-very-transparent: rgb(187 208 219 / 29.5%); --bg-darker-transparent: hsla(202deg 90% 90% / 65%); @@ -90,6 +91,7 @@ html.dark { --bg-darker: #0a092d; --bg-lighter: rgb(169 138 255 / 10%); --bg-lighter-transparent: rgb(64 67 108 / 50%); + --bg-light-variation: #a98aff30; --bg-lightest: rgb(169 138 255 / 30%); --bg-darker-very-transparent: hsla(237.3deg 42.3% 26.6% / 50%); --bg-darker-transparent: #0a092dce; diff --git a/public/locales/da/analyzer.json b/public/locales/da/analyzer.json index 4c1a88b65..60c1cff7d 100644 --- a/public/locales/da/analyzer.json +++ b/public/locales/da/analyzer.json @@ -1,5 +1,5 @@ { - "attribute.weight": "Vægt: ", + "attribute.weight": "Vægt", "attribute.weight.Fast": "Let", "attribute.weight.Slow": "Tung", "attribute.weight.Normal": "Normal", diff --git a/public/locales/de/analyzer.json b/public/locales/de/analyzer.json index a3b76e332..8e6ec0599 100644 --- a/public/locales/de/analyzer.json +++ b/public/locales/de/analyzer.json @@ -1,5 +1,5 @@ { - "attribute.weight": "Gewicht:", + "attribute.weight": "Gewicht", "attribute.weight.Fast": "Leicht", "attribute.weight.Slow": "Schwer", "attribute.weight.Normal": "Normal", diff --git a/public/locales/en/analyzer.json b/public/locales/en/analyzer.json index be9c8a2f3..a7627d4b5 100644 --- a/public/locales/en/analyzer.json +++ b/public/locales/en/analyzer.json @@ -1,5 +1,5 @@ { - "attribute.weight": "Weight:", + "attribute.weight": "Weight", "attribute.weight.Fast": "Light", "attribute.weight.Slow": "Heavy", "attribute.weight.Normal": "Normal", diff --git a/public/locales/es-ES/analyzer.json b/public/locales/es-ES/analyzer.json index 0c8febfc5..51145a309 100644 --- a/public/locales/es-ES/analyzer.json +++ b/public/locales/es-ES/analyzer.json @@ -1,5 +1,5 @@ { - "attribute.weight": "Peso:", + "attribute.weight": "Peso", "attribute.weight.Fast": "Ligero", "attribute.weight.Slow": "Pesado", "attribute.weight.Normal": "Normal", diff --git a/public/locales/es-US/analyzer.json b/public/locales/es-US/analyzer.json index 0c8febfc5..51145a309 100644 --- a/public/locales/es-US/analyzer.json +++ b/public/locales/es-US/analyzer.json @@ -1,5 +1,5 @@ { - "attribute.weight": "Peso:", + "attribute.weight": "Peso", "attribute.weight.Fast": "Ligero", "attribute.weight.Slow": "Pesado", "attribute.weight.Normal": "Normal", diff --git a/public/locales/fr/analyzer.json b/public/locales/fr/analyzer.json index 4a6fb4134..282fe1a68 100644 --- a/public/locales/fr/analyzer.json +++ b/public/locales/fr/analyzer.json @@ -1,5 +1,5 @@ { - "attribute.weight": "Poids :", + "attribute.weight": "Poids", "attribute.weight.Fast": "Léger", "attribute.weight.Slow": "Lourd", "attribute.weight.Normal": "Moyen", diff --git a/public/locales/it/analyzer.json b/public/locales/it/analyzer.json index 62aa701bf..e829518ba 100644 --- a/public/locales/it/analyzer.json +++ b/public/locales/it/analyzer.json @@ -1,5 +1,5 @@ { - "attribute.weight": "Peso:", + "attribute.weight": "Peso", "attribute.weight.Fast": "Leggero", "attribute.weight.Slow": "Pesante", "attribute.weight.Normal": "Normale", diff --git a/public/locales/ja/analyzer.json b/public/locales/ja/analyzer.json index 96d31ed7d..fe1b8f279 100644 --- a/public/locales/ja/analyzer.json +++ b/public/locales/ja/analyzer.json @@ -1,5 +1,5 @@ { - "attribute.weight": "重さ:", + "attribute.weight": "重さ", "attribute.weight.Fast": "軽量級", "attribute.weight.Slow": "重量級", "attribute.weight.Normal": "中量級", diff --git a/public/locales/nl/analyzer.json b/public/locales/nl/analyzer.json index 74d19b351..4979e0222 100644 --- a/public/locales/nl/analyzer.json +++ b/public/locales/nl/analyzer.json @@ -1,5 +1,5 @@ { - "attribute.weight": "Gewicht:", + "attribute.weight": "Gewicht", "attribute.weight.Fast": "Licht", "attribute.weight.Slow": "Zwaar", "attribute.weight.Normal": "Normaal", diff --git a/public/locales/ru/analyzer.json b/public/locales/ru/analyzer.json index 329b5cef3..af72507e2 100644 --- a/public/locales/ru/analyzer.json +++ b/public/locales/ru/analyzer.json @@ -1,5 +1,5 @@ { - "attribute.weight": "Весовая категория:", + "attribute.weight": "Весовая категория", "attribute.weight.Fast": "Лёгкая", "attribute.weight.Slow": "Тяжелая", "attribute.weight.Normal": "Средняя", diff --git a/public/locales/zh/analyzer.json b/public/locales/zh/analyzer.json index d4114f552..9adf8678a 100644 --- a/public/locales/zh/analyzer.json +++ b/public/locales/zh/analyzer.json @@ -1,5 +1,5 @@ { - "attribute.weight": "量级:", + "attribute.weight": "量级", "attribute.weight.Fast": "轻量级", "attribute.weight.Slow": "重量级", "attribute.weight.Normal": "中量级",