mirror of
https://github.com/VickScarlet/lifeRestart.git
synced 2026-04-24 06:13:15 +08:00
update: toolchan
This commit is contained in:
Vick Scarlet
+245
-208
@@ -1,360 +1,397 @@
|
||||
import Views from './themes/views.js';
|
||||
import Views from './views.js'
|
||||
export default class UIManager {
|
||||
constructor(stage) {
|
||||
UIManager.#views = Views;
|
||||
UIManager.#views = Views
|
||||
|
||||
if(!stage) {
|
||||
stage = Laya.stage;
|
||||
if (!stage) {
|
||||
stage = Laya.stage
|
||||
}
|
||||
this.#stage = stage;
|
||||
this.#stage = stage
|
||||
|
||||
stage.addChild(this.#viewLayer);
|
||||
this.#viewLayer.zOrder = 1;
|
||||
stage.addChild(this.#dialogLayer);
|
||||
this.#dialogLayer.zOrder = 2;
|
||||
stage.addChild(this.#popupLayer);
|
||||
this.#popupLayer.zOrder = 3;
|
||||
stage.addChild(this.#viewLayer)
|
||||
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 =
|
||||
this.#viewLayer.right =
|
||||
this.#dialogLayer.top =
|
||||
this.#dialogLayer.bottom =
|
||||
this.#dialogLayer.left =
|
||||
this.#dialogLayer.right =
|
||||
this.#popupLayer.top =
|
||||
this.#popupLayer.bottom =
|
||||
this.#popupLayer.left =
|
||||
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?.();
|
||||
this.#viewLayer.bottom =
|
||||
this.#viewLayer.left =
|
||||
this.#viewLayer.right =
|
||||
this.#dialogLayer.top =
|
||||
this.#dialogLayer.bottom =
|
||||
this.#dialogLayer.left =
|
||||
this.#dialogLayer.right =
|
||||
this.#popupLayer.top =
|
||||
this.#popupLayer.bottom =
|
||||
this.#popupLayer.left =
|
||||
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 = {};
|
||||
static #views;
|
||||
#stage;
|
||||
#loading;
|
||||
#currentView;
|
||||
#viewLayer = new Laya.Panel();
|
||||
#dialogLayer = new Laya.Panel();
|
||||
#popupLayer = new Laya.Panel();
|
||||
#dialogMask = new Laya.Sprite();
|
||||
#viewMap = new Map();
|
||||
#class = new Map();
|
||||
#dialogStack = [];
|
||||
static #instance = {}
|
||||
static #views
|
||||
#stage
|
||||
#loading
|
||||
#currentView
|
||||
#viewLayer = new Laya.Panel()
|
||||
#dialogLayer = new Laya.Panel()
|
||||
#popupLayer = new Laya.Panel()
|
||||
#dialogMask = new Laya.Sprite()
|
||||
#viewMap = new Map()
|
||||
#class = new Map()
|
||||
#dialogStack = []
|
||||
|
||||
static get inst() {
|
||||
return this.getInstance();
|
||||
return this.getInstance()
|
||||
}
|
||||
static getInstance(name="default") {
|
||||
return this.#instance[name] || (this.#instance[name] = new UIManager());
|
||||
static getInstance(name = 'default') {
|
||||
return this.#instance[name] || (this.#instance[name] = new UIManager())
|
||||
}
|
||||
|
||||
static get pages() {
|
||||
return this.#views.pages;
|
||||
return this.#views.pages
|
||||
}
|
||||
|
||||
static get popups() {
|
||||
return this.#views.popups;
|
||||
return this.#views.popups
|
||||
}
|
||||
|
||||
static theme(theme, prop) {
|
||||
return this.#views.themes[theme][prop];
|
||||
return this.#views.themes[theme][prop]
|
||||
}
|
||||
|
||||
async setLoading(loading) {
|
||||
const className = this.#pages[loading];
|
||||
const view = await this.getView(className, null, null, loading);
|
||||
view.top = view.bottom = view.left = view.right = 0;
|
||||
view.zOrder = 4;
|
||||
this.#loading = view;
|
||||
const className = this.#pages[loading]
|
||||
const view = await this.getView(className, null, null, loading)
|
||||
view.top = view.bottom = view.left = view.right = 0
|
||||
view.zOrder = 4
|
||||
this.#loading = view
|
||||
}
|
||||
|
||||
async switchView(viewName, args, actions) {
|
||||
const className = this.#pages[viewName];
|
||||
const className = this.#pages[viewName]
|
||||
// get view instance
|
||||
const view = await this.getView(className, args, actions?.load, viewName, 'pages');
|
||||
const view = await this.getView(
|
||||
className,
|
||||
args,
|
||||
actions?.load,
|
||||
viewName,
|
||||
'pages'
|
||||
)
|
||||
|
||||
view.top = view.bottom = view.left = view.right = 0;
|
||||
view.top = view.bottom = view.left = view.right = 0
|
||||
// close current view
|
||||
this.clearAllDialog();
|
||||
await this.#currentView?.__close?.(view);
|
||||
await this.#currentView?.close?.(view);
|
||||
this.#viewLayer.removeChildren();
|
||||
this.clearAllDialog()
|
||||
await this.#currentView?.__close?.(view)
|
||||
await this.#currentView?.close?.(view)
|
||||
this.#viewLayer.removeChildren()
|
||||
|
||||
// open new view
|
||||
await view.init?.(args);
|
||||
await view.init?.(args)
|
||||
|
||||
this.#currentView = view;
|
||||
this.#viewLayer.addChild(view);
|
||||
this.#currentView = view
|
||||
this.#viewLayer.addChild(view)
|
||||
|
||||
view.__close = actions?.close;
|
||||
await actions?.open?.(view);
|
||||
await view.show?.();
|
||||
view.__close = actions?.close
|
||||
await actions?.open?.(view)
|
||||
await view.show?.()
|
||||
}
|
||||
|
||||
async getView(className, args, preload, viewName, type) {
|
||||
// check if view is already loaded
|
||||
let view = await this.#viewMap.get(className);
|
||||
let view = await this.#viewMap.get(className)
|
||||
|
||||
let timeout;
|
||||
if(this.#loading) {
|
||||
let timeout
|
||||
if (this.#loading) {
|
||||
timeout = setTimeout(
|
||||
()=>this.#stage.addChild(this.#loading),
|
||||
() => this.#stage.addChild(this.#loading),
|
||||
3000
|
||||
);
|
||||
)
|
||||
}
|
||||
const onProgress = this.#loading?.onProgress;
|
||||
const onProgress = this.#loading?.onProgress
|
||||
|
||||
if(!view) {
|
||||
if (!view) {
|
||||
// load view
|
||||
const ViewClass = await this.loadView(className);
|
||||
const resourceList = await ViewClass.load?.(args);
|
||||
const scanedResourceList = this.#loading? this.scanResource(ViewClass.uiView): [];
|
||||
if(preload) {
|
||||
preload = [].concat(preload).concat(scanedResourceList);
|
||||
const ViewClass = await this.loadView(className)
|
||||
const resourceList = await ViewClass.load?.(args)
|
||||
const scanedResourceList = this.#loading
|
||||
? this.scanResource(ViewClass.uiView)
|
||||
: []
|
||||
if (preload) {
|
||||
preload = [].concat(preload).concat(scanedResourceList)
|
||||
} else {
|
||||
preload = scanedResourceList;
|
||||
preload = scanedResourceList
|
||||
}
|
||||
await this.loadRes(resourceList, preload, onProgress);
|
||||
await this.loadRes(resourceList, preload, onProgress)
|
||||
|
||||
// create view
|
||||
view = new ViewClass();
|
||||
view = new ViewClass()
|
||||
// add view to map
|
||||
this.#viewMap.set(className, view);
|
||||
this.#viewMap.set(className, view)
|
||||
} else {
|
||||
// load resource
|
||||
const resourceList = await view.constructor.load?.(args);
|
||||
await this.loadRes(resourceList, preload, onProgress);
|
||||
const resourceList = await view.constructor.load?.(args)
|
||||
await this.loadRes(resourceList, preload, onProgress)
|
||||
}
|
||||
if(timeout) clearTimeout(timeout);
|
||||
this.#loading?.removeSelf();
|
||||
if (timeout) clearTimeout(timeout)
|
||||
this.#loading?.removeSelf()
|
||||
|
||||
this.#config(view, viewName, type);
|
||||
this.#config(view, viewName, type)
|
||||
// return view
|
||||
return view;
|
||||
return view
|
||||
}
|
||||
|
||||
async loadView(className) {
|
||||
// load view
|
||||
if(this.#class.has(className)) return this.#class.get(className);
|
||||
const c = (await import(`./themes/${className}.js`)).default;
|
||||
this.#class.set(className, c);
|
||||
return c;
|
||||
if (this.#class.has(className)) return this.#class.get(className)
|
||||
const views = import.meta.glob('./themes/**/*.js')
|
||||
const view = (await views[`./themes/${className}.js`]()).default
|
||||
this.#class.set(className, view)
|
||||
return view
|
||||
}
|
||||
|
||||
async loadRes(resourceList, preload, onProgress) {
|
||||
const cnt = (resourceList?.length || 0)
|
||||
+(preload?.length || 0);
|
||||
if(resourceList && resourceList.length) {
|
||||
const s = resourceList.length / cnt;
|
||||
await Laya.promises.loader.load(resourceList, Laya.Handler.create(null, prg=>onProgress?.(prg*s)));
|
||||
const cnt = (resourceList?.length || 0) + (preload?.length || 0)
|
||||
if (resourceList && resourceList.length) {
|
||||
const s = resourceList.length / cnt
|
||||
await Laya.promises.loader.load(
|
||||
resourceList,
|
||||
Laya.Handler.create(null, prg => onProgress?.(prg * s))
|
||||
)
|
||||
}
|
||||
if(preload && preload.length) {
|
||||
const s = 1 - preload.length / cnt;
|
||||
const l = preload.length / cnt;
|
||||
await Laya.promises.loader.load(preload, Laya.Handler.create(null, prg=>onProgress?.(prg*l+s)));
|
||||
if (preload && preload.length) {
|
||||
const s = 1 - preload.length / cnt
|
||||
const l = preload.length / cnt
|
||||
await Laya.promises.loader.load(
|
||||
preload,
|
||||
Laya.Handler.create(null, prg => onProgress?.(prg * l + s))
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
#showDialogStack() {
|
||||
if(this.#dialogStack.length == 0) {
|
||||
this.#dialogLayer.visible = false;
|
||||
return;
|
||||
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.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;
|
||||
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');
|
||||
const className = this.#pages[dialogName]
|
||||
const dialog = await this.getView(
|
||||
className,
|
||||
args,
|
||||
actions?.load,
|
||||
dialogName,
|
||||
'pages'
|
||||
)
|
||||
|
||||
const index = this.#dialogStack.indexOf(dialog);
|
||||
if(index != -1) {
|
||||
this.#dialogStack.splice(index, 1);
|
||||
const index = this.#dialogStack.indexOf(dialog)
|
||||
if (index != -1) {
|
||||
this.#dialogStack.splice(index, 1)
|
||||
}
|
||||
this.#dialogStack.push(dialog);
|
||||
dialog.init?.(args);
|
||||
dialog.centerX = dialog.centerY = 0;
|
||||
this.#showDialogStack();
|
||||
this.#dialogStack.push(dialog)
|
||||
dialog.init?.(args)
|
||||
dialog.centerX = dialog.centerY = 0
|
||||
this.#showDialogStack()
|
||||
|
||||
const open = actions?.open || (async () => {
|
||||
dialog.scaleX = 0;
|
||||
dialog.scaleY = 0;
|
||||
await Laya.promises.Tween.to(dialog, { scaleX: 1, scaleY: 1 }, 300, Laya.Ease.backOut);
|
||||
});
|
||||
await open(dialog);
|
||||
dialog.mouseThrough = true;
|
||||
dialog.mouseEnabled = true;
|
||||
dialog.close = async ()=>{
|
||||
if(actions?.close) {
|
||||
await actions.close();
|
||||
const open =
|
||||
actions?.open ||
|
||||
(async () => {
|
||||
dialog.scaleX = 0
|
||||
dialog.scaleY = 0
|
||||
await Laya.promises.Tween.to(
|
||||
dialog,
|
||||
{ scaleX: 1, scaleY: 1 },
|
||||
300,
|
||||
Laya.Ease.backOut
|
||||
)
|
||||
})
|
||||
await open(dialog)
|
||||
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);
|
||||
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);
|
||||
const index = this.#dialogStack.indexOf(dialog)
|
||||
if (index != -1) {
|
||||
this.#dialogStack.splice(index, 1)
|
||||
}
|
||||
this.#showDialogStack();
|
||||
this.#showDialogStack()
|
||||
}
|
||||
|
||||
this.#dialogLayer.addChild(dialog);
|
||||
this.#dialogLayer.addChild(dialog)
|
||||
}
|
||||
|
||||
async popup(type, args) {
|
||||
const className = this.#popups[type];
|
||||
const popup = await this.getView(className, args, null, type, 'popups');
|
||||
this.#popupLayer.addChild(popup);
|
||||
await popup.popup(args, this.#popupLayer);
|
||||
this.#popupLayer.removeChild(popup);
|
||||
const className = this.#popups[type]
|
||||
const popup = await this.getView(className, args, null, type, 'popups')
|
||||
this.#popupLayer.addChild(popup)
|
||||
await popup.popup(args, this.#popupLayer)
|
||||
this.#popupLayer.removeChild(popup)
|
||||
}
|
||||
|
||||
clearAllDialog() {
|
||||
this.#dialogStack = [];
|
||||
this.#showDialogStack();
|
||||
this.#dialogStack = []
|
||||
this.#showDialogStack()
|
||||
}
|
||||
|
||||
#config(view, key, type) {
|
||||
const config = this.#configs?.[type]?.[key];
|
||||
if(!config) return;
|
||||
if(view.config && view.config(config)) return;
|
||||
const config = this.#configs?.[type]?.[key]
|
||||
if (!config) return
|
||||
if (view.config && view.config(config)) return
|
||||
const applyConfig = (target, config) => {
|
||||
if(!target) return;
|
||||
if(typeof config == 'string') {
|
||||
config = this.#configs?.class?.[config];
|
||||
if (!target) return
|
||||
if (typeof config == 'string') {
|
||||
config = this.#configs?.class?.[config]
|
||||
}
|
||||
$_.deepMapSet(target, config);
|
||||
};
|
||||
$_.deepMapSet(target, config)
|
||||
}
|
||||
|
||||
if(config.names)
|
||||
for(const name in config.names)
|
||||
this.#deepGetChildsByName(view, name)
|
||||
.forEach(child => applyConfig(child, config.names[name]));
|
||||
|
||||
if(config.vars)
|
||||
for(const key in config.vars)
|
||||
applyConfig(view[key], config.vars[key]);
|
||||
if (config.names)
|
||||
for (const name in config.names)
|
||||
this.#deepGetChildsByName(view, name).forEach(child =>
|
||||
applyConfig(child, config.names[name])
|
||||
)
|
||||
|
||||
if (config.vars)
|
||||
for (const key in config.vars)
|
||||
applyConfig(view[key], config.vars[key])
|
||||
}
|
||||
|
||||
#deepGetChildsByName(parent, name) {
|
||||
const list = [];
|
||||
if(!parent || !parent._childs) return list;
|
||||
const list = []
|
||||
if (!parent || !parent._childs) return list
|
||||
|
||||
for(const child of parent._childs) {
|
||||
if(child.name == name) list.push(child);
|
||||
if(child._childs) list.push(...this.#deepGetChildsByName(child, name));
|
||||
for (const child of parent._childs) {
|
||||
if (child.name == name) list.push(child)
|
||||
if (child._childs)
|
||||
list.push(...this.#deepGetChildsByName(child, name))
|
||||
}
|
||||
return list;
|
||||
return list
|
||||
}
|
||||
|
||||
#cutPath(path) {
|
||||
path = ''+path;
|
||||
let index = path.length;
|
||||
path = '' + path
|
||||
let index = path.length
|
||||
do {
|
||||
index --;
|
||||
if(path[index] == '.') {
|
||||
break;
|
||||
index--
|
||||
if (path[index] == '.') {
|
||||
break
|
||||
}
|
||||
} while (index>0)
|
||||
return [
|
||||
path.substring(0, index),
|
||||
path.substring(index, path.length)
|
||||
];
|
||||
} while (index > 0)
|
||||
return [path.substring(0, index), path.substring(index, path.length)]
|
||||
}
|
||||
|
||||
#subSkin(skin, type) {
|
||||
if(!skin || !skin.replace(/\s/g, '')) return [];
|
||||
if (!skin || !skin.replace(/\s/g, '')) return []
|
||||
switch (type) {
|
||||
case 'ProgressBar':
|
||||
return [ skin, ...this.#progressBarSkin(skin) ];
|
||||
return [skin, ...this.#progressBarSkin(skin)]
|
||||
case 'ScrollBar':
|
||||
return [ skin, ...this.#scrollBarSkin(skin) ];
|
||||
return [skin, ...this.#scrollBarSkin(skin)]
|
||||
default:
|
||||
return [skin]
|
||||
}
|
||||
}
|
||||
|
||||
#progressBarSkin(skin) {
|
||||
if(!skin.replace(/\s/g, '')) return [];
|
||||
let p = this.#cutPath(skin);
|
||||
return [`${p[0]}$bar${p[1]}`];
|
||||
if (!skin.replace(/\s/g, '')) return []
|
||||
let p = this.#cutPath(skin)
|
||||
return [`${p[0]}$bar${p[1]}`]
|
||||
}
|
||||
|
||||
#scrollBarSkin(skin) {
|
||||
if(!skin.replace(/\s/g, '')) return [];
|
||||
let p = this.#cutPath(skin);
|
||||
if (!skin.replace(/\s/g, '')) return []
|
||||
let p = this.#cutPath(skin)
|
||||
return [
|
||||
`${p[0]}$bar${p[1]}`,
|
||||
`${p[0]}$up${p[1]}`,
|
||||
`${p[0]}$down${p[1]}`
|
||||
];
|
||||
`${p[0]}$down${p[1]}`,
|
||||
]
|
||||
}
|
||||
|
||||
scanResource(uiView) {
|
||||
if(!uiView) return [];
|
||||
const resourceList = [];
|
||||
if (!uiView) return []
|
||||
const resourceList = []
|
||||
|
||||
resourceList.push(...this.#subSkin(uiView.props?.skin, uiView.type));
|
||||
resourceList.push(...this.#subSkin(uiView.props?.hScrollBarSkin, 'ScrollBar'));
|
||||
resourceList.push(...this.#subSkin(uiView.props?.vScrollBarSkin, 'ScrollBar'));
|
||||
resourceList.push(...this.#subSkin(uiView.props?.skin, uiView.type))
|
||||
resourceList.push(
|
||||
...this.#subSkin(uiView.props?.hScrollBarSkin, 'ScrollBar')
|
||||
)
|
||||
resourceList.push(
|
||||
...this.#subSkin(uiView.props?.vScrollBarSkin, 'ScrollBar')
|
||||
)
|
||||
|
||||
uiView.child?.forEach(child => {
|
||||
resourceList.push(...this.scanResource(child));
|
||||
});
|
||||
resourceList.push(...this.scanResource(child))
|
||||
})
|
||||
|
||||
return resourceList;
|
||||
return resourceList
|
||||
}
|
||||
|
||||
get currentView() {
|
||||
return this.#currentView;
|
||||
return this.#currentView
|
||||
}
|
||||
|
||||
get currentDialog() {
|
||||
return this.#dialogStack[this.#dialogStack.length -1];
|
||||
return this.#dialogStack[this.#dialogStack.length - 1]
|
||||
}
|
||||
|
||||
get theme() {
|
||||
return localStorage.getItem('theme');
|
||||
return localStorage.getItem('theme')
|
||||
}
|
||||
set theme(value) {
|
||||
localStorage.setItem('theme', value);
|
||||
this.#stage.bgColor = this.#configs.bgColor;
|
||||
document?.querySelector?.('meta[name="theme-color"]')?.setAttribute?.('content', this.#configs.bgColor);
|
||||
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;
|
||||
return this.#configs.common
|
||||
}
|
||||
gradeColor(grade) {
|
||||
return this.common.grade[grade];
|
||||
return this.common.grade[grade]
|
||||
}
|
||||
gradeFilter(grade) {
|
||||
return this.common.filter[grade];
|
||||
return this.common.filter[grade]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10,32 +10,32 @@ const pages = {
|
||||
THEMES: 'THEMES',
|
||||
SAVELOAD: 'SAVELOAD',
|
||||
MODE: 'MODE',
|
||||
CELEBRITY: 'CELEBRITY'
|
||||
};
|
||||
CELEBRITY: 'CELEBRITY',
|
||||
}
|
||||
|
||||
const popups = {
|
||||
ACHIEVEMENT: 'POPUP_ACHIEVEMENT',
|
||||
MESSAGE: 'POPUP_MESSAGE',
|
||||
};
|
||||
}
|
||||
|
||||
const cyber = {
|
||||
pages: {
|
||||
[pages.LOADING]: "loading",
|
||||
[pages.MAIN]: "cyber/main",
|
||||
[pages.TALENT]: "cyber/talent",
|
||||
[pages.PROPERTY]: "cyber/property",
|
||||
[pages.TRAJECTORY]: "cyber/trajectory",
|
||||
[pages.SUMMARY]: "cyber/summary",
|
||||
[pages.ACHIEVEMENT]: "cyber/achievement",
|
||||
[pages.THANKS]: "default/thanks",
|
||||
[pages.LOADING]: 'loading',
|
||||
[pages.MAIN]: 'cyber/main',
|
||||
[pages.TALENT]: 'cyber/talent',
|
||||
[pages.PROPERTY]: 'cyber/property',
|
||||
[pages.TRAJECTORY]: 'cyber/trajectory',
|
||||
[pages.SUMMARY]: 'cyber/summary',
|
||||
[pages.ACHIEVEMENT]: 'cyber/achievement',
|
||||
[pages.THANKS]: 'default/thanks',
|
||||
[pages.THEMES]: 'themes',
|
||||
[pages.SAVELOAD]: 'saveload',
|
||||
[pages.MODE]: 'cyber/mode',
|
||||
[pages.CELEBRITY]: 'cyber/celebrity',
|
||||
},
|
||||
popups: {
|
||||
[popups.ACHIEVEMENT]: "cyber/popup/achievementPopup",
|
||||
[popups.MESSAGE]: "message",
|
||||
[popups.ACHIEVEMENT]: 'cyber/popup/achievementPopup',
|
||||
[popups.MESSAGE]: 'message',
|
||||
},
|
||||
configs: {
|
||||
bgColor: '#04131f',
|
||||
@@ -47,18 +47,8 @@ const cyber = {
|
||||
hoverStroke: '#ffa500',
|
||||
},
|
||||
defaultFontColor: '#cccccc',
|
||||
grade: [
|
||||
'#cccccc',
|
||||
'#55fffe',
|
||||
'#b17cff',
|
||||
'#ffce45',
|
||||
],
|
||||
filter: [
|
||||
'#ccccccff',
|
||||
'#55fffeff',
|
||||
'#b17cffff',
|
||||
'#ffce45ff',
|
||||
],
|
||||
grade: ['#cccccc', '#55fffe', '#b17cff', '#ffce45'],
|
||||
filter: ['#ccccccff', '#55fffeff', '#b17cffff', '#ffce45ff'],
|
||||
gradeBlk: [
|
||||
{
|
||||
visible: false,
|
||||
@@ -78,7 +68,7 @@ const cyber = {
|
||||
hoverColor: '#ffce45',
|
||||
visible: true,
|
||||
},
|
||||
]
|
||||
],
|
||||
},
|
||||
pages: {
|
||||
[pages.MAIN]: {
|
||||
@@ -97,7 +87,7 @@ const cyber = {
|
||||
lineWidth: 0,
|
||||
radius: 100,
|
||||
},
|
||||
}
|
||||
},
|
||||
},
|
||||
[pages.THANKS]: {
|
||||
vars: {
|
||||
@@ -147,7 +137,7 @@ const cyber = {
|
||||
hoverLabel: '#ffffff',
|
||||
radius: 80,
|
||||
},
|
||||
}
|
||||
},
|
||||
},
|
||||
[pages.SAVELOAD]: {
|
||||
vars: {
|
||||
@@ -184,31 +174,31 @@ const cyber = {
|
||||
radius: 80,
|
||||
defaultLabel: '#ffffff',
|
||||
hoverLabel: '#ffffff',
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
const dark = {
|
||||
pages: {
|
||||
[pages.LOADING]: "loading",
|
||||
[pages.MAIN]: "default/main",
|
||||
[pages.TALENT]: "default/talent",
|
||||
[pages.PROPERTY]: "default/property",
|
||||
[pages.TRAJECTORY]: "default/trajectory",
|
||||
[pages.SUMMARY]: "default/summary",
|
||||
[pages.ACHIEVEMENT]: "default/achievement",
|
||||
[pages.THANKS]: "default/thanks",
|
||||
[pages.LOADING]: 'loading',
|
||||
[pages.MAIN]: 'default/main',
|
||||
[pages.TALENT]: 'default/talent',
|
||||
[pages.PROPERTY]: 'default/property',
|
||||
[pages.TRAJECTORY]: 'default/trajectory',
|
||||
[pages.SUMMARY]: 'default/summary',
|
||||
[pages.ACHIEVEMENT]: 'default/achievement',
|
||||
[pages.THANKS]: 'default/thanks',
|
||||
[pages.THEMES]: 'themes',
|
||||
[pages.SAVELOAD]: 'saveload',
|
||||
[pages.MODE]: 'default/mode',
|
||||
[pages.CELEBRITY]: 'default/celebrity',
|
||||
},
|
||||
popups: {
|
||||
[popups.ACHIEVEMENT]: "default/popup/achievementPopup",
|
||||
[popups.MESSAGE]: "message",
|
||||
[popups.ACHIEVEMENT]: 'default/popup/achievementPopup',
|
||||
[popups.MESSAGE]: 'message',
|
||||
},
|
||||
configs: {
|
||||
bgColor: '#222831',
|
||||
@@ -248,18 +238,8 @@ const dark = {
|
||||
hoverColor: '#ffc500',
|
||||
hoverStroke: '#ffa500',
|
||||
},
|
||||
grade: [
|
||||
'#cccccc',
|
||||
'#55fffe',
|
||||
'#b17cff',
|
||||
'#ffce45',
|
||||
],
|
||||
filter: [
|
||||
'#ccccccff',
|
||||
'#55fffeff',
|
||||
'#b17cffff',
|
||||
'#ffce45ff',
|
||||
],
|
||||
grade: ['#cccccc', '#55fffe', '#b17cff', '#ffce45'],
|
||||
filter: ['#ccccccff', '#55fffeff', '#b17cffff', '#ffce45ff'],
|
||||
card: [
|
||||
{
|
||||
normal: {
|
||||
@@ -281,7 +261,7 @@ const dark = {
|
||||
hoverLabel: '#3b3b3b',
|
||||
lineWidth: 4,
|
||||
radius: 4,
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
normal: {
|
||||
@@ -303,7 +283,7 @@ const dark = {
|
||||
hoverLabel: '#3b3b3b',
|
||||
lineWidth: 4,
|
||||
radius: 4,
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
normal: {
|
||||
@@ -325,7 +305,7 @@ const dark = {
|
||||
hoverLabel: '#3b3b3b',
|
||||
lineWidth: 4,
|
||||
radius: 4,
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
normal: {
|
||||
@@ -347,8 +327,8 @@ const dark = {
|
||||
hoverLabel: '#3b3b3b',
|
||||
lineWidth: 4,
|
||||
radius: 4,
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
summary: [
|
||||
{
|
||||
@@ -360,7 +340,8 @@ const dark = {
|
||||
hoverLabel: '#3b3b3b',
|
||||
lineWidth: 2,
|
||||
radius: 0,
|
||||
},{
|
||||
},
|
||||
{
|
||||
defaultColor: '#6495ed',
|
||||
defaultStroke: '#f8f8f8',
|
||||
defaultLabel: '#eeeeee',
|
||||
@@ -369,7 +350,8 @@ const dark = {
|
||||
hoverLabel: '#3b3b3b',
|
||||
lineWidth: 2,
|
||||
radius: 0,
|
||||
},{
|
||||
},
|
||||
{
|
||||
defaultColor: '#e2a7ff',
|
||||
defaultStroke: '#f8f8f8',
|
||||
defaultLabel: '#eeeeee',
|
||||
@@ -388,7 +370,7 @@ const dark = {
|
||||
hoverLabel: '#3b3b3b',
|
||||
lineWidth: 2,
|
||||
radius: 0,
|
||||
}
|
||||
},
|
||||
],
|
||||
achievement: [
|
||||
{
|
||||
@@ -400,7 +382,8 @@ const dark = {
|
||||
hoverLabel: '#3b3b3b',
|
||||
lineWidth: 4,
|
||||
radius: 0,
|
||||
},{
|
||||
},
|
||||
{
|
||||
defaultColor: '#6495ed',
|
||||
defaultStroke: '#f8f8f8',
|
||||
defaultLabel: '#eeeeee',
|
||||
@@ -409,7 +392,8 @@ const dark = {
|
||||
hoverLabel: '#3b3b3b',
|
||||
lineWidth: 4,
|
||||
radius: 0,
|
||||
},{
|
||||
},
|
||||
{
|
||||
defaultColor: '#e2a7ff',
|
||||
defaultStroke: '#f8f8f8',
|
||||
defaultLabel: '#eeeeee',
|
||||
@@ -428,7 +412,7 @@ const dark = {
|
||||
hoverLabel: '#3b3b3b',
|
||||
lineWidth: 4,
|
||||
radius: 0,
|
||||
}
|
||||
},
|
||||
],
|
||||
characterItem: {
|
||||
name: {
|
||||
@@ -488,7 +472,7 @@ const dark = {
|
||||
},
|
||||
font_default: {
|
||||
color: '#eeeeee',
|
||||
}
|
||||
},
|
||||
},
|
||||
pages: {
|
||||
[pages.MAIN]: {
|
||||
@@ -512,14 +496,14 @@ const dark = {
|
||||
names: {
|
||||
title: 'title',
|
||||
btnSmall: 'btn_small',
|
||||
}
|
||||
},
|
||||
},
|
||||
[pages.TALENT]: {
|
||||
vars: {
|
||||
btnDrawCard: 'btn_main',
|
||||
btnNext: 'btn_main',
|
||||
title: 'title',
|
||||
}
|
||||
},
|
||||
},
|
||||
[pages.PROPERTY]: {
|
||||
vars: {
|
||||
@@ -530,9 +514,9 @@ const dark = {
|
||||
names: {
|
||||
font_default: 'font_default',
|
||||
property: {
|
||||
colorFilter: '#eeeeeeff'
|
||||
}
|
||||
}
|
||||
colorFilter: '#eeeeeeff',
|
||||
},
|
||||
},
|
||||
},
|
||||
[pages.TRAJECTORY]: {
|
||||
vars: {
|
||||
@@ -548,8 +532,8 @@ const dark = {
|
||||
radius: 4,
|
||||
},
|
||||
boxSpeed: {
|
||||
colorFilter: '#ffffffff'
|
||||
}
|
||||
colorFilter: '#ffffffff',
|
||||
},
|
||||
},
|
||||
names: {
|
||||
propertyBox: {
|
||||
@@ -571,8 +555,8 @@ const dark = {
|
||||
hoverLabel: '#222831',
|
||||
lineWidth: 0,
|
||||
radius: 4,
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
[pages.SUMMARY]: {
|
||||
vars: {
|
||||
@@ -581,7 +565,7 @@ const dark = {
|
||||
},
|
||||
names: {
|
||||
font_default: 'font_default',
|
||||
}
|
||||
},
|
||||
},
|
||||
[pages.ACHIEVEMENT]: {
|
||||
vars: {
|
||||
@@ -591,7 +575,7 @@ const dark = {
|
||||
names: {
|
||||
font_default: 'font_default',
|
||||
title: 'title',
|
||||
}
|
||||
},
|
||||
},
|
||||
[pages.THANKS]: {
|
||||
vars: {
|
||||
@@ -632,7 +616,7 @@ const dark = {
|
||||
hoverLabel: '#ffffff',
|
||||
radius: 80,
|
||||
},
|
||||
}
|
||||
},
|
||||
},
|
||||
[pages.SAVELOAD]: {
|
||||
vars: {
|
||||
@@ -669,20 +653,20 @@ const dark = {
|
||||
radius: 80,
|
||||
defaultLabel: '#ffffff',
|
||||
hoverLabel: '#ffffff',
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
[pages.MODE]: {
|
||||
names: {
|
||||
font_default: 'font_default',
|
||||
btn: 'btn_main',
|
||||
}
|
||||
},
|
||||
},
|
||||
[pages.CELEBRITY]: {
|
||||
vars: {
|
||||
btnRetry: 'btn_main',
|
||||
btnNext: 'btn_main2',
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
popups: {
|
||||
@@ -693,31 +677,31 @@ const dark = {
|
||||
defaultStroke: '#84ff55',
|
||||
hoverColor: '#292a28',
|
||||
hoverStroke: '#84ff55',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
const light = {
|
||||
pages: {
|
||||
[pages.LOADING]: "loading",
|
||||
[pages.MAIN]: "default/main",
|
||||
[pages.TALENT]: "default/talent",
|
||||
[pages.PROPERTY]: "default/property",
|
||||
[pages.TRAJECTORY]: "default/trajectory",
|
||||
[pages.SUMMARY]: "default/summary",
|
||||
[pages.ACHIEVEMENT]: "default/achievement",
|
||||
[pages.THANKS]: "default/thanks",
|
||||
[pages.LOADING]: 'loading',
|
||||
[pages.MAIN]: 'default/main',
|
||||
[pages.TALENT]: 'default/talent',
|
||||
[pages.PROPERTY]: 'default/property',
|
||||
[pages.TRAJECTORY]: 'default/trajectory',
|
||||
[pages.SUMMARY]: 'default/summary',
|
||||
[pages.ACHIEVEMENT]: 'default/achievement',
|
||||
[pages.THANKS]: 'default/thanks',
|
||||
[pages.THEMES]: 'themes',
|
||||
[pages.SAVELOAD]: 'saveload',
|
||||
[pages.MODE]: 'default/mode',
|
||||
[pages.CELEBRITY]: 'default/celebrity',
|
||||
},
|
||||
popups: {
|
||||
[popups.ACHIEVEMENT]: "default/popup/achievementPopup",
|
||||
[popups.MESSAGE]: "message",
|
||||
[popups.ACHIEVEMENT]: 'default/popup/achievementPopup',
|
||||
[popups.MESSAGE]: 'message',
|
||||
},
|
||||
configs: {
|
||||
bgColor: '#ffffff',
|
||||
@@ -757,18 +741,8 @@ const light = {
|
||||
hoverColor: '#ffc500',
|
||||
hoverStroke: '#ffa500',
|
||||
},
|
||||
grade: [
|
||||
'#000000',
|
||||
'#55fffe',
|
||||
'#b17cff',
|
||||
'#ffce45',
|
||||
],
|
||||
filter: [
|
||||
'#000000ff',
|
||||
'#55fffeff',
|
||||
'#b17cffff',
|
||||
'#ffce45ff',
|
||||
],
|
||||
grade: ['#000000', '#55fffe', '#b17cff', '#ffce45'],
|
||||
filter: ['#000000ff', '#55fffeff', '#b17cffff', '#ffce45ff'],
|
||||
card: [
|
||||
{
|
||||
normal: {
|
||||
@@ -790,7 +764,7 @@ const light = {
|
||||
hoverLabel: '#ffffff',
|
||||
lineWidth: 4,
|
||||
radius: 4,
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
normal: {
|
||||
@@ -812,7 +786,7 @@ const light = {
|
||||
hoverLabel: '#ffffff',
|
||||
lineWidth: 4,
|
||||
radius: 4,
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
normal: {
|
||||
@@ -834,7 +808,7 @@ const light = {
|
||||
hoverLabel: '#ffffff',
|
||||
lineWidth: 4,
|
||||
radius: 4,
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
normal: {
|
||||
@@ -856,8 +830,8 @@ const light = {
|
||||
hoverLabel: '#ffffff',
|
||||
lineWidth: 4,
|
||||
radius: 4,
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
summary: [
|
||||
{
|
||||
@@ -869,7 +843,8 @@ const light = {
|
||||
hoverLabel: '#ffffff',
|
||||
lineWidth: 4,
|
||||
radius: 4,
|
||||
},{
|
||||
},
|
||||
{
|
||||
defaultColor: '#6495ed',
|
||||
defaultStroke: '#f8f8f8',
|
||||
defaultLabel: '#ffffff',
|
||||
@@ -878,7 +853,8 @@ const light = {
|
||||
hoverLabel: '#666666',
|
||||
lineWidth: 4,
|
||||
radius: 4,
|
||||
},{
|
||||
},
|
||||
{
|
||||
defaultColor: '#e2a7ff',
|
||||
defaultStroke: '#f8f8f8',
|
||||
defaultLabel: '#ffffff',
|
||||
@@ -887,7 +863,8 @@ const light = {
|
||||
hoverLabel: '#666666',
|
||||
lineWidth: 4,
|
||||
radius: 4,
|
||||
},{
|
||||
},
|
||||
{
|
||||
defaultColor: '#ffa07a',
|
||||
defaultStroke: '#f8f8f8',
|
||||
defaultLabel: '#ffffff',
|
||||
@@ -908,7 +885,8 @@ const light = {
|
||||
hoverLabel: '#efefef',
|
||||
lineWidth: 4,
|
||||
radius: 0,
|
||||
},{
|
||||
},
|
||||
{
|
||||
defaultColor: '#6495ed',
|
||||
defaultStroke: '#cccccc',
|
||||
defaultLabel: '#eeeeee',
|
||||
@@ -917,7 +895,8 @@ const light = {
|
||||
hoverLabel: '#3b3b3b',
|
||||
lineWidth: 4,
|
||||
radius: 0,
|
||||
},{
|
||||
},
|
||||
{
|
||||
defaultColor: '#e2a7ff',
|
||||
defaultStroke: '#cccccc',
|
||||
defaultLabel: '#eeeeee',
|
||||
@@ -926,7 +905,8 @@ const light = {
|
||||
hoverLabel: '#3b3b3b',
|
||||
lineWidth: 4,
|
||||
radius: 0,
|
||||
},{
|
||||
},
|
||||
{
|
||||
defaultColor: '#ffa07a',
|
||||
defaultStroke: '#cccccc',
|
||||
defaultLabel: '#eeeeee',
|
||||
@@ -935,7 +915,7 @@ const light = {
|
||||
hoverLabel: '#3b3b3b',
|
||||
lineWidth: 4,
|
||||
radius: 0,
|
||||
}
|
||||
},
|
||||
],
|
||||
characterItem: {
|
||||
name: {
|
||||
@@ -995,7 +975,7 @@ const light = {
|
||||
},
|
||||
font_default: {
|
||||
color: '#000000',
|
||||
}
|
||||
},
|
||||
},
|
||||
pages: {
|
||||
[pages.MAIN]: {
|
||||
@@ -1019,14 +999,14 @@ const light = {
|
||||
names: {
|
||||
title: 'title',
|
||||
btnSmall: 'btn_small',
|
||||
}
|
||||
},
|
||||
},
|
||||
[pages.TALENT]: {
|
||||
vars: {
|
||||
btnDrawCard: 'btn_main',
|
||||
btnNext: 'btn_main',
|
||||
title: 'title',
|
||||
}
|
||||
},
|
||||
},
|
||||
[pages.PROPERTY]: {
|
||||
vars: {
|
||||
@@ -1037,9 +1017,9 @@ const light = {
|
||||
names: {
|
||||
font_default: 'font_default',
|
||||
property: {
|
||||
colorFilter: '#000000ff'
|
||||
}
|
||||
}
|
||||
colorFilter: '#000000ff',
|
||||
},
|
||||
},
|
||||
},
|
||||
[pages.TRAJECTORY]: {
|
||||
vars: {
|
||||
@@ -1055,8 +1035,8 @@ const light = {
|
||||
radius: 4,
|
||||
},
|
||||
boxSpeed: {
|
||||
colorFilter: '#666666ff'
|
||||
}
|
||||
colorFilter: '#666666ff',
|
||||
},
|
||||
},
|
||||
names: {
|
||||
propertyBox: {
|
||||
@@ -1078,8 +1058,8 @@ const light = {
|
||||
hoverLabel: '#222831',
|
||||
lineWidth: 0,
|
||||
radius: 4,
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
[pages.SUMMARY]: {
|
||||
vars: {
|
||||
@@ -1088,7 +1068,7 @@ const light = {
|
||||
},
|
||||
names: {
|
||||
font_default: 'font_default',
|
||||
}
|
||||
},
|
||||
},
|
||||
[pages.ACHIEVEMENT]: {
|
||||
vars: {
|
||||
@@ -1098,7 +1078,7 @@ const light = {
|
||||
names: {
|
||||
font_default: 'font_default',
|
||||
title: 'title',
|
||||
}
|
||||
},
|
||||
},
|
||||
[pages.THANKS]: {
|
||||
vars: {
|
||||
@@ -1120,7 +1100,7 @@ const light = {
|
||||
hoverStroke: '#dc76a9',
|
||||
hoverLabel: '#ffffff',
|
||||
radius: 4,
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
[pages.THEMES]: {
|
||||
@@ -1139,7 +1119,7 @@ const light = {
|
||||
hoverLabel: '#ffffff',
|
||||
radius: 80,
|
||||
},
|
||||
}
|
||||
},
|
||||
},
|
||||
[pages.SAVELOAD]: {
|
||||
vars: {
|
||||
@@ -1176,20 +1156,20 @@ const light = {
|
||||
radius: 80,
|
||||
defaultLabel: '#ffffff',
|
||||
hoverLabel: '#ffffff',
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
[pages.MODE]: {
|
||||
names: {
|
||||
font_default: 'font_default',
|
||||
btn: 'btn_main',
|
||||
}
|
||||
},
|
||||
},
|
||||
[pages.CELEBRITY]: {
|
||||
vars: {
|
||||
btnRetry: 'btn_main',
|
||||
btnNext: 'btn_main2',
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
popups: {
|
||||
@@ -1201,14 +1181,13 @@ const light = {
|
||||
hoverColor: '#ffffff',
|
||||
hoverStroke: '#84ff55',
|
||||
lineWidth: 1,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
const themes = { default: dark, cyber, dark, light };
|
||||
const themes = { default: dark, cyber, dark, light }
|
||||
|
||||
export default { themes, pages, popups };
|
||||
export default { themes, pages, popups }
|
||||
Reference in New Issue
Block a user