diff --git a/packages/oh-my-live2d/src/config/config.ts b/packages/oh-my-live2d/src/config/config.ts index f4180f4..ffb2e8a 100644 --- a/packages/oh-my-live2d/src/config/config.ts +++ b/packages/oh-my-live2d/src/config/config.ts @@ -5,6 +5,7 @@ const libServicePath = 'https://lib.oml2d.com'; // 默认配置选项, 实例化时会与用户传进来的合并 export const DEFAULT_OPTIONS: DefaultOptions = { + mobileDisplay: false, fixed: true, primaryColor: '#38B0DE', sayHello: true, @@ -18,6 +19,7 @@ export const DEFAULT_OPTIONS: DefaultOptions = { models: [], tips: { messageLine: 3, + mobileStyle: {}, style: {}, idleTips: { wordTheDay: false, diff --git a/packages/oh-my-live2d/src/config/style.ts b/packages/oh-my-live2d/src/config/style.ts index 364d814..3fb42e5 100644 --- a/packages/oh-my-live2d/src/config/style.ts +++ b/packages/oh-my-live2d/src/config/style.ts @@ -1,3 +1,5 @@ +import { CSSProperties } from '../types/index.js'; + export const generateGlobalStyle = (primaryColor: string): string => { return ` @keyframes oml2d-shake-tips{ @@ -120,3 +122,24 @@ export const generateGlobalStyle = (primaryColor: string): string => { } `; }; + +export const TIPS_DEFAULT_STYLE: CSSProperties = { + position: 'absolute', + fontSize: '18px', + borderRadius: '10px', + filter: 'drop-shadow(0 0 5px #999)', + border: '2px solid #fff', + color: '#fff', + padding: '15px 5px', + opacity: 0, + visibility: 'hidden', + transform: 'translateX(-50%)', + textAlign: 'center', + justifyContent: 'center', + animationDuration: `1000ms,1000ms`, + animationFillMode: 'forwards, none', + animationIterationCount: '1, infinite', + width: '60%', + left: '50%', + top: 0 +}; diff --git a/packages/oh-my-live2d/src/modules/index.ts b/packages/oh-my-live2d/src/modules/index.ts index e5aca4e..11a0ba7 100644 --- a/packages/oh-my-live2d/src/modules/index.ts +++ b/packages/oh-my-live2d/src/modules/index.ts @@ -64,8 +64,8 @@ export class OhMyLive2D { // 初始化 initialize(): void { - this.verifyWindowSizeType(); - if (this.windowSizeType !== WindowSizeType.pc) { + this.getWindowSizeType(); + if (this.windowSizeType !== WindowSizeType.pc && !this.options.mobileDisplay) { this.statusBar.popup('看板娘休息中', SystemState.info, 8000); return; @@ -82,18 +82,30 @@ export class OhMyLive2D { this.statusBar.setStyle(commonStyle); } - // 校验当前窗口大小 - verifyWindowSizeType(): void { + // 获取窗口大小 + getWindowSizeType(): void { if (this.mediaQuery.matches) { this.windowSizeType = WindowSizeType.mobile; } else { this.windowSizeType = WindowSizeType.pc; } + } + + onWindowSizeChange(onPc: () => void, onMobile: () => void): void { + if (this.mediaQuery.matches) { + this.windowSizeType = WindowSizeType.mobile; + onMobile(); + } else { + this.windowSizeType = WindowSizeType.pc; + onPc(); + } this.mediaQuery.addEventListener('change', (e) => { if (e.matches) { this.windowSizeType = WindowSizeType.mobile; + onMobile(); } else { this.windowSizeType = WindowSizeType.pc; + onPc(); } }); } @@ -104,14 +116,52 @@ export class OhMyLive2D { loadModel(showLoading = true): void { showLoading && this.statusBar.showLoading(); this.model = new Model(this.pixiLive2dDisplayModule.Live2DModel, this.currentModelOption, this.application, this.HitAreaFrames); - this.model?.setScale(this.currentModelOption?.scale, this.currentModelOption?.scale); - this.model?.setPosition(...(this.currentModelOption?.position || [])); // 模型所有资源加载完毕 - this.model?.onLoaded((modelStyleInfo) => { - const finalStageStyle = mergeDeep(handleCommonStyle(modelStyleInfo), handleCommonStyle(this.currentModelOption.stageStyle || {})); - - this.stage.setStyle(finalStageStyle, () => this.application.resize()); + this.model?.onLoaded(() => { + this.onWindowSizeChange( + () => { + // pc + this.model?.setScale(this.currentModelOption?.scale, this.currentModelOption.scale); + this.model?.setPosition(...(this.currentModelOption.position || [])); + const modelSize = { + width: this.model?.width, + height: this.model?.height + }; + const finalStageStyle = mergeDeep(handleCommonStyle(modelSize), handleCommonStyle(this.currentModelOption.stageStyle || {})); + + this.stage.setStyle(finalStageStyle, () => this.application.resize()); + // if (!this.options.mobileDisplay) { + // void this.stage.slideIn(this.options.transitionTime); + // void this.tips.idlePlayer?.start(); + // this.statusBar.popup('闪亮登场', SystemState.info, 3000); + // } + this.tips.setStyle(handleCommonStyle(this.options.tips.style || {})); + }, + () => { + // mobile + if (!this.options.mobileDisplay) { + this.statusBar.popup('看板娘休息中', SystemState.info, 8000); + void this.stage.slideOut(this.options.transitionTime); + this.tips.clear(); + + return; + } + this.model?.setScale(this.currentModelOption?.mobileScale, this.currentModelOption.mobileScale); + this.model?.setPosition(...(this.currentModelOption.mobilePosition || [])); + const modelSize = { + width: this.model?.width, + height: this.model?.height + }; + const finalStageStyle = mergeDeep( + handleCommonStyle(modelSize), + handleCommonStyle(this.currentModelOption.mobileStageStyle || {}) + ); + + this.stage.setStyle(finalStageStyle, () => this.application.resize()); + this.tips.setStyle(handleCommonStyle(this.options.tips.mobileStyle || {})); + } + ); void this.stage.slideIn(this.options?.transitionTime); this.statusBar.hideLoading(); }); @@ -166,7 +216,7 @@ export class OhMyLive2D { switch (name) { case 'Rest': void this.stage.slideOut(this.options.transitionTime); - this.statusBar.popup('休息中', SystemState.info, false, () => { + this.statusBar.popup('看板娘休息中', SystemState.info, false, () => { void this.stage.slideIn(this.options.transitionTime); this.statusBar.popup('闪亮登场'); void this.tips.idlePlayer?.start(); diff --git a/packages/oh-my-live2d/src/modules/model.ts b/packages/oh-my-live2d/src/modules/model.ts index c4c30cf..7fa1b81 100644 --- a/packages/oh-my-live2d/src/modules/model.ts +++ b/packages/oh-my-live2d/src/modules/model.ts @@ -118,4 +118,10 @@ export class Model { callback({ status: true }); } } + get width(): number { + return this.model.width; + } + get height(): number { + return this.model.height; + } } diff --git a/packages/oh-my-live2d/src/modules/stage.ts b/packages/oh-my-live2d/src/modules/stage.ts index 29d74e3..36516f3 100644 --- a/packages/oh-my-live2d/src/modules/stage.ts +++ b/packages/oh-my-live2d/src/modules/stage.ts @@ -13,9 +13,9 @@ export class Stage { element: HTMLElement; canvasElement: HTMLCanvasElement; wrapperElement: HTMLElement; + status: Status = Status.hidden; private style: CSSProperties = {}; private canvasStyle: CSSProperties = {}; - private status: Status = Status.hidden; private slideChangeEnd?: (status: Status) => void; constructor( private targetElement: HTMLElement, diff --git a/packages/oh-my-live2d/src/modules/tips.ts b/packages/oh-my-live2d/src/modules/tips.ts index de40633..51d5fdc 100644 --- a/packages/oh-my-live2d/src/modules/tips.ts +++ b/packages/oh-my-live2d/src/modules/tips.ts @@ -1,9 +1,9 @@ import { getRandomArrayItem, isFunction, mergeDeep, setIntervalAsync } from 'tianjie'; -import { CONFIG } from '../config/index.js'; +import { CONFIG, TIPS_DEFAULT_STYLE } from '../config/index.js'; import type { IdleTimer } from '../types/common.js'; import type { CSSProperties, DefaultTipsOptions } from '../types/index.js'; -import { createElement, getWelcomeMessage, getWordTheDay, handleCommonStyle, setStyleForElement, sleep } from '../utils/index.js'; +import { createElement, getWelcomeMessage, getWordTheDay, setStyleForElement, sleep } from '../utils/index.js'; export class Tips { private element: HTMLElement; @@ -11,7 +11,7 @@ export class Tips { idlePlayer?: IdleTimer; private closeTimer = 0; private transitionTime = 1000; // 默认的消息过渡动画持续时长 - private style: CSSProperties = {}; + private style: CSSProperties = TIPS_DEFAULT_STYLE; private priority = 0; // 当前优先级 private contentElement: HTMLElement; private contentStyle: CSSProperties = {}; @@ -31,26 +31,7 @@ export class Tips { * 初始化样式 */ initStyle(): void { - this.setStyle({ - position: 'absolute', - fontSize: '18px', - borderRadius: '10px', - filter: 'drop-shadow(0 0 5px #999)', - border: '2px solid #fff', - color: '#fff', - padding: '15px 5px', - opacity: 0, - visibility: 'hidden', - transform: 'translateX(-50%)', - textAlign: 'center', - justifyContent: 'center', - animationDuration: `${this.transitionTime}ms,${this.transitionTime}ms`, - animationFillMode: 'forwards, none', - animationIterationCount: '1, infinite', - width: '60%', - left: '50%', - top: 0 - }); + // this.setStyle(); this.setContentStyle({ display: '-webkit-box', @@ -60,18 +41,18 @@ export class Tips { overflow: 'hidden' }); - if (this.tipsOptions) { - const style = handleCommonStyle(this.tipsOptions.style || {}); + // if (this.tipsOptions) { + // const style = handleCommonStyle(this.tipsOptions.style || {}); - this.setStyle(style); - } + // this.setStyle(style); + // } } /** * 设置提示框样式 * @param style */ - setStyle(style: CSSProperties): void { + setStyle(style: CSSProperties = {}): void { this.style = mergeDeep(this.style, style); setStyleForElement(this.style, this.element); } diff --git a/packages/oh-my-live2d/src/types/index.ts b/packages/oh-my-live2d/src/types/index.ts index 1c4ba27..5d1bbdc 100644 --- a/packages/oh-my-live2d/src/types/index.ts +++ b/packages/oh-my-live2d/src/types/index.ts @@ -30,8 +30,9 @@ export type DefaultOptions = Omit, 'parentElement' | 'mode } & { models: ModelOptions[]; }; -export type DefaultTipsOptions = Omit, 'style'> & { +export type DefaultTipsOptions = Omit, 'style' | 'mobileStyle'> & { style?: CommonStyleType; + mobileStyle?: CommonStyleType; }; export type Live2DModelType = typeof Live2DModel; diff --git a/packages/oh-my-live2d/src/types/model.ts b/packages/oh-my-live2d/src/types/model.ts index 976f620..5407d19 100644 --- a/packages/oh-my-live2d/src/types/model.ts +++ b/packages/oh-my-live2d/src/types/model.ts @@ -18,7 +18,6 @@ export interface ModelOptions { path: string; /** * 模型的缩放比例 - * * @default 0.1 */ scale?: number; @@ -31,15 +30,35 @@ export interface ModelOptions { */ position?: [x: number, y: number]; + /** + * 定义舞台样式, 支持传入CSS对象, 传入的样式将通过内联样式作用于舞台元素, 舞台的默认宽高将自适应模型的宽高, 舞台内Canvas元素的宽高始终与舞台保持一致 + * @valueType object + */ + stageStyle?: CommonStyleType; + + /** + * 移动端时模型的缩放比例 + * @default 0.1 + */ + mobileScale?: number; + + /** + * 移动端时模型在舞台中的位置。x: 横坐标, y: 纵坐标 + * @valueType [x: number, y:number] + * @default [0,0] + */ + mobilePosition?: [x: number, y: number]; + + /** + * 移动端时舞台的样式, 支持传入CSS对象, 传入的样式将通过内联样式作用于舞台元素, 舞台的默认宽高将自适应模型的宽高, 舞台内Canvas元素的宽高始终与舞台保持一致 + * @valueType object + */ + mobileStageStyle?: CommonStyleType; + /** * 动作预加载策略 * @valueType ALL | IDLE | NONE * @default IDLE */ motionPreloadStrategy?: 'ALL' | 'IDLE' | 'NONE'; - /** - * 定义舞台样式, 支持传入CSS对象, 传入的样式将通过内联样式作用于舞台元素, 舞台的默认宽高将自适应模型的宽高, 舞台内Canvas元素的宽高始终与舞台保持一致 - * @valueType object - */ - stageStyle?: CommonStyleType; } diff --git a/packages/oh-my-live2d/src/types/options.ts b/packages/oh-my-live2d/src/types/options.ts index ea2cd37..2e75902 100644 --- a/packages/oh-my-live2d/src/types/options.ts +++ b/packages/oh-my-live2d/src/types/options.ts @@ -9,6 +9,11 @@ import type { ImportType } from './index.js'; * @name 配置选项 */ export interface Options { + /** + * 移动端是否展示, 开启后将以移动端样式展示各元素 + * @default false + */ + mobileDisplay?: boolean; /** * 导入类型, 默认使用全量导入: complete * @default complete diff --git a/packages/oh-my-live2d/src/types/tips.ts b/packages/oh-my-live2d/src/types/tips.ts index be20c6c..6df987c 100644 --- a/packages/oh-my-live2d/src/types/tips.ts +++ b/packages/oh-my-live2d/src/types/tips.ts @@ -21,6 +21,11 @@ export interface TipsOptions { */ style?: CommonStyleType; + /** + * + * 移动端时的提示框样式, 支持传入CSS对象, 提示框的默认情况下, 始终与舞台保持水平居中, 默认宽度为舞台的60%, 高度自动被内容撑开. + */ + mobileStyle?: CommonStyleType; /** * 闲置状态下的提示 * diff --git a/tests/vite-app/public/index.min.js b/tests/vite-app/public/index.min.js index 36a7a84..e7c8751 100644 --- a/tests/vite-app/public/index.min.js +++ b/tests/vite-app/public/index.min.js @@ -1,4 +1,4 @@ -(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 A=Object.getOwnPropertySymbols;var tt=Object.prototype.hasOwnProperty,et=Object.prototype.propertyIsEnumerable;var z=(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)&&z(d,r,a[r]);if(A)for(var r of A(a))et.call(a,r)&&z(d,r,a[r]);return d};var o=(d,a,r)=>(z(d,typeof a!="symbol"?a+"":a,r),r);var v=(d,a,r)=>new Promise((O,x)=>{var k=m=>{try{E(r.next(m))}catch(P){x(P)}},p=m=>{try{E(r.throw(m))}catch(P){x(P)}},E=m=>m.done?O(m.value):Promise.resolve(m.value).then(k,p);E((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}}},O=i=>i!==null&&typeof i=="object"&&!Array.isArray(i),x=i=>typeof i=="number"||i instanceof Number,k=i=>typeof i=="function",p=(i,t)=>{const e=Object.assign({},i);return O(i)&&O(t)&&Object.keys(t).forEach(s=>{O(t[s])?s in i?e[s]=p(i[s],t[s]):Object.assign(e,{[s]:t[s]}):Object.assign(e,{[s]:t[s]})}),e},E=i=>` +(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 tt=Object.defineProperty;var N=Object.getOwnPropertySymbols;var et=Object.prototype.hasOwnProperty,it=Object.prototype.propertyIsEnumerable;var D=(d,a,r)=>a in d?tt(d,a,{enumerable:!0,configurable:!0,writable:!0,value:r}):d[a]=r,H=(d,a)=>{for(var r in a||(a={}))et.call(a,r)&&D(d,r,a[r]);if(N)for(var r of N(a))it.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 S=(d,a,r)=>new Promise((z,E)=>{var C=I=>{try{M(r.next(I))}catch(y){E(y)}},u=I=>{try{M(r.throw(I))}catch(y){E(y)}},M=I=>I.done?z(I.value):Promise.resolve(I.value).then(C,u);M((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 S(this,null,function*(){const s=()=>S(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}}},z=i=>i!==null&&typeof i=="object"&&!Array.isArray(i),E=i=>typeof i=="number"||i instanceof Number,C=i=>typeof i=="function",u=(i,t)=>{const e=Object.assign({},i);return z(i)&&z(t)&&Object.keys(t).forEach(s=>{z(t[s])?s in i?e[s]=u(i[s],t[s]):Object.assign(e,{[s]:t[s]}):Object.assign(e,{[s]:t[s]})}),e},M=i=>` @keyframes oml2d-shake-tips{ 0% { transform: translate(-50%, 5%) scale(0.99); @@ -117,15 +117,15 @@ transform: translateX(0%); } } - `,m="https://lib.oml2d.com",P={fixed:!0,primaryColor:"#38B0DE",sayHello:!0,transitionTime:1e3,parentElement:document.body,importType:"complete",libraryUrls:{cubism2:`${m}/live2d.min.js`,cubism5:`${m}/live2dcubismcore.min.js`},models:[],tips:{messageLine:3,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:["你复制了什么内容呢?记得注明出处哦~"]}}},S={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`},T={stageId:"oml2dStage",canvasId:"oml2dCanvas",statusBarId:"oml2dStatusBar",tipsId:"oml2dTips",menusId:"oml2dMenus"},B=[{id:"Rest",name:"icon-bed",title:"休息"},{id:"SwitchModel",name:"icon-a-userswitch-fill",title:"切换模型"},{id:"About",name:"icon-info-circle-fill",title:"关于"}],$=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]$/,w=/^1[8-9]$/,b=/^2[0-1]$/,L=/^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:w.test(s)?e=t==null?void 0:t.dusk:b.test(s)?e=t==null?void 0:t.night:L.test(s)?e=t==null?void 0:t.lateNight:e=t==null?void 0:t.weeHours,e},j=()=>console.log(` + `,I={position:"absolute",fontSize:"18px",borderRadius:"10px",filter:"drop-shadow(0 0 5px #999)",border:"2px solid #fff",color:"#fff",padding:"15px 5px",opacity:0,visibility:"hidden",transform:"translateX(-50%)",textAlign:"center",justifyContent:"center",animationDuration:"1000ms,1000ms",animationFillMode:"forwards, none",animationIterationCount:"1, infinite",width:"60%",left:"50%",top:0},y="https://lib.oml2d.com",B={mobileDisplay:!1,fixed:!0,primaryColor:"#38B0DE",sayHello:!0,transitionTime:1e3,parentElement:document.body,importType:"complete",libraryUrls:{cubism2:`${y}/live2d.min.js`,cubism5:`${y}/live2dcubismcore.min.js`},models:[],tips:{messageLine:3,mobileStyle:{},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:["你复制了什么内容呢?记得注明出处哦~"]}}},T={PIXI:`${y}/pixi.min.js`,PIXI_LIVE2D_DISPLAY:`${y}/pixi-live2d-display.min.js`,PIXI_LIVE2D_DISPLAY_CUBISM2:`${y}/pixi-live2d-display-cubism2.min.js`,PIXI_LIVE2D_DISPLAY_CUBISM4:`${y}/pixi-live2d-display-cubism4.min.js`,PIXI_LIVE2D_DISPLAY_EXTRA:`${y}/pixi-live2d-display-extra.min.js`},L={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:"关于"}],j=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])$/,p=/^1[4-7]$/,g=/^1[8-9]$/,v=/^2[0-1]$/,b=/^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:p.test(s)?e=t==null?void 0:t.afternoon:g.test(s)?e=t==null?void 0:t.dusk:v.test(s)?e=t==null?void 0:t.night:b.test(s)?e=t==null?void 0:t.lateNight:e=t==null?void 0:t.weeHours,e},X=()=>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;"),C=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},M=(i,t)=>{Object.assign(t.style,i)},X=i=>new Promise(t=>setTimeout(t,i)),f=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(f(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(S.PIXI),yield u(S.PIXI_LIVE2D_DISPLAY_CUBISM2);break;case"cubism5":yield u(t[i]),yield u(S.PIXI),yield u(S.PIXI_LIVE2D_DISPLAY_CUBISM4);break;default:yield Promise.all([u(t.cubism2),u(t.cubism5)]),yield u(S.PIXI),yield u(S.PIXI_LIVE2D_DISPLAY);break}yield u(S.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 以获得最新版详细信息, 并及时更新.")}),N=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,"styleSheet");this.style=t,this.styleSheet=f({tagName:"style",id:"oml2dStyle",innerHtml:E(this.style.primaryColor)}),document.head.append(this.styleSheet)}reloadStyleSheet(t){this.styleSheet.innerHTML=E(t.primaryColor)}}class Y{constructor(t){o(this,"element");o(this,"style",{});o(this,"clickItem");this.stageElement=t,this.element=f({id:T.menusId,tagName:"div",className:T.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=B.map(e=>{const s=f({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;"),O=i=>{const t=H({},i);return"width"in i&&E(i.width)&&(t.width=`${i.width}px`),"height"in i&&E(i.height)&&(t.height=`${i.height}px`),t},P=(i,t)=>{Object.assign(t.style,i)},F=i=>new Promise(t=>setTimeout(t,i)),w=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(w(e))}),i.innerHtml&&(t.innerHTML=i.innerHtml),i.innerText&&(t.innerText=i.innerText),t},f=i=>new Promise(t=>{const e=document.createElement("script");document.head.append(e),e.src=i,e.addEventListener("load",()=>{t()})}),R=(i,t)=>S(this,null,function*(){switch(i){case"cubism2":yield f(t[i]),yield f(T.PIXI),yield f(T.PIXI_LIVE2D_DISPLAY_CUBISM2);break;case"cubism5":yield f(t[i]),yield f(T.PIXI),yield f(T.PIXI_LIVE2D_DISPLAY_CUBISM4);break;default:yield Promise.all([f(t.cubism2),f(t.cubism5)]),yield f(T.PIXI),yield f(T.PIXI_LIVE2D_DISPLAY);break}yield f(T.PIXI_LIVE2D_DISPLAY_EXTRA)}),V=()=>S(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=>S(this,null,function*(){const e=yield(yield fetch("https://v1.hitokoto.cn/")).json();return i?i(e):`${e.hitokoto} -- ${e.from}`});class Y{constructor(t){o(this,"styleSheet");this.style=t,this.styleSheet=w({tagName:"style",id:"oml2dStyle",innerHtml:M(this.style.primaryColor)}),document.head.append(this.styleSheet)}reloadStyleSheet(t){this.styleSheet.innerHTML=M(t.primaryColor)}}class W{constructor(t){o(this,"element");o(this,"style",{});o(this,"clickItem");this.stageElement=t,this.element=w({id:L.menusId,tagName:"div",className:L.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=w({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=p(this.style,t),M(this.style,this.element)}}var I=(i=>(i.pc="PC",i.mobile="MOBILE",i))(I||{}),_=(i=>(i.ALL="ALL",i.IDLE="IDLE",i.NONE="NONE",i))(_||{});class W{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=f({id:T.stageId,tagName:"div"}),this.canvasElement=f({id:T.canvasId,tagName:"canvas"}),this.wrapperElement=f({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=p(this.style,t),M(this.style,this.element),this.setCanvasStyle({width:"100%",height:"100%",zIndex:"9999",position:"relative"}),e==null||e()}setCanvasStyle(t){this.canvasStyle=p(this.canvasStyle,t),M(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 D=(i=>(i.info="info",i.error="error",i))(D||{});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=f({id:T.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=p(this.style,t),M(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=u(this.style,t),P(this.style,this.element)}}var x=(i=>(i.pc="PC",i.mobile="MOBILE",i))(x||{}),_=(i=>(i.ALL="ALL",i.IDLE="IDLE",i.NONE="NONE",i))(_||{});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||_.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})}}get width(){return this.model.width}get height(){return this.model.height}}class G{constructor(t,e){o(this,"element");o(this,"canvasElement");o(this,"wrapperElement");o(this,"status",0);o(this,"style",{});o(this,"canvasStyle",{});o(this,"slideChangeEnd");this.targetElement=t,this.options=e,this.element=w({id:L.stageId,tagName:"div"}),this.canvasElement=w({id:L.canvasId,tagName:"canvas"}),this.wrapperElement=w({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=u(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=u(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 k=(i=>(i.info="info",i.error="error",i))(k||{});class Q{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=w({id:L.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=u(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);o(this,"contentElement");o(this,"contentStyle",{});this.tipsOptions=e,this.element=f({id:T.tipsId,tagName:"div"}),this.contentElement=f({id:"oml2dTipsContent",tagName:"div"}),this.element.append(this.contentElement),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:"15px 5px",opacity:0,visibility:"hidden",transform:"translateX(-50%)",textAlign:"center",justifyContent:"center",animationDuration:`${this.transitionTime}ms,${this.transitionTime}ms`,animationFillMode:"forwards, none",animationIterationCount:"1, infinite",width:"60%",left:"50%",top:0}),this.setContentStyle({display:"-webkit-box",textOverflow:"ellipsis",WebkitBoxOrient:"vertical",WebkitLineClamp:this.tipsOptions.messageLine,overflow:"hidden"}),this.tipsOptions){const t=C(this.tipsOptions.style||{});this.setStyle(t)}}setStyle(t){this.style=p(this.style,t),M(this.style,this.element)}setContentStyle(t){this.contentStyle=p(this.contentStyle,t),M(this.contentStyle,this.contentElement)}setContent(t){this.contentElement.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?k(this.tipsOptions.idleTips.wordTheDay)?n=yield N(this.tipsOptions.idleTips.wordTheDay):n=yield N():k(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",I.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 U(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!==I.pc){this.statusBar.popup("看板娘休息中",D.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=I.mobile:this.windowSizeType=I.pc,this.mediaQuery.addEventListener("change",t=>{t.matches?this.windowSizeType=I.mobile:this.windowSizeType=I.pc})}loadModel(t=!0){var e,s,n,l,c,g,w;t&&this.statusBar.showLoading(),this.model=new W(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(b=>{var y;const L=p(C(b),C(this.currentModelOption.stageStyle||{}));this.stage.setStyle(L,()=>this.application.resize()),this.stage.slideIn((y=this.options)==null?void 0:y.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 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),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("休息中",D.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=>v(this,null,function*(){const{parentElement:n}=s,l=p(P,s);l.parentElement=n||document.body;const{PixiLive2dDisplay:c,PIXI:g,HitAreaFrames:w}=yield i(l.importType,l.libraryUrls);t||(t=new K(l,c,g.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,g,w=function(y,h){h.parentNode.insertBefore(y,h)};if(t&&!i.__iconfont__svg__cssinject__){i.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(y){console&&console.log(y)}}s=function(){var y,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,(y=document.body).firstChild?w(h,y.firstChild):y.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,g=!1,L(),c.onreadystatechange=function(){c.readyState=="complete"&&(c.onreadystatechange=null,b())})}function b(){g||(g=!0,l())}function L(){try{c.documentElement.doScroll("left")}catch(y){return void setTimeout(L,50)}b()}}(window);const J=q((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=J,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 K{constructor(t,e){o(this,"element");o(this,"idlePlayer");o(this,"closeTimer",0);o(this,"transitionTime",1e3);o(this,"style",I);o(this,"priority",0);o(this,"contentElement");o(this,"contentStyle",{});this.tipsOptions=e,this.element=w({id:L.tipsId,tagName:"div"}),this.contentElement=w({id:"oml2dTipsContent",tagName:"div"}),this.element.append(this.contentElement),t.append(this.element),this.initStyle(),this.idlePlayer=this.createIdleMessagePlayer()}initStyle(){this.setContentStyle({display:"-webkit-box",textOverflow:"ellipsis",WebkitBoxOrient:"vertical",WebkitLineClamp:this.tipsOptions.messageLine,overflow:"hidden"})}setStyle(t={}){this.style=u(this.style,t),P(this.style,this.element)}setContentStyle(t){this.contentStyle=u(this.contentStyle,t),P(this.contentStyle,this.contentElement)}setContent(t){this.contentElement.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=j(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(()=>S(this,null,function*(){this.tipsOptions.idleTips.wordTheDay?C(this.tipsOptions.idleTips.wordTheDay)?n=yield A(this.tipsOptions.idleTips.wordTheDay):n=yield A():C(t)?n=yield t():n=a(t||[])||"",n?(this.showMessage(n,e,s),yield F(e)):l.stop()}),this.tipsOptions.idleTips.interval);return l}}class q{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",x.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 Y({primaryColor:this.options.primaryColor}),this.stage=new G(this.options.parentElement,t),this.statusBar=new Q(this.options.parentElement,{info:this.options.primaryColor,error:"#F08080"}),this.tips=new K(this.stage.element,this.options.tips),this.menus=new W(this.stage.element),this.application=this.createApplication(),this.initialize(),this.setCommonStyle(),V()}initialize(){if(this.getWindowSizeType(),this.windowSizeType!==x.pc&&!this.options.mobileDisplay){this.statusBar.popup("看板娘休息中",k.info,8e3);return}this.loadModel(),this.registerEvents()}setCommonStyle(){const t={backgroundColor:this.options.primaryColor};this.tips.setStyle(t),this.statusBar.setStyle(t)}getWindowSizeType(){this.mediaQuery.matches?this.windowSizeType=x.mobile:this.windowSizeType=x.pc}onWindowSizeChange(t,e){this.mediaQuery.matches?(this.windowSizeType=x.mobile,e()):(this.windowSizeType=x.pc,t()),this.mediaQuery.addEventListener("change",s=>{s.matches?(this.windowSizeType=x.mobile,e()):(this.windowSizeType=x.pc,t())})}loadModel(t=!0){var e,s;t&&this.statusBar.showLoading(),this.model=new U(this.pixiLive2dDisplayModule.Live2DModel,this.currentModelOption,this.application,this.HitAreaFrames),(e=this.model)==null||e.onLoaded(()=>{var n;this.onWindowSizeChange(()=>{var p,g,v,b,m;(g=this.model)==null||g.setScale((p=this.currentModelOption)==null?void 0:p.scale,this.currentModelOption.scale),(v=this.model)==null||v.setPosition(...this.currentModelOption.position||[]);const l={width:(b=this.model)==null?void 0:b.width,height:(m=this.model)==null?void 0:m.height},c=u(O(l),O(this.currentModelOption.stageStyle||{}));this.stage.setStyle(c,()=>this.application.resize()),this.tips.setStyle(O(this.options.tips.style||{}))},()=>{var p,g,v,b,m;if(!this.options.mobileDisplay){this.statusBar.popup("看板娘休息中",k.info,8e3),this.stage.slideOut(this.options.transitionTime),this.tips.clear();return}(g=this.model)==null||g.setScale((p=this.currentModelOption)==null?void 0:p.mobileScale,this.currentModelOption.mobileScale),(v=this.model)==null||v.setPosition(...this.currentModelOption.mobilePosition||[]);const l={width:(b=this.model)==null?void 0:b.width,height:(m=this.model)==null?void 0:m.height},c=u(O(l),O(this.currentModelOption.mobileStageStyle||{}));this.stage.setStyle(c,()=>this.application.resize()),this.tips.setStyle(O(this.options.tips.mobileStyle||{}))}),this.stage.slideIn((n=this.options)==null?void 0:n.transitionTime),this.statusBar.hideLoading()}),(s=this.model)==null||s.onFail(n=>{this.statusBar.loadingError(this.loadModel.bind(this)),console.error(n)})}get currentModelOption(){return this.options.models[this.modelIndex]}loadNextModel(){return S(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),E((t=this.options.models)==null?void 0:t.length)&&(this.modelIndex{switch(t){case"Rest":this.stage.slideOut(this.options.transitionTime),this.statusBar.popup("看板娘休息中",k.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 J=i=>{let t;return s=>S(this,null,function*(){const{parentElement:n}=s,l=u(B,s);l.parentElement=n||document.body;const{PixiLive2dDisplay:c,PIXI:p,HitAreaFrames:g}=yield i(l.importType,l.libraryUrls);t||(t=new q(l,c,p.Application,g))})};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,p,g=function(m,h){h.parentNode.insertBefore(m,h)};if(t&&!i.__iconfont__svg__cssinject__){i.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(m){console&&console.log(m)}}s=function(){var m,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,(m=document.body).firstChild?g(h,m.firstChild):m.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,p=!1,b(),c.onreadystatechange=function(){c.readyState=="complete"&&(c.onreadystatechange=null,v())})}function v(){p||(p=!0,l())}function b(){try{c.documentElement.doScroll("left")}catch(m){return void setTimeout(b,50)}v()}}(window);const Z=J((i,t)=>S(this,null,function*(){return yield R(i,t),window.PIXI.utils.skipHello(),{PixiLive2dDisplay:window.PIXI.live2d,PIXI:window.PIXI,HitAreaFrames:window.PIXI.live2d.HitAreaFrames}}));d.loadOml2d=Z,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})}); diff --git a/tests/vite-app/src/main.ts b/tests/vite-app/src/main.ts index b45ce18..b00db06 100644 --- a/tests/vite-app/src/main.ts +++ b/tests/vite-app/src/main.ts @@ -6,12 +6,13 @@ import './style.css'; void loadOml2d({ // parentElement: el, - + mobileDisplay: true, primaryColor: '#38B0DE', models: [ { path: 'https://registry.npmmirror.com/oml2d-models/latest/files/models/Senko_Normals/senko.model3.json', - stageStyle: {} + stageStyle: {}, + mobileScale: 0.08 }, { path: 'https://registry.npmmirror.com/oml2d-models/latest/files/models/Pio/model.json', @@ -23,6 +24,9 @@ void loadOml2d({ } ], tips: { + mobileStyle: { + padding: '0px 5px' + }, // style: { // width: 300, // height: '100px'