fix: dom-to-image add: specialthanks

2025-07-14 00:02:45 +08:00 · 2021-09-07 21:41:12 +08:00
parent 3f3d6dda0f
commit 4964b01eac
9 changed files with 243 additions and 19 deletions
--- a/data/specialthanks.json
+++ b/data/specialthanks.json
@ -0,0 +1,43 @@
+{
+    "1": {
+        "id": 1,
+        "group": 1,
+        "name": "白夜",
+        "comment": "买正版游戏，就是在给自己向往的世界投资。"
+    },
+    "2": {
+        "id": 2,
+        "group": 2,
+        "name": "果てない雨"
+    },
+    "3": {
+        "id": 3,
+        "group": 2,
+        "name": "qwe凑斗光"
+    },
+    "4": {
+        "id": 4,
+        "group": 2,
+        "name": "星芒月幻"
+    },
+    "5": {
+        "id": 5,
+        "group": 2,
+        "name": "宇宙常数圆周率"
+    },
+    "6": {
+        "id": 6,
+        "group": 2,
+        "name": "当然是选择原谅她了"
+    },
+    "7": {
+        "id": 7,
+        "group": 2,
+        "name": "好好吃饭."
+    },
+    "8": {
+        "id": 8,
+        "group": 2,
+        "name": "加藤骑士"
+    }
+}
--- a/data/specialthanks.xlsx
+++ b/data/specialthanks.xlsx
--- a/package.json
+++ b/package.json
@ -13,7 +13,6 @@
        "@babel/preset-env": "^7.15.4",
        "babel-loader": "^8.2.2",
        "core-js": "^3.17.2",
-        "dom-to-image": "^2.6.0",
        "webpack": "^5.51.2",
        "webpack-dev-server": "^4.1.0",
        "xlsx": "^0.17.0"
--- a/src/app.js
+++ b/src/app.js
@ -1,7 +1,7 @@
 import { max, sum } from './functions/util.js';
 import { summary } from './functions/summary.js'
 import Life from './life.js'
