sinvo/lifeRestart
1
0
Fork 0
mirror of https://github.com/VickScarlet/lifeRestart.git synced 2025-07-13 15:52:44 +08:00
Code Issues Projects Releases Wiki Activity

add theme switch

Browse Source
This commit is contained in:
Vick Scarlet
2021-12-02 14:35:33 +08:00
parent 488a6054ab
commit acf9b92134
21 changed files with 485 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
laya/assets/images/icons/icon_save.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 652 B

BIN
laya/assets/images/icons/icon_themes.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
laya/assets/images/radio/radio_cyber.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
laya/assets/images/radio/radio_dark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

BIN
laya/assets/images/radio/radio_light.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

59
laya/pages/view/CyberTheme/CyberMain.ui
View File

@ -2,7 +2,7 @@
"x":0,
"type":"View",
"selectedBox":1,
"selecteID":83,
"selecteID":89,
"props":{"y":1218,"x":562,"width":1125,"sceneColor":"#000000","sceneBg":"laya/views/view/CyberTheme/CyberMain.png","runtime":"Laya.runtime.ViewBase","height":2436,"anchorY":0.5,"anchorX":0.5},
"nodeParent":-1,
"label":"View",
@ -18,14 +18,13 @@
"props":{"var":"imgBg","skin":"images/background/background_1@3x.png","name":"imgBg","centerY":0,"centerX":0},
"nodeParent":1,
"label":"Image(imgBg)",
"isOpen":true,
"isOpen":false,
"isDirectory":true,
"isAniNode":true,
"hasChild":true,
"compId":67,
"child":[
{
"x":30,
"type":"Animation",
"props":{"y":0,"x":0,"width":1125,"source":"view/CyberTheme/animation/jumpBackground.ani","interval":80,"height":2436,"blendMode":"lighter","autoPlay":true,"alpha":0.3},
"nodeParent":67,
@ -474,14 +473,13 @@
"props":{"y":0,"x":1100,"width":1,"top":0,"right":0,"height":1},
"nodeParent":1,
"label":"Box",
"isOpen":true,
"isOpen":false,
"isDirectory":true,
"isAniNode":true,
"hasChild":true,
"compId":84,
"child":[
{
"x":30,
"type":"Box",
"props":{"y":200,"x":-200,"width":225,"var":"btnAchievement","runtime":"Laya.runtime.ScaleButton","name":"btnAchievement","height":90,"anchorY":0.5,"anchorX":0.5},
"nodeParent":84,
@ -606,6 +604,57 @@
]
}]
}]
},
{
"x":15,
"type":"Box",
"props":{"right":0,"bottom":0},
"nodeParent":1,
"label":"Box",
"isOpen":true,
"isDirectory":true,
"isAniNode":true,
"hasChild":true,
"compId":88,
"child":[
{
"x":30,
"type":"Box",
"props":{"y":-175,"x":-100,"width":110,"runtime":"Laya.runtime.ScaleButton","height":110,"anchorY":0.5,"anchorX":0.5},
"nodeParent":88,
"label":"Box",
"isOpen":true,
"isDirectory":true,
"isAniNode":true,
"hasChild":true,
"compId":89,
"child":[
{
"x":45,
"type":"Box",
"props":{"width":110,"var":"btnThemes","runtime":"Laya.runtime.ColorfulBox","name":"btnThemes","height":110,"centerY":0,"centerX":0,"anchorY":0.5,"anchorX":0.5},
"nodeParent":89,
"label":"Box(btnThemes)",
"isOpen":false,
"isDirectory":true,
"isAniNode":true,
"hasChild":true,
"compId":86,
"child":[
{
"type":"Image",
"props":{"width":90,"skin":"images/icons/icon_themes.png","height":90,"centerY":0,"centerX":0},
"nodeParent":86,
"label":"Image",
"isDirectory":false,
"isAniNode":true,
"hasChild":false,
"compId":87,
"child":[
]
}]
}]
}]
}],
"animations":[
{

37
laya/pages/view/DefaultTheme/Main.ui
View File

@ -2,7 +2,7 @@
"x":0,
"type":"View",
"selectedBox":1,
"selecteID":83,
"selecteID":11,
"props":{"y":1218,"x":562,"width":1125,"sceneColor":"#000000","runtime":"Laya.runtime.ViewBase","height":2436,"anchorY":0.5,"anchorX":0.5},
"nodeParent":-1,
"label":"View",
@ -15,9 +15,9 @@
{
"x":15,
"type":"Label",
"props":{"var":"labTitle","text":"UI_Title_Remake","name":"labTitle","fontSize":130,"font":"SimHei","color":"#ffffff","centerY":-260,"centerX":0,"bold":true,"anchorY":0.5,"anchorX":0.5},
"props":{"text":"UI_Title_Remake","name":"title","fontSize":130,"font":"SimHei","color":"#ffffff","centerY":-260,"centerX":0,"bold":true,"anchorY":0.5,"anchorX":0.5},
"nodeParent":1,
"label":"Label(labTitle)",
"label":"Label(title)",
"isDirectory":false,
"isAniNode":true,
"hasChild":false,
@ -28,7 +28,7 @@
{
"x":15,
"type":"Label",
"props":{"wordWrap":true,"var":"labSubTitle","text":"UI_Title_Subsequent","right":0,"name":"labSubTitle","left":0,"fontSize":70,"font":"SimHei","color":"#999999","centerY":-120,"anchorY":0.5,"anchorX":0.5,"align":"center"},
"props":{"wordWrap":true,"var":"labSubTitle","text":"UI_Title_Subsequent","right":0,"name":"title","left":0,"fontSize":70,"font":"SimHei","color":"#999999","centerY":-120,"anchorY":0.5,"anchorX":0.5,"align":"center"},
"nodeParent":1,
"label":"Label(labSubTitle)",
"isDirectory":false,
@ -195,14 +195,13 @@
"props":{"width":160,"left":50,"height":160,"bottom":50},
"nodeParent":1,
"label":"Box",
"isOpen":true,
"isOpen":false,
"isDirectory":true,
"isAniNode":true,
"hasChild":true,
"compId":92,
"child":[
{
"x":30,
"type":"Box",
"props":{"width":160,"var":"btnDiscord","runtime":"Laya.runtime.ScaleButton","name":"btnDiscord","height":160,"centerY":0,"centerX":0,"anchorY":0.5,"anchorX":0.5},
"nodeParent":92,
@ -226,6 +225,32 @@
]
}]
}]
},
{
"x":15,
"type":"Box",
"props":{"width":110,"var":"btnThemes","runtime":"Laya.runtime.ColorfulBox","right":50,"name":"btnThemes","height":110,"bottom":50,"anchorY":0.5,"anchorX":0.5},
"nodeParent":1,
"label":"Box(btnThemes)",
"isOpen":true,
"isDirectory":true,
"isAniNode":true,
"hasChild":true,
"compId":96,
"child":[
{
"x":30,
"type":"Image",
"props":{"width":90,"skin":"images/icons/icon_themes.png","height":90,"centerY":0,"centerX":0},
"nodeParent":96,
"label":"Image",
"isDirectory":false,
"isAniNode":true,
"hasChild":false,
"compId":98,
"child":[
]
}]
}],
"animations":[
{

6
laya/pages/view/SaveLoad.ui Normal file
View File

@ -0,0 +1,6 @@
{
"type":"View",
"props":{"width":800,"sceneColor":"#000000","height":400},
"child":[
]
}

141
laya/pages/view/Themes.ui Normal file
View File

@ -0,0 +1,141 @@
{
"x":0,
"type":"Dialog",
"selectedBox":1,
"selecteID":13,
"props":{"width":350,"sceneColor":"#000000","height":550},
"nodeParent":-1,
"label":"Dialog",
"isOpen":true,
"isDirectory":true,
"isAniNode":true,
"hasChild":true,
"compId":1,
"child":[
{
"x":15,
"type":"Box",
"props":{"top":20,"right":20,"left":20,"bottom":130},
"nodeParent":1,
"label":"Box",
"isOpen":true,
"isDirectory":true,
"isAniNode":true,
"hasChild":true,
"compId":6,
"child":[
{
"x":30,
"type":"RadioGroup",
"props":{"var":"radioTheme","name":"radioTheme","height":380,"centerY":0,"centerX":0},
"nodeParent":6,
"label":"RadioGroup(radioTheme)",
"isOpen":true,
"isDirectory":true,
"isAniNode":true,
"hasChild":true,
"compId":13,
"child":[
{
"x":45,
"type":"Radio",
"props":{"width":300,"top":0,"skin":"images/radio/radio_cyber.png","name":"item0","height":100},
"nodeParent":13,
"label":"Radio(item0)",
"isDirectory":false,
"isAniNode":true,
"hasChild":false,
"compId":10,
"child":[
]
},
{
"x":45,
"type":"Radio",
"props":{"width":300,"skin":"images/radio/radio_dark.png","name":"item1","height":100,"centerY":0},
"nodeParent":13,
"label":"Radio(item1)",
"isDirectory":false,
"isAniNode":true,
"hasChild":false,
"compId":11,
"child":[
]
},
{
"x":45,
"type":"Radio",
"props":{"width":300,"skin":"images/radio/radio_light.png","name":"item2","height":100,"bottom":0},
"nodeParent":13,
"label":"Radio(item2)",
"isDirectory":false,
"isAniNode":true,
"hasChild":false,
"compId":12,
"child":[
]
}]
}]
},
{
"x":15,
"type":"Box",
"props":{"width":90,"var":"btnOK","runtime":"Laya.runtime.ColorfulBox","name":"btnSmall","left":20,"height":90,"bottom":20,"anchorY":0.5,"anchorX":0.5},
"nodeParent":1,
"label":"Box(btnOK)",
"isOpen":true,
"isDirectory":true,
"isAniNode":true,
"hasChild":true,
"compId":2,
"child":[
{
"x":30,
"type":"Label",
"props":{"text":"√","name":"label","fontSize":50,"font":"SimHei","color":"#ffffff","centerY":0,"centerX":0,"bold":true,"anchorY":0.5,"anchorX":0.5},
"nodeParent":2,
"label":"Label(label)",
"isDirectory":false,
"isAniNode":true,
"hasChild":false,
"compId":3,
"child":[
]
}]
},
{
"x":15,
"type":"Box",
"props":{"width":90,"var":"btnClose","runtime":"Laya.runtime.ColorfulBox","right":20,"name":"btnSmall","height":90,"bottom":20,"anchorY":0.5,"anchorX":0.5},
"nodeParent":1,
"label":"Box(btnClose)",
"isOpen":true,
"isDirectory":true,
"isAniNode":true,
"hasChild":true,
"compId":14,
"child":[
{
"x":30,
"type":"Label",
"props":{"text":"×","name":"label","fontSize":50,"font":"SimHei","color":"#ffffff","centerY":0,"centerX":0,"bold":true,"anchorY":0.5,"anchorX":0.5},
"nodeParent":14,
"label":"Label(label)",
"isDirectory":false,
"isAniNode":true,
"hasChild":false,
"compId":15,
"child":[
]
}]
}],
"animations":[
{
"nodes":[
],
"name":"ani1",
"id":1,
"frameRate":24,
"action":0
}]
}

6
public/images/atlas/.rec
View File

@ -35,9 +35,11 @@ P 3FA91C13 icon_github.png
P AB934AEA icon_int@3x.png
P F1A0724B icon_mny@3x.png
P D5AADAC9 icon_rank@3x.png
P 0806E5F3 icon_save.png
P 2DB0325D icon_spr@3x.png
P 2EFA541B icon_str@3x.png
P 804842C9 icon_thanks@3x.png
P 96DD5D94 icon_themes.png
P 6ECB5FEC icon_up@3x.png
D images/progress
P E2BF0C93 progress_1@3x$bar.png
@ -46,6 +48,10 @@ P E7F15BA7 progress_2$bar.png
P 641A22BF progress_2.png
P AF80A9AF progress_s$bar.png
P 41417E8D progress_s.png
D images/radio
P CCF63014 radio_cyber.png
P 040DE73C radio_dark.png
P BA975F5A radio_light.png
D images/resource
P F3659301 bottombreath.png
P 496D6FB9 circle.png

2
public/images/atlas/images/icons.atlas
View File

@ -1 +1 @@
{"frames":{"icon_achievement@3x.png":{"frame":{"h":69,"idx":0,"w":65,"x":0,"y":385},"sourceSize":{"h":69,"w":65},"spriteSourceSize":{"x":0,"y":0}},"icon_chr@3x.png":{"frame":{"h":61,"idx":0,"w":57,"x":132,"y":448},"sourceSize":{"h":61,"w":57},"spriteSourceSize":{"x":0,"y":0}},"icon_discord.png":{"frame":{"h":384,"idx":0,"w":384,"x":0,"y":0},"sourceSize":{"h":384,"w":384},"spriteSourceSize":{"x":0,"y":0}},"icon_github.png":{"frame":{"h":384,"idx":0,"w":384,"x":385,"y":0},"sourceSize":{"h":384,"w":384},"spriteSourceSize":{"x":0,"y":0}},"icon_int@3x.png":{"frame":{"h":57,"idx":0,"w":54,"x":0,"y":455},"sourceSize":{"h":57,"w":54},"spriteSourceSize":{"x":0,"y":0}},"icon_mny@3x.png":{"frame":{"h":57,"idx":0,"w":54,"x":55,"y":455},"sourceSize":{"h":57,"w":54},"spriteSourceSize":{"x":0,"y":0}},"icon_rank@3x.png":{"frame":{"h":62,"idx":0,"w":72,"x":132,"y":385},"sourceSize":{"h":62,"w":72},"spriteSourceSize":{"x":0,"y":0}},"icon_spr@3x.png":{"frame":{"h":60,"idx":0,"w":57,"x":190,"y":448},"sourceSize":{"h":60,"w":57},"spriteSourceSize":{"x":0,"y":0}},"icon_str@3x.png":{"frame":{"h":57,"idx":0,"w":54,"x":205,"y":385},"sourceSize":{"h":57,"w":54},"spriteSourceSize":{"x":0,"y":0}},"icon_thanks@3x.png":{"frame":{"h":69,"idx":0,"w":65,"x":66,"y":385},"sourceSize":{"h":69,"w":65},"spriteSourceSize":{"x":0,"y":0}},"icon_up@3x.png":{"frame":{"h":18,"idx":0,"w":33,"x":248,"y":443},"sourceSize":{"h":18,"w":33},"spriteSourceSize":{"x":0,"y":0}}},"meta":{"image":"icons.png","prefix":"images/icons/"}}
{"frames":{"icon_achievement@3x.png":{"frame":{"h":69,"idx":0,"w":65,"x":188,"y":385},"sourceSize":{"h":69,"w":65},"spriteSourceSize":{"x":0,"y":0}},"icon_chr@3x.png":{"frame":{"h":61,"idx":0,"w":57,"x":320,"y":448},"sourceSize":{"h":61,"w":57},"spriteSourceSize":{"x":0,"y":0}},"icon_discord.png":{"frame":{"h":384,"idx":0,"w":384,"x":0,"y":0},"sourceSize":{"h":384,"w":384},"spriteSourceSize":{"x":0,"y":0}},"icon_github.png":{"frame":{"h":384,"idx":0,"w":384,"x":385,"y":0},"sourceSize":{"h":384,"w":384},"spriteSourceSize":{"x":0,"y":0}},"icon_int@3x.png":{"frame":{"h":57,"idx":0,"w":54,"x":188,"y":455},"sourceSize":{"h":57,"w":54},"spriteSourceSize":{"x":0,"y":0}},"icon_mny@3x.png":{"frame":{"h":57,"idx":0,"w":54,"x":243,"y":455},"sourceSize":{"h":57,"w":54},"spriteSourceSize":{"x":0,"y":0}},"icon_rank@3x.png":{"frame":{"h":62,"idx":0,"w":72,"x":320,"y":385},"sourceSize":{"h":62,"w":72},"spriteSourceSize":{"x":0,"y":0}},"icon_save.png":{"frame":{"h":90,"idx":0,"w":90,"x":97,"y":385},"sourceSize":{"h":90,"w":90},"spriteSourceSize":{"x":0,"y":0}},"icon_spr@3x.png":{"frame":{"h":60,"idx":0,"w":57,"x":378,"y":448},"sourceSize":{"h":60,"w":57},"spriteSourceSize":{"x":0,"y":0}},"icon_str@3x.png":{"frame":{"h":57,"idx":0,"w":54,"x":393,"y":385},"sourceSize":{"h":57,"w":54},"spriteSourceSize":{"x":0,"y":0}},"icon_thanks@3x.png":{"frame":{"h":69,"idx":0,"w":65,"x":254,"y":385},"sourceSize":{"h":69,"w":65},"spriteSourceSize":{"x":0,"y":0}},"icon_themes.png":{"frame":{"h":96,"idx":0,"w":96,"x":0,"y":385},"sourceSize":{"h":96,"w":96},"spriteSourceSize":{"x":0,"y":0}},"icon_up@3x.png":{"frame":{"h":18,"idx":0,"w":33,"x":97,"y":476},"sourceSize":{"h":18,"w":33},"spriteSourceSize":{"x":0,"y":0}}},"meta":{"image":"icons.png","prefix":"images/icons/"}}

BIN
public/images/atlas/images/icons.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 49 KiB

After

Width:  |  Height:  |  Size: 53 KiB

1
public/images/atlas/images/radio.atlas Normal file
View File

@ -0,0 +1 @@
{"frames":{"radio_cyber.png":{"frame":{"h":300,"idx":0,"w":300,"x":0,"y":0},"sourceSize":{"h":300,"w":300},"spriteSourceSize":{"x":0,"y":0}},"radio_dark.png":{"frame":{"h":300,"idx":0,"w":300,"x":0,"y":301},"sourceSize":{"h":300,"w":300},"spriteSourceSize":{"x":0,"y":0}},"radio_light.png":{"frame":{"h":300,"idx":0,"w":300,"x":301,"y":0},"sourceSize":{"h":300,"w":300},"spriteSourceSize":{"x":0,"y":0}}},"meta":{"image":"radio.png","prefix":"images/radio/"}}

BIN
public/images/atlas/images/radio.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 83 KiB

9
src/app.js
View File

@ -133,6 +133,15 @@ class App{
this.resigterEvent();
this.#initLaya();
globalThis.$ui = UIManager.getInstance();
if(theme=='default') {
if(!localStorage.getItem('__')) {
localStorage.setItem('__', 1);
localStorage.setItem('theme', 'cyber');
}
theme = localStorage.getItem('theme');
}
$ui.theme = theme;
await this.#setLanguage(language);
await $ui.setLoading(UI.pages.LOADING);

52
src/ui/layaUI.max.all.js
View File

File diff suppressed because one or more lines are too long

1
src/ui/themes/cyber/main.js
View File

@ -6,6 +6,7 @@ export default class CyberMain extends ui.view.CyberTheme.CyberMainUI {
this.btnThanks.on(Laya.Event.CLICK, this, ()=>$ui.switchView(UI.pages.THANKS));
this.btnGithub.on(Laya.Event.CLICK, this, goto, ['github']);
this.btnDiscord.on(Laya.Event.CLICK, this, goto, ['discord']);
this.btnThemes.on(Laya.Event.CLICK, this, ()=>$ui.showDialog(UI.pages.THEMES));
this.on(Laya.Event.RESIZE, this, () => {
const scale = Math.max(
this.width / this.imgBg.width,

4
src/ui/themes/default/main.js
View File

@ -6,6 +6,7 @@ export default class Main extends ui.view.DefaultTheme.MainUI {
this.btnThanks.on(Laya.Event.CLICK, this, ()=>$ui.switchView(UI.pages.THANKS));
this.btnGithub.on(Laya.Event.CLICK, this, goto, ['github']);
this.btnDiscord.on(Laya.Event.CLICK, this, goto, ['discord']);
this.btnThemes.on(Laya.Event.CLICK, this, ()=>$ui.showDialog(UI.pages.THEMES));
}
static load() {
@ -18,5 +19,8 @@ export default class Main extends ui.view.DefaultTheme.MainUI {
this.btnDiscord.visible =
this.btnAchievement.visible =
this.btnThanks.visible = !!core.times;
const text = this.labSubTitle.text;
this.labSubTitle.text = ' ';
this.labSubTitle.text = text;
}
}

40
src/ui/themes/themes.js Normal file
View File

@ -0,0 +1,40 @@
export default class Themes extends ui.view.ThemesUI {
constructor() {
super();
this.btnClose.on(Laya.Event.CLICK, this, ()=>this.close());
this.btnOK.on(Laya.Event.CLICK, this, async ()=>{
const selected = this.selected;
if(!selected == $ui.theme) return this.close();
$ui.theme = selected;
await this.close();
$ui.switchView(UI.pages.MAIN);
});
}
static load() {
return ["images/atlas/images/radio.atlas"];
}
init() {
this.selected = localStorage.getItem('theme');
}
get selected() {
switch(this.radioTheme.selectedIndex) {
case 0: return 'cyber';
case 1: return 'dark';
case 2: return 'light';
default: return 'default';
}
}
set selected(v) {
let index;
switch(v) {
case 'cyber': index = 0; break;
case 'dark': index = 1; break;
case 'light': index = 2; break;
default: index = -1; break;
}
this.radioTheme.selectedIndex = index;
}
}

80
src/ui/themes/views.js
View File

@ -7,6 +7,7 @@ const pages = {
SUMMARY: 'SUMMARY',
ACHIEVEMENT: 'ACHIEVEMENT',
THANKS: 'THANKS',
THEMES: 'THEMES',
};
const popups = {
@ -24,6 +25,7 @@ const cyber = {
[pages.SUMMARY]: "cyber/summary",
[pages.ACHIEVEMENT]: "cyber/achievement",
[pages.THANKS]: "default/thanks",
[pages.THEMES]: 'themes',
},
popups: {
[popups.ACHIEVEMENT]: "cyber/popup/achievementPopup",
@ -53,6 +55,14 @@ const cyber = {
],
},
pages: {
[pages.MAIN]: {
vars: {
btnThemes: {
defaultColor: '#cccccc',
radius: 100,
},
}
},
[pages.THANKS]: {
vars: {
btnBack: {
@ -84,6 +94,24 @@ const cyber = {
radius: 4,
},
},
},
[pages.THEMES]: {
vars: {
btnOK: {
defaultColor: '#28b070',
defaultLabel: '#ffffff',
hoverColor: '#00ff00',
hoverLabel: '#ffffff',
radius: 80,
},
btnClose: {
defaultColor: '#eb3941',
defaultLabel: '#ffffff',
hoverColor: '#ff0000',
hoverLabel: '#ffffff',
radius: 80,
},
}
}
}
}
@ -99,6 +127,7 @@ const dark = {
[pages.SUMMARY]: "default/summary",
[pages.ACHIEVEMENT]: "default/achievement",
[pages.THANKS]: "default/thanks",
[pages.THEMES]: 'themes',
},
popups: {
[popups.ACHIEVEMENT]: "default/popup/achievementPopup",
@ -340,10 +369,13 @@ const dark = {
[pages.MAIN]: {
vars: {
btnRemake: 'btn_main',
labTitle: 'title',
labSubTitle: 'title',
btnThemes: {
defaultColor: '#cccccc',
radius: 100,
},
},
names: {
title: 'title',
btnSmall: 'btn_small',
}
},
@ -448,6 +480,24 @@ const dark = {
radius: 4,
},
},
},
[pages.THEMES]: {
vars: {
btnOK: {
defaultColor: '#28b070',
defaultLabel: '#ffffff',
hoverColor: '#00ff00',
hoverLabel: '#ffffff',
radius: 80,
},
btnClose: {
defaultColor: '#eb3941',
defaultLabel: '#ffffff',
hoverColor: '#ff0000',
hoverLabel: '#ffffff',
radius: 80,
},
}
}
},
popups: {
@ -475,6 +525,7 @@ const light = {
[pages.SUMMARY]: "default/summary",
[pages.ACHIEVEMENT]: "default/achievement",
[pages.THANKS]: "default/thanks",
[pages.THEMES]: 'themes',
},
popups: {
[popups.ACHIEVEMENT]: "default/popup/achievementPopup",
@ -710,10 +761,13 @@ const light = {
[pages.MAIN]: {
vars: {
btnRemake: 'btn_main',
labTitle: 'title',
labSubTitle: 'title',
btnThemes: {
defaultColor: '#cccccc',
radius: 100,
},
},
names: {
title: 'title',
btnSmall: 'btn_small',
}
},
@ -818,6 +872,24 @@ const light = {
radius: 4,
}
},
},
[pages.THEMES]: {
vars: {
btnOK: {
defaultColor: '#28b070',
defaultLabel: '#ffffff',
hoverColor: '#00ff00',
hoverLabel: '#ffffff',
radius: 80,
},
btnClose: {
defaultColor: '#eb3941',
defaultLabel: '#ffffff',
hoverColor: '#ff0000',
hoverLabel: '#ffffff',
radius: 80,
},
}
}
},
popups: {

83
src/ui/uiManager.js
View File

@ -7,7 +7,6 @@ export default class UIManager {
stage = Laya.stage;
}
this.#stage = stage;
this.theme = 'default';
stage.addChild(this.#viewLayer);
this.#viewLayer.zOrder = 1;
@ -26,7 +25,16 @@ export default class UIManager {
this.#popupLayer.top =
this.#popupLayer.bottom =
this.#popupLayer.left =
this.#popupLayer.right = 0;
this.#popupLayer.right =
this.#dialogMask.top =
this.#dialogMask.bottom =
this.#dialogMask.left =
this.#dialogMask.right = 0;
this.#dialogMask.graphics.drawRect(0, 0, 5000, 5000, '#000000');
this.#dialogMask.alpha = 0.4;
this.#dialogMask.on(Laya.Event.CLICK, this, ()=>{
this.#dialogStack[this.#dialogStack.length - 1]?.close?.();
})
}
static #instance = {};
@ -37,9 +45,10 @@ export default class UIManager {
#viewLayer = new Laya.Panel();
#dialogLayer = new Laya.Panel();
#popupLayer = new Laya.Panel();
#dialogMask = new Laya.Sprite();
#viewMap = new Map();
#class = new Map();
#theme = 'default';
#dialogStack = [];
static get inst() {
return this.getInstance();
@ -95,8 +104,12 @@ export default class UIManager {
// check if view is already loaded
let view = await this.#viewMap.get(className);
let timeout;
if(this.#loading) {
this.#stage.addChild(this.#loading);
timeout = setTimeout(
()=>this.#stage.addChild(this.#loading),
3000
);
}
const onProgress = this.#loading?.onProgress;
@ -121,7 +134,7 @@ export default class UIManager {
const resourceList = await view.constructor.load?.(args);
await this.loadRes(resourceList, preload, onProgress);
}
if(timeout) clearTimeout(timeout);
this.#loading?.removeSelf();
this.#config(view, viewName, type);
@ -151,12 +164,34 @@ export default class UIManager {
}
}
#showDialogStack() {
if(this.#dialogStack.length == 0) {
this.#dialogLayer.visible = false;
return;
}
this.#dialogLayer.visible = true;
this.#dialogStack.forEach((dialog, i)=>{
this.#dialogLayer.addChild(dialog);
dialog.zOrder = i;
})
this.#dialogLayer.addChild(this.#dialogMask);
const l = this.#dialogStack.length;
this.#dialogMask.zOrder = l -1;
this.#dialogStack[l -1].zOrder = l;
}
async showDialog(dialogName, args, actions) {
const className = this.#pages[dialogName];
const dialog = await this.getView(className, args, actions?.load, dialogName, 'pages');
dialog.centerX = dialog.centerY = 0;
const index = this.#dialogStack.indexOf(dialog);
if(index != -1) {
this.#dialogStack.splice(index, 1);
}
this.#dialogStack.push(dialog);
dialog.init?.(args);
this.#dialogLayer.addChild(dialog);
dialog.centerX = dialog.centerY = 0;
this.#showDialogStack();
const open = actions?.open || (async () => {
dialog.scaleX = 0;
@ -164,9 +199,20 @@ export default class UIManager {
await Laya.promises.Tween.to(dialog, { scaleX: 1, scaleY: 1 }, 300, Laya.Ease.backOut);
});
await open(dialog);
dialog.close = actions?.close || (async () => {
await Laya.promises.Tween.to(dialog, { scaleX: 0, scaleY: 0 }, 300, Laya.Ease.backOut);
});;
dialog.mouseThrough = true;
dialog.mouseEnabled = true;
dialog.close = async ()=>{
if(actions?.close) {
await actions.close();
} else {
await Laya.promises.Tween.to(dialog, { scaleX: 0, scaleY: 0 }, 300, Laya.Ease.strongIn);
}
const index = this.#dialogStack.indexOf(dialog);
if(index != -1) {
this.#dialogStack.splice(index, 1);
}
this.#showDialogStack();
}
this.#dialogLayer.addChild(dialog);
}
@ -180,7 +226,8 @@ export default class UIManager {
}
clearAllDialog() {
this.#dialogLayer.removeChildren();
this.#dialogStack = [];
this.#showDialogStack();
}
#config(view, key, type) {
@ -279,23 +326,27 @@ export default class UIManager {
return this.#currentView;
}
get currentDialog() {
return this.#dialogStack[this.#dialogStack.length -1];
}
get theme() {
return this.#theme;
return localStorage.getItem('theme');
}
set theme(value) {
this.#theme = value;
localStorage.setItem('theme', value);
this.#stage.bgColor = this.#configs.bgColor;
document?.querySelector?.('meta[name="theme-color"]')?.setAttribute?.('content', this.#configs.bgColor);
}
get #pages() {
return UIManager.theme(this.#theme, 'pages');
return UIManager.theme(this.theme, 'pages');
}
get #popups() {
return UIManager.theme(this.#theme, 'popups');
return UIManager.theme(this.theme, 'popups');
}
get #configs() {
return UIManager.theme(this.#theme, 'configs');
return UIManager.theme(this.theme, 'configs');
}
get common() {
return this.#configs.common;