webtalekit-alpha 0.2.13 → 0.2.14

package/.history/src/core/index_20240824010212.ts

@@ -1,534 +0,0 @@
-import { Drawer } from './drawer'
-import { ScenarioManager } from './scenarioManager'
-import { ImageObject } from '../resource/ImageObject'
-import { ResourceManager } from './resourceManager'
-import { SoundObject } from '../resource/soundObject'
-import engineConfig from '../../engineConfig'
-import { outputLog } from '../utils/logger'
-import { sleep } from '../utils/waitUtil'
-
-type CommandList = {
-  [key: string]: (line: any) => Promise<void> | void;
-};
-
-type DisplayedImage = {
-  image: ImageObject;
-  size: {
-    width: number;
-    height: number;
-  };
-  pos?: {
-    x: number;
-    y: number;
-  };
-  look?: string;
-  entry?: {
-    time: number;
-    wait: boolean;
-  };
-};
-
-type UsedSound = {
-  audio: SoundObject;
-};
-
-export class Core {
-  bgm: SoundObject | null = null
-  isAuto = false
-  isNext = false
-  isSkip = false
-  onNextHandler = () => {}
-  sceneFile: { [key: string]: any } = {};
-  sceneConfig: { [key: string]: any } = {};
-  commandList: CommandList  = {
-    text: this.textHandler,
-    choice: this.choiceHandler,
-    show: this.showHandler,
-    newpage: this.newpageHandler,
-    hide: this.hideHandler,
-    jump: this.jumpHandler,
-    sound: this.soundHandler,
-    say: this.sayHandler,
-    if: this.ifHandler,
-    call: this.callHandler,
-    moveto: this.moveToHandler,
-    route: this.routeHandler,
-    wait: this.waitHandler,
-  }
-
-  gameContainer: HTMLElement | null;
-  drawer: Drawer;
-  scenarioManager: ScenarioManager;
-  resourceManager: ResourceManager;
-  displayedImages: { [key: string]: DisplayedImage } = {};
-  usedSounds: { [key: string]: UsedSound } = {};
-  tempImages: { [key: string]: DisplayedImage } = {};
-
-  constructor() {
-    // TODO: コンストラクターのエラーハンドリングを追加する
-    this.gameContainer = document.getElementById('gameContainer')
-    // Drawerの初期化（canvasタグのサイズを設定する)
-    this.drawer = new Drawer(this.gameContainer!)
-    // ScenarioManagerの初期化（変数の初期値設定）
-    this.scenarioManager = new ScenarioManager()
-    // ResourceManagerの初期化（引数にconfigを渡して、リソース管理配列を作る）
-    this.resourceManager = new ResourceManager() //  webpackIgnoreでバンドルを無視する
-    this.displayedImages = {}
-    this.usedSounds = {}
-  }
-
-  async start() {
-    outputLog('call', 'debug')
-    // TODO: ブラウザ用のビルドの場合は、最初にクリックしてもらう
-    // titleタグの内容を書き換える
-    document.title = engineConfig.title
-    // sceneファイルを読み込む
-    await this.loadScene('title')
-    // 画面を表示する
-    await this.loadScreen(this.sceneConfig)
-    // 入力イベントを設定する
-    document.addEventListener('keydown', (e) => {
-      if (e.key === 'Enter') {
-        this.onNextHandler()
-      } else if (e.key === 'Control') {
-        this.drawer.isSkip = true
-        this.isNext = true
-      }
-    })
-    document.addEventListener('keyup', (e) => {
-      if (e.key === 'Control') {
-        this.drawer.isSkip = true
-        this.isNext = false
-      }
-    })
-    document.addEventListener('click', (e) => {
-      this.onNextHandler()
-    })
-
-    await this.textHandler('タップでスタート')
-    // BGMを再生する
-    this.bgm!.play(true)
-    // シナリオを実行する
-    while (this.scenarioManager.hasNext()) {
-      await this.runScenario()
-    }
-  }
-
-  async loadScene(sceneFileName: string) {
-    outputLog('call', 'debug', sceneFileName)
-    // sceneファイルを読み込む
-    this.sceneFile = await import(/* webpackChunkName: "[request]" */ `/src/js/${sceneFileName}.js`)
-    this.scenarioManager.setScenario(this.sceneFile.scenario, sceneFileName)
-    this.sceneConfig = { ...this.sceneConfig, ...this.sceneFile.sceneConfig }
-    outputLog('sceneFile', 'debug', this.sceneFile)
-  }
-
-  async loadScreen(sceneConfig: { [key: string]: string }) {
-    outputLog('call', 'debug', sceneConfig)
-    // sceneConfig.templateを読み込んで、HTMLを表示する
-    const htmlString = await (await fetch(sceneConfig.template)).text()
-    // 読み込んだhtmlからIDにmainを持つdivタグとStyleタグ以下を取り出して、gameContainerに表示する
-    var parser = new DOMParser()
-    var doc = parser.parseFromString(htmlString, 'text/html')
-    this.gameContainer!.innerHTML = doc.getElementById('main')!.innerHTML
-    // Styleタグを取り出して、headタグに追加する
-    const styleElement = doc.head.getElementsByTagName('style')[0]
-    document.head.appendChild(styleElement)
-    // ゲーム進行用に必要な情報をセットする
-    this.drawer.setScreen(this.gameContainer!, engineConfig.resolution)
-    // シナリオの進行状況を保存
-    this.scenarioManager.setSceneName(sceneConfig.name)
-    // 背景画像を表示する
-    const background = await new ImageObject().setImageAsync(sceneConfig.background)
-    this.displayedImages['background'] = {
-      image: background,
-      size: {
-        width: this.gameContainer!.clientWidth,
-        height: this.gameContainer!.clientHeight,
-      },
-    }
-    this.drawer.show(this.displayedImages)
-    this.bgm = await new SoundObject().setAudioAsync(sceneConfig.bgm)
-  }
-
-  async runScenario() {
-    outputLog('call index:', 'debug', this.scenarioManager.getIndex())
-    let scenarioObject = this.scenarioManager.next()
-    if (!scenarioObject) {
-      return
-    }
-    outputLog('scenarioObject', 'debug', scenarioObject)
-    // prettier-ignore
-    const boundFunction = this.commandList[scenarioObject.type || 'text'].bind(this)
-    // prettier-ignore
-    outputLog(`boundFunction:${boundFunction.name.split(' ')[1]}`, 'debug', scenarioObject)
-    scenarioObject = await this.httpHandler(scenarioObject)
-    await boundFunction(scenarioObject)
-  }
-
-  async textHandler(line) {
-    outputLog('textHandler:line', 'debug', line)
-    // 文章だけの場合は、contentプロパティに配列として設定する
-    if (typeof line === 'string') line = { content: [line] }
-    // httpレスポンスがある場合は、list.contentに追加して、表示対象に加える
-    if (line.then || line.error) {
-      line.content = line.content.concat(line.then || line.error)
-    }
-    outputLog('call', 'debug', line)
-    
-    // 名前が設定されている場合は、名前を表示する
-    if (line.name) {
-      this.drawer.drawName(line.name)
-    } else {
-      this.drawer.drawName('')
-    }
-
-    //prettier-ignore
-    this.onNextHandler = () => { this.drawer.isSkip = true }
-    // 表示する文章を1行ずつ表示する
-    for (const text of line.content) {
-      // scenarioObject.content内にオブジェクトが含まれている場合は、クリア処理をスキップする
-      if (text.content.some(item => typeof item === 'object' && item !== null)) {
-        
-      } else {
-        this.drawer.clearText(); // テキスト表示領域をクリア
-      }
-
-      if (typeof text === 'string') {
-        await this.drawer.drawText(this.expandVariable(text), 50)
-      } else {
-        const container = this.drawer.createDecoratedElement(text);
-        await this.drawer.drawText(this.expandVariable(text.content[0]), text.speed || 50, container)
-      }
-      //prettier-ignore
-      this.onNextHandler = () => { this.isNext = true }
-      if (typeof text.wait === 'number') {
-        if (text.wait > 0 || this.isAuto) {
-          const waitTime = text.wait || 1500
-          // 指定された時間だけ待機
-          await sleep(waitTime)
-        }
-      } else {
-        // 改行ごとに入力待ち
-        await this.clickWait()
-      }
-    }
-    this.drawer.isSkip = false
-    this.scenarioManager.setHistory(line.content)
-  }
-
-  expandVariable(text) {
-    outputLog('call', 'debug', text)
-    return text.replace(/{{([^{}]+)}}/g, (match) => {
-      const expr = match.slice(2, -2)
-      const returnValue = this.executeCode(`return ${expr}`)
-      return typeof returnValue == 'object' ? JSON.stringify(returnValue) : returnValue
-    })
-  }
-
-  // クリック待ち処理
-  async clickWait() {
-    outputLog('call', 'debug')
-    this.drawer.setVisibility('#waitCircle', true)
-    return new Promise((resolve) => {
-      const intervalId = setInterval(() => {
-        if (this.isNext) {
-          this.drawer.setVisibility('#waitCircle', false)
-          clearInterval(intervalId)
-          this.isNext = false
-          resolve(null)
-        }
-      }, 500)
-    })
-  }
-
-  async sayHandler(line) {
-    outputLog('call', 'debug', line)
-    // say(name:string, pattern: string, voice: {playの引数},  ...text)
-    if (line.voice) await this.soundHandler({ path: line.voice, play: undefined })
-    await this.textHandler({ content: line.content, name: line.name })
-    this.scenarioManager.setHistory(line)
-  }
-
-  async choiceHandler(line) {
-    outputLog('call', 'debug', line)
-    if (line.prompt) this.textHandler(line.prompt) // promptがある場合は、表示する
-    const { selectId, onSelect: selectHandler } = await this.drawer.drawChoices(line)
-    if (selectHandler !== undefined) {
-      this.scenarioManager.addScenario(selectHandler)
-    }
-    this.scenarioManager.setHistory(line)
-  }
-
-  jumpHandler(line) {
-    outputLog('call:', 'debug', line.index)
-    this.newpageHandler()
-    this.scenarioManager.setIndex(Number(line.index))
-  }
-
-  async showHandler(line) {
-    outputLog('line', 'debug', line)
-    // 表示する画像の情報を管理オブジェクトに追加
-    const modeList = { 'bg': 'background', 'cutin': '', 'chara': '', 'cg': 'background', 'effect': 'effect' }
-    const key = Object.keys(modeList).includes(line.mode) ? modeList[line.mode] : line.name || line.src.split('/').pop()
-    const baseLine = engineConfig.resolution.height / 2
-    const centerPoint = {
-      left: { x: engineConfig.resolution.width * 0.25, y: baseLine },
-      center: { x: engineConfig.resolution.width * 0.5, y: baseLine },
-      right: { x: engineConfig.resolution.width * 0.75, y: baseLine },
-    }
-
-    const image = await this.getImageObject(line)
-    // 画像の表示位置を設定
-    let position = { x: line.x || 0, y: line.y || 0 }
-    // prettier-ignore
-    let size = line.width && line.height ? { width: line.width, height: line.height } : { width: image.getSize().width, height: image.getSize().height }
-
-    // line.modeが'cutin'の場合、center:middleのエイリアスを強制する
-    if (line.mode === 'cutin') {
-      line.pos = 'center:middle'
-    }
-
-    if (line.mode === 'cg') {
-      this.tempImages = { ...this.displayedImages }
-      this.displayedImages = { background: line.src }
-      size = { width: engineConfig.resolution.width, height: engineConfig.resolution.height }
-    }
-
-    if (line.pos) {
-      const pos = line.pos.split(':')
-      const baseLines = {
-        top: 0,
-        middle: engineConfig.resolution.height / 2,
-        bottom: engineConfig.resolution.height,
-      }
-      // エイリアスが設定されている場合、画像の中心点を求めて、画像の表示位置を設定する
-      position.x = centerPoint[pos[0]].x - size.width / 2
-      if (pos[1] === 'middle') {
-        position.y = baseLines[pos[1]] - size.width / 2
-      } else if (pos[1]) {
-        position.y = baseLines[pos[1]]
-      } else {
-        position.y = baseLine / 2
-      }
-    }
-    this.displayedImages[key] = {
-      image,
-      pos: position,
-      size: size,
-      look: line.look,
-      entry: line.entry,
-    }
-    outputLog('displayedImages', 'debug', this.displayedImages[key])
-    if (line.sepia) this.displayedImages[key].image.setSepia(line.sepia)
-    if (line.mono) this.displayedImages[key].image.setMonochrome(line.mono)
-    if (line.blur) this.displayedImages[key].image.setBlur(line.blur)
-    if (line.opacity) this.displayedImages[key].image.setOpacity(line.opacity)
-    this.drawer.show(this.displayedImages)
-    outputLog('this.displayedImages', 'debug', this.displayedImages)
-  }
-
-  hideHandler(line) {
-    outputLog('call', 'debug', line)
-    if(line.mode === 'cg') {
-      this.displayedImages = { ...this.tempImages }
-      this.tempImages = {}
-    } else {
-      delete this.displayedImages[line.name]
-    }
-    this.drawer.show(this.displayedImages)
-  }
-
-  async moveToHandler(line) {
-    outputLog('moveToHandler:line', 'debug', line)
-    const key = line.name
-    outputLog('moveToHandler:displayedImages', 'debug', this.displayedImages)
-    await this.drawer.moveTo(key, this.displayedImages, { x: line.x, y: line.y }, line.duration | 1)
-  }
-
-  async getImageObject(line) {
-    outputLog('call', 'debug', line)
-    let image
-    // 既にインスタンスがある場合は、それを使う
-    if (line.name) {
-      const targetImage = this.displayedImages[line.name]
-      const imageObject = targetImage ? targetImage.image : new ImageObject()
-      image = await imageObject.setImageAsync(line.src)
-    } else {
-      image = await new ImageObject().setImageAsync(line.src)
-    }
-    return image
-  }
-
-  async soundHandler(line) {
-    outputLog('call', 'debug', line)
-    let soundObject = await this.getSoundObject(line)
-    if(line.mode === 'bgm') {
-      if (this.bgm!.isPlaying) {
-        this.bgm!.stop()
-      }
-      this.bgm = soundObject
-    }
-  // playプロパティが存在する場合は、再生する
-  if ('play' in line) {
-    'loop' in line ? soundObject.play(true) : soundObject.play()
-  } else if ('stop' in line) {
-    soundObject.stop()
-  } else if ('pause' in line) {
-    soundObject.pause()
-  }
-    // soundObjectを管理オブジェクトに追加
-    const key = line.name || line.src.split('/').pop()
-    this.usedSounds[key] = {
-      audio: soundObject,
-    }
-  }
-
-  async getSoundObject(line) {
-    outputLog('call', 'debug', line)
-    let resource
-    if (line.name) {
-      const targetResource = this.usedSounds[line.name]
-      const soundObject = targetResource ? targetResource.audio : new SoundObject()
-      resource = await soundObject.setAudioAsync(line.src)
-    } else {
-      resource = await new SoundObject().setAudioAsync(line.src)
-    }
-    return resource
-  }
-
-  newpageHandler() {
-    outputLog('call', 'debug')
-    this.displayedImages = {
-      background: {
-        image: this.getBackground(),
-        size: {
-          width: this.gameContainer!.clientWidth,
-          height: this.gameContainer!.clientHeight,
-        },
-      },
-    }
-    this.drawer.clear()
-    this.drawer.show(this.displayedImages)
-  }
-
-  async ifHandler(line) {
-    outputLog('call', 'debug', line)
-    const isTrue = this.executeCode(`return ${line.condition}`)
-    outputLog(`${isTrue}`, 'debug')
-    if (isTrue) {
-      outputLog('', 'debug', line.content[0].content)
-      this.scenarioManager.addScenario(line.content[0].content)
-    } else {
-      outputLog('', 'debug', line.content[1].content)
-      this.scenarioManager.addScenario(line.content[1].content)
-    }
-  }
-
-  async routeHandler(line) {
-    outputLog('call', 'debug', line)
-    if (this.bgm!.isPlaying) {
-      this.bgm!.stop()
-      this.bgm = null
-    }
-    this.newpageHandler()
-    // sceneファイルを読み込む
-    await this.loadScene(line.to)
-    // 画面を表示する
-    await this.loadScreen(this.sceneConfig)
-     // BGMを再生する
-     this.bgm!.play(true)
-  }
-
-  // Sceneファイルに、ビルド時に実行処理を追加して、そこに処理をお願いしたほうがいいかも？
-  callHandler(line) {
-    outputLog('call', 'debug', line)
-    this.executeCode(line.func)
-  }
-
-  async httpHandler(line) {
-    if (!(line.get || line.post || line.put || line.delete)) {
-      return line
-    }
-    outputLog('call', 'debug', line)
-    // progress属性を処理する
-    // prettier-ignore
-    const progressText = line.content.filter((content) => content.type === 'progress')[0]
-    if (progressText) {
-      await this.textHandler({ content: [progressText.content][0], wait: 0 })
-    }
-    // get,post,put,delete属性を処理する
-    const headers = line.content
-      .filter((content) => content.type === 'header')[0]
-      .content.reduce(
-        (acc, header) => ({
-          ...acc,
-          [header.type]: header.content,
-        }),
-        {},
-      )
-    const body = line.content
-      .filter((content) => content.type === 'data')[0]
-      .content.reduce(
-        (acc, header) => ({
-          ...acc,
-          [header.type]: header.content,
-        }),
-        {},
-      )
-    outputLog('headers', 'debug', headers)
-    outputLog('body', 'debug', body)
-    const response = await fetch(line.get || line.post || line.put || line.delete, {
-      method: line.get ? 'GET' : line.post ? 'POST' : line.put ? 'PUT' : 'DELETE',
-      headers: headers,
-      body: JSON.stringify(body),
-    })
-    if (response.ok) {
-      const json = await response.json()
-      this.sceneFile.res = json
-      outputLog('res', 'debug', json)
-      line.then = line.content.filter((content) => content.type === 'then')[0].content
-    } else {
-      line.error = line.content.filter((content) => content.type === 'error')[0].content
-    }
-    if (line.content) {
-      line.content = line.content.filter(
-        (content) =>
-          !(
-            content.type &&
-            (content.type === 'header' ||
-              content.type === 'data' ||
-              content.type === 'then' ||
-              content.type === 'error' ||
-              content.type === 'progress')
-          ),
-      )
-    }
-    return line
-  }
-
-  async waitHandler(line) {
-    outputLog('call', 'debug', line)
-    if (line.time) {
-      await sleep(line.time)
-    }
-  }
-
-  setBackground(image) {
-    this.displayedImages["background"] = image
-  }
-
-  getBackground() {
-    return this.displayedImages["background"].image
-  }
-
-  executeCode(code) {
-    try {
-      const context = { ...this.sceneFile }
-      const func = new Function(...Object.keys(context), code)
-      return func.apply(null, Object.values(context))
-    } catch (error) {
-      console.error('Error executing code:', error)
-    }
-  }
-}