diff --git a/app/components/BuildCard.tsx b/app/components/BuildCard.tsx
index 922eb31b5..975d36509 100644
--- a/app/components/BuildCard.tsx
+++ b/app/components/BuildCard.tsx
@@ -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) {
{weapons.map((weaponSplId) => (
-
-
-
+
))}
{weapons.length === 1 && (
@@ -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 (
+
+
+
+
+
+ );
+}
+
function AbilitiesRowWithGear({
gearType,
abilities,
diff --git a/app/utils/urls.ts b/app/utils/urls.ts
index a2e3bb6d4..e635e117e 100644
--- a/app/utils/urls.ts
+++ b/app/utils/urls.ts
@@ -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}` : ""}`;