add achievement popup

add page adaptive
add talent extends

src/ui/themes/cyber/cyberAchievement.js

@@ -10,6 +10,19 @@ export default class cyberAchievement extends CyberAchievementUI {
 
         this.listAchievements.renderHandler = new Laya.Handler(this, this.onRenderAchievement);
         this.listAchievements.scrollBar.elasticDistance = 150;
+        this.on(Laya.Event.RESIZE, this, () => {
+            this.boxPage.width = 2 * this.width;
+            this.boxA.width = this.boxB.width = this.width;
+            if(this.boxPage.x < 0) {
+                this.boxPage.x = - this.width;
+            }
+
+            const renderWidth = this.listAchievements?._itemRender?.props?.width;
+            if(renderWidth) {
+                const col = Math.max(Math.floor((this.width - 65) / renderWidth), 1);
+                this.listAchievements.width = col * renderWidth + (col - 1) * (this.listAchievements.spaceY || 0) + 30;
+            }
+        });
     }
 
     #state;

src/ui/themes/cyber/cyberMain.js

@@ -6,6 +6,13 @@ export default class cyberMain extends CyberMainUI {
         this.btnThanks.on(Laya.Event.CLICK, this, ()=>UIManager.getInstance().switchView(UIManager.getInstance().themes.THANKS));
         this.btnGithub.on(Laya.Event.CLICK, this, goto, ['github']);
         this.btnDiscord.on(Laya.Event.CLICK, this, goto, ['discord']);
+        this.on(Laya.Event.RESIZE, this, () => {
+            const scale = Math.max(
+                this.width / this.imgBg.width,
+                this.height / this.imgBg.height
+            );
+            this.imgBg.scale(scale, scale);
+        });
     }
 
     init() {

src/ui/themes/cyber/cyberProperty.js

@@ -206,9 +206,8 @@ export default class cyberProperty extends CyberPropertyUI {
         }
     }
 
