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

src/app.js

@@ -267,6 +267,7 @@ class App{
         // 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>
@@ -297,6 +298,16 @@ class App{
                     $(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

@@ -111,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

@@ -157,6 +157,31 @@ body {
     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 {
     position: relative;
     border: 1px #EEEEEE solid;

view/light.css

@@ -153,6 +153,31 @@ body {
     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 {
     position: relative;
     border: 1px #ccc solid;