npm - @zthun/romulator-web - Versions diffs - 1.1.0 - Mend

@zthun/romulator-web 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (47) hide show

package/CHANGELOG.md +21 -0
package/LICENSE +21 -0
package/dist/assets/index-CtJiKvl7.js +52645 -0
package/dist/favicon.ico +0 -0
package/dist/index.html +12 -0
package/dist/png/romulator-256x256.png +0 -0
package/dist/systems/uk/megadrive-256x256.png +0 -0
package/dist/systems/us/megadrive-256x256.png +0 -0
package/dist/systems/us/nes-256x256.png +0 -0
package/dist/systems/us/snes-256x256.png +0 -0
package/index.html +12 -0
package/package.json +48 -0
package/public/favicon.ico +0 -0
package/public/png/romulator-256x256.png +0 -0
package/public/systems/uk/megadrive-256x256.png +0 -0
package/public/systems/us/megadrive-256x256.png +0 -0
package/public/systems/us/nes-256x256.png +0 -0
package/public/systems/us/snes-256x256.png +0 -0
package/src/app/app-avatar.tsx +8 -0
package/src/app/app-title.tsx +10 -0
package/src/app/app.tsx +41 -0
package/src/environment/environment-service.mts +19 -0
package/src/environment/environment.mts +29 -0
package/src/index.tsx +14 -0
package/src/menu/menu.cm.mts +60 -0
package/src/menu/menu.spec.tsx +115 -0
package/src/menu/menu.tsx +130 -0
package/src/settings/setting-page.cm.mts +22 -0
package/src/settings/setting-page.spec.tsx +154 -0
package/src/settings/setting-page.tsx +83 -0
package/src/settings/settings-page.cm.mts +18 -0
package/src/settings/settings-page.spec.tsx +99 -0
package/src/settings/settings-page.tsx +82 -0
package/src/settings/settings-service.mts +38 -0
package/src/systems/system-avatar-card.cm.mts +17 -0
package/src/systems/system-avatar-card.tsx +41 -0
package/src/systems/system-page.cm.mts +33 -0
package/src/systems/system-page.spec.tsx +127 -0
package/src/systems/system-page.tsx +48 -0
package/src/systems/systems-page.cm.mts +39 -0
package/src/systems/systems-page.spec.tsx +81 -0
package/src/systems/systems-page.tsx +48 -0
package/src/systems/systems-service.mts +65 -0
package/src/systems/systems-service.spec.ts +144 -0
package/tsconfig.json +10 -0
package/vite.config.mts +9 -0
package/vitest.config.mts +9 -0

package/dist/favicon.ico ADDED Viewed

Binary file

package/dist/index.html ADDED Viewed

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Romulator: Organize your Games</title>
+    <script type="module" crossorigin src="/assets/index-CtJiKvl7.js"></script>
+  </head>
+  <body>
+    <div id="zthunworks-romulator"></div>
+  </body>
+</html>

package/dist/png/romulator-256x256.png ADDED Viewed

Binary file

package/dist/systems/uk/megadrive-256x256.png ADDED Viewed

Binary file

package/dist/systems/us/megadrive-256x256.png ADDED Viewed

Binary file

package/dist/systems/us/nes-256x256.png ADDED Viewed

Binary file

package/dist/systems/us/snes-256x256.png ADDED Viewed

Binary file

package/index.html ADDED Viewed

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Romulator: Organize your Games</title>
+  </head>
+  <body>
+    <div id="zthunworks-romulator"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>

package/package.json ADDED Viewed

