add summary

src/app.js

@@ -1,3 +1,5 @@
+import { max } from './functions/util.js';
+import { summary } from './functions/summary.js'
 import Life from './life.js'
 class App{
     constructor(){
@@ -9,12 +11,16 @@ class App{
     #talentSelected = new Set();
     #totalMax=20;
     #isEnd = false;
+    #selectedExtendTalent = null;
 
     async initial() {
         this.initPages();
         this.switch('loading');
         await this.#life.initial();
         this.switch('index');
+        window.onerror = (event, source, lineno, colno, error) => {
+            this.hint(`[ERROR] at (${source}:${lineno}:${colno})\n\n${error?.stack||error||'unknow Error'}`);
+        }
     }
 
     initPages() {
@@ -58,20 +64,7 @@ class App{
 
         // Talent
         const createTalent = ({ grade, name, description }) => {
-            const element = $(`<li>${name}（${description}）</li>`)
+            return $(`<li class="grade${grade}b">${name}（${description}）</li>`)
-            switch(grade) {
-                case 1:
-                    element.addClass('sprcial_blue');
-                    break;
-                case 2:
-                    element.addClass('sprcial_purple');
-                    break;
-                case 3:
-                    element.addClass('sprcial_orange');
-                    break;
-                default: break;
-            }
-            return element;
         };
 
         talentPage
@@ -86,14 +79,14 @@ class App{
                         li.click(()=>{
                             if(li.hasClass('selected')) {
                                 li.removeClass('selected')
-                                this.#talentSelected.delete(talent.id);
+                                this.#talentSelected.delete(talent);
                             } else {
                                 if(this.#talentSelected.size==3) {
                                     this.hint('只能选3个天赋');
                                     return;
                                 }
                                 li.addClass('selected');
-                                this.#talentSelected.add(talent.id);
+                                this.#talentSelected.add(talent);
                             }
                         });
                     });
@@ -106,7 +99,7 @@ class App{
                     this.hint('请选择3个天赋');
                     return;
                 }
-                this.#totalMax = 20 + this.#life.getTalentAllocationAddition(Array.from(this.#talentSelected));
+                this.#totalMax = 20 + this.#life.getTalentAllocationAddition(Array.from(this.#talentSelected).map(({id})=>id));
                 this.switch('property');
             })
 
@@ -162,6 +155,18 @@ class App{
                 set(get()+1);
             });
             btnSub.click(()=>set(get()-1));
+            inputBox.on('input', ()=>{
+                const t = total();
+                let val = get();
+                if(t > this.#totalMax) {
+                    val -= t - this.#totalMax;
+                }
+                val = limit(val);
+                if(val != inputBox.val()) {
+                    set(val);
+                }
+                freshTotal();
+            });
             return {group, get, set};
         }
 
@@ -186,9 +191,9 @@ class App{
                         const select = Math.floor(Math.random() * 4) % 4;
                         if(arr[select] - sub <0) continue;
                         arr[select] -= sub;
+                        t -= sub;
                         break;
                     }
-                    t -= sub;
                 }
                 groups.CHR.set(arr[0]);
                 groups.INT.set(arr[1]);
