Skip to content

Commit

Permalink
Damage Calculator Grid Rework (#1523)
Browse files Browse the repository at this point in the history 
* Grid rework

* Ran Prettier

---------

Co-authored-by: hfcRed <[email protected]>
Co-authored-by: Kalle <[email protected]>
  • Loading branch information
@hfcRed @Sendouc
3 people authored Oct 15, 2023
1 parent beaf0ce commit de507e8
Show file tree
Hide file tree
Showing 2 changed files with 183 additions and 140 deletions.
58 changes: 46 additions & 12 deletions app/features/object-damage-calculator/calculator.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,12 +25,40 @@
}

.object-damage__grid {
column-gap: var(--s-2);
display: grid;
max-height: 60vh;
overflow: auto;
row-gap: var(--s-2);
width: 100%;
column-gap: var(--s-6);
overflow-x: auto;
place-items: center;
row-gap: var(--s-3);
}

@media screen and (min-width: 431px) {
.object-damage__grid {
max-height: 70vh;
}
}

.object-damage__grid::-webkit-scrollbar {
width: 4px;
height: 8px;
}

.object-damage__grid::-webkit-scrollbar-track {
background-color: rgb(2, 1, 30);
}

.object-damage__grid::-webkit-scrollbar-corner {
background-color: rgb(2, 1, 30);
}

.object-damage__grid::-webkit-scrollbar-thumb {
background-color: rgb(83, 65, 91);
border-radius: 4px;
}

.object-damage__grid::-webkit-scrollbar-thumb:hover {
background-color: rgb(62, 49, 68);
}

.object-damage__hp {
Expand All @@ -39,20 +67,24 @@
}

.object-damage__table-header {
position: sticky;
top: 0;
width: 100%;
align-items: center;
background-color: rgb(52 43 98);
border-radius: var(--rounded);
background-color: var(--bg-lightest);
display: flex;
flex-direction: column;
font-size: var(--fonts-xs);
font-weight: var(--semi-bold);
gap: var(--s-1);
height: 100%;
left: 0;
outline: 5px solid rgb(2, 1, 30);
padding-block: var(--s-2);
padding-inline: var(--s-4);
padding-inline: var(--s-2);
position: sticky;
text-align: center;
top: 0;
white-space: nowrap;
display: flex;
flex-direction: column;
gap: var(--s-1-5);
width: 100%;
}

