sinvo/lifeRestart
1
0
Fork 0
mirror of https://github.com/VickScarlet/lifeRestart.git synced 2026-04-08 08:58:55 +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

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;