Squashed commit of the following:

commit b421082374
Author: Vick Scarlet <scarlet_vick@outlook.com>
Date:   Fri Dec 31 20:26:20 2021 +0800

    update specialthanks

commit 765a69294b
Author: Vick Scarlet <scarlet_vick@outlook.com>
Date:   Tue Dec 14 19:10:03 2021 +0800

    fix ios goto

commit 8eb8c3ca72
Author: Vick Scarlet <scarlet_vick@outlook.com>
Date:   Tue Dec 14 19:03:37 2021 +0800

    add event grade

commit ab705dd46c
Author: Vick Scarlet <scarlet_vick@outlook.com>
Date:   Tue Dec 14 18:48:42 2021 +0800

    build version

commit a1e4232369
Author: Vick Scarlet <scarlet_vick@outlook.com>
Date:   Tue Dec 14 18:47:05 2021 +0800

    change talent replace before property allocate

commit f4d7b3ae3c
Author: Vick Scarlet <scarlet_vick@outlook.com>
Date:   Tue Dec 14 18:06:18 2021 +0800

    add event grade

commit 0567e40ddc
Author: Vick Scarlet <scarlet_vick@outlook.com>
Date:   Thu Dec 2 21:28:10 2021 +0800

    add particle

commit f17003925e
Author: Vick Scarlet <scarlet_vick@outlook.com>
Date:   Thu Dec 2 20:14:26 2021 +0800

    change ui

commit f8beda1d8f
Author: Vick Scarlet <scarlet_vick@outlook.com>
Date:   Thu Dec 2 19:08:30 2021 +0800

    change popup message ui

commit 915a2aa17d
Author: Vick Scarlet <scarlet_vick@outlook.com>
Date:   Thu Dec 2 18:34:29 2021 +0800

    new build

commit b5edabc104
Author: Vick Scarlet <scarlet_vick@outlook.com>
Date:   Thu Dec 2 18:18:46 2021 +0800

    add hint message

commit a143feadaf
Author: Vick Scarlet <scarlet_vick@outlook.com>
Date:   Thu Dec 2 17:57:31 2021 +0800

    fix copy bug

commit eab1975791
Author: Vick Scarlet <scarlet_vick@outlook.com>
Date:   Thu Dec 2 17:56:28 2021 +0800

    add save/load

commit acf9b92134
Author: Vick Scarlet <scarlet_vick@outlook.com>
Date:   Thu Dec 2 14:35:33 2021 +0800

    add theme switch

commit 488a6054ab
Author: Vick Scarlet <scarlet_vick@outlook.com>
Date:   Wed Dec 1 18:30:36 2021 +0800

    fix uiManager bug

commit f0317eaf14
Author: Vick Scarlet <scarlet_vick@outlook.com>
Date:   Wed Dec 1 16:07:03 2021 +0800

    add message popup

commit eb02d1ee6f
Author: Vick Scarlet <scarlet_vick@outlook.com>
Date:   Sun Nov 28 21:22:54 2021 +0800

    change relocation

commit 60503eae47
Author: Vick Scarlet <scarlet_vick@outlook.com>
Date:   Sun Nov 28 19:27:16 2021 +0800

    change ScaleButton -> Laya.runtime.ScaleButton

commit 52ef5909c1
Author: Vick Scarlet <scarlet_vick@outlook.com>
Date:   Sun Nov 28 19:26:31 2021 +0800

    change ScaleButton -> Laya.runtime.ScaleButton

commit 0284f6aa71
Author: Vick Scarlet <scarlet_vick@outlook.com>
Date:   Sun Nov 28 19:05:24 2021 +0800

    config webpack

commit 0e272ffd99
Author: Vick Scarlet <scarlet_vick@outlook.com>
Date:   Sun Nov 28 13:17:41 2021 +0800

    add thanks

commit e1e2ab4701
Author: Vick Scarlet <scarlet_vick@outlook.com>
Date:   Sun Nov 28 11:40:21 2021 +0800

    add light theme

commit 4f55c00f86
Author: Vick Scarlet <scarlet_vick@outlook.com>
Date:   Sat Nov 27 22:27:39 2021 +0800

    fix bug

commit 1d07bdfc46
Author: Vick Scarlet <scarlet_vick@outlook.com>
Date:   Sat Nov 27 21:48:47 2021 +0800

    daily update

commit 52d6a0ca8f
Author: Vick Scarlet <scarlet_vick@outlook.com>
Date:   Wed Nov 24 23:10:04 2021 +0800

    daily update