@@ -198,13 +203,17 @@ class App{
 
         propertyPage.find('#start')
             .click(()=>{
+                if(total()!=this.#totalMax) {
+                    this.hint(`你还有${this.#totalMax-total()}属性点没有分配完`);
+                    return;
+                }
                 this.#life.restart({
                     CHR: groups.CHR.get(),
                     INT: groups.INT.get(),
                     STR: groups.STR.get(),
                     MNY: groups.MNY.get(),
                     SPR: 5,
-                    TLT: Array.from(this.#talentSelected),
+                    TLT: Array.from(this.#talentSelected).map(({id})=>id),
                 });
                 this.switch('trajectory');
                 this.#pages.trajectory.born();
@@ -246,9 +255,35 @@ class App{
 
         trajectoryPage.find('#summary')
             .click(()=>{
-
+                this.switch('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>
+            <div class="head" style="top:auto; bottom:35%">天赋，你可以选一个，下辈子还能抽到</div>
+            <ul id="talents" class="selectlist" style="top:calc(65% + 0.5rem); bottom:8rem">
+                <li class="grade2b">黑幕（面试一定成功）</li>
+            </ul>
+            <button id="again" class="mainbtn" style="top:auto; bottom:0.1em"><span class="iconfont">&#xe6a7;</span>再次重开</button>
+        </div>
+        `);
+
+        summaryPage.find('#again')
+            .click(()=>{
+                this.times ++;
+                this.#life.talentExtend(this.#selectedExtendTalent);
+                this.switch('index');
+            });
+
         this.#pages = {
             loading: {
                 page: loadingPage,
@@ -259,28 +294,28 @@ class App{
                 btnRank: indexPage.find('#rank'),
                 btnRestart: indexPage.find('#restart'),
                 hint: indexPage.find('.hint'),
-                cnt: indexPage.find('.cnt'),
+                cnt: indexPage.find('#cnt'),
                 clear: ()=>{
                     indexPage.find('.hint').hide();
 
                     const times = this.times;
                     const btnRank = indexPage.find('#rank');
-                    const cnt = indexPage.find('.cnt');
+                    const cnt = indexPage.find('#cnt');
-                    if(times < 0) {
+                    if(times > 0) {
-                        btnRank.hide();
-                        cnt.hide();
-                        return;
-                    }
-
                         btnRank.show();
                         cnt.show();
                         cnt.text(`已重开${times}次`);
+                        return;
+                    }
+
+                    btnRank.hide();
+                    cnt.hide();
                 },
             },
             talent: {
                 page: talentPage,
                 clear: ()=>{
-                    talentPage.find('ul.selectlist').children().remove();
+                    talentPage.find('ul.selectlist').empty();
                     talentPage.find('#random').show();
                     this.#totalMax = 20;
                 },
@@ -294,7 +329,7 @@ class App{
             trajectory: {
                 page: trajectoryPage,
                 clear: ()=>{
-                    trajectoryPage.find('#lifeTrajectory').children().remove();
+                    trajectoryPage.find('#lifeTrajectory').empty();
                     trajectoryPage.find('#summary').hide();
                     this.#isEnd = false;
                 },
@@ -302,17 +337,80 @@ class App{
                     trajectoryPage.find('#lifeTrajectory').trigger("click");
                 }
             },
+            summary: {
+                page: summaryPage,
+                clear: ()=>{
+                    const judge = summaryPage.find('#judge');
+                    const talents = summaryPage.find('#talents');
+                    judge.empty();
+                    talents.empty();
+                    this.#talentSelected.forEach(talent=>{
+                        const li = createTalent(talent);
+                        talents.append(li);
+                        li.click(()=>{
+                            if(li.hasClass('selected')) {
+                                this.#selectedExtendTalent = null;
+                                li.removeClass('selected');
+                            } else if(this.#selectedExtendTalent != null) {
+                                this.hint('只能继承一个天赋');
+                                return;
+                            } else {
+                                this.#selectedExtendTalent = talent.id;
+                                li.addClass('selected');
+                            }
+                        });
+                    });
+
+                    const records = this.#life.getRecord();
+                    const s = (type, func)=>{
+                        const value = func(records.map(({[type]:v})=>v));
+                        const { judge, grade } = summary(type, value);
+                        return { judge, grade, value };
+                    };
+                    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('AGE', 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>`
+                        })(),
+                    ].join(''));
+                }
+            }
         }
     }
 
     switch(page) {
         const p = this.#pages[page];
         if(!p) return;
-        $('#main').remove();
+        $('#main').detach();
         p.clear();
         p.page.appendTo('body');
     }
 
+
+
     hint(str) {
         alert(str);
     }
@@ -323,3 +421,4 @@ class App{
 }
 
 export default App;
+

src/functions/summary.js

@@ -74,3 +74,5 @@ function summary(type, value) {
         if(min==void 0 || value >= min) return {judge, grade};
     }
 }
+
+export { summary };

src/functions/util.js

@@ -9,4 +9,23 @@ function clone(value) {
     }
 }
 
-export { clone };
+function max(...arr) {
+    return Math.max(...arr.flat());
+}
+
+function min(...arr) {
+    return Math.min(...arr.flat());
+}
+
+function sum(...arr) {
+    let s = 0;
+    arr.flat().forEach(v=>s+=v);
+    return s;
+}
+
+function average(...arr) {
+    const s = sum(...arr);
+    return s / arr.flat().length;
+}
+
+export { clone, max, min, sum, average };

src/life.js