-    renderTalent(box, index) {
+    renderTalent(box) {
         const dataSource = box.dataSource;
-        console.debug(index, dataSource, box);
 
         const labTitle = box.getChildByName("labTitle");
         const grade1 = box.getChildByName("grade1");

src/ui/themes/cyber/cyberSummary.js

@@ -5,6 +5,8 @@ export default class cyberSummary extends CyberSummaryUI {
         this.btnAgain.on(Laya.Event.CLICK, this, this.onAgain);
     }
 
+    #selectedTalent;
+
     get gradeFilters() {
         return [
             this.colorGrade0.text,
@@ -24,8 +26,9 @@ export default class cyberSummary extends CyberSummaryUI {
     }
 
     onAgain() {
-        UIManager.getInstance().switchView(UIManager.getInstance().themes.MAIN);
+        core.talentExtend(this.#selectedTalent);
         core.times ++;
+        UIManager.getInstance().switchView(UIManager.getInstance().themes.MAIN);
     }
 
     init({talents}) {
@@ -33,7 +36,6 @@ export default class cyberSummary extends CyberSummaryUI {
         const gradeFilters = this.gradeFilters;
         const gradeColors = this.gradeColors;
 
-        console.debug(summary, lastExtendTalent);
         const age = summary[core.PropertyTypes.HAGE];
         this.labAge.text = ''+age.value;
         this.labAgeJudge.text = age.judge;
@@ -84,18 +86,20 @@ export default class cyberSummary extends CyberSummaryUI {
             if(b == lastExtendTalent) return 1;
             return bg - ag;
         });
+        this.#selectedTalent = talents[0].id;
         this.listSelectedTalents.array = talents;
     }
 
-    renderTalent(box, index) {
+    renderTalent(box) {
         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");
+        const selected = box.getChildByName("selected");
+        const unselected = box.getChildByName("unselected");
 
         labTitle.text = dataSource.name;
         labDescription.text = dataSource.description;
@@ -121,5 +125,20 @@ export default class cyberSummary extends CyberSummaryUI {
                 grade3.visible = false;
                 break;
         }
+
+        selected.visible = dataSource.id == this.#selectedTalent;
+        unselected.visible = !selected.visible;
+        box.off(Laya.Event.CLICK, this, this.onSelectTalent);
+        box.on(Laya.Event.CLICK, this, this.onSelectTalent, [dataSource.id]);
+    }
+
+    onSelectTalent(talentId) {
+        if(talentId == this.#selectedTalent) {
+            this.#selectedTalent = null;
+        } else {
+            this.#selectedTalent = talentId;
+        }
+
+        this.listSelectedTalents.refresh();
     }
 }

src/ui/themes/cyber/cyberTalent.js

@@ -5,6 +5,13 @@ export default class CyberTalent extends CyberTalentUI {
         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;
+        this.on(Laya.Event.RESIZE, this, () => {
+            const renderWidth = this.listTalents?._itemRender?.props?.width;
+            if(renderWidth) {
+                const col = Math.max(Math.floor((this.width - 40) / renderWidth), 1);
+                this.listTalents.width = col * renderWidth + (col - 1) * (this.listTalents.spaceY || 0);
+            }
+        });
     }
 
     #selected = new Set();
@@ -38,7 +45,6 @@ export default class CyberTalent extends CyberTalentUI {
 
     renderTalent(box, index) {
         const dataSource = box.dataSource;
-        console.debug(index, dataSource, box);
 
         const hboxTitle = box.getChildByName("hboxTitle");
         const labTitle = hboxTitle.getChildByName("labTitle");

src/ui/themes/cyber/cyberTrajectory.js

@@ -78,6 +78,7 @@ export default class CyberTrajectory extends CyberTrajectoryUI {
         this.#talents = talents;
         core.restart(propertyAllocate);
         this.updateProperty();
+        this.onNext();
     }
 
     close() {
@@ -112,6 +113,15 @@ export default class CyberTrajectory extends CyberTrajectoryUI {
             this.btnSummary.visible = true;
         }
 
+        this.renderTrajectory(age, content);
+
+        Laya.timer.frameOnce(1, this, () => {
+            this.panelTrajectory.scrollTo(0, this.panelTrajectory.contentHeight);
+        });
+        this.updateProperty();
+    }
+
+    renderTrajectory(age, content) {
         const item = this.#createTrajectoryItem();
         item.labAge.text = ''+age;
         item.labContent.text = content.map(
@@ -127,10 +137,6 @@ export default class CyberTrajectory extends CyberTrajectoryUI {
         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() {

src/ui/themes/cyber/popup/cyberAchievementPopup.js

@@ -0,0 +1,29 @@
+export default class cyberAchievementPopup extends CyberAchievementPopupUI {
+    constructor() {
+        super();
+    }
+
+    get gradeColors() {
+        return [
+            this.colorGrade0.color,
+            this.colorGrade1.color,
+            this.colorGrade2.color,
+            this.colorGrade3.color,
+        ];
+    }
+
+    async popup({achievement}, parent) {
+        Laya.Tween.clearAll(this);
+        Laya.Tween.clearAll(this.boxBg);
+        this.alpha = 0.8;
+        this.labName.text = achievement.name;
+        this.labName.color = this.gradeColors[achievement.grade];
+        this.x = - this.width;
+        this.boxBg.x = this.boxBg.width;
+        await Promise.all([
+            Laya.promises.Tween.to(this, {x: 0}, 300, Laya.Ease.strongOut),
+            Laya.promises.Tween.to(this.boxBg, {x: 0}, 300, Laya.Ease.strongOut, 50),
+        ])
+        await Laya.promises.Tween.to(this, {alpha: 0}, 3000, Laya.Ease.strongIn);
+    }
+}

src/ui/themes/views.js

@@ -7,6 +7,9 @@ const cyber = {
     SUMMARY: "cyber/cyberSummary",
     ACHIEVEMENT: "cyber/cyberAchievement",
     THANKS: "cyber/cyberThanks",
+    popup: {
+        ACHIEVEMENT: "cyber/popup/cyberAchievementPopup",
+    }
 }
 
 const themes = {