Squashed commit of the following:

commit 870d711162 Author: Vick Scarlet <scarlet_vick@outlook.com> Date: Thu Jan 27 16:50:19 2022 +0800 update event commit b327eb1765 Author: Vick Scarlet <scarlet_vick@outlook.com> Date: Thu Jan 27 16:36:02 2022 +0800 update event commit 4e845bc2eb Author: Vick Scarlet <scarlet_vick@outlook.com> Date: Thu Jan 27 16:35:56 2022 +0800 fix ui feel commit bd508913c5 Author: Vick Scarlet <scarlet_vick@outlook.com> Date: Thu Jan 27 16:35:22 2022 +0800 update special thanks commit d097b3bc15 Author: Vick Scarlet <scarlet_vick@outlook.com> Date: Thu Jan 27 16:04:55 2022 +0800 add unique character commit 8d71b73e94 Author: Vick Scarlet <scarlet_vick@outlook.com> Date: Tue Jan 25 21:27:29 2022 +0800 fix: bug save load commit 286828abe7 Author: Vick Scarlet <scarlet_vick@outlook.com> Date: Tue Jan 25 18:15:22 2022 +0800 add game mode commit 0e3c885ad3 Author: Vick Scarlet <scarlet_vick@outlook.com> Date: Thu Jan 6 20:09:20 2022 +0800 update special thanks 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
2026-04-04 04:12:55 +08:00 · 2022-01-28 00:39:35 +08:00
parent 150c991648
commit 14f9340d0a
74 changed files with 7713 additions and 1525 deletions
--- a/src/ui/laya.patch.js
+++ b/src/ui/laya.patch.js
@@ -0,0 +1,47 @@
+// 滚动条太灵敏
+const SCROLL_START_DISTANCE = 30;
+Laya.ScrollBar.prototype.loop=function(){
+    var mouseY=Laya.stage.mouseY;
+    var mouseX=Laya.stage.mouseX;
+    this._lastOffset=this.isVertical ? (mouseY-this._lastPoint.y):(mouseX-this._lastPoint.x);
+    if (this._clickOnly){
+        if (Math.abs(this._lastOffset *(this.isVertical ? Laya.stage._canvasTransform.getScaleY():Laya.stage._canvasTransform.getScaleX()))> SCROLL_START_DISTANCE){
+            this._clickOnly=false;
+            this._offsets || (this._offsets=[]);
+            this._offsets.length=0;
+            this._target.mouseEnabled=false;
+            if (!this.hide && this.autoHide){
+                this.alpha=1;
+                this.visible=true;
+            }
+            this.event(/*laya.events.Event.START*/"start");
+        }else return;
+    }
+    this._offsets.push(this._lastOffset);
+    this._lastPoint.x=mouseX;
+    this._lastPoint.y=mouseY;
+    if (this._lastOffset===0)return;
+    if (!this._checkElastic){
+        if (this.elasticDistance > 0){
+            if (!this._checkElastic && this._lastOffset !=0){
+                if ((this._lastOffset > 0 && this._value <=this.min)|| (this._lastOffset < 0 && this._value >=this.max)){
+                    this._isElastic=true;
+                    this._checkElastic=true;
+                    }else {
+                    this._isElastic=false;
+                }
+            }
+            }else {
+            this._checkElastic=true;
+        }
+    }
+    if (this._isElastic){
+        if (this._value <=this.min){
+            this.value-=this._lastOffset *Math.max(0,(1-((this.min-this._value)/ this.elasticDistance)));
+            }else if (this._value >=this.max){
+            this.value-=this._lastOffset *Math.max(0,(1-((this._value-this.max)/ this.elasticDistance)));
+        }
+        }else {
+        this.value-=this._lastOffset;
+    }
+}
--- a/src/ui/layaUI.max.all.js
+++ b/src/ui/layaUI.max.all.js
--- a/src/ui/runtime.js
+++ b/src/ui/runtime.js
@@ -475,6 +475,12 @@ class ColorfulBox extends Laya.Box {
        label.text = value;
    }

+    get cacheAs() {return super.cacheAs;}
+    set cacheAs(value) {
+        if(value=='bitmap') debugger;
+        super.cacheAs = value;
+    }
+
 }

 runtime.BlankBox =
@@ -534,4 +540,32 @@ class BlankBox extends Laya.Box {
        super.height = value;
        this.#draw();
    }
+}
+
+runtime.ColorAgentLabel =
+class ColorAgentLabel extends Laya.Label {
+    constructor(...args) {
+        super(...args);
+    }
+
+    get #brothers() {
+        const brothers = [];
+        if(!this.parent) return brothers;
+        const deepFind = p => {
+            if(!p._childs) return;
+            for(const c of p._childs) {
+                if(c == this) continue;
+                if(c instanceof Laya.Label) brothers.push(c);
+                deepFind(c);
+            }
+        }
+        deepFind(this.parent);
+        return brothers;
+    }
+
+    get color() {return this.super.color;}
+    set color(c) {
+        super.color = c;
+        this.#brothers.forEach(b=>b.color=c);
+    }
 }
