sim1222/nca10.net
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

refactor(client): ✨

Browse Source
This commit is contained in:
syuilo
2020-04-20 21:35:27 +09:00
parent 533c9a4fe1
commit 2ee0e07bb6
25 changed files with 285 additions and 293 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/client/components/page/page.block.vue
View File

@ -1,5 +1,5 @@
<template>
<component :is="'x-' + value.type" :value="value" :page="page" :script="script" :key="value.id" :h="h"/>
<component :is="'x-' + value.type" :value="value" :page="page" :hpml="hpml" :key="value.id" :h="h"/>
</template>
<script lang="ts">
@ -27,7 +27,7 @@ export default Vue.extend({
value: {
required: true
},
script: {
hpml: {
required: true
},
page: {

20
src/client/components/page/page.button.vue
View File

@ -1,6 +1,6 @@
<template>
<div>
<mk-button class="kudkigyw" @click="click()" :primary="value.primary">{{ script.interpolate(value.text) }}</mk-button>
<mk-button class="kudkigyw" @click="click()" :primary="value.primary">{{ hpml.interpolate(value.text) }}</mk-button>
</div>
</template>
@ -16,35 +16,35 @@ export default Vue.extend({
value: {
required: true
},
script: {
hpml: {
required: true
}
},
methods: {
click() {
if (this.value.action === 'dialog') {
this.script.eval();
this.hpml.eval();
this.$root.dialog({
text: this.script.interpolate(this.value.content)
text: this.hpml.interpolate(this.value.content)
});
} else if (this.value.action === 'resetRandom') {
this.script.aoiScript.updateRandomSeed(Math.random());
this.script.eval();
this.hpml.updateRandomSeed(Math.random());
this.hpml.eval();
} else if (this.value.action === 'pushEvent') {
this.$root.api('page-push', {
pageId: this.script.page.id,
pageId: this.hpml.page.id,
event: this.value.event,
...(this.value.var ? {
var: this.script.vars[this.value.var]
var: this.hpml.vars[this.value.var]
} : {})
});
this.$root.dialog({
type: 'success',
text: this.script.interpolate(this.value.message)
text: this.hpml.interpolate(this.value.message)
});
} else if (this.value.action === 'callAiScript') {
this.script.callAiScript(this.value.fn);
this.hpml.callAiScript(this.value.fn);
}
}
}

4
src/client/components/page/page.canvas.vue
View File

@ -12,12 +12,12 @@ export default Vue.extend({
value: {
required: true
},
script: {
hpml: {
required: true
}
},
mounted() {
this.script.aoiScript.registerCanvas(this.value.name, this.$refs.canvas);
this.hpml.registerCanvas(this.value.name, this.$refs.canvas);
}
});
</script>

8
src/client/components/page/page.counter.vue
View File

@ -1,6 +1,6 @@
<template>
<div>
<mk-button class="llumlmnx" @click="click()">{{ script.interpolate(value.text) }}</mk-button>
<mk-button class="llumlmnx" @click="click()">{{ hpml.interpolate(value.text) }}</mk-button>
</div>
</template>
@ -16,7 +16,7 @@ export default Vue.extend({
value: {
required: true
},
script: {
hpml: {
required: true
}
},
@ -27,8 +27,8 @@ export default Vue.extend({
},
watch: {
v() {
this.script.aoiScript.updatePageVar(this.value.name, this.v);
this.script.eval();
this.hpml.updatePageVar(this.value.name, this.v);
this.hpml.eval();
}
},
methods: {

4
src/client/components/page/page.if.vue
View File

@ -1,6 +1,6 @@
<template>
<div v-show="script.vars[value.var]">
<x-block v-for="child in value.children" :value="child" :page="page" :script="script" :key="child.id" :h="h"/>
<x-block v-for="child in value.children" :value="child" :page="page" :hpml="hpml" :key="child.id" :h="h"/>
</div>
</template>
@ -12,7 +12,7 @@ export default Vue.extend({
value: {
required: true
},
script: {
hpml: {
required: true
},
page: {

8
src/client/components/page/page.number-input.vue
View File

@ -1,6 +1,6 @@
<template>
<div>
<mk-input class="kudkigyw" v-model="v" type="number">{{ script.interpolate(value.text) }}</mk-input>
<mk-input class="kudkigyw" v-model="v" type="number">{{ hpml.interpolate(value.text) }}</mk-input>
</div>
</template>
@ -16,7 +16,7 @@ export default Vue.extend({
value: {
required: true
},
script: {
hpml: {
required: true
}
},
@ -27,8 +27,8 @@ export default Vue.extend({
},
watch: {
v() {
this.script.aoiScript.updatePageVar(this.value.name, this.v);
this.script.eval();
this.hpml.updatePageVar(this.value.name, this.v);
this.hpml.eval();
}
}
});

10
src/client/components/page/page.post.vue
View File

@ -23,22 +23,22 @@ export default Vue.extend({
value: {
required: true
},
script: {
hpml: {
required: true
}
},
data() {
return {
text: this.script.interpolate(this.value.text),
text: this.hpml.interpolate(this.value.text),
posted: false,
posting: false,
faCheck, faPaperPlane
};
},
watch: {
'script.vars': {
'hpml.vars': {
handler() {
this.text = this.script.interpolate(this.value.text);
this.text = this.hpml.interpolate(this.value.text);
},
deep: true
}
@ -53,7 +53,7 @@ export default Vue.extend({
showCancelButton: false,
cancelableByBgClick: false
});
const canvas = this.script.aoiScript.canvases[this.value.canvasId];
const canvas = this.hpml.canvases[this.value.canvasId];
canvas.toBlob(blob => {
const data = new FormData();
data.append('file', blob);

8
src/client/components/page/page.radio-button.vue
View File

@ -1,6 +1,6 @@
<template>
<div>
<div>{{ script.interpolate(value.title) }}</div>
<div>{{ hpml.interpolate(value.title) }}</div>
<mk-radio v-for="x in value.values" v-model="v" :value="x" :key="x">{{ x }}</mk-radio>
</div>
</template>
@ -17,7 +17,7 @@ export default Vue.extend({
value: {
required: true
},
script: {
hpml: {
required: true
}
},
@ -28,8 +28,8 @@ export default Vue.extend({
},
watch: {
v() {
this.script.aoiScript.updatePageVar(this.value.name, this.v);
this.script.eval();
this.hpml.updatePageVar(this.value.name, this.v);
this.hpml.eval();
}
}
});

4
src/client/components/page/page.section.vue
View File

@ -3,7 +3,7 @@
<component :is="'h' + h">{{ value.title }}</component>
<div class="children">
<x-block v-for="child in value.children" :value="child" :page="page" :script="script" :key="child.id" :h="h + 1"/>
<x-block v-for="child in value.children" :value="child" :page="page" :hpml="hpml" :key="child.id" :h="h + 1"/>
</div>
</section>
</template>
@ -16,7 +16,7 @@ export default Vue.extend({
value: {
required: true
},
script: {
hpml: {
required: true
},
page: {

8
src/client/components/page/page.switch.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="hkcxmtwj">
<mk-switch v-model="v">{{ script.interpolate(value.text) }}</mk-switch>
<mk-switch v-model="v">{{ hpml.interpolate(value.text) }}</mk-switch>
</div>
</template>
@ -16,7 +16,7 @@ export default Vue.extend({
value: {
required: true
},
script: {
hpml: {
required: true
}
},
@ -27,8 +27,8 @@ export default Vue.extend({
},
watch: {
v() {
this.script.aoiScript.updatePageVar(this.value.name, this.v);
this.script.eval();
this.hpml.updatePageVar(this.value.name, this.v);
this.hpml.eval();
}
}
});

8
src/client/components/page/page.text-input.vue
View File

@ -1,6 +1,6 @@
<template>
<div>
<mk-input class="kudkigyw" v-model="v" type="text">{{ script.interpolate(value.text) }}</mk-input>
<mk-input class="kudkigyw" v-model="v" type="text">{{ hpml.interpolate(value.text) }}</mk-input>
</div>
</template>
@ -16,7 +16,7 @@ export default Vue.extend({
value: {
required: true
},
script: {
hpml: {
required: true
}
},
@ -27,8 +27,8 @@ export default Vue.extend({
},
watch: {
v() {
this.script.aoiScript.updatePageVar(this.value.name, this.v);
this.script.eval();
this.hpml.updatePageVar(this.value.name, this.v);
this.hpml.eval();
}
}
});

8
src/client/components/page/page.text.vue
View File

@ -15,13 +15,13 @@ export default Vue.extend({
value: {
required: true
},
script: {
hpml: {
required: true
}
},
data() {
return {
text: this.script.interpolate(this.value.text),
text: this.hpml.interpolate(this.value.text),
};
},
computed: {
@ -38,9 +38,9 @@ export default Vue.extend({
}
},
watch: {
'script.vars': {
'hpml.vars': {
handler() {
this.text = this.script.interpolate(this.value.text);
this.text = this.hpml.interpolate(this.value.text);
},
deep: true
}

8
src/client/components/page/page.textarea-input.vue
View File

@ -1,6 +1,6 @@
<template>
<div>
<mk-textarea v-model="v">{{ script.interpolate(value.text) }}</mk-textarea>
<mk-textarea v-model="v">{{ hpml.interpolate(value.text) }}</mk-textarea>
</div>
</template>
@ -16,7 +16,7 @@ export default Vue.extend({
value: {
required: true
},
script: {
hpml: {
required: true
}
},
@ -27,8 +27,8 @@ export default Vue.extend({
},
watch: {
v() {
this.script.aoiScript.updatePageVar(this.value.name, this.v);
this.script.eval();
this.hpml.updatePageVar(this.value.name, this.v);
this.hpml.eval();
}
}
});

8
src/client/components/page/page.textarea.vue
View File

@ -14,19 +14,19 @@ export default Vue.extend({
value: {
required: true
},
script: {
hpml: {
required: true
}
},
data() {
return {
text: this.script.interpolate(this.value.text),
text: this.hpml.interpolate(this.value.text),
};
},
watch: {
'script.vars': {
'hpml.vars': {
handler() {
this.text = this.script.interpolate(this.value.text);
this.text = this.hpml.interpolate(this.value.text);
},
deep: true
}

76
src/client/components/page/page.vue
View File

@ -1,56 +1,19 @@
<template>
<div class="iroscrza" :class="{ center: page.alignCenter, serif: page.font === 'serif' }" v-if="script">
<x-block v-for="child in page.content" :value="child" @input="v => updateBlock(v)" :page="page" :script="script" :key="child.id" :h="2"/>
<div class="iroscrza" :class="{ center: page.alignCenter, serif: page.font === 'serif' }" v-if="hpml">
<x-block v-for="child in page.content" :value="child" @input="v => updateBlock(v)" :page="page" :hpml="hpml" :key="child.id" :h="2"/>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import { AiScript, parse, values } from '@syuilo/aiscript';
import { parse } from '@syuilo/aiscript';
import { faHeart as faHeartS } from '@fortawesome/free-solid-svg-icons';
import { faHeart } from '@fortawesome/free-regular-svg-icons';
import i18n from '../../i18n';
import XBlock from './page.block.vue';
import { ASEvaluator } from '../../scripts/aoiscript/evaluator';
import { collectPageVars } from '../../scripts/collect-page-vars';
import { Hpml } from '../../scripts/hpml/evaluator';
import { url } from '../../config';
class Script {
public aoiScript: ASEvaluator;
private onError: any;
public vars: Record<string, any>;
public page: Record<string, any>;
constructor(page, aoiScript, onError) {
this.page = page;
this.aoiScript = aoiScript;
this.onError = onError;
this.eval();
}
public eval() {
try {
this.vars = this.aoiScript.evaluateVars();
} catch (e) {
this.onError(e);
}
}
public interpolate(str: string) {
if (str == null) return null;
return str.replace(/{(.+?)}/g, match => {
const v = this.vars ? this.vars[match.slice(1, -1).trim()] : null;
return v == null ? 'NULL' : v.toString();
});
}
public callAiScript(fn: string) {
try {
if (this.aoiScript.aiscript) this.aoiScript.aiscript.execFn(this.aoiScript.aiscript.scope.get(fn), []);
} catch (e) {}
}
}
export default Vue.extend({
i18n,
@ -67,35 +30,26 @@ export default Vue.extend({
data() {
return {
script: null,
hpml: null,
faHeartS, faHeart
};
},
created() {
const pageVars = this.getPageVars();
this.script = new Script(this.page, new ASEvaluator(this, this.page.variables, pageVars, {
this.hpml = new Hpml(this, this.page, {
randomSeed: Math.random(),
visitor: this.$store.state.i,
page: this.page,
url: url,
enableAiScript: !this.$store.state.device.disablePagesScript
}), e => {
console.dir(e);
});
if (this.script.aoiScript.aiscript) this.script.aoiScript.aiscript.scope.opts.onUpdated = (name, value) => {
this.script.eval();
};
},
mounted() {
this.$nextTick(() => {
if (this.script.page.script && this.script.aoiScript.aiscript) {
if (this.page.script && this.hpml.aiscript) {
let ast;
try {
ast = parse(this.script.page.script);
ast = parse(this.page.script);
} catch (e) {
console.error(e);
/*this.$root.dialog({
@ -104,8 +58,8 @@ export default Vue.extend({
});*/
return;
}
this.script.aoiScript.aiscript.exec(ast).then(() => {
this.script.eval();
this.hpml.aiscript.exec(ast).then(() => {
this.hpml.eval();
}).catch(e => {
console.error(e);
/*this.$root.dialog({
@ -114,20 +68,14 @@ export default Vue.extend({
});*/
});
} else {
this.script.eval();
this.hpml.eval();
}
});
},
beforeDestroy() {
if (this.script.aoiScript.aiscript) this.script.aoiScript.aiscript.abort();
if (this.hpml.aiscript) this.hpml.aiscript.abort();
},
methods: {
getPageVars() {
return collectPageVars(this.page.content);
},
}
});
</script>