Show weapons when looking

app/components/WeaponImage.tsx

@@ -0,0 +1,18 @@
+interface WeaponImageProps
+  extends React.ButtonHTMLAttributes<HTMLImageElement> {
+  weapon: string;
+}
+
+export function WeaponImage(props: WeaponImageProps) {
+  return (
+    <img
+      src={`/img/weapons/${encodeURIComponent(
+        props.weapon.replaceAll(".", "")
+      )}.webp`}
+      alt={props.weapon}
+      title={props.weapon}
+      loading="lazy"
+      {...props}
+    />
+  );
+}

app/components/play/GroupMembers.tsx

@@ -1,6 +1,7 @@
 import type { LookingLoaderDataGroup } from "~/routes/play/looking";
 import { layoutIcon } from "~/utils";
 import { Avatar } from "../Avatar";
+import { WeaponImage } from "../WeaponImage";
 
 export function GroupMembers({
   members,
@@ -65,6 +66,17 @@ function Contents({ members }: { members: LookingLoaderDataGroup["members"] }) {
                 {member.peakLP}
               </div>
             )}
+            {member.weapons && (
+              <div className="play-looking__member-weapons">
+                {member.weapons.map((wpn) => (
+                  <WeaponImage
+                    className="play-looking__member-weapon"
+                    key={wpn}
+                    weapon={wpn}
+                  />
+                ))}{" "}
+              </div>
+            )}
           </div>
         );
       })}

app/core/play/playerInfos/playerInfos.server.ts

@@ -27,7 +27,7 @@ export function addInfoFromOldSendouInk(
         const playerInfos = infos[member.discordId];
         return {
           ...member,
-          weapons: playerInfos?.weapons,
+          weapons: playerInfos?.weapons?.slice(0, 3),
           peakXP: type === "SOLO" ? playerInfos?.peakXP : undefined,
           peakLP: type === "LEAGUE" ? playerInfos?.peakLP : undefined,
         };

app/styles/play-looking.css

@@ -154,6 +154,16 @@
   gap: var(--s-1);
 }
 
+.play-looking__member-weapons {
+  display: flex;
+  gap: var(--s-1);
+}
+
+.play-looking__member-weapon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
 .play-looking__member-power.league {
   filter: hue-rotate(180deg);
 }