@@ -0,0 +1,48 @@
+{
+  "name": "@zthun/romulator-web",
+  "version": "1.1.0",
+  "description": "Romulator frontend",
+  "author": "Anthony Bonta",
+  "license": "MIT",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/zthun/romulator",
+    "directory": "packages/romulator-web"
+  },
+  "scripts": {
+    "build": "vite build",
+    "start": "vite"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@types/node": "^24.0.3",
+    "@vitejs/plugin-react-swc": "^3.10.2",
+    "@zthun/cirque": "^7.1.4",
+    "@zthun/cirque-du-react": "^7.1.4",
+    "@zthun/fashion-boutique": "^10.1.6",
+    "@zthun/fashion-tailor": "^10.1.6",
+    "@zthun/fashion-theme": "^10.1.6",
+    "@zthun/helpful-fn": "^9.3.0",
+    "@zthun/helpful-query": "^9.3.0",
+    "@zthun/helpful-react": "^9.3.0",
+    "@zthun/janitor-build-config": "^19.2.4",
+    "@zthun/romulator-client": "^1.1.0",
+    "@zthun/webigail-http": "^4.0.3",
+    "@zthun/webigail-rest": "^4.0.3",
+    "@zthun/webigail-url": "^4.0.3",
+    "history": "^5.3.0",
+    "lodash-es": "^4.17.21",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "tsconfig-paths": "^4.2.0",
+    "typescript": "^5.8.3",
+    "vite": "^6.3.5",
+    "vite-tsconfig-paths": "^5.1.4",
+    "vitest": "^3.2.4",
+    "vitest-mock-extended": "^3.1.0"
+  },
+  "gitHead": "52bd432dd2df0980d450b20de58d7f58c6d0da94"
+}

package/public/favicon.ico ADDED Viewed

Binary file

package/public/png/romulator-256x256.png ADDED Viewed

Binary file

package/public/systems/uk/megadrive-256x256.png ADDED Viewed

Binary file

package/public/systems/us/megadrive-256x256.png ADDED Viewed

Binary file

package/public/systems/us/nes-256x256.png ADDED Viewed

Binary file

package/public/systems/us/snes-256x256.png ADDED Viewed

Binary file

package/src/app/app-avatar.tsx ADDED Viewed

@@ -0,0 +1,8 @@
+import { ZImageSource } from "@zthun/fashion-boutique";
+import { ZSizeFixed } from "@zthun/fashion-tailor";
+export function ZRomulatorAvatar() {
+  return (
+    <ZImageSource src="/png/romulator-256x256.png" width={ZSizeFixed.Medium} />
+  );
+}

package/src/app/app-title.tsx ADDED Viewed

@@ -0,0 +1,10 @@
+import { ZCaption, ZH1 } from "@zthun/fashion-boutique";
+export function ZRomulatorTitle() {
+  return (
+    <div className="ZRomulatorTitle-root">
+      <ZH1 compact>Romulator</ZH1>
+      <ZCaption compact>Organize your Games</ZCaption>
+    </div>
+  );
+}

package/src/app/app.tsx ADDED Viewed

@@ -0,0 +1,41 @@
+import {
+  ZBannerMain,
+  ZFashionThemeContext,
+  ZNavigate,
+  ZNotFound,
+  ZRoute,
+  ZRouteMap,
+} from "@zthun/fashion-boutique";
+import { createDarkTheme } from "@zthun/fashion-theme";
+import { ZRomulatorMenu } from "../menu/menu.js";
+import { ZRomulatorSettingPage } from "../settings/setting-page.js";
+import { ZRomulatorSettingsPage } from "../settings/settings-page.js";
+import { ZRomulatorSystemPage } from "../systems/system-page.js";
+import { ZRomulatorSystemsPage } from "../systems/systems-page.js";
+import { ZRomulatorAvatar } from "./app-avatar.js";
+import { ZRomulatorTitle } from "./app-title.js";
+const FashionTheme = createDarkTheme();
+export function ZRomulatorApp() {
+  return (
+    <ZFashionThemeContext.Provider value={FashionTheme}>
+      <ZBannerMain
+        TitleProps={{
+          avatar: <ZRomulatorAvatar />,
+          prefix: <ZRomulatorTitle />,
+          suffix: <ZRomulatorMenu />,
+        }}
+      >
+        <ZRouteMap>
+          <ZRoute path="/settings" element={<ZRomulatorSettingsPage />} />
+          <ZRoute path="/settings/:id" element={<ZRomulatorSettingPage />} />
+          <ZRoute path="/systems" element={<ZRomulatorSystemsPage />} />
+          <ZRoute path="/systems/:id" element={<ZRomulatorSystemPage />} />
+          <ZRoute path="" element={<ZNavigate to="/systems" />} />
+          <ZRoute path="*" element={<ZNotFound />} />
+        </ZRouteMap>
+      </ZBannerMain>
+    </ZFashionThemeContext.Provider>
+  );
+}

