mirror of
https://github.com/VickScarlet/lifeRestart.git
synced 2026-03-25 08:34:16 +08:00
add view
This commit is contained in:
Vick Scarlet
180
view/condition_test.html
Normal file
180
view/condition_test.html
Normal file
@@ -0,0 +1,180 @@
|
||||
颜值: <input class="prop" name="CHR" style="width:300px;" value="5" >(CHR)<br/>
|
||||
智力: <input class="prop" name="INT" style="width:300px;" value="5" >(INT)<br/>
|
||||
体质: <input class="prop" name="STR" style="width:300px;" value="5" >(STR)<br/>
|
||||
家境: <input class="prop" name="MNY" style="width:300px;" value="5" >(MNY)<br/>
|
||||
快乐: <input class="prop" name="SPR" style="width:300px;" value="5" >(SPR)<br/>
|
||||
生命: <input class="prop" name="LIF" style="width:300px;" value="5" >(LIF)<br/>
|
||||
天赋: <input class="prop" name="TLT" style="width:300px;" value="[5]" >(TLT)<br/>
|
||||
事件: <input class="prop" name="EVT" style="width:300px;" value="[5]" >(EVT)<br/>
|
||||
<br/><br/>
|
||||
表达式：<input id="conditions" style="width:500px;"><br/><br/>
|
||||
结果：<span id="result" style="color:red;"></span><br/><br/>
|
||||
<button id="submit"> 测 试 </button><br/>
|
||||
|
||||
<script>
|
||||
const DEFAULT_PROP = {
|
||||
CHR: 5, // 颜值 charm CHR
|
||||
INT: 5, // 智力 intelligence INT
|
||||
STR: 5, // 体质 strength STR
|
||||
MNY: 5, // 家境 money MNY
|
||||
SPR: 5, // 快乐 spirit SPR
|
||||
LIF: 5, // 生命 life LIF
|
||||
TLT: [5], // 天赋 talent TLT
|
||||
EVT: [5], // 事件 event EVT
|
||||
};
|
||||
document.querySelector("#submit").onclick = function() {
|
||||
document.querySelectorAll('.prop').forEach(({name, value})=>DEFAULT_PROP[name] = JSON.parse(value));
|
||||
conditions = document.querySelector("#conditions").value;
|
||||
const result = check(conditions);
|
||||
document.querySelector("#result").textContent = result;
|
||||
}
|
||||
|
||||
function getProp(prop) {
|
||||
switch(prop) {
|
||||
case 'CHR':
|
||||
case 'INT':
|
||||
case 'STR':
|
||||
case 'MNY':
|
||||
case 'SPR':
|
||||
case 'LIF':
|
||||
case 'TLT':
|
||||
case 'EVT': return DEFAULT_PROP[prop];
|
||||
default: return null;
|
||||
}
|
||||
}
|
||||
|
||||
function check(condition) {
|
||||
const conditions = parseCondition(condition);
|
||||
return checkParsedCondition(conditions);
|
||||
}
|
||||
|
||||
function checkParsedCondition(conditions) {
|
||||
if(!Array.isArray(conditions)) return checkLogic(conditions);
|
||||
if(conditions.length == 0) return true;
|
||||
if(conditions.length == 1) return checkParsedCondition(conditions[0]);
|
||||
|
||||
let ret = checkParsedCondition(conditions[0]);
|
||||
for(let i=1; i<conditions.length; i+=2) {
|
||||
switch(conditions[i]) {
|
||||
case '&':
|
||||
if(ret) ret = checkParsedCondition(conditions[i+1]);
|
||||
break;
|
||||
case '|':
|
||||
if(ret) return true;
|
||||
ret = checkParsedCondition(conditions[i+1]);
|
||||
break;
|
||||
default: return false;
|
||||
}
|
||||
}
|
||||
return ret;
|
||||
|
||||
}
|
||||
|
||||
function checkLogic(condition) {
|
||||
const length = condition.length;
|
||||
let i = condition.search(/[><\!\?=]/);
|
||||
|
||||
const prop = condition.substring(0,i);
|
||||
const symbol = condition.substring(i, i+=(condition[i+1]=='='?2:1));
|
||||
const d = condition.substring(i, length);
|
||||
|
||||
const propData = getProp(prop);
|
||||
const conditionData = d[0]=='['? JSON.parse(d): Number(d);
|
||||
|
||||
switch(symbol) {
|
||||
case '>': return propData > conditionData;
|
||||
case '<': return propData < conditionData;
|
||||
case '>=': return propData >= conditionData;
|
||||
case '<=': return propData <= conditionData;
|
||||
case '=':
|
||||
if(Array.isArray(propData))
|
||||
return propData.includes(conditionData);
|
||||
return propData == conditionData;
|
||||
case '!=':
|
||||
if(Array.isArray(propData))
|
||||
return !propData.includes(conditionData);
|
||||
return propData == conditionData;
|
||||
case '?':
|
||||
if(Array.isArray(propData)) {
|
||||
for(const p of propData)
|
||||
if(conditionData.includes(p)) return true;
|
||||
return false;
|
||||
}
|
||||
return conditionData.includes(propData);
|
||||
case '!':
|
||||
if(Array.isArray(propData)) {
|
||||
for(const p of propData)
|
||||
if(conditionData.includes(p)) return false;
|
||||
return true;
|
||||
}
|
||||
return !conditionData.includes(propData);
|
||||
|
||||
default: return false;
|
||||
}
|
||||
}
|
||||
|
||||
function parseCondition(condition) {
|
||||
const conditions = [];
|
||||
const length = condition.length;
|
||||
const stack = [];
|
||||
stack.unshift(conditions);
|
||||
let cursor = 0;
|
||||
const catchString = i => {
|
||||
const str = condition.substring(cursor, i).trim();
|
||||
cursor = i;
|
||||
if(str) stack[0].push(str);
|
||||
};
|
||||
|
||||
for(let i=0; i<length; i++) {
|
||||
switch(condition[i]) {
|
||||
case ' ': continue;
|
||||
|
||||
case '(':
|
||||
catchString(i);
|
||||
cursor ++;
|
||||
const sub = [];
|
||||
stack[0].push(sub);
|
||||
stack.unshift(sub);
|
||||
break;
|
||||
|
||||
case ')':
|
||||
catchString(i);
|
||||
cursor ++;
|
||||
stack.shift();
|
||||
break;
|
||||
|
||||
case '|':
|
||||
case '&':
|
||||
catchString(i);
|
||||
catchString(i+1);
|
||||
break;
|
||||
default: continue;
|
||||
}
|
||||
}
|
||||
|
||||
catchString(length);
|
||||
|
||||
return conditions;
|
||||
}
|
||||
|
||||
// function debug(...conditions) {
|
||||
// for(const condition of conditions)
|
||||
// console.debug(check(condition), '\t', condition);
|
||||
// }
|
||||
//
|
||||
// debug(
|
||||
// '(STR<2&MNY>3)|(MNY<2&CHR<2)',
|
||||
// '(STR<2&MNY>3)',
|
||||
// '(STR>2&MNY>3)',
|
||||
// '((((STR>2&MNY>2))))',
|
||||
// '((((STR>2&MNY>2)|(MNY<2&CHR<2))))',
|
||||
// '((((STR>2&MNY>2)|(MNY<2&CHR<2)&(STR>2&MNY>3))))',
|
||||
// '((((STR>2&MNY>2)|(MNY<2&CHR<2))&(STR>2&MNY>3)))',
|
||||
// 'EVT![1,2,3]',
|
||||
// 'EVT![1,2]',
|
||||
// 'EVT?[1,2,3]',
|
||||
// 'EVT?[1,2]',
|
||||
// );
|
||||
</script>
|
||||
|
||||
|
||||
BIN
view/iconfont.ttf
Normal file
BIN
view/iconfont.ttf
Normal file
Binary file not shown.
BIN
view/iconfont.woff
Normal file
BIN
view/iconfont.woff
Normal file
Binary file not shown.
BIN
view/iconfont.woff2
Normal file
BIN
view/iconfont.woff2
Normal file
Binary file not shown.
21
view/index.html
Normal file
21
view/index.html
Normal file
@@ -0,0 +1,21 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
|
||||
<script>window.json = async fileName=>(await axios(`../data/${fileName}.json`)).data;</script>
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body style="margin: 0; height: 100%"></body>
|
||||
<script type="module">
|
||||
import App from '../src/app.js';
|
||||
const app = new App();
|
||||
app
|
||||
.initial()
|
||||
.then(()=>app.main());
|
||||
</script>
|
||||
</html>
|
||||
238
view/style.css
Normal file
238
view/style.css
Normal file
@@ -0,0 +1,238 @@
|
||||
@media (min-width:640px){html{font-size:24px;}}
|
||||
@media (min-width:631px) and (max-width:639px){html{font-size:23.66px;}}
|
||||
@media (min-width:622px) and (max-width:630px){html{font-size:23.33px;}}
|
||||
@media (min-width:613px) and (max-width:621px){html{font-size:23px;}}
|
||||
@media (min-width:604px) and (max-width:612px){html{font-size:22.66px;}}
|
||||
@media (min-width:595px) and (max-width:603px){html{font-size:22.33px;}}
|
||||
@media (min-width:586px) and (max-width:594px){html{font-size:22px;}}
|
||||
@media (min-width:577px) and (max-width:585px){html{font-size:21.66px;}}
|
||||
@media (min-width:568px) and (max-width:576px){html{font-size:21.33px;}}
|
||||
@media (min-width:559px) and (max-width:567px){html{font-size:21px;}}
|
||||
@media (min-width:550px) and (max-width:558px){html{font-size:20.66px;}}
|
||||
@media (min-width:541px) and (max-width:549px){html{font-size:20.33px;}}
|
||||
@media (min-width:533px) and (max-width:540px){html{font-size:20px;}}
|
||||
@media (min-width:524px) and (max-width:532px){html{font-size:19.66px;}}
|
||||
@media (min-width:515px) and (max-width:523px){html{font-size:19.33px;}}
|
||||
@media (min-width:506px) and (max-width:514px){html{font-size:19px;}}
|
||||
@media (min-width:497px) and (max-width:505px){html{font-size:18.66px;}}
|
||||
@media (min-width:488px) and (max-width:496px){html{font-size:18.33px;}}
|
||||
@media (min-width:480px) and (max-width:487px){html{font-size:18px;}}
|
||||
@media (min-width:471px) and (max-width:479px){html{font-size:17.66px;}}
|
||||
@media (min-width:462px) and (max-width:470px){html{font-size:17.33px;}}
|
||||
@media (min-width:453px) and (max-width:461px){html{font-size:17px;}}
|
||||
@media (min-width:444px) and (max-width:452px){html{font-size:17.12px;}}
|
||||
@media (min-width:435px) and (max-width:443px){html{font-size:16.33px;}}
|
||||
@media (min-width:426px) and (max-width:434px){html{font-size:16px;}}
|
||||
@media (min-width:417px) and (max-width:425px){html{font-size:15.66px;}}
|
||||
@media (min-width:408px) and (max-width:416px){html{font-size:15.33px;}}
|
||||
@media (min-width:400px) and (max-width:407px){html{font-size:15px;}}
|
||||
@media (min-width:391px) and (max-width:399px){html{font-size:14.66px;}}
|
||||
@media (min-width:382px) and (max-width:390px){html{font-size:14.33px;}}
|
||||
@media (min-width:374px) and (max-width:381px){html{font-size:14px;}}
|
||||
@media (min-width:365px) and (max-width:373px){html{font-size:13.66px;}}
|
||||
@media (min-width:356px) and (max-width:364px){html{font-size:13.33px;}}
|
||||
@media (min-width:347px) and (max-width:355px){html{font-size:13px;}}
|
||||
@media (min-width:338px) and (max-width:346px){html{font-size:12.66px;}}
|
||||
@media (min-width:329px) and (max-width:337px){html{font-size:12.44px;}}
|
||||
@media (max-width:328px){html{font-size:12px;}}
|
||||
|
||||
@font-face {
|
||||
font-family: 'iconfont';
|
||||
src: url('iconfont.woff2?t=1628944689555') format('woff2'),
|
||||
url('iconfont.woff?t=1628944689555') format('woff'),
|
||||
url('iconfont.ttf?t=1628944689555') format('truetype');
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: PingFangSC, 'Noto Sans CJK SC', 'MS Yahei';
|
||||
}
|
||||
|
||||
#main {
|
||||
align-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#title {
|
||||
position: fixed;
|
||||
font-size: 3rem;
|
||||
font-weight: 700;
|
||||
top: 35%;
|
||||
left: 50%;
|
||||
white-space: nowrap;
|
||||
transform: translate(-50%,-50%);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mainbtn {
|
||||
position: fixed;
|
||||
top: 65%;
|
||||
left: 50%;
|
||||
padding: 0.8rem 1rem;
|
||||
border: 1px #ccc solid;
|
||||
border-radius: 0.2rem;
|
||||
background-color:white;
|
||||
font-size: 1.6rem;
|
||||
white-space: nowrap;
|
||||
transform: translate(-50%,-50%);
|
||||
cursor: pointer;
|
||||
z-index:2;
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-family: "iconfont" !important;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
#rank {
|
||||
position: fixed;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
padding: 0.1rem 1rem;
|
||||
border: none;
|
||||
border-radius: 0.2rem;
|
||||
background-color:lightsteelblue;
|
||||
font-size: 1.4rem;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
z-index:2;
|
||||
}
|
||||
|
||||
.hint {
|
||||
position: fixed;
|
||||
bottom: 2rem;
|
||||
left: 50%;
|
||||
padding: 0.3rem 2rem;
|
||||
border: none;
|
||||
border-radius: 0.2rem;
|
||||
background-color:gray;
|
||||
font-size: 1.4rem;
|
||||
color: white;
|
||||
white-space: nowrap;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.head {
|
||||
position: fixed;
|
||||
font-size: 1.4rem;
|
||||
top: 1.1rem;
|
||||
left: 50%;
|
||||
white-space: nowrap;
|
||||
transform: translateX(-50%);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.lifeTrajectory,
|
||||
.propinitial,
|
||||
.selectlist {
|
||||
position: fixed;
|
||||
list-style-type: none;
|
||||
left: 50%;
|
||||
top: 5rem;
|
||||
bottom: 8.5rem;
|
||||
width: 30rem;
|
||||
max-width: calc(100% - 2rem);
|
||||
margin: auto;
|
||||
padding: 0;
|
||||
overflow: auto;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.selectlist > li {
|
||||
position: relative;
|
||||
border: 1px #ccc solid;
|
||||
display: inline-block;
|
||||
width: 95%;
|
||||
margin: 0.1rem auto;
|
||||
font-size: 1.4rem;
|
||||
text-align: center;
|
||||
border-radius: 0.2rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.selectlist > li::before {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
left: 0;
|
||||
top: 0;
|
||||
border-radius: 0.2rem 0 0 0.2rem;
|
||||
margin: -1px;
|
||||
padding: 1px;
|
||||
height: 100%;
|
||||
width: 1.5rem;
|
||||
content: " ";
|
||||
}
|
||||
|
||||
.sprcial_blue::before {
|
||||
background-color: rgb(116, 191, 255);
|
||||
}
|
||||
|
||||
.sprcial_purple::before {
|
||||
background-color: rgb(226, 167, 255);
|
||||
}
|
||||
|
||||
.sprcial_orange::before {
|
||||
background-color: lightsalmon;
|
||||
}
|
||||
|
||||
.selected {
|
||||
background-color: gray;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.propinitial {
|
||||
top: 6rem;
|
||||
bottom: 14rem;
|
||||
}
|
||||
|
||||
.propinitial > li {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 95%;
|
||||
margin: 0.1rem auto;
|
||||
font-size: 1.4rem;
|
||||
text-align: center;
|
||||
border-radius: 0.2rem;
|
||||
padding: 0.2rem;
|
||||
}
|
||||
|
||||
.propinitial > li > input {
|
||||
height: 2.2rem;
|
||||
width: 2.2rem;
|
||||
margin: 0 0.5rem;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
font-size: 2rem;
|
||||
border: 0.1rem #ccc solid;
|
||||
}
|
||||
|
||||
.propbtn {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.lifeTrajectory {
|
||||
border: 1px lightblue solid;
|
||||
background-color: aliceblue;
|
||||
}
|
||||
|
||||
.lifeTrajectory > li {
|
||||
position: relative;
|
||||
width: calc(100% - 7rem);
|
||||
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;
|
||||
}
|
||||
|
||||
.lifeTrajectory > li > span {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 6rem;
|
||||
text-align: right;
|
||||
}
|
||||
31
view/test.html
Normal file
31
view/test.html
Normal file
@@ -0,0 +1,31 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
|
||||
<script>window.json = async fileName=>(await axios(`../data/${fileName}.json`)).data;</script>
|
||||
<title>Document</title>
|
||||
</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>
|
||||
</ul>
|
||||
<button id="summary" class="mainbtn" style="top:auto; bottom:0.1rem">人生总结</button>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user