4 files changed, 799 insertions, 0 deletions
diff --git a/src/client/scripts/hpml/evaluator.ts b/src/client/scripts/hpml/evaluator.ts
new file mode 100644
index 0000000000..f1fcdde0e5
--- /dev/null
+++ b/src/client/scripts/hpml/evaluator.ts
@@ -0,0 +1,349 @@
+import autobind from 'autobind-decorator';
+import * as seedrandom from 'seedrandom';
+import { Variable, PageVar, envVarsDef, funcDefs, Block, isFnBlock } from '.';
+import { version } from '../../config';
+import { AiScript, utils, values } from '@syuilo/aiscript';
+import { createAiScriptEnv } from '../create-aiscript-env';
+import { collectPageVars } from '../collect-page-vars';
+import { initLib } from './lib';
+
+type Fn = {
+	slots: string[];
+	exec: (args: Record<string, any>) => ReturnType<Hpml['evaluate']>;
+};
+
+/**
+ * Hpml evaluator
+ */
+export class Hpml {
+	private variables: Variable[];
+	private pageVars: PageVar[];
+	private envVars: Record<keyof typeof envVarsDef, any>;
+	public aiscript?: AiScript;
+	private pageVarUpdatedCallback;
+	public canvases: Record<string, HTMLCanvasElement> = {};
+	public vars: Record<string, any>;
+	public page: Record<string, any>;
+
+	private opts: {
+		randomSeed: string; visitor?: any; url?: string;
+		enableAiScript: boolean;
+	};
+
+	constructor(vm: any, page: Hpml['page'], opts: Hpml['opts']) {
+		this.page = page;
+		this.variables = this.page.variables;
+		this.pageVars = collectPageVars(this.page.content);
+		this.opts = opts;
+
+		if (this.opts.enableAiScript) {
+			this.aiscript = new AiScript({ ...createAiScriptEnv(vm, {
+				storageKey: 'pages:' + this.page.id
+			}), ...initLib(this)}, {
+				in: (q) => {
+					return new Promise(ok => {
+						vm.$root.dialog({
+							title: q,
+							input: {}
+						}).then(({ canceled, result: a }) => {
+							ok(a);
+						});
+					});
+				},
+				out: (value) => {
+					console.log(value);
+				},
+				log: (type, params) => {
+				},
+			});
+
+			this.aiscript.scope.opts.onUpdated = (name, value) => {
+				this.eval();
+			};
+		}
+
+		const date = new Date();
+
+		this.envVars = {
+			AI: 'kawaii',
+			VERSION: version,
+			URL: this.page ? `${opts.url}/@${this.page.user.username}/pages/${this.page.name}` : '',
+			LOGIN: opts.visitor != null,
+			NAME: opts.visitor ? opts.visitor.name || opts.visitor.username : '',
+			USERNAME: opts.visitor ? opts.visitor.username : '',
+			USERID: opts.visitor ? opts.visitor.id : '',
+			NOTES_COUNT: opts.visitor ? opts.visitor.notesCount : 0,
+			FOLLOWERS_COUNT: opts.visitor ? opts.visitor.followersCount : 0,
+			FOLLOWING_COUNT: opts.visitor ? opts.visitor.followingCount : 0,
+			IS_CAT: opts.visitor ? opts.visitor.isCat : false,
+			SEED: opts.randomSeed ? opts.randomSeed : '',
+			YMD: `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`,
+			AISCRIPT_DISABLED: !this.opts.enableAiScript,
+			NULL: null
+		};
+
+		this.eval();
+	}
+
+	@autobind
+	public eval() {
+		try {
+			this.vars = this.evaluateVars();
+		} catch (e) {
+			//this.onError(e);
+		}
+	}
+
+	@autobind
+	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();
+		});
+	}
+
+	@autobind
+	public callAiScript(fn: string) {
+		try {
+			if (this.aiscript) this.aiscript.execFn(this.aiscript.scope.get(fn), []);
+		} catch (e) {}
+	}
+
+	@autobind
+	public registerCanvas(id: string, canvas: any) {
+		this.canvases[id] = canvas;
+	}
+
+	@autobind
+	public updatePageVar(name: string, value: any) {
+		const pageVar = this.pageVars.find(v => v.name === name);
+		if (pageVar !== undefined) {
+			pageVar.value = value;
+			if (this.pageVarUpdatedCallback) {
+				if (this.aiscript) this.aiscript.execFn(this.pageVarUpdatedCallback, [values.STR(name), utils.jsToVal(value)]);
+			}
+		} else {
+			throw new HpmlError(`No such page var '${name}'`);
+		}
+	}
+
+	@autobind
+	public updateRandomSeed(seed: string) {
+		this.opts.randomSeed = seed;
+		this.envVars.SEED = seed;
+	}
+
+	@autobind
+	private _interpolate(str: string, scope: Scope) {
+		return str.replace(/{(.+?)}/g, match => {
+			const v = scope.getState(match.slice(1, -1).trim());
+			return v == null ? 'NULL' : v.toString();
+		});
+	}
+
+	@autobind
+	public evaluateVars(): Record<string, any> {
+		const values: Record<string, any> = {};
+
+		for (const [k, v] of Object.entries(this.envVars)) {
+			values[k] = v;
+		}
+
+		for (const v of this.pageVars) {
+			values[v.name] = v.value;
+		}
+
+		for (const v of this.variables) {
+			values[v.name] = this.evaluate(v, new Scope([values]));
+		}
+
+		return values;
+	}
+
+	@autobind
+	private evaluate(block: Block, scope: Scope): any {
+		if (block.type === null) {
+			return null;
+		}
+
+		if (block.type === 'number') {
+			return parseInt(block.value, 10);
+		}
+
+		if (block.type === 'text' || block.type === 'multiLineText') {
+			return this._interpolate(block.value || '', scope);
+		}
+
+		if (block.type === 'textList') {
+			return this._interpolate(block.value || '', scope).trim().split('\n');
+		}
+
+		if (block.type === 'ref') {
+			return scope.getState(block.value);
+		}
+
+		if (block.type === 'aiScriptVar') {
+			if (this.aiscript) {
+				try {
+					return utils.valToJs(this.aiscript.scope.get(block.value));
+				} catch (e) {
+					return null;
+				}
+			} else {
+				return null;
+			}
+		}
+
+		if (isFnBlock(block)) { // ユーザー関数定義
+			return {
+				slots: block.value.slots.map(x => x.name),
+				exec: (slotArg: Record<string, any>) => {
+					return this.evaluate(block.value.expression, scope.createChildScope(slotArg, block.id));
+				}
+			} as Fn;
+		}
+
+		if (block.type.startsWith('fn:')) { // ユーザー関数呼び出し
+			const fnName = block.type.split(':')[1];
+			const fn = scope.getState(fnName);
+			const args = {} as Record<string, any>;
+			for (let i = 0; i < fn.slots.length; i++) {
+				const name = fn.slots[i];
+				args[name] = this.evaluate(block.args[i], scope);
+			}
+			return fn.exec(args);
+		}
+
+		if (block.args === undefined) return null;
+
+		const date = new Date();
+		const day = `${this.opts.visitor ? this.opts.visitor.id : ''} ${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
+
+		const funcs: { [p in keyof typeof funcDefs]: Function } = {
+			not: (a: boolean) => !a,
+			or: (a: boolean, b: boolean) => a || b,
+			and: (a: boolean, b: boolean) => a && b,
+			eq: (a: any, b: any) => a === b,
+			notEq: (a: any, b: any) => a !== b,
+			gt: (a: number, b: number) => a > b,
+			lt: (a: number, b: number) => a < b,
+			gtEq: (a: number, b: number) => a >= b,
+			ltEq: (a: number, b: number) => a <= b,
+			if: (bool: boolean, a: any, b: any) => bool ? a : b,
+			for: (times: number, fn: Fn) => {
+				const result = [];
+				for (let i = 0; i < times; i++) {
+					result.push(fn.exec({
+						[fn.slots[0]]: i + 1
+					}));
+				}
+				return result;
+			},
+			add: (a: number, b: number) => a + b,
+			subtract: (a: number, b: number) => a - b,
+			multiply: (a: number, b: number) => a * b,
+			divide: (a: number, b: number) => a / b,
+			mod: (a: number, b: number) => a % b,
+			round: (a: number) => Math.round(a),
+			strLen: (a: string) => a.length,
+			strPick: (a: string, b: number) => a[b - 1],
+			strReplace: (a: string, b: string, c: string) => a.split(b).join(c),
+			strReverse: (a: string) => a.split('').reverse().join(''),
+			join: (texts: string[], separator: string) => texts.join(separator || ''),
+			stringToNumber: (a: string) => parseInt(a),
+			numberToString: (a: number) => a.toString(),
+			splitStrByLine: (a: string) => a.split('\n'),
+			pick: (list: any[], i: number) => list[i - 1],
+			listLen: (list: any[]) => list.length,
+			random: (probability: number) => Math.floor(seedrandom(`${this.opts.randomSeed}:${block.id}`)() * 100) < probability,
+			rannum: (min: number, max: number) => min + Math.floor(seedrandom(`${this.opts.randomSeed}:${block.id}`)() * (max - min + 1)),
+			randomPick: (list: any[]) => list[Math.floor(seedrandom(`${this.opts.randomSeed}:${block.id}`)() * list.length)],
+			dailyRandom: (probability: number) => Math.floor(seedrandom(`${day}:${block.id}`)() * 100) < probability,
+			dailyRannum: (min: number, max: number) => min + Math.floor(seedrandom(`${day}:${block.id}`)() * (max - min + 1)),
+			dailyRandomPick: (list: any[]) => list[Math.floor(seedrandom(`${day}:${block.id}`)() * list.length)],
+			seedRandom: (seed: any, probability: number) => Math.floor(seedrandom(seed)() * 100) < probability,
+			seedRannum: (seed: any, min: number, max: number) => min + Math.floor(seedrandom(seed)() * (max - min + 1)),
+			seedRandomPick: (seed: any, list: any[]) => list[Math.floor(seedrandom(seed)() * list.length)],
+			DRPWPM: (list: string[]) => {
+				const xs = [];
+				let totalFactor = 0;
+				for (const x of list) {
+					const parts = x.split(' ');
+					const factor = parseInt(parts.pop()!, 10);
+					const text = parts.join(' ');
+					totalFactor += factor;
+					xs.push({ factor, text });
+				}
+				const r = seedrandom(`${day}:${block.id}`)() * totalFactor;
+				let stackedFactor = 0;
+				for (const x of xs) {
+					if (r >= stackedFactor && r <= stackedFactor + x.factor) {
+						return x.text;
+					} else {
+						stackedFactor += x.factor;
+					}
+				}
+				return xs[0].text;
+			},
+		};
+
+		const fnName = block.type;
+		const fn = (funcs as any)[fnName];
+		if (fn == null) {
+			throw new HpmlError(`No such function '${fnName}'`);
+		} else {
+			return fn(...block.args.map(x => this.evaluate(x, scope)));
+		}
+	}
+}
+
+class HpmlError extends Error {
+	public info?: any;
+
+	constructor(message: string, info?: any) {
+		super(message);
+
+		this.info = info;
+
+		// Maintains proper stack trace for where our error was thrown (only available on V8)
+		if (Error.captureStackTrace) {
+			Error.captureStackTrace(this, HpmlError);
+		}
+	}
+}
+
+class Scope {
+	private layerdStates: Record<string, any>[];
+	public name: string;
+
+	constructor(layerdStates: Scope['layerdStates'], name?: Scope['name']) {
+		this.layerdStates = layerdStates;
+		this.name = name || 'anonymous';
+	}
+
+	@autobind
+	public createChildScope(states: Record<string, any>, name?: Scope['name']): Scope {
+		const layer = [states, ...this.layerdStates];
+		return new Scope(layer, name);
+	}
+
+	/**
+	 * 指定した名前の変数の値を取得します
+	 * @param name 変数名
+	 */
+	@autobind
+	public getState(name: string): any {
+		for (const later of this.layerdStates) {
+			const state = later[name];
+			if (state !== undefined) {
+				return state;
+			}
+		}
+
+		throw new HpmlError(
+			`No such variable '${name}' in scope '${this.name}'`, {
+				scope: this.layerdStates
+			});
+	}
+}
diff --git a/src/client/scripts/hpml/index.ts b/src/client/scripts/hpml/index.ts
new file mode 100644
index 0000000000..c87d5b9985
--- /dev/null
+++ b/src/client/scripts/hpml/index.ts
@@ -0,0 +1,139 @@
+/**
+ * Hpml
+ */
+
+import {
+	faMagic,
+	faSquareRootAlt,
+	faAlignLeft,
+	faShareAlt,
+	faPlus,
+	faMinus,
+	faTimes,
+	faDivide,
+	faList,
+	faQuoteRight,
+	faEquals,
+	faGreaterThan,
+	faLessThan,
+	faGreaterThanEqual,
+	faLessThanEqual,
+	faNotEqual,
+	faDice,
+	faSortNumericUp,
+	faExchangeAlt,
+	faRecycle,
+	faIndent,
+	faCalculator,
+} from '@fortawesome/free-solid-svg-icons';
+import { faFlag } from '@fortawesome/free-regular-svg-icons';
+
+export type Block<V = any> = {
+	id: string;
+	type: string;
+	args: Block[];
+	value: V;
+};
+
+export type FnBlock = Block<{
+	slots: {
+		name: string;
+		type: Type;
+	}[];
+	expression: Block;
+}>;
+
+export type Variable = Block & {
+	name: string;
+};
+
+export type Type = 'string' | 'number' | 'boolean' | 'stringArray' | null;
+
+export const funcDefs: Record<string, { in: any[]; out: any; category: string; icon: any; }> = {
+	if:              { in: ['boolean', 0, 0],              out: 0,             category: 'flow',       icon: faShareAlt, },
+	for:             { in: ['number', 'function'],         out: null,          category: 'flow',       icon: faRecycle, },
+	not:             { in: ['boolean'],                    out: 'boolean',     category: 'logical',    icon: faFlag, },
+	or:              { in: ['boolean', 'boolean'],         out: 'boolean',     category: 'logical',    icon: faFlag, },
+	and:             { in: ['boolean', 'boolean'],         out: 'boolean',     category: 'logical',    icon: faFlag, },
+	add:             { in: ['number', 'number'],           out: 'number',      category: 'operation',  icon: faPlus, },
+	subtract:        { in: ['number', 'number'],           out: 'number',      category: 'operation',  icon: faMinus, },
+	multiply:        { in: ['number', 'number'],           out: 'number',      category: 'operation',  icon: faTimes, },
+	divide:          { in: ['number', 'number'],           out: 'number',      category: 'operation',  icon: faDivide, },
+	mod:             { in: ['number', 'number'],           out: 'number',      category: 'operation',  icon: faDivide, },
+	round:           { in: ['number'],                     out: 'number',      category: 'operation',  icon: faCalculator, },
+	eq:              { in: [0, 0],                         out: 'boolean',     category: 'comparison', icon: faEquals, },
+	notEq:           { in: [0, 0],                         out: 'boolean',     category: 'comparison', icon: faNotEqual, },
+	gt:              { in: ['number', 'number'],           out: 'boolean',     category: 'comparison', icon: faGreaterThan, },
+	lt:              { in: ['number', 'number'],           out: 'boolean',     category: 'comparison', icon: faLessThan, },
+	gtEq:            { in: ['number', 'number'],           out: 'boolean',     category: 'comparison', icon: faGreaterThanEqual, },
+	ltEq:            { in: ['number', 'number'],           out: 'boolean',     category: 'comparison', icon: faLessThanEqual, },
+	strLen:          { in: ['string'],                     out: 'number',      category: 'text',       icon: faQuoteRight, },
+	strPick:         { in: ['string', 'number'],           out: 'string',      category: 'text',       icon: faQuoteRight, },
+	strReplace:      { in: ['string', 'string', 'string'], out: 'string',      category: 'text',       icon: faQuoteRight, },
+	strReverse:      { in: ['string'],                     out: 'string',      category: 'text',       icon: faQuoteRight, },
+	join:            { in: ['stringArray', 'string'],      out: 'string',      category: 'text',       icon: faQuoteRight, },
+	stringToNumber:  { in: ['string'],                     out: 'number',      category: 'convert',    icon: faExchangeAlt, },
+	numberToString:  { in: ['number'],                     out: 'string',      category: 'convert',    icon: faExchangeAlt, },
+	splitStrByLine:  { in: ['string'],                     out: 'stringArray', category: 'convert',    icon: faExchangeAlt, },
+	pick:            { in: [null, 'number'],               out: null,          category: 'list',       icon: faIndent, },
+	listLen:         { in: [null],                         out: 'number',      category: 'list',       icon: faIndent, },
+	rannum:          { in: ['number', 'number'],           out: 'number',      category: 'random',     icon: faDice, },
+	dailyRannum:     { in: ['number', 'number'],           out: 'number',      category: 'random',     icon: faDice, },
+	seedRannum:      { in: [null, 'number', 'number'],     out: 'number',      category: 'random',     icon: faDice, },
+	random:          { in: ['number'],                     out: 'boolean',     category: 'random',     icon: faDice, },
+	dailyRandom:     { in: ['number'],                     out: 'boolean',     category: 'random',     icon: faDice, },
+	seedRandom:      { in: [null, 'number'],               out: 'boolean',     category: 'random',     icon: faDice, },
+	randomPick:      { in: [0],                            out: 0,             category: 'random',     icon: faDice, },
+	dailyRandomPick: { in: [0],                            out: 0,             category: 'random',     icon: faDice, },
+	seedRandomPick:  { in: [null, 0],                      out: 0,             category: 'random',     icon: faDice, },
+	DRPWPM:      { in: ['stringArray'],                out: 'string',      category: 'random',     icon: faDice, }, // dailyRandomPickWithProbabilityMapping
+};
+
+export const literalDefs: Record<string, { out: any; category: string; icon: any; }> = {
+	text:          { out: 'string',      category: 'value', icon: faQuoteRight, },
+	multiLineText: { out: 'string',      category: 'value', icon: faAlignLeft, },
+	textList:      { out: 'stringArray', category: 'value', icon: faList, },
+	number:        { out: 'number',      category: 'value', icon: faSortNumericUp, },
+	ref:           { out: null,          category: 'value', icon: faMagic, },
+	aiScriptVar:   { out: null,          category: 'value', icon: faMagic, },
+	fn:            { out: 'function',    category: 'value', icon: faSquareRootAlt, },
+};
+
+export const blockDefs = [
+	...Object.entries(literalDefs).map(([k, v]) => ({
+		type: k, out: v.out, category: v.category, icon: v.icon
+	})),
+	...Object.entries(funcDefs).map(([k, v]) => ({
+		type: k, out: v.out, category: v.category, icon: v.icon
+	}))
+];
+
+export function isFnBlock(block: Block): block is FnBlock {
+	return block.type === 'fn';
+}
+
+export type PageVar = { name: string; value: any; type: Type; };
+
+export const envVarsDef: Record<string, Type> = {
+	AI: 'string',
+	URL: 'string',
+	VERSION: 'string',
+	LOGIN: 'boolean',
+	NAME: 'string',
+	USERNAME: 'string',
+	USERID: 'string',
+	NOTES_COUNT: 'number',
+	FOLLOWERS_COUNT: 'number',
+	FOLLOWING_COUNT: 'number',
+	IS_CAT: 'boolean',
+	SEED: null,
+	YMD: 'string',
+	AISCRIPT_DISABLED: 'boolean',
+	NULL: null,
+};
+
+export function isLiteralBlock(v: Block) {
+	if (v.type === null) return true;
+	if (literalDefs[v.type]) return true;
+	return false;
+}
diff --git a/src/client/scripts/hpml/lib.ts b/src/client/scripts/hpml/lib.ts
new file mode 100644
index 0000000000..9c71cfaba5
--- /dev/null
+++ b/src/client/scripts/hpml/lib.ts
@@ -0,0 +1,124 @@
+import * as tinycolor from 'tinycolor2';
+import Chart from 'chart.js';
+import { Hpml } from './evaluator';
+import { values, utils } from '@syuilo/aiscript';
+
+// https://stackoverflow.com/questions/38493564/chart-area-background-color-chartjs
+Chart.pluginService.register({
+	beforeDraw: function (chart, easing) {
+			if (chart.config.options.chartArea && chart.config.options.chartArea.backgroundColor) {
+					var ctx = chart.chart.ctx;
+					ctx.save();
+					ctx.fillStyle = chart.config.options.chartArea.backgroundColor;
+					ctx.fillRect(0, 0, chart.chart.width, chart.chart.height);
+					ctx.restore();
+			}
+	}
+});
+
+export function initLib(hpml: Hpml) {
+	return {
+		'MkPages:updated': values.FN_NATIVE(([callback]) => {
+			hpml.pageVarUpdatedCallback = callback;
+		}),
+		'MkPages:get_canvas': values.FN_NATIVE(([id]) => {
+			utils.assertString(id);
+			const canvas = hpml.canvases[id.value];
+			const ctx = canvas.getContext('2d');
+			return values.OBJ(new Map([
+				['clear_rect', values.FN_NATIVE(([x, y, width, height]) => { ctx.clearRect(x.value, y.value, width.value, height.value) })],
+				['fill_rect', values.FN_NATIVE(([x, y, width, height]) => { ctx.fillRect(x.value, y.value, width.value, height.value) })],
+				['stroke_rect', values.FN_NATIVE(([x, y, width, height]) => { ctx.strokeRect(x.value, y.value, width.value, height.value) })],
+				['fill_text', values.FN_NATIVE(([text, x, y, width]) => { ctx.fillText(text.value, x.value, y.value, width ? width.value : undefined) })],
+				['stroke_text', values.FN_NATIVE(([text, x, y, width]) => { ctx.strokeText(text.value, x.value, y.value, width ? width.value : undefined) })],
+				['set_line_width', values.FN_NATIVE(([width]) => { ctx.lineWidth = width.value })],
+				['set_font', values.FN_NATIVE(([font]) => { ctx.font = font.value })],
+				['set_fill_style', values.FN_NATIVE(([style]) => { ctx.fillStyle = style.value })],
+				['set_stroke_style', values.FN_NATIVE(([style]) => { ctx.strokeStyle = style.value })],
+				['begin_path', values.FN_NATIVE(() => { ctx.beginPath() })],
+				['close_path', values.FN_NATIVE(() => { ctx.closePath() })],
+				['move_to', values.FN_NATIVE(([x, y]) => { ctx.moveTo(x.value, y.value) })],
+				['line_to', values.FN_NATIVE(([x, y]) => { ctx.lineTo(x.value, y.value) })],
+				['arc', values.FN_NATIVE(([x, y, radius, startAngle, endAngle]) => { ctx.arc(x.value, y.value, radius.value, startAngle.value, endAngle.value) })],
+				['rect', values.FN_NATIVE(([x, y, width, height]) => { ctx.rect(x.value, y.value, width.value, height.value) })],
+				['fill', values.FN_NATIVE(() => { ctx.fill() })],
+				['stroke', values.FN_NATIVE(() => { ctx.stroke() })],
+			]));
+		}),
+		'MkPages:chart': values.FN_NATIVE(([id, opts]) => {
+			utils.assertString(id);
+			utils.assertObject(opts);
+			const canvas = hpml.canvases[id.value];
+			const color = getComputedStyle(document.documentElement).getPropertyValue('--accent');
+			Chart.defaults.global.defaultFontColor = '#555';
+			const chart = new Chart(canvas, {
+				type: opts.value.get('type').value,
+				data: {
+					labels: opts.value.get('labels').value.map(x => x.value),
+					datasets: opts.value.get('datasets').value.map(x => ({
+						label: x.value.has('label') ? x.value.get('label').value : '',
+						data: x.value.get('data').value.map(x => x.value),
+						pointRadius: 0,
+						lineTension: 0,
+						borderWidth: 2,
+						borderColor: x.value.has('color') ? x.value.get('color') : color,
+						backgroundColor: tinycolor(x.value.has('color') ? x.value.get('color') : color).setAlpha(0.1).toRgbString(),
+					}))
+				},
+				options: {
+					responsive: false,
+					devicePixelRatio: 1.5,
+					title: {
+						display: opts.value.has('title'),
+						text: opts.value.has('title') ? opts.value.get('title').value : '',
+						fontSize: 14,
+					},
+					layout: {
+						padding: {
+							left: 32,
+							right: 32,
+							top: opts.value.has('title') ? 16 : 32,
+							bottom: 16
+						}
+					},
+					legend: {
+						display: opts.value.get('datasets').value.filter(x => x.value.has('label') && x.value.get('label').value).length === 0 ? false : true,
+						position: 'bottom',
+						labels: {
+							boxWidth: 16,
+						}
+					},
+					tooltips: {
+						enabled: false,
+					},
+					chartArea: {
+						backgroundColor: '#fff'
+					},
+					...(opts.value.get('type').value === 'radar' ? {
+						scale: {
+							ticks: {
+								display: opts.value.has('show_tick_label') ? opts.value.get('show_tick_label').value : false,
+								min: opts.value.has('min') ? opts.value.get('min').value : undefined,
+								max: opts.value.has('max') ? opts.value.get('max').value : undefined,
+								maxTicksLimit: 8,
+							},
+							pointLabels: {
+								fontSize: 12
+							}
+						}
+					} : {
+						scales: {
+							yAxes: [{
+								ticks: {
+									display: opts.value.has('show_tick_label') ? opts.value.get('show_tick_label').value : true,
+									min: opts.value.has('min') ? opts.value.get('min').value : undefined,
+									max: opts.value.has('max') ? opts.value.get('max').value : undefined,
+								}
+							}]
+						}
+					})
+				}
+			});
+		})
+	};
+}
diff --git a/src/client/scripts/hpml/type-checker.ts b/src/client/scripts/hpml/type-checker.ts
new file mode 100644
index 0000000000..14950e0195
--- /dev/null
+++ b/src/client/scripts/hpml/type-checker.ts
@@ -0,0 +1,187 @@
+import autobind from 'autobind-decorator';
+import { Type, Block, funcDefs, envVarsDef, Variable, PageVar, isLiteralBlock } from '.';
+
+type TypeError = {
+	arg: number;
+	expect: Type;
+	actual: Type;
+};
+
+/**
+ * Hpml type checker
+ */
+export class HpmlTypeChecker {
+	public variables: Variable[];
+	public pageVars: PageVar[];
+
+	constructor(variables: HpmlTypeChecker['variables'] = [], pageVars: HpmlTypeChecker['pageVars'] = []) {
+		this.variables = variables;
+		this.pageVars = pageVars;
+	}
+
+	@autobind
+	public typeCheck(v: Block): TypeError | null {
+		if (isLiteralBlock(v)) return null;
+
+		const def = funcDefs[v.type];
+		if (def == null) {
+			throw new Error('Unknown type: ' + v.type);
+		}
+
+		const generic: Type[] = [];
+
+		for (let i = 0; i < def.in.length; i++) {
+			const arg = def.in[i];
+			const type = this.infer(v.args[i]);
+			if (type === null) continue;
+
+			if (typeof arg === 'number') {
+				if (generic[arg] === undefined) {
+					generic[arg] = type;
+				} else if (type !== generic[arg]) {
+					return {
+						arg: i,
+						expect: generic[arg],
+						actual: type
+					};
+				}
+			} else if (type !== arg) {
+				return {
+					arg: i,
+					expect: arg,
+					actual: type
+				};
+			}
+		}
+
+		return null;
+	}
+
+	@autobind
+	public getExpectedType(v: Block, slot: number): Type {
+		const def = funcDefs[v.type];
+		if (def == null) {
+			throw new Error('Unknown type: ' + v.type);
+		}
+
+		const generic: Type[] = [];
+
+		for (let i = 0; i < def.in.length; i++) {
+			const arg = def.in[i];
+			const type = this.infer(v.args[i]);
+			if (type === null) continue;
+
+			if (typeof arg === 'number') {
+				if (generic[arg] === undefined) {
+					generic[arg] = type;
+				}
+			}
+		}
+
+		if (typeof def.in[slot] === 'number') {
+			return generic[def.in[slot]] || null;
+		} else {
+			return def.in[slot];
+		}
+	}
+
+	@autobind
+	public infer(v: Block): Type {
+		if (v.type === null) return null;
+		if (v.type === 'text') return 'string';
+		if (v.type === 'multiLineText') return 'string';
+		if (v.type === 'textList') return 'stringArray';
+		if (v.type === 'number') return 'number';
+		if (v.type === 'ref') {
+			const variable = this.variables.find(va => va.name === v.value);
+			if (variable) {
+				return this.infer(variable);
+			}
+
+			const pageVar = this.pageVars.find(va => va.name === v.value);
+			if (pageVar) {
+				return pageVar.type;
+			}
+
+			const envVar = envVarsDef[v.value];
+			if (envVar !== undefined) {
+				return envVar;
+			}
+
+			return null;
+		}
+		if (v.type === 'aiScriptVar') return null;
+		if (v.type === 'fn') return null; // todo
+		if (v.type.startsWith('fn:')) return null; // todo
+
+		const generic: Type[] = [];
+
+		const def = funcDefs[v.type];
+
+		for (let i = 0; i < def.in.length; i++) {
+			const arg = def.in[i];
+			if (typeof arg === 'number') {
+				const type = this.infer(v.args[i]);
+
+				if (generic[arg] === undefined) {
+					generic[arg] = type;
+				} else {
+					if (type !== generic[arg]) {
+						generic[arg] = null;
+					}
+				}
+			}
+		}
+
+		if (typeof def.out === 'number') {
+			return generic[def.out];
+		} else {
+			return def.out;
+		}
+	}
+
+	@autobind
+	public getVarByName(name: string): Variable {
+		const v = this.variables.find(x => x.name === name);
+		if (v !== undefined) {
+			return v;
+		} else {
+			throw new Error(`No such variable '${name}'`);
+		}
+	}
+
+	@autobind
+	public getVarsByType(type: Type): Variable[] {
+		if (type == null) return this.variables;
+		return this.variables.filter(x => (this.infer(x) === null) || (this.infer(x) === type));
+	}
+
+	@autobind
+	public getEnvVarsByType(type: Type): string[] {
+		if (type == null) return Object.keys(envVarsDef);
+		return Object.entries(envVarsDef).filter(([k, v]) => v === null || type === v).map(([k, v]) => k);
+	}
+
+	@autobind
+	public getPageVarsByType(type: Type): string[] {
+		if (type == null) return this.pageVars.map(v => v.name);
+		return this.pageVars.filter(v => type === v.type).map(v => v.name);
+	}
+
+	@autobind
+	public isUsedName(name: string) {
+		if (this.variables.some(v => v.name === name)) {
+			return true;
+		}
+
+		if (this.pageVars.some(v => v.name === name)) {
+			return true;
+		}
+
+		if (envVarsDef[name]) {
+			return true;
+		}
+
+		return false;
+	}
+}