在人生活动界面增加实时更新的数值

调整样式（已经合并了先前修改）

README-zh_CN.md

@@ -41,6 +41,12 @@ yarn dev
 npm run dev
 ```
 
-4. 启动完成后会自动打开浏览器访问 [http://localhost:8081/view/index.html](http://localhost:8081/view/index.html)。
+5. 控制台版本
+
+```bash
+node repl
+```
+
+5. 启动完成后会自动打开浏览器访问 [http://localhost:8081/view/index.html](http://localhost:8081/view/index.html)。
 
 > 更多信息请参考 [官网文档](https://liferestart.syaro.io/)。

README.md

@@ -41,6 +41,12 @@ Or
 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).
+4. Command Line version
+
+```bash
+node repl
+```
+
+5. After the startup is complete, will automatically open a browser and visit [http://localhost:8081/view/index.html](http://localhost:8081/view/index.html).
 
 > More instructions at [documentation](https://liferestart.syaro.io/)。

repl/app.js

@@ -49,7 +49,12 @@ class App {
         this.output('Now Loading...');
         this.#talentExtend = global.localStorage.talentExtend;
         await this.#life.initial();
-        this.output('\rLoading Complete.\ntype \x1B[4m/remake\x1B[24m to start', true);
+        this.output(`\rLoading Complete.
+人生重开模拟器
+这垃圾人生一秒也不想待了
+\n🎉键入 \x1B[4m/remake\x1B[24m 开始游戏`,
+            true
+        );
     }
 
     io(input, output, exit) {
@@ -125,36 +130,155 @@ class App {
     }
 
     help(key) {
+
+        switch(key) {
+            case 'x':
+            case 'exit':
+            case '/exit': return `退出
+    x, exit, /exit      命令同等效果`;
+
+            case 'r':
+            case 'remake':
+            case '/remake': return `重开
+    r, remake, /remake  命令同等效果`;
+
+            case 's':
+            case 'select':
+            case '/select': return `选择
+    s, select, /select  命令同等效果
+
+    Example:    /select 1 2 3 意味着选择 1 2 3 三个天赋
+
+                /select <id1> [id2] [id3]
+
+    参数解释     <id1>   通常来说要指定至少一个id
+                        虽然不指定也可以
+                [id2]
+                [id3]   可以不指定`;
+
+            case 'u':
+            case 'unselect':
+            case '/unselect': return `取消选择
+    u, unselect,
+    /unselect           命令同等效果
+
+    Example:    /unselect 1 2 3
+                意味着取消选择 1 2 3 三个天赋
+
+    参数解释     /unselect <id1> [id2] [id3]
+
+                <id1>   通常来说要指定至少一个id
+                        虽然不指定也可以
+                [id2]
+                [id3]   可以不指定`;
+
+
+            case 'a':
+            case 'alloc':
+            case 'allocation':
+            case '/alloc':
+            case '/allocation': return `分配属性点
+    a, alloc, allocation
+    /alloc, /allocation 命令同等效果
+
+    Example:    /allocation STR 1
+                /allocation INT -3
+                /allocation CHR +5
+
+    参数解释    /allocation <TAG> <[+/-]value>
+
+                <TAG>   表示要分配的属性标签
+                        可选有
+                            CHR, chr, c, C 表示颜值
+                            INT, int, i, I 表示智力
+                            STR, str, s, S 表示体质
+                            MNY, mny, m, M 表示家境
+                        必填
+
+                <[+/-]value>
+                        表示属性的调整
+                        其中
+                            + 表示在当前基础上增加
+                            - 表示在当前基础上减少
+                            无符号表示直接设置为此值
+                        必填`;
+
+            case 'n':
+            case 'next':
+            case '/next': return `继续
+    n, next, /next      命令同等效果
+
+    效果                通常用于各步骤结束后
+                        例如：  选择天赋后
+                                分配属性后
+                                每个年龄事件后
+                                总评后
+                                继承天赋后`;
+
+            case 'at':
+            case 'auto':
+            case '/auto': return `自动播放
+    at, auto, /auto    命令同等效果
+
+    效果                用于人生的过程中
+                        每个年龄会自动下一年
+                        播放速度 1 秒 1 年`;
+
+            case '?':
+            case 'h':
+            case 'help':
+            case '/?':
+            case '/h':
+            case '/help': return `显示帮助
+    ？, h, help
+    /?, /h, /help           命令同等效果
+
+    Example:            /help
+                        /help /select
+
+    参数解释             /help [command]
+
+            [command]   要详细显示帮助的命令
+                        可以不填`;
+        }
         return `Help ---
-        x
+    命令            说明            示例
-        exit
+    x
-        /exit       exit
+    exit
+    /exit           退出            /exit
 
-        r
+    r
-        remake
+    remake
-        /remake     remake
+    /remake         重开            /remake
 
-        s
+    s
-        select
+    select
-        /select     select
+    /select         选择天赋        /select <id1> [id2] [id3]
 
-        u
+    u
-        unselect
+    unselect
-        /unselect   unselect
+    /unselect       取消选择        /unselect <id1> [id2] [id3]
 
-        n
+    a
-        next
+    alloc
-        /next       next
+    allocation
+    /alloc
+    /allocation     分配属性点      /allocation <TAG> <[+/-]value>
 
-        auto
+    n
-        /auto       auto play
+    next
+    /next           继续            /next
 
-        ?
+    at
-        h
+    auto
-        help
+    /auto           自动播放        /auto
-        /?
+
-        /h
+    ?
-        /help       show this message`;
+    h
+    help
+    /?
+    /h
+    /help           显示帮助        /help [command]`;
     }
 
     auto(arg) {
@@ -286,7 +410,6 @@ class App {
                 return this.trajectory(enter);
             case this.Steps.TRAJECTORY:
                 if(!this.#isEnd) return this.trajectory(enter);
-                if(this.#interval) clearInterval(this.#interval);
                 this.#step = this.Steps.SUMMARY;
                 return `${
                     this.summary()
@@ -302,12 +425,16 @@ class App {
         if(enter) {
             if(this.#interval) {
                 clearInterval(this.#interval);
+                this.#interval = null;
                 this.#auto = false;
             } else if(this.#auto) {
                 this.#interval = setInterval(
                     ()=>{
                         const trajectory = this.next();
-                        if(this.#isEnd && this.#interval) clearInterval(this.#interval);
+                        if(this.#isEnd && this.#interval) {
+                            clearInterval(this.#interval);
+                            this.#interval = null;
+                        }
                         if(!this.#isEnd) return this.output(`${trajectory}\n`);
                         return this.output(trajectory, true);
                     }
@@ -335,8 +462,8 @@ class App {
 
     prop() {
         const { CHR, INT, STR, MNY } = this.#propertyAllocation;
-        return `Property Allocation []
+        return `🎉属性分配
-🎉 剩余点数 ${this.less()}
+剩余点数 ${this.less()}
 
 属性(TAG)       当前值
 颜值(CHR)         ${CHR}

src/app.js

@@ -257,11 +257,17 @@ class App{
                 });
                 this.switch('trajectory');
                 this.#pages.trajectory.born();
+                $(document).keydown(function(event){
+                    if(event.which == 32 || event.which == 13){
+                        $('#lifeTrajectory').click();
+                    }
+                })
             });
 
         // Trajectory
         const trajectoryPage = $(`
         <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>
@@ -289,8 +295,19 @@ class App{
                 li.appendTo('#lifeTrajectory');
                 $("#lifeTrajectory").scrollTop($("#lifeTrajectory")[0].scrollHeight);
                 if(isEnd) {
+                    $(document).unbind("keydown");
                     this.#isEnd = true;
                     trajectoryPage.find('#summary').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.STR} </li>`);
                 }
             });
 

src/life.js

@@ -15,10 +15,11 @@ class Life {
     #triggerTalents;
 
     async initial() {
-        const age = await json('age');
+        const [age, talents, events] = await Promise.all([
-        const talents = await json('talents');
+          json('age'),
-        const events = await json('events');
+          json('talents'),
-
+          json('events'),
+        ])
         this.#property.initial({age});
         this.#talent.initial({talents});
         this.#event.initial({events});
@@ -110,6 +111,10 @@ class Life {
         return this.#property.getRecord();
     }
 
+    getLastRecord() {
+        return this.#property.getLastRecord();
+    }
+
     exclusive(talents, exclusive) {
         return this.#talent.exclusive(talents, exclusive);
     }

src/property.js

@@ -107,6 +107,10 @@ class Property {
         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)

view/dark.css

@@ -88,7 +88,7 @@ body {
 }
 
 .mainbtn:hover {
-	background: rgb(255, 120, 120);
+	background: #ff7878;
 	color: #fff;
 	transition: all .4s ease 0s;
 }
@@ -154,6 +154,32 @@ body {
     padding: 0;
     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%);
+  display: flex;
+  color: white;
+}
+
+.lifeProperty > li {
+  width: 100%;
+  position: relative;
+  border: 1px #ccc solid;
+  display: inline-block;
+  margin: 0.1rem 2px;
+  font-size: 1rem;
+  text-align: center;
+  border-radius: 0.2rem;
 }
 
 .selectlist > li {
@@ -167,95 +193,85 @@ body {
     border-radius: 0.2rem;
     cursor: pointer;
     color: #EEEEEE;
-}
+    user-select: none;
-
-.grade1b,
-.grade2b,
-.grade3b {
-  padding-left: 1.5rem;
-  box-sizing: border-box;
 }
 
 .grade0b {
-	background-color: rgb(70, 70, 70);
+	background-color: #464646;
 	border: #f8f8f8 2px solid !important;
 }
-
-.grade1,
-.grade1b::before {
-    background-color: rgb(116, 191, 255) !important;
-}
 .grade1b {
-	background-color: rgb(116, 191, 255);
+	background-color: #6495ed;
 	border: #f8f8f8 2px solid !important;
 }
-
-.grade2,
-.grade2b::before {
-    background-color: rgb(226, 167, 255) !important;
-}
 .grade2b {
-	background-color: rgb(226, 167, 255);
+	background-color: #e2a7ff;
 	border: #f8f8f8 2px solid !important;
 }
-
-.grade3,
-.grade3b::before {
-    background-color: #ffa07a !important;
-}
 .grade3b {
 	background-color: #ffa07a;
 	border: #f8f8f8 2px solid !important;
 }
 
-.grade1b,
+@media (min-width:1080px) {
-.grade2b,
+    .grade0b:hover {
-.grade3b {
+    	background-color: #c0c0c0;
-  padding-left: 1.5rem;
+        color: #3b3b3b;
-  box-sizing: border-box;
+    	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:hover {
-	background-color: rgb(202, 202, 202);
-    color: #3b3b3b;
-	transition: all .4s ease 0s;
-}
-.grade1b:hover {
-	background-color: rgb(159, 207, 248);
-    color: #3b3b3b;
-	transition: all .4s ease 0s;
-}
-.grade2b:hover {
-	background-color: rgb(240, 212, 255);
-    color: #3b3b3b;
-	transition: all .4s ease 0s;
-}
-.grade3b:hover {
-	background-color: #f7a989;
-    color: #3b3b3b;
-	transition: all .4s ease 0s;
-}
-
 .grade0b.selected {
-    background-color: rgb(202, 202, 202) !important;
+    background-color: #c0c0c0 !important;
+    box-shadow: #ccc 0px 0px 10px;
     color: #3b3b3b;
 }
 
 .grade1b.selected {
-    background-color: rgb(198, 229, 255) !important;
+    background-color: #87cefa !important;
+    box-shadow: #ccc 0px 0px 10px;
     color: #3b3b3b;
 }
 
 .grade2b.selected {
-	background-color: rgb(240, 212, 255) !important;
+	background-color: #e7beff !important;
+    box-shadow: #ccc 0px 0px 10px;
     color: #3b3b3b;
 }
 
 .grade3b.selected {
     background-color: #f1bfac !important;
+    box-shadow: #ccc 0px 0px 10px;
     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: 14rem;
@@ -328,13 +344,14 @@ body {
     width: calc(100% - 9rem);
     margin: 0.5rem;
     padding: 0.5rem 1rem 0.5rem 7rem;
+    border-radius: 10px;
 }
 
 .judge > li > span {
-    background-color: #393E46;
     height: calc(100% - 1rem);
     padding: 0.5rem 0;
     top: 0;
+    border-radius: 10px;
 }
 
 

view/light.css

@@ -85,7 +85,7 @@ body {
 }
 
 .mainbtn:hover {
-	background: rgb(255, 120, 120);
+	background: #ff7878;
 	color: #fff;
 	transition: all .4s ease 0s;
 }
@@ -150,6 +150,32 @@ body {
     padding: 0;
     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%);
+  display: flex;
+  color: white;
+}
+
+.lifeProperty > li {
+  width: 100%;
+  position: relative;
+  border: 1px #ccc solid;
+  display: inline-block;
+  margin: 0.1rem 2px;
+  font-size: 1rem;
+  text-align: center;
+  border-radius: 0.2rem;
 }
 
 .selectlist > li {
@@ -164,80 +190,82 @@ body {
     cursor: pointer;
 }
 
-.grade1b,
-.grade2b,
-.grade3b {
-  padding-left: 1.5rem;
-  box-sizing: border-box;
-}
-
 .grade0b {
-	background-color: rgb(237, 237, 237);
+	background-color: #ededed;
 	border: #c5c5c5 2px solid !important;
 }
 
-.grade1,
-.grade1b::before {
-    background-color: rgb(116, 191, 255) !important;
-}
 .grade1b {
-	background-color: rgb(116, 191, 255);
+	background-color: #7ea5ec;
 	border: #c5c5c5 2px solid !important;
 }
 
-.grade2,
-.grade2b::before {
-    background-color: rgb(226, 167, 255) !important;
-}
 .grade2b {
-	background-color: rgb(226, 167, 255);
+	background-color: #e2a7ff;
 	border: #c5c5c5 2px solid !important;
 }
 
-.grade3,
-.grade3b::before {
-    background-color: #ffa07a !important;
-}
 .grade3b {
 	background-color: #ffa07a;
 	border: #c5c5c5 2px solid !important;
 }
 
-.grade0b:hover {
+@media (min-width:1080px) {
-	background-color: rgb(160, 160, 160);
+    .grade0b:hover {
-	transition: all .4s ease 0s;
+        background-color: #868686;
-}
+        transition: all .3s ease 0s;
-.grade1b:hover {
+    }
-	background-color: rgb(159, 207, 248);
-	transition: all .4s ease 0s;
-}
-.grade2b:hover {
-	background-color: rgb(240, 212, 255);
-	transition: all .4s ease 0s;
-}
-.grade3b:hover {
-	background-color: #f7a989;
-	transition: all .4s 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: rgb(160, 160, 160);
+    background-color: #444;
-    color: #3b3b3b;
+    box-shadow: #bbb 0px 0px 10px;
+    color: #fff;
 }
 
 .grade1b.selected {
-    background-color: rgb(159, 207, 248);
+    background-color: #407dec;
-    color: #3b3b3b;
+    box-shadow: #bbb 0px 0px 10px;
+    color: #fff;
 }
 
 .grade2b.selected {
-	background-color: rgb(240, 212, 255);
+	background-color: #b362e7;
-    color: #3b3b3b;
+    box-shadow: #bbb 0px 0px 10px;
+    color: #fff;
 }
 
 .grade3b.selected {
-    background-color: #f7a989;
+    background-color: #ff7f4d;
-    color: #3b3b3b;
+    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;
 }
 
 .propinitial {
@@ -279,9 +307,9 @@ body {
 }
 
 .lifeTrajectory {
-    border: 1px lightblue solid;
+    border: 1px #a7a7a7 solid;
     border-radius: 10px;
-    background-color: aliceblue;
+    background-color: #ffffff;
 }
 
 .judge > li,
@@ -291,8 +319,8 @@ body {
     margin: 0.5rem 0;
     padding: 0.5rem 1rem 0.5rem 6rem;
     font-size: 1.4rem;
-    background-color: white;
+    background-color: #fff;
-    box-shadow: lightblue 0 0 0.4rem;
+    box-shadow: #a7a7a7 0 0 0.4rem;
     user-select: none;
 }
 
@@ -309,13 +337,14 @@ body {
     width: calc(100% - 9rem);
     margin: 0.5rem;
     padding: 0.5rem 1rem 0.5rem 7rem;
+    border-radius: 10px;
 }
 
 .judge > li > span {
-    background-color: white;
     height: calc(100% - 1rem);
     padding: 0.5rem 0;
     top: 0;
+    border-radius: 10px;
 }