mirror of
https://github.com/VickScarlet/lifeRestart.git
synced 2026-03-24 21:37:40 +08:00
add summary
This commit is contained in:
163
src/app.js
163
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>`)
|
||||
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;
|
||||
return $(`<li class="grade${grade}b">${name}(${description})</li>`)
|
||||
};
|
||||
|
||||
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"></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');
|
||||
if(times < 0) {
|
||||
btnRank.hide();
|
||||
cnt.hide();
|
||||
const cnt = indexPage.find('#cnt');
|
||||
if(times > 0) {
|
||||
btnRank.show();
|
||||
cnt.show();
|
||||
cnt.text(`已重开${times}次`);
|
||||
return;
|
||||
}
|
||||
|
||||
btnRank.show();
|
||||
cnt.show();
|
||||
cnt.text(`已重开${times}次`);
|
||||
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);
|
||||
}
|
||||
@@ -322,4 +420,5 @@ class App{
|
||||
|
||||
}
|
||||
|
||||
export default App;
|
||||
export default App;
|
||||
|
||||
|
||||
@@ -73,4 +73,6 @@ function summary(type, value) {
|
||||
const {min, judge, grade} = data[type][length];
|
||||
if(min==void 0 || value >= min) return {judge, grade};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export { summary };
|
||||
@@ -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 };
|
||||
@@ -99,7 +99,11 @@ class Life {
|
||||
}
|
||||
|
||||
talentRandom() {
|
||||
return this.#talent.talentRandom();
|
||||
return this.#talent.talentRandom(localStorage.extendTalent);
|
||||
}
|
||||
|
||||
talentExtend(talentId) {
|
||||
localStorage.extendTalent = talentId;
|
||||
}
|
||||
|
||||
getRecord() {
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -14,8 +14,6 @@
|
||||
<script type="module">
|
||||
import App from '../src/app.js';
|
||||
const app = new App();
|
||||
app
|
||||
.initial()
|
||||
.then(()=>app.main());
|
||||
app.initial();
|
||||
</script>
|
||||
</html>
|
||||
@@ -125,6 +125,7 @@ html {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.judge,
|
||||
.lifeTrajectory,
|
||||
.propinitial,
|
||||
.selectlist {
|
||||
@@ -166,16 +167,19 @@ html {
|
||||
content: " ";
|
||||
}
|
||||
|
||||
.sprcial_blue::before {
|
||||
background-color: rgb(116, 191, 255);
|
||||
.grade1,
|
||||
.grade1b::before {
|
||||
background-color: rgb(116, 191, 255) !important;
|
||||
}
|
||||
|
||||
.sprcial_purple::before {
|
||||
background-color: rgb(226, 167, 255);
|
||||
.grade2,
|
||||
.grade2b::before {
|
||||
background-color: rgb(226, 167, 255) !important;
|
||||
}
|
||||
|
||||
.sprcial_orange::before {
|
||||
background-color: lightsalmon;
|
||||
.grade3,
|
||||
.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;
|
||||
}
|
||||
@@ -12,20 +12,28 @@
|
||||
</head>
|
||||
<body style="margin: 0; height: 100%">
|
||||
<div id="main">
|
||||
<ul id="lifeTrajectory" class="lifeTrajectory">
|
||||
<li><span>0岁:</span>你出生了,你是女孩</li>
|
||||
<li><span>0岁:</span>你出生了你出生了你出生了你出生了你出生了你出生了你出生了你出生了你出生了你出生了你出生了你出生了你出生了</li>
|
||||
<li><span>0岁:</span>你出生了,你是女孩</li>
|
||||
<li><span>0岁:</span>你出生了,你是女孩</li>
|
||||
<li><span>0岁:</span>你出生了,你是女孩</li>
|
||||
<li><span>0岁:</span>你出生了,你是女孩</li>
|
||||
<li><span>0岁:</span>你出生了,你是女孩</li>
|
||||
<li><span>0岁:</span>你出生了,你是女孩</li>
|
||||
<li><span>0岁:</span>你出生了,你是女孩</li>
|
||||
<li><span>0岁:</span>你出生了,你是女孩</li>
|
||||
<li><span>0岁:</span>你出生了,你是女孩</li>
|
||||
<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>
|
||||
<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>
|
||||
<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"></span>再次重开</button>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user