.object-damage__weapon-image {
Expand Down Expand Up @@ -92,6 +124,8 @@

.object-damage__select {
width: initial;
padding-left: 0.5rem;
padding-right: 1.75rem;
}

.object-damage__abbr {
Expand Down
265 changes: 137 additions & 128 deletions app/features/object-damage-calculator/routes/object-damage-calculator.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -238,146 +238,155 @@ function DamageReceiversGrid({
const { t } = useTranslation(["weapons", "analyzer", "common"]);
useSetTitle(t("common:pages.object-damage-calculator"));
return (
<div
className="object-damage__grid"
style={{
gridTemplateColumns: gridTemplateColumnsValue(
damagesToReceivers[0]?.damages.length ?? 0,
),
}}
>
<div>
<Label htmlFor="ap">
{t("analyzer:labels.amountOf")}
<div className="object-damage__ap-label">
<Ability ability="BRU" size="TINY" />
<Ability ability="SPU" size="TINY" />
</div>
</Label>
</div>
<div>{children}</div>
{damagesToReceivers[0]?.damages.map((damage) => (
<div key={damage.id} className="object-damage__table-header">
<div className="stack horizontal sm justify-center items-center">
{t(
damageTypeTranslationString({
damageType: damage.type,
}),
)}
{damage.objectShredder && <Ability ability="OS" size="TINY" />}
</div>
<div
className={clsx("object-damage__distance", {
invisible: !damage.distance,
})}
>
{t("analyzer:distanceInline", {
value: Array.isArray(damage.distance)
? damage.distance.join("-")
: damage.distance,
})}
</div>
<div className="text-lighter stack horizontal sm justify-center items-center">
{weapon.type === "MAIN" ? (
<WeaponImage
weaponSplId={weapon.id}
width={24}
height={24}
variant="build"
className="object-damage__weapon-image"
/>
) : weapon.type === "SUB" ? (
<Image
alt=""
path={subWeaponImageUrl(weapon.id)}
width={24}
height={24}
className="object-damage__weapon-image"
/>
) : (
<Image
alt=""
path={specialWeaponImageUrl(weapon.id)}
width={24}
height={24}
className="object-damage__weapon-image"
/>
)}
{t(`weapons:${weapon.type}_${weapon.id}` as any)}
<div>
<div
className="object-damage__grid"
style={{
gridTemplateColumns: gridTemplateColumnsValue(
damagesToReceivers[0]?.damages.length ?? 0,
),
}}
>
<div
className="object-damage__table-header"
style={{ zIndex: "1", justifyContent: "center" }}
>
<div>
<Label htmlFor="ap">
{t("analyzer:labels.amountOf")}
<div className="object-damage__ap-label">
<Ability ability="BRU" size="TINY" />
<Ability ability="SPU" size="TINY" />
</div>
</Label>
</div>
<div>{children}</div>
</div>
))}
{damagesToReceivers.map((damageToReceiver, i) => {
return (
<React.Fragment key={damageToReceiver.receiver}>
<div>
<Label htmlFor="ap">
<div className="object-damage__ap-label">
{abilityPoints !== "0" &&
damageReceiverAp[damageToReceiver.receiver]}
</div>
</Label>
<Image
className="object-damage__receiver-image"
key={i}
alt=""
path={damageReceiverImages[damageToReceiver.receiver]}
width={40}
height={40}
/>
{damagesToReceivers[0]?.damages.map((damage) => (
<div key={damage.id} className="object-damage__table-header">
{t(`weapons:${weapon.type}_${weapon.id}` as any)}
<div className="text-lighter stack horizontal sm justify-center items-center">
{weapon.type === "MAIN" ? (
<WeaponImage
weaponSplId={weapon.id}
width={24}
height={24}
variant="build"
className="object-damage__weapon-image"
/>
) : weapon.type === "SUB" ? (
<Image
alt=""
path={subWeaponImageUrl(weapon.id)}
width={24}
height={24}
className="object-damage__weapon-image"
/>
) : (
<Image
alt=""
path={specialWeaponImageUrl(weapon.id)}
width={24}
height={24}
className="object-damage__weapon-image"
/>
)}
</div>
<div className="object-damage__hp">
<span data-testid={`hp-${damageToReceiver.receiver}`}>
{damageToReceiver.hitPoints}
</span>
{t("analyzer:suffix.hp")}
<div
className={clsx("object-damage__distance", {
invisible: !damage.distance,
})}
>
{t("analyzer:distanceInline", {
value: Array.isArray(damage.distance)
? damage.distance.join("-")
: damage.distance,
})}
</div>
<div className="stack horizontal sm justify-center items-center">
{t(
damageTypeTranslationString({
damageType: damage.type,
}),
)}
{damage.objectShredder && <Ability ability="OS" size="TINY" />}
</div>
{damageToReceiver.damages.map((damage) => {
return (
<div key={damage.id} className="object-damage__table-card">
<div className="object-damage__table-card__results">
<abbr
className="object-damage__abbr"
title={t("analyzer:stat.category.damage")}
>
{t("analyzer:damageShort")}
</abbr>
<div
data-testid={`dmg${damage.objectShredder ? "-os" : ""}-${
damageToReceiver.receiver
}`}
>
{damage.value}
</div>
))}
{damagesToReceivers.map((damageToReceiver, i) => {
return (
<React.Fragment key={damageToReceiver.receiver}>
<div className="object-damage__table-header">
<div>
<Label htmlFor="ap">
<div className="object-damage__ap-label">
{abilityPoints !== "0" &&
damageReceiverAp[damageToReceiver.receiver]}
</div>
<abbr
className="object-damage__abbr"
title={t("analyzer:hitsToDestroyLong")}
>
{t("analyzer:hitsToDestroyShort")}
</abbr>
<div
data-testid={`htd${damage.objectShredder ? "-os" : ""}-${
damageToReceiver.receiver
}`}
>
{damage.hitsToDestroy}
</Label>
<Image
className="object-damage__receiver-image"
key={i}
alt=""
path={damageReceiverImages[damageToReceiver.receiver]}
width={40}
height={40}
/>
</div>
<div className="object-damage__hp">
<span data-testid={`hp-${damageToReceiver.receiver}`}>
{damageToReceiver.hitPoints}
</span>
{t("analyzer:suffix.hp")}
</div>
</div>
{damageToReceiver.damages.map((damage) => {
return (
<div key={damage.id} className="object-damage__table-card">
<div className="object-damage__table-card__results">
<abbr
className="object-damage__abbr"
title={t("analyzer:stat.category.damage")}
>
{t("analyzer:damageShort")}
</abbr>
<div
data-testid={`dmg${
damage.objectShredder ? "-os" : ""
}-${damageToReceiver.receiver}`}
>
{damage.value}
</div>
<abbr
className="object-damage__abbr"
title={t("analyzer:hitsToDestroyLong")}
>
{t("analyzer:hitsToDestroyShort")}
</abbr>
<div
data-testid={`htd${
damage.objectShredder ? "-os" : ""
}-${damageToReceiver.receiver}`}
>
{damage.hitsToDestroy}
</div>
</div>
<div className="object-damage__multiplier">
×{damage.multiplier}
</div>
</div>
<div className="object-damage__multiplier">
×{damage.multiplier}
</div>
</div>
);
})}
</React.Fragment>
);
})}
);
})}
</React.Fragment>
);
})}
</div>
</div>
);
}

function gridTemplateColumnsValue(dataColumnsCount: number) {
return `max-content max-content ${new Array(dataColumnsCount)
return `max-content ${new Array(dataColumnsCount)
.fill(null)
.map(() => `1fr`)
.join(" ")}`;
Expand Down

0 comments on commit de507e8

Please sign in to comment.