add achievement popup

add page adaptive
add talent extends

src/app.js

@@ -14,13 +14,38 @@ class App{
     };
 
     #initLaya() {
-        Laya.init(1125, 2436, Laya.WebGL);
+        // Laya.init(1125, 2436, Laya.WebGL);
+        Laya.init(...this.#fitScreen, Laya.WebGL);
 
         Laya.stage.alignV = Laya.Stage.ALIGN_MIDDLE;
         Laya.stage.alignH = Laya.Stage.ALIGN_CENTER;
 
         Laya.stage.scaleMode = "showall";
         Laya.stage.bgColor = "#04131f";
+        window.onresize = () => Laya.stage.size(...this.#fitScreen);
+    }
+
+    get #fitScreen() {
+        const designWidth = 1125;
+        const designHeight = 2436;
+        const maxWidth = designHeight * 3 / 4;
+        const maxHeight = designWidth * 24 / 9;
+        const designRatio = designWidth / designHeight;
+
+        const screenWidth = window.innerWidth;
+        const screenHeight = window.innerHeight;
+        const screenRatio = screenWidth / screenHeight;
+        if(screenRatio > designRatio) {
+            return [
+                Math.min(screenWidth*designHeight/screenHeight, maxWidth),
+                designHeight
+            ]
+        } else {
+            return [
+                designWidth,
+                Math.min(screenHeight*designWidth/screenWidth, maxHeight)
+            ]
+        }
     }
 
     async setLanguage(language) {
@@ -40,9 +65,16 @@ class App{
         Laya.Text.langPacks = (await import(`./i18n/${this.#language}.js`)).default;
     }
 
+    resigterEvent() {
+        $$on('achievement', achievement => {
+            UIManager.getInstance().popup(UIManager.getInstance().themes.popup.ACHIEVEMENT, {achievement});
+        })
+    }
+
     async start({
         language = App.languages['zh-cn']
     }) {
+        this.resigterEvent();
         this.#initLaya();
         const uiManager = UIManager.getInstance();
         uiManager.themes = ViewTypes.themes.default;
@@ -52,6 +84,7 @@ class App{
         await core.initial(dataSet=>Laya.promises.loader.load(`data/${this.#language}/${dataSet}.json`, null, Laya.Loader.JSON));
         await uiManager.switchView(uiManager.themes.MAIN, null, {
             load: [
+                "fonts/方正像素12.ttf",
                 "images/atlas/images/accessories.atlas",
                 "images/atlas/images/border.atlas",
                 "images/atlas/images/button.atlas",

src/modules/property.js

@@ -333,14 +333,17 @@ class Property {
 
         const d = this.#judge[prop];
         let length = d.length;
-        const p = 1/length;
 
-        const progress = () => {
-            const min = d[length][0] || 0;
-            const max = d[length+1]?.[0] || value;
-            if(max == min) return 1;
-            return p * (length + (value - min) / (max - min));
-        }
+        // progress judge
+        // const p = 1/length;
+        // const progress = () => {
+        //     const min = d[length][0] || 0;
+        //     const max = d[length+1]?.[0] || value;
+        //     if(max == min) return 1;
+        //     return p * (length + (value - min) / (max - min));
+        // }
+
+        const progress = () => Math.max(Math.min(value, 10), 0) / 10;
 
         while(length--) {
             const [min, grade, judge] = d[length];

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 = {

src/ui/uiManager.js

@@ -10,6 +10,8 @@ class UIManager {
         this.#viewLayer.zOrder = 1;
         stage.addChild(this.#dialogLayer);
         this.#dialogLayer.zOrder = 2;
+        stage.addChild(this.#popupLayer);
+        this.#popupLayer.zOrder = 3;
         this.#viewLayer.top =
         this.#viewLayer.bottom =
         this.#viewLayer.left =
@@ -17,7 +19,11 @@ class UIManager {
         this.#dialogLayer.top =
         this.#dialogLayer.bottom =
         this.#dialogLayer.left =
-        this.#dialogLayer.right = 0;
+        this.#dialogLayer.right =
+        this.#popupLayer.top =
+        this.#popupLayer.bottom =
+        this.#popupLayer.left =
+        this.#popupLayer.right = 0;
     }
 
     static #instance = {};
@@ -26,7 +32,9 @@ class UIManager {
     #currentView;
     #viewLayer = new Laya.Panel();
     #dialogLayer = new Laya.Panel();
+    #popupLayer = new Laya.Panel();
     #viewMap = new Map();
+    #class = new Map();
     theme;
 
     static getInstance(name="default") {
@@ -35,14 +43,16 @@ class UIManager {
 
     async setLoading(loading) {
         const view = await this.getView(loading);
+        view.top = view.bottom = view.left = view.right = 0;
+        view.zOrder = 4;
         this.#loading = view;
-        this.#loading.zOrder = 3;
     }
 
     async switchView(viewName, args, actions) {
         // get view instance
         const view = await this.getView(viewName, args, actions?.load);
 
+        view.top = view.bottom = view.left = view.right = 0;
         // close current view
         this.clearAllDialog();
         await this.#currentView?.__close?.(view);
@@ -99,7 +109,10 @@ class UIManager {
 
     async loadView(viewName) {
         // load view
-        return (await import(`./themes/${viewName}.js`)).default;
+        if(this.#class.has(viewName)) return this.#class.get(viewName);
+        const c = (await import(`./themes/${viewName}.js`)).default;
+        this.#class.set(viewName, c);
+        return c;
     }
 
     async loadRes(resourceList, preload, onProgress) {
@@ -131,6 +144,13 @@ class UIManager {
         this.#dialogLayer.addChild(dialog);
     }
 
+    async popup(type, args) {
+        const popup = await this.getView(type, args);
+        this.#popupLayer.addChild(popup);
+        await popup.popup(args, this.#popupLayer);
+        this.#popupLayer.removeChild(popup);
+    }
+
     clearAllDialog() {
         this.#dialogLayer.removeChildren();
     }
@@ -192,4 +212,8 @@ class UIManager {
 
         return resourceList;
     }
+
+    get currentView() {
+        return this.#currentView;
+    }
 }