docs: update README and fix typo

style:优化页面布局

.github/workflows/node.js.yml

@@ -0,0 +1,31 @@
+# This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: Node.js CI
+
+on:
+  push:
+    branches: [ master ]
+  pull_request:
+    branches: [ master ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [14.x, 16.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v2
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'npm'
+    - run: npm install
+    - run: npm run build --if-present
+    - run: npm test

README-zh_CN.md

@@ -1,4 +1,4 @@
-# lifeRestart
+# Life Restart
 
 <a href="https://discord.gg/U3qrf49NMQ"><img src="https://img.shields.io/discord/883382868427014255?color=%23FEE75C&label=Discord&logo=discord&logoColor=white&style=for-the-badge" /></a>
 
@@ -10,7 +10,9 @@
 
 ## 使用
 
-### 网页版
+<details>
+<summary><strong>网页版</strong></summary>
+<br />
 
 1. 下载项目代码。
 
@@ -45,10 +47,16 @@ npm run dev
 
 4. 启动完成后会自动打开浏览器访问 [http://localhost:8081/view/index.html](http://localhost:8081/view/index.html)。
 
-### 控制台版本
+</details>
+
+<details>
+<summary><strong>控制台版本</strong></summary>
+<br />
 
 ```bash
 node repl
 ```
 
+</details>
+
 > 更多信息请参考 [官网文档](https://liferestart.syaro.io/)。

README.md

@@ -1,4 +1,4 @@
-# lifeRestart
+# Life Restart
 
 <a href="https://discord.gg/U3qrf49NMQ"><img src="https://img.shields.io/discord/883382868427014255?color=%23FEE75C&label=Discord&logo=discord&logoColor=white&style=for-the-badge" /></a>
 
@@ -10,7 +10,9 @@ English | [简体中文](./README-zh_CN.md)
 
 ## Usage
 
-### Web Version
+<details>
+<summary><strong>Web Version</strong></summary>
+<br />
 
 1. Clone project code.
 
@@ -44,11 +46,16 @@ npm run dev
 ```
 
 4. After the startup is complete, will automatically open a browser and visit [http://localhost:8081/view/index.html](http://localhost:8081/view/index.html).
+</details>
 
-### Command Line Version
+<details>
+<summary><strong>Command Line Version</strong></summary>
+<br />
 
 ```bash
 node repl
 ```
 
-> More instructions at [documentation](https://liferestart.syaro.io/)。
+</details>
+
+> More instructions at [documentation](https://liferestart.syaro.io/).

data/events.csv

@@ -86,7 +86,7 @@ $id,event,postEvent,effect:CHR,effect:INT,effect:STR,effect:MNY,effect:SPR,effec
 10061,一个人在家，非常寂寞。,,,,,,-1,,,EVT?[10024],EVT?[10025],,SPR<2:10062
 10062,你的情绪越来越低落，尝试自杀。,没有成功。,,,,,,,1,,,,SPR<1:10000
 10063,你的爷爷奶奶只想要男孩，把你活埋了。,,,,,,,,,(CHR<3)&(MNY<3)&(EVT?[10009]),"(EVT?[10063,10001])|(TLT?[1015])",,MNY<3:10000
-10064,你被卖给了人贩子。人贩子运送路上你很虚弱。,,,,,,,,,(STR<3)&((MNY<3)&(EVT?[10009]),"(EVT?[10064,10001,10019])|(TLT?[1015])",,STR<3:10000
+10064,你被卖给了人贩子。人贩子运送路上你很虚弱。,,,,,,,,,(STR<3)&(MNY<3)&(EVT?[10009]),"(EVT?[10064,10001,10019])|(TLT?[1015])",,STR<3:10000
 10065,空气很新鲜，生活很健康。,,,,1,,,,,EVT?[10009],"EVT?[10065,10025]",,
 10066,你的生活很自由，没有什么束缚。,,,,,,1,,,EVT?[10009],EVT?[10066],,
 10067,有一只鸟撞在了你家窗户上。,你把它养好后放了。,,,,,,,,EVT?[10009],EVT?[10067],,INT<6:10068

data/talents.json

@@ -42,7 +42,7 @@
     },
     "1006": {
         "id": "1006",
-        "name": "乐天派",
+        "name": "乐观",
         "description": "快乐+1",
         "grade": 0,
         "effect": {
@@ -502,31 +502,31 @@
     "1059": {
         "id": "1059",
         "name": "理财达人",
-        "description": "30、40、50岁时家境+1",
-        "condition": "AGE?[30,40,50]",
+        "description": "40岁时家境+3",
+        "condition": "AGE?[40]",
         "grade": 0,
         "effect": {
-            "MNY": 1
+            "MNY": 3
         }
     },
     "1060": {
         "id": "1060",
         "name": "成熟",
-        "description": "12、18岁时智力+1",
-        "condition": "AGE?[12,18]",
+        "description": "18岁时智力+2",
+        "condition": "AGE?[18]",
         "grade": 1,
         "effect": {
-            "INT": 1
+            "INT": 2
         }
     },
     "1061": {
         "id": "1061",
         "name": "形象管理",
-        "description": "16、24岁时颜值+1",
-        "condition": "AGE?[16,24]",
+        "description": "24岁时颜值+2",
+        "condition": "AGE?[24]",
         "grade": 1,
         "effect": {
-            "CHR": 1
+            "CHR": 2
         }
     },
     "1062": {
@@ -818,7 +818,7 @@
     "1091": {
         "id": "1091",
         "name": "活死人",
-        "description": "体质<-1时其他属性+2",
+        "description": "体质<0时其他属性+2",
         "condition": "STR<0",
         "grade": 1,
         "effect": {
@@ -1138,7 +1138,7 @@
         "id": "1129",
         "name": "不连续存在",
         "description": "你还拥有其他人格",
-        "grade": 2
+        "grade": 1
     },
     "1130": {
         "id": "1130",
@@ -1156,18 +1156,18 @@
         "id": 1132,
         "name": "返老还童",
         "description": "可能会回到年轻的时候",
-        "grade": 2
+        "grade": 1
     },
     "1133": {
         "id": 1133,
         "name": "时光倒流",
         "description": "或许时间会倒流",
-        "grade": 1
+        "grade": 0
     },
     "1134": {
         "id": 1134,
         "name": "转世重修",
         "description": "渡劫失败重生",
-        "grade": 3
+        "grade": 2
     }
 }

package.json

@@ -1,7 +1,7 @@
 {
-    "name": "xlsx_transform",
+    "name": "life_restart",
     "type": "module",
-    "bin": "test/index.js",
+    "bin": "repl/index.js",
     "scripts": {
         "test": "node test",
         "xlsxTransform": "node utils/xlsxTransform.js data",

repl/app.js

@@ -1,9 +1,26 @@
-import { max, sum } from '../src/functions/util.js';
 import { summary } from '../src/functions/summary.js'
 import { readFile } from 'fs/promises';
 import Life from '../src/life.js';
 
-global.json = async fileName => JSON.parse(await readFile(`data/${fileName}.json`));
+globalThis.json = async fileName => JSON.parse(await readFile(`data/${fileName}.json`));
+
+globalThis.$$eventMap = new Map();
+globalThis.$$event = (tag, data) => {
+    const listener = $$eventMap.get(tag);
+    if(listener) listener.forEach(fn=>fn(data));
+}
+globalThis.$$on = (tag, fn) => {
+    let listener = $$eventMap.get(tag);
+    if(!listener) {
+        listener = new Set();
+        $$eventMap.set(tag, listener);
+    }
+    listener.add(fn);
+}
+globalThis.$$off = (tag, fn) => {
+    const listener = $$eventMap.get(tag);
+    if(listener) listener.delete(fn);
+}
 
 class App {
     constructor() {
@@ -47,7 +64,7 @@ class App {
 
     async initial() {
         this.output('Now Loading...');
-        this.#talentExtend = global.localStorage.talentExtend;
+        this.#talentExtend = localStorage.talentExtend;
         await this.#life.initial();
         this.output(`\rLoading Complete.
 人生重开模拟器
@@ -55,6 +72,11 @@ class App {
 \n🎉键入 \x1B[4m/remake\x1B[24m 开始游戏`,
             true
         );
+        $$on('achievement', ({name})=>this.output(`
+-------------------------
+    解锁成就【${name}】
+-------------------------
+`))
     }
 
     io(input, output, exit) {
@@ -289,7 +311,7 @@ class App {
     remake() {
         if(this.#talentExtend) {
             this.#life.talentExtend(this.#talentExtend)
-            global.dumpLocalStorage();
+            dumpLocalStorage();
             this.#talentExtend = null;
         }
 
@@ -549,34 +571,22 @@ class App {
     }
 
     summary() {
-
-        const records = this.#life.getRecord();
-        const s = (type, func)=>{
-            const value = func(records.map(({[type]:v})=>v));
+        const summaryData = this.#life.getSummary();
+        const format = (name, type) => {
+            const value = summaryData[type];
             const { judge, grade } = summary(type, value);
-            return { judge, grade, value };
-        };
-
-        const style = (name, grade, judge, value) => this.style(`grade${grade}b`, `${name}：${value} ${judge}`);
-        const judge = (name, type, func) => {
-            const { judge, grade, value } = s(type, func);
-            return style(name, grade, judge, value );
+            return this.style(`grade${grade}b`, `${name}：${value} ${judge}`);
         }
 
         return [
             '🎉 总评',
-            judge('颜值', 'CHR', max),
-            judge('智力', 'INT', max),
-            judge('体质', 'STR', max),
-            judge('家境', 'MNY', max),
-            judge('快乐', 'SPR', max),
-            judge('享年', 'AGE', max),
-            (()=>{
-                const m = type=>max(records.map(({[type]: value})=>value));
-                const value = Math.floor(sum(m('CHR'), m('INT'), m('STR'), m('MNY'), m('SPR'))*2 + m('AGE')/2);
-                const { judge, grade } = summary('SUM', value);
-                return style('总评', grade, judge, value );
-            })(),
+            format('颜值', 'CHR'),
+            format('智力', 'INT'),
+            format('体质', 'STR'),
+            format('家境', 'MNY'),
+            format('快乐', 'SPR'),
+            format('享年', 'AGE'),
+            format('总评', 'SUM'),
         ].join('\n');
     }
 }

repl/index.js

@@ -4,12 +4,14 @@ import { readFile, writeFile } from 'fs/promises';
 async function main() {
 
     try {
-        global.localStorage = JSON.parse(await readFile('__localStorage.json'));
+        globalThis.localStorage = JSON.parse(await readFile('__localStorage.json'));
     } catch (e) {
-        global.localStorage = {};
+        globalThis.localStorage = {};
     }
+    localStorage.getItem = key => localStorage[key]===void 0? null: localStorage[key];
+    localStorage.setItem = (key, value) => (localStorage[key] = value);
 
-    global.dumpLocalStorage = async ()=>await writeFile('__localStorage.json', JSON.stringify( global.localStorage))
+    globalThis.dumpLocalStorage = async ()=>await writeFile('__localStorage.json', JSON.stringify( global.localStorage))
 
     const app = new App();
     app.io(

src/achievement.js

@@ -0,0 +1,67 @@
+import { clone } from './functions/util.js';
+import { checkCondition } from './functions/condition.js';
+
+class Achievement {
+    constructor() {}
+
+    // 时机
+    Opportunity = {
+        START: "START",             // 分配完成点数，点击开始新人生后
+        TRAJECTORY: "TRAJECTORY",   // 每一年的人生经历中
+        SUMMARY: "SUMMARY",         // 人生结束，点击人生总结后
+        END: "END",                 // 游戏完成，点击重开 重开次数在这之后才会+1
+    };
+
+    #achievements;
+
+    initial({achievements}) {
+        this.#achievements = achievements;
+    }
+
+    count() {
+        return Object.keys(this.#achievements).length;
+    }
+
+    list(property) {
+        return Object
+            .values(this.#achievements)
+            .map(({
+                id, name, opportunity,
+                description, hide, grade,
+            })=>({
+                id, name, opportunity,
+                description, hide, grade,
+                isAchieved: this.isAchieved(id, property),
+            }));
+    }
+
+    get(achievementId) {
+        const achievement = this.#achievements[achievementId];
+        if(!achievement) throw new Error(`[ERROR] No Achievement[${achievementId}]`);
+        return clone(achievement);
+    }
+
+    check(achievementId, property) {
+        const { condition } = this.get(achievementId);
+        return checkCondition(property, condition);
+    }
+
+    isAchieved(achievementId, property) {
+        for(const [achieved] of (property.get(property.TYPES.ACHV)||[]))
+            if(achieved == achievementId) return true;
+        return false;
+    }
+
+    achieve(opportunity, property) {
+        this.list(property)
+            .filter(({isAchieved})=>!isAchieved)
+            .filter(({opportunity: o})=>o==opportunity)
+            .filter(({id})=>this.check(id, property))
+            .forEach(({id})=>{
+                property.achieve(property.TYPES.ACHV, id)
+                $$event('achievement', this.get(id))
+            });
+    }
+}
+
+export default Achievement;

src/app.js

@@ -1,6 +1,6 @@
-import { max, sum } from './functions/util.js';
-import { summary } from './functions/summary.js'
-import Life from './life.js'
+import { summary } from './functions/summary.js';
+import { getRate, getGrade } from './functions/addition.js';
+import Life from './life.js';
 
 class App{
     constructor(){
@@ -9,20 +9,34 @@ class App{
 
     #life;
     #pages;
+    #currentPage;
     #talentSelected = new Set();
     #totalMax=20;
     #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;
         this.switch('index');
-        window.onerror = (event, source, lineno, colno, error) => {
+        globalThis.onerror = (event, source, lineno, colno, error) => {
             this.hint(`[ERROR] at (${source}:${lineno}:${colno})\n\n${error?.stack||error||'unknow Error'}`, 'error');
         }
+        const keyDownCallback = (keyboardEvent) => {
+            if (keyboardEvent.which === 13 || keyboardEvent.keyCode === 13) {
+                const pressEnterFunc = this.#pages[this.#currentPage]?.pressEnter;
+                pressEnterFunc && typeof pressEnterFunc === 'function' && pressEnterFunc();
+            }
+        }
+        globalThis.removeEventListener('keydown', keyDownCallback);
+        globalThis.addEventListener('keydown', keyDownCallback);
     }
 
     initPages() {
@@ -40,14 +54,15 @@ class App{
         // Index
         const indexPage = $(`
         <div id="main">
-            <div id="cnt" class="head">已重开1次</div>
-            <button id="rank">排行榜</button>
+            <button id="achievement">成就</button>
+            <button id="specialthanks">特别感谢</button>
             <button id="themeToggleBtn">黑</button>
             <div id="title">
                 人生重开模拟器<br>
                 <div style="font-size:1.5rem; font-weight:normal;">这垃圾人生一秒也不想呆了</div>
             </div>
             <button id="restart" class="mainbtn"><span class="iconfont">&#xe6a7;</span>立即重开</button>
+            <a id="discord" href="https://discord.gg/U3qrf49NMQ" style="z-index: 9999;" aria-label="Chat on Discord"><button class="discord-btn"><svg width="50%" height="55" viewBox="0 0 71 55" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0)"><path d="M60.1045 4.8978C55.5792 2.8214 50.7265 1.2916 45.6527 0.41542C45.5603 0.39851 45.468 0.440769 45.4204 0.525289C44.7963 1.6353 44.105 3.0834 43.6209 4.2216C38.1637 3.4046 32.7345 3.4046 27.3892 4.2216C26.905 3.0581 26.1886 1.6353 25.5617 0.525289C25.5141 0.443589 25.4218 0.40133 25.3294 0.41542C20.2584 1.2888 15.4057 2.8186 10.8776 4.8978C10.8384 4.9147 10.8048 4.9429 10.7825 4.9795C1.57795 18.7309 -0.943561 32.1443 0.293408 45.3914C0.299005 45.4562 0.335386 45.5182 0.385761 45.5576C6.45866 50.0174 12.3413 52.7249 18.1147 54.5195C18.2071 54.5477 18.305 54.5139 18.3638 54.4378C19.7295 52.5728 20.9469 50.6063 21.9907 48.5383C22.0523 48.4172 21.9935 48.2735 21.8676 48.2256C19.9366 47.4931 18.0979 46.6 16.3292 45.5858C16.1893 45.5041 16.1781 45.304 16.3068 45.2082C16.679 44.9293 17.0513 44.6391 17.4067 44.3461C17.471 44.2926 17.5606 44.2813 17.6362 44.3151C29.2558 49.6202 41.8354 49.6202 53.3179 44.3151C53.3935 44.2785 53.4831 44.2898 53.5502 44.3433C53.9057 44.6363 54.2779 44.9293 54.6529 45.2082C54.7816 45.304 54.7732 45.5041 54.6333 45.5858C52.8646 46.6197 51.0259 47.4931 49.0921 48.2228C48.9662 48.2707 48.9102 48.4172 48.9718 48.5383C50.038 50.6034 51.2554 52.5699 52.5959 54.435C52.6519 54.5139 52.7526 54.5477 52.845 54.5195C58.6464 52.7249 64.529 50.0174 70.6019 45.5576C70.6551 45.5182 70.6887 45.459 70.6943 45.3942C72.1747 30.0791 68.2147 16.7757 60.1968 4.9823C60.1772 4.9429 60.1437 4.9147 60.1045 4.8978ZM23.7259 37.3253C20.2276 37.3253 17.3451 34.1136 17.3451 30.1693C17.3451 26.225 20.1717 23.0133 23.7259 23.0133C27.308 23.0133 30.1626 26.2532 30.1066 30.1693C30.1066 34.1136 27.28 37.3253 23.7259 37.3253ZM47.3178 37.3253C43.8196 37.3253 40.9371 34.1136 40.9371 30.1693C40.9371 26.225 43.7636 23.0133 47.3178 23.0133C50.9 23.0133 53.7545 26.2532 53.6986 30.1693C53.6986 34.1136 50.9 37.3253 47.3178 37.3253Z" fill="#ffffff"/></g><defs><clipPath id="clip0"><rect width="71" height="55" fill="white"/></clipPath></defs></svg>CHAT</button><style>.discord-btn {position: fixed;bottom: 0.5rem;left: 0.5rem;background-color: #5865F2;padding: 0.7rem;height: auto;color: white;text-align: right;vertical-align: middle;border: none;width: 6.5rem;font-size: 1rem;border-radius: 4px;}.discord-btn svg {height: 1.5rem;position: absolute;top: 50%;left: 0;transform: translateY(-50%);}.discord-btn:hover svg{animation:discord-wave 560ms ease-in-out;}@keyframes discord-wave{0%,100%{transform:translateY(-50%) rotate(0)}20%,60%{transform:translateY(-50%) rotate(-25deg)}40%,80%{transform:translateY(-50%) rotate(10deg)}}@media (max-width:500px){.discord-btn:hover svg{animation:none}.discord-btn svg{animation:discord-wave 560ms ease-in-out}}</style></a>
         </div>
         `);
 
@@ -59,28 +74,70 @@ class App{
             .click(()=>this.switch('talent'));
 
         indexPage
-            .find('#rank')
-            .click(()=>this.hint('别卷了！没有排行榜'));
+            .find('#achievement')
+            .click(()=>this.switch('achievement'));
+
+        if(localStorage.getItem('theme') == 'light') {
+            indexPage.find('#themeToggleBtn').text('黑')
+        } else{
+            indexPage.find('#themeToggleBtn').text('白')
+        }
 
         indexPage
             .find("#themeToggleBtn")
             .click(() => {
                 if(localStorage.getItem('theme') == 'light') {
                     localStorage.setItem('theme', 'dark');
+                    indexPage.find('#themeToggleBtn').text('白')
                 } else {
                     localStorage.setItem('theme', 'light');
+                    indexPage.find('#themeToggleBtn').text('黑')
                 }
 
                 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 class="sponsor" onclick="globalThis.open('https://afdian.net/@LifeRestart')" style="background: linear-gradient(90deg,#946ce6,#7e5fd9); left:auto; right:50%; transform: translate(-2rem,-50%);">打赏策划(爱发电)</button>
+            <button class="sponsor" onclick="globalThis.open('https://dun.mianbaoduo.com/@vickscarlet')" style="background-color:#c69; left:50%; right:auto; transform: translate(2rem,-50%);">打赏程序(顿顿饭)</button>
+        </div>
+        `);
+
+        specialThanksPage
+            .find('#specialthanks')
+            .click(()=>this.switch('index'));
+
+        const achievementPage = $(`
+        <div id="main">
+            <button id="specialthanks">返回</button>
+            <span class="title">统计</span>
+            <ul id="total"></ul>
+            <span style="padding:0.25rem; margin: 0.5rem 0; border: none; background: #ccc;"></span>
+            <span class="title">成就</span>
+            <ul id="achievements"></ul>
+        `)
+
+        achievementPage
+            .find('#specialthanks')
+            .click(()=>this.switch('index'));
+
         // Talent
         const talentPage = $(`
         <div id="main">
             <div class="head" style="font-size: 1.6rem">天赋抽卡</div>
-            <button id="random" class="mainbtn" style="top: 50%;">10连抽！</button>
+            <button id="random" class="mainbtn" style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);"">10连抽！</button>
             <ul id="talents" class="selectlist"></ul>
-            <button id="next" class="mainbtn" style="top:auto; bottom:0.1em">请选择3个</button>
+            <button id="next" class="mainbtn">请选择3个</button>
         </div>
         `);
 
@@ -131,6 +188,7 @@ class App{
                             }
                         });
                     });
+                talentPage.find('#next').show()
             });
 
         talentPage