package/src/environment/environment-service.mts ADDED Viewed

@@ -0,0 +1,19 @@
+/* istanbul ignore file -- @preserve */
+import type { IZRomulatorEnvironment } from "./environment.mjs";
+import { ZRomulatorEnvironmentBuilder } from "./environment.mjs";
+export interface IZRomulatorEnvironmentService {
+  read(): Promise<IZRomulatorEnvironment>;
+}
+export class ZRomulatorEnvironmentService
+  implements IZRomulatorEnvironmentService
+{
+  public read(): Promise<IZRomulatorEnvironment> {
+    return Promise.resolve(new ZRomulatorEnvironmentBuilder().build());
+  }
+}
+export function createDefaultEnvironmentService(): IZRomulatorEnvironmentService {
+  return new ZRomulatorEnvironmentService();
+}

package/src/environment/environment.mts ADDED Viewed

@@ -0,0 +1,29 @@
+import { ZUrlBuilder } from "@zthun/webigail-url";
+export interface IZRomulatorEnvironment {
+  api: string;
+}
+export class ZRomulatorEnvironmentBuilder {
+  private _env: IZRomulatorEnvironment;
+  public constructor() {
+    this._env = {
+      api: new ZUrlBuilder()
+        .protocol("http")
+        .hostname("localhost")
+        .port(3000)
+        .append("api")
+        .build(),
+    };
+  }
+  public api(url: string) {
+    this._env.api = url;
+    return this;
+  }
+  public build() {
+    return structuredClone(this._env);
+  }
+}

package/src/index.tsx ADDED Viewed

@@ -0,0 +1,14 @@
+import { ZRouter } from "@zthun/fashion-boutique";
+import React from "react";
+import { createRoot } from "react-dom/client";
+import { ZRomulatorApp } from "./app/app.js";
+const container = createRoot(document.getElementById("zthunworks-romulator")!);
+container.render(
+  <React.StrictMode>
+    <ZRouter>
+      <ZRomulatorApp />
+    </ZRouter>
+  </React.StrictMode>,
+);

package/src/menu/menu.cm.mts ADDED Viewed

@@ -0,0 +1,60 @@
+import { ZCircusBy, ZCircusComponentModel } from "@zthun/cirque";
+import {
+  ZButtonComponentModel,
+  ZDialogComponentModel,
+  ZListItemComponentModel,
+} from "@zthun/fashion-boutique";
+export class ZRomulatorMenuComponentModel extends ZCircusComponentModel {
+  public static readonly Selector = ".ZRomulatorMenu-root";
+  private async listItem(
+    name: string,
+  ): Promise<ZListItemComponentModel | null> {
+    const drawer = await this.drawer();
+    const opened = await drawer.opened();
+    if (!opened) {
+      return null;
+    }
+    return ZCircusBy.first(drawer.driver, ZListItemComponentModel, name);
+  }
+  public systems = this.listItem.bind(this, "systems");
+  public games = this.listItem.bind(this, "games");
+  public audits = this.listItem.bind(this, "audits");
+  public steam = this.listItem.bind(this, "steam");
+  public settings = this.listItem.bind(this, "settings");
+  public drawer(): Promise<ZDialogComponentModel> {
+    return ZCircusBy.first(this.driver, ZDialogComponentModel, "navigation");
+  }
+  public button(): Promise<ZButtonComponentModel> {
+    return ZCircusBy.first(this.driver, ZButtonComponentModel, "toggler");
+  }
+  public async open(): Promise<void> {
+    const drawer = await this.drawer();
+    if (await drawer.opened()) {
+      return;
+    }
+    const button = await this.button();
+    await button.click();
+    await drawer.waitForOpen();
+  }
+  public async close(): Promise<void> {
+    const drawer = await this.drawer();
+    if (!(await drawer.opened())) {
+      return;
+    }
+    await drawer.close();
+    await drawer.waitForClose();
+  }
+}

package/src/menu/menu.spec.tsx ADDED Viewed

