add puppeteer support

0e058b7b · nanahira · 133ddc36 · 0e058b7b · 0e058b7b · 0e058b7b
Commit 0e058b7b authored Jan 10, 2023 by nanahira
Show whitespace changes
Inline Side-by-side

Showing with 65 additions and 14 deletions

dev/index.ts dev/index.ts +1 -1

package.json package.json +11 -0

src/index.tsx src/index.tsx +53 -13

No files found.
--- a/dev/index.ts
+++ b/dev/index.ts
@@ -30,7 +30,7 @@ app.plugin(ExtrasInDev);
 // Target plugin
 app.plugin(TargetPlugin, {
  databasePaths: ['./dev/ygopro-database/locales/zh-CN'],
-  usePuppeteer: true,
+  usePuppeteer: false,
 });

 app.plugin(PuppeteerPlugin);

--- a/package.json
+++ b/package.json
@@ -15,6 +15,10 @@
    "url": "https://code.mycard.moe/3rdeye/koishi-plugin-ygocard.git"
  },
  "author": "Nanahira <nanahira@momobako.com>",
+  "contributors": [
+    "Nanahira <nanahira@momobako.com>",
+    "Anillc <void@anillc.cn>"
+  ],
  "license": "MIT",
  "keywords": [
    "Koishi.js",
@@ -81,5 +85,12 @@
    ],
    "coverageDirectory": "../coverage",
    "testEnvironment": "node"
+  },
+  "koishi": {
+    "service": {
+      "optional": [
+        "puppeteer"
+      ]
+    }
  }
 }
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -119,23 +119,63 @@ export default class YGOCardPlugin
    if (!this.config.usePuppeteer || !this.puppeteer) {
      return card.getDisplayString(this.config);
    }
-    const url = card.getPic(this.config);
+    const img = card.getPic(this.config);
    const { name, id, desc } = card;
-    const metaText = card.getMetaText(this.config);
+    const meta = card.getMetaText(this.config);
    return (
      <html>
-        <body>
        <div>
-            <image src={url} />
+          <style>{`
+        .img  {
+          grid-area: img;
+          width: 150px;
+          border-radius: 5px;
+          border: solid 1px gray;
+          padding: 5px;
+        }
+        .name { grid-area: name; }
+        .hr   {
+          grid-area: hr;
+          width: 100%;
+        }
+        .id   { grid-area: id; }
+        .meta { grid-area: meta; }
+        .desc {
+          grid-area: desc;
+          border-radius: 5px;
+          border: solid 1px gray;
+          padding: 10px;
+        }
+
+        .main {
+          display: grid;
+          grid-template-areas:
+            'img  name name name'
+            'img  name name name'
+            'img  hr   hr   hr  '
+            'img  meta meta meta'
+            'img  none none none'
+            'desc desc desc desc';
+          gap: 10px;
+          width: 400px;
+          padding: 20px;
+        }
+      `}</style>
+          <div class="main">
+            <image class="img" src={img} />
+            <div class="name">
+              <h3>{name}</h3>
+              <div>{id}</div>
+            </div>
+            <hr class="hr" />
+            <div class="meta">
+              {...meta.split('\n').map((line) => <div>{line}</div>)}
+            </div>
+            <div class="desc">
+              {...desc.split('\n').map((line) => <div>{line}</div>)}
            </div>
-          <div>
-            {name} {id}
          </div>
-          <div>
-            <p>{metaText}</p>
-            <p>{desc}</p>
        </div>
-        </body>
      </html>
    );
  }