@@ -140,6 +198,7 @@ class App{
                     this.hint('请选择3个天赋');
                     return;
                 }
+                talentPage.find('#next').hide()
                 this.#totalMax = 20 + this.#life.getTalentAllocationAddition(Array.from(this.#talentSelected).map(({id})=>id));
                 this.switch('property');
             })
@@ -149,13 +208,15 @@ class App{
         const propertyPage = $(/*html*/`
         <div id="main">
             <div class="head" style="font-size: 1.6rem">
-                调整初始属性<br>
+                <div>调整初始属性</div>
                 <div id="total" style="font-size:1rem; font-weight:normal;">可用属性点：0</div>
             </div>
             <ul id="propertyAllocation" class="propinitial"></ul>
-            <ul class="selectlist" id="talentSelectedView" style="top:calc(100% - 17rem); bottom:7rem"></ul>
-            <button id="random" class="mainbtn" style="top:auto; bottom:0.1rem; left:auto; right:50%; transform: translate(-2rem,-50%);">随机分配</button>
-            <button id="start" class="mainbtn" style="top:auto; bottom:0.1rem; left:50%; right:auto; transform: translate(2rem,-50%);">开始新人生</button>
+            <ul class="selectlist" id="talentSelectedView"></ul>
+            <div class="btn-area">
+                <button id="random" class="mainbtn">随机分配</button>
+                <button id="start" class="mainbtn">开始新人生</button>
+            </div>
         </div>
         `);
         propertyPage.mounted = ()=>{
@@ -273,11 +334,11 @@ class App{
                 });
                 this.switch('trajectory');
                 this.#pages.trajectory.born();
-                $(document).keydown(function(event){
-                    if(event.which == 32 || event.which == 13){
-                        $('#lifeTrajectory').click();
-                    }
-                })
+                // $(document).keydown(function(event){
+                //     if(event.which == 32 || event.which == 13){
+                //         $('#lifeTrajectory').click();
+                //     }
+                // })
             });
 
         // Trajectory
@@ -285,7 +346,13 @@ class App{
         <div id="main">
             <ul id="lifeProperty" class="lifeProperty"></ul>
             <ul id="lifeTrajectory" class="lifeTrajectory"></ul>
-            <button id="summary" class="mainbtn" style="top:auto; bottom:0.1rem">人生总结</button>
+            <div class="btn-area">
+                <button id="summary" class="mainbtn">人生总结</button>
+                <button id="domToImage" class="mainbtn">人生回放</button>
+            </div>
+            <div class="domToImage2wx">
+                <img src="" id="endImage" />
+            </div>
         </div>
         `);
 
@@ -295,8 +362,7 @@ class App{
                 if(this.#isEnd) return;
                 const trajectory = this.#life.next();
                 const { age, content, isEnd } = trajectory;
-
-                const li = $(`<li><span>${age}岁：</span>${
+                const li = $(`<li><span>${age}岁：</span><span>${
                     content.map(
                         ({type, description, grade, name, postEvent}) => {
                             switch(type) {
@@ -307,49 +373,72 @@ class App{
                             }
                         }
                     ).join('<br>')
-                }</li>`);
+                }</span></li>`);
                 li.appendTo('#lifeTrajectory');
                 $("#lifeTrajectory").scrollTop($("#lifeTrajectory")[0].scrollHeight);
                 if(isEnd) {
                     $(document).unbind("keydown");
                     this.#isEnd = true;
                     trajectoryPage.find('#summary').show();
+                    // trajectoryPage.find('#domToImage').show();
                 } else {
                     // 如未死亡，更新数值
                     // Update properties if not die yet
                     const property = this.#life.getLastRecord();
                     $("#lifeProperty").html(`
-                    <li>颜值：${property.CHR} </li>
-                    <li>智力：${property.INT} </li>
-                    <li>体质：${property.STR} </li>
-                    <li>家境：${property.MNY} </li>
-                    <li>快乐：${property.SPR} </li>`);
+                    <li><span>颜值</span><span>${property.CHR}</span></li>
+                    <li><span>智力</span><span>${property.INT}</span></li>
+                    <li><span>体质</span><span>${property.STR}</span></li>
+                    <li><span>家境</span><span>${property.MNY}</span></li>
+                    <li><span>快乐</span><span>${property.SPR}</span></li>
+                    `);
                 }
             });
+        // html2canvas
+        trajectoryPage
+            .find('#domToImage')
+            .click(()=>{
+                $("#lifeTrajectory").addClass("deleteFixed");
+                const ua = navigator.userAgent.toLowerCase();
+                domtoimage.toJpeg(document.getElementById('lifeTrajectory'))
+                    .then(function (dataUrl) {
+                        let link = document.createElement('a');
+                        link.download = '我的人生回放.jpeg';
+                        link.href = dataUrl;
+                        link.click();
+                        $("#lifeTrajectory").removeClass("deleteFixed");
+                        // 微信内置浏览器，显示图片，需要用户单独保存
+                        if(ua.match(/MicroMessenger/i)=="micromessenger") {
+                            $('#endImage').attr('src', dataUrl);
+                        }
+
+                    });
+            })
+            .hide();
 
         trajectoryPage
             .find('#summary')
             .click(()=>{
                 this.switch('summary');
-            })
+            });
 
         // Summary
         const summaryPage = $(`
         <div id="main">
             <div class="head">人生总结</div>
-            <ul id="judge" class="judge" style="bottom: calc(35% + 2.5rem)">
-                <li class="grade2"><span>颜值：</span>9级 美若天仙</li>
-                <li><span>智力：</span>4级 智力一般</li>
-                <li><span>体质：</span>1级 极度虚弱</li>
-                <li><span>家境：</span>6级 小康之家</li>
-                <li><span>享年：</span>3岁 早夭</li>
-                <li><span>快乐：</span>3级 不太幸福的人生</li>
+            <ul id="judge" class="judge">
+                <li class="grade2"><span>颜值：</span><span>9级 美若天仙</span></li>
+                <li class="grade0"><span>智力：</span><span>4级 智力一般</span></li>
+                <li class="grade0"><span>体质：</span><span>1级 极度虚弱</span></li>
+                <li class="grade0"><span>家境：</span><span>6级 小康之家</span></li>
+                <li class="grade0"><span>享年：</span><span>3岁 早夭</span></li>
+                <li class="grade0"><span>快乐：</span><span></span>3级 不太幸福的人生</li>
             </ul>
-            <div class="head" style="top:auto; bottom:35%">天赋，你可以选一个，下辈子还能抽到</div>
-            <ul id="talents" class="selectlist" style="top:calc(65% + 0.5rem); bottom:8rem">
+            <div class="head" style="height:auto;">天赋，你可以选一个，下辈子还能抽到</div>
+            <ul id="talents" class="selectlist" style="flex: 0 1 auto;">
                 <li class="grade2b">黑幕（面试一定成功）</li>
             </ul>
-            <button id="again" class="mainbtn" style="top:auto; bottom:0.1em"><span class="iconfont">&#xe6a7;</span>再次重开</button>
+            <button id="again" class="mainbtn"><span class="iconfont">&#xe6a7;</span>再次重开</button>
         </div>
         `);
 