commit f8dd720d4d
Author: Vick Scarlet <scarlet_vick@outlook.com>
Date:   Wed Nov 24 19:08:13 2021 +0800

    daily update

commit d088c1a862
Author: Vick Scarlet <scarlet_vick@outlook.com>
Date:   Sun Nov 21 21:41:46 2021 +0800

    remove useless

commit a711fcf3ed
Author: Vick Scarlet <scarlet_vick@outlook.com>
Date:   Tue Nov 16 00:53:05 2021 +0800

    add achievement popup
    add page adaptive
    add talent extends

commit 05e02de3db
Author: Vick Scarlet <scarlet_vick@outlook.com>
Date:   Sat Nov 13 01:24:04 2021 +0800

    add github and discord

commit bff0109cc5
Author: Vick Scarlet <scarlet_vick@outlook.com>
Date:   Sat Nov 13 00:30:01 2021 +0800

    add trajectory auto mode

commit 54c04f65c2
Author: Vick Scarlet <scarlet_vick@outlook.com>
Date:   Fri Nov 12 19:54:31 2021 +0800

    fix property judge negative number bug

commit 660739530b
Author: Vick Scarlet <scarlet_vick@outlook.com>
Date:   Fri Nov 12 19:48:58 2021 +0800

    update achievement

commit c94e9e7433
Author: Vick Scarlet <scarlet_vick@outlook.com>
Date:   Thu Nov 11 21:37:45 2021 +0800

    update daily

commit c06cd9ea62
Author: Vick Scarlet <scarlet_vick@outlook.com>
Date:   Tue Nov 9 00:08:05 2021 +0800

    update daily

commit 2666983f89
Author: Vick Scarlet <scarlet_vick@outlook.com>
Date:   Sun Nov 7 23:00:22 2021 +0800

    add uiManager auto scan and load skin resource

commit 22fa5d755a
Author: Vick Scarlet <scarlet_vick@outlook.com>
Date:   Sun Nov 7 22:17:04 2021 +0800

    update framework

commit f40698d63e
Author: Vick Scarlet <scarlet_vick@outlook.com>
Date:   Sun Oct 31 00:13:22 2021 +0800

    add laya

src/ui/runtime.js

