update daily

src/ui/pluginFunction.js

@@ -0,0 +1,24 @@
+var plugin = {};
+
+plugin.extractComponents = function(uiView, componentNames) {
+    const components = {};
+    const deepSearch = (uiView, componentNames) => {
+        if(!uiView.child) return;
+        for(let i = uiView.child.length - 1; i >= 0; i--) {
+            const child = uiView.child[i];
+            if(componentNames.includes(child?.props.name)) {
+                components[child.props.name] = child;
+                uiView.child.splice(i, 1);
+                continue;
+            }
+            deepSearch(child, componentNames, components);
+        }
+    };
+    deepSearch(uiView, componentNames);
+    return componentName => {
+        if(components[componentName]) {
+            return Laya.View.createComp(components[componentName]);
+        }
+        return null;
+    }
+}

src/ui/runtime.js

@@ -1,3 +1,68 @@
+
+
+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 = [];
+        }
+    }
+}
+class UIBase extends Laya.View {
+    constructor() {
+        super();
+    }
+}
+
+class ViewBase extends UIBase {
+    constructor() {
+        super();
+    }
+}
+
+class dialogBase extends UIBase {
+    constructor() {
+        super();
+    }
+}
+
 class ScaleButton extends Laya.Button {
     constructor() {
         super();
@@ -19,4 +84,5 @@ class ScaleButton extends Laya.Button {
                 break;
         }
     }
-}
+}
+

src/ui/themes/cyber/cyberAchievement.js

@@ -0,0 +1,5 @@
+export default class cyberAchievement extends CyberAchievementUI {
+    constructor() {
+        super();
+    }
+}

src/ui/themes/cyber/cyberMain.js

@@ -0,0 +1,8 @@
+export default class cyberMain extends CyberMainUI {
+    constructor() {
+        super();
+        this.btnRemake.on(Laya.Event.CLICK, this, ()=>UIManager.getInstance().switchView(UIManager.getInstance().themes.TALENT));
+        this.btnAchievement.on(Laya.Event.CLICK, this, ()=>UIManager.getInstance().switchView(UIManager.getInstance().themes.ACHIEVEMENT));
+        this.btnThanks.on(Laya.Event.CLICK, this, ()=>UIManager.getInstance().switchView(UIManager.getInstance().themes.THANKS));
+    }
+}

src/ui/themes/cyber/cyberProperty.js