@@ -368,34 +457,126 @@ class App{
         this.#pages = {
             loading: {
                 page: loadingPage,
-                clear: ()=>{},
+                clear: ()=>{
+                    this.#currentPage = 'loading';
+                },
             },
             index: {
                 page: indexPage,
-                btnRank: indexPage.find('#rank'),
+                btnAchievement: indexPage.find('#achievement'),
                 btnRestart: indexPage.find('#restart'),
                 hint: indexPage.find('.hint'),
-                cnt: indexPage.find('#cnt'),
+                pressEnter: ()=>{
+                    this.#pages.index.btnRestart.click();
+                },
                 clear: ()=>{
+                    this.#currentPage = 'index';
                     indexPage.find('.hint').hide();
 
                     const times = this.times;
-                    const btnRank = indexPage.find('#rank');
-                    const cnt = indexPage.find('#cnt');
+                    const achievement = indexPage.find('#achievement');
+                    const discord = indexPage.find('#discord');
+                    const specialthanks = indexPage.find('#specialthanks');
+
                     if(times > 0) {
-                        btnRank.show();
-                        cnt.show();
-                        cnt.text(`已重开${times}次`);
+                        achievement.show();
+                        discord.show();
+                        specialthanks.show();
                         return;
                     }
 
-                    btnRank.hide();
-                    cnt.hide();
+                    achievement.hide();
+                    discord.hide();
+                    specialthanks.hide();
                 },
             },
+            specialthanks: {
+                page: specialThanksPage,
+                clear: () => {
+                    const groups = [
+                        specialThanksPage.find('#spthx > ul.g1'),
+                        specialThanksPage.find('#spthx > ul.g2'),
+                    ];
+                    groups.forEach(g=>g.empty());
+                    this.#specialthanks
+                        .sort(()=>0.5-Math.random())
+                        .forEach(({group, name, comment, color})=>groups[--group].append(`
+                            <li>
+                                <span class="name" ${color?('style="color:'+color+'"'):''}>${name}</span>
+                                <span class="comment">${comment||''}</span>
+                            </li>
+                        `))
+                }
+            },
+            achievement: {
+                page: achievementPage,
+                clear: () => {
+                    const total = achievementPage.find("ul#total");
+                    const achievements = achievementPage.find("ul#achievements");
+                    total.empty();
+                    achievements.empty();
+
+                    const formatRate = (type, value) => {
+                        const rate = getRate(type, value);
+                        let color = Object.keys(rate)[0];
+                        switch(parseInt(color)) {
+                            case 0: color = '白色'; break;
+                            case 1: color = '蓝色'; break;
+                            case 2: color = '紫色'; break;
+                            case 3: color = '橙色'; break;
+                            default: break;
+                        }
+                        let r = Object.values(rate)[0];
+                        switch(parseInt(r)) {
+                            case 1: r = '不变'; break;
+                            case 2: r = '翻倍'; break;
+                            case 3: r = '三倍'; break;
+                            case 4: r = '四倍'; break;
+                            case 5: r = '五倍'; break;
+                            case 6: r = '六倍'; break;
+                            default: break;
+                        }
+                        return `抽到${color}概率${r}`;
+                    }
+
+                    const { times, achievement, talentRate, eventRate } = this.#life.getTotal();
+                    total.append(`
+                        <li class="achvg${getGrade('times', times)}"><span class="achievementtitle">已重开${times}次</span>${formatRate('times', times)}</li>
+                        <li class="achvg${getGrade('achievement', achievement)}"><span class="achievementtitle">成就达成${achievement}个</span>${formatRate('achievement', achievement)}</li>
+                        <li class="achvg${getGrade('eventRate', eventRate)}"><span class="achievementtitle">事件选择率</span>${Math.floor(eventRate * 100)}%</li>
+                        <li class="achvg${getGrade('talentRate', talentRate)}"><span class="achievementtitle">天赋收集率</span>${Math.floor(talentRate * 100)}%</li>
+                    `);
+
+                    const achievementsData = this.#life.getAchievements();
+                    achievementsData.forEach(({
+                        name, description, hide,
+                        grade, isAchieved
+                    })=>{
+                        if(hide && !isAchieved) name = description = '???';
+                        achievements.append(
+                            `<li class="achvg${grade} ${isAchieved?'':'mask'}"><span class="achievementtitle">${name}</span>${description}</li>`
+                        );
+                    })
+
+                }
+            },
             talent: {
                 page: talentPage,
+                talentList: talentPage.find('#talents'),
+                btnRandom: talentPage.find('#random'),
+                btnNext: talentPage.find('#next'),
+                pressEnter: ()=>{
+                    const talentList = this.#pages.talent.talentList;
+                    const btnRandom = this.#pages.talent.btnRandom;
+                    const btnNext = this.#pages.talent.btnNext;
+                    if (talentList.children().length) {
+                        btnNext.click();
+                    } else {
+                        btnRandom.click();
+                    }
+                },
                 clear: ()=>{
+                    this.#currentPage = 'talent';
                     talentPage.find('ul.selectlist').empty();
                     talentPage.find('#random').show();
                     this.#totalMax = 20;
@@ -403,7 +584,12 @@ class App{
             },
             property: {
                 page: propertyPage,
+                btnStart: propertyPage.find('#start'),
+                pressEnter: ()=>{
+                    this.#pages.property.btnStart.click();
+                },
                 clear: ()=>{
+                    this.#currentPage = 'property';
                     freshTotal();
                     propertyPage
                         .find('#talentSelectedView')
@@ -412,7 +598,12 @@ class App{
             },
             trajectory: {
                 page: trajectoryPage,
+                lifeTrajectory: trajectoryPage.find('#lifeTrajectory'),
+                pressEnter: ()=>{
+                    this.#pages.trajectory.lifeTrajectory.click();
+                },
                 clear: ()=>{
+                    this.#currentPage = 'trajectory';
                     trajectoryPage.find('#lifeTrajectory').empty();
                     trajectoryPage.find('#summary').hide();
                     this.#isEnd = false;
@@ -424,6 +615,7 @@ class App{
             summary: {
                 page: summaryPage,
                 clear: ()=>{
+                    this.#currentPage = 'summary';
                     const judge = summaryPage.find('#judge');
                     const talents = summaryPage.find('#talents');
                     judge.empty();
@@ -445,50 +637,29 @@ class App{
                         });
                     });
 
-                    const records = this.#life.getRecord();
-                    const s = (type, func)=>{
-                        const value = func(records.map(({[type]:v})=>v));
+                    const summaryData = this.#life.getSummary();
+                    const format = (discription, type)=>{
+                        const value = summaryData[type];
                         const { judge, grade } = summary(type, value);
-                        return { judge, grade, value };
+                        return `<li class="grade${grade}"><span>${discription}：</span><span>${value} ${judge}</span></li>`;
                     };
-                    console.table(records);
-                    console.debug(records);
 
-                    judge.append([
-                        (()=>{
-                            const { judge, grade, value } = s('CHR', max);
-                            return `<li class="grade${grade}"><span>颜值：</span>${value} ${judge}</li>`
-                        })(),
-                        (()=>{
-                            const { judge, grade, value } = s('INT', max);
-                            return `<li class="grade${grade}"><span>智力：</span>${value} ${judge}</li>`
-                        })(),
-                        (()=>{
-                            const { judge, grade, value } = s('STR', max);
-                            return `<li class="grade${grade}"><span>体质：</span>${value} ${judge}</li>`
-                        })(),
-                        (()=>{
-                            const { judge, grade, value } = s('MNY', max);
-                            return `<li class="grade${grade}"><span>家境：</span>${value} ${judge}</li>`
-                        })(),
-                        (()=>{
-                            const { judge, grade, value } = s('SPR', max);
-                            return `<li class="grade${grade}"><span>快乐：</span>${value} ${judge}</li>`
-                        })(),
-                        (()=>{
-                            const { judge, grade, value } = s('AGE', max);
-                            return `<li class="grade${grade}"><span>享年：</span>${value} ${judge}</li>`
-                        })(),
-                        (()=>{
-                            const m = type=>max(records.map(({[type]: value})=>value));
-                            const value = Math.floor(sum(m('CHR'), m('INT'), m('STR'), m('MNY'), m('SPR'))*2 + m('AGE')/2);
-                            const { judge, grade } = summary('SUM', value);
-                            return `<li class="grade${grade}"><span>总评：</span>${value} ${judge}</li>`
-                        })(),
-                    ].join(''));
-                }
+                    judge.append(`
+                        ${format('颜值', 'CHR')}
+                        ${format('智力', 'INT')}
+                        ${format('体质', 'STR')}
+                        ${format('家境', 'MNY')}
+                        ${format('快乐', 'SPR')}
+                        ${format('享年', 'AGE')}
+                        ${format('总评', 'SUM')}
+                    `);
                 }
+            },
         }
+
+        $$on('achievement', ({name})=>{
+            this.hint(`解锁成就【${name}】`, 'success');
+        })
     }
 
     switch(page) {
@@ -528,8 +699,8 @@ class App{
         }
     }
 
-    get times() {return JSON.parse(localStorage.times||'0') || 0;}
-    set times(v) {localStorage.times = JSON.stringify(parseInt(v) || 0)};
+    get times() {return this.#life?.times || 0;}
+    set times(v) { if(this.#life) this.#life.times = v };
 
 }
 

src/event.js

@@ -19,6 +19,10 @@ class Event {
         }
     }
 
+    count() {
+        return Object.keys(this.#events).length;
+    }
+
     check(eventId, property) {
         const { include, exclude, NoRandom } = this.get(eventId);
         if(NoRandom) return false;

src/functions/addition.js

@@ -0,0 +1,41 @@
+export function getRate(type, value) {
+    switch(type) {
+        case 'times':
+            if(value >= 100) return {2:6};
+            if(value >= 70) return {2:5};
+            if(value >= 50) return {2:4};
+            if(value >= 30) return {2:3};
+            if(value >= 10) return {2:2};
+            return {2: 1};
+        case 'achievement':
+            if(value >= 100) return {3:6};
+            if(value >= 70) return {3:5};
+            if(value >= 50) return {3:4};
+            if(value >= 30) return {3:3};
+            if(value >= 10) return {3:2};
+            return {3:1};
+        default: return {};
+    }
+}
+
+export function getGrade(type, value) {
+    switch(type) {
+        case 'times':
+        case 'achievement':
+            if(value >= 100) return 3;
+            if(value >= 50) return 2;
+            if(value >= 10) return 1;
+            return 0;
+        case 'talentRate':
+            if(value >= 0.9) return 3;
+            if(value >= 0.6) return 2;
+            if(value >= 0.3) return 1;
+            return 0;
+        case 'eventRate':
+            if(value >= 0.6) return 3;
+            if(value >= 0.4) return 2;
+            if(value >= 0.2) return 1;
+            return 0;
+        default: return 0;
+    }
+}

src/functions/condition.js

@@ -113,4 +113,17 @@ function checkProp(property, condition) {
     }
 }
 
-export { checkCondition };
+function extractMaxTriggers(condition) {
+    // Assuming only age related talents can be triggered multiple times.
+    const RE_AGE_CONDITION = /AGE\?\[([0-9\,]+)\]/;
+    const match_object = RE_AGE_CONDITION.exec(condition);
+    if (match_object == null) {
+        // Not age related, single trigger.
+        return 1;
+    }
+    
+    const age_list = match_object[1].split(",");
+    return age_list.length;
+}
+
+export { checkCondition, extractMaxTriggers };

src/index.js

@@ -1,10 +1,27 @@
 import App from '../src/app.js';
 
+globalThis.$$eventMap = new Map();
+globalThis.$$event = (tag, data) => {
+    const listener = $$eventMap.get(tag);
+    if(listener) listener.forEach(fn=>fn(data));
+}
+globalThis.$$on = (tag, fn) => {
+    let listener = $$eventMap.get(tag);
+    if(!listener) {
+        listener = new Set();
+        $$eventMap.set(tag, listener);
+    }
+    listener.add(fn);
+}
+globalThis.$$off = (tag, fn) => {
+    const listener = $$eventMap.get(tag);
+    if(listener) listener.delete(fn);
+}
 
-window.json = async fileName => await (await fetch(`../data/${fileName}.json`)).json();
+globalThis.json = async fileName => await (await fetch(`../data/${fileName}.json`)).json();
 
 // Pssst, I've created a github package - https://github.com/brookesb91/dismissible
-window.hideBanners = (e) => {
+globalThis.hideBanners = (e) => {
     document
         .querySelectorAll(".banner.visible")
         .forEach((b) => b.classList.remove("visible"));

src/life.js

@@ -1,64 +1,80 @@
 import Property from './property.js';
 import Event from './event.js';
 import Talent from './talent.js';
+import Achievement from './achievement.js';
 
 class Life {
     constructor() {
         this.#property = new Property();
         this.#event = new Event();
         this.#talent = new Talent();
+        this.#achievement = new Achievement();
     }
 
     #property;
     #event;
     #talent;
+    #achievement;
     #triggerTalents;
 
     async initial() {
-        const [age, talents, events] = await Promise.all([
+        const [age, talents, events, achievements] = await Promise.all([
           json('age'),
           json('talents'),
           json('events'),
+          json('achievement'),
         ])
         this.#property.initial({age});
         this.#talent.initial({talents});
         this.#event.initial({events});
+        this.#achievement.initial({achievements});
     }
 
     restart(allocation) {
-        this.#triggerTalents = new Set();
+        this.#triggerTalents = {};
         this.#property.restart(allocation);
         this.doTalent();
-        this.#property.record();
+        this.#property.restartLastStep();
+        this.#achievement.achieve(
+            this.#achievement.Opportunity.START,
+            this.#property
+        )
     }
 
     getTalentAllocationAddition(talents) {
         return this.#talent.allocationAddition(talents);
     }
 
+    getTalentCurrentTriggerCount(talentId) {
+        return this.#triggerTalents[talentId] || 0;
+    }
+
     next() {
         const {age, event, talent} = this.#property.ageNext();
 
         const talentContent = this.doTalent(talent);
         const eventContent = this.doEvent(this.random(event));
-        this.#property.record();
 
         const isEnd = this.#property.isEnd();
 
         const content = [talentContent, eventContent].flat();
+        this.#achievement.achieve(
+            this.#achievement.Opportunity.TRAJECTORY,
+            this.#property
+        )
         return { age, content, isEnd };
     }
 
     doTalent(talents) {
         if(talents) this.#property.change(this.#property.TYPES.TLT, talents);
         talents = this.#property.get(this.#property.TYPES.TLT)
-            .filter(talentId=>!this.#triggerTalents.has(talentId));
+            .filter(talentId => this.getTalentCurrentTriggerCount(talentId) < this.#talent.get(talentId).max_triggers);
 
         const contents = [];
         for(const talentId of talents) {
             const result = this.#talent.do(talentId, this.#property);
             if(!result) continue;
-            this.#triggerTalents.add(talentId);
+            this.#triggerTalents[talentId] = this.getTalentCurrentTriggerCount(talentId) + 1;
             const { effect, name, description, grade } = result;
             contents.push({
                 type: this.#property.TYPES.TLT,
@@ -100,15 +116,33 @@ class Life {
     }
 
     talentRandom() {
-        return this.#talent.talentRandom(JSON.parse(localStorage.extendTalent||'null'));
+        const times = this.#property.get(this.#property.TYPES.TMS);
+        const achievement = this.#property.get(this.#property.TYPES.CACHV);
+        return this.#talent.talentRandom(this.getLastExtendTalent(), { times, achievement });
     }
 
     talentExtend(talentId) {
-        localStorage.extendTalent = JSON.stringify(talentId);
+        this.#property.set(this.#property.TYPES.EXT, talentId);
     }
 
-    getRecord() {
-        return this.#property.getRecord();
+    getLastExtendTalent() {
+        return this.#property.get(this.#property.TYPES.EXT);
+    }
+
+    getSummary() {
+        this.#achievement.achieve(
+            this.#achievement.Opportunity.SUMMARY,
+            this.#property
+        )
+        return {
+            AGE: this.#property.get(this.#property.TYPES.HAGE),
+            CHR: this.#property.get(this.#property.TYPES.HCHR),
+            INT: this.#property.get(this.#property.TYPES.HINT),
+            STR: this.#property.get(this.#property.TYPES.HSTR),
+            MNY: this.#property.get(this.#property.TYPES.HMNY),
+            SPR: this.#property.get(this.#property.TYPES.HSPR),
+            SUM: this.#property.get(this.#property.TYPES.SUM),
+        };
     }
 
     getLastRecord() {
@@ -118,6 +152,58 @@ class Life {
     exclusive(talents, exclusive) {
         return this.#talent.exclusive(talents, exclusive);
     }
+
+    getAchievements() {
+        const ticks = {};
+        this.#property
+            .get(this.#property.TYPES.ACHV)
+            .forEach(([id, tick]) => ticks[id] = tick);
+        return this
+            .#achievement
+            .list(this.#property)
+            .sort((
+                {id: a, grade: ag, hide: ah},
+                {id: b, grade: bg, hide: bh}
+            )=>{
+                a = ticks[a];
+                b = ticks[b];
+                if(a&&b) return b - a;
+                if(!a&&!b) {
+                    if(ah&&bh) return bg - ag;
+                    if(ah) return 1;
+                    if(bh) return -1;
+                    return bg - ag;
+                }
+                if(!a) return 1;
+                if(!b) return -1;
+            });
+    }
+
+    getTotal() {
+        const TMS = this.#property.get(this.#property.TYPES.TMS);
+        const CACHV = this.#property.get(this.#property.TYPES.CACHV);
+        const CTLT = this.#property.get(this.#property.TYPES.CTLT);
+        const CEVT = this.#property.get(this.#property.TYPES.CEVT);
+
+        const totalTalent = this.#talent.count();
+        const totalEvent = this.#event.count();
+
+        return {
+            times: TMS,
+            achievement: CACHV,
+            talentRate: CTLT / totalTalent,
+            eventRate: CEVT / totalEvent,
+        }
+    }
+
+    get times() { return this.#property?.get(this.#property.TYPES.TMS) || 0; }
+    set times(v) {
+        this.#property?.set(this.#property.TYPES.TMS, v) || 0;
+        this.#achievement.achieve(
+            this.#achievement.Opportunity.END,
+            this.#property
+        )
+    }
 }
 
 export default Life;

src/property.js

@@ -1,23 +1,53 @@
-import { clone } from './functions/util.js';
+import { max, min, sum, clone } from './functions/util.js';
 
 class Property {
     constructor() {}
 
     TYPES = {
-        AGE: "AGE",
-        CHR: "CHR",
-        INT: "INT",
-        STR: "STR",
-        MNY: "MNY",
-        SPR: "SPR",
-        LIF: "LIF",
-        TLT: "TLT",
-        EVT: "EVT",
+        // 本局
+        AGE: "AGE", // 年龄 age AGE
+        CHR: "CHR", // 颜值 charm CHR
+        INT: "INT", // 智力 intelligence INT
+        STR: "STR", // 体质 strength STR
+        MNY: "MNY", // 家境 money MNY
+        SPR: "SPR", // 快乐 spirit SPR
+        LIF: "LIF", // 生命 life LIFE
+        TLT: "TLT", // 天赋 talent TLT
+        EVT: "EVT", // 事件 event EVT
+        TMS: "TMS", // 次数 times TMS
+
+        // Auto calc
+        LAGE: "LAGE", // 最低年龄 Low Age
+        HAGE: "HAGE", // 最高年龄 High Age
+        LCHR: "LCHR", // 最低颜值 Low Charm
+        HCHR: "HCHR", // 最高颜值 High Charm
+        LINT: "LINT", // 最低智力 Low Intelligence
+        HINT: "HINT", // 最高智力 High Intelligence
+        LSTR: "LSTR", // 最低体质 Low Strength
+        HSTR: "HSTR", // 最高体质 High Strength
+        LMNY: "LMNY", // 最低家境 Low Money
+        HMNY: "HMNY", // 最高家境 High Money
+        LSPR: "LSPR", // 最低快乐 Low Spirit
+        HSPR: "HSPR", // 最高快乐 High Spirit
+
+        SUM: "SUM", // 总评 summary SUM
+
+        EXT: "EXT", // 继承天赋
+
+        // 总计
+        // Achievement Total
+        ATLT: "ATLT", // 拥有过的天赋 Achieve Talent
+        AEVT: "AEVT", // 触发过的事件 Achieve Event
+        ACHV: "ACHV", // 达成的成就 Achievement
+
+        CTLT: "RTLT", // 天赋选择数 Count Talent
+        CEVT: "REVT", // 事件收集数 Count Event
+        CACHV: "CACHV", // 成就达成数 Count Achievement
+
     };
 
     #ageData;
-    #data;
-    #record;
+    #data = {};
 
     initial({age}) {
 
@@ -45,18 +75,49 @@ class Property {
     restart(data) {
         this.#data = {
             [this.TYPES.AGE]: -1,
+
             [this.TYPES.CHR]: 0,
             [this.TYPES.INT]: 0,
             [this.TYPES.STR]: 0,
             [this.TYPES.MNY]: 0,
             [this.TYPES.SPR]: 0,
+
             [this.TYPES.LIF]: 1,
+
             [this.TYPES.TLT]: [],
             [this.TYPES.EVT]: [],
+
+            [this.TYPES.LAGE]: Infinity,
+            [this.TYPES.LCHR]: Infinity,
+            [this.TYPES.LINT]: Infinity,
+            [this.TYPES.LSTR]: Infinity,
+            [this.TYPES.LSPR]: Infinity,
+            [this.TYPES.LMNY]: Infinity,
+
+            [this.TYPES.HAGE]: -Infinity,
+            [this.TYPES.HCHR]: -Infinity,
+            [this.TYPES.HINT]: -Infinity,
+            [this.TYPES.HSTR]: -Infinity,
+            [this.TYPES.HMNY]: -Infinity,
+            [this.TYPES.HSPR]: -Infinity,
         };
         for(const key in data)
             this.change(key, data[key]);
-        this.#record = [];
+    }
+
+    restartLastStep() {
+        this.#data[this.TYPES.LAGE] = this.get(this.TYPES.AGE);
+        this.#data[this.TYPES.LCHR] = this.get(this.TYPES.CHR);
+        this.#data[this.TYPES.LINT] = this.get(this.TYPES.INT);
+        this.#data[this.TYPES.LSTR] = this.get(this.TYPES.STR);
+        this.#data[this.TYPES.LSPR] = this.get(this.TYPES.SPR);
+        this.#data[this.TYPES.LMNY] = this.get(this.TYPES.MNY);
+        this.#data[this.TYPES.HAGE] = this.get(this.TYPES.AGE);
+        this.#data[this.TYPES.HCHR] = this.get(this.TYPES.CHR);
+        this.#data[this.TYPES.HINT] = this.get(this.TYPES.INT);
+        this.#data[this.TYPES.HSTR] = this.get(this.TYPES.STR);
+        this.#data[this.TYPES.HMNY] = this.get(this.TYPES.MNY);
+        this.#data[this.TYPES.HSPR] = this.get(this.TYPES.SPR);
     }
 
     get(prop) {
@@ -71,10 +132,73 @@ class Property {
             case this.TYPES.TLT:
             case this.TYPES.EVT:
                 return clone(this.#data[prop]);
+            case this.TYPES.LAGE:
+            case this.TYPES.LCHR:
+            case this.TYPES.LINT:
+            case this.TYPES.LSTR:
+            case this.TYPES.LMNY:
+            case this.TYPES.LSPR:
+                return min(
+                    this.#data[prop],
+                    this.get(this.fallback(prop))
+                );
+            case this.TYPES.HAGE:
+            case this.TYPES.HCHR:
+            case this.TYPES.HINT:
+            case this.TYPES.HSTR:
+            case this.TYPES.HMNY:
+            case this.TYPES.HSPR:
+                return max(
+                    this.#data[prop],
+                    this.get(this.fallback(prop))
+                );
+            case this.TYPES.SUM:
+                const HAGE = this.get(this.TYPES.HAGE);
+                const HCHR = this.get(this.TYPES.HCHR);
+                const HINT = this.get(this.TYPES.HINT);
+                const HSTR = this.get(this.TYPES.HSTR);
+                const HMNY = this.get(this.TYPES.HMNY);
+                const HSPR = this.get(this.TYPES.HSPR);
+                return Math.floor(sum(HCHR, HINT, HSTR, HMNY, HSPR)*2 + HAGE/2);
+            case this.TYPES.TMS:
+                return this.lsget('times') || 0;
+            case this.TYPES.EXT:
+                return this.lsget('extendTalent') || null;
+            case this.TYPES.ATLT:
+            case this.TYPES.AEVT:
+            case this.TYPES.ACHV:
+                return this.lsget(prop) || [];
+            case this.TYPES.CTLT:
+            case this.TYPES.CEVT:
+            case this.TYPES.CACHV:
+                return this.get(
+                    this.fallback(prop)
+                ).length;
             default: return 0;
         }
     }
 
+    fallback(prop) {
+        switch(prop) {
+            case this.TYPES.LAGE:
+            case this.TYPES.HAGE: return this.TYPES.AGE;
+            case this.TYPES.LCHR:
+            case this.TYPES.HCHR: return this.TYPES.CHR;
+            case this.TYPES.LINT:
+            case this.TYPES.HINT: return this.TYPES.INT;
+            case this.TYPES.LSTR:
+            case this.TYPES.HSTR: return this.TYPES.STR;
+            case this.TYPES.LMNY:
+            case this.TYPES.HMNY: return this.TYPES.MNY;
+            case this.TYPES.LSPR:
+            case this.TYPES.HSPR: return this.TYPES.SPR;
+            case this.TYPES.CTLT: return this.TYPES.ATLT;
+            case this.TYPES.CEVT: return this.TYPES.AEVT;
+            case this.TYPES.CACHV: return this.TYPES.ACHV;
+            default: return;
+        }
+    }
+
     set(prop, value) {
         switch(prop) {
             case this.TYPES.AGE:
@@ -86,14 +210,21 @@ class Property {
             case this.TYPES.LIF:
             case this.TYPES.TLT:
             case this.TYPES.EVT:
-                this.#data[prop] = clone(value);
-                break;
-            default: return 0;
+                this.hl(prop, this.#data[prop] = clone(value));
+                this.achieve(prop, value);
+                return;
+            case this.TYPES.TMS:
+                this.lsset('times', parseInt(value) || 0);
+                return;
+            case this.TYPES.EXT:
+                this.lsset('extendTalent', value);
+                return
+            default: return;
         }
     }
 
-    record() {
-        this.#record.push({
+    getLastRecord() {
+        return clone({
             [this.TYPES.AGE]: this.get(this.TYPES.AGE),
             [this.TYPES.CHR]: this.get(this.TYPES.CHR),
             [this.TYPES.INT]: this.get(this.TYPES.INT),
@@ -103,14 +234,6 @@ class Property {
         });
     }
 
-    getRecord() {
-        return clone(this.#record);
-    }
-
-    getLastRecord() {
-        return clone(this.#record[this.#record.length - 1]);
-    }
-
     change(prop, value) {
         if(Array.isArray(value)) {
             for(const v of value)
@@ -125,8 +248,8 @@ class Property {
             case this.TYPES.MNY:
             case this.TYPES.SPR:
             case this.TYPES.LIF:
-                this.#data[prop] += Number(value);
-                break;
+                this.hl(prop, this.#data[prop] += Number(value));
+                return;
             case this.TYPES.TLT:
             case this.TYPES.EVT:
                 const v = this.#data[prop];
@@ -135,7 +258,14 @@ class Property {
                     if(index!=-1) v.splice(index,1);
                 }
                 if(!v.includes(value)) v.push(value);
-                break;
+                this.achieve(prop, value);
+                return;
+            case this.TYPES.TMS:
+                this.set(
+                    prop,
+                    this.get(prop) + parseInt(value)
+                );
+                return;
             default: return;
         }
     }
@@ -160,6 +290,61 @@ class Property {
         return clone(this.#ageData[age]);
     }
 
+    hl(prop, value) {
+        let keys;
+        switch(prop) {
+            case this.TYPES.AGE: keys = [this.TYPES.LAGE, this.TYPES.HAGE]; break;
+            case this.TYPES.CHR: keys = [this.TYPES.LCHR, this.TYPES.HCHR]; break;
+            case this.TYPES.INT: keys = [this.TYPES.LINT, this.TYPES.HINT]; break;
+            case this.TYPES.STR: keys = [this.TYPES.LSTR, this.TYPES.HSTR]; break;
+            case this.TYPES.MNY: keys = [this.TYPES.LMNY, this.TYPES.HMNY]; break;
+            case this.TYPES.SPR: keys = [this.TYPES.LSPR, this.TYPES.HSPR]; break;
+            default: return;
+        }
+        const [l, h] = keys;
+        this.#data[l] = min(this.#data[l], value);
+        this.#data[h] = max(this.#data[h], value);
+    }
+
+    achieve(prop, newData) {
+        let key;
+        switch(prop) {
+            case this.TYPES.ACHV:
+                const lastData = this.lsget(prop);
+                this.lsset(
+                    prop,
+                    (lastData || []).concat([[newData, Date.now()]])
+                );
+                return;
+            case this.TYPES.TLT: key = this.TYPES.ATLT; break;
+            case this.TYPES.EVT: key = this.TYPES.AEVT; break;
+            default: return;
+        }
+        const lastData = this.lsget(key) || [];
+        this.lsset(
+            key,
+            Array.from(
+                new Set(
+                    lastData
+                        .concat(newData||[])
+                        .flat()
+                )
+            )
+        )
+    }
+
+    lsget(key) {
+        const data = localStorage.getItem(key);
+        if(data === null) return;
+        return JSON.parse(data);
+    }
+
+    lsset(key, value) {
+        localStorage.setItem(
+            key,
+            JSON.stringify(value)
+        );
+    }
 }
 
 export default Property;

src/talent.js

@@ -1,5 +1,6 @@
 import { clone } from './functions/util.js';
-import { checkCondition } from './functions/condition.js';
+import { checkCondition, extractMaxTriggers } from './functions/condition.js';
+import { getRate } from './functions/addition.js';
 
 class Talent {
     constructor() {}
@@ -12,9 +13,14 @@ class Talent {
             const talent = talents[id];
             talent.id= Number(id);
             talent.grade = Number(talent.grade);
+            talent.max_triggers = extractMaxTriggers(talent.condition);
         }
     }
 
+    count() {
+        return Object.keys(this.#talents).length;
+    }
+
     check(talentId, property) {
         const { condition } = this.get(talentId);
         return checkCondition(property, condition);
@@ -42,7 +48,29 @@ class Talent {
         return null;
     }
 
-    talentRandom(include) {
+    talentRandom(include, {times = 0, achievement = 0} = {}) {
+        const rate = { 1:100, 2:10, 3:1, };
+        const rateAddition = { 1:1, 2:1, 3:1, };
+        const timesRate = getRate('times', times);
+        const achievementRate = getRate('achievement', achievement);
+
+        for(const grade in timesRate)
+            rateAddition[grade] += timesRate[grade] - 1;
+
+        for(const grade in achievementRate)
+            rateAddition[grade] += achievementRate[grade] - 1;
+
+        for(const grade in rateAddition)
+            rate[grade] *= rateAddition[grade];
+
+        const randomGrade = () => {
+            let randomNumber = Math.floor(Math.random() * 1000);
+            if((randomNumber -= rate[3]) < 0) return 3;
+            if((randomNumber -= rate[2]) < 0) return 2;
+            if((randomNumber -= rate[1]) < 0) return 1;
+            return 0;
+        }
+
         // 1000, 100, 10, 1
         const talentList = {};
         for(const talentId in this.#talents) {
@@ -58,15 +86,8 @@ class Talent {
         return new Array(10)
             .fill(1).map((v, i)=>{
                 if(!i && include) return include;
-                const gradeRandom = Math.random();
-                let grade;
-                if(gradeRandom>=0.111) grade = 0;
-                else if(gradeRandom>=0.011) grade = 1;
-                else if(gradeRandom>=0.001) grade = 2;
-                else grade = 3;
-
+                let grade = randomGrade();
                 while(talentList[grade].length == 0) grade--;
-
                 const length = talentList[grade].length;
 
                 const random = Math.floor(Math.random()*length) % length;

test/index.js

@@ -1,7 +1,30 @@
 import { readFile } from 'fs/promises';
 import Life from '../src/life.js'
 
-global.json = async fileName => JSON.parse(await readFile(`data/${fileName}.json`));
+globalThis.json = async fileName => JSON.parse(await readFile(`data/${fileName}.json`));
+
+globalThis.localStorage = {};
+localStorage.getItem = key => localStorage[key]===void 0? null: localStorage[key];
+localStorage.setItem = (key, value) => (localStorage[key] = value);
+
+
+globalThis.$$eventMap = new Map();
+globalThis.$$event = (tag, data) => {
+    const listener = $$eventMap.get(tag);
+    if(listener) listener.forEach(fn=>fn(data));
+}
+globalThis.$$on = (tag, fn) => {
+    let listener = $$eventMap.get(tag);
+    if(!listener) {
+        listener = new Set();
+        $$eventMap.set(tag, listener);
+    }
+    listener.add(fn);
+}
+globalThis.$$off = (tag, fn) => {
+    const listener = $$eventMap.get(tag);
+    if(listener) listener.delete(fn);
+}
 
 async function debug() {
 
@@ -14,7 +37,8 @@ async function debug() {
         STR: 5,                     // 体质 strength STR
         MNY: 5,                     // 家境 money MNY
         SPR: 5,                     // 快乐 spirit SPR
-        TLT: [1004, 1005, 1009],    // 天赋 talent TLT
+        // AGE: 100,
+        TLT: [1134, 1048, 1114],    // 天赋 talent TLT
     });
     const lifeTrajectory = [];
     let trajectory;
@@ -42,6 +66,7 @@ async function debug() {
                 }
             ).join('\n    ')
         );
+        if(age == 60) debugger
     } while(!trajectory.isEnd)
     // debugger;
 }

utils/xlsxTransform.js

@@ -6,20 +6,36 @@ import { join, extname, dirname } from 'path';
 // const XLSX = require('xlsx');
 // const { join, extname, dirname } = require('path');
 
-async function transform(filePath) {
-    const xlsxFileBuffer = await readFile(filePath);
+async function read(xlsxPath) {
+    const xlsxFileBuffer = await readFile(xlsxPath);
     const xlsx = XLSX.read(xlsxFileBuffer, {type: 'buffer'});
     const sheets = xlsx.Sheets;
-
     const data = {};
     for(const sheetName in sheets) {
         const sheetRawData = sheets[sheetName];
         if(!sheetRawData['!ref']) break;
-        const rawData = XLSX.utils.sheet_to_json(sheetRawData);
-        const newData = {};
-        data[sheetName] = newData;
-        rawData.shift();
-        for(const row of rawData) {
+        data[sheetName] = XLSX.utils.sheet_to_json(sheetRawData);
+    }
+    return data;
+}
+
+async function write(sheets) {
+    for(const sheetName in sheets) {
+        const { dirname, data, source } = sheets[sheetName];
+        const savePath = join(dirname, `${sheetName}.json`);
+        console.info('[Transform] XLSX(', source.map(([p, s])=>`${p}:${s}`).join('\n\t\t  '), `) \n\t -> JSON( ${savePath} )`);
+        await writeFile(
+            savePath,
+            JSON.stringify(data, null, 4),
+        )
+    }
+}
+
+function format(rawSheet, isArray, xlsxPath, rawSheetName) {
+    const newSheet = isArray?[]:{};
+    rawSheet.shift();
+    for(const index in rawSheet) {
+        const row = rawSheet[index];
         const rowData = {};
         let mainKey;
         for(let key in row) {
@@ -51,11 +67,91 @@ async function transform(filePath) {
                 rowData[key] = cell;
             }
         }
-            if(mainKey===undefined) return console.error('No Main Key', rowData);
-            newData[mainKey] = rowData;
+        if(isArray) {
+            newSheet.push(rowData);
+            continue;
+        }
+        if(mainKey===undefined) {
+            console.warn(`[WARN][No Main Key] ${xlsxPath}:${rawSheetName}`, parseInt(index)+3, rowData);
+            continue;
+        }
+        if(newSheet[mainKey]) console.warn(`[WARN][Duplicate Key] ${mainKey} ${xlsxPath}:${rawSheetName}`, parseInt(index), '\n\t', JSON.stringify(newSheet[mainKey]), '\n\t', JSON.stringify(rowData));
+        newSheet[mainKey] = rowData;
+    }
+    return newSheet;
+}
+
+function merge(original, rawData, isMerge, isArray, xlsxPath, rawSheetName) {
+    if(!original)
+        return {
+            isMerge,
+            isArray,
+            source: [[xlsxPath, rawSheetName]],
+            data: format(rawData, isArray, xlsxPath, rawSheetName)
+        };
+
+
+    if(!isMerge) {
+        if(original) {
+            console.warn(`[WARN][Sheet Duplicate] ${xlsxPath}:${rawSheetName}\n\t\t${original.source[0][0]}:${original.source[0][1]}`)
+            return original;
         }
     }
-    return data;
+
+    if(!original.isMerge) {
+        console.warn(`[WARN][Sheet Duplicate] ${xlsxPath}:${rawSheetName}\n\t\t${original.source[0][0]}:${original.source[0][1]}`)
+        return original;
+    }
+
+    if(original.isArray != isArray) {
+        console.warn(`[WARN][Sheet Format not pair] ${xlsxPath}:${rawSheetName}\n\t\t${original.source[0][0]}:${original.source[0][1]}`)
+        return original;
+    }
+
+    const formatData = format(rawData, isArray, xlsxPath, rawSheetName);
+
+    original.source.push([xlsxPath, rawSheetName]);
+
+    if(isArray) {
+        original.data = original.data.concat(formatData)
+    } else {
+        for(const key in formatData) {
+            if(original.data[key]) {
+                console.warn(`[WARN][Duplicate key] ${key} ${xlsxPath}:${rawSheetName} ${JSON.stringify(formatData[key])}\n\t\t${original.source[0][0]}:${original.source[0][1]} ${JSON.stringify(original.data[key])}`);
+                continue;
+            }
+            original.data[key] = formatData[key];
+        }
+    }
+
+    return original;
+}
+
+function transform(rawSheets) {
+    const sheets = {};
+    for(const xlsxPath in rawSheets) {
+        const {dirname: d, data: rawSheetsData} = rawSheets[xlsxPath];
+        for(const rawSheetName in rawSheetsData) {
+            const rawData = rawSheetsData[rawSheetName];
+            if(rawSheetName[0] === "#") continue;
+            let sheetName = rawSheetName;
+            const isArray = rawSheetName.substr(-5) === "<arr>";
+            if(isArray) sheetName = sheetName.substring(0, sheetName.length - 5);
+            const isMerge = rawSheetName[0] === ">";
+            if(isMerge) sheetName = sheetName.substr(1);
+            sheets[sheetName] = merge(
+                sheets[sheetName],
+                rawData,
+                isMerge,
+                isArray,
+                xlsxPath,
+                rawSheetName
+            );
+            sheets[sheetName].dirname = d;
+        }
+    }
+
+    return sheets;
 }
 
 async function walk(filePath) {
@@ -82,18 +178,18 @@ async function main() {
     const filePaths = process.argv.slice(2);
     if(filePaths.length<0) process.exit(0);
     const xlsxs = await walk(filePaths);
+    const sheets = {};
     for(const p of xlsxs) {
-        const data = await transform(p);
+        const data = await read(p);
         const d = dirname(p);
-        for(const sheetName in data) {
-            const savePath = join(d, `${sheetName}.json`);
-            console.info(`[Transform] XLSX(${p}:${sheetName}) -> JSON(${savePath})`);
-            await writeFile(
-                savePath,
-                JSON.stringify(data[sheetName], null, 4),
+        sheets[p] = {
+            dirname: d,
+            data
+        };
+    }
+    await write(
+        transform(sheets)
     );
-        }
-    }
     console.info(`
 ------------------------
 |  Transform Complete  |

view/dark.css

@@ -43,6 +43,11 @@
     url('iconfont.ttf?t=1628944689555') format('truetype');
 }
 
+* {
+  margin: 0;
+  padding: 0;
+}
+
 html {
   background-color: #222831;
   font-family: PingFangSC, 'Noto Sans CJK SC', 'MS Yahei';
@@ -53,9 +58,13 @@ body {
 }
 
 #main {
-    align-content: center;
+  display: flex;
+  flex-direction: column;
   width: 100%;
+  max-width: 30rem;
   height: 100%;
+  text-align: center;
+  box-sizing: border-box;
   position: relative;
 }
 
@@ -67,24 +76,38 @@ body {
   left: 50%;
   white-space: nowrap;
   transform: translate(-50%, -50%);
-    text-align: center;
   color: #EEEEEE;
 }
 
-.mainbtn {
+#restart {
   position: fixed;
   top: 65%;
   left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+#restart .iconfont {
+  margin-right: 0.5rem;
+}
+
+#next {
+  display: none;
+}
+
+#talentSelectedView {
+  flex: 0 1 auto;
+}
+
+.mainbtn {
+  margin: 0.5rem 1rem 1rem;
   padding: 0.5rem 1.5rem;
+  background-color: #393E46;
   border: 1px #EEEEEE solid;
   border-radius: 0.2rem;
-    background-color:#393E46;
+  color: #EEEEEE;
   font-size: 1.6rem;
   white-space: nowrap;
-    transform: translate(-50%,-50%);
   cursor: pointer;
-    z-index:2;
-    color: #EEEEEE;
 }
 
 .mainbtn:hover {
@@ -93,18 +116,32 @@ body {
   transition: all .4s ease 0s;
 }
 
+.btn-area {
+  display: flex;
+  flex-direction: row;
+}
+
+.btn-area>.mainbtn {
+  flex: 1;
+}
+
 .iconfont {
+  display: inline-block;
+  vertical-align: middle;
   font-family: "iconfont" !important;
   font-style: normal;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
-#rank {
+.sponsor,
+#specialthanks,
+#achievement {
   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,129 +149,252 @@ body {
   color: #EEEEEE;
   cursor: pointer;
   z-index:2;
+  word-wrap: none;
+}
+
+#specialthanks {
+  background-color: #5865F2;
+  top: 1rem;
+}
+
+.sponsor {
+  top: auto;
+  bottom: 0;
+  width: auto;
+  padding: 0.5rem;
+}
+
+#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;
+}
+
+.title {
+  color: white;
+  font-size: 1.5rem;
+  font-weight: 700;
+  padding: 1rem;
+}
+
+ul#total,
+#achievements {
+  list-style-type: none;
+  display: grid;
+  justify-items: center;
+  grid-template-columns: 50% 50%;
+  grid-auto-columns: max-content;
+  justify-content: center;
+}
+
+ul#total li,
+#achievements li {
+  position: relative;
+  color: white;
+  display: inline-grid;
+  margin: 0.5rem;
+  width: 12rem;
+  height: 6rem;
+  align-items: center;
+}
+
+ul#total li .achievementtitle,
+#achievements li .achievementtitle{
+  font-weight: 700;
+  font-size: 1.2rem;
+}
+
+#achievements {
+  overflow: scroll;
 }
 
 #themeToggleBtn {
-    position: fixed;
-    right: 1rem;
-    bottom: 1rem;
-    padding: 0.1rem 1rem;
-    border: none;
-    border-radius: 0.2rem;
+  padding: 0 0.7rem;
+  width: 6.5rem;
   background-color:#EEEEEE;
+  border: none;
+  border-radius: 4px;
   font-size: 1.4rem;
   color: #222831;
+  line-height: 2.5rem;
+  text-align: center;
+  vertical-align: middle;
   cursor: pointer;
+  position: fixed;
   z-index:2;
+  right: 0.5rem;
+  bottom: 0.5rem;
 }
 
 .head {
-    position: fixed;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 5.2rem;
   font-size: 1.4rem;
-    top: 1.1rem;
-    left: 50%;
   white-space: nowrap;
-    transform: translateX(-50%);
-    text-align: center;
   color: #EEEEEE;
 }
 
-.judge,
-.lifeTrajectory,
 .propinitial,
 .selectlist {
-    position: fixed;
-    list-style-type: none;
-    left: 50%;
-    top: 5rem;
-    bottom: 8.5rem;
-    width: 30rem;
-    max-width: calc(100% - 2rem);
-    margin: auto;
-    padding: 0;
+  list-style: none;
+  flex: 1;
+  padding: 1rem;
   overflow: auto;
-    transform: translateX(-50%);
-    text-align: center;
 }
 
 .lifeProperty {
-  position: fixed;
-  list-style-type: none;
-  left: 50%;
-  top: 2rem;
-  width: 30rem;
-  max-width: calc(100% - 2rem);
-  padding: 0;
-  overflow: auto;
-  transform: translateX(-50%);
+  list-style: none;
+  padding: 2rem 1rem 0.5rem 4rem;
   display: flex;
-  color: white;
+  color: #FFFFFF;
+  overflow: auto;
 }
 
 .lifeProperty>li {
-  width: 100%;
-  position: relative;
-  border: 1px #ccc solid;
-  display: inline-block;
+  flex: 1;
   margin: 0.1rem 2px;
-  font-size: 1rem;
-  text-align: center;
+  display: flex;
+  flex-direction: column;
+  border: 1px #ccc solid;
   border-radius: 0.2rem;
+  font-size: 1rem;
+  position: relative;
+}
+
+.lifeProperty>li>span:last-child {
+  background: #eee;
+  color: #666;
 }
 
 .selectlist>li {
-    position: relative;
+  margin-bottom: 0.6rem;
+  display: block;
   border: 1px #EEEEEE solid;
-    display: inline-block;
-    width: 95%;
-    margin: 0.1rem auto;
-    font-size: 1.4rem;
-    text-align: center;
   border-radius: 0.2rem;
-    cursor: pointer;
   color: #EEEEEE;
+  font-size: 1.2rem;
+  line-height: 1.6;
   user-select: none;
+  position: relative;
+  cursor: pointer;
 }
 
+.selectlist>li:last-child {
+  margin-bottom: 0;
+}
+
+.achvg0,
 .grade0b {
   background-color: #464646;
   border: #f8f8f8 2px solid !important;
 }
+.achvg1,
 .grade1b {
   background-color: #6495ed;
   border: #f8f8f8 2px solid !important;
 }
+
+.achvg2,
 .grade2b {
   background-color: #e2a7ff;
   border: #f8f8f8 2px solid !important;
 }
+
+.achvg3,
 .grade3b {
   background-color: #ffa07a;
   border: #f8f8f8 2px solid !important;
 }
 
+.mask::before {
+  display: block;
+  content: "　";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #000;
+  opacity: 0.5;
+}
+
 @media (min-width:1080px) {
   .grade0b:hover {
     background-color: #c0c0c0;
     color: #3b3b3b;
     transition: all .3s ease 0s;
   }
+
   .grade1b:hover {
     background-color: #87cefa;
     color: #3b3b3b;
     transition: all .3s ease 0s;
   }
+
   .grade2b:hover {
     background-color: #e7beff;
     color: #3b3b3b;
     transition: all .3s ease 0s;
   }
+
   .grade3b:hover {
     background-color: #f7a989;
     color: #3b3b3b;
     transition: all .3s ease 0s;
   }
 }
+
 .grade0b.selected {
   background-color: #c0c0c0 !important;
   box-shadow: #ccc 0px 0px 10px;
@@ -259,22 +419,10 @@ body {
   color: #3b3b3b;
 }
 
-.judge > li.grade1 span,
-.judge > li.grade1{
-    background-color: #87cefa;
-}
-.judge > li.grade2 span,
-.judge > li.grade2{
-    background-color: #e7beff;
-}
-.judge > li.grade3 span,
-.judge > li.grade3{
-    background-color: #f7a989;
-}
-
 .propinitial {
-    top: 5rem;
-    bottom: 17rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 }
 
 .propbtn:hover {
@@ -284,14 +432,13 @@ body {
 
 .propinitial>li {
   position: relative;
-    display: inline-block;
-    width: 95%;
   margin: 0.1rem auto;
-    font-size: 1.4rem;
-    text-align: center;
-    border-radius: 0.2rem;
   padding: 0.2rem;
+  display: inline-block;
+  border-radius: 0.2rem;
   color: #EEEEEE;
+  font-size: 1.6rem;
+  line-height: 2;
 }
 
 .propinitial>li>input {
@@ -299,11 +446,11 @@ body {
   width: 2.2rem;
   margin: 0 0.5rem;
   padding: 0;
-    text-align: center;
   font-size: 2rem;
   border: 0.1rem #EEEEEE solid;
   background-color: #393E46;
   color: #EEEEEE;
+  text-align: center;
 }
 
 .propbtn {
@@ -313,49 +460,85 @@ body {
   color: #EEEEEE;
 }
 
-.lifeTrajectory {
-	border: 1px #9b9b9b solid;
-    background-color: #393E46;
-	border-radius: 10px;
+.judge>li>span:nth-child(1),
+.lifeTrajectory>li>span:nth-child(1) {
+  width: 5rem;
+  text-align: right;
+}
+.judge>li>span:nth-child(2),
+.lifeTrajectory>li>span:nth-child(2) {
+  flex: 1;
+  text-align: left;
+}
+
+.lifeTrajectory {
+  flex: 1;
+  margin: 0.5rem 1rem;
+  padding: 0;
+  border: 1px #9b9b9b solid;
+  background-color: #393E46;
+  border-radius: 4px;
+  overflow: auto;
 }
 
-.judge > li,
 .lifeTrajectory>li {
-    position: relative;
-    width: calc(100% - 7rem);
-    margin: 0.5rem 0;
-    padding: 0.5rem 1rem 0.5rem 6rem;
-    font-size: 1.4rem;
+  margin: 10px 0;
+  padding: 5px 10px;
+  display: flex;
   background-color: #4a5361;
   box-shadow: #EEEEEE 0 0 0.4rem;
   color: #EEEEEE;
+  font-size: 1rem;
+  position: relative;
 }
 
-.judge > li > span,
-.lifeTrajectory > li > span {
-    position: absolute;
-    left: 0;
-    width: 6rem;
-    text-align: right;
+
+.judge {
+  list-style: none;
+  flex: 1;
+  margin: 1rem;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid #EEEEEE;
+  border-radius: 4px;
+  overflow: scroll;
 }
 
 .judge>li {
-    box-shadow: #EEEEEE 0 0 0.4rem;
-    width: calc(100% - 9rem);
-    margin: 0.5rem;
-    padding: 0.5rem 1rem 0.5rem 7rem;
-    border-radius: 10px;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  background-color: #4a5361;
+  border-bottom: 1px solid #EEEEEE;
+  box-shadow: none;
+  color: #EEEEEE;
 }
 
-.judge > li > span {
-    height: calc(100% - 1rem);
-    padding: 0.5rem 0;
-    top: 0;
-    border-radius: 10px;
+.judge>li:last-child {
+  border-bottom: 0
+}
+
+.judge>li.grade1 span,
+.judge>li.grade1 {
+  background-color: #87cefa;
+  color: #4a5361;
+}
+
+.judge>li.grade2 span,
+.judge>li.grade2 {
+  background-color: #e7beff;
+  color: #4a5361;
+}
+
+.judge>li.grade3 span,
+.judge>li.grade3 {
+  background-color: #f7a989;
+  color: #4a5361;
 }
 
 
 @import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700");
+
 :root {
   font-family: "Montserrat";
 }
@@ -392,12 +575,14 @@ i {
   flex-direction: row;
   align-items: center;
 }
+
 .banner .banner-message {
   flex: 1;
   padding: 0 2rem;
   word-break: break-word;
   overflow: auto;
 }
+
 .banner .banner-close {
   display: flex;
   align-items: center;
@@ -419,18 +604,23 @@ i {
 .banner.success {
   background: lightgreen;
 }
+
 .banner.success::after {
   background: lightgreen;
 }
+
 .banner.error {
   background: #ed1c24;
 }
+
 .banner.error::after {
   background: #ed1c24;
 }
+
 .banner.info {
   background: skyblue;
 }
+
 .banner.info::after {
   background: skyblue;
 }
@@ -463,13 +653,16 @@ i {
   0% {
     transform: translateY(-100%);
   }
+
   50% {
     transform: translateY(10%);
   }
+
   100% {
     transform: translateY(0);
   }
 }
+
 .show-banner {
   appearance: none;
   background: #ededed;
@@ -488,85 +681,164 @@ i {
  */
 .eva-animation {
   animation-duration: 1s;
-    animation-fill-mode: both; }
+  animation-fill-mode: both;
+}
 
 .eva-infinite {
-    animation-iteration-count: infinite; }
+  animation-iteration-count: infinite;
+}
 
 .eva-icon-shake {
-    animation-name: eva-shake; }
+  animation-name: eva-shake;
+}
 
 .eva-icon-zoom {
-    animation-name: eva-zoomIn; }
+  animation-name: eva-zoomIn;
+}
 
 .eva-icon-pulse {
-    animation-name: eva-pulse; }
+  animation-name: eva-pulse;
+}
 
 .eva-icon-flip {
-    animation-name: eva-flipInY; }
+  animation-name: eva-flipInY;
+}
 
 .eva-hover {
-    display: inline-block; }
+  display: inline-block;
+}
 
-  .eva-hover:hover .eva-icon-hover-shake, .eva-parent-hover:hover .eva-icon-hover-shake {
-    animation-name: eva-shake; }
+.eva-hover:hover .eva-icon-hover-shake,
+.eva-parent-hover:hover .eva-icon-hover-shake {
+  animation-name: eva-shake;
+}
 
-  .eva-hover:hover .eva-icon-hover-zoom, .eva-parent-hover:hover .eva-icon-hover-zoom {
-    animation-name: eva-zoomIn; }
+.eva-hover:hover .eva-icon-hover-zoom,
+.eva-parent-hover:hover .eva-icon-hover-zoom {
+  animation-name: eva-zoomIn;
+}
 
-  .eva-hover:hover .eva-icon-hover-pulse, .eva-parent-hover:hover .eva-icon-hover-pulse {
-    animation-name: eva-pulse; }
+.eva-hover:hover .eva-icon-hover-pulse,
+.eva-parent-hover:hover .eva-icon-hover-pulse {
+  animation-name: eva-pulse;
+}
 
-  .eva-hover:hover .eva-icon-hover-flip, .eva-parent-hover:hover .eva-icon-hover-flip {
-    animation-name: eva-flipInY; }
+.eva-hover:hover .eva-icon-hover-flip,
+.eva-parent-hover:hover .eva-icon-hover-flip {
+  animation-name: eva-flipInY;
+}
 
 @keyframes eva-flipInY {
   from {
     transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
     animation-timing-function: ease-in;
-      opacity: 0; }
+    opacity: 0;
+  }
+
   40% {
     transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
-      animation-timing-function: ease-in; }
+    animation-timing-function: ease-in;
+  }
+
   60% {
     transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
-      opacity: 1; }
+    opacity: 1;
+  }
+
   80% {
-      transform: perspective(400px) rotate3d(0, 1, 0, -5deg); }
+    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
+  }
+
   to {
-      transform: perspective(400px); } }
+    transform: perspective(400px);
+  }
+}
 
 @keyframes eva-shake {
+
   from,
   to {
-      transform: translate3d(0, 0, 0); }
+    transform: translate3d(0, 0, 0);
+  }
+
   10%,
   30%,
   50%,
   70%,
   90% {
-      transform: translate3d(-3px, 0, 0); }
+    transform: translate3d(-3px, 0, 0);
+  }
+
   20%,
   40%,
   60%,
   80% {
-      transform: translate3d(3px, 0, 0); } }
+    transform: translate3d(3px, 0, 0);
+  }
+}
 
 @keyframes eva-pulse {
   from {
-      transform: scale3d(1, 1, 1); }
+    transform: scale3d(1, 1, 1);
+  }
+
   50% {
-      transform: scale3d(1.2, 1.2, 1.2); }
+    transform: scale3d(1.2, 1.2, 1.2);
+  }
+
   to {
-      transform: scale3d(1, 1, 1); } }
+    transform: scale3d(1, 1, 1);
+  }
+}
 
 @keyframes eva-zoomIn {
   from {
     opacity: 1;
-      transform: scale3d(0.5, 0.5, 0.5); }
+    transform: scale3d(0.5, 0.5, 0.5);
+  }
+
   50% {
-      opacity: 1; } }
+    opacity: 1;
+  }
+}
 
 ::-webkit-scrollbar {
   width: 0 !important
 }
+
+.deleteFixed {
+  margin: 0;
+  padding: 0.5rem 1rem;
+  border: 0;
+  border-radius: 0;
+  overflow: visible;
+}
+
+.operateBtn {
+  padding: 0.5rem 1.5rem;
+  border: 1px #EEEEEE solid;
+  border-radius: 0.2rem;
+  background-color:#393E46;
+  font-size: 1.6rem;
+  white-space: nowrap;
+  transform: translate(-50%,-50%);
+  cursor: pointer;
+  z-index:2;
+  color: #EEEEEE;
+}
+
+.operateBtn:hover {
+  background: #ff7878;
+  color: #fff;
+  transition: all .4s ease 0s;
+}
+
+.domToImage2wx {
+  position: fixed;
+  z-index: 1111;
+  width: 100%;
+}
+
+.domToImage2wx img {
+  width: 100%;
+}

view/index.html

@@ -8,11 +8,9 @@
     <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="../public/bundle.js"></script>
     <title>Life Restart</title>
 </head>
-<body style="margin: 0; height: 100%">
+<body>
   <div class="banners-container">
     <div class="banners">
       <div class="banner error">
@@ -33,8 +31,10 @@
     </div>
   </div>
   <a href="https://github.com/VickScarlet/lifeRestart" class="github-corner" style="z-index: 9999;" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; left: 0; transform: scale(-1, 1);" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style></a>
-  <a href="https://discord.gg/U3qrf49NMQ" style="z-index: 9999;" aria-label="Chat on Discord"><button class="discord-btn"><svg width="50%" height="55" viewBox="0 0 71 55" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0)"><path d="M60.1045 4.8978C55.5792 2.8214 50.7265 1.2916 45.6527 0.41542C45.5603 0.39851 45.468 0.440769 45.4204 0.525289C44.7963 1.6353 44.105 3.0834 43.6209 4.2216C38.1637 3.4046 32.7345 3.4046 27.3892 4.2216C26.905 3.0581 26.1886 1.6353 25.5617 0.525289C25.5141 0.443589 25.4218 0.40133 25.3294 0.41542C20.2584 1.2888 15.4057 2.8186 10.8776 4.8978C10.8384 4.9147 10.8048 4.9429 10.7825 4.9795C1.57795 18.7309 -0.943561 32.1443 0.293408 45.3914C0.299005 45.4562 0.335386 45.5182 0.385761 45.5576C6.45866 50.0174 12.3413 52.7249 18.1147 54.5195C18.2071 54.5477 18.305 54.5139 18.3638 54.4378C19.7295 52.5728 20.9469 50.6063 21.9907 48.5383C22.0523 48.4172 21.9935 48.2735 21.8676 48.2256C19.9366 47.4931 18.0979 46.6 16.3292 45.5858C16.1893 45.5041 16.1781 45.304 16.3068 45.2082C16.679 44.9293 17.0513 44.6391 17.4067 44.3461C17.471 44.2926 17.5606 44.2813 17.6362 44.3151C29.2558 49.6202 41.8354 49.6202 53.3179 44.3151C53.3935 44.2785 53.4831 44.2898 53.5502 44.3433C53.9057 44.6363 54.2779 44.9293 54.6529 45.2082C54.7816 45.304 54.7732 45.5041 54.6333 45.5858C52.8646 46.6197 51.0259 47.4931 49.0921 48.2228C48.9662 48.2707 48.9102 48.4172 48.9718 48.5383C50.038 50.6034 51.2554 52.5699 52.5959 54.435C52.6519 54.5139 52.7526 54.5477 52.845 54.5195C58.6464 52.7249 64.529 50.0174 70.6019 45.5576C70.6551 45.5182 70.6887 45.459 70.6943 45.3942C72.1747 30.0791 68.2147 16.7757 60.1968 4.9823C60.1772 4.9429 60.1437 4.9147 60.1045 4.8978ZM23.7259 37.3253C20.2276 37.3253 17.3451 34.1136 17.3451 30.1693C17.3451 26.225 20.1717 23.0133 23.7259 23.0133C27.308 23.0133 30.1626 26.2532 30.1066 30.1693C30.1066 34.1136 27.28 37.3253 23.7259 37.3253ZM47.3178 37.3253C43.8196 37.3253 40.9371 34.1136 40.9371 30.1693C40.9371 26.225 43.7636 23.0133 47.3178 23.0133C50.9 23.0133 53.7545 26.2532 53.6986 30.1693C53.6986 34.1136 50.9 37.3253 47.3178 37.3253Z" fill="#ffffff"/></g><defs><clipPath id="clip0"><rect width="71" height="55" fill="white"/></clipPath></defs></svg>CHAT</button><style>.discord-btn {position: fixed;bottom: 0.5rem;left: 0.5rem;background-color: #5865F2;padding: 0.7rem;height: auto;color: white;text-align: right;vertical-align: middle;border: none;width: 6.5rem;font-size: 1rem;border-radius: 4px;}.discord-btn svg {height: 1.5rem;position: absolute;top: 50%;left: 0;transform: translateY(-50%);}.discord-btn:hover svg{animation:discord-wave 560ms ease-in-out;}@keyframes discord-wave{0%,100%{transform:translateY(-50%) rotate(0)}20%,60%{transform:translateY(-50%) rotate(-25deg)}40%,80%{transform:translateY(-50%) rotate(10deg)}}@media (max-width:500px){.discord-btn:hover svg{animation:none}.discord-btn svg{animation:discord-wave 560ms ease-in-out}}</style></a>
-</body>
+
+  <script src="../lib/jquery-3.6.0.min.js"></script>
+  <script src="../lib/dom-to-image.min.js"></script>
+  <script src="../public/bundle.js"></script>
   <script>
     if ('serviceWorker' in navigator) {
       window.addEventListener('load', function () {
@@ -48,4 +48,5 @@
       });
     }
   </script>
+</body>
 </html>

view/light.css

@@ -43,6 +43,11 @@
     url('iconfont.ttf?t=1628944689555') format('truetype');
 }
 
+* {
+  margin: 0;
+  padding: 0;
+}
+
 html {
   font-family: PingFangSC, 'Noto Sans CJK SC', 'MS Yahei';
 }
@@ -52,9 +57,13 @@ body {
 }
 
 #main {
-    align-content: center;
+  display: flex;
+  flex-direction: column;
   width: 100%;
+  max-width: 30rem;
   height: 100%;
+  text-align: center;
+  box-sizing: border-box;
   position: relative;
 }
 
@@ -66,239 +75,266 @@ body {
   left: 50%;
   white-space: nowrap;
   transform: translate(-50%, -50%);
-    text-align: center;
+  color: #000;
 }
 
-.mainbtn {
+#restart {
   position: fixed;
   top: 65%;
   left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+#restart .iconfont {
+  margin-right: 0.5rem;
+}
+
+#next {
+  display: none;
+}
+
+#talentSelectedView {
+  flex: 0 1 auto;
+}
+
+.mainbtn {
+  margin: 0.5rem 1rem 1rem;
   padding: 0.5rem 1.5rem;
-    border: 1px #ccc solid;
+  background-color: #FFFFFF;
+  border: 1px #CCCCCC solid;
   border-radius: 0.2rem;
-    background-color:white;
+  color: #000000;
   font-size: 1.6rem;
   white-space: nowrap;
-    transform: translate(-50%,-50%);
   cursor: pointer;
-    z-index:2;
 }
 
 .mainbtn:hover {
   background: #ff7878;
-	color: #fff;
+  color: #FFFFFF;
   transition: all .4s ease 0s;
 }
 
+.btn-area {
+  display: flex;
+  flex-direction: row;
+}
+
+.btn-area>.mainbtn {
+  flex: 1;
+}
+
 .iconfont {
+  display: inline-block;
+  vertical-align: middle;
   font-family: "iconfont" !important;
   font-style: normal;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
-#rank {
+.sponsor,
+#specialthanks,
+#achievement {
   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;
-    cursor: pointer;
-    z-index:2;
-}
-
-#themeToggleBtn {
-    position: fixed;
-    right: 1rem;
-    bottom: 1rem;
-    padding: 0.1rem 1rem;
-    border: none;
-    border-radius: 0.2rem;
-    background-color:#222831;
-    font-size: 1.4rem;
   color: #EEEEEE;
   cursor: pointer;
   z-index:2;
+  word-wrap: none;
+}
+
+#specialthanks {
+  background-color: #5865F2;
+  top: 1rem;
+}
+
+.sponsor {
+  top: auto;
+  bottom: 0;
+  width: auto;
+  padding: 0.5rem;
+}
+
+#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;
+}
+
+.title {
+  font-size: 1.5rem;
+  font-weight: 700;
+  padding: 1rem;
+}
+
+ul#total,
+#achievements {
+  list-style-type: none;
+  display: grid;
+  justify-items: center;
+  grid-template-columns: 50% 50%;
+  grid-auto-columns: max-content;
+  justify-content: center;
+}
+
+ul#total li,
+#achievements li {
+  position: relative;
+  display: inline-grid;
+  margin: 0.5rem;
+  width: 12rem;
+  height: 6rem;
+  align-items: center;
+}
+
+ul#total li .achievementtitle,
+#achievements li .achievementtitle{
+  font-weight: 700;
+  font-size: 1.2rem;
+}
+
+#achievements {
+  overflow: scroll;
+}
+
+#themeToggleBtn {
+  padding: 0 0.7rem;
+  width: 6.5rem;
+  background-color:#222831;
+  border: none;
+  border-radius: 4px;
+  font-size: 1.4rem;
+  color: #EEEEEE;
+  line-height: 2.5rem;
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+  position: fixed;
+  z-index:2;
+  right: 0.5rem;
+  bottom: 0.5rem;
 }
 
 .head {
-    position: fixed;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 5.2rem;
   font-size: 1.4rem;
-    top: 1.1rem;
-    left: 50%;
   white-space: nowrap;
-    transform: translateX(-50%);
-    text-align: center;
+  color: #000;
 }
 
-.judge,
-.lifeTrajectory,
 .propinitial,
 .selectlist {
-    position: fixed;
-    list-style-type: none;
-    left: 50%;
-    top: 5rem;
-    bottom: 8.5rem;
-    width: 30rem;
-    max-width: calc(100% - 2rem);
-    margin: auto;
-    padding: 0;
+  list-style: none;
+  flex: 1;
+  padding: 1rem;
   overflow: auto;
-    transform: translateX(-50%);
-    text-align: center;
 }
 
 .lifeProperty {
-  position: fixed;
-  list-style-type: none;
-  left: 50%;
-  top: 2rem;
-  width: 30rem;
-  max-width: calc(100% - 2rem);
-  padding: 0;
-  overflow: auto;
-  transform: translateX(-50%);
+  list-style: none;
+  padding: 2rem 1rem 0.5rem 4rem;
   display: flex;
-  color: black;
+  color: #FFFFFF;
+  overflow: auto;
 }
 
 .lifeProperty>li {
-  width: 100%;
-  position: relative;
-  border: 1px #ccc solid;
-  display: inline-block;
+  flex: 1;
   margin: 0.1rem 2px;
-  font-size: 1rem;
-  text-align: center;
+  display: flex;
+  flex-direction: column;
+  background-color: #393E46;
+  border: 1px #ccc solid;
   border-radius: 0.2rem;
+  font-size: 1rem;
+  position: relative;
+}
+
+.lifeProperty>li>span:last-child {
+  background: #fff;
+  color: #000;
 }
 
 .selectlist>li {
-    position: relative;
-    border: 1px #ccc solid;
-    display: inline-block;
-    width: 95%;
-    margin: 0.1rem auto;
-    font-size: 1.4rem;
-    text-align: center;
+  margin-bottom: 0.6rem;
+  display: block;
+  border: 1px #EEEEEE solid;
   border-radius: 0.2rem;
+  color: #666;
+  font-size: 1.2rem;
+  line-height: 1.6;
+  user-select: none;
+  position: relative;
   cursor: pointer;
 }
 
-.grade0b {
-	background-color: #ededed;
-	border: #c5c5c5 2px solid !important;
-}
-
-.grade1b {
-	background-color: #7ea5ec;
-	border: #c5c5c5 2px solid !important;
-}
-
-.grade2b {
-	background-color: #e2a7ff;
-	border: #c5c5c5 2px solid !important;
-}
-
-.grade3b {
-	background-color: #ffa07a;
-	border: #c5c5c5 2px solid !important;
-}
-
-@media (min-width:1080px) {
-    .grade0b:hover {
-        background-color: #868686;
-        transition: all .3s ease 0s;
-    }
-
-    .grade1b:hover {
-        background-color: #5d90ff;
-        transition: all .3s ease 0s;
-    }
-
-    .grade2b:hover {
-        background-color: #bc72ec;
-        transition: all .3s ease 0s;
-    }
-
-    .grade3b:hover {
-        background-color: #e09074;
-        transition: all .3s ease 0s;
-    }
-}
-.grade0b.selected {
-    background-color: #444;
-    box-shadow: #bbb 0px 0px 10px;
-    color: #fff;
-}
-
-.grade1b.selected {
-    background-color: #407dec;
-    box-shadow: #bbb 0px 0px 10px;
-    color: #fff;
-}
-
-.grade2b.selected {
-	background-color: #b362e7;
-    box-shadow: #bbb 0px 0px 10px;
-    color: #fff;
-}
-
-.grade3b.selected {
-    background-color: #ff7f4d;
-    box-shadow: #bbb 0px 0px 10px;
-    color: #fff;
-}
-
-.judge > li.grade1 span,
-.judge > li.grade1{
-    background-color: #7ea5ec;
-}
-.judge > li.grade2 span,
-.judge > li.grade2{
-    background-color: #e2a7ff;
-}
-.judge > li.grade3 span,
-.judge > li.grade3{
-    background-color: #ffa07a;
+.selectlist>li:last-child {
+  margin-bottom: 0;
 }
 
 .propinitial {
-    top: 5rem;
-    bottom: 17rem;
-}
-
-.propinitial > li {
-    position: relative;
-    display: inline-block;
-    width: 95%;
-    margin: 0.1rem auto;
-    font-size: 1.4rem;
-    text-align: center;
-    border-radius: 0.2rem;
-    padding: 0.2rem;
-}
-
-.propinitial > li > input {
-    height: 2.2rem;
-    width: 2.2rem;
-    margin: 0 0.5rem;
-    padding: 0;
-    text-align: center;
-    font-size: 2rem;
-    border: 0.1rem #ccc solid;
-}
-
-.propbtn {
-    position: relative;
-    cursor: pointer;
-    font-size: 2rem;
-    user-select: none;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 }
 
 .propbtn:hover {
@@ -306,49 +342,115 @@ body {
   transition: all .2s ease 0s;
 }
 
-.lifeTrajectory {
-    border: 1px #a7a7a7 solid;
-    border-radius: 10px;
-    background-color: #ffffff;
-}
-
-.judge > li,
-.lifeTrajectory > li {
+.propinitial>li {
   position: relative;
-    width: calc(100% - 7rem);
-    margin: 0.5rem 0;
-    padding: 0.5rem 1rem 0.5rem 6rem;
-    font-size: 1.4rem;
-    background-color: #fff;
-    box-shadow: #a7a7a7 0 0 0.4rem;
-    user-select: none;
+  margin: 0.1rem auto;
+  padding: 0.2rem;
+  display: inline-block;
+  border-radius: 0.2rem;
+  color: #000;
+  font-size: 1.6rem;
+  line-height: 2;
 }
 
-.judge > li > span,
-.lifeTrajectory > li > span {
-    position: absolute;
-    left: 0;
-    width: 6rem;
+.propinitial>li>input {
+  height: 2.2rem;
+  width: 2.2rem;
+  margin: 0 0.5rem;
+  padding: 0;
+  font-size: 2rem;
+  border: 0.1rem #000 solid;
+  background-color: #fff;
+  color: #000;
+  text-align: center;
+}
+
+.propbtn {
+  position: relative;
+  cursor: pointer;
+  font-size: 2rem;
+  color: #000;
+}
+
+.judge>li>span:nth-child(1),
+.lifeTrajectory>li>span:nth-child(1) {
+  width: 5rem;
   text-align: right;
 }
+.judge>li>span:nth-child(2),
+.lifeTrajectory>li>span:nth-child(2) {
+  flex: 1;
+  text-align: left;
+}
+
+.lifeTrajectory {
+  flex: 1;
+  margin: 0.5rem 1rem;
+  padding: 0;
+  border: 1px #9b9b9b solid;
+  background-color: #393E46;
+  border-radius: 4px;
+  overflow: auto;
+}
+
+.lifeTrajectory>li {
+  margin: 10px 0;
+  padding: 5px 10px;
+  display: flex;
+  background-color: #4a5361;
+  box-shadow: #EEEEEE 0 0 0.4rem;
+  color: #EEEEEE;
+  font-size: 1rem;
+  position: relative;
+}
+
+
+.judge {
+  list-style: none;
+  flex: 1;
+  margin: 1rem;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid #EEEEEE;
+  border-radius: 4px;
+  overflow: scroll;
+}
 
 .judge>li {
-    box-shadow: lightgray 0 0 0.4rem;
-    width: calc(100% - 9rem);
-    margin: 0.5rem;
-    padding: 0.5rem 1rem 0.5rem 7rem;
-    border-radius: 10px;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  background-color: #4a5361;
+  border-bottom: 1px solid #EEEEEE;
+  box-shadow: none;
+  color: #EEEEEE;
 }
 
-.judge > li > span {
-    height: calc(100% - 1rem);
-    padding: 0.5rem 0;
-    top: 0;
-    border-radius: 10px;
+.judge>li:last-child {
+  border-bottom: 0
+}
+
+.judge>li.grade1 span,
+.judge>li.grade1 {
+  background-color: #87cefa;
+  color: #4a5361;
+}
+
+.judge>li.grade2 span,
+.judge>li.grade2 {
+  background-color: #e7beff;
+  color: #4a5361;
+}
+
+.judge>li.grade3 span,
+.judge>li.grade3 {
+  background-color: #f7a989;
+  color: #4a5361;
 }
 
 
 @import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700");
+
 :root {
   font-family: "Montserrat";
 }
@@ -385,12 +487,14 @@ i {
   flex-direction: row;
   align-items: center;
 }
+
 .banner .banner-message {
   flex: 1;
   padding: 0 2rem;
   word-break: break-word;
   overflow: auto;
 }
+
 .banner .banner-close {
   display: flex;
   align-items: center;
@@ -412,18 +516,23 @@ i {
 .banner.success {
   background: lightgreen;
 }
+
 .banner.success::after {
   background: lightgreen;
 }
+
 .banner.error {
   background: #ed1c24;
 }
+
 .banner.error::after {
   background: #ed1c24;
 }
+
 .banner.info {
   background: skyblue;
 }
+
 .banner.info::after {
   background: skyblue;
 }
@@ -452,17 +561,105 @@ i {
   animation-iteration-count: 1;
 }
 
+.achvg0,
+.grade0b {
+  background-color: #ededed;
+  border: #c5c5c5 2px solid !important;
+}
+
+.achvg1,
+.grade1b {
+  background-color: #7ea5ec;
+  border: #c5c5c5 2px solid !important;
+}
+
+.achvg2,
+.grade2b {
+  background-color: #e2a7ff;
+  border: #c5c5c5 2px solid !important;
+}
+
+.achvg3,
+.grade3b {
+  background-color: #ffa07a;
+  border: #c5c5c5 2px solid !important;
+}
+
+.mask::before {
+  display: block;
+  content: "　";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #000;
+  opacity: 0.5;
+}
+
+@media (min-width:1080px) {
+  .grade0b:hover {
+    background-color: #868686;
+    transition: all .3s ease 0s;
+  }
+
+  .grade1b:hover {
+    background-color: #5d90ff;
+    color: #3b3b3b;
+    transition: all .3s ease 0s;
+  }
+
+  .grade2b:hover {
+    background-color: #bc72ec;
+    color: #3b3b3b;
+    transition: all .3s ease 0s;
+  }
+
+  .grade3b:hover {
+    background-color: #e09074;
+    color: #3b3b3b;
+    transition: all .3s ease 0s;
+  }
+}
+
+.grade0b.selected {
+  background-color: #444 !important;
+  box-shadow: #bbb 0px 0px 10px;
+  color: #fff;
+}
+
+.grade1b.selected {
+  background-color: #407dec !important;
+  box-shadow: #bbb 0px 0px 10px;
+  color: #fff;
+}
+
+.grade2b.selected {
+  background-color: #b362e7 !important;
+  box-shadow: #bbb 0px 0px 10px;
+  color: #fff;
+}
+
+.grade3b.selected {
+  background-color: #ff7f4d !important;
+  box-shadow: #bbb 0px 0px 10px;
+  color: #fff;
+}
+
 @keyframes banner-in {
   0% {
     transform: translateY(-100%);
   }
+
   50% {
     transform: translateY(10%);
   }
+
   100% {
     transform: translateY(0);
   }
 }
+
 .show-banner {
   appearance: none;
   background: #ededed;
@@ -481,85 +678,164 @@ i {
  */
 .eva-animation {
   animation-duration: 1s;
-    animation-fill-mode: both; }
+  animation-fill-mode: both;
+}
 
 .eva-infinite {
-    animation-iteration-count: infinite; }
+  animation-iteration-count: infinite;
+}
 
 .eva-icon-shake {
-    animation-name: eva-shake; }
+  animation-name: eva-shake;
+}
 
 .eva-icon-zoom {
-    animation-name: eva-zoomIn; }
+  animation-name: eva-zoomIn;
+}
 
 .eva-icon-pulse {
-    animation-name: eva-pulse; }
+  animation-name: eva-pulse;
+}
 
 .eva-icon-flip {
-    animation-name: eva-flipInY; }
+  animation-name: eva-flipInY;
+}
 
 .eva-hover {
-    display: inline-block; }
+  display: inline-block;
+}
 
-  .eva-hover:hover .eva-icon-hover-shake, .eva-parent-hover:hover .eva-icon-hover-shake {
-    animation-name: eva-shake; }
+.eva-hover:hover .eva-icon-hover-shake,
+.eva-parent-hover:hover .eva-icon-hover-shake {
+  animation-name: eva-shake;
+}
 
-  .eva-hover:hover .eva-icon-hover-zoom, .eva-parent-hover:hover .eva-icon-hover-zoom {
-    animation-name: eva-zoomIn; }
+.eva-hover:hover .eva-icon-hover-zoom,
+.eva-parent-hover:hover .eva-icon-hover-zoom {
+  animation-name: eva-zoomIn;
+}
 
-  .eva-hover:hover .eva-icon-hover-pulse, .eva-parent-hover:hover .eva-icon-hover-pulse {
-    animation-name: eva-pulse; }
+.eva-hover:hover .eva-icon-hover-pulse,
+.eva-parent-hover:hover .eva-icon-hover-pulse {
+  animation-name: eva-pulse;
+}
 
-  .eva-hover:hover .eva-icon-hover-flip, .eva-parent-hover:hover .eva-icon-hover-flip {
-    animation-name: eva-flipInY; }
+.eva-hover:hover .eva-icon-hover-flip,
+.eva-parent-hover:hover .eva-icon-hover-flip {
+  animation-name: eva-flipInY;
+}
 
 @keyframes eva-flipInY {
   from {
     transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
     animation-timing-function: ease-in;
-      opacity: 0; }
+    opacity: 0;
+  }
+
   40% {
     transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
-      animation-timing-function: ease-in; }
+    animation-timing-function: ease-in;
+  }
+
   60% {
     transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
-      opacity: 1; }
+    opacity: 1;
+  }
+
   80% {
-      transform: perspective(400px) rotate3d(0, 1, 0, -5deg); }
+    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
+  }
+
   to {
-      transform: perspective(400px); } }
+    transform: perspective(400px);
+  }
+}
 
 @keyframes eva-shake {
+
   from,
   to {
-      transform: translate3d(0, 0, 0); }
+    transform: translate3d(0, 0, 0);
+  }
+
   10%,
   30%,
   50%,
   70%,
   90% {
-      transform: translate3d(-3px, 0, 0); }
+    transform: translate3d(-3px, 0, 0);
+  }
+
   20%,
   40%,
   60%,
   80% {
-      transform: translate3d(3px, 0, 0); } }
+    transform: translate3d(3px, 0, 0);
+  }
+}
 
 @keyframes eva-pulse {
   from {
-      transform: scale3d(1, 1, 1); }
+    transform: scale3d(1, 1, 1);
+  }
+
   50% {
-      transform: scale3d(1.2, 1.2, 1.2); }
+    transform: scale3d(1.2, 1.2, 1.2);
+  }
+
   to {
-      transform: scale3d(1, 1, 1); } }
+    transform: scale3d(1, 1, 1);
+  }
+}
 
 @keyframes eva-zoomIn {
   from {
     opacity: 1;
-      transform: scale3d(0.5, 0.5, 0.5); }
+    transform: scale3d(0.5, 0.5, 0.5);
+  }
+
   50% {
-      opacity: 1; } }
+    opacity: 1;
+  }
+}
 
 ::-webkit-scrollbar {
   width: 0 !important
 }
+
+.deleteFixed {
+  margin: 0;
+  padding: 0.5rem 1rem;
+  border: 0;
+  border-radius: 0;
+  overflow: visible;
+}
+
+.operateBtn {
+  padding: 0.5rem 1.5rem;
+  border: 1px #EEEEEE solid;
+  border-radius: 0.2rem;
+  background-color:#393E46;
+  font-size: 1.6rem;
+  white-space: nowrap;
+  transform: translate(-50%,-50%);
+  cursor: pointer;
+  z-index:2;
+  color: #EEEEEE;
+}
+
+.operateBtn:hover {
+  background: #ff7878;
+  color: #fff;
+  transition: all .4s ease 0s;
+}
+
+.domToImage2wx {
+  position: fixed;
+  z-index: 1111;
+  width: 100%;
+}
+
+.domToImage2wx img {
+  width: 100%;
+}

view/test.html

@@ -7,8 +7,8 @@
     <meta name="description" content="やり直すんだ。そして、次はうまくやる。"/>
     <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="../lib/jquery-3.6.0.min.js"></script>
+    <script src="../lib/dom-to-image.min.js"></script>
     <script type="module" src="../src/index.js"></script>
     <title>Life Restart</title>
 </head>
@@ -33,6 +33,5 @@
     </div>
   </div>
   <a href="https://github.com/VickScarlet/lifeRestart" class="github-corner" style="z-index: 9999;" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; left: 0; transform: scale(-1, 1);" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style></a>
-  <a href="https://discord.gg/U3qrf49NMQ" style="z-index: 9999;" aria-label="Chat on Discord"><button class="discord-btn"><svg width="50%" height="55" viewBox="0 0 71 55" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0)"><path d="M60.1045 4.8978C55.5792 2.8214 50.7265 1.2916 45.6527 0.41542C45.5603 0.39851 45.468 0.440769 45.4204 0.525289C44.7963 1.6353 44.105 3.0834 43.6209 4.2216C38.1637 3.4046 32.7345 3.4046 27.3892 4.2216C26.905 3.0581 26.1886 1.6353 25.5617 0.525289C25.5141 0.443589 25.4218 0.40133 25.3294 0.41542C20.2584 1.2888 15.4057 2.8186 10.8776 4.8978C10.8384 4.9147 10.8048 4.9429 10.7825 4.9795C1.57795 18.7309 -0.943561 32.1443 0.293408 45.3914C0.299005 45.4562 0.335386 45.5182 0.385761 45.5576C6.45866 50.0174 12.3413 52.7249 18.1147 54.5195C18.2071 54.5477 18.305 54.5139 18.3638 54.4378C19.7295 52.5728 20.9469 50.6063 21.9907 48.5383C22.0523 48.4172 21.9935 48.2735 21.8676 48.2256C19.9366 47.4931 18.0979 46.6 16.3292 45.5858C16.1893 45.5041 16.1781 45.304 16.3068 45.2082C16.679 44.9293 17.0513 44.6391 17.4067 44.3461C17.471 44.2926 17.5606 44.2813 17.6362 44.3151C29.2558 49.6202 41.8354 49.6202 53.3179 44.3151C53.3935 44.2785 53.4831 44.2898 53.5502 44.3433C53.9057 44.6363 54.2779 44.9293 54.6529 45.2082C54.7816 45.304 54.7732 45.5041 54.6333 45.5858C52.8646 46.6197 51.0259 47.4931 49.0921 48.2228C48.9662 48.2707 48.9102 48.4172 48.9718 48.5383C50.038 50.6034 51.2554 52.5699 52.5959 54.435C52.6519 54.5139 52.7526 54.5477 52.845 54.5195C58.6464 52.7249 64.529 50.0174 70.6019 45.5576C70.6551 45.5182 70.6887 45.459 70.6943 45.3942C72.1747 30.0791 68.2147 16.7757 60.1968 4.9823C60.1772 4.9429 60.1437 4.9147 60.1045 4.8978ZM23.7259 37.3253C20.2276 37.3253 17.3451 34.1136 17.3451 30.1693C17.3451 26.225 20.1717 23.0133 23.7259 23.0133C27.308 23.0133 30.1626 26.2532 30.1066 30.1693C30.1066 34.1136 27.28 37.3253 23.7259 37.3253ZM47.3178 37.3253C43.8196 37.3253 40.9371 34.1136 40.9371 30.1693C40.9371 26.225 43.7636 23.0133 47.3178 23.0133C50.9 23.0133 53.7545 26.2532 53.6986 30.1693C53.6986 34.1136 50.9 37.3253 47.3178 37.3253Z" fill="#ffffff"/></g><defs><clipPath id="clip0"><rect width="71" height="55" fill="white"/></clipPath></defs></svg>CHAT</button><style>.discord-btn {position: fixed;bottom: 0.5rem;left: 0.5rem;background-color: #5865F2;padding: 0.7rem;height: auto;color: white;text-align: right;vertical-align: middle;border: none;width: 6.5rem;font-size: 1rem;border-radius: 4px;}.discord-btn svg {height: 1.5rem;position: absolute;top: 50%;left: 0;transform: translateY(-50%);}.discord-btn:hover svg{animation:discord-wave 560ms ease-in-out;}@keyframes discord-wave{0%,100%{transform:translateY(-50%) rotate(0)}20%,60%{transform:translateY(-50%) rotate(-25deg)}40%,80%{transform:translateY(-50%) rotate(10deg)}}@media (max-width:500px){.discord-btn:hover svg{animation:none}.discord-btn svg{animation:discord-wave 560ms ease-in-out}}</style></a>
 </body>
 </html>

webpack.config.cjs

@@ -18,6 +18,10 @@ module.exports = {
         directory: path.join(__dirname, 'view'),
         publicPath: '/view',
       },
+      {
+        directory: path.join(__dirname, 'src'),
+        publicPath: '/src',
+      },
     ],
   },
   output: {