@@ -0,0 +1,537 @@
+const runtime =
+Laya.runtime = {};
+
+runtime.ColorFilterItem =
+class ColorFilterItem extends Laya.Image {
+    constructor() {
+        super();
+    }
+
+    #hexToRgba = (hex) => {
+        const rgba = [];
+        hex = hex.replace('#', '');
+        hex = hex.match(new RegExp('(.{2})(.{2})(.{2})(.{2})', 'i'));
+        hex.forEach((item, index) => {
+            rgba[index] = parseInt(item, 16);
+        });
+        rgba.shift();
+        return rgba;
+    }
+
+    #rgbaToMatrix = (rgba) => {
+        let matrix = [
+            0, 0, 0, 0, 0,
+            0, 0, 0, 0, 0,
+            0, 0, 0, 0, 0,
+            0, 0, 0, 0, 0
+        ];
+        matrix[0] = rgba[0] / 255;
+        matrix[6] = rgba[1] / 255;
+        matrix[12] = rgba[2] / 255;
+        matrix[18] = rgba[3] / 255;
+        return matrix;
+    }
+
+    get colorFilter() {
+        return this._colorFilter;
+    }
+    set colorFilter(value) {
+        this._colorFilter = value;
+        if(value) {
+            const rgba = this.#hexToRgba(this.colorFilter);
+            const matrix = this.#rgbaToMatrix(rgba);
+            const colorFilter = new Laya.ColorFilter(matrix);
+            this.filters = [colorFilter];
+        } else {
+            this.filters = [];
+        }
+    }
+}
+runtime.UIBase =
+class UIBase extends Laya.View {
+    constructor() {
+        super();
+    }
+}
+
+runtime.ViewBase =
+class ViewBase extends runtime.UIBase {
+    constructor() {
+        super();
+    }
+}
+
+runtime.DialogBase =
+class DialogBase extends runtime.UIBase {
+    constructor() {
+        super();
+    }
+}
+
+runtime.ScaleButton =
+class ScaleButton extends Laya.Button {
+    constructor() {
+        super();
+        this.on(Laya.Event.MOUSE_DOWN, this, this.onMouse, [Laya.Event.MOUSE_DOWN]);
+        this.on(Laya.Event.MOUSE_OUT, this, this.onMouse, [Laya.Event.MOUSE_OUT]);
+        this.on(Laya.Event.MOUSE_UP, this, this.onMouse, [Laya.Event.MOUSE_UP]);
+    }
+
+    onMouse(type) {
+        Laya.Tween.clearAll(this);
+        switch (type) {
+            case Laya.Event.MOUSE_DOWN:
+                Laya.Tween.to(this, { scaleX: 0.9, scaleY: 0.9 }, 100);
+                break;
+            case Laya.Event.MOUSE_OUT:
+            case Laya.Event.MOUSE_UP:
+                Laya.Tween.to(this, { scaleX: 1, scaleY: 1 }, 100);
+                break;
+            default:
+                break;
+        }
+    }
+}
+
+runtime.RGBAItem =
+class RGBAItem {
+    constructor(config={}) {
+        for(const key in config)
+            switch(key) {
+                case 'r':
+                case 'g':
+                case 'b':
+                case 'a':
+                case 'hex':
+                case 'hexa':
+                case 'rgb':
+                case 'rgba':
+                    this[key] = config[key];
+                    break;
+                case 'on':
+                    this.on(config[key]);
+                    break;
+                default:
+                    break;
+            }
+    }
+
+    #r;
+    #g;
+    #b;
+    #a;
+    #on = new Set();
+
+    on(fn) {
+        this.#on.add(fn);
+    }
+
+    off(fn) {
+        this.#on.delete(fn);
+    }
+
+    clear() {
+        this.#on.clear();
+    }
+
+    #event() {
+        this.#on.forEach(fn => fn(this));
+    }
+
+    #rgb(v) {
+        return [
+            this.#dec(v.slice(1, 3)),
+            this.#dec(v.slice(3, 5)),
+            this.#dec(v.slice(5, 7)),
+        ];
+    }
+
+    #rgba(v) {
+        return [
+            this.#dec(v.slice(1, 3)),
+            this.#dec(v.slice(3, 5)),
+            this.#dec(v.slice(5, 7)),
+            this.#dec(v.slice(7, 9)),
+        ];
+    }
+
+    #hex(v) {
+        v = parseInt(v).toString(16);
+        return v.length == 1 ? '0' + v : v;
+    }
+
+    #dec(v) {
+        return parseInt(v, 16);
+    }
+
+    get hex() {
+        return `#${
+            this.#hex(this.r)
+        }${
+            this.#hex(this.g)
+        }${
+            this.#hex(this.b)
+        }`;
+    }
+    set hex(v) {
+        [this.#r, this.#g, this.#b] = this.#rgb(v);
+        this.#event();
+    }
+
+    get hexa() {
+        return `#${
+            this.#hex(this.r)
+        }${
+            this.#hex(this.g)
+        }${
+            this.#hex(this.b)
+        }${
+            this.#hex(this.a)
+        }`;
+    }
+    set hexa(v) {
+        [this.#r, this.#g, this.#b] = this.#rgba(v);
+        this.#event();
+    }
+
+    get rgb() {
+        return [this.r, this.g, this.b];
+    }
+    set rgb(v) {
+        [this.#r, this.#g, this.#b] = v;
+        this.#event();
+    }
+
+    get rgba() {
+        return [this.r, this.g, this.b, this.a];
+    }
+    set rgba(v) {
+        [this.#r, this.#g, this.#b, this.#a] = v;
+        this.#event();
+    }
+
+
+    get r() {
+        return this.#r||0;
+    }
+    set r(value) {
+        this.#r = value;
+        this.#event();
+    }
+    get g() {
+        return this.#g||0;
+    }
+    set g(value) {
+        this.#g = value;
+        this.#event();
+    }
+    get b() {
+        return this.#b||0;
+    }
+    set b(value) {
+        this.#b = value;
+        this.#event();
+    }
+    get a() {
+        return this.#a||0;
+    }
+    set a(value) {
+        this.#a = value;
+        this.#event();
+    }
+
+    cRgb(hex) {
+        const [r, g, b] = this.#rgb(hex);
+        return {r, g, b};
+    }
+
+    cRgba(hexa) {
+        const [r, g, b, a] = this.#rgba(hexa);
+        return {r, g, b, a};
+    }
+
+    distance(left, right) {
+        const [lr, lg, lb] = this.#rgb(left);
+        const [rr, rg, rb] = this.#rgb(right);
+        const {r, g, b} = this;
+
+        const ddr = Math.abs(r - lr);
+        const ddg = Math.abs(g - lg);
+        const ddb = Math.abs(b - lb);
+
+        const result = (d, a, b) => ((d / Math.abs(b - a)) || 0);
+
+        switch(Math.max(ddr, ddg, ddb)) {
+            case ddr: return result(ddr, lr, rr);
+            case ddg: return result(ddg, lg, rg);
+            case ddb: return result(ddb, lb, rb);
+            default: return 1;
+        }
+    }
+}
+runtime.ColorfulBox =
+class ColorfulBox extends Laya.Box {
+    constructor() {
+        super();
+        this.on(Laya.Event.MOUSE_OVER, this, this.onMouse, [Laya.Event.MOUSE_DOWN]);
+        // this.on(Laya.Event.MOUSE_DOWN, this, this.onMouse, [Laya.Event.MOUSE_DOWN]);
+        this.on(Laya.Event.MOUSE_OUT, this, this.onMouse, [Laya.Event.MOUSE_OUT]);
+        // this.on(Laya.Event.MOUSE_UP, this, this.onMouse, [Laya.Event.MOUSE_UP]);
+        this.#draw();
+    }
+
+    #defaultColor = '#ffffff';
+    #hoverColor = '#ffffff';
+    #defaultStroke = '#ffffff';
+    #hoverStroke = '#ffffff';
+    #defaultLabel = '#000000';
+    #hoverLabel = '#000000';
+    #color = new runtime.RGBAItem({hex: this.#defaultColor, on: ()=>this.#draw()});
+    #stroke = new runtime.RGBAItem({hex: this.#defaultStroke, on: ()=>this.#draw()});
+    #label = new runtime.RGBAItem({hex: this.#defaultLabel, on: ({hex})=>{
+        const label = this.getChildByName('label');
+        if (!label) return;
+        label.color = hex;
+    }});
+    #lineWidth = 0;
+    #radius = 0;
+    #animationTime = 200;
+    #state = 1;
+
+    onMouse(type) {
+        const label = this.getChildByName('label');
+        const tween = (colorItem, target, last) => {
+            Laya.Tween.clearAll(colorItem);
+            const distance = colorItem.distance(target, last);
+            if(!isFinite(distance)) {
+                colorItem.hex = target;
+                return;
+            }
+            Laya.Tween.to(colorItem, colorItem.cRgb(target), colorItem.distance(target, last) * this.#animationTime);
+        }
+        switch (type) {
+            case Laya.Event.MOUSE_OVER:
+            case Laya.Event.MOUSE_DOWN:
+                if(this.#state == 2) return;
+                this.#state = 2;
+                tween(this.#color, this.#hoverColor, this.#defaultColor);
+                tween(this.#stroke, this.#hoverStroke, this.#defaultStroke);
+                if(label) tween(this.#label, this.#hoverLabel, this.#defaultLabel);
+                break;
+            case Laya.Event.MOUSE_OUT:
+            case Laya.Event.MOUSE_UP:
+                if(this.#state == 1) return;
+                this.#state = 1;
+                tween(this.#color, this.#defaultColor, this.#hoverColor);
+                tween(this.#stroke, this.#defaultStroke, this.#hoverStroke);
+                if(label) tween(this.#label, this.#defaultLabel, this.#hoverLabel);
+                break;
+            default:
+                break;
+        }
+    }
+
+    #draw() {
+        this.graphics.clear();
+        const w = this.width;
+        const h = this.height;
+        const r = Math.min(this.#radius, w / 2, h / 2);
+        const fillStyle = this.#color.hex;
+        const strokeStyle = this.#stroke.hex;
+        const lineWidth = this.lineWidth;
+
+        if(r <= 0) {
+            this.graphics.drawRect(0, 0, w, h, fillStyle, strokeStyle, lineWidth);
+            return;
+        }
+
+        const a = w + lineWidth;
+        const b = h + lineWidth;
+        const c = r + lineWidth;
+        const d = a - r;
+        const e = b - r;
+        const f = -lineWidth;
+
+        this.graphics.drawPath(0, 0, [
+            ["moveTo", c, f],
+            ["arcTo",  a, f, a, c, c],
+            ["arcTo",  a, b, d, b, c],
+            ["arcTo",  f, b, f, e, c],
+            ["arcTo",  f, f, c, f, c],
+            ["closePath"],
+        ], { fillStyle: strokeStyle });
+
+        const x = w - r;
+        const y = h - r;
+        this.graphics.drawPath(0, 0, [
+            ["moveTo", r, 0],
+            ["arcTo",  w, 0, w, r, r],
+            ["arcTo",  w, h, x, h, r],
+            ["arcTo",  0, h, 0, y, r],
+            ["arcTo",  0, 0, r, 0, r],
+            ["closePath"],
+        ], { fillStyle });
+    }
+
+    get width() {
+        return super.width;
+    }
+    set width(value) {
+        super.width = value;
+        this.#draw();
+    }
+    get height() {
+        return super.height;
+    }
+    set height(value) {
+        super.height = value;
+        this.#draw();
+    }
+
+    get defaultColor() {
+        return this.#defaultColor;
+    }
+    set defaultColor(value) {
+        this.#defaultColor = value;
+        Laya.Tween.clearAll(this.#color);
+        Laya.Tween.clearAll(this.#stroke);
+        Laya.Tween.clearAll(this.#label);
+        this.#color.hex = value;
+    }
+
+    get hoverColor() {
+        return this.#hoverColor;
+    }
+    set hoverColor(value) {
+        this.#hoverColor = value;
+    }
+
+    get defaultStroke() {
+        return this.#defaultStroke;
+    }
+    set defaultStroke(value) {
+        this.#defaultStroke = value;
+        Laya.Tween.clearAll(this.#color);
+        Laya.Tween.clearAll(this.#stroke);
+        Laya.Tween.clearAll(this.#label);
+        this.#stroke.hex = value;
+    }
+
+    get hoverStroke() {
+        return this.#hoverStroke;
+    }
+    set hoverStroke(value) {
+        this.#hoverStroke = value;
+    }
+
+    get defaultLabel() {
+        return this.#defaultLabel;
+    }
+    set defaultLabel(value) {
+        this.#defaultLabel = value;
+        const label = this.getChildByName('label');
+        if (!label) return;
+        Laya.Tween.clearAll(this.#color);
+        Laya.Tween.clearAll(this.#stroke);
+        Laya.Tween.clearAll(this.#label);
+        label.color = value;
+    }
+
+    get hoverLabel() {
+        return this.#hoverLabel;
+    }
+    set hoverLabel(value) {
+        this.#hoverLabel = value;
+    }
+
+    get animationTime() {
+        return this.#animationTime;
+    }
+    set animationTime(value) {
+        this.#animationTime = value;
+    }
+
+    get radius() {
+        return this.#radius||0;
+    }
+    set radius(value) {
+        this.#radius = value;
+        this.#draw();
+    }
+
+    get lineWidth() {
+        return this.#lineWidth||0;
+    }
+    set lineWidth(value) {
+        this.#lineWidth = value;
+        this.#draw();
+    }
+    get label() {
+        return this.getChildByName('label')?.text;
+    }
+    set label(value) {
+        const label = this.getChildByName('label');
+        if (!label) return;
+        label.text = value;
+    }
+
+}
+
+runtime.BlankBox =
+class BlankBox extends Laya.Box {
+    constructor() {
+        super();
+        this.mask = new Laya.Sprite();
+        this.#blank = new Laya.Sprite();
+        this.addChild(this.#blank);
+    }
+
+    #blank;
+    #timeLine;
+    #pause = true;
+
+    #draw() {
+        this.mask.graphics.clear();
+        this.#blank.graphics.clear();
+        this.mask.graphics.drawRect(0, 0, this.width, this.height, '#000000');
+        this.#blank.graphics.drawRect(0, 0, this.width, this.height, '#000000');
+        if(this.#timeLine) this.#timeLine.destroy();
+        this.#timeLine = new Laya.TimeLine()
+            .to(this.#blank, { x: this.width }, 2000)
+            .to(this.#blank, { x: -this.width }, 0);
+        this.#timeLine.play(0, true);
+        if(this.#pause) this.#timeLine.pause();
+    }
+    get pause() {
+        return this.#pause;
+    }
+    set pause(value) {
+        if(this.#pause == value) return;
+        this.#pause = value;
+        this.#blank.visible = !value;
+        if(value) this.#timeLine.pause();
+        else this.#timeLine.resume();
+    }
+
+    destroy(destroyChild) {
+        this.#timeLine.destroy(true);
+        super.destroy(destroyChild);
+    }
+
+    get width() {
+        return super.width;
+    }
+    set width(value) {
+        super.width = value;
+        this.#blank.x = -this.width;
+        this.#draw();
+    }
+
+    get height() {
+        return super.height;
+    }
+    set height(value) {
+        super.height = value;
+        this.#draw();
+    }
+}