first

AGENTS.md

@@ -54,3 +54,9 @@ You are an expert in TypeScript, Angular, and scalable web application developme
 - Design services around a single responsibility
 - Use the `providedIn: 'root'` option for singleton services
 - Use the `inject()` function instead of constructor injection
+
+## References
+
+These directories contain source codes for reference, but please DO NOT edit them directly.
+
+- koishipro-core.js: /home/nanahira/ygo/koishipro-core.js

angular.json

@@ -2,7 +2,8 @@
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "version": 1,
   "cli": {
-    "packageManager": "npm"
+    "packageManager": "npm",
+    "analytics": false
   },
   "newProjectRoot": "projects",
   "projects": {
@@ -22,6 +23,16 @@
               {
                 "glob": "**/*",
                 "input": "public"
+              },
+              {
+                "glob": "libocgcore.wasm",
+                "input": "node_modules/koishipro-core.js/dist/vendor/wasm_esm",
+                "output": "assets/ocgcore"
+              },
+              {
+                "glob": "sql-wasm.wasm",
+                "input": "node_modules/sql.js/dist",
+                "output": "assets/sql.js"
               }
             ],
             "styles": [

eslint.config.cjs

+const angularEslint = require('@angular-eslint/eslint-plugin');
+const angularTemplateEslint = require('@angular-eslint/eslint-plugin-template');
+const angularTemplateParser = require('@angular-eslint/template-parser');
+const typescriptEslint = require('@typescript-eslint/eslint-plugin');
+const typescriptParser = require('@typescript-eslint/parser');
+
+const tsconfigRootDir = __dirname;
+
+module.exports = [
+  {
+    ignores: [
+      'node_modules/',
+      'dist/',
+      '.angular/',
+      'coverage/',
+      'public/',
+      '**/*.min.js',
+    ],
+  },
+  {
+    files: ['**/*.ts'],
+    languageOptions: {
+      parser: typescriptParser,
+      parserOptions: {
+        project: ['tsconfig.json', 'tsconfig.app.json', 'tsconfig.spec.json'],
+        tsconfigRootDir,
+      },
+    },
+    plugins: {
+      '@typescript-eslint': typescriptEslint,
+      '@angular-eslint': angularEslint,
+    },
+    rules: {
+      ...typescriptEslint.configs.recommendedTypeChecked.rules,
+      ...typescriptEslint.configs.stylisticTypeChecked.rules,
+      ...angularEslint.configs.recommended.rules,
+      '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
+      '@typescript-eslint/consistent-type-imports': ['error', { prefer: 'type-imports' }],
+    },
+  },
+  {
+    files: ['**/*.html'],
+    languageOptions: {
+      parser: angularTemplateParser,
+    },
+    plugins: {
+      '@angular-eslint/template': angularTemplateEslint,
+    },
+    rules: {
+      ...angularTemplateEslint.configs.recommended.rules,
+      ...angularTemplateEslint.configs.accessibility.rules,
+    },
+  },
+];

package.json

@@ -6,7 +6,8 @@
     "start": "ng serve",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
-    "test": "ng test"
+    "test": "ng test",
+    "lint": "eslint ."
   },
   "prettier": {
     "printWidth": 100,
@@ -29,15 +30,26 @@
     "@angular/forms": "^21.1.0",
     "@angular/platform-browser": "^21.1.0",
     "@angular/router": "^21.1.0",
+    "bootstrap": "^5.3.8",
+    "jszip": "^3.10.1",
+    "koishipro-core.js": "^1.0.8",
     "rxjs": "~7.8.0",
+    "sql.js": "^1.13.0",
     "tslib": "^2.3.0"
   },
   "devDependencies": {
+    "@angular-eslint/eslint-plugin": "^21.1.0",
+    "@angular-eslint/eslint-plugin-template": "^21.1.0",
+    "@angular-eslint/template-parser": "^21.1.0",
     "@angular/build": "^21.1.2",
     "@angular/cli": "^21.1.2",
     "@angular/compiler-cli": "^21.1.0",
+    "@types/sql.js": "^1.4.9",
+    "@typescript-eslint/eslint-plugin": "^8.27.0",
+    "@typescript-eslint/parser": "^8.27.0",
+    "eslint": "^9.20.0",
     "jsdom": "^27.1.0",
     "typescript": "~5.9.2",
     "vitest": "^4.0.8"
   }
-}
\ No newline at end of file
+}

src/app/app.css

+:host {
+  display: block;
+}
+
+.card {
+  border-color: #e4e7eb;
+}
+
+.progress {
+  height: 0.75rem;
+}

src/app/app.spec.ts

@@ -18,6 +18,6 @@ describe('App', () => {
     const fixture = TestBed.createComponent(App);
     await fixture.whenStable();
     const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, ygopro-cardtest-web');
+    expect(compiled.querySelector('h1')?.textContent).toContain('YGOPro 脚本测试器');
   });
 });

src/app/resource-urls.ts

+export const YGOPRO_CDB_URL = 'https://cdntx.moecube.com/koishipro/contents/cards.cdb';
+export const YGOPRO_SCRIPT_ZIP_URL = 'https://cdntx.moecube.com/koishipro/script-zip/script.zip';

src/index.html

 <!doctype html>
-<html lang="en">
+<html lang="zh-CN">
 <head>
   <meta charset="utf-8">
-  <title>YgoproCardtestWeb</title>
+  <title>YGOPro 脚本测试器</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">

src/styles.css

-/* You can add global styles to this file, and also import other style files */
+@import "bootstrap/dist/css/bootstrap.min.css";
+
+:root {
+  color-scheme: light;
+}
+
+body {
+  background: #f6f7f9;
+}
+
+main {
+  min-height: 100vh;
+}