@@ -0,0 +1,115 @@
+import type { IZCircusDriver, IZCircusSetup } from "@zthun/cirque";
+import { ZCircusBy } from "@zthun/cirque";
+import { ZCircusSetupRenderer } from "@zthun/cirque-du-react";
+import { ZTestRouter } from "@zthun/fashion-boutique";
+import { createMemoryHistory, type MemoryHistory } from "history";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { ZRomulatorMenuComponentModel } from "./menu.cm.mjs";
+import { ZRomulatorMenu } from "./menu.js";
+describe("ZRomulatorMenu", () => {
+  let _renderer: IZCircusSetup<IZCircusDriver>;
+  let _driver: IZCircusDriver;
+  let _history: MemoryHistory;
+  const createTestTarget = async () => {
+    const element = (
+      <ZTestRouter location={_history.location} navigator={_history}>
+        <ZRomulatorMenu />
+      </ZTestRouter>
+    );
+    _renderer = new ZCircusSetupRenderer(element);
+    _driver = await _renderer.setup();
+    return ZCircusBy.first(_driver, ZRomulatorMenuComponentModel);
+  };
+  beforeEach(() => {
+    _history = createMemoryHistory();
+  });
+  afterEach(async () => {
+    await _driver?.destroy?.call(_driver);
+    await _renderer?.destroy?.call(_renderer);
+  });
+  describe("Open", () => {
+    it("should open the menu when the menu is clicked", async () => {
+      // Arrange.
+      const target = await createTestTarget();
+      // Act.
+      await target.open();
+      await target.open();
+      const drawer = await target.drawer();
+      const actual = await drawer?.opened();
+      // Assert.
+      expect(actual).toBeTruthy();
+    });
+    it("should close the menu", async () => {
+      // Arrange.
+      const target = await createTestTarget();
+      await target.open();
+      // Act.
+      await target.close();
+      await target.close();
+      const drawer = await target.drawer();
+      const actual = await drawer.opened();
+      // Assert.
+      expect(actual).toBeFalsy();
+    });
+    it("should not have menu items if the drawer is closed", async () => {
+      // Arrange.
+      const target = await createTestTarget();
+      // Act.
+      const actual = await target.systems();
+      // Assert.
+      expect(actual).toBeNull();
+    });
+  });
+  describe("Navigation", () => {
+    type NavigationName = "systems" | "settings" | "steam" | "audits" | "games";
+    const shouldNavigateTo = async (expected: string, name: NavigationName) => {
+      // Arrange.
+      const target = await createTestTarget();
+      await target.open();
+      // Act.
+      const item = await target[name]();
+      await item?.click();
+      // Assert.
+      expect(_history.location.pathname).toEqual(expected);
+    };
+    it("should navigation to the systems page", async () => {
+      await shouldNavigateTo("/systems", "systems");
+    });
+    it("should navigation to the games page", async () => {
+      await shouldNavigateTo("/games", "games");
+    });
+    it("should navigate to the settings page", async () => {
+      await shouldNavigateTo("/settings", "settings");
+    });
+    it("should navigate to the audits page", async () => {
+      await shouldNavigateTo("/audits", "audits");
+    });
+    it("should navigate to the steam page", async () => {
+      await shouldNavigateTo("/steam", "steam");
+    });
+  });
+});

package/src/menu/menu.tsx ADDED Viewed