@@ -0,0 +1,244 @@
+export default class cyberProperty extends CyberPropertyUI {
+    constructor() {
+        super();
+
+        const types =
+        this.#types = core.PropertyTypes;
+
+        this.btnCharmIncrease.on(Laya.Event.CLICK, this, this.onPropertyAllocate, [types.CHR, 1]);
+        this.btnCharmReduce.on(Laya.Event.CLICK, this, this.onPropertyAllocate, [types.CHR, -1]);
+
+        this.btnIntelligenceIncrease.on(Laya.Event.CLICK, this, this.onPropertyAllocate, [types.INT, 1]);
+        this.btnIntelligenceReduce.on(Laya.Event.CLICK, this, this.onPropertyAllocate, [types.INT, -1]);
+
+        this.btnStrengthIncrease.on(Laya.Event.CLICK, this, this.onPropertyAllocate, [types.STR, 1]);
+        this.btnStrengthReduce.on(Laya.Event.CLICK, this, this.onPropertyAllocate, [types.STR, -1]);
+
+        this.btnMoneyIncrease.on(Laya.Event.CLICK, this, this.onPropertyAllocate, [types.MNY, 1]);
+        this.btnMoneyReduce.on(Laya.Event.CLICK, this, this.onPropertyAllocate, [types.MNY, -1]);
+
+        this.inputCharm.on(Laya.Event.INPUT, this, this.onPropertyAllocateInput, [types.CHR]);
+        this.inputIntelligence.on(Laya.Event.INPUT, this, this.onPropertyAllocateInput, [types.INT]);
+        this.inputStrength.on(Laya.Event.INPUT, this, this.onPropertyAllocateInput, [types.STR]);
+        this.inputMoney.on(Laya.Event.INPUT, this, this.onPropertyAllocateInput, [types.MNY]);
+
+        const selectAll = ({currentTarget: item}) => { item.text=''; };
+        this.inputCharm.on(Laya.Event.MOUSE_DOWN, this, selectAll);
+        this.inputIntelligence.on(Laya.Event.MOUSE_DOWN, this, selectAll);
+        this.inputStrength.on(Laya.Event.MOUSE_DOWN, this, selectAll);
+        this.inputMoney.on(Laya.Event.MOUSE_DOWN, this, selectAll);
+
+        this.btnRandomAllocate.on(Laya.Event.CLICK, this, this.random);
+        this.btnNext.on(Laya.Event.CLICK, this, this.next);
+
+        this.listSelectedTalents.renderHandler = Laya.Handler.create(this, this.renderTalent, null, false);
+    }
+
+    #types;
+    #propertyPoints;
+    #propertyAllocate;
+    #propertyAllocateLimit;
+
+    init({talents}) {
+        this.listSelectedTalents.array = talents;
+        const talentIds = talents.map(talent => talent.id);
+        // core.talentReplace(talentIds);
+        this.#propertyPoints = core.getPropertyPoints(talentIds);
+        this.#propertyAllocateLimit = core.propertyAllocateLimit;
+        this.labLeftPropertyPoint.text = this.#propertyPoints;
+        this.#propertyAllocate = {
+            [this.#types.CHR]: 0,
+            [this.#types.INT]: 0,
+            [this.#types.STR]: 0,
+            [this.#types.MNY]: 0,
+            [this.#types.TLT]: talentIds,
+        }
+        this.updateAllocate();
+    }
+
+    next() {
+        if (this.total < this.#propertyPoints) {
+            return;
+        }
+        UIManager.getInstance().switchView(
+            UIManager.getInstance().themes.TRAJECTORY,
+            {
+                propertyAllocate: this.#propertyAllocate,
+                talents: this.listSelectedTalents.array,
+            }
+        );
+    }
+
+    get total() {
+        return this.#propertyAllocate[this.#types.CHR]
+            +  this.#propertyAllocate[this.#types.INT]
+            +  this.#propertyAllocate[this.#types.STR]
+            +  this.#propertyAllocate[this.#types.MNY];
+    }
+
+    updateAllocate() {
+        const charm = this.#propertyAllocate[this.#types.CHR];
+        const intelligence = this.#propertyAllocate[this.#types.INT];
+        const strength = this.#propertyAllocate[this.#types.STR];
+        const money = this.#propertyAllocate[this.#types.MNY];
+
+        this.inputCharm.text = ''+charm;
+        this.inputIntelligence.text = ''+intelligence;
+        this.inputStrength.text = ''+strength;
+        this.inputMoney.text = ''+money;
+
+        this.labLeftPropertyPoint.text = this.#propertyPoints - this.total;
+
+        this.btnCharmIncrease.disabled = this.btnCharmIncrease.gray = false;
+        this.btnCharmReduce.disabled = this.btnCharmReduce.gray = false;
+        this.btnIntelligenceIncrease.disabled = this.btnIntelligenceIncrease.gray = false;
+        this.btnIntelligenceReduce.disabled = this.btnIntelligenceReduce.gray = false;
+        this.btnStrengthIncrease.disabled = this.btnStrengthIncrease.gray = false;
+        this.btnStrengthReduce.disabled = this.btnStrengthReduce.gray = false;
+        this.btnMoneyIncrease.disabled = this.btnMoneyIncrease.gray = false;
+        this.btnMoneyReduce.disabled = this.btnMoneyReduce.gray = false;
+
+        if (this.total >= this.#propertyPoints) {
+            this.btnCharmIncrease.disabled = this.btnCharmIncrease.gray = true;
+            this.btnIntelligenceIncrease.disabled = this.btnIntelligenceIncrease.gray = true;
+            this.btnStrengthIncrease.disabled = this.btnStrengthIncrease.gray = true;
+            this.btnMoneyIncrease.disabled = this.btnMoneyIncrease.gray = true;
+        } else if (this.total <= 0) {
+            this.btnCharmReduce.disabled = this.btnCharmReduce.gray = true;
+            this.btnIntelligenceReduce.disabled = this.btnIntelligenceReduce.gray = true;
+            this.btnStrengthReduce.disabled = this.btnStrengthReduce.gray = true;
+            this.btnMoneyReduce.disabled = this.btnMoneyReduce.gray = true;
+        }
+
+        if (charm <= this.#propertyAllocateLimit[0]) {
+            this.btnCharmReduce.disabled = this.btnCharmReduce.gray = true;
+        } else if (charm >= this.#propertyAllocateLimit[1]) {
+            this.btnCharmIncrease.disabled = this.btnCharmIncrease.gray = true;
+        }
+
+        if (intelligence <= this.#propertyAllocateLimit[0]) {
+            this.btnIntelligenceReduce.disabled = this.btnIntelligenceReduce.gray = true;
+        } else if (intelligence >= this.#propertyAllocateLimit[1]) {
+            this.btnIntelligenceIncrease.disabled = this.btnIntelligenceIncrease.gray = true;
+        }
+
+        if (strength <= this.#propertyAllocateLimit[0]) {
+            this.btnStrengthReduce.disabled = this.btnStrengthReduce.gray = true;
+        } else if (strength >= this.#propertyAllocateLimit[1]) {
+            this.btnStrengthIncrease.disabled = this.btnStrengthIncrease.gray = true;
+        }
+
+        if (money <= this.#propertyAllocateLimit[0]) {
+            this.btnMoneyReduce.disabled = this.btnMoneyReduce.gray = true;
+        } else if (money >= this.#propertyAllocateLimit[1]) {
+            this.btnMoneyIncrease.disabled = this.btnMoneyIncrease.gray = true;
+        }
+    }
+
+    check(left, right, value) {
+        if (value < left) return false;
+        if (value > right) return false;
+        return true;
+    }
+
+    random() {
+        let t = this.#propertyPoints;
+        const arr = new Array(4).fill(this.#propertyAllocateLimit[1]);
+
+        while (t > 0) {
+            const sub = Math.round(Math.random() * (Math.min(t, this.#propertyAllocateLimit[1]) - 1)) + 1;
+            while(true) {
+                const select = Math.floor(Math.random() * 4) % 4;
+                if(arr[select] - sub <0) continue;
+                arr[select] -= sub;
+                t -= sub;
+                break;
+            }
+        }
+        this.#propertyAllocate[this.#types.CHR] = this.#propertyAllocateLimit[1] - arr[0];
+        this.#propertyAllocate[this.#types.INT] = this.#propertyAllocateLimit[1] - arr[1];
+        this.#propertyAllocate[this.#types.STR] = this.#propertyAllocateLimit[1] - arr[2];
+        this.#propertyAllocate[this.#types.MNY] = this.#propertyAllocateLimit[1] - arr[3];
+
+        this.updateAllocate();
+    }
+
+    onPropertyAllocate(type, value) {
+        if (!this.check(
+                this.#propertyAllocateLimit[0],
+                this.#propertyAllocateLimit[1],
+                this.#propertyAllocate[type] + value
+        )) {
+            return;
+        }
+        if (!this.check(
+            0,
+            this.#propertyPoints,
+            this.total + value
+        )) {
+            return;
+        }
+        this.#propertyAllocate[type] += value;
+        this.updateAllocate();
+    }
+
+    onPropertyAllocateInput(type, inputItem) {
+        let value = parseInt(inputItem.text) || 0;
+        const total = this.total;
+        if (total + value < 0) {
+            value = this.#propertyAllocateLimit[0] * 4 - total;
+        } else if (total + value > this.#propertyPoints) {
+            value = this.#propertyPoints - total;
+        }
+
+        if (value < this.#propertyAllocateLimit[0]) {
+            value = this.#propertyAllocateLimit[0];
+        } else if (value > this.#propertyAllocateLimit[1]) {
+            value = this.#propertyAllocateLimit[1];
+        }
+
+
+        const alter = value - this.#propertyAllocate[type];
+        if (alter) {
+            this.onPropertyAllocate(type, alter);
+        } else {
+            this.updateAllocate();
+        }
+    }
+
+    renderTalent(box, index) {
+        const dataSource = box.dataSource;
+        console.debug(index, dataSource, box);
+
+        const labTitle = box.getChildByName("labTitle");
+        const grade1 = box.getChildByName("grade1");
+        const grade2 = box.getChildByName("grade2");
+        const grade3 = box.getChildByName("grade3");
+        const labDescription = box.getChildByName("labDescription");
+
+        labTitle.text = dataSource.name;
+        labDescription.text = dataSource.description;
+        switch (dataSource.grade) {
+            case 1:
+                grade1.visible = true;
+                grade2.visible = false;
+                grade3.visible = false;
+                break;
+            case 2:
+                grade1.visible = false;
+                grade2.visible = true;
+                grade3.visible = false;
+                break;
+            case 3:
+                grade1.visible = false;
+                grade2.visible = false;
+                grade3.visible = true;
+                break;
+            default:
+                grade1.visible = false;
+                grade2.visible = false;
+                grade3.visible = false;
+                break;
+        }
+    }
+}

src/ui/themes/cyber/cyberSummary.js

@@ -0,0 +1,46 @@
+export default class cyberSummary extends CyberSummaryUI {
+    constructor() {
+        super();
+        this.listSelectedTalents.renderHandler = Laya.Handler.create(this, this.renderTalent, null, false);
+    }
+
+    init({talents}) {
+        this.listSelectedTalents.array = talents;
+    }
+
+    renderTalent(box, index) {
+        const dataSource = box.dataSource;
+        console.debug(index, dataSource, box);
+
+        const labTitle = box.getChildByName("labTitle");
+        const grade1 = box.getChildByName("grade1");
+        const grade2 = box.getChildByName("grade2");
+        const grade3 = box.getChildByName("grade3");
+        const labDescription = box.getChildByName("labDescription");
+
+        labTitle.text = dataSource.name;
+        labDescription.text = dataSource.description;
+        switch (dataSource.grade) {
+            case 1:
+                grade1.visible = true;
+                grade2.visible = false;
+                grade3.visible = false;
+                break;
+            case 2:
+                grade1.visible = false;
+                grade2.visible = true;
+                grade3.visible = false;
+                break;
+            case 3:
+                grade1.visible = false;
+                grade2.visible = false;
+                grade3.visible = true;
+                break;
+            default:
+                grade1.visible = false;
+                grade2.visible = false;
+                grade3.visible = false;
+                break;
+        }
+    }
+}

src/ui/themes/cyber/cyberTalent.js

@@ -0,0 +1,104 @@
+export default class CyberTalent extends CyberTalentUI {
+    constructor() {
+        super();
+        this.btnDrawCard.on(Laya.Event.CLICK, this, this.onClickDrawCard);
+        this.btnNext.on(Laya.Event.CLICK, this, this.onClickNext);
+        this.listTalents.renderHandler = Laya.Handler.create(this, this.renderTalent, null, false);
+        this.listTalents.scrollBar.elasticDistance = 150;
+    }
+
+    #selected = new Set();
+    static load() {
+        return ['images/background/background_2@3x.png'];
+    }
+
+    init() {
+        this.pageDrawCard.visible = true;
+        this.pageResult.visible = false;
+        this.btnNext.label = 'UI_Talent_Select_Uncomplete';
+    }
+
+    close() {}
+
+    onClickDrawCard() {
+        this.pageDrawCard.visible = false;
+        this.pageResult.visible = true;
+        this.listTalents.array = core.talentRandom();
+    }
+
+    onClickNext() {
+        if(this.#selected.size < core.talentSelectLimit) {
+            return;
+        }
+
+        const talents = [...this.#selected].map(index => this.listTalents.array[index]);
+        UIManager.getInstance().switchView(UIManager.getInstance().themes.PROPERTY, { talents });
+    }
+
+    renderTalent(box, index) {
+        const dataSource = box.dataSource;
+        console.debug(index, dataSource, box);
+
+        const hboxTitle = box.getChildByName("hboxTitle");
+        const labTitle = hboxTitle.getChildByName("labTitle");
+        const grades = hboxTitle.getChildByName("grades");
+        const grade1 = grades.getChildByName("grade1");
+        const grade2 = grades.getChildByName("grade2");
+        const grade3 = grades.getChildByName("grade3");
+        const labDescription = box.getChildByName("labDescription");
+        const unselected = box.getChildByName("unselected");
+        const selected = box.getChildByName("selected");
+
+
+        switch (dataSource.grade) {
+            case 1:
+                grades.x = 0;
+                labTitle.x = 1;
+                grade1.visible = true;
+                grade2.visible = false;
+                grade3.visible = false;
+                break;
+            case 2:
+                grades.x = 0;
+                labTitle.x = 1;
+                grade1.visible = false;
+                grade2.visible = true;
+                grade3.visible = false;
+                break;
+            case 3:
+                grades.x = 0;
+                labTitle.x = 1;
+                grade1.visible = false;
+                grade2.visible = false;
+                grade3.visible = true;
+                break;
+            default:
+                grades.x = 1;
+                labTitle.x = 0;
+                grade1.visible = false;
+                grade2.visible = false;
+                grade3.visible = false;
+                break;
+        }
+        labTitle.text = dataSource.name;
+        labTitle.event(Laya.Event.RESIZE);
+        labDescription.text = dataSource.description;
+        unselected.visible = !( selected.visible = this.#selected.has(index) );
+        box.offAll(Laya.Event.CLICK);
+        box.on(Laya.Event.CLICK, this, () => {
+            if(this.#selected.has(index)) {
+                this.#selected.delete(index);
+            } else {
+                if(this.#selected.size >= core.talentSelectLimit) {
+                    return;
+                }
+                this.#selected.add(index);
+            }
+
+            this.btnNext.label = this.#selected.size === core.talentSelectLimit
+                ? 'UI_Next'
+                : 'UI_Talent_Select_Uncomplete';
+            unselected.visible = !( selected.visible = this.#selected.has(index) );
+        });
+    }
+}

src/ui/themes/cyber/cyberThanks.js

@@ -0,0 +1,6 @@
+export default class cyberThanks extends CyberThanksUI {
+    constructor() {
+        super();
+        this.btnBack.on(Laya.Event.CLICK, this, ()=>UIManager.getInstance().switchView(UIManager.getInstance().themes.MAIN));
+    }
+}

src/ui/themes/cyber/cyberTrajectory.js

@@ -0,0 +1,132 @@
+export default class CyberTrajectory extends CyberTrajectoryUI {
+    constructor() {
+        super();
+        let pos1 = [0, 0];
+        this.panelTrajectory.on(Laya.Event.MOUSE_DOWN, this, e => pos1 = [e.stageX, e.stageY]);
+        this.panelTrajectory.on(Laya.Event.MOUSE_UP, this, e => {
+            const distanceX = e.stageX - pos1[0];
+            const distanceY = e.stageY - pos1[1];
+            if(Math.sqrt(Math.abs(distanceX) + Math.abs(distanceY)) > 10) {
+                return;
+            }
+            this.onNext();
+        });
+        this.btnSummary.on(Laya.Event.CLICK, this, this.onSummary);
+
+        this.panelTrajectory.vScrollBar.elasticDistance = 150;
+
+        let interval = null;
+        let timeout = null;
+
+        const scroll = alter => {
+            let value = this.panelTrajectory.vScrollBar.value + alter;
+            if(value < 0) value = 0;
+            if(value > this.panelTrajectory.vScrollBar.max) value = this.panelTrajectory.vScrollBar.max;
+            this.panelTrajectory.scrollTo(0, value);
+        }
+        const on = (btn, alter) => {
+            btn.off(Laya.Event.CLICK, this, scroll);
+            btn.on(Laya.Event.CLICK, this, scroll, [100*alter]);
+            timeout = setTimeout(() => {
+                btn.off(Laya.Event.CLICK, this, scroll);
+                interval = setInterval(() => scroll(10*alter), 10);
+            }, 100);
+        }
+        const clear = () => {
+            if(interval) {
+                clearInterval(interval);
+                interval = null;
+            }
+            if(timeout) {
+                clearTimeout(timeout);
+                timeout = null;
+            }
+        };
+        this.btnUp.on(Laya.Event.MOUSE_DOWN, this, on, [this.btnUp, -1]);
+        this.btnDown.on(Laya.Event.MOUSE_DOWN, this, on, [this.btnDown, 1]);
+        this.btnUp.on(Laya.Event.MOUSE_UP, this, clear);
+        this.btnUp.on(Laya.Event.MOUSE_OUT, this, clear);
+        this.btnDown.on(Laya.Event.MOUSE_UP, this, clear);
+        this.btnDown.on(Laya.Event.MOUSE_OUT, this, clear);
+
+    }
+
+    static load() {
+        return ['images/slider/vslider_1@3x$bar.png'];
+    }
+
+    static #createComponent = plugin.extractComponents(CyberTrajectory.uiView, ['boxTrajectoryItem']);
+    #createTrajectoryItem() {
+        const item = CyberTrajectory.#createComponent('boxTrajectoryItem');
+        item.labContent = item.getChildByName('labContent');
+        item.labAge = item.getChildByName('hboxAge').getChildByName('labAge');
+        return item;
+    }
+    #isEnd;
+    #trajectoryItems;
+    #talents;
+
+    init({propertyAllocate, talents}) {
+        this.#trajectoryItems = [];
+        this.#isEnd = false;
+        this.#talents = talents;
+        core.restart(propertyAllocate);
+        this.updateProperty();
+    }
+
+    close() {
+        this.#trajectoryItems.forEach(item => {
+            item.removeSelf();
+            item.destroy();
+        });
+        this.#trajectoryItems = null;
+    }
+
+    updateProperty() {
+        const types = core.PropertyTypes;
+        const propertys = core.propertys;
+
+        this.labCharm.text = propertys[types.CHR];
+        this.labIntelligence.text = propertys[types.INT];
+        this.labStrength.text = propertys[types.STR];
+        this.labMoney.text = propertys[types.MNY];
+        this.labSpirit.text = propertys[types.SPR];
+    }
+
+    onNext() {
+        if(this.#isEnd) return;
+
+        const { age, content, isEnd } = core.next();
+        this.#isEnd = isEnd;
+
+        if(isEnd) {
+            console.debug('end');
+        }
+
+        const item = this.#createTrajectoryItem();
+        item.labAge.text = ''+age;
+        item.labContent.text = content.map(
+            ({type, description, grade, name, postEvent}) => {
+                switch(type) {
+                    case 'TLT':
+                        return `天赋【${name}】发动：${description}`;
+                    case 'EVT':
+                        return description + (postEvent?`\n${postEvent}`:'');
+                }
+            }
+        ).join('\n');
+        this.vboxTrajectory.addChild(item);
+        this.#trajectoryItems.push(item);
+        this.#trajectoryItems.forEach((item, index) => item.y = index);
+        Laya.timer.frameOnce(1, this, () => {
+            this.panelTrajectory.scrollTo(0, this.panelTrajectory.contentHeight);
+        });
+        this.updateProperty();
+    }
+
+    onSummary() {
+        const talents = this.#talents;
+        UIManager.getInstance().switchView(UIManager.getInstance().themes.SUMMARY, {talents});
+    }
+
+}

src/ui/themes/loading.js

@@ -0,0 +1,15 @@
+export default class Loading extends LoadingUI {
+    constructor() {
+        super();
+    }
+
+    static load() {
+        return [
+            "images/atlas/images/resource.atlas"
+        ]
+    }
+
+    show() {}
+
+    onProgress(progress) {}
+}

src/ui/themes/views.js

@@ -0,0 +1,17 @@
+const cyber = {
+    LOADING: "loading",
+    MAIN: "cyber/cyberMain",
+    TALENT: "cyber/cyberTalent",
+    PROPERTY: "cyber/cyberProperty",
+    TRAJECTORY: "cyber/cyberTrajectory",
+    SUMMARY: "cyber/cyberSummary",
+    ACHIEVEMENT: "cyber/cyberAchievement",
+    THANKS: "cyber/cyberThanks",
+}
+
+const themes = {
+    default: cyber,
+    cyber,
+};
+
+export default { themes };

src/ui/uiManager.js

@@ -98,7 +98,7 @@ class UIManager {
 
     async loadView(viewName) {
         // load view
-        return (await import(`../view/${viewName}.js`)).default;
+        return (await import(`./themes/${viewName}.js`)).default;
     }
 
     async loadRes(resourceList, preload, onProgress) {
@@ -134,12 +134,57 @@ class UIManager {
         this.#dialogLayer.removeChildren();
     }
 
+    #cutPath(path) {
+        path = ''+path;
+        let index = path.length;
+        do {
+            index --;
+            if(path[index] == '.') {
+                break;
+            }
+        } while (index>0)
+        return [
+            path.substring(0, index),
+            path.substring(index, path.length)
+        ];
+    }
+
+    #subSkin(skin, type) {
+        if(!skin || !skin.replace(/\s/g, '')) return [];
+        switch (type) {
+            case 'ProgressBar':
+                return [ skin, ...this.#progressBarSkin(skin) ];
+            case 'ScrollBar':
+                return [ skin, ...this.#scrollBarSkin(skin) ];
+            default:
+                return [skin]
+        }
+    }
+
+    #progressBarSkin(skin) {
+        if(!skin.replace(/\s/g, '')) return [];
+        let p = this.#cutPath(skin);
+        return [`${p[0]}$bar${p[1]}`];
+    }
+
+    #scrollBarSkin(skin) {
+        if(!skin.replace(/\s/g, '')) return [];
+        let p = this.#cutPath(skin);
+        return [
+            `${p[0]}$bar${p[1]}`,
+            `${p[0]}$up${p[1]}`,
+            `${p[0]}$down${p[1]}`
+        ];
+    }
+
     scanResource(uiView) {
         if(!uiView) return [];
         const resourceList = [];
-        if(uiView.props?.skin) {
-            resourceList.push(uiView.props.skin);
-        }
+
+        resourceList.push(...this.#subSkin(uiView.props?.skin, uiView.type));
+        resourceList.push(...this.#subSkin(uiView.props?.hScrollBarSkin, 'ScrollBar'));
+        resourceList.push(...this.#subSkin(uiView.props?.vScrollBarSkin, 'ScrollBar'));
+
         uiView.child?.forEach(child => {
             resourceList.push(...this.scanResource(child));
         });