From 2ee0e07bb6346d29bc5e57ec8aac348143e2d50f Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Mon, 20 Apr 2020 21:35:27 +0900
Subject: refactor(client): :sparkles:

---
 src/client/components/page/page.block.vue          |  4 +-
 src/client/components/page/page.button.vue         | 20 +++---
 src/client/components/page/page.canvas.vue         |  4 +-
 src/client/components/page/page.counter.vue        |  8 +--
 src/client/components/page/page.if.vue             |  4 +-
 src/client/components/page/page.number-input.vue   |  8 +--
 src/client/components/page/page.post.vue           | 10 +--
 src/client/components/page/page.radio-button.vue   |  8 +--
 src/client/components/page/page.section.vue        |  4 +-
 src/client/components/page/page.switch.vue         |  8 +--
 src/client/components/page/page.text-input.vue     |  8 +--
 src/client/components/page/page.text.vue           |  8 +--
 src/client/components/page/page.textarea-input.vue |  8 +--
 src/client/components/page/page.textarea.vue       |  8 +--
 src/client/components/page/page.vue                | 76 ++++------------------
 15 files changed, 67 insertions(+), 119 deletions(-)

(limited to 'src/client/components/page')

diff --git a/src/client/components/page/page.block.vue b/src/client/components/page/page.block.vue
index 04bbb0b858..0a4b068b63 100644
--- a/src/client/components/page/page.block.vue
+++ b/src/client/components/page/page.block.vue
@@ -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: {
diff --git a/src/client/components/page/page.button.vue b/src/client/components/page/page.button.vue
index 148fdc8e9c..83753b4e80 100644
--- a/src/client/components/page/page.button.vue
+++ b/src/client/components/page/page.button.vue
@@ -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);
 			}
 		}
 	}
diff --git a/src/client/components/page/page.canvas.vue b/src/client/components/page/page.canvas.vue
index a0f424bf60..2d7cc1f8f9 100644
--- a/src/client/components/page/page.canvas.vue
+++ b/src/client/components/page/page.canvas.vue
@@ -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>
diff --git a/src/client/components/page/page.counter.vue b/src/client/components/page/page.counter.vue
index f7557c003a..a3674b87a2 100644
--- a/src/client/components/page/page.counter.vue
+++ b/src/client/components/page/page.counter.vue
@@ -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: {
diff --git a/src/client/components/page/page.if.vue b/src/client/components/page/page.if.vue
index a714a522e8..d73153bcd1 100644
--- a/src/client/components/page/page.if.vue
+++ b/src/client/components/page/page.if.vue
@@ -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: {
diff --git a/src/client/components/page/page.number-input.vue b/src/client/components/page/page.number-input.vue
index 9ea1ebb642..56899b1b20 100644
--- a/src/client/components/page/page.number-input.vue
+++ b/src/client/components/page/page.number-input.vue
@@ -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();
 		}
 	}
 });
diff --git a/src/client/components/page/page.post.vue b/src/client/components/page/page.post.vue
index 80e0f70cb2..9942a68d55 100644
--- a/src/client/components/page/page.post.vue
+++ b/src/client/components/page/page.post.vue
@@ -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);
diff --git a/src/client/components/page/page.radio-button.vue b/src/client/components/page/page.radio-button.vue
index dd5cbcbded..99d9ead385 100644
--- a/src/client/components/page/page.radio-button.vue
+++ b/src/client/components/page/page.radio-button.vue
@@ -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();
 		}
 	}
 });
diff --git a/src/client/components/page/page.section.vue b/src/client/components/page/page.section.vue
index b83c773f71..c9758a0dbe 100644
--- a/src/client/components/page/page.section.vue
+++ b/src/client/components/page/page.section.vue
@@ -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: {
diff --git a/src/client/components/page/page.switch.vue b/src/client/components/page/page.switch.vue
index 79d871df8f..9f04ad19c4 100644
--- a/src/client/components/page/page.switch.vue
+++ b/src/client/components/page/page.switch.vue
@@ -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();
 		}
 	}
 });
diff --git a/src/client/components/page/page.text-input.vue b/src/client/components/page/page.text-input.vue
index 843d541de6..0d09f9fb5e 100644
--- a/src/client/components/page/page.text-input.vue
+++ b/src/client/components/page/page.text-input.vue
@@ -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();
 		}
 	}
 });
diff --git a/src/client/components/page/page.text.vue b/src/client/components/page/page.text.vue
index aeab31225e..66e2acb90a 100644
--- a/src/client/components/page/page.text.vue
+++ b/src/client/components/page/page.text.vue
@@ -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
 		}
diff --git a/src/client/components/page/page.textarea-input.vue b/src/client/components/page/page.textarea-input.vue
index 5ba22e7c58..5e0cc43779 100644
--- a/src/client/components/page/page.textarea-input.vue
+++ b/src/client/components/page/page.textarea-input.vue
@@ -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();
 		}
 	}
 });
diff --git a/src/client/components/page/page.textarea.vue b/src/client/components/page/page.textarea.vue
index 78b74dd64c..abb30d78ee 100644
--- a/src/client/components/page/page.textarea.vue
+++ b/src/client/components/page/page.textarea.vue
@@ -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
 		}
diff --git a/src/client/components/page/page.vue b/src/client/components/page/page.vue
index 99cc6e67e5..e3b04d7fd6 100644
--- a/src/client/components/page/page.vue
+++ b/src/client/components/page/page.vue
@@ -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>
 
-- 
cgit v1.2.3-freya