@zthun/romulator-web 1.15.0 → 1.17.0

package/src/media/media-card.tsx

@@ -0,0 +1,109 @@
+import {
+  useCss,
+  ZCard,
+  ZIconFontAwesome,
+  ZImageSource,
+  ZStack,
+} from "@zthun/fashion-boutique";
+import { ZSizeFixed, ZSizeVaried } from "@zthun/fashion-tailor";
+import { css, cssJoinDefined, ZOrientation } from "@zthun/helpful-fn";
+import {
+  ZRomulatorGameMediaType,
+  ZRomulatorSystemMediaType,
+  type ZRomulatorMediaType,
+} from "@zthun/romulator-client";
+import { ZRomulatorEnvironmentBuilder } from "../environment/environment.mjs";
+
+// TODO: Localization
+const ZRomulatorMediaTypeName: Record<ZRomulatorMediaType, string> = {
+  [ZRomulatorGameMediaType.BackCover]: "Back Cover",
+  [ZRomulatorGameMediaType.Box3d]: "3D Box",
+  [ZRomulatorGameMediaType.Cover]: "Cover",
+  [ZRomulatorGameMediaType.FanArt]: "Fan Art",
+  [ZRomulatorGameMediaType.Manual]: "Manual",
+  [ZRomulatorGameMediaType.Marquee]: "Marquee",
+  [ZRomulatorGameMediaType.PhysicalMedia]: "Physical Media",
+  [ZRomulatorGameMediaType.Screenshot]: "Screenshot",
+  [ZRomulatorGameMediaType.Title]: "Title",
+  [ZRomulatorGameMediaType.Video]: "Video",
+  [ZRomulatorSystemMediaType.Controller]: "Controller",
+  [ZRomulatorSystemMediaType.Picture]: "System Picture",
+  [ZRomulatorSystemMediaType.Wheel]: "Wheel Logo",
+};
+
+// TODO: Localization
+const ZRomulatorMediaTypeDescription: Record<ZRomulatorMediaType, string> = {
+  [ZRomulatorGameMediaType.BackCover]: "Rear packaging artwork.",
+  [ZRomulatorGameMediaType.Box3d]: "3D box render.",
+  [ZRomulatorGameMediaType.Cover]: "Front cover art.",
+  [ZRomulatorGameMediaType.FanArt]: "Community artwork.",
+  [ZRomulatorGameMediaType.Manual]: "Digital version of the game manual.",
+  [ZRomulatorGameMediaType.Marquee]: "Game Logo.",
+  [ZRomulatorGameMediaType.PhysicalMedia]: "Disc or cartridge.",
+  [ZRomulatorGameMediaType.Screenshot]: "In-game action.",
+  [ZRomulatorGameMediaType.Title]: "Screen upon load.",
+  [ZRomulatorGameMediaType.Video]: "Gameplay or trailer video preview.",
+  [ZRomulatorSystemMediaType.Controller]: "Primary controller image.",
+  [ZRomulatorSystemMediaType.Picture]: "Image of system hardware.",
+  [ZRomulatorSystemMediaType.Wheel]: "Logo for the system.",
+};
+
+/**
+ * Props for the media card.
+ */
+export interface IZRomulatorMediaCard {
+  /**
+   * The id of the game or system.
+   */
+  identifier: string;
+  /**
+   * The type of media to retrieve.
+   */
+  type: ZRomulatorMediaType;
+}
+
+export function ZRomulatorMediaCard(props: IZRomulatorMediaCard) {
+  const { identifier, type } = props;
+  const { api } = new ZRomulatorEnvironmentBuilder().build();
+  const id = `${identifier}-${type}`;
+  const media = `${api}/media/${id}`;
+
+  const _className = useCss(css`
+    & .ZRomulatorMediaCard-image-container {
+      height: 20rem;
+    }
+
+    & .ZRomulatorMediaCard-image-container img {
+      object-fit: scale-down;
+    }
+  `);
+
+  return (
+    <ZCard
+      className={cssJoinDefined("ZRomulatorMediaCard-root", _className)}
+      name={type}
+      TitleProps={{
+        avatar: <ZIconFontAwesome name="image" width={ZSizeFixed.Medium} />,
+        heading: ZRomulatorMediaTypeName[type],
+        subHeading: ZRomulatorMediaTypeDescription[type],
+      }}
+      data-type={type}
+      data-identifier={identifier}
+    >
+      <ZStack
+        className="ZRomulatorMediaCard-image-container"
+        orientation={ZOrientation.Horizontal}
+        width={ZSizeVaried.Full}
+        height={ZSizeVaried.Full}
+        align={{ items: "center" }}
+        justify={{ content: "center" }}
+      >
+        <ZImageSource
+          src={media}
+          width={ZSizeVaried.Full}
+          height={ZSizeVaried.Full}
+        />
+      </ZStack>
+    </ZCard>
+  );
+}

