add achievement popup

add page adaptive
add talent extends
This commit is contained in:
Vick Scarlet
2021-11-16 00:53:05 +08:00
parent 05e02de3db
commit a711fcf3ed
25 changed files with 1183 additions and 923 deletions

File diff suppressed because one or more lines are too long

View File

@@ -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;

View File

@@ -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() {

View File

@@ -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");

View File

@@ -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();
}
}

View File

@@ -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");

View File

@@ -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() {

View File

@@ -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);
}
}

View File

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

View File

@@ -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;
}
}