Add svgrender to imagetabs

HasangerGames · Jan 13, 2024 · 357c699 · 357c699
1 parent 30cee71
commit 357c699
Show file tree

Hide file tree

Showing 8 changed files with 61 additions and 24 deletions.
diff --git a/components/interactive/ImageTabs.tsx b/components/interactive/ImageTabs.tsx
@@ -4,6 +4,7 @@ import { ImageTab } from "@/lib/util/types";
 import { cp } from "fs";
 import Image from "next/image";
 import { useState } from "react";
+import SVGObjectRenderer from "@/components/svg/SVGObjectRenderer";
 
 const BackgroundMode = ["transparent", "white", "black", "checker"];
 
@@ -32,17 +33,27 @@ export default function ImageTabs({ images }: ImageTabsProps) {
           ))}
         </div>
       )}
-      {(currentImage && (
-        <Image
-          src={currentImage.url}
-          alt={currentImage.alt ?? currentImage.title ?? currentImage.url}
-          width={128}
-          height={128}
-          className={`w-40 h-40 my-4 p-4 ${getColor(
-            backgroundMode,
-          )} bg-repeat bg-[length:1rem]`}
-        />
-      )) || <h1>(No image available)</h1>}
+      {currentImage ? (
+        currentImage.type === "image" ? (
+          <Image
+            src={currentImage.url}
+            alt={currentImage.alt ?? currentImage.title ?? currentImage.url}
+            width={128}
+            height={128}
+            className={`w-40 h-40 my-4 p-4 ${getColor(
+              backgroundMode,
+            )} bg-repeat bg-[length:1rem]`}
+          />
+        ) : currentImage.type === "svg" ? (
+          <svg viewBox={currentImage.viewBox}>
+            <SVGObjectRenderer objects={currentImage.objects} />
+          </svg>
+        ) : (
+          <h1>(No image avaliable)</h1>
+        )
+      ) : (
+        <h1>(No image available)</h1>
+      )}
       <div className="flex flex-row gap-2 mb-4">
         {BackgroundMode.map((color, i) => (
           <button
@@ -58,16 +69,21 @@ export default function ImageTabs({ images }: ImageTabsProps) {
   );
 }
 
-function getColor(color: string) {
-  return color === "transparent"
-    ? "bg-transparent"
-    : color === "white"
-      ? "bg-white"
-      : color === "black"
-        ? "bg-black"
-        : color === "checker"
-          ? "bg-checker bg-white"
-          : "";
+function getColor(
+  color: "transparent" | "white" | "black" | "checker" | string,
+) {
+  switch (color) {
+    case "transparent":
+      return "bg-transparent";
+    case "white":
+      return "bg-white";
+    case "black":
+      return "bg-black";
+    case "checker":
+      return "bg-checker bg-white";
+    default:
+      return "";
+  }
 }
 
 export interface ImageTabsProps extends React.PropsWithChildren {

diff --git a/components/sidebars/BackpackSidebar.tsx b/components/sidebars/BackpackSidebar.tsx
@@ -22,10 +22,12 @@ export default function BackpackSidebar({
       title={item.name}
       imageVariations={[
         {
+          type: "image",
           title: "Loot",
           url: getSuroiImageLink(item),
         },
         {
+          type: "image",
           title: "World",
           url: `${IMAGE_BASE_URL}game/equipment/${item.idString}_world.svg`,
         },

diff --git a/components/sidebars/BuildingSidebar.tsx b/components/sidebars/BuildingSidebar.tsx
@@ -24,6 +24,7 @@ export default function BuildingSidebar({
       title={item.name}
       image={getSuroiImageLink(item)}
       imageVariations={buildingVariations(item).map((variation) => ({
+        type: "image",
         url: variation,
       }))}
     >

diff --git a/components/sidebars/GunSidebar.tsx b/components/sidebars/GunSidebar.tsx
@@ -45,6 +45,7 @@ export default function GunSidebar({ gun, explosion }: GunSidebarProps) {
         )}
         imageVariations={[
           {
+            type: "image",
             url: getSuroiImageLink(
               dual ? dualGun! : gun,
               undefined,
@@ -54,10 +55,12 @@ export default function GunSidebar({ gun, explosion }: GunSidebarProps) {
             title: "Loot",
           },
           {
+            type: "image",
             url: getSuroiImageLink(gun, undefined, "world"),
             title: "World",
           },
           {
+            type: "image",
             url: getSuroiKillfeedImageLink(dual ? dualGun! : gun),
             title: "Killfeed",
           },

diff --git a/components/sidebars/MeleeSidebar.tsx b/components/sidebars/MeleeSidebar.tsx
@@ -15,10 +15,12 @@ export default function MeleeSidebar({ item }: MeleeSidebarProps) {
       title={item.name}
       imageVariations={[
         {
+          type: "image",
           url: getSuroiImageLink(item),
           title: "Loot",
         },
         {
+          type: "image",
           url: getSuroiKillfeedImageLink(item),
           title: "Killfeed",
         },

diff --git a/components/sidebars/ObstacleSidebar.tsx b/components/sidebars/ObstacleSidebar.tsx
@@ -29,10 +29,12 @@ export default function ObstacleSidebar({
       imageVariations={
         item.variations
           ? range(item.variations).map((i) => ({
+              type: "image",
               url: getSuroiImageLink(item, i + 1),
             }))
           : [
               {
+                type: "image",
                 url: getSuroiImageLink(item),
               },
             ]

diff --git a/components/sidebars/ThrowableSidebar.tsx b/components/sidebars/ThrowableSidebar.tsx
@@ -18,11 +18,13 @@ export default function ThrowableSidebar({ item }: ThrowableSidebarProps) {
       title={item.name}
       imageVariations={[
         {
+          type: "image",
           url: getSuroiImageLink(item),
           alt: "Image of throwable",
           title: "Loot",
         },
         {
+          type: "image",
           url: getSuroiKillfeedImageLink(item),
           alt: "Image of throwable killfeed",
           title: "Killfeed",

diff --git a/lib/util/types.ts b/lib/util/types.ts
@@ -6,10 +6,19 @@ export type GalleryImage = {
 };
 
 export type ImageTab = {
-  url: string;
-  alt?: string;
   title?: string;
-};
+} & (
+  | {
+      type: "image";
+      url: string;
+      alt?: string;
+    }
+  | {
+      type: "svg";
+      objects: SVGObject[];
+      viewBox: string;
+    }
+);
 
 export type CalculatorMenu = {
   title: string;