package/src/systems/system-page.cm.mts

@@ -6,7 +6,12 @@ import {
   ZGridViewComponentModel,
   ZSuspenseComponentModel,
 } from "@zthun/fashion-boutique";
+import { firstDefined } from "@zthun/helpful-fn";
+import { ZRomulatorSystemMediaType } from "@zthun/romulator-client";
 import { kebabCase } from "lodash-es";
+import { ZRomulatorMediaCardComponentModel } from "../media/media-card.cm.mjs";
+
+const { Controller, Picture, Wheel } = ZRomulatorSystemMediaType;
 
 export class ZRomulatorSystemPageComponentModel extends ZCircusComponentModel {
   public static readonly Selector = ".ZRomulatorSystemPage-root";
@@ -31,28 +36,39 @@ export class ZRomulatorSystemPageComponentModel extends ZCircusComponentModel {
     return ZCircusBy.optional(this.driver, ZAlertComponentModel);
   }
 
-  public system(): Promise<ZCardComponentModel | null> {
-    return ZCircusBy.optional(this.driver, ZCardComponentModel, "system-info");
+  public info(): Promise<ZCardComponentModel | null> {
+    return ZCircusBy.optional(this.driver, ZCardComponentModel, "info");
   }
 
-  public media(): Promise<ZCardComponentModel | null> {
-    return ZCircusBy.optional(this.driver, ZCardComponentModel, "system-media");
+  private media(
+    type: ZRomulatorSystemMediaType,
+  ): Promise<ZRomulatorMediaCardComponentModel> {
+    return ZCircusBy.first(
+      this.driver,
+      ZRomulatorMediaCardComponentModel,
+      type,
+    );
   }
 
-  private async fieldValue(key: string): Promise<string> {
-    const klass = `.ZRomulatorSystemPage-${kebabCase(key)}`;
-    const element = await this.driver.select(klass);
+  public controller = this.media.bind(this, Controller);
+  public picture = this.media.bind(this, Picture);
+  public wheel = this.media.bind(this, Wheel);
 
-    return element.attribute("data-value", "");
+  private async field(key: string): Promise<string> {
+    const info = await this.info();
+    const klass = `.ZRomulatorSystemPage-${kebabCase(key)}`;
+    const element = await info?.driver.select(klass);
+    const value = await element?.attribute("data-value", "");
+    return firstDefined("", value);
   }
 
-  public name = this.fieldValue.bind(this, "Name");
-  public company = this.fieldValue.bind(this, "Company");
-  public hardwareType = this.fieldValue.bind(this, "Hardware Type");
-  public mediaFormat = this.fieldValue.bind(this, "Media Format");
-  public contentType = this.fieldValue.bind(this, "Content Type");
-  public productionStart = this.fieldValue.bind(this, "Production Start");
-  public productionEnd = this.fieldValue.bind(this, "Production End");
+  public name = this.field.bind(this, "Name");
+  public company = this.field.bind(this, "Company");
+  public hardwareType = this.field.bind(this, "Hardware Type");
+  public mediaFormat = this.field.bind(this, "Media Format");
+  public contentType = this.field.bind(this, "Content Type");
+  public productionStart = this.field.bind(this, "Production Start");
+  public productionEnd = this.field.bind(this, "Production End");
 
   public games(): Promise<ZGridViewComponentModel | null> {
     return ZCircusBy.optional(this.driver, ZGridViewComponentModel);

package/src/systems/system-page.spec.tsx

@@ -21,6 +21,7 @@ import {
   ZRomulatorSystemHardwareType,
   ZRomulatorSystemId,
   ZRomulatorSystemMediaFormat,
+  ZRomulatorSystemMediaType,
 } from "@zthun/romulator-client";
 import type { History } from "history";
 import { createMemoryHistory } from "history";
@@ -159,44 +160,6 @@ describe("SystemPage", () => {
     });
   });
 
-  describe("System", () => {
-    it("should render the system information card", async () => {
-      // Arrange.
-      const target = await createTestTarget();
-      await target.load();
-
-      // Act.
-      const actual = await target.system();
-
-      // Assert.
-      expect(actual).toBeTruthy();
-    });
-
-    it("should render the system media card", async () => {
-      // Arrange.
-      const target = await createTestTarget();
-      await target.load();
-
-      // Act.
-      const actual = await target.media();
-
-      // Assert.
-      expect(actual).toBeTruthy();
-    });
-
-    it("should render the games list", async () => {
-      // Arrange.
-      const target = await createTestTarget();
-      await target.load();
-
-      // Act.
-      const actual = await target.games();
-
-      // Assert.
-      expect(actual).toBeTruthy();
-    });
-  });
-
   describe("Information", () => {
     async function shouldRenderInformation(
       expected: string,
@@ -292,4 +255,48 @@ describe("SystemPage", () => {
       expect(history.location.pathname).toEqual(`/games/${batman.id}`);
     });
   });
+
+  describe("Media", () => {
+    it("should render the controller", async () => {
+      // Arrange.
+      const target = await createTestTarget();
+
+      // Act.
+      const image = await target.controller();
+      const identifier = await image.identifier();
+      const actual = await image.type();
+
+      // Assert.
+      expect(identifier).toEqual(nes.id);
+      expect(actual).toEqual(ZRomulatorSystemMediaType.Controller);
+    });
+
+    it("should render the picture", async () => {
+      // Arrange.
+      const target = await createTestTarget();
+
+      // Act.
+      const image = await target.picture();
+      const identifier = await image.identifier();
+      const actual = await image.type();
+
+      // Assert.
+      expect(identifier).toEqual(nes.id);
+      expect(actual).toEqual(ZRomulatorSystemMediaType.Picture);
+    });
+
+    it("should render the wheel", async () => {
+      // Arrange.
+      const target = await createTestTarget();
+
+      // Act.
+      const image = await target.wheel();
+      const identifier = await image.identifier();
+      const actual = await image.type();
+
+      // Assert.
+      expect(identifier).toEqual(nes.id);
+      expect(actual).toEqual(ZRomulatorSystemMediaType.Wheel);
+    });
+  });
 });

package/src/systems/system-page.tsx

@@ -3,19 +3,16 @@ import {
   useParams,
   ZAlert,
   ZBreadcrumbsLocation,
-  ZBubble,
   ZCaption,
   ZCard,
-  ZCarousel,
   ZGrid,
   ZIconFontAwesome,
-  ZImageSource,
   ZLabel,
   ZStack,
   ZSuspenseProgress,
 } from "@zthun/fashion-boutique";
 import { ZSizeFixed, ZSizeVaried } from "@zthun/fashion-tailor";
-import { firstDefined, ZOrientation } from "@zthun/helpful-fn";
+import { firstDefined } from "@zthun/helpful-fn";
 import {
   ZDataRequestBuilder,
   ZFilterBinaryBuilder,
@@ -25,10 +22,7 @@ import {
   isStateLoading,
   useSyncState,
 } from "@zthun/helpful-react";
-import type {
-  IZRomulatorSystem,
-  ZRomulatorMediaType,
-} from "@zthun/romulator-client";
+import type { IZRomulatorSystem } from "@zthun/romulator-client";
 import {
   ZRomulatorSystemContentType,
   ZRomulatorSystemHardwareType,
@@ -36,9 +30,9 @@ import {
   ZRomulatorSystemMediaType,
 } from "@zthun/romulator-client";
 import { kebabCase, startCase } from "lodash-es";
-import { useMemo, useState } from "react";
-import { ZRomulatorEnvironmentBuilder } from "../environment/environment.mjs";
+import { useMemo } from "react";
 import { ZRomulatorGamesList } from "../games/games-list.js";
+import { ZRomulatorMediaCard } from "../media/media-card.js";
 import { useSystem } from "./systems-service.mjs";
 
 // TODO:  These enum headers should be done in i18n.  Keeping them here for now is fine.
@@ -75,7 +69,6 @@ export function ZRomulatorSystemPage() {
   const { id } = useParams();
   const { error } = useFashionTheme();
   const [system] = useSystem(firstDefined("", id));
-  const [mediaIndex, setMediaIndex] = useState(0);
   const gameFilter = useMemo(
     () =>
       new ZFilterBinaryBuilder().subject("system").equal().value(id).build(),
@@ -88,6 +81,7 @@ export function ZRomulatorSystemPage() {
   );
 
   const [userRequest, setGameRequest] = useSyncState(baseGameRequest);
+  const media = useMemo(() => Object.values(ZRomulatorSystemMediaType), []);
 
   const renderSystemInfoField = (
     label: string,
@@ -117,7 +111,7 @@ export function ZRomulatorSystemPage() {
 
     return (
       <ZCard
-        name="system-info"
+        name="info"
         TitleProps={{
           avatar: (
             <ZIconFontAwesome name="puzzle-piece" width={ZSizeFixed.Medium} />
@@ -168,56 +162,10 @@ export function ZRomulatorSystemPage() {
     );
   };
 
-  const renderSystemMedia = (
-    type: ZRomulatorMediaType,
-    system: IZRomulatorSystem,
-  ) => {
-    const { api } = new ZRomulatorEnvironmentBuilder().build();
-    const id = `${system.id}-${type}`;
-    const media = `${api}/media/${id}`;
-
-    return (
-      <ZBubble width={ZSizeFixed.ExtraLarge}>
-        <ZImageSource
-          className="ZRomulatorSystemsPage-wheel"
-          src={media}
-          width={ZSizeVaried.Full}
-        />
-      </ZBubble>
-    );
-  };
-
-  const renderSystemMediaCard = (system: IZRomulatorSystem) => {
-    const media = [
-      ZRomulatorSystemMediaType.Picture,
-      ZRomulatorSystemMediaType.Controller,
-      ZRomulatorSystemMediaType.Wheel,
-    ];
-
-    return (
-      <ZCard
-        name="system-media"
-        TitleProps={{
-          avatar: <ZIconFontAwesome name="image" width={ZSizeFixed.Medium} />,
-          heading: "Media",
-          subHeading: startCase(media[mediaIndex]),
-        }}
-      >
-        <ZStack
-          orientation={ZOrientation.Horizontal}
-          width={ZSizeVaried.Full}
-          align={{ items: "center" }}
-          justify={{ content: "center" }}
-        >
-          <ZCarousel
-            count={media.length}
-            renderAtIndex={(i) => renderSystemMedia(media[i], system)}
-            value={mediaIndex}
-            onValueChange={setMediaIndex}
-          />
-        </ZStack>
-      </ZCard>
-    );
+  const renderSystemMedia = (system: IZRomulatorSystem) => {
+    return media.map((type) => (
+      <ZRomulatorMediaCard key={type} identifier={system.id} type={type} />
+    ));
   };
 
   const renderPageContent = () => {
@@ -238,12 +186,16 @@ export function ZRomulatorSystemPage() {
     }
 
     return (
-      <ZGrid columns={{ xl: "1fr auto", md: "1fr" }} gap={ZSizeFixed.Medium}>
+      <ZGrid
+        columns={{ xl: "1fr auto", md: "1fr" }}
+        gap={ZSizeFixed.Medium}
+        align={{ items: "start" }}
+      >
         {renderSystemGameListCard(system)}
 
         <ZStack gap={ZSizeFixed.Medium}>
           {renderSystemInfoCard(system)}
-          {renderSystemMediaCard(system)}
+          {renderSystemMedia(system)}
         </ZStack>
       </ZGrid>
     );