diff --git a/packages/oh-my-live2d/src/config/config.ts b/packages/oh-my-live2d/src/config/config.ts index e113b31..e9e8d85 100644 --- a/packages/oh-my-live2d/src/config/config.ts +++ b/packages/oh-my-live2d/src/config/config.ts @@ -6,6 +6,7 @@ const libServicePath = 'https://lib.oml2d.com'; // 默认配置选项, 实例化时会与用户传进来的合并 export const DEFAULT_OPTIONS: DefaultOptions = { fixed: true, + primaryColor: '#58b0fc', sayHello: true, transitionTime: 1000, parentElement: document.body, diff --git a/packages/oh-my-live2d/src/config/style.ts b/packages/oh-my-live2d/src/config/style.ts index 3d97c3f..364d814 100644 --- a/packages/oh-my-live2d/src/config/style.ts +++ b/packages/oh-my-live2d/src/config/style.ts @@ -1,120 +1,122 @@ -export const globalStyle = ` -@keyframes oml2d-shake-tips{ - 0% { - transform: translate(-50%, 5%) scale(0.99); - } - 50% { - - transform: translate(-50%, 0%) scale(1); - } - 100% { - transform: translate(-50%, 5%) scale(0.99); - } -} - -@keyframes oml2d-stage-slide-in { - from { - transform: translateY(130%); - } - to { - transform: translateY(0%); - } -} - -@keyframes oml2d-stage-slide-out { - from { - transform: translateY(0%); - } - to { - transform: translateY(130%); - } -} - -@keyframes oml2d-display-tips { - 0% { - opacity: 0; - visibility: hidden; - } - 100% { - opacity: 1; - visibility: visible; - } -} - -@keyframes oml2d-hidden-tips { - 0% { - opacity: 1; - visibility: visible; - } - 100% { - opacity: 0; - visibility: hidden; - } -} -@keyframes oml2d-loading-rotate { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } -} -.oml2d-icon { - width: 1em; - height: 1em; - vertical-align: -0.15em; - fill: currentColor; - overflow: hidden; -} - -.oml2d-loading{ - animation-name: oml2d-loading-rotate; - animation-duration: 600ms; - animation-iteration-count: infinite; - animation-timing-function: linear; -} -.oml2d-menus-item { - width: 36px; - height: 36px; - border-radius: 50%; - display: flex; - justify-content: center; - box-sizing: border-box; - align-items: center; - transition: all 300ms; - color: #58b0fc; - cursor: pointer; - background-color: #fff; -} - -.oml2d-menus-item:hover { - background-color: #58b0fc; - color: #fff; - box-shadow: 0 0 5px #000; -} - -#oml2dMenus .oml2d-menus-item:not(:last-child) { - margin-bottom: 10px; -} - - - -@keyframes oml2d-status-bar-slide-out { - 0% { - transform: translateX(0%); - } - 100% { - transform: translateX(-120%); - } -} - - -@keyframes oml2d-status-bar-slide-in { - 0% { - transform: translateX(-120%); - } - 100% { - transform: translateX(0%); - } -} -`; +export const generateGlobalStyle = (primaryColor: string): string => { + return ` + @keyframes oml2d-shake-tips{ + 0% { + transform: translate(-50%, 5%) scale(0.99); + } + 50% { + + transform: translate(-50%, 0%) scale(1); + } + 100% { + transform: translate(-50%, 5%) scale(0.99); + } + } + + @keyframes oml2d-stage-slide-in { + from { + transform: translateY(130%); + } + to { + transform: translateY(0%); + } + } + + @keyframes oml2d-stage-slide-out { + from { + transform: translateY(0%); + } + to { + transform: translateY(130%); + } + } + + @keyframes oml2d-display-tips { + 0% { + opacity: 0; + visibility: hidden; + } + 100% { + opacity: 1; + visibility: visible; + } + } + + @keyframes oml2d-hidden-tips { + 0% { + opacity: 1; + visibility: visible; + } + 100% { + opacity: 0; + visibility: hidden; + } + } + @keyframes oml2d-loading-rotate { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } + } + .oml2d-icon { + width: 1em; + height: 1em; + vertical-align: -0.15em; + fill: currentColor; + overflow: hidden; + } + + .oml2d-loading{ + animation-name: oml2d-loading-rotate; + animation-duration: 600ms; + animation-iteration-count: infinite; + animation-timing-function: linear; + } + .oml2d-menus-item { + width: 36px; + height: 36px; + border-radius: 50%; + display: flex; + justify-content: center; + box-sizing: border-box; + align-items: center; + transition: all 300ms; + color: ${primaryColor}; + cursor: pointer; + background-color: #fff; + } + + .oml2d-menus-item:hover { + background-color: ${primaryColor}; + color: #fff; + box-shadow: 0 0 5px #000; + } + + #oml2dMenus .oml2d-menus-item:not(:last-child) { + margin-bottom: 10px; + } + + + + @keyframes oml2d-status-bar-slide-out { + 0% { + transform: translateX(0%); + } + 100% { + transform: translateX(-120%); + } + } + + + @keyframes oml2d-status-bar-slide-in { + 0% { + transform: translateX(-120%); + } + 100% { + transform: translateX(0%); + } + } + `; +}; diff --git a/packages/oh-my-live2d/src/modules/globalStyle.ts b/packages/oh-my-live2d/src/modules/globalStyle.ts new file mode 100644 index 0000000..c440735 --- /dev/null +++ b/packages/oh-my-live2d/src/modules/globalStyle.ts @@ -0,0 +1,16 @@ +import { generateGlobalStyle } from '../config/style.js'; +import { createElement } from '../utils/index.js'; + +type GlobalStyleType = { primaryColor: string }; +// 全局样式 +export class GlobalStyle { + styleSheet: HTMLElement; + constructor(private style: GlobalStyleType) { + this.styleSheet = createElement({ tagName: 'style', id: 'oml2dStyle', innerHtml: generateGlobalStyle(this.style.primaryColor) }); // 创建全局样式表 + document.head.append(this.styleSheet); + } + + reloadStyleSheet(style: GlobalStyleType): void { + this.styleSheet.innerHTML = generateGlobalStyle(style.primaryColor); + } +} diff --git a/packages/oh-my-live2d/src/modules/index.ts b/packages/oh-my-live2d/src/modules/index.ts index fb1d3a5..e5aca4e 100644 --- a/packages/oh-my-live2d/src/modules/index.ts +++ b/packages/oh-my-live2d/src/modules/index.ts @@ -1,6 +1,7 @@ import type { Application } from 'pixi.js'; import { isNumber, mergeDeep } from 'tianjie'; +import { GlobalStyle } from './globalStyle.js'; import { Menus } from './menus.js'; import { Model } from './model.js'; import { Stage } from './stage.js'; @@ -10,6 +11,7 @@ import { DEFAULT_OPTIONS } from '../config/index.js'; import { WindowSizeType } from '../constants/index.js'; import type { ApplicationType, + CSSProperties, DefaultOptions, HitAreaFramesType, LoadMethod, @@ -39,12 +41,24 @@ export class OhMyLive2D { private HitAreaFrames: HitAreaFramesType ) { this.options.sayHello && this.sayHello(); + + new GlobalStyle({ primaryColor: this.options.primaryColor }); // 加载全局样式 + this.stage = new Stage(this.options.parentElement, options); // 实例化舞台 - this.statusBar = new StatusBar(this.options.parentElement); // 实例化状态条 + + this.statusBar = new StatusBar(this.options.parentElement, { + info: this.options.primaryColor, + error: '#F08080' + }); + this.tips = new Tips(this.stage.element, this.options.tips); // 提示框 + this.menus = new Menus(this.stage.element); // 菜单 + this.application = this.createApplication(); + this.initialize(); + this.setCommonStyle(); void checkVersion(); } @@ -60,6 +74,14 @@ export class OhMyLive2D { this.registerEvents(); } + // 设置公共的样式 + setCommonStyle(): void { + const commonStyle: CSSProperties = { backgroundColor: this.options.primaryColor }; + + this.tips.setStyle(commonStyle); + this.statusBar.setStyle(commonStyle); + } + // 校验当前窗口大小 verifyWindowSizeType(): void { if (this.mediaQuery.matches) { @@ -168,7 +190,6 @@ export class OhMyLive2D { // copy 事件 window.addEventListener('copy', () => { - // console.log('copy!'); this.tips.copy(); }); diff --git a/packages/oh-my-live2d/src/modules/stage.ts b/packages/oh-my-live2d/src/modules/stage.ts index 17ac5d5..29d74e3 100644 --- a/packages/oh-my-live2d/src/modules/stage.ts +++ b/packages/oh-my-live2d/src/modules/stage.ts @@ -1,6 +1,6 @@ import { mergeDeep } from 'tianjie'; -import { CONFIG, globalStyle } from '../config/index.js'; +import { CONFIG } from '../config/index.js'; import type { CSSProperties, Options } from '../types/index.js'; import { createElement, setStyleForElement } from '../utils/index.js'; @@ -52,22 +52,12 @@ export class Stage { this.setStyle({ width: '0px', height: '0px', - // position: 'relative' position: this.options.fixed ? 'fixed' : 'relative', left: 0, bottom: 0, zIndex: '9997', transform: 'translateY(130%)' }); - // this.wrapperElement.style.position = this.options.fixed ? 'fixed' : 'relative'; - // this.wrapperElement.style.overflow = 'hidden'; - // this.wrapperElement.style.left = '0'; - // this.wrapperElement.style.bottom = '0'; - // this.wrapperElement.style.zIndex = '9999'; - - const styleSheet = createElement({ tagName: 'style', id: 'oml2dStyle', innerHtml: globalStyle }); // 创建全局样式表 - - document.head.append(styleSheet); } setStyle(style: CSSProperties, callback?: () => void): void { diff --git a/packages/oh-my-live2d/src/modules/status-bar.ts b/packages/oh-my-live2d/src/modules/status-bar.ts index aee06cf..09d12c2 100644 --- a/packages/oh-my-live2d/src/modules/status-bar.ts +++ b/packages/oh-my-live2d/src/modules/status-bar.ts @@ -21,16 +21,16 @@ export class StatusBar { element: HTMLElement; transitionTime = 800; status: Status = Status.hidden; - stateColor = { - info: '#58b0fc', - error: '#F08080' - }; private style: CSSProperties = {}; private timer = 0; - constructor(wrapperElement: HTMLElement) { + constructor( + private wrapperElement: HTMLElement, + private stateColor: { info: string; error: string } + ) { this.element = createElement({ id: CONFIG.statusBarId, tagName: 'div', innerText: 'hello' }); - wrapperElement.append(this.element); + this.wrapperElement.append(this.element); + this.initStyle(); } @@ -44,7 +44,6 @@ export class StatusBar { bottom: '80px', padding: '7px 5px', zIndex: '9998', - backgroundColor: '#58b0fc', borderStyle: 'solid', borderColor: '#fff', fontWeight: 'bold', @@ -90,7 +89,6 @@ export class StatusBar { animationFillMode: 'forwards' }); setTimeout(() => { - // this.setStyle({ backgroundColor: this.stateColor.info }); resolve(this.status); }, this.transitionTime); }); @@ -117,7 +115,7 @@ export class StatusBar { * 专门处理加载失败, 需要传入一个重新加载的方法 * @param reloadFn */ - loadingError(reloadFn: () => any): void { + loadingError(reloadFn: () => void): void { this.popup('加载失败', SystemState.error, false); // this.setStyle({}) diff --git a/packages/oh-my-live2d/src/modules/tips.ts b/packages/oh-my-live2d/src/modules/tips.ts index 9db260e..2703130 100644 --- a/packages/oh-my-live2d/src/modules/tips.ts +++ b/packages/oh-my-live2d/src/modules/tips.ts @@ -9,7 +9,6 @@ export class Tips { private element: HTMLElement; // private status: Status = Status.Hidden; idlePlayer?: IdleTimer; - private closeTimer = 0; private transitionTime = 1000; // 默认的消息过渡动画持续时长 private style: CSSProperties = {}; @@ -34,7 +33,6 @@ export class Tips { fontSize: '18px', borderRadius: '10px', filter: 'drop-shadow(0 0 5px #999)', - backgroundColor: '#58b0fc', border: '2px solid #fff', color: '#fff', padding: '3px 5px', diff --git a/packages/oh-my-live2d/src/types/options.ts b/packages/oh-my-live2d/src/types/options.ts index b01c20f..fadc2c3 100644 --- a/packages/oh-my-live2d/src/types/options.ts +++ b/packages/oh-my-live2d/src/types/options.ts @@ -16,6 +16,10 @@ export interface Options { */ importType?: ImportType; + /** + * 主题色 + */ + primaryColor?: string; /** * 自定义 Cubism SDK 外部资源地址 * diff --git a/tests/vite-app/public/index.min.js b/tests/vite-app/public/index.min.js index 2a51504..aa5aa42 100644 --- a/tests/vite-app/public/index.min.js +++ b/tests/vite-app/public/index.min.js @@ -1,131 +1,131 @@ -(function(d,a){typeof exports=="object"&&typeof module!="undefined"?a(exports):typeof define=="function"&&define.amd?define(["exports"],a):(d=typeof globalThis!="undefined"?globalThis:d||self,a(d.OML2D={}))})(this,function(d){"use strict";var J=Object.defineProperty;var N=Object.getOwnPropertySymbols;var Z=Object.prototype.hasOwnProperty,tt=Object.prototype.propertyIsEnumerable;var D=(d,a,r)=>a in d?J(d,a,{enumerable:!0,configurable:!0,writable:!0,value:r}):d[a]=r,C=(d,a)=>{for(var r in a||(a={}))Z.call(a,r)&&D(d,r,a[r]);if(N)for(var r of N(a))tt.call(a,r)&&D(d,r,a[r]);return d};var o=(d,a,r)=>(D(d,typeof a!="symbol"?a+"":a,r),r);var v=(d,a,r)=>new Promise((L,T)=>{var P=w=>{try{h(r.next(w))}catch(p){T(p)}},f=w=>{try{h(r.throw(w))}catch(p){T(p)}},h=w=>w.done?L(w.value):Promise.resolve(w.value).then(P,f);h((r=r.apply(d,a)).next())});const a=i=>{const t=i.length;if(t===0)return;const e=Math.floor(Math.random()*t);return i[e]},r=(i,t)=>{let e;return{start:function(){return v(this,null,function*(){const s=()=>v(this,null,function*(){e&&(yield i(),clearTimeout(e),e=setTimeout(s,t))});e||(clearTimeout(e),e=setTimeout(s,t))})},stop:function(){clearTimeout(e),e=void 0}}},L=i=>i!==null&&typeof i=="object"&&!Array.isArray(i),T=i=>typeof i=="number"||i instanceof Number,P=i=>typeof i=="function",f=(i,t)=>{const e=Object.assign({},i);return L(i)&&L(t)&&Object.keys(t).forEach(s=>{L(t[s])?s in i?e[s]=f(i[s],t[s]):Object.assign(e,{[s]:t[s]}):Object.assign(e,{[s]:t[s]})}),e},h="https://lib.oml2d.com",w={fixed:!0,sayHello:!0,transitionTime:1e3,parentElement:document.body,importType:"complete",libraryUrls:{cubism2:`${h}/live2d.min.js`,cubism5:`${h}/live2dcubismcore.min.js`},models:[],tips:{style:{},idleTips:{wordTheDay:!1,message:[],duration:5e3,interval:1e4,priority:2},welcomeTips:{message:{daybreak:"早上好！一日之计在于晨，美好的一天就要开始了。",morning:"上午好！工作顺利嘛，不要久坐，多起来走动走动哦！",noon:"中午了，工作了一个上午，现在是午餐时间！",afternoon:"午后很容易犯困呢，来杯咖啡吧~",dusk:"傍晚了！工作一天幸苦啦~",night:"晚上好，今天过得怎么样呢？",lateNight:"已经这么晚了呀，早点休息吧，晚安~",weeHours:"这么晚还不睡吗？当心熬夜秃头哦！"},duration:6e3,priority:3},copyTips:{duration:3e3,priority:3,message:["你复制了什么内容呢?记得注明出处哦~"]}}},p={PIXI:`${h}/pixi.min.js`,PIXI_LIVE2D_DISPLAY:`${h}/pixi-live2d-display.min.js`,PIXI_LIVE2D_DISPLAY_CUBISM2:`${h}/pixi-live2d-display-cubism2.min.js`,PIXI_LIVE2D_DISPLAY_CUBISM4:`${h}/pixi-live2d-display-cubism4.min.js`,PIXI_LIVE2D_DISPLAY_EXTRA:`${h}/pixi-live2d-display-extra.min.js`},E={stageId:"oml2dStage",canvasId:"oml2dCanvas",statusBarId:"oml2dStatusBar",tipsId:"oml2dTips",menusId:"oml2dMenus"},H=[{id:"Rest",name:"icon-bed",title:"休息"},{id:"SwitchModel",name:"icon-a-userswitch-fill",title:"切换模型"},{id:"About",name:"icon-info-circle-fill",title:"关于"}],B=` -@keyframes oml2d-shake-tips{ - 0% { - transform: translate(-50%, 5%) scale(0.99); - } - 50% { - - transform: translate(-50%, 0%) scale(1); - } - 100% { - transform: translate(-50%, 5%) scale(0.99); - } -} - -@keyframes oml2d-stage-slide-in { - from { - transform: translateY(130%); - } - to { - transform: translateY(0%); - } -} - -@keyframes oml2d-stage-slide-out { - from { - transform: translateY(0%); - } - to { - transform: translateY(130%); - } -} - -@keyframes oml2d-display-tips { - 0% { - opacity: 0; - visibility: hidden; - } - 100% { - opacity: 1; - visibility: visible; - } -} - -@keyframes oml2d-hidden-tips { - 0% { - opacity: 1; - visibility: visible; - } - 100% { - opacity: 0; - visibility: hidden; - } -} -@keyframes oml2d-loading-rotate { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } -} -.oml2d-icon { - width: 1em; - height: 1em; - vertical-align: -0.15em; - fill: currentColor; - overflow: hidden; -} - -.oml2d-loading{ - animation-name: oml2d-loading-rotate; - animation-duration: 600ms; - animation-iteration-count: infinite; - animation-timing-function: linear; -} -.oml2d-menus-item { - width: 36px; - height: 36px; - border-radius: 50%; - display: flex; - justify-content: center; - box-sizing: border-box; - align-items: center; - transition: all 300ms; - color: #58b0fc; - cursor: pointer; - background-color: #fff; -} - -.oml2d-menus-item:hover { - background-color: #58b0fc; - color: #fff; - box-shadow: 0 0 5px #000; -} - -#oml2dMenus .oml2d-menus-item:not(:last-child) { - margin-bottom: 10px; -} - - - -@keyframes oml2d-status-bar-slide-out { - 0% { - transform: translateX(0%); - } - 100% { - transform: translateX(-120%); - } -} - - -@keyframes oml2d-status-bar-slide-in { - 0% { - transform: translateX(-120%); - } - 100% { - transform: translateX(0%); - } -} -`,$=function(i){const{message:t}=i;let e="";const s=new Date().getHours().toString(),n=/^[5-7]$/,l=/^(?:[8-9]|1[0-1])$/,c=/^(1[2-3])$/,g=/^1[4-7]$/,I=/^1[8-9]$/,x=/^2[0-1]$/,M=/^2[2-3]$/;return n.test(s)?e=t.daybreak:l.test(s)?e=t==null?void 0:t.morning:c.test(s)?e=t==null?void 0:t.noon:g.test(s)?e=t==null?void 0:t.afternoon:I.test(s)?e=t==null?void 0:t.dusk:x.test(s)?e=t==null?void 0:t.night:M.test(s)?e=t==null?void 0:t.lateNight:e=t==null?void 0:t.weeHours,e},j=()=>console.log(` +(function(d,a){typeof exports=="object"&&typeof module!="undefined"?a(exports):typeof define=="function"&&define.amd?define(["exports"],a):(d=typeof globalThis!="undefined"?globalThis:d||self,a(d.OML2D={}))})(this,function(d){"use strict";var Z=Object.defineProperty;var N=Object.getOwnPropertySymbols;var tt=Object.prototype.hasOwnProperty,et=Object.prototype.propertyIsEnumerable;var D=(d,a,r)=>a in d?Z(d,a,{enumerable:!0,configurable:!0,writable:!0,value:r}):d[a]=r,H=(d,a)=>{for(var r in a||(a={}))tt.call(a,r)&&D(d,r,a[r]);if(N)for(var r of N(a))et.call(a,r)&&D(d,r,a[r]);return d};var o=(d,a,r)=>(D(d,typeof a!="symbol"?a+"":a,r),r);var g=(d,a,r)=>new Promise((L,x)=>{var _=m=>{try{T(r.next(m))}catch(O){x(O)}},y=m=>{try{T(r.throw(m))}catch(O){x(O)}},T=m=>m.done?L(m.value):Promise.resolve(m.value).then(_,y);T((r=r.apply(d,a)).next())});const a=i=>{const t=i.length;if(t===0)return;const e=Math.floor(Math.random()*t);return i[e]},r=(i,t)=>{let e;return{start:function(){return g(this,null,function*(){const s=()=>g(this,null,function*(){e&&(yield i(),clearTimeout(e),e=setTimeout(s,t))});e||(clearTimeout(e),e=setTimeout(s,t))})},stop:function(){clearTimeout(e),e=void 0}}},L=i=>i!==null&&typeof i=="object"&&!Array.isArray(i),x=i=>typeof i=="number"||i instanceof Number,_=i=>typeof i=="function",y=(i,t)=>{const e=Object.assign({},i);return L(i)&&L(t)&&Object.keys(t).forEach(s=>{L(t[s])?s in i?e[s]=y(i[s],t[s]):Object.assign(e,{[s]:t[s]}):Object.assign(e,{[s]:t[s]})}),e},T=i=>` + @keyframes oml2d-shake-tips{ + 0% { + transform: translate(-50%, 5%) scale(0.99); + } + 50% { + + transform: translate(-50%, 0%) scale(1); + } + 100% { + transform: translate(-50%, 5%) scale(0.99); + } + } + + @keyframes oml2d-stage-slide-in { + from { + transform: translateY(130%); + } + to { + transform: translateY(0%); + } + } + + @keyframes oml2d-stage-slide-out { + from { + transform: translateY(0%); + } + to { + transform: translateY(130%); + } + } + + @keyframes oml2d-display-tips { + 0% { + opacity: 0; + visibility: hidden; + } + 100% { + opacity: 1; + visibility: visible; + } + } + + @keyframes oml2d-hidden-tips { + 0% { + opacity: 1; + visibility: visible; + } + 100% { + opacity: 0; + visibility: hidden; + } + } + @keyframes oml2d-loading-rotate { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } + } + .oml2d-icon { + width: 1em; + height: 1em; + vertical-align: -0.15em; + fill: currentColor; + overflow: hidden; + } + + .oml2d-loading{ + animation-name: oml2d-loading-rotate; + animation-duration: 600ms; + animation-iteration-count: infinite; + animation-timing-function: linear; + } + .oml2d-menus-item { + width: 36px; + height: 36px; + border-radius: 50%; + display: flex; + justify-content: center; + box-sizing: border-box; + align-items: center; + transition: all 300ms; + color: ${i}; + cursor: pointer; + background-color: #fff; + } + + .oml2d-menus-item:hover { + background-color: ${i}; + color: #fff; + box-shadow: 0 0 5px #000; + } + + #oml2dMenus .oml2d-menus-item:not(:last-child) { + margin-bottom: 10px; + } + + + + @keyframes oml2d-status-bar-slide-out { + 0% { + transform: translateX(0%); + } + 100% { + transform: translateX(-120%); + } + } + + + @keyframes oml2d-status-bar-slide-in { + 0% { + transform: translateX(-120%); + } + 100% { + transform: translateX(0%); + } + } + `,m="https://lib.oml2d.com",O={fixed:!0,primaryColor:"#58b0fc",sayHello:!0,transitionTime:1e3,parentElement:document.body,importType:"complete",libraryUrls:{cubism2:`${m}/live2d.min.js`,cubism5:`${m}/live2dcubismcore.min.js`},models:[],tips:{style:{},idleTips:{wordTheDay:!1,message:[],duration:5e3,interval:1e4,priority:2},welcomeTips:{message:{daybreak:"早上好！一日之计在于晨，美好的一天就要开始了。",morning:"上午好！工作顺利嘛，不要久坐，多起来走动走动哦！",noon:"中午了，工作了一个上午，现在是午餐时间！",afternoon:"午后很容易犯困呢，来杯咖啡吧~",dusk:"傍晚了！工作一天幸苦啦~",night:"晚上好，今天过得怎么样呢？",lateNight:"已经这么晚了呀，早点休息吧，晚安~",weeHours:"这么晚还不睡吗？当心熬夜秃头哦！"},duration:6e3,priority:3},copyTips:{duration:3e3,priority:3,message:["你复制了什么内容呢?记得注明出处哦~"]}}},I={PIXI:`${m}/pixi.min.js`,PIXI_LIVE2D_DISPLAY:`${m}/pixi-live2d-display.min.js`,PIXI_LIVE2D_DISPLAY_CUBISM2:`${m}/pixi-live2d-display-cubism2.min.js`,PIXI_LIVE2D_DISPLAY_CUBISM4:`${m}/pixi-live2d-display-cubism4.min.js`,PIXI_LIVE2D_DISPLAY_EXTRA:`${m}/pixi-live2d-display-extra.min.js`},E={stageId:"oml2dStage",canvasId:"oml2dCanvas",statusBarId:"oml2dStatusBar",tipsId:"oml2dTips",menusId:"oml2dMenus"},$=[{id:"Rest",name:"icon-bed",title:"休息"},{id:"SwitchModel",name:"icon-a-userswitch-fill",title:"切换模型"},{id:"About",name:"icon-info-circle-fill",title:"关于"}],B=function(i){const{message:t}=i;let e="";const s=new Date().getHours().toString(),n=/^[5-7]$/,l=/^(?:[8-9]|1[0-1])$/,c=/^(1[2-3])$/,f=/^1[4-7]$/,w=/^1[8-9]$/,b=/^2[0-1]$/,M=/^2[2-3]$/;return n.test(s)?e=t.daybreak:l.test(s)?e=t==null?void 0:t.morning:c.test(s)?e=t==null?void 0:t.noon:f.test(s)?e=t==null?void 0:t.afternoon:w.test(s)?e=t==null?void 0:t.dusk:b.test(s)?e=t==null?void 0:t.night:M.test(s)?e=t==null?void 0:t.lateNight:e=t==null?void 0:t.weeHours,e},j=()=>console.log(` %c 🎉🎉🎉 %c %c ✨ oh-my-live2d v0.9.0 - https://oml2d.com Happy Hacking !! ✨ %c %c 🎉🎉🎉 -`,"background: #add7fb; padding:5px 0;","background: #58b0fc; padding:5px 0;","color: #fff; background: #030307; padding:5px 0;","background: #58b0fc; padding:5px 0;","background: #add7fb; padding:5px 0;"),k=i=>{const t=C({},i);return"width"in i&&T(i.width)&&(t.width=`${i.width}px`),"height"in i&&T(i.height)&&(t.height=`${i.height}px`),t},O=(i,t)=>{Object.assign(t.style,i)},X=i=>new Promise(t=>setTimeout(t,i)),b=i=>{const t=document.createElement(i.tagName);return t.id=i.id,i.className&&(t.className=i.className),i.dataName&&t.setAttribute("data-name",i.dataName),i.children&&i.children.forEach(e=>{t.appendChild(b(e))}),i.innerHtml&&(t.innerHTML=i.innerHtml),i.innerText&&(t.innerText=i.innerText),t},u=i=>new Promise(t=>{const e=document.createElement("script");document.head.append(e),e.src=i,e.addEventListener("load",()=>{t()})}),F=(i,t)=>v(this,null,function*(){switch(i){case"cubism2":yield u(t[i]),yield u(p.PIXI),yield u(p.PIXI_LIVE2D_DISPLAY_CUBISM2);break;case"cubism5":yield u(t[i]),yield u(p.PIXI),yield u(p.PIXI_LIVE2D_DISPLAY_CUBISM4);break;default:yield Promise.all([u(t.cubism2),u(t.cubism5)]),yield u(p.PIXI),yield u(p.PIXI_LIVE2D_DISPLAY);break}yield u(p.PIXI_LIVE2D_DISPLAY_EXTRA)}),R=()=>v(this,null,function*(){const i=yield fetch("https://unpkg.com/oh-my-live2d/package.json"),{version:t}=yield i.json();t!=="0.9.0"&&console.warn("[oml2d] 检查到 oh-my-live2d 存在最新版:",`v${t}`,"请前往: https://oml2d.com 以获得最新版详细信息, 并及时更新.")}),A=i=>v(this,null,function*(){const e=yield(yield fetch("https://v1.hitokoto.cn/")).json();return i?i(e):`${e.hitokoto} -- ${e.from}`});class V{constructor(t){o(this,"element");o(this,"style",{});o(this,"clickItem");this.stageElement=t,this.element=b({id:E.menusId,tagName:"div",className:E.menusId}),this.createMenuItem(),this.stageElement.append(this.element),this.ininStyle()}ininStyle(){this.setStyle({transition:"all 500ms",visibility:"hidden",opacity:0,position:"absolute",right:0,bottom:"10%",zIndex:"9999",fontSize:"26px"}),this.stageElement.addEventListener("mouseover",()=>this.setStyle({opacity:1,visibility:"visible"})),this.stageElement.addEventListener("mouseout",()=>this.setStyle({opacity:0,visibility:"hidden"}))}createMenuItem(){const t=H.map(e=>{const s=b({id:e.id,tagName:"div",dataName:e.id,className:"oml2d-menus-item",innerHtml:` +`,"background: #add7fb; padding:5px 0;","background: #58b0fc; padding:5px 0;","color: #fff; background: #030307; padding:5px 0;","background: #58b0fc; padding:5px 0;","background: #add7fb; padding:5px 0;"),k=i=>{const t=H({},i);return"width"in i&&x(i.width)&&(t.width=`${i.width}px`),"height"in i&&x(i.height)&&(t.height=`${i.height}px`),t},P=(i,t)=>{Object.assign(t.style,i)},X=i=>new Promise(t=>setTimeout(t,i)),v=i=>{const t=document.createElement(i.tagName);return t.id=i.id,i.className&&(t.className=i.className),i.dataName&&t.setAttribute("data-name",i.dataName),i.children&&i.children.forEach(e=>{t.appendChild(v(e))}),i.innerHtml&&(t.innerHTML=i.innerHtml),i.innerText&&(t.innerText=i.innerText),t},p=i=>new Promise(t=>{const e=document.createElement("script");document.head.append(e),e.src=i,e.addEventListener("load",()=>{t()})}),F=(i,t)=>g(this,null,function*(){switch(i){case"cubism2":yield p(t[i]),yield p(I.PIXI),yield p(I.PIXI_LIVE2D_DISPLAY_CUBISM2);break;case"cubism5":yield p(t[i]),yield p(I.PIXI),yield p(I.PIXI_LIVE2D_DISPLAY_CUBISM4);break;default:yield Promise.all([p(t.cubism2),p(t.cubism5)]),yield p(I.PIXI),yield p(I.PIXI_LIVE2D_DISPLAY);break}yield p(I.PIXI_LIVE2D_DISPLAY_EXTRA)}),R=()=>g(this,null,function*(){const i=yield fetch("https://unpkg.com/oh-my-live2d/package.json"),{version:t}=yield i.json();t!=="0.9.0"&&console.warn("[oml2d] 检查到 oh-my-live2d 存在最新版:",`v${t}`,"请前往: https://oml2d.com 以获得最新版详细信息, 并及时更新.")}),A=i=>g(this,null,function*(){const e=yield(yield fetch("https://v1.hitokoto.cn/")).json();return i?i(e):`${e.hitokoto} -- ${e.from}`});class V{constructor(t){o(this,"styleSheet");this.style=t,this.styleSheet=v({tagName:"style",id:"oml2dStyle",innerHtml:T(this.style.primaryColor)}),document.head.append(this.styleSheet)}reloadStyleSheet(t){this.styleSheet.innerHTML=T(t.primaryColor)}}class Y{constructor(t){o(this,"element");o(this,"style",{});o(this,"clickItem");this.stageElement=t,this.element=v({id:E.menusId,tagName:"div",className:E.menusId}),this.createMenuItem(),this.stageElement.append(this.element),this.ininStyle()}ininStyle(){this.setStyle({transition:"all 500ms",visibility:"hidden",opacity:0,position:"absolute",right:0,bottom:"10%",zIndex:"9999",fontSize:"26px"}),this.stageElement.addEventListener("mouseover",()=>this.setStyle({opacity:1,visibility:"visible"})),this.stageElement.addEventListener("mouseout",()=>this.setStyle({opacity:0,visibility:"hidden"}))}createMenuItem(){const t=$.map(e=>{const s=v({id:e.id,tagName:"div",dataName:e.id,className:"oml2d-menus-item",innerHtml:` - `});return s.title=e.title,s});this.element.append(...t),this.element.addEventListener("click",e=>{var n;if(e.target===e.currentTarget)return;let s=e.target;for(;s.parentNode!==e.currentTarget;)s=s.parentNode;(n=this.clickItem)==null||n.call(this,s.getAttribute("data-name"))})}onClickItem(t){this.clickItem=t}setStyle(t){this.style=f(this.style,t),O(this.style,this.element)}}var S=(i=>(i.pc="PC",i.mobile="MOBILE",i))(S||{}),_=(i=>(i.ALL="ALL",i.IDLE="IDLE",i.NONE="NONE",i))(_||{});class Y{constructor(t,e,s,n){o(this,"model");o(this,"failEvent");this.live2dModel=t,this.modelOptions=e,this.application=s,this.HitAreaFrames=n,this.model=this.create()}create(){const t=this.live2dModel.fromSync(this.modelOptions.path||"",{motionPreload:this.modelOptions.motionPreloadStrategy||_.IDLE,onError:e=>{var s;(s=this.failEvent)==null||s.call(this,e)}});return t.once("load",()=>{if(this.modelOptions.showHitAreaFrames){const e=new this.HitAreaFrames;t.addChild(e)}this.application.stage.addChild(this.model),this.application.resize()}),t.on("hit",e=>{const s=Object.keys(t.internalModel.motionManager.motionGroups);let n=s.find(l=>e[0].includes(l.toLowerCase())||l.toLowerCase().includes(e[0]));n||(n=a(s)),this.modelOptions.motionPreloadStrategy===_.ALL?t.motion(n):t.internalModel.motionManager.loadMotion(n,0).then(()=>{t.motion(n)})}),t}onLoaded(t){this.model.once("load",()=>{t({width:this.model.width,height:this.model.height})})}onFail(t){this.failEvent=t}setScale(t=.1,e=.1){this.model.scale.set(t,e)}setPosition(t=0,e=0){this.model.x=t,this.model.y=e}changeTexture(t){if(this.model.textures.length<=1)t({status:!1});else{const e=this.model.textures.shift();this.model.textures.push(e),t({status:!0})}}}class U{constructor(t,e){o(this,"element");o(this,"canvasElement");o(this,"wrapperElement");o(this,"style",{});o(this,"canvasStyle",{});o(this,"status",0);o(this,"slideChangeEnd");this.targetElement=t,this.options=e,this.element=b({id:E.stageId,tagName:"div"}),this.canvasElement=b({id:E.canvasId,tagName:"canvas"}),this.wrapperElement=b({id:"oml2dWrapper",tagName:"div"}),this.create(),this.initStyle()}create(){const t=document.createDocumentFragment();this.element.append(this.canvasElement),t.append(this.element),this.targetElement.append(t),this.targetElement!==document.body&&document.body.append(this.targetElement),window.onbeforeunload=()=>{this.targetElement.removeChild(this.element)}}initStyle(){this.setStyle({width:"0px",height:"0px",position:this.options.fixed?"fixed":"relative",left:0,bottom:0,zIndex:"9997",transform:"translateY(130%)"});const t=b({tagName:"style",id:"oml2dStyle",innerHtml:B});document.head.append(t)}setStyle(t,e){this.style=f(this.style,t),O(this.style,this.element),this.setCanvasStyle({width:"100%",height:"100%",zIndex:"9999",position:"relative"}),e==null||e()}setCanvasStyle(t){this.canvasStyle=f(this.canvasStyle,t),O(this.canvasStyle,this.canvasElement)}slideIn(t){return this.setStyle({animationName:"oml2d-stage-slide-in",animationDuration:`${t}ms`,animationFillMode:"forwards"}),this.status=1,new Promise(e=>{setTimeout(()=>{var s;(s=this.slideChangeEnd)==null||s.call(this,this.status),e()},t)})}slideOut(t){return this.setStyle({animationName:"oml2d-stage-slide-out",animationDuration:`${t}ms`,animationFillMode:"forwards"}),this.status=0,new Promise(e=>setTimeout(()=>{var s;(s=this.slideChangeEnd)==null||s.call(this,this.status),e()},t))}onSlideChangeEnd(t){this.slideChangeEnd=t}}var z=(i=>(i.info="info",i.error="error",i))(z||{});class W{constructor(t){o(this,"element");o(this,"transitionTime",800);o(this,"status",0);o(this,"stateColor",{info:"#58b0fc",error:"#F08080"});o(this,"style",{});o(this,"timer",0);this.element=b({id:E.statusBarId,tagName:"div",innerText:"hello"}),t.append(this.element),this.initStyle()}initStyle(){this.setStyle({minWidth:"20px",minHeight:"40px",position:"fixed",transform:"translateX(-110%)",left:"0",bottom:"80px",padding:"7px 5px",zIndex:"9998",backgroundColor:"#58b0fc",borderStyle:"solid",borderColor:"#fff",fontWeight:"bold",borderRadius:"0 5px 5px 0",borderWidth:"2px 2px 2px 0",boxShadow:"0 0 5px #999",color:"#fff",display:"flex",alignItems:"center",textAlign:"center",flexWrap:"wrap",fontSize:"14px",writingMode:"vertical-lr",cursor:"pointer"})}setStyle(t){this.style=f(this.style,t),O(t,this.element)}slideIn(){return new Promise(t=>{this.status=1,this.setStyle({animationName:"oml2d-status-bar-slide-in",animationDuration:`${this.transitionTime}ms`,animationFillMode:"forwards"}),setTimeout(()=>{t(this.status)},this.transitionTime)})}slideOut(){return new Promise(t=>{this.status=0,this.setStyle({animationName:"oml2d-status-bar-slide-out",animationDuration:`${this.transitionTime}ms`,animationFillMode:"forwards"}),setTimeout(()=>{t(this.status)},this.transitionTime)})}showLoading(){this.popup(` + `});return s.title=e.title,s});this.element.append(...t),this.element.addEventListener("click",e=>{var n;if(e.target===e.currentTarget)return;let s=e.target;for(;s.parentNode!==e.currentTarget;)s=s.parentNode;(n=this.clickItem)==null||n.call(this,s.getAttribute("data-name"))})}onClickItem(t){this.clickItem=t}setStyle(t){this.style=y(this.style,t),P(this.style,this.element)}}var S=(i=>(i.pc="PC",i.mobile="MOBILE",i))(S||{}),C=(i=>(i.ALL="ALL",i.IDLE="IDLE",i.NONE="NONE",i))(C||{});class U{constructor(t,e,s,n){o(this,"model");o(this,"failEvent");this.live2dModel=t,this.modelOptions=e,this.application=s,this.HitAreaFrames=n,this.model=this.create()}create(){const t=this.live2dModel.fromSync(this.modelOptions.path||"",{motionPreload:this.modelOptions.motionPreloadStrategy||C.IDLE,onError:e=>{var s;(s=this.failEvent)==null||s.call(this,e)}});return t.once("load",()=>{if(this.modelOptions.showHitAreaFrames){const e=new this.HitAreaFrames;t.addChild(e)}this.application.stage.addChild(this.model),this.application.resize()}),t.on("hit",e=>{const s=Object.keys(t.internalModel.motionManager.motionGroups);let n=s.find(l=>e[0].includes(l.toLowerCase())||l.toLowerCase().includes(e[0]));n||(n=a(s)),this.modelOptions.motionPreloadStrategy===C.ALL?t.motion(n):t.internalModel.motionManager.loadMotion(n,0).then(()=>{t.motion(n)})}),t}onLoaded(t){this.model.once("load",()=>{t({width:this.model.width,height:this.model.height})})}onFail(t){this.failEvent=t}setScale(t=.1,e=.1){this.model.scale.set(t,e)}setPosition(t=0,e=0){this.model.x=t,this.model.y=e}changeTexture(t){if(this.model.textures.length<=1)t({status:!1});else{const e=this.model.textures.shift();this.model.textures.push(e),t({status:!0})}}}class W{constructor(t,e){o(this,"element");o(this,"canvasElement");o(this,"wrapperElement");o(this,"style",{});o(this,"canvasStyle",{});o(this,"status",0);o(this,"slideChangeEnd");this.targetElement=t,this.options=e,this.element=v({id:E.stageId,tagName:"div"}),this.canvasElement=v({id:E.canvasId,tagName:"canvas"}),this.wrapperElement=v({id:"oml2dWrapper",tagName:"div"}),this.create(),this.initStyle()}create(){const t=document.createDocumentFragment();this.element.append(this.canvasElement),t.append(this.element),this.targetElement.append(t),this.targetElement!==document.body&&document.body.append(this.targetElement),window.onbeforeunload=()=>{this.targetElement.removeChild(this.element)}}initStyle(){this.setStyle({width:"0px",height:"0px",position:this.options.fixed?"fixed":"relative",left:0,bottom:0,zIndex:"9997",transform:"translateY(130%)"})}setStyle(t,e){this.style=y(this.style,t),P(this.style,this.element),this.setCanvasStyle({width:"100%",height:"100%",zIndex:"9999",position:"relative"}),e==null||e()}setCanvasStyle(t){this.canvasStyle=y(this.canvasStyle,t),P(this.canvasStyle,this.canvasElement)}slideIn(t){return this.setStyle({animationName:"oml2d-stage-slide-in",animationDuration:`${t}ms`,animationFillMode:"forwards"}),this.status=1,new Promise(e=>{setTimeout(()=>{var s;(s=this.slideChangeEnd)==null||s.call(this,this.status),e()},t)})}slideOut(t){return this.setStyle({animationName:"oml2d-stage-slide-out",animationDuration:`${t}ms`,animationFillMode:"forwards"}),this.status=0,new Promise(e=>setTimeout(()=>{var s;(s=this.slideChangeEnd)==null||s.call(this,this.status),e()},t))}onSlideChangeEnd(t){this.slideChangeEnd=t}}var z=(i=>(i.info="info",i.error="error",i))(z||{});class G{constructor(t,e){o(this,"element");o(this,"transitionTime",800);o(this,"status",0);o(this,"style",{});o(this,"timer",0);this.wrapperElement=t,this.stateColor=e,this.element=v({id:E.statusBarId,tagName:"div",innerText:"hello"}),this.wrapperElement.append(this.element),this.initStyle()}initStyle(){this.setStyle({minWidth:"20px",minHeight:"40px",position:"fixed",transform:"translateX(-110%)",left:"0",bottom:"80px",padding:"7px 5px",zIndex:"9998",borderStyle:"solid",borderColor:"#fff",fontWeight:"bold",borderRadius:"0 5px 5px 0",borderWidth:"2px 2px 2px 0",boxShadow:"0 0 5px #999",color:"#fff",display:"flex",alignItems:"center",textAlign:"center",flexWrap:"wrap",fontSize:"14px",writingMode:"vertical-lr",cursor:"pointer"})}setStyle(t){this.style=y(this.style,t),P(t,this.element)}slideIn(){return new Promise(t=>{this.status=1,this.setStyle({animationName:"oml2d-status-bar-slide-in",animationDuration:`${this.transitionTime}ms`,animationFillMode:"forwards"}),setTimeout(()=>{t(this.status)},this.transitionTime)})}slideOut(){return new Promise(t=>{this.status=0,this.setStyle({animationName:"oml2d-status-bar-slide-out",animationDuration:`${this.transitionTime}ms`,animationFillMode:"forwards"}),setTimeout(()=>{t(this.status)},this.transitionTime)})}showLoading(){this.popup(`
加载中
- `,"info",!1)}hideLoading(){this.popup("加载成功")}loadingError(t){this.popup("加载失败","error",!1);const e=()=>{this.popup("重新加载","info",!1)},s=()=>{this.popup("加载失败","error",!1)},n=()=>{t(),this.element.removeEventListener("mouseout",s),this.element.removeEventListener("mouseover",e),this.element.removeEventListener("click",n)};this.element.addEventListener("click",n),this.element.addEventListener("mouseover",e),this.element.addEventListener("mouseout",s)}popup(t,e="info",s=1e3,n){clearTimeout(this.timer),this.setContent(t),this.setStyle({backgroundColor:this.stateColor[e]}),this.slideIn().then(()=>{s?this.timer=setTimeout(()=>{this.slideOut()},s):n&&(this.element.onclick=n)})}setContent(t){this.element.innerHTML=t}}class Q{constructor(t,e){o(this,"element");o(this,"idlePlayer");o(this,"closeTimer",0);o(this,"transitionTime",1e3);o(this,"style",{});o(this,"priority",0);this.tipsOptions=e,this.element=b({id:E.tipsId,tagName:"div"}),t.append(this.element),this.initStyle(),this.idlePlayer=this.createIdleMessagePlayer()}initStyle(){if(this.setStyle({position:"absolute",fontSize:"18px",borderRadius:"10px",filter:"drop-shadow(0 0 5px #999)",backgroundColor:"#58b0fc",border:"2px solid #fff",color:"#fff",padding:"3px 5px",opacity:0,visibility:"hidden",transform:"translateX(-50%)",left:"50%",textAlign:"center",display:"flex",alignItems:"center",justifyContent:"center",animationDuration:`${this.transitionTime}ms,${this.transitionTime}ms`,animationFillMode:"forwards, none",animationIterationCount:"1, infinite",width:"60%",height:"100px",top:0}),this.tipsOptions){const t=k(this.tipsOptions.style||{});this.setStyle(t)}}setStyle(t){this.style=f(this.style,t),O(this.style,this.element)}setContent(t){this.element.innerHTML=t}showMessage(t,e=3e3,s=0){s{this.setStyle({animationName:"oml2d-hidden-tips,oml2d-shake-tips"}),this.priority=0},e))}clear(){var t;this.setStyle({animationName:"oml2d-hidden-tips,oml2d-shake-tips"}),(t=this.idlePlayer)==null||t.stop(),clearTimeout(this.closeTimer),this.priority=0}notification(t,e=3e3,s=3){var n;(n=this.idlePlayer)==null||n.stop(),this.showMessage(t,e,s),setTimeout(()=>{var l;(l=this.idlePlayer)==null||l.start()},e+this.transitionTime)}welcome(){if(!this.tipsOptions)return;const t=$(this.tipsOptions.welcomeTips||{}),{duration:e,priority:s}=this.tipsOptions.welcomeTips;this.notification(t,e,s)}copy(){if(this.tipsOptions.copyTips.message.length){const t=a(this.tipsOptions.copyTips.message)||"";this.notification(t,this.tipsOptions.copyTips.duration,this.tipsOptions.copyTips.priority)}}createIdleMessagePlayer(){if(!this.tipsOptions)return;const{message:t,duration:e,priority:s}=this.tipsOptions.idleTips;let n="";const l=r(()=>v(this,null,function*(){this.tipsOptions.idleTips.wordTheDay?P(this.tipsOptions.idleTips.wordTheDay)?n=yield A(this.tipsOptions.idleTips.wordTheDay):n=yield A():P(t)?n=yield t():n=a(t||[])||"",n?(this.showMessage(n,e,s),yield X(e)):l.stop()}),this.tipsOptions.idleTips.interval);return l}}class G{constructor(t,e,s,n){o(this,"stage");o(this,"statusBar");o(this,"tips");o(this,"menus");o(this,"application");o(this,"model");o(this,"modelIndex",0);o(this,"windowSizeType",S.pc);o(this,"mediaQuery",window.matchMedia("screen and (max-width: 768px)"));this.options=t,this.pixiLive2dDisplayModule=e,this.Application=s,this.HitAreaFrames=n,this.options.sayHello&&this.sayHello(),this.stage=new U(this.options.parentElement,t),this.statusBar=new W(this.options.parentElement),this.tips=new Q(this.stage.element,this.options.tips),this.menus=new V(this.stage.element),this.application=this.createApplication(),this.initialize(),R()}initialize(){if(this.verifyWindowSizeType(),this.windowSizeType!==S.pc){this.statusBar.popup("看板娘休息中",z.info,8e3);return}this.loadModel(),this.registerEvents()}verifyWindowSizeType(){this.mediaQuery.matches?this.windowSizeType=S.mobile:this.windowSizeType=S.pc,this.mediaQuery.addEventListener("change",t=>{t.matches?this.windowSizeType=S.mobile:this.windowSizeType=S.pc})}loadModel(t=!0){var e,s,n,l,c,g,I;t&&this.statusBar.showLoading(),this.model=new Y(this.pixiLive2dDisplayModule.Live2DModel,this.currentModelOption,this.application,this.HitAreaFrames),(n=this.model)==null||n.setScale((e=this.currentModelOption)==null?void 0:e.scale,(s=this.currentModelOption)==null?void 0:s.scale),(c=this.model)==null||c.setPosition(...((l=this.currentModelOption)==null?void 0:l.position)||[]),(g=this.model)==null||g.onLoaded(x=>{var y;const M=f(k(x),k(this.currentModelOption.stageStyle||{}));this.stage.setStyle(M,()=>this.application.resize()),this.stage.slideIn((y=this.options)==null?void 0:y.transitionTime),this.statusBar.hideLoading()}),(I=this.model)==null||I.onFail(x=>{this.statusBar.loadingError(this.loadModel.bind(this)),console.error(x)})}get currentModelOption(){return this.options.models[this.modelIndex]}loadNextModel(){return v(this,null,function*(){var t;if(this.options.models.length<=1){this.tips.notification("没找到其他模型哦...",3e3,9);return}this.tips.clear(),this.statusBar.showLoading(),yield this.stage.slideOut(this.options.transitionTime),this.application.stage.children.length>=1&&this.application.stage.removeChildAt(0),T((t=this.options.models)==null?void 0:t.length)&&(this.modelIndex{switch(t){case"Rest":this.stage.slideOut(this.options.transitionTime),this.statusBar.popup("休息中",z.info,!1,()=>{var e;this.stage.slideIn(this.options.transitionTime),this.statusBar.popup("闪亮登场"),(e=this.tips.idlePlayer)==null||e.start()}),this.tips.clear();return;case"SwitchModel":this.loadNextModel();return;case"About":window.open("https://oml2d.com");return}}),window.addEventListener("copy",()=>{this.tips.copy()}),this.stage.onSlideChangeEnd(t=>{t&&this.tips.welcome()})}createApplication(){return new this.Application({view:this.stage.canvasElement,resolution:2,autoStart:!0,autoDensity:!0,backgroundAlpha:0,resizeTo:this.stage.element})}}const K=i=>{let t;return s=>v(this,null,function*(){const{parentElement:n}=s,l=f(w,s);l.parentElement=n||document.body;const{PixiLive2dDisplay:c,PIXI:g,HitAreaFrames:I}=yield i(l.importType,l.libraryUrls);t||(t=new G(l,c,g.Application,I))})};window._iconfont_svg_string_3847283='',function(i){var e=(e=document.getElementsByTagName("script"))[e.length-1],t=e.getAttribute("data-injectcss"),e=e.getAttribute("data-disable-injectsvg");if(!e){var s,n,l,c,g,I=function(y,m){m.parentNode.insertBefore(y,m)};if(t&&!i.__iconfont__svg__cssinject__){i.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(y){console&&console.log(y)}}s=function(){var y,m=document.createElement("div");m.innerHTML=i._iconfont_svg_string_3847283,(m=m.getElementsByTagName("svg")[0])&&(m.setAttribute("aria-hidden","true"),m.style.position="absolute",m.style.width=0,m.style.height=0,m.style.overflow="hidden",m=m,(y=document.body).firstChild?I(m,y.firstChild):y.appendChild(m))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(s,0):(n=function(){document.removeEventListener("DOMContentLoaded",n,!1),s()},document.addEventListener("DOMContentLoaded",n,!1)):document.attachEvent&&(l=s,c=i.document,g=!1,M(),c.onreadystatechange=function(){c.readyState=="complete"&&(c.onreadystatechange=null,x())})}function x(){g||(g=!0,l())}function M(){try{c.documentElement.doScroll("left")}catch(y){return void setTimeout(M,50)}x()}}(window);const q=K((i,t)=>v(this,null,function*(){return yield F(i,t),window.PIXI.utils.skipHello(),{PixiLive2dDisplay:window.PIXI.live2d,PIXI:window.PIXI,HitAreaFrames:window.PIXI.live2d.HitAreaFrames}}));d.loadOml2d=q,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})}); + `,"info",!1)}hideLoading(){this.popup("加载成功")}loadingError(t){this.popup("加载失败","error",!1);const e=()=>{this.popup("重新加载","info",!1)},s=()=>{this.popup("加载失败","error",!1)},n=()=>{t(),this.element.removeEventListener("mouseout",s),this.element.removeEventListener("mouseover",e),this.element.removeEventListener("click",n)};this.element.addEventListener("click",n),this.element.addEventListener("mouseover",e),this.element.addEventListener("mouseout",s)}popup(t,e="info",s=1e3,n){clearTimeout(this.timer),this.setContent(t),this.setStyle({backgroundColor:this.stateColor[e]}),this.slideIn().then(()=>{s?this.timer=setTimeout(()=>{this.slideOut()},s):n&&(this.element.onclick=n)})}setContent(t){this.element.innerHTML=t}}class Q{constructor(t,e){o(this,"element");o(this,"idlePlayer");o(this,"closeTimer",0);o(this,"transitionTime",1e3);o(this,"style",{});o(this,"priority",0);this.tipsOptions=e,this.element=v({id:E.tipsId,tagName:"div"}),t.append(this.element),this.initStyle(),this.idlePlayer=this.createIdleMessagePlayer()}initStyle(){if(this.setStyle({position:"absolute",fontSize:"18px",borderRadius:"10px",filter:"drop-shadow(0 0 5px #999)",border:"2px solid #fff",color:"#fff",padding:"3px 5px",opacity:0,visibility:"hidden",transform:"translateX(-50%)",left:"50%",textAlign:"center",display:"flex",alignItems:"center",justifyContent:"center",animationDuration:`${this.transitionTime}ms,${this.transitionTime}ms`,animationFillMode:"forwards, none",animationIterationCount:"1, infinite",width:"60%",height:"100px",top:0}),this.tipsOptions){const t=k(this.tipsOptions.style||{});this.setStyle(t)}}setStyle(t){this.style=y(this.style,t),P(this.style,this.element)}setContent(t){this.element.innerHTML=t}showMessage(t,e=3e3,s=0){s{this.setStyle({animationName:"oml2d-hidden-tips,oml2d-shake-tips"}),this.priority=0},e))}clear(){var t;this.setStyle({animationName:"oml2d-hidden-tips,oml2d-shake-tips"}),(t=this.idlePlayer)==null||t.stop(),clearTimeout(this.closeTimer),this.priority=0}notification(t,e=3e3,s=3){var n;(n=this.idlePlayer)==null||n.stop(),this.showMessage(t,e,s),setTimeout(()=>{var l;(l=this.idlePlayer)==null||l.start()},e+this.transitionTime)}welcome(){if(!this.tipsOptions)return;const t=B(this.tipsOptions.welcomeTips||{}),{duration:e,priority:s}=this.tipsOptions.welcomeTips;this.notification(t,e,s)}copy(){if(this.tipsOptions.copyTips.message.length){const t=a(this.tipsOptions.copyTips.message)||"";this.notification(t,this.tipsOptions.copyTips.duration,this.tipsOptions.copyTips.priority)}}createIdleMessagePlayer(){if(!this.tipsOptions)return;const{message:t,duration:e,priority:s}=this.tipsOptions.idleTips;let n="";const l=r(()=>g(this,null,function*(){this.tipsOptions.idleTips.wordTheDay?_(this.tipsOptions.idleTips.wordTheDay)?n=yield A(this.tipsOptions.idleTips.wordTheDay):n=yield A():_(t)?n=yield t():n=a(t||[])||"",n?(this.showMessage(n,e,s),yield X(e)):l.stop()}),this.tipsOptions.idleTips.interval);return l}}class K{constructor(t,e,s,n){o(this,"stage");o(this,"statusBar");o(this,"tips");o(this,"menus");o(this,"application");o(this,"model");o(this,"modelIndex",0);o(this,"windowSizeType",S.pc);o(this,"mediaQuery",window.matchMedia("screen and (max-width: 768px)"));this.options=t,this.pixiLive2dDisplayModule=e,this.Application=s,this.HitAreaFrames=n,this.options.sayHello&&this.sayHello(),new V({primaryColor:this.options.primaryColor}),this.stage=new W(this.options.parentElement,t),this.statusBar=new G(this.options.parentElement,{info:this.options.primaryColor,error:"#F08080"}),this.tips=new Q(this.stage.element,this.options.tips),this.menus=new Y(this.stage.element),this.application=this.createApplication(),this.initialize(),this.setCommonStyle(),R()}initialize(){if(this.verifyWindowSizeType(),this.windowSizeType!==S.pc){this.statusBar.popup("看板娘休息中",z.info,8e3);return}this.loadModel(),this.registerEvents()}setCommonStyle(){const t={backgroundColor:this.options.primaryColor};this.tips.setStyle(t),this.statusBar.setStyle(t)}verifyWindowSizeType(){this.mediaQuery.matches?this.windowSizeType=S.mobile:this.windowSizeType=S.pc,this.mediaQuery.addEventListener("change",t=>{t.matches?this.windowSizeType=S.mobile:this.windowSizeType=S.pc})}loadModel(t=!0){var e,s,n,l,c,f,w;t&&this.statusBar.showLoading(),this.model=new U(this.pixiLive2dDisplayModule.Live2DModel,this.currentModelOption,this.application,this.HitAreaFrames),(n=this.model)==null||n.setScale((e=this.currentModelOption)==null?void 0:e.scale,(s=this.currentModelOption)==null?void 0:s.scale),(c=this.model)==null||c.setPosition(...((l=this.currentModelOption)==null?void 0:l.position)||[]),(f=this.model)==null||f.onLoaded(b=>{var u;const M=y(k(b),k(this.currentModelOption.stageStyle||{}));this.stage.setStyle(M,()=>this.application.resize()),this.stage.slideIn((u=this.options)==null?void 0:u.transitionTime),this.statusBar.hideLoading()}),(w=this.model)==null||w.onFail(b=>{this.statusBar.loadingError(this.loadModel.bind(this)),console.error(b)})}get currentModelOption(){return this.options.models[this.modelIndex]}loadNextModel(){return g(this,null,function*(){var t;if(this.options.models.length<=1){this.tips.notification("没找到其他模型哦...",3e3,9);return}this.tips.clear(),this.statusBar.showLoading(),yield this.stage.slideOut(this.options.transitionTime),this.application.stage.children.length>=1&&this.application.stage.removeChildAt(0),x((t=this.options.models)==null?void 0:t.length)&&(this.modelIndex{switch(t){case"Rest":this.stage.slideOut(this.options.transitionTime),this.statusBar.popup("休息中",z.info,!1,()=>{var e;this.stage.slideIn(this.options.transitionTime),this.statusBar.popup("闪亮登场"),(e=this.tips.idlePlayer)==null||e.start()}),this.tips.clear();return;case"SwitchModel":this.loadNextModel();return;case"About":window.open("https://oml2d.com");return}}),window.addEventListener("copy",()=>{this.tips.copy()}),this.stage.onSlideChangeEnd(t=>{t&&this.tips.welcome()})}createApplication(){return new this.Application({view:this.stage.canvasElement,resolution:2,autoStart:!0,autoDensity:!0,backgroundAlpha:0,resizeTo:this.stage.element})}}const q=i=>{let t;return s=>g(this,null,function*(){const{parentElement:n}=s,l=y(O,s);l.parentElement=n||document.body;const{PixiLive2dDisplay:c,PIXI:f,HitAreaFrames:w}=yield i(l.importType,l.libraryUrls);t||(t=new K(l,c,f.Application,w))})};window._iconfont_svg_string_3847283='',function(i){var e=(e=document.getElementsByTagName("script"))[e.length-1],t=e.getAttribute("data-injectcss"),e=e.getAttribute("data-disable-injectsvg");if(!e){var s,n,l,c,f,w=function(u,h){h.parentNode.insertBefore(u,h)};if(t&&!i.__iconfont__svg__cssinject__){i.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(u){console&&console.log(u)}}s=function(){var u,h=document.createElement("div");h.innerHTML=i._iconfont_svg_string_3847283,(h=h.getElementsByTagName("svg")[0])&&(h.setAttribute("aria-hidden","true"),h.style.position="absolute",h.style.width=0,h.style.height=0,h.style.overflow="hidden",h=h,(u=document.body).firstChild?w(h,u.firstChild):u.appendChild(h))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(s,0):(n=function(){document.removeEventListener("DOMContentLoaded",n,!1),s()},document.addEventListener("DOMContentLoaded",n,!1)):document.attachEvent&&(l=s,c=i.document,f=!1,M(),c.onreadystatechange=function(){c.readyState=="complete"&&(c.onreadystatechange=null,b())})}function b(){f||(f=!0,l())}function M(){try{c.documentElement.doScroll("left")}catch(u){return void setTimeout(M,50)}b()}}(window);const J=q((i,t)=>g(this,null,function*(){return yield F(i,t),window.PIXI.utils.skipHello(),{PixiLive2dDisplay:window.PIXI.live2d,PIXI:window.PIXI,HitAreaFrames:window.PIXI.live2d.HitAreaFrames}}));d.loadOml2d=J,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})}); diff --git a/tests/vite-app/src/main.ts b/tests/vite-app/src/main.ts index a09f20d..b27173b 100644 --- a/tests/vite-app/src/main.ts +++ b/tests/vite-app/src/main.ts @@ -7,7 +7,7 @@ import './style.css'; void loadOml2d({ // parentElement: el, // fixed: false, - // primaryColor: '#58b0fc', + primaryColor: '#38B0DE', models: [ { path: 'https://registry.npmmirror.com/oml2d-models/latest/files/models/Senko_Normals/senko.model3.json',