--- a/src/ui/themes/cyber/celebrity.js
+++ b/src/ui/themes/cyber/celebrity.js
@@ -0,0 +1,136 @@
+export default class CyberCelebrity extends ui.view.CyberTheme.CelebrityUI {
+    constructor() {
+        super();
+        this.btnRetry.on(Laya.Event.CLICK, this, ()=>this.random());
+        this.btnNext.on(Laya.Event.CLICK, this, this.next);
+        this.panelCharacter.vScrollBar.elasticDistance = 150;
+    }
+
+    #selected;
+    static #createComponent = Laya.plugin.extractComponents(CyberCelebrity.uiView, ['boxCharacter','boxTalent','boxUniqueUnGenerate']);
+    #createCharacterItem(dataSource, click) {
+        const {name, property, talent} = dataSource;
+        const item = CyberCelebrity.#createComponent('boxCharacter');
+        const vboxStates = item.getChildByName('vboxStates');
+        const boxName = item.getChildByName('boxName');
+        boxName.getChildByName('label').text = name;
+
+        const p = $_.clone(property);
+        for(const k in p)
+            if(Math.abs(p[k] - Math.PI) < 0.0000001)
+                p[k] = 'π';
+
+        vboxStates.getChildByName('label').text = $_.format($lang.F_PropertyStr, p);
+        for(const t of talent) {
+            const i = CyberCelebrity.#createComponent('boxTalent');
+            i.getChildByName('label').text = $_.format($lang.F_TalentSelection, t);
+            i.y = vboxStates.height+vboxStates.space;
+            let g = i.getChildByName(`grade${t.grade}`);
+            if(g) g.visible = true;
+            vboxStates.addChild(i);
+        }
+        const box = new Laya.Box();
+        box.height = vboxStates.space;
+        box.y = vboxStates.height;
+        vboxStates.addChild(box);
+        vboxStates.scaleY = 0;
+
+        item.dataSource = dataSource;
+        item.switch = showDetails => vboxStates.scaleY = !!showDetails?1:0;
+        item.click = (cb, caller) => {
+            boxName.offAll(Laya.Event.CLICK);
+            boxName.on(Laya.Event.CLICK, caller || this, cb);
+        }
+        if(click) item.click(click);
+        return item;
+    }
+    #createUniqueUnGenerateItem(generate) {
+        const item = CyberCelebrity.#createComponent('boxUniqueUnGenerate');
+        const boxName = item.getChildByName('boxName');
+        const vboxStates = item.getChildByName('vboxStates');
+        const label = vboxStates.getChildByName('label');
+        const boxBtn = vboxStates.getChildByName('boxBtn');
+        const btn = boxBtn.getChildByName('btn');
+
+        label.event(Laya.Event.RESIZE);
+        vboxStates.scaleY = 0;
+        item.dataSource = false;
+        item.switch = showDetails => vboxStates.scaleY = !!showDetails?1:0;
+        item.click = (cb, caller) => {
+            boxName.offAll(Laya.Event.CLICK);
+            boxName.on(Laya.Event.CLICK, caller || this, cb);
+        }
+        item.generate = (cb, caller) => {
+            btn.offAll(Laya.Event.CLICK);
+            btn.on(Laya.Event.CLICK, caller || this, cb);
+        }
+        if(generate) item.generate(generate);
+        return item;
+    }
+
+
+    init() {
+        this.random();
+    }
+
+    close() {
+        this.#selected = null;
+        this.vboxCharacter.destroyChildren(true);
+    }
+
+    random(g) {
+        this.#selected = null;
+        this.vboxCharacter.destroyChildren(true);
+        const {unique, normal} = core.characterRandom();
+        const items = [];
+        const uniqueItem = this.generateUnique(unique, ()=>{
+            core.generateUnique();
+            this.random(normal);
+
+        });
+        if(uniqueItem) items.push(uniqueItem);
+        (g||normal).forEach(character => items.push(this.#createCharacterItem(character)));
+
+        items.forEach((item, i) => {
+            item.y = i;
+            this.vboxCharacter.addChild(item);
+            item.click(()=>{
+                if(this.#selected) this.#selected.switch(false);
+                this.#selected = item;
+                item.switch(true);
+                item.event(Laya.Event.RESIZE);
+            })
+        });
+        if(g&&uniqueItem) {
+            this.#selected = uniqueItem;
+            uniqueItem.switch(true);
+            uniqueItem.event(Laya.Event.RESIZE);
+        }
+    }
+
+    generateUnique(data, generate) {
+        if(!data) return null;
+        if(!data.generate) return this.#createUniqueUnGenerateItem(generate);
+        data.name = $lang.UI_UniqueWaTaShi;
+        return this.#createCharacterItem(data);
+    }
+
+    next() {
+        if(!this.#selected) return $$event('message', ['M_PleaseSelectOne']);
+        if(!this.#selected.dataSource) return $$event('message', ['M_UnGenerate']);
+
+        const {property: propertyAllocate, talent: talents} = this.#selected.dataSource;
+        const replace = core.remake(talents.map(talent => talent.id));
+        if(replace.length > 0) {
+            $$event('message', [replace.map(v => ['F_TalentReplace', v])]);
+        }
+        $ui.switchView(
+            UI.pages.TRAJECTORY,
+            {
+                propertyAllocate, talents,
+                enableExtend: false,
+            }
+        );
+    }
+
+}
--- a/src/ui/themes/cyber/main.js
+++ b/src/ui/themes/cyber/main.js
@@ -1,7 +1,7 @@
 export default class CyberMain extends ui.view.CyberTheme.CyberMainUI {
    constructor() {
        super();
-        this.btnRemake.on(Laya.Event.CLICK, this, ()=>$ui.switchView(UI.pages.TALENT));
+        this.btnRemake.on(Laya.Event.CLICK, this, ()=>$ui.switchView(UI.pages.MODE));
        this.btnAchievement.on(Laya.Event.CLICK, this, ()=>$ui.switchView(UI.pages.ACHIEVEMENT));
        this.btnThanks.on(Laya.Event.CLICK, this, ()=>$ui.switchView(UI.pages.THANKS));
        this.btnGithub.on(Laya.Event.CLICK, this, goto, ['github']);
--- a/src/ui/themes/cyber/mode.js
+++ b/src/ui/themes/cyber/mode.js
@@ -0,0 +1,7 @@
+export default class CyberMode extends ui.view.CyberTheme.ModeUI {
+    constructor() {
+        super();
+        this.btnCustom.on(Laya.Event.CLICK, this, ()=>$ui.switchView(UI.pages.TALENT));
+        this.btnCelebrity.on(Laya.Event.CLICK, this, ()=>$ui.switchView(UI.pages.CELEBRITY));
+    }
+}
--- a/src/ui/themes/cyber/property.js
+++ b/src/ui/themes/cyber/property.js
@@ -67,6 +67,7 @@ export default class CyberProperty extends ui.view.CyberTheme.CyberPropertyUI {
            {
                propertyAllocate: this.#propertyAllocate,
                talents: this.listSelectedTalents.array,
+                enableExtend: true,
            }
        );
    }
--- a/src/ui/themes/cyber/summary.js
+++ b/src/ui/themes/cyber/summary.js
@@ -6,6 +6,7 @@ export default class CyberSummary extends ui.view.CyberTheme.CyberSummaryUI {
    }

    #selectedTalent;
+    #enableExtend;

    onAgain() {
        core.talentExtend(this.#selectedTalent);
@@ -13,8 +14,10 @@ export default class CyberSummary extends ui.view.CyberTheme.CyberSummaryUI {
        $ui.switchView(UI.pages.MAIN);
    }

-    init({talents}) {
+    init({talents, enableExtend}) {
        const {summary, lastExtendTalent} = core;
+        this.#enableExtend = enableExtend;
+
        const gradeFilters = $ui.common.filter;
        const gradeColors = $ui.common.grade;

@@ -68,7 +71,11 @@ export default class CyberSummary extends ui.view.CyberTheme.CyberSummaryUI {
            if(b == lastExtendTalent) return 1;
            return bg - ag;
        });
-        this.#selectedTalent = talents[0].id;
+        if(this.#enableExtend) {
+            this.#selectedTalent = talents[0].id;
+        } else {
+            this.#selectedTalent = lastExtendTalent;
+        }
        this.listSelectedTalents.array = talents;
    }

@@ -115,6 +122,9 @@ export default class CyberSummary extends ui.view.CyberTheme.CyberSummaryUI {
    }

    onSelectTalent(talentId) {
+        if(!this.#enableExtend) {
+            return $$event('message', ['M_DisableExtendTalent']);
+        }
        if(talentId == this.#selectedTalent) {
            this.#selectedTalent = null;
        } else {
--- a/src/ui/themes/cyber/talent.js
+++ b/src/ui/themes/cyber/talent.js
@@ -40,7 +40,7 @@ export default class CyberTalent extends ui.view.CyberTheme.CyberTalentUI {
        }

        const talents = [...this.#selected].map(index => this.listTalents.array[index]);
-        $ui.switchView(UI.pages.PROPERTY, { talents });
+        $ui.switchView(UI.pages.PROPERTY, { talents, enableExtend: true});
    }

    renderTalent(box, index) {
@@ -99,7 +99,7 @@ export default class CyberTalent extends ui.view.CyberTheme.CyberTalentUI {
                if(this.#selected.size >= core.talentSelectLimit) {
                    return $$event('message', ['F_TalentSelectLimit', core.talentSelectLimit]);
                }
-                const exclusive = core.exclusive(
+                const exclusive = core.exclude(
                    [...this.#selected].map(index => this.listTalents.array[index].id),
                    this.listTalents.array[index].id
                );
--- a/src/ui/themes/cyber/trajectory.js
+++ b/src/ui/themes/cyber/trajectory.js
@@ -66,8 +66,10 @@ export default class CyberTrajectory extends ui.view.CyberTheme.CyberTrajectoryU
    #isEnd;
    #trajectoryItems;
    #talents;
+    #enableExtend;

-    init({propertyAllocate, talents}) {
+    init({propertyAllocate, talents, enableExtend}) {
+        this.#enableExtend = enableExtend;
        this.boxParticle.visible = false;
        this.boxSpeed.visible = true;
        this.btnSummary.visible = false;
@@ -109,16 +111,16 @@ export default class CyberTrajectory extends ui.view.CyberTheme.CyberTrajectoryU
        if(isEnd) {
            this.boxSpeed.visible = false;
            this.btnSummary.visible = true;
+            Laya.timer.frameOnce(1,this,()=>{
+                this.panelTrajectory.scrollTo(0, this.panelTrajectory.contentHeight);
+            });
        }
-
+        this.panelTrajectory.scrollTo(0, this.panelTrajectory.contentHeight);
        this.renderTrajectory(age, content);

        if(age >= 100) {
            this.boxParticle.visible = true;
        }
-        Laya.timer.frameOnce(1, this, () => {
-            this.panelTrajectory.scrollTo(0, this.panelTrajectory.contentHeight);
-        });
        this.updateProperty();
    }

@@ -141,12 +143,12 @@ export default class CyberTrajectory extends ui.view.CyberTheme.CyberTrajectoryU
        );
        this.vboxTrajectory.addChild(item);
        this.#trajectoryItems.push(item);
-        this.#trajectoryItems.forEach((item, index) => item.y = index);
+        item.y = this.vboxTrajectory.height;
    }

    onSummary() {
        const talents = this.#talents;
-        $ui.switchView(UI.pages.SUMMARY, {talents});
+        $ui.switchView(UI.pages.SUMMARY, { talents, enableExtend: this.#enableExtend });
    }

    get speed() {
--- a/src/ui/themes/default/celebrity.js
+++ b/src/ui/themes/default/celebrity.js
@@ -0,0 +1,143 @@
+export default class Celebrity extends ui.view.DefaultTheme.CelebrityUI {
+    constructor() {
+        super();
+        this.btnRetry.on(Laya.Event.CLICK, this, ()=>this.random());
+        this.btnNext.on(Laya.Event.CLICK, this, this.next);
+        this.panelCharacter.vScrollBar.elasticDistance = 150;
+    }
+
+    #selected;
+    static #createComponent = Laya.plugin.extractComponents(Celebrity.uiView, ['boxCharacter','boxTalent','boxUniqueUnGenerate']);
+    #createCharacterItem(dataSource, click) {
+        const {name, property, talent} = dataSource;
+        const style = $ui.common.characterItem;
+        const item = Celebrity.#createComponent('boxCharacter');
+        const vboxStates = item.getChildByName('vboxStates');
+        const boxName = item.getChildByName('boxName');
+        boxName.label = name;
+
+        const p = $_.clone(property);
+        for(const k in p)
+            if(Math.abs(p[k] - Math.PI) < 0.0000001)
+                p[k] = 'π';
+
+        vboxStates.label = $_.format($lang.F_PropertyStr, p);
+        $_.deepMapSet(boxName, style.name);
+        $_.deepMapSet(vboxStates, style.state);
+        for(const t of talent) {
+            const i = Celebrity.#createComponent('boxTalent');
+            i.label = $_.format($lang.F_TalentSelection, t);
+            i.y = vboxStates.height+vboxStates.space;
+            $_.deepMapSet(i, $ui.common.card[t.grade].normal);
+            vboxStates.addChild(i);
+        }
+        const box = new Laya.Box();
+        box.height = vboxStates.space;
+        box.y = vboxStates.height;
+        vboxStates.addChild(box);
+        vboxStates.scaleY = 0;
+
+        item.dataSource = dataSource;
+        item.switch = showDetails => vboxStates.scaleY = !!showDetails?1:0;
+        item.click = (cb, caller) => {
+            boxName.offAll(Laya.Event.CLICK);
+            boxName.on(Laya.Event.CLICK, caller || this, cb);
+        }
+        if(click) item.click(click);
+        return item;
+    }
+    #createUniqueUnGenerateItem(generate) {
+        const style = $ui.common.characterItem;
+        const item = Celebrity.#createComponent('boxUniqueUnGenerate');
+        const boxName = item.getChildByName('boxName');
+        const vboxStates = item.getChildByName('vboxStates');
+        const label = vboxStates.getChildByName('label');
+        const boxBtn = vboxStates.getChildByName('boxBtn');
+        const btn = boxBtn.getChildByName('btn');
+
+        $_.deepMapSet(boxName, style.name);
+        $_.deepMapSet(vboxStates, style.state);
+        $_.deepMapSet(btn, style.name);
+
+        boxBtn.y = label.height + vboxStates.space;
+        label.event(Laya.Event.RESIZE);
+        vboxStates.scaleY = 0;
+        item.dataSource = false;
+        item.switch = showDetails => vboxStates.scaleY = !!showDetails?1:0;
+        item.click = (cb, caller) => {
+            boxName.offAll(Laya.Event.CLICK);
+            boxName.on(Laya.Event.CLICK, caller || this, cb);
+        }
+        item.generate = (cb, caller) => {
+            btn.offAll(Laya.Event.CLICK);
+            btn.on(Laya.Event.CLICK, caller || this, cb);
+        }
+        if(generate) item.generate(generate);
+        return item;
+    }
+
+    init() {
+        this.random();
+    }
+
+    close() {
+        this.#selected = null;
+        this.vboxCharacter.destroyChildren(true);
+    }
+
+    random(g) {
+        this.#selected = null;
+        this.vboxCharacter.destroyChildren(true);
+        const {unique, normal} = core.characterRandom();
+        const items = [];
+        const uniqueItem = this.generateUnique(unique, ()=>{
+            core.generateUnique();
+            this.random(normal);
+
+        });
+        if(uniqueItem) items.push(uniqueItem);
+        (g||normal).forEach(character => items.push(this.#createCharacterItem(character)));
+
+        items.forEach((item, i) => {
+            item.y = i;
+            this.vboxCharacter.addChild(item);
+            item.click(()=>{
+                if(this.#selected) this.#selected.switch(false);
+                this.#selected = item;
+                item.switch(true);
+                item.event(Laya.Event.RESIZE);
+            })
+        });
+        if(g&&uniqueItem) {
+            this.#selected = uniqueItem;
+            uniqueItem.switch(true);
+            uniqueItem.event(Laya.Event.RESIZE);
+        }
+    }
+
+    generateUnique(data, generate) {
+        if(!data) return null;
+        if(!data.generate) return this.#createUniqueUnGenerateItem(generate);
+        data.name = $lang.UI_UniqueWaTaShi;
+        return this.#createCharacterItem(data);
+    }
+
+    next() {
+        if(!this.#selected) return $$event('message', ['M_PleaseSelectOne']);
+        if(!this.#selected.dataSource) return $$event('message', ['M_UnGenerate']);
+
+        const {property: propertyAllocate, talent: talents} = this.#selected.dataSource;
+        const replace = core.remake(talents.map(talent => talent.id));
+        if(replace.length > 0) {
+            $$event('message', [replace.map(v => ['F_TalentReplace', v])]);
+        }
+        $ui.switchView(
+            UI.pages.TRAJECTORY,
+            {
+                propertyAllocate, talents,
+                enableExtend: false,
+            }
+        );
+    }
+
+}
--- a/src/ui/themes/default/main.js
+++ b/src/ui/themes/default/main.js
@@ -1,7 +1,7 @@
 export default class Main extends ui.view.DefaultTheme.MainUI {
    constructor() {
        super();
-        this.btnRemake.on(Laya.Event.CLICK, this, ()=>$ui.switchView(UI.pages.TALENT));
+        this.btnRemake.on(Laya.Event.CLICK, this, ()=>$ui.switchView(UI.pages.MODE));
        this.btnAchievement.on(Laya.Event.CLICK, this, ()=>$ui.switchView(UI.pages.ACHIEVEMENT));
        this.btnThanks.on(Laya.Event.CLICK, this, ()=>$ui.switchView(UI.pages.THANKS));
        this.btnGithub.on(Laya.Event.CLICK, this, goto, ['github']);
--- a/src/ui/themes/default/mode.js
+++ b/src/ui/themes/default/mode.js
@@ -0,0 +1,7 @@
+export default class Mode extends ui.view.DefaultTheme.ModeUI {
+    constructor() {
+        super();
+        this.btnCustom.on(Laya.Event.CLICK, this, ()=>$ui.switchView(UI.pages.TALENT));
+        this.btnCelebrity.on(Laya.Event.CLICK, this, ()=>$ui.switchView(UI.pages.CELEBRITY));
+    }
+}
--- a/src/ui/themes/default/property.js
+++ b/src/ui/themes/default/property.js
@@ -67,6 +67,7 @@ export default class Property extends ui.view.DefaultTheme.PropertyUI {
            {
                propertyAllocate: this.#propertyAllocate,
                talents: this.listSelectedTalents.array,
+                enableExtend: true,
            }
        );
    }
--- a/src/ui/themes/default/summary.js
+++ b/src/ui/themes/default/summary.js
@@ -7,6 +7,7 @@ export default class Summary extends ui.view.DefaultTheme.SummaryUI {
    }

    #selectedTalent;
+    #enableExtend;

    onAgain() {
        core.talentExtend(this.#selectedTalent);
@@ -14,8 +15,9 @@ export default class Summary extends ui.view.DefaultTheme.SummaryUI {
        $ui.switchView(UI.pages.MAIN);
    }

-    init({talents}) {
+    init({talents, enableExtend}) {
        const {summary, lastExtendTalent} = core;
+        this.#enableExtend = enableExtend;

        this.listSummary.array = [
            [core.PropertyTypes.HCHR, $lang.UI_Property_Charm],
@@ -38,7 +40,11 @@ export default class Summary extends ui.view.DefaultTheme.SummaryUI {
            if(b == lastExtendTalent) return 1;
            return bg - ag;
        });
-        this.#selectedTalent = talents[0].id;
+        if(this.#enableExtend) {
+            this.#selectedTalent = talents[0].id;
+        } else {
+            this.#selectedTalent = lastExtendTalent;
+        }
        this.listSelectedTalents.array = talents;
    }
    renderSummary(box) {
@@ -57,6 +63,9 @@ export default class Summary extends ui.view.DefaultTheme.SummaryUI {
    }

    onSelectTalent(talentId) {
+        if(!this.#enableExtend) {
+            return $$event('message', ['M_DisableExtendTalent']);
+        }
        if(talentId == this.#selectedTalent) {
            this.#selectedTalent = null;
        } else {
--- a/src/ui/themes/default/talent.js
+++ b/src/ui/themes/default/talent.js
@@ -8,7 +8,6 @@ export default class Talent extends ui.view.DefaultTheme.TalentUI {
    }

    #selected = new Set();
-
    init() {
        this.pageDrawCard.visible = true;
        this.pageResult.visible = false;
@@ -30,7 +29,7 @@ export default class Talent extends ui.view.DefaultTheme.TalentUI {
        }

        const talents = [...this.#selected].map(index => this.listTalents.array[index]);
-        $ui.switchView(UI.pages.PROPERTY, { talents });
+        $ui.switchView(UI.pages.PROPERTY, { talents, enableExtend: true });
    }

    renderTalent(box, index) {
@@ -55,7 +54,7 @@ export default class Talent extends ui.view.DefaultTheme.TalentUI {
                if(this.#selected.size >= core.talentSelectLimit) {
                    return $$event('message', ['F_TalentSelectLimit', core.talentSelectLimit]);
                }
-                const exclusive = core.exclusive(
+                const exclusive = core.exclude(
                    [...this.#selected].map(index => this.listTalents.array[index].id),
                    this.listTalents.array[index].id
                );
--- a/src/ui/themes/default/trajectory.js
+++ b/src/ui/themes/default/trajectory.js
@@ -45,8 +45,10 @@ export default class Trajectory extends ui.view.DefaultTheme.TrajectoryUI {
    #isEnd;
    #trajectoryItems;
    #talents;
+    #enableExtend;

-    init({propertyAllocate, talents}) {
+    init({propertyAllocate, talents, enableExtend}) {
+        this.#enableExtend = enableExtend;
        this.boxParticle.visible = false;
        this.boxSpeed.visible = true;
        this.btnSummary.visible = false;
@@ -88,16 +90,16 @@ export default class Trajectory extends ui.view.DefaultTheme.TrajectoryUI {
        if(isEnd) {
            this.boxSpeed.visible = false;
            this.btnSummary.visible = true;
+            Laya.timer.frameOnce(1,this,()=>{
+                this.panelTrajectory.scrollTo(0, this.panelTrajectory.contentHeight);
+            });
        }
-
+        this.panelTrajectory.scrollTo(0, this.panelTrajectory.contentHeight);
        this.renderTrajectory(age, content);

        if(age >= 100) {
            this.boxParticle.visible = true;
        }
-        Laya.timer.frameOnce(1, this, () => {
-            this.panelTrajectory.scrollTo(0, this.panelTrajectory.contentHeight);
-        });
        this.updateProperty();
    }

@@ -117,12 +119,12 @@ export default class Trajectory extends ui.view.DefaultTheme.TrajectoryUI {
        item.grade(content[content.length - 1].grade);
        this.vboxTrajectory.addChild(item);
        this.#trajectoryItems.push(item);
-        this.#trajectoryItems.forEach((item, index) => item.y = index);
+        item.y = this.vboxTrajectory.height;
    }

    onSummary() {
        const talents = this.#talents;
-        $ui.switchView(UI.pages.SUMMARY, {talents});
+        $ui.switchView(UI.pages.SUMMARY, {talents, enableExtend: this.#enableExtend});
    }

    get speed() {
--- a/src/ui/themes/message.js
+++ b/src/ui/themes/message.js
@@ -14,7 +14,7 @@ export default class MessagePopup extends ui.view.MessagePopupUI {
        Laya.Tween.clearAll(this);
        this.alpha = 0;
        this.y = - 2 * this.height;
-        await Laya.promises.Tween.to(this, { y: 0, alpha: 1 }, 300, Laya.Ease.backOut),
+        await Laya.promises.Tween.to(this, { y: 0, alpha: 1 }, 300, Laya.Ease.backOut);
        await Laya.promises.Tween.to(this, { alpha: 0}, 300, Laya.Ease.strongIn, 3000);
    }
 }
--- a/src/ui/themes/saveload.js
+++ b/src/ui/themes/saveload.js
@@ -7,22 +7,22 @@ export default class SaveLoad extends ui.view.SaveLoadUI {
        });
        this.btnRead.on(Laya.Event.CLICK, this, async ()=>{
            const result = await $$copy(this.input.text = this.data);
-            $$event('message', [result? 'UI_CopySuccess': 'UI_CopyFaild']);
+            $$event('message', [result? 'UI_CopySuccess': 'UI_CopyFailed']);
        });
        this.btnWrite.on(Laya.Event.CLICK, this, async ()=>{
            const text = await $$read();
            if(text == false) {
                this.data = [
                    this.input.text,
-                    'UI_PasteFaildDecodeSuccess',
-                    'UI_PasteFaildDecodeFaild'
+                    'UI_PasteFailedDecodeSuccess',
+                    'UI_PasteFailedDecodeFailed'
                ];
            } else {
                this.input.text = text;
                this.data = [
                    text,
                    'UI_PasteSuccessDecodeSuccess',
-                    'UI_PasteSuccessDecodeFaild'
+                    'UI_PasteSuccessDecodeFailed'
                ];
            }
        });
@@ -60,6 +60,71 @@ export default class SaveLoad extends ui.view.SaveLoadUI {
        this.input.on(Laya.Event.MOUSE_DOWN, this, ()=>{
            this.input.setSelection(0, this.input.text.length);
        })
+
+        this.btnBackup.on(Laya.Event.CLICK, this, ()=>{
+            const board = document.createElement("div");
+            document.body.appendChild(board);
+            board.style = `
+                position: fixed;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                opacity: 0.95`;
+
+            const bg = document.createElement("div");
+            bg.style = `
+                position: absolute;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                background: #fff;
+                opacity: 0.95`;
+            document.body.appendChild(board);
+            board.appendChild(bg);
+            const textarea = document.createElement("textarea");
+            textarea.style = `position: absolute; width: ${window.innerWidth}px; height: ${window.innerHeight}px;`
+            textarea.value = JSON.stringify(
+                JSON.parse(this.data),
+                null,
+                4
+            );
+            board.appendChild(textarea);
+            const close = document.createElement("div");
+            close.style = `
+                position: absolute;
+                top: 0;
+                right: 0;
+                width: 100px;
+                height: 100px;
+                background: red;
+                font-size:100px;
+                padding: 0;
+                line-height: 100px;
+                color: white;
+                opacity: 0.7`;
+            close.innerHTML = '×';
+            board.appendChild(close);
+            close.onclick = ()=>board.remove();
+
+            const load = document.createElement("div");
+            load.style = `
+                position: absolute;
+                bottom: 0;
+                right: 0;
+                width: 100px;
+                height: 100px;
+                background: limegreen;
+                font-size: 35px;
+                padding: 0;
+                line-height: 50px;
+                color: white;
+                opacity: 0.7`;
+            load.innerHTML = 'LOAD<br>读取';
+            board.appendChild(load);
+            load.onclick = ()=>this.data = [textarea.value, '成功/success', '失败/failed', true];
+        });
    }

    static load() {
@@ -79,17 +144,19 @@ export default class SaveLoad extends ui.view.SaveLoadUI {
        return JSON.stringify(data);
    }

-    set data([v, success = 'UI_LoadSuccess', faild = 'UI_LoadFaild']) {
+    set data([v, success = 'UI_LoadSuccess', failed = 'UI_LoadFailed', altMsg]) {
        try {
            const data = JSON.parse(v);
            for(const key in data)
                localStorage.setItem(key, data[key]);
-            $$event('message', [success]);
+            if(altMsg) alert(success);
+            else $$event('message', [success]);
            $ui.theme = $ui.theme;
            this.btnClose.event(Laya.Event.CLICK);
        } catch (e) {
            console.error(e);
-            $$event('message', [faild]);
+            if(altMsg) alert(`${failed}\n${e}`);
+            else $$event('message', [failed]);
        }
    }
 }
--- a/src/ui/themes/views.js
+++ b/src/ui/themes/views.js
@@ -9,6 +9,8 @@ const pages = {
    THANKS: 'THANKS',
    THEMES: 'THEMES',
    SAVELOAD: 'SAVELOAD',
+    MODE: 'MODE',
+    CELEBRITY: 'CELEBRITY'
 };

 const popups = {
@@ -28,6 +30,8 @@ const cyber = {
        [pages.THANKS]: "default/thanks",
        [pages.THEMES]: 'themes',
        [pages.SAVELOAD]: 'saveload',
+        [pages.MODE]: 'cyber/mode',
+        [pages.CELEBRITY]: 'cyber/celebrity',
    },
    popups: {
        [popups.ACHIEVEMENT]: "cyber/popup/achievementPopup",
@@ -57,20 +61,22 @@ const cyber = {
            ],
            gradeBlk: [
                {
-                    defaultColor: '#cccccc',
-                    hoverColor: '#cccccc',
+                    visible: false,
                },
                {
                    defaultColor: '#55fffe',
                    hoverColor: '#55fffe',
+                    visible: true,
                },
                {
                    defaultColor: '#b17cff',
                    hoverColor: '#b17cff',
+                    visible: true,
                },
                {
                    defaultColor: '#ffce45',
                    hoverColor: '#ffce45',
+                    visible: true,
                },
            ]
        },
@@ -165,6 +171,13 @@ const cyber = {
                        defaultColor: '#fc5531',
                        hoverColor: '#f28b54',
                    },
+                    btnBackup: {
+                        defaultColor: '#9c30cd',
+                        hoverColor: '#bf50fd',
+                        radius: 8,
+                        defaultLabel: '#ffffff',
+                        hoverLabel: '#ffffff',
+                    },
                },
                names: {
                    btnSmall: {
@@ -190,6 +203,8 @@ const dark = {
        [pages.THANKS]: "default/thanks",
        [pages.THEMES]: 'themes',
        [pages.SAVELOAD]: 'saveload',
+        [pages.MODE]: 'default/mode',
+        [pages.CELEBRITY]: 'default/celebrity',
    },
    popups: {
        [popups.ACHIEVEMENT]: "default/popup/achievementPopup",
@@ -201,24 +216,27 @@ const dark = {
            defaultFontColor: '#eeeeee',
            trajectoryItem: {
                box: {
-                    filters: ()=>[new Laya.GlowFilter("#eeeeee", 8, 0, 0)],
+                    // filters: ()=>[new Laya.GlowFilter("#eeeeee", 8, 0, 0)],
+                    defaultStroke: '#eeeeee',
+                    hoverStroke: '#eeeeee',
+                    lineWidth: 2,
                },
                grade: [
                    {
-                        defaultColor: '#4a5361',
+                        defaultColor: '#464646',
                        hoverColor: '#4a5361',
                    },
                    {
-                        defaultColor: '#1160b0',
-                        hoverColor: '#1160b0',
+                        defaultColor: '#6495ed',
+                        hoverColor: '#87cefa',
                    },
                    {
-                        defaultColor: '#9379ca',
-                        hoverColor: '#9379ca',
+                        defaultColor: '#e2a7ff',
+                        hoverColor: '#e7beff',
                    },
                    {
-                        defaultColor: '#ab6157',
-                        hoverColor: '#ab6157',
+                        defaultColor: '#ffa07a',
+                        hoverColor: '#f7a989',
                    },
                ],
                ageColor: '#ffffee',
@@ -411,7 +429,28 @@ const dark = {
                    lineWidth: 4,
                    radius: 0,
                }
-            ]
+            ],
+            characterItem: {
+                name: {
+                    defaultColor: '#393e46',
+                    defaultStroke: '#eeeeee',
+                    defaultLabel: '#eeeeee',
+                    hoverColor: '#ff7878',
+                    hoverStroke: '#eeeeee',
+                    hoverLabel: '#eeeeee',
+                    lineWidth: 2,
+                },
+                state: {
+                    defaultColor: '#393e46',
+                    defaultStroke: '#eeeeee',
+                    defaultLabel: '#eeeeee',
+                    hoverColor: '#393e46',
+                    hoverStroke: '#eeeeee',
+                    hoverLabel: '#eeeeee',
+                    lineWidth: 2,
+                },
+                propertyColor: '#000000',
+            },
        },
        class: {
            btn_main: {
@@ -424,6 +463,16 @@ const dark = {
                lineWidth: 2,
                radius: 4,
            },
+            btn_main2: {
+                defaultColor: '#ffa07a',
+                defaultStroke: '#f8f8f8',
+                defaultLabel: '#3b3b3b',
+                hoverColor: '#ff7878',
+                hoverStroke: '#f8f8f8',
+                hoverLabel: '#eeeeee',
+                lineWidth: 2,
+                radius: 4,
+            },
            btn_small: {
                defaultColor: '#5865f2',
                defaultStroke: '#eeeeee',
@@ -475,7 +524,7 @@ const dark = {
            [pages.PROPERTY]: {
                vars: {
                    btnRandomAllocate: 'btn_main',
-                    btnNext: 'btn_main',
+                    btnNext: 'btn_main2',
                    title: 'title',
                },
                names: {
@@ -607,6 +656,13 @@ const dark = {
                        defaultColor: '#fc5531',
                        hoverColor: '#f28b54',
                    },
+                    btnBackup: {
+                        defaultColor: '#9c30cd',
+                        hoverColor: '#bf50fd',
+                        radius: 8,
+                        defaultLabel: '#ffffff',
+                        hoverLabel: '#ffffff',
+                    },
                },
                names: {
                    btnSmall: {
@@ -616,6 +672,18 @@ const dark = {
                    }
                }
            },
+            [pages.MODE]: {
+                names: {
+                    font_default: 'font_default',
+                    btn: 'btn_main',
+                }
+            },
+            [pages.CELEBRITY]: {
+                vars: {
+                    btnRetry: 'btn_main',
+                    btnNext: 'btn_main2',
+                }
+            },
        },
        popups: {
            [popups.ACHIEVEMENT]: {
@@ -644,6 +712,8 @@ const light = {
        [pages.THANKS]: "default/thanks",
        [pages.THEMES]: 'themes',
        [pages.SAVELOAD]: 'saveload',
+        [pages.MODE]: 'default/mode',
+        [pages.CELEBRITY]: 'default/celebrity',
    },
    popups: {
        [popups.ACHIEVEMENT]: "default/popup/achievementPopup",
@@ -655,21 +725,27 @@ const light = {
            defaultFontColor: '#000000',
            trajectoryItem: {
                box: {
-                    filters: ()=>[new Laya.GlowFilter("#b1b1b1", 8, 0, 0)],
+                    // filters: ()=>[new Laya.GlowFilter("#b1b1b1", 8, 0, 0)],
+                    defaultStroke: '#b1b1b1',
+                    hoverStroke: '#b1b1b1',
+                    lineWidth: 2,
                },
                grade: [
-                    {},
                    {
-                        defaultColor: '#55fffe',
-                        hoverColor: '#55fffe',
+                        defaultColor: '#ffffff',
+                        hoverColor: '#ededed',
                    },
                    {
-                        defaultColor: '#b17cff',
-                        hoverColor: '#b17cff',
+                        defaultColor: '#87cefa',
+                        hoverColor: '#6495ed',
                    },
                    {
-                        defaultColor: '#ffce45',
-                        hoverColor: '#ffce45',
+                        defaultColor: '#e7beff',
+                        hoverColor: '#e2a7ff',
+                    },
+                    {
+                        defaultColor: '#f7a989',
+                        hoverColor: '#ffa07a',
                    },
                ],
                ageColor: '#000000',
@@ -860,7 +936,28 @@ const light = {
                    lineWidth: 4,
                    radius: 0,
                }
-            ]
+            ],
+            characterItem: {
+                name: {
+                    defaultColor: '#ffffff',
+                    defaultStroke: '#cccccc',
+                    defaultLabel: '#000000',
+                    hoverColor: '#ff7878',
+                    hoverStroke: '#cccccc',
+                    hoverLabel: '#ffffff',
+                    lineWidth: 2,
+                },
+                state: {
+                    defaultColor: '#ffffff',
+                    defaultStroke: '#cccccc',
+                    defaultLabel: '#000000',
+                    hoverColor: '#ffffff',
+                    hoverStroke: '#cccccc',
+                    hoverLabel: '#000000',
+                    lineWidth: 2,
+                },
+                propertyColor: '#000000',
+            },
        },
        class: {
            btn_main: {
@@ -873,6 +970,16 @@ const light = {
                lineWidth: 2,
                radius: 4,
            },
+            btn_main2: {
+                defaultColor: '#f7a989',
+                defaultStroke: '#f8f8f8',
+                defaultLabel: '#ffffff',
+                hoverColor: '#ff7878',
+                hoverStroke: '#f8f8f8',
+                hoverLabel: '#ffffff',
+                lineWidth: 2,
+                radius: 4,
+            },
            btn_small: {
                defaultColor: '#5865f2',
                defaultStroke: '#eeeeee',
@@ -924,7 +1031,7 @@ const light = {
            [pages.PROPERTY]: {
                vars: {
                    btnRandomAllocate: 'btn_main',
-                    btnNext: 'btn_main',
+                    btnNext: 'btn_main2',
                    title: 'title',
                },
                names: {
@@ -1056,6 +1163,13 @@ const light = {
                        defaultColor: '#fc5531',
                        hoverColor: '#f28b54',
                    },
+                    btnBackup: {
+                        defaultColor: '#9c30cd',
+                        hoverColor: '#bf50fd',
+                        radius: 8,
+                        defaultLabel: '#ffffff',
+                        hoverLabel: '#ffffff',
+                    },
                },
                names: {
                    btnSmall: {
@@ -1065,6 +1179,18 @@ const light = {
                    }
                }
            },
+            [pages.MODE]: {
+                names: {
+                    font_default: 'font_default',
+                    btn: 'btn_main',
+                }
+            },
+            [pages.CELEBRITY]: {
+                vars: {
+                    btnRetry: 'btn_main',
+                    btnNext: 'btn_main2',
+                }
+            },
        },
        popups: {
            [popups.ACHIEVEMENT]: {