feat(card-data-viewer): init (genius-invokation#117)

* unocss update

* init new package

* wtf

* update

* update

* component update

* integrate into deck-builder

* try fix security issue

package.json

@@ -14,8 +14,8 @@
     "@arethetypeswrong/cli": "^0.16.4",
     "@bufbuild/buf": "^1.47.2",
     "@microsoft/api-extractor": "^7.47.9",
-    "@types/bun": "^1.1.14",
-    "bun": "^1.1.42",
+    "@types/bun": "^1.1.17",
+    "bun": "^1.1.45",
     "dependency-graph": "^1.0.0",
     "tsup": "^8.3.0",
     "type-fest": "^4.26.1",
@@ -26,6 +26,7 @@
     "caniuse-lite": "1.0.30001690"
   },
   "patchedDependencies": {
-    "[email protected]": "patches/[email protected]"
+    "[email protected]": "patches/[email protected]",
+    "[email protected]": "patches/[email protected]"
   }
 }

packages/assets-manager/scripts/generate_names.ts

@@ -1,13 +1,21 @@
-import { characters, actionCards, entities } from "@gi-tcg/static-data";
+import {
+  characters,
+  actionCards,
+  entities,
+  keywords,
+} from "@gi-tcg/static-data";
 
 const skills = characters.flatMap((character) => character.skills);
 
-const result = Object.fromEntries(
-  [...characters, ...skills, ...actionCards, ...entities].map((e) => [
+const KEYWORD_ID_OFFSET = 60_000_000;
+
+const result = Object.fromEntries([
+  ...[...characters, ...skills, ...actionCards, ...entities].map((e) => [
     e.id,
     e.name,
   ]),
-);
+  ...keywords.map((e) => [e.id + KEYWORD_ID_OFFSET, e.name]),
+]);
 
 await Bun.write(
   `${import.meta.dirname}/../src/names.json`,

packages/assets-manager/src/fetch.ts

@@ -22,6 +22,7 @@ import type {
   SkillRawData,
 } from "@gi-tcg/static-data";
 import { blobToDataUrl } from "./data_url";
+import { KEYWORD_ID_OFFSET } from "./names";
 
 export type AnyData =
   | ActionCardRawData
@@ -42,6 +43,9 @@ export async function getData(
   id: number,
   options: GetDataOptions = {},
 ): Promise<AnyData> {
+  if (id >= KEYWORD_ID_OFFSET) {
+    return getKeyword(id - KEYWORD_ID_OFFSET, options);
+  }
   const url = `${
     options.assetsApiEndpoint ?? DEFAULT_ASSET_API_ENDPOINT
   }/data/${id}`;
@@ -53,6 +57,21 @@ export async function getData(
   return promise;
 }
 
+export async function getKeyword(
+  id: number,
+  options: GetDataOptions = {},
+): Promise<AnyData> {
+  const url = `${
+    options.assetsApiEndpoint ?? DEFAULT_ASSET_API_ENDPOINT
+  }/data/K${id}`;
+  if (cache.has(url)) {
+    return cache.get(url);
+  }
+  const promise = fetch(url).then((r) => r.json());
+  cache.set(url, promise);
+  return promise;
+}
+
 export interface GetImageOptions extends CommonOptions {
   thumbnail?: boolean;
 }
@@ -72,7 +91,10 @@ export async function getImage(
   return promise;
 }
 
-export async function getImageUrl(id: number, options: GetImageOptions = {}): Promise<string> {
+export async function getImageUrl(
+  id: number,
+  options: GetImageOptions = {},
+): Promise<string> {
   const blob = await getImage(id, options);
   return blobToDataUrl(blob);
 }

packages/assets-manager/src/index.ts

@@ -29,4 +29,4 @@ export {
   getImageSync,
   getImageUrlSync,
 } from "./sync";
-export { getNameSync } from "./names";
+export { KEYWORD_ID_OFFSET, getNameSync } from "./names";

packages/assets-manager/src/names.ts

@@ -1,5 +1,7 @@
 import namesJson from "./names.json" with { type: "json" };
 
+export const KEYWORD_ID_OFFSET = 60_000_000;
+
 export function getNameSync(id: number): string | undefined {
   const name = (namesJson as Record<string, string>)[id];
   return name;

packages/card-data-viewer/.gitignore

@@ -0,0 +1,27 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Generated JSON
+src/data.json

packages/card-data-viewer/eslint.config.js

@@ -0,0 +1,42 @@
+import js from "@eslint/js";
+import { FlatCompat } from "@eslint/eslintrc";
+import solid from "eslint-plugin-solid/configs/typescript.js";
+import * as tsParser from "@typescript-eslint/parser";
+
+import { fileURLToPath } from "node:url";
+import { resolve } from "node:path";
+
+const __dirname = resolve(fileURLToPath(import.meta.url), "..");
+const compat = new FlatCompat({ resolvePluginsRelativeTo: __dirname });
+
+export default [
+  js.configs.recommended,
+  ...compat.extends("plugin:@typescript-eslint/recommended"),
+  ...compat.plugins("only-warn"),
+  {
+    files: ["src/**/*.{ts,tsx}"],
+    ...solid,
+    languageOptions: {
+      parser: tsParser,
+      parserOptions: {
+        project: true,
+        tsconfigRootDir: __dirname,
+      },
+    },
+  },
+  {
+    rules: {
+      semi: 0,
+      "@typescript-eslint/semi": 1,
+      eqeqeq: 1,
+      "no-unused-vars": 0,
+      "@typescript-eslint/no-unused-vars": 1,
+    },
+  },
+  {
+    files: ["**/*.cjs"],
+    env: {
+      commonjs: true,
+    }
+  }
+];

packages/card-data-viewer/index.html

@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Solid + TS</title>
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+      }
+      #root {
+        height: 100vh;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/dev.tsx"></script>
+  </body>
+</html>

packages/card-data-viewer/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@gi-tcg/card-data-viewer",
+  "version": "0.16.4",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "bun": "./src/index.tsx",
+      "import": "./dist/index.js"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "scripts": {
+    "dev": "bunx --bun vite",
+    "check": "tsc --noEmit",
+    "build": "bunx --bun vite build"
+  },
+  "peerDependencies": {
+    "solid-js": "^1.8.15"
+  },
+  "dependencies": {
+    "@gi-tcg/assets-manager": "workspace:*"
+  },
+  "devDependencies": {
+    "@gi-tcg/core": "workspace:*",
+    "@gi-tcg/typings": "workspace:*",
+    "@unocss/postcss": "^65.4.2",
+    "rollup-plugin-node-externals": "^7.0.1",
+    "unocss": "^65.4.2",
+    "vite": "^6.0.11",
+    "vite-plugin-dts": "^3.7.0",
+    "vite-plugin-solid": "^2.11.0"
+  }
+}

packages/card-data-viewer/postcss.config.mjs

@@ -0,0 +1,27 @@
+// Copyright (C) 2024-2025 Guyutongxue
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+import UnoCSS from "@unocss/postcss";
+
+/** @type {import("postcss-load-config").Config} */
+export default {
+  plugins: [UnoCSS()],
+  // https://github.com/unocss/unocss/discussions/3444
+  postprocess: [
+    (obj) => {
+      obj.selector = ".gi-tcg-card-data-viewer " + obj.selector;
+    },
+  ],
+};