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

Update app.js
2026-03-25 08:34:16 +08:00 · 2021-09-06 03:53:48 +08:00 · 2021-09-06 03:52:26 +08:00 · 2021-09-06 03:52:26 +08:00 · 2021-09-06 03:52:26 +08:00 · 2021-09-06 01:27:42 +08:00
8 changed files with 354 additions and 143 deletions
--- a/README-zh_CN.md
+++ b/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/)。
--- a/README.md
+++ b/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/)。
--- a/repl/app.js
+++ b/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
-        /exit       exit
+    /exit           退出            /exit

    r
    remake
-        /remake     remake
+    /remake         重开            /remake

    s
    select
-        /select     select
+    /select         选择天赋        /select <id1> [id2] [id3]

    u
    unselect
-        /unselect   unselect
+    /unselect       取消选择        /unselect <id1> [id2] [id3]
+
+    a
+    alloc
+    allocation
+    /alloc
+    /allocation     分配属性点      /allocation <TAG> <[+/-]value>

    n
    next
-        /next       next
+    /next           继续            /next

+    at
    auto
-        /auto       auto play
+    /auto           自动播放        /auto

    ?
    h
    help
    /?
    /h
-        /help       show this message`;
+    /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 []
-🎉 剩余点数 ${this.less()}
+        return `🎉属性分配
+剩余点数 ${this.less()}

 属性(TAG)       当前值
 颜值(CHR)         ${CHR}
--- a/src/app.js
+++ b/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>`);
                }
            });

--- a/src/life.js
+++ b/src/life.js
@@ -15,10 +15,11 @@ class Life {
    #triggerTalents;

    async initial() {
-        const age = await json('age');
-        const talents = await json('talents');
-        const events = await json('events');
-
+        const [age, talents, events] = await Promise.all([
+          json('age'),
+          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);
    }
--- a/src/property.js
+++ b/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)
--- a/view/dark.css
+++ b/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;
-}
-
-.grade1b,
-.grade2b,
-.grade3b {
-  padding-left: 1.5rem;
-  box-sizing: border-box;
+    user-select: none;
 }

 .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,
-.grade2b,
-.grade3b {
-  padding-left: 1.5rem;
-  box-sizing: border-box;
-}
-
+@media (min-width:1080px) {
    .grade0b:hover {
-	background-color: rgb(202, 202, 202);
+    	background-color: #c0c0c0;
        color: #3b3b3b;
-	transition: all .4s ease 0s;
+    	transition: all .3s ease 0s;
    }
    .grade1b:hover {
-	background-color: rgb(159, 207, 248);
+    	background-color: #87cefa;
        color: #3b3b3b;
-	transition: all .4s ease 0s;
+    	transition: all .3s ease 0s;
    }
    .grade2b:hover {
-	background-color: rgb(240, 212, 255);
+    	background-color: #e7beff;
        color: #3b3b3b;
-	transition: all .4s ease 0s;
+    	transition: all .3s ease 0s;
    }
    .grade3b:hover {
    	background-color: #f7a989;
        color: #3b3b3b;
-	transition: all .4s ease 0s;
+    	transition: all .3s 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;
 }


--- a/view/light.css
+++ b/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;
 }

+@media (min-width:1080px) {
    .grade0b:hover {
-	background-color: rgb(160, 160, 160);
-	transition: all .4s 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;
+        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: rgb(160, 160, 160);
-    color: #3b3b3b;
+    background-color: #444;
+    box-shadow: #bbb 0px 0px 10px;
+    color: #fff;
 }

 .grade1b.selected {
-    background-color: rgb(159, 207, 248);
-    color: #3b3b3b;
+    background-color: #407dec;
+    box-shadow: #bbb 0px 0px 10px;
+    color: #fff;
 }

 .grade2b.selected {
-	background-color: rgb(240, 212, 255);
-    color: #3b3b3b;
+	background-color: #b362e7;
+    box-shadow: #bbb 0px 0px 10px;
+    color: #fff;
 }

 .grade3b.selected {
-    background-color: #f7a989;
-    color: #3b3b3b;
+    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;
 }

 .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;
-    box-shadow: lightblue 0 0 0.4rem;
+    background-color: #fff;
+    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;
 }
Author	SHA1	Message	Date
Chen Yun	eff286199f	在人生活动界面增加实时更新的数值	2021-09-06 03:53:48 +08:00
infinityedge	175f9f869f	Update app.js	2021-09-06 03:52:26 +08:00
infinityedge	43d621324a	Update app.js	2021-09-06 03:52:26 +08:00
infinityedge	d60d8bab51	Update app.js	2021-09-06 03:52:26 +08:00
神戸小鳥	b849b6bf7e	Merge pull request #133 from RomEYer-AwELF/master 调整样式（已经合并了先前修改）	2021-09-06 01:27:42 +08:00
zhangenming	1cf073bc51	use Promise.all for concurrency	2021-09-06 01:19:43 +08:00
Vick Scarlet	d86f2330d5	fix repl bug	2021-09-05 23:32:17 +08:00
Vick Scarlet	ee461384b2	update readme	2021-09-05 22:53:06 +08:00
Vick Scarlet	6928367884	update help	2021-09-05 22:44:04 +08:00
RomEYer-AwELF	156ef662f4	合并修改	2021-09-05 12:25:26 +08:00
RomEYer-AwELF	16bda15111	Merge remote-tracking branch 'origin/master' into master # Conflicts: # view/light.css	2021-09-05 12:18:12 +08:00
RomEYer-AwELF	6789db0997	调整样式	2021-09-05 12:17:05 +08:00
RomEYer-AwELF	22794d3f71	调整样式	2021-09-05 10:16:02 +08:00