-import domtoimage from 'dom-to-image';
+
 class App{
    constructor(){
        this.#life = new Life();
@ -14,11 +14,17 @@ class App{
    #isEnd = false;
    #selectedExtendTalent = null;
    #hintTimeout;
+    #specialthanks;

    async initial() {
        this.initPages();
        this.switch('loading');
-        await this.#life.initial();
+        const [,specialthanks] = await Promise.all([
+            this.#life.initial(),
+            json('specialthanks')
+        ]);
+        this.#specialthanks = specialthanks;
+        console.table(specialthanks);
        this.switch('index');
        window.onerror = (event, source, lineno, colno, error) => {
            this.hint(`[ERROR] at (${source}:${lineno}:${colno})\n\n${error?.stack||error||'unknow Error'}`, 'error');
@ -42,6 +48,7 @@ class App{
        <div id="main">
            <div id="cnt" class="head">已重开1次</div>
            <button id="rank">排行榜</button>
+            <button id="specialthanks">特别感谢</button>
            <button id="themeToggleBtn">黑</button>
            <div id="title">
                人生重开模拟器<br>
@ -74,6 +81,25 @@ class App{
                this.setTheme(localStorage.getItem('theme'))
            });

+        indexPage
+            .find('#specialthanks')
+            .click(()=>this.switch('specialthanks'));
+
+        const specialThanksPage = $(`
+        <div id="main">
+            <button id="specialthanks">返回</button>
+            <div id="spthx">
+                <ul class="g1"></ul>
+                <ul class="g2"></ul>
+            </div>
+            <button id="sponsor" onclick="window.open('https://afdian.net/@LifeRestart')">打赏作者</button>
+        </div>
+        `);
+
+        specialThanksPage
+            .find('#specialthanks')
+            .click(()=>this.switch('index'));
+
        // Talent
        const talentPage = $(`
        <div id="main">
@ -347,7 +373,7 @@ class App{
                        if(ua.match(/MicroMessenger/i)=="micromessenger") {
                            $('#endImage').attr('src', dataUrl);
                        }
-                        
+
                    });
            })
        trajectoryPage
@ -375,7 +401,7 @@ class App{
            <button id="again" class="mainbtn" style="top:auto; bottom:0.1em"><span class="iconfont">&#xe6a7;</span>再次重开</button>
        </div>
        `);
-            
+
        summaryPage
            .find('#again')
            .click(()=>{
@ -393,7 +419,6 @@ class App{
                page: loadingPage,
                clear: ()=>{},
            },
-
            index: {
                page: indexPage,
                btnRank: indexPage.find('#rank'),
@ -417,6 +442,25 @@ class App{
                    cnt.hide();
                },
            },
+            specialthanks: {
+                page: specialThanksPage,
+                clear: () => {
+                    const groups = [
+                        specialThanksPage.find('#spthx > ul.g1'),
+                        specialThanksPage.find('#spthx > ul.g2'),
+                    ];
+                    groups.forEach(g=>g.empty());
+                    Object
+                        .values(this.#specialthanks)
+                        .sort(()=>0.5-Math.random())
+                        .forEach(({group, name, comment})=>groups[--group].append(`
+                            <li>
+                                <span class="name">${name}</span>
+                                <span class="comment">${comment||''}</span>
+                            </li>
+                        `))
+                }
+            },
            talent: {
                page: talentPage,
                clear: ()=>{
@ -511,7 +555,7 @@ class App{
                        })(),
                    ].join(''));
                }
-            }
+            },
        }
    }

--- a/view/dark.css
+++ b/view/dark.css
@ -100,11 +100,14 @@ body {
    -moz-osx-font-smoothing: grayscale;
 }

+#sponsor,
+#specialthanks,
 #rank {
    position: fixed;
-    top: 1rem;
+    top: 4rem;
    right: 1rem;
-    padding: 0.1rem 1rem;
+    padding: 0.1rem;
+    width: 6rem;
    border: none;
    border-radius: 0.2rem;
    background-color:lightsteelblue;
@ -112,6 +115,74 @@ body {
    color: #EEEEEE;
    cursor: pointer;
    z-index:2;
+    word-wrap: none;
+}
+
+#specialthanks {
+    background-color: #5865F2;
+    top: 1rem;
+}
+
+#sponsor {
+  top: auto;
+  bottom: 0;
+  right: 50%;
+  transform: translate(50%, -50%);
+}
+
+#spthx {
+    position: fixed;
+    display: grid;
+    top: 4rem;
+    bottom: 5rem;
+    left: 50%;
+    width: 30rem;
+    max-width: calc(100% - 2rem);
+    transform: translateX(-50%);
+}
+
+#spthx ul {
+    list-style-type: none;
+    padding: 0;
+}
+
+#spthx ul li {
+  margin: 0;
+}
+
+#spthx ul.g1 {
+  display: grid;
+  max-block-size: 9rem;
+  max-height: 9rem;
+  overflow: scroll;
+}
+
+#spthx ul.g1 li {
+  display: inline-grid;
+  background-color: orange;
+  margin-bottom: 0.5rem;
+  padding: 0.2rem 0;
+  grid-template-columns: 7rem auto;
+}
+
+#spthx ul.g1 li .name {
+  padding: 0 0.5rem;
+  font-weight: 700;
+}
+
+#spthx ul.g1 li .comment {
+  padding: 0 0.5rem;
+}
+
+#spthx ul.g2 {
+  color: white;
+  display: grid;
+  grid-template-columns: 50% 50%;
+  overflow: scroll;
+}
+
+#spthx ul.g2 li {
+  text-align: center;
 }

 #themeToggleBtn {