@@ -99,7 +99,11 @@ class Life {
     }
 
     talentRandom() {
-        return this.#talent.talentRandom();
+        return this.#talent.talentRandom(localStorage.extendTalent);
+    }
+
+    talentExtend(talentId) {
+        localStorage.extendTalent = talentId;
     }
 
     getRecord() {

src/talent.js

@@ -29,17 +29,22 @@ class Talent {
         return { grade, name, description };
     }
 
-    talentRandom() {
+    talentRandom(include) {
         // 1000, 100, 10, 1
         const talentList = {};
         for(const talentId in this.#talents) {
             const { id, grade, name, description } = this.#talents[talentId];
+            if(id == include) {
+                include = { grade, name, description, id };
+                continue;
+            }
             if(!talentList[grade]) talentList[grade] = [{ grade, name, description, id }];
             else talentList[grade].push({ grade, name, description, id });
         }
 
         return new Array(10)
-            .fill(1).map(()=>{
+            .fill(1).map((i)=>{
+                if(!i && include) return include;
                 const gradeRandom = Math.random();
                 let grade;
                 if(gradeRandom>=0.111) grade = 0;

view/index.html

@@ -14,8 +14,6 @@
 <script type="module">
     import App from '../src/app.js';
     const app = new App();
-    app
+    app.initial();
-        .initial()
-        .then(()=>app.main());
 </script>
 </html>

view/style.css

@@ -125,6 +125,7 @@ html {
     text-align: center;
 }
 
+.judge,
 .lifeTrajectory,
 .propinitial,
 .selectlist {
@@ -166,16 +167,19 @@ html {
     content: "　";
 }
 
-.sprcial_blue::before {
+.grade1,
-    background-color: rgb(116, 191, 255);
+.grade1b::before {
+    background-color: rgb(116, 191, 255) !important;
 }
 
-.sprcial_purple::before {
+.grade2,
-    background-color: rgb(226, 167, 255);
+.grade2b::before {
+    background-color: rgb(226, 167, 255) !important;
 }
 
-.sprcial_orange::before {
+.grade3,
-    background-color: lightsalmon;
+.grade3b::before {
+    background-color: lightsalmon !important;
 }
 
 .selected {
@@ -220,6 +224,7 @@ html {
     background-color: aliceblue;
 }
 
+.judge > li,
 .lifeTrajectory > li {
     position: relative;
     width: calc(100% - 7rem);
@@ -230,9 +235,24 @@ html {
     box-shadow: lightblue 0 0 0.4rem;
 }
 
+.judge > li > span,
 .lifeTrajectory > li > span {
     position: absolute;
     left: 0;
     width: 6rem;
     text-align: right;
 }
+
+.judge > li {
+    box-shadow: lightgray 0 0 0.4rem;
+    width: calc(100% - 9rem);
+    margin: 0.5rem;
+    padding: 0.5rem 1rem 0.5rem 7rem;
+}
+
+.judge > li > span {
+    background-color: white;
+    height: calc(100% - 1rem);
+    padding: 0.5rem 0;
+    top: 0;
+}

view/test.html

@@ -12,20 +12,28 @@
 </head>
 <body style="margin: 0; height: 100%">
     <div id="main">
-        <ul id="lifeTrajectory" class="lifeTrajectory">
+        <div class="head">人生总结</div>
-            <li><span>0岁：</span>你出生了，你是女孩</li>
+        <ul id="judge" class="judge" style="bottom: calc(35% + 2.5rem)">
-            <li><span>0岁：</span>你出生了你出生了你出生了你出生了你出生了你出生了你出生了你出生了你出生了你出生了你出生了你出生了你出生了</li>
+            <li class="grade2"><span>颜值：</span>9级 美若天仙</li>
-            <li><span>0岁：</span>你出生了，你是女孩</li>
+            <li><span>智力：</span>4级 智力一般</li>
-            <li><span>0岁：</span>你出生了，你是女孩</li>
+            <li><span>体质：</span>1级 极度虚弱</li>
-            <li><span>0岁：</span>你出生了，你是女孩</li>
+            <li><span>家境：</span>6级 小康之家</li>
-            <li><span>0岁：</span>你出生了，你是女孩</li>
+            <li><span>享年：</span>3岁 早夭</li>
-            <li><span>0岁：</span>你出生了，你是女孩</li>
+            <li><span>快乐：</span>3级 不太幸福的人生</li>
-            <li><span>0岁：</span>你出生了，你是女孩</li>
+            <li><span>快乐：</span>3级 不太幸福的人生</li>
-            <li><span>0岁：</span>你出生了，你是女孩</li>
+            <li><span>快乐：</span>3级 不太幸福的人生</li>
-            <li><span>0岁：</span>你出生了，你是女孩</li>
+            <li><span>快乐：</span>3级 不太幸福的人生</li>
-            <li><span>0岁：</span>你出生了，你是女孩</li>
+            <li><span>快乐：</span>3级 不太幸福的人生</li>
+            <li><span>快乐：</span>3级 不太幸福的人生</li>
+            <li><span>快乐：</span>3级 不太幸福的人生</li>
+            <li><span>快乐：</span>3级 不太幸福的人生</li>
+            <li><span>快乐：</span>3级 不太幸福的人生</li>
         </ul>
-        <button id="summary" class="mainbtn" style="top:auto; bottom:0.1rem">人生总结</button>
+        <div class="head" style="top:auto; bottom:35%">天赋，你可以选一个，下辈子还能抽到</div>
+        <ul id="talents" class="selectlist" style="top:calc(65% + 0.5rem); bottom:8rem">
+            <li class="grade2b">黑幕（面试一定成功）</li>
+        </ul>
+        <button id="again" class="mainbtn" style="top:auto; bottom:0.1em"><span class="iconfont">&#xe6a7;</span>再次重开</button>
     </div>
 </body>
 </html>