@@ -0,0 +1,130 @@
+import {
+  useFashionTheme,
+  useNavigate,
+  ZButton,
+  ZCaption,
+  ZContentTitle,
+  ZDrawer,
+  ZH2,
+  ZH3,
+  ZIconFontAwesome,
+  ZList,
+  ZListItem,
+} from "@zthun/fashion-boutique";
+import { ZSizeFixed } from "@zthun/fashion-tailor";
+import { ZHorizontalAnchor } from "@zthun/helpful-fn";
+import { useMemo, useState } from "react";
+export function ZRomulatorMenu() {
+  const [expanded, setExpanded] = useState(false);
+  const open = useMemo(() => setExpanded.bind(null, true), []);
+  const close = useMemo(() => setExpanded.bind(null, false), []);
+  const { secondary } = useFashionTheme();
+  const navigate = useNavigate();
+  const navigateAndClose = (path: string) => {
+    navigate(path);
+    close();
+  };
+  return (
+    <div className="ZRomulatorMenu-root">
+      <ZButton
+        name="toggler"
+        onClick={open}
+        label={<ZIconFontAwesome name="bars" width={ZSizeFixed.ExtraSmall} />}
+      />
+      <ZDrawer
+        name="navigation"
+        open={expanded}
+        onClose={close}
+        anchor={ZHorizontalAnchor.Right}
+        fashion={secondary}
+        renderHeader={() => (
+          <ZContentTitle
+            avatar={<ZIconFontAwesome name="bars" />}
+            heading={<ZH2 compact>Menu</ZH2>}
+            suffix={
+              <ZButton
+                label={
+                  <ZIconFontAwesome
+                    name="xmark"
+                    width={ZSizeFixed.ExtraSmall}
+                  />
+                }
+                onClick={close}
+              />
+            }
+          />
+        )}
+      >
+        <ZList compact>
+          <ZListItem
+            name="systems"
+            cursor="pointer"
+            interactive
+            onClick={navigateAndClose.bind(null, "/systems")}
+          >
+            <ZContentTitle
+              avatar={<ZIconFontAwesome name="puzzle-piece" />}
+              heading={<ZH3 compact>Systems</ZH3>}
+              subHeading={<ZCaption>Your games organized by systems</ZCaption>}
+            />
+          </ZListItem>
+          <ZListItem
+            name="games"
+            interactive
+            cursor="pointer"
+            onClick={navigateAndClose.bind(null, "/games")}
+          >
+            <ZContentTitle
+              avatar={<ZIconFontAwesome name="gamepad" />}
+              heading={<ZH3 compact>Games</ZH3>}
+              subHeading={<ZCaption>View all games</ZCaption>}
+            />
+          </ZListItem>
+          <ZListItem
+            name="audits"
+            interactive
+            cursor="pointer"
+            onClick={navigateAndClose.bind(null, "/audits")}
+          >
+            <ZContentTitle
+              avatar={<ZIconFontAwesome name="magnifying-glass" />}
+              heading={<ZH3 compact>Audits</ZH3>}
+              subHeading={<ZCaption>Audit your games</ZCaption>}
+            />
+          </ZListItem>
+          <ZListItem
+            name="steam"
+            interactive
+            cursor="pointer"
+            onClick={navigateAndClose.bind(null, "/steam")}
+          >
+            <ZContentTitle
+              avatar={<ZIconFontAwesome name="steam" family="brands" />}
+              heading={<ZH3 compact>Steam</ZH3>}
+              subHeading={<ZCaption>Integrate your games with Steam</ZCaption>}
+            />
+          </ZListItem>
+          <ZListItem
+            name="settings"
+            interactive
+            cursor="pointer"
+            onClick={navigateAndClose.bind(null, "/settings")}
+          >
+            <ZContentTitle
+              avatar={<ZIconFontAwesome name="gear" />}
+              heading={<ZH3 compact>Settings</ZH3>}
+              subHeading={<ZCaption>Modify configs and options</ZCaption>}
+            />
+          </ZListItem>
+        </ZList>
+      </ZDrawer>
+    </div>
+  );
+}

package/src/settings/setting-page.cm.mts ADDED Viewed

@@ -0,0 +1,22 @@
+import { ZCircusBy, ZCircusComponentModel } from "@zthun/cirque";
+import {
+  ZCardComponentModel,
+  ZFormComponentModel,
+  ZSuspenseComponentModel,
+} from "@zthun/fashion-boutique";
+export class ZRomulatorSettingPageComponentModel extends ZCircusComponentModel {
+  public static readonly Selector = ".ZRomulatorSettingPage-root";
+  public card(): Promise<ZCardComponentModel> {
+    return ZCircusBy.first(this.driver, ZCardComponentModel);
+  }
+  public suspense(): Promise<ZSuspenseComponentModel> {
+    return ZCircusBy.first(this.driver, ZSuspenseComponentModel);
+  }
+  public form(): Promise<ZFormComponentModel> {
+    return ZCircusBy.first(this.driver, ZFormComponentModel);
+  }
+}