--- a/view/index.html
+++ b/view/index.html
@ -8,7 +8,8 @@
    <meta name="keywords" content="人生重开模拟器 liferestart life restart remake 人生重来"/>
    <link id="themeLink" rel="stylesheet" href="light.css">
    <link rel="manifest" href="./manifest.json">
-    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.js" integrity="sha512-wUa0ktp10dgVVhWdRVfcUO4vHS0ryT42WOEcXjVVF2+2rcYBKTY7Yx7JCEzjWgPV+rj2EDUr8TwsoWF6IoIOPg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="../public/bundle.js"></script>
    <title>Life Restart</title>
 </head>
--- a/view/light.css
+++ b/view/light.css
@ -97,18 +97,88 @@ body {
    -moz-osx-font-smoothing: grayscale;
 }

+#sponsor,
+#specialthanks,
 #rank {
    position: fixed;
-    top: 1rem;
+    top: 4rem;
    right: 1rem;
-    padding: 0.1rem 1rem;
+    padding: 0.1rem;
+    width: 6rem;
    border: none;
    border-radius: 0.2rem;
    background-color:lightsteelblue;
    font-size: 1.4rem;
-    color: white;
+    color: #EEEEEE;
    cursor: pointer;
    z-index:2;
+    word-wrap: none;
+}
+
+#specialthanks {
+    background-color: #5865F2;
+    top: 1rem;
+}
+
+#sponsor {
+  top: auto;
+  bottom: 0;
+  right: 50%;
+  transform: translate(50%, -50%);
+}
+
+#spthx {
+    position: fixed;
+    display: grid;
+    top: 4rem;
+    bottom: 5rem;
+    left: 50%;
+    width: 30rem;
+    max-width: calc(100% - 2rem);
+    transform: translateX(-50%);
+}
+
+#spthx ul {
+    list-style-type: none;
+    padding: 0;
+}
+
+#spthx ul li {
+  margin: 0;
+}
+
+#spthx ul.g1 {
+  display: grid;
+  max-block-size: 9rem;
+  max-height: 9rem;
+  overflow: scroll;
+}
+
+#spthx ul.g1 li {
+  display: inline-grid;
+  background-color: orange;
+  margin-bottom: 0.5rem;
+  padding: 0.2rem 0;
+  grid-template-columns: 7rem auto;
+}
+
+#spthx ul.g1 li .name {
+  padding: 0 0.5rem;
+  font-weight: 700;
+}
+
+#spthx ul.g1 li .comment {
+  padding: 0 0.5rem;
+}
+
+#spthx ul.g2 {
+  display: grid;
+  grid-template-columns: 50% 50%;
+  overflow: scroll;
+}
+
+#spthx ul.g2 li {
+  text-align: center;
 }

 #themeToggleBtn {
--- a/view/test.html
+++ b/view/test.html
@ -8,7 +8,8 @@
    <meta name="keywords" content="人生重开模拟器 liferestart life restart remake 人生重来"/>
    <link id="themeLink" rel="stylesheet" href="light.css">
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9857163863537600" crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.js" integrity="sha512-wUa0ktp10dgVVhWdRVfcUO4vHS0ryT42WOEcXjVVF2+2rcYBKTY7Yx7JCEzjWgPV+rj2EDUr8TwsoWF6IoIOPg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script type="module" src="../src/index.js"></script>
    <title>Life Restart</title>
 </head>
--- a/yarn.lock
+++ b/yarn.lock
@ -1633,11 +1633,6 @@ dns-txt@^2.0.2:
  dependencies:
    buffer-indexof "^1.0.0"

-dom-to-image@^2.6.0:
-  version "2.6.0"
-  resolved "https://registry.yarnpkg.com/dom-to-image/-/dom-to-image-2.6.0.tgz#8a503608088c87b1c22f9034ae032e1898955867"
-  integrity sha1-ilA2CAiMh7HCL5A0rgMuGJiVWGc=
-
 ee-first@1.1.1:
  version "1.1.1"
  resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"