update daily

src/app.js

@@ -1,4 +1,4 @@
-import ViewTypes from './view/views.js';
+import ViewTypes from './ui/themes/views.js';
 
 class App{
     constructor(){
@@ -57,6 +57,7 @@ class App{
                 "images/atlas/images/button.atlas",
                 "images/atlas/images/icons.atlas",
                 "images/atlas/images/progress.atlas",
+                "images/atlas/images/slider.atlas",
             ]
         });
     }

src/i18n/en-us.js

@@ -12,20 +12,39 @@ export default ({
     UI_Close: 'Close',
     UI_Open: 'Open',
     UI_Search: 'Search',
-    UI_Loading: 'Loading',
+    UI_Loading: 'Now Loading',
     UI_Error: 'Error',
 
+    UI_Colon: ':',
+
+    UI_Property_Charm: 'CHR',
+    UI_Property_Intelligence: 'INT',
+    UI_Property_Strength: 'STR',
+    UI_Property_Money: 'MNY',
+    UI_Property_Spirit: 'SPR',
 
     UI_Title_Remake: 'Remake Simulate',
     UI_Title_Subsequent: 'The rubbish life doesn\'t want to stay for a second',
-    UI_Cyber_Theme_Art_Design: 'UI Design by 晰晰',
-
     UI_Remake: 'Remake Now',
     UI_Thanks: 'Thx',
     UI_Achievement: 'Achv',
+    UI_Cyber_Theme_Art_Design: 'UI Design by 晰晰',
+
 
     UI_Title_Talent: 'Talent Draw',
-
     UI_Talent_Draw: '!10 Pulls!',
     UI_Talent_Select_Uncomplete: 'Choose 3 Talents, Please.',
+
+    UI_Title_Property: 'Property Allocate',
+    UI_Left_Property_Point: 'Left Property Point',
+    UI_Selected_Talent: 'Selected Talent',
+    UI_Random_Allocate: 'Random Allocate',
+    UI_Make_New_Life: 'Make New Life',
+
+    UI_Title_Summary: 'Life Summary',
+    UI_Talent_Extend: 'Talent, You can choose one to extend',
+    UI_Remake_Again: 'Remake Again',
+
+    UI_Final_Age: 'Age',
+    UI_Total_Judge: 'Judge',
 });

src/i18n/zh-cn.js

@@ -15,17 +15,35 @@ export default ({
     UI_Loading: '加载中...',
     UI_Error: '错误',
 
+    UI_Colon: '：',
+
+    UI_Property_Charm: '颜值',
+    UI_Property_Intelligence: '智力',
+    UI_Property_Strength: '体质',
+    UI_Property_Money: '家境',
+    UI_Property_Spirit: '快乐',
 
     UI_Title_Remake: '人生重开模拟器',
     UI_Title_Subsequent: '这垃圾人生一秒也不想待了',
-    UI_Cyber_Theme_Art_Design: 'UI 设计 by 晰晰',
-
     UI_Remake: '立即重开',
     UI_Thanks: '感谢',
     UI_Achievement: '成就',
+    UI_Cyber_Theme_Art_Design: 'UI 设计 by 晰晰',
 
     UI_Title_Talent: '天赋抽卡',
-
     UI_Talent_Draw: '10连抽！',
     UI_Talent_Select_Uncomplete: '请选取 3 个天赋',
+
+    UI_Title_Property: '调整初始属性',
+    UI_Left_Property_Point: '剩余属性点',
+    UI_Selected_Talent: '已选天赋',
+    UI_Random_Allocate: '随机分配',
+    UI_Make_New_Life: '开始新人生',
+
+    UI_Title_Summary: '人生总结',
+    UI_Talent_Extend: '天赋：你可以选择一个，下辈子还能抽到',
+    UI_Remake_Again: '再次重开',
+
+    UI_Final_Age: '享年',
+    UI_Total_Judge: '总评',
 });

src/index.js

