Show sophie items in doll making and friend list

holly-hacker · Oct 27, 2023 · c2bd279 · c2bd279
1 parent 354fdbb
commit c2bd279
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 2 deletions.
diff --git a/frontend/src/routes/sophie/dolls/list.tsx b/frontend/src/routes/sophie/dolls/list.tsx
@@ -2,8 +2,9 @@ import Grid from "@/components/grid";
 import { SophieContext } from "@/data/sophie_data";
 import { createColumnHelper } from "@tanstack/react-table";
 import { useContext } from "react";
-import { ItemLink } from "../utility_components/links";
+import { ItemLink, TextureAtlasImage } from "../utility_components/links";
 import type SophieTypes from "@/data/types/sophie.d.ts";
+import { findItemByTag } from "../sophie_data_util";
 
 export default function DollListPage() {
   return (
@@ -157,6 +158,20 @@ function DollMaterialList({ category }: { category: string }) {
 
   const columnHelper = createColumnHelper<(typeof items)[0]>();
   const columns = [
+    columnHelper.accessor("image_no", {
+      header: "Image",
+      cell: (i) => {
+        return (
+          <ItemLink item={i.row.original}>
+            <TextureAtlasImage
+              texture_atlas={sophieData.items_texture_atlas}
+              texture_atlas_name="items"
+              name={String(i.row.original.image_no)}
+            />
+          </ItemLink>
+        );
+      },
+    }),
     columnHelper.accessor("name", {
       header: "Name",
       cell: (i) => <ItemLink item={i.row.original} />,

diff --git a/frontend/src/routes/sophie/friends/presents.tsx b/frontend/src/routes/sophie/friends/presents.tsx
@@ -2,8 +2,9 @@ import Grid from "@/components/grid";
 import { SophieContext, SophieData } from "@/data/sophie_data";
 import { createColumnHelper } from "@tanstack/react-table";
 import { useContext, useState } from "react";
-import { ItemLink } from "../utility_components/links";
+import { ItemLink, TextureAtlasImage } from "../utility_components/links";
 import type SophieTypes from "@/data/types/sophie.d.ts";
+import { findItemByTag } from "../sophie_data_util";
 
 export default function FriendPresentList() {
   const sophieData = useContext(SophieContext);
@@ -107,6 +108,22 @@ function FriendPresentInfoDisplay({
     .filter((i) => showBadGifts || i.score >= 0);
   const itemColumnHelper = createColumnHelper<(typeof items)[0]>();
   const itemColumns = [
+    itemColumnHelper.display({
+      header: "Image",
+      cell: (i) => {
+        const item = findItemByTag(sophieData, i.row.original.item_tag);
+        if (!item) return;
+        return (
+          <ItemLink item={item}>
+            <TextureAtlasImage
+              texture_atlas={sophieData.items_texture_atlas}
+              texture_atlas_name="items"
+              name={String(item.image_no)}
+            />
+          </ItemLink>
+        );
+      },
+    }),
     itemColumnHelper.accessor("item_tag", {
       header: "Name",
       cell: (i) => <ItemLink item={i.getValue()} />,