Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Damage Calculator Grid Rework #1523

Merged
merged 2 commits into from
Oct 15, 2023
Merged

Damage Calculator Grid Rework #1523

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6a30a0e
Grid rework
hfcRed Oct 15, 2023
ff8d86e
Ran Prettier
Sendouc Oct 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 46 additions & 12 deletions app/features/object-damage-calculator/calculator.css
View file
Open in desktop
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
Open in desktop
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
Loading