@@ -1,6 +1,24 @@
 import App from './app.js';
 import Life from './modules/life.js';
 
+globalThis.$$eventMap = new Map();
+globalThis.$$event = (tag, data) => {
+    const listener = $$eventMap.get(tag);
+    if(listener) listener.forEach(fn=>fn(data));
+}
+globalThis.$$on = (tag, fn) => {
+    let listener = $$eventMap.get(tag);
+    if(!listener) {
+        listener = new Set();
+        $$eventMap.set(tag, listener);
+    }
+    listener.add(fn);
+}
+globalThis.$$off = (tag, fn) => {
+    const listener = $$eventMap.get(tag);
+    if(listener) listener.delete(fn);
+}
+
 const core = new Life();
 const game = new App();
 globalThis.core = core;
@@ -12,4 +30,16 @@ location.search.substr(1).split('&').forEach(item => {
     query[parts[0]] = parts[1];
 });
 
+core.config({
+    defaultPropertyPoints: 20, // default number of points for a property
+    talentSelectLimit: 3, // max number of talents that can be selected
+    propertyAllocateLimit: [0, 10], // scoop of properties that can be allocated
+    talentConfig: { // config for talent
+        talentPullCount: 10, // number of talents to pull from the talent pool
+        talentRate: { 1:100, 2:10, 3:1, total: 1000 }, // rate of talent pull
+    },
+    defaultPropertys: {
+        SPR: 5,
+    }
+})
 game.start(query);

src/modules/life.js

@@ -1,4 +1,4 @@
-import { weightRandom } from '../functions/util.js'
+import { clone, weightRandom } from '../functions/util.js'
 import Property from './property.js';
 import Event from './event.js';
 import Talent from './talent.js';
@@ -17,6 +17,10 @@ class Life {
     #talent;
     #achievement;
     #triggerTalents;
+    #defaultPropertyPoints;
+    #talentSelectLimit;
+    #propertyAllocateLimit;
+    #defaultPropertys;
 
     async initial(loadJSON) {
         const [age, talents, events, achievements] = await Promise.all([
@@ -31,10 +35,28 @@ class Life {
         this.#achievement.initial({achievements});
     }
 
+    config({
+        defaultPropertyPoints = 20, // default number of points for a property
+        talentSelectLimit = 3, // max number of talents that can be selected
+        propertyAllocateLimit = [0, 10], // scoop of properties that can be allocated
+        defaultPropertys = {}, // default propertys
+        talentConfig, // config for talent
+    } = {}) {
+        this.#defaultPropertyPoints = defaultPropertyPoints;
+        this.#talentSelectLimit = talentSelectLimit;
+        this.#propertyAllocateLimit = propertyAllocateLimit;
+        this.#defaultPropertys = defaultPropertys;
+        this.#talent.config(talentConfig);
+    }
+
     restart(allocation) {
+        const propertys = clone(this.#defaultPropertys);
+        for(const key in allocation) {
+            propertys[key] = clone(allocation[key]);
+        }
         this.#triggerTalents = {};
-        const contents = this.talentReplace(allocation.TLT);
-        this.#property.restart(allocation);
+        const contents = this.talentReplace(propertys.TLT);
+        this.#property.restart(propertys);
         this.doTalent()
         this.#property.restartLastStep();
         this.#achievement.achieve(
@@ -44,8 +66,8 @@ class Life {
         return contents;
     }
 
-    getTalentAllocationAddition(talents) {
-        return this.#talent.allocationAddition(talents);
+    getPropertyPoints(selectedTalentIds) {
+        return this.#defaultPropertyPoints + this.#talent.allocationAddition(selectedTalentIds);
     }
 
     getTalentCurrentTriggerCount(talentId) {
@@ -208,6 +230,12 @@ class Life {
         }
     }
 
+    get PropertyTypes() { return clone(this.#property.TYPES); }
+
+    get talentSelectLimit() { return this.#talentSelectLimit; }
+    get propertyAllocateLimit() { return clone(this.#propertyAllocateLimit); }
+
+    get propertys() { return this.#property.getPropertys(); }
     get times() { return this.#property?.get(this.#property.TYPES.TMS) || 0; }
     set times(v) {
         this.#property?.set(this.#property.TYPES.TMS, v) || 0;

src/modules/property.js

@@ -237,7 +237,7 @@ class Property {
         }
     }
 
-    getLastRecord() {
+    getPropertys() {
         return clone({
             [this.TYPES.AGE]: this.get(this.TYPES.AGE),
             [this.TYPES.CHR]: this.get(this.TYPES.CHR),

src/modules/talent.js

@@ -6,6 +6,9 @@ class Talent {
     constructor() {}
 
     #talents;
+    #talentPullCount;
+    #talentRate;
+    #rateAddition;
 
     initial({talents}) {
         this.#talents = talents;
@@ -27,6 +30,14 @@ class Talent {
         }
     }
 
+    config({
+        talentPullCount = 10, // number of talents to pull from the talent pool
+        talentRate = { 1:100, 2:10, 3:1, total: 1000 }, // rate of talent pull
+    } = {}) {
+        this.#talentPullCount = talentPullCount;
+        this.#talentRate = talentRate;
+    }
+
     count() {
         return Object.keys(this.#talents).length;
     }
@@ -59,7 +70,7 @@ class Talent {
     }
 
     talentRandom(include, {times = 0, achievement = 0} = {}) {
-        const rate = { 1:100, 2:10, 3:1, };
+        const rate = clone(this.#talentRate);
         const rateAddition = { 1:1, 2:1, 3:1, };
         const timesRate = getRate('times', times);
         const achievementRate = getRate('achievement', achievement);
@@ -74,7 +85,7 @@ class Talent {
             rate[grade] *= rateAddition[grade];
 
         const randomGrade = () => {
-            let randomNumber = Math.floor(Math.random() * 1000);
+            let randomNumber = Math.floor(Math.random() * rate.total);
             if((randomNumber -= rate[3]) < 0) return 3;
             if((randomNumber -= rate[2]) < 0) return 2;
             if((randomNumber -= rate[1]) < 0) return 1;
@@ -93,7 +104,7 @@ class Talent {
             else talentList[grade].push({ grade, name, description, id });
         }
 
-        return new Array(10)
+        return new Array(this.#talentPullCount)
             .fill(1).map((v, i)=>{
                 if(!i && include) return include;
                 let grade = randomGrade();

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/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

@@ -3,11 +3,14 @@ export default class CyberTalent extends CyberTalentUI {
         super();
         this.btnDrawCard.on(Laya.Event.CLICK, this, this.onClickDrawCard);
         this.btnNext.on(Laya.Event.CLICK, this, this.onClickNext);
-        this.listTalents.renderHandler = new Laya.Handler(this, this.renderTalent);
+        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;
@@ -24,11 +27,12 @@ export default class CyberTalent extends CyberTalentUI {
     }
 
     onClickNext() {
+        if(this.#selected.size < core.talentSelectLimit) {
+            return;
+        }
 
-    }
-
-    onClickTalent() {
-
+        const talents = [...this.#selected].map(index => this.listTalents.array[index]);
+        UIManager.getInstance().switchView(UIManager.getInstance().themes.PROPERTY, { talents });
     }
 
     renderTalent(box, index) {
@@ -85,13 +89,13 @@ export default class CyberTalent extends CyberTalentUI {
             if(this.#selected.has(index)) {
                 this.#selected.delete(index);
             } else {
-                if(this.#selected.size >= 3) {
+                if(this.#selected.size >= core.talentSelectLimit) {
                     return;
                 }
                 this.#selected.add(index);
             }
 
-            this.btnNext.label = this.#selected.size === 3
+            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/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/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));
         });

src/view/themes/cyber/cyberProperty.js

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

src/view/themes/cyber/cyberSummary.js

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

src/view/themes/cyber/cyberTrojectory.js

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

src/view/views.js

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