fix: dom-to-image add: specialthanks

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": "加藤骑士"
+    }
+}

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"

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(''));
                 }
-            }
+            },
         }
     }
 

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 {

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>

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 {

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>

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"