Leahnaya/sendou.ink
1
0
Fork 0
mirror of https://github.com/Sendouc/sendou.ink.git synced 2026-06-02 22:26:57 -05:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

BuildCard: Link to weapon builds page (#1167)

Browse Source 
* Feature Implementation: Weapon icon on build card now links to the builds page that contains all builds corresponding to said weapon

* Refactor to an actual React hook

* Refactored the URL construction for the Weapon Builds page to urls.ts

* Changes

Co-authored-by: Kalle <38327916+Sendouc@users.noreply.github.com>
This commit is contained in:
William Lam 2022-11-27 10:46:10 -05:00 committed by GitHub
parent 3b7a46f27b
commit fe65b42d9f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 29 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
app/components/BuildCard.tsx
View File

@ -8,7 +8,10 @@ import type {
Ability as AbilityType,
ModeShort,
} from "~/modules/in-game-lists";
import type { BuildAbilitiesTuple } from "~/modules/in-game-lists/types";
import type {
BuildAbilitiesTuple,
MainWeaponId,
} from "~/modules/in-game-lists/types";
import { databaseTimestampToDate } from "~/utils/dates";
import { discordFullName, gearTypeToInitial } from "~/utils/strings";
import {
@ -16,8 +19,10 @@ import {
gearImageUrl,
mainWeaponImageUrl,
modeImageUrl,
mySlugify,
navIconUrl,
userBuildsPage,
weaponBuildPage,
} from "~/utils/urls";
import { Ability } from "./Ability";
import { Button, LinkButton } from "./Button";
@ -95,15 +100,7 @@ export function BuildCard({ build, owner, canEdit = false }: BuildProps) {
</div>
<div className="build__weapons">
{weapons.map((weaponSplId) => (
<div key={weaponSplId} className="build__weapon">
<Image
path={mainWeaponImageUrl(weaponSplId)}
alt={t(`weapons:MAIN_${weaponSplId}` as any)}
title={t(`weapons:MAIN_${weaponSplId}` as any)}
height={36}
width={36}
/>
</div>
<RoundWeaponImage key={weaponSplId} weaponSplId={weaponSplId} />
))}
{weapons.length === 1 && (
<div className="build__weapon-text">
@ -192,6 +189,25 @@ export function BuildCard({ build, owner, canEdit = false }: BuildProps) {
);
}
function RoundWeaponImage({ weaponSplId }: { weaponSplId: MainWeaponId }) {
const { t } = useTranslation(["weapons"]);
const slug = mySlugify(t(`weapons:MAIN_${weaponSplId}`, { lng: "en" }));
return (
<div key={weaponSplId} className="build__weapon">
<Link to={weaponBuildPage(slug)}>
<Image
path={mainWeaponImageUrl(weaponSplId)}
alt={t(`weapons:MAIN_${weaponSplId}` as any)}
title={t(`weapons:MAIN_${weaponSplId}` as any)}
height={36}
width={36}
/>
</Link>
</div>
);
}
function AbilitiesRowWithGear({
gearType,
abilities,

3
app/utils/urls.ts
View File

@ -90,6 +90,9 @@ export const badgePage = (badgeId: number) => `${BADGES_PAGE}/${badgeId}`;
export const plusSuggestionPage = (tier?: string | number) =>
`/plus/suggestions${tier ? `?tier=${tier}` : ""}`;
export const weaponBuildPage = (weaponSlug: string) =>
`${BUILDS_PAGE}/${weaponSlug}`;
export const calendarEventPage = (eventId: number) => `/calendar/${eventId}`;
export const calendarEditPage = (eventId?: number) =>
`/calendar/new${eventId ? `?eventId=${eventId}` : ""}`;