webtalekit-alpha 0.2.11 → 0.2.13

package/.history/src/core/drawer_20240904011740.ts

@@ -0,0 +1,262 @@
+import { ImageObject } from '../resource/ImageObject'
+import { outputLog } from '../utils/logger'
+import { sleep } from '../utils/waitUtil'
+
+/*
+ drawerの目的
+  UIのHTMLとcanvasを描画する。
+*/
+export class Drawer {
+  private gameScreen: HTMLElement
+  private nameView!: HTMLElement
+  private messageText!: HTMLElement
+  private interactiveView!: HTMLElement
+  private ctx!: CanvasRenderingContext2D
+  private screenHtml!: HTMLElement
+  private config: any
+  isSkip: boolean = false
+  readySkip: boolean = false
+
+  constructor(gameContainer: HTMLElement) {
+    this.gameScreen = gameContainer
+    // ウィンドウのリサイズ時にスケールを調整
+    window.addEventListener('resize', () => this.adjustScale(this.gameScreen))
+    // 初期ロード時にもスケールを調整
+    this.adjustScale(this.gameScreen)
+  }
+
+  setScreen(screenHtml: HTMLElement, resolution: { width: number; height: number }) {
+    this.screenHtml = screenHtml
+    this.nameView = screenHtml.querySelector('#nameView') as HTMLElement
+    this.messageText = screenHtml.querySelector('#messageView') as HTMLElement
+    this.interactiveView = screenHtml.querySelector(
+      '#interactiveView',
+    ) as HTMLElement
+
+    // canvasをDOMに追加する
+    const canvas = document.createElement('canvas')
+    canvas.width = resolution.width || 1280
+    canvas.height = resolution.height || 720
+    // canvasのコンテキストを取得する
+    this.gameScreen.appendChild(canvas)
+    this.ctx = canvas.getContext('2d') as CanvasRenderingContext2D
+    // 黒で塗りつぶす
+    this.ctx.fillStyle = 'black'
+    this.ctx.fillRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height)
+    // 初期ロード時にもスケールを調整
+    this.adjustScale(this.gameScreen)
+  }
+
+  drawName(name: string) { 
+    this.nameView.innerHTML = name
+  }
+
+  async drawText(text: string, wait: number) {
+    this.messageText.innerHTML = ''
+    for (const char of text) {
+      //prettier-ignore
+      setTimeout(() => { this.readySkip = true, wait*500 });
+      // 100ミリ秒待ってから、スキップボタンが押されたら即座に表示
+      if (!this.isSkip) {
+        this.messageText.innerHTML += char
+        await sleep(wait)
+      } else {
+        if (this.readySkip) {
+          this.messageText.innerHTML = text
+          this.readySkip = false
+          this.isSkip = false
+          break
+        }
+      }
+    }
+  }
+
+  async drawChoices(choices: any) {
+    let isSelect = false
+    let selectId = 0
+    let onSelect = 0
+    
+    // 選択肢ボタンの配置を設定する
+    const interactiveView = document.querySelector(
+      '#interactiveView',
+    ) as HTMLElement
+    if (choices.position == 'auto' || choices.position === undefined) {
+      interactiveView.className = 'auto'
+    } else {
+      interactiveView.className = 'manual'
+    }
+    // 選択肢を表示
+    for (const choice of choices.content) {
+      const defaultImage =
+        choice.default !== undefined
+          ? choice.default
+          : './src/resource/system/systemPicture/02_button/button.png'
+      const hoverImage =
+        choice.hover !== undefined
+          ? choice.hover
+          : './src/resource/system/systemPicture/02_button/button2.png'
+      const selectImage =
+        choice.select !== undefined
+          ? choice.select
+          : './src/resource/system/systemPicture/02_button/button3.png'
+      const button = document.createElement('div')
+      button.className = 'choice'
+      if (interactiveView.className == 'manual') {
+        button.style.position = 'absolute'
+        button.style.top = choice.position?.y || 0
+        button.style.left = choice.position?.x || 0
+      }
+      button.style.color =
+        choice.color !== undefined ? choice.color.default : 'black'
+      button.style.width = '100%'
+      button.style.height = '50px'
+      button.style.backgroundImage = `url(${defaultImage})`
+      button.style.textAlign = 'center'
+      button.style.backgroundRepeat = 'no-repeat'
+      button.style.backgroundPosition = 'center'
+      button.style.paddingTop = '20px'
+      button.addEventListener('mouseenter', function () {
+        // マウスが要素の上にあるときの背景色
+        this.style.backgroundImage = `url(${hoverImage})`
+        this.style.color =
+          choice.color !== undefined ? choice.color.hover : 'black'
+      })
+      button.addEventListener('mouseleave', function () {
+        // マウスが要素から離れたときの背景色
+        this.style.backgroundImage = `url(${defaultImage})`
+        this.style.color =
+          choice.color !== undefined ? choice.color.default : 'black'
+      })
+      button.addEventListener('mousedown', function () {
+        // マウスが要素を選択したときの背景色
+        this.style.backgroundImage = `url(${selectImage})`
+        this.style.color =
+          choice.color !== undefined ? choice.color.select : 'black'
+      })
+      button.innerHTML = choice.label
+      button.onclick = () => {
+        outputLog('click', 'debug', choice)
+        this.interactiveView.querySelectorAll('.choice').forEach((element) => {
+          element.parentNode?.removeChild(element)
+        })
+        selectId = choice.id
+        onSelect = choice.content.map((item: any) => ({ ...item, sub: true }))
+        isSelect = true
+      }
+      this.interactiveView.appendChild(button)
+    }
+
+    // 選択待ち
+    return new Promise((resolve) => {
+      const intervalId = setInterval(() => {
+        if (isSelect) {
+          clearInterval(intervalId)
+          resolve({ selectId, onSelect })
+        }
+      }, 100)
+    })
+  }
+
+  clear() {
+    this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height)
+  }
+
+  show(displayedImages: any) {
+    this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height)
+    for (let key in displayedImages) {
+      const img: ImageObject = displayedImages[key].image
+      const pos: { x: number; y: number } = displayedImages[key].pos || {
+        x: 0,
+        y: 0,
+      }
+      const size: { width: number; height: number } = displayedImages[key].size
+      const reverse: boolean = displayedImages[key].look || false
+      const entry: { time: number; wait: boolean } = displayedImages[key]
+        .entry || { time: 1, wait: false }
+      if (entry.wait) {
+        // 表示開始までの遅延処理
+        setTimeout(() => {
+          this.drawCanvas(img, pos, size, reverse)
+        }, entry.time * 1000)
+      } else {
+        this.drawCanvas(img, pos, size, reverse)
+      }
+    }
+  }
+
+  moveTo(name: string, displayedImages: any, pos: { x: number; y: number }, durning: number) {
+    return new Promise((resolve) => {
+      const target = displayedImages[name];
+      const startPos = { x: target.pos.x, y: target.pos.y };
+      const dest = { x: startPos.x + Number(pos.x), y: startPos.y + Number(pos.y) };
+      const startTime = performance.now();
+  
+      const move = (currentTime:any) => {
+        const elapsedTime = (currentTime - startTime) / 1000; // 秒単位の経過時間
+        const progress = Math.min(elapsedTime / durning, 1); // 0から1の進捗
+  
+        target.pos.x = startPos.x + (dest.x - startPos.x) * progress;
+        target.pos.y = startPos.y + (dest.y - startPos.y) * progress;
+  
+        this.show(displayedImages);
+  
+        if (progress < 1) {
+          window.requestAnimationFrame(move);
+        } else {
+          // 最終位置を正確に設定
+          target.pos.x = dest.x;
+          target.pos.y = dest.y;
+          this.show(displayedImages);
+          resolve(null);
+        }
+      };
+  
+      window.requestAnimationFrame(move);
+    });
+  }
+  drawCanvas(img: ImageObject, pos: any, size: any, reverse: any) {
+    outputLog('drawCanvas', 'debug', {img, pos, size, reverse})
+    const canvas = img.draw(reverse).getCanvas()
+    // canvasから画像を取得して、this.ctxに描画
+    const imageWidth = size !== undefined ? size.width : canvas.width
+    const imageHeight = size !== undefined ? size.height : canvas.height
+    this.ctx.drawImage(
+      canvas,
+      0,
+      0,
+      canvas.width,
+      canvas.height,
+      pos.x,
+      pos.y,
+      imageWidth,
+      imageHeight,
+    ) //CanvasRenderingContext2D.drawImage: Passed-in canvas is empty
+  }
+
+  adjustScale(targetElement: HTMLElement) {
+    // ターゲット要素の元の幅と高さ
+    const originalWidth = targetElement.scrollWidth // 例: 1280px
+    const originalHeight = targetElement.scrollHeight // 例: 720px
+
+    // ビューポートの幅と高さを取得
+    const viewportWidth = window.innerWidth
+    const viewportHeight = window.innerHeight
+
+    // 幅と高さのスケールを計算
+    const scaleX = viewportWidth / originalWidth
+    const scaleY = viewportHeight / originalHeight
+
+    // 幅と高さのうち、小さい方のスケールを選択（アスペクト比を維持）
+    const scale = Math.min(scaleX, scaleY)
+
+    // ターゲット要素にスケールを適用
+    targetElement.style.transform = `scale(${scale})`
+  }
+
+  setVisibility(name: string, isVisible: boolean) {
+    const target = this.screenHtml.querySelector(name) as HTMLElement
+    if (target) {
+      target.style.visibility = isVisible ? 'visible' : 'hidden'
+    }
+  }
+}

package/.history/src/core/index_20240812190102.js

@@ -0,0 +1,443 @@
+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.json'
+import { outputLog } from '../utils/logger'
+import { sleep } from '../utils/waitUtil'
+
+export class Core {
+  isAuto = false
+  isNext = false
+  isSkip = false
+  onNextHandler = null
+  sceneFile = {}
+  sceneConfig = {}
+  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,
+  }
+
+  constructor() {
+    this.gameContainer = document.getElementById('gameContainer')
+    // Drawerの初期化（canvasタグのサイズを設定する)
+    this.drawer = new Drawer(this.gameContainer)
+    // ScenarioManagerの初期化（変数の初期値設定）
+    this.scenarioManager = new ScenarioManager()
+    // ResourceManagerの初期化（引数にconfigを渡して、リソース管理配列を作る）
+    this.resourceManager = new ResourceManager(import(/* webpackIgnore: true */ '/src/resource/config.js')) //  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()
+    })
+
+    // シナリオを実行する
+    while (this.scenarioManager.hasNext()) {
+      await this.runScenario()
+    }
+  }
+
+  async loadScene(sceneFileName) {
+    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) {
+    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.progress.currentScene = 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.scenarioManager.setBackground(background)
+    // BGMを再生する
+    const bgm = await new SoundObject().setAudioAsync(sceneConfig.bgm)
+    bgm.play(true)
+  }
+
+  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(scenarioObject) {
+    outputLog('textHandler:line', 'debug', scenarioObject)
+    // 文章だけの場合は、contentプロパティに配列として設定する
+    if (typeof scenarioObject === 'string') scenarioObject = { content: [scenarioObject] }
+    // httpレスポンスがある場合は、list.contentに追加して、表示対象に加える
+    if (scenarioObject.then || scenarioObject.error) {
+      scenarioObject.content = scenarioObject.content.concat(scenarioObject.then || scenarioObject.error)
+    }
+    outputLog('call', 'debug', scenarioObject)
+    // {{}}が含まれている場合は、変換処理を行う
+    scenarioObject.content = scenarioObject.content.map((text) =>
+      text.replace(/{{([^{}]+)}}/g, (match) => {
+        const expr = match.slice(2, -2)
+        const returnValue = this.executeCode(`return ${expr}`)
+        return typeof returnValue == 'object' ? JSON.stringify(returnValue) : returnValue
+      }),
+    )
+    // 名前が設定されている場合は、名前を表示する
+    if (scenarioObject.name) {
+      this.drawer.drawName(scenarioObject.name)
+    } else {
+      this.drawer.drawName('')
+    }
+
+    //prettier-ignore
+    this.onNextHandler = () => { this.drawer.isSkip = true }
+    // 表示する文章を1行ずつ表示する
+    for (const line of scenarioObject.content) {
+      await this.drawer.drawText(line, line.speed || 50)
+      //prettier-ignore
+      this.onNextHandler = () => { this.isNext = true }
+      if (typeof line.wait === 'number') {
+        if (line.wait > 0 || this.isAuto) {
+          const waitTime = line.wait || 1500
+          // 指定された時間だけ待機
+          await sleep(line.wait)
+        }
+      } else {
+        // 改行ごとに入力待ち
+        await this.clickWait()
+      }
+    }
+    this.drawer.isSkip = false
+    this.scenarioManager.setHistory(scenarioObject.content)
+  }
+
+  // クリック待ち処理
+  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) 
+    const { selectId, onSelect: selectHandler } = await this.drawer.drawChoices(line)
+    if (selectHandler !== undefined) {
+      this.scenarioManager.addScenario(selectHandler)
+    }
+    this.scenarioManager.setHistory({ line, ...selectId })
+  }
+
+  jumpHandler(line) {
+    outputLog('call:', 'debug', line.index)
+    this.newpageHandler()
+    this.scenarioManager.setIndex(Number(line.index))
+  }
+
+  async showHandler(line) {
+    outputLog('line', 'debug', line)
+    // 表示する画像の情報を管理オブジェクトに追加
+    const key = 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)
+    // 画像の表示位置を設定
+    const position = { x: line.x, y: line.y }
+    // prettier-ignore
+    const size = line.width && line.height ? { width: line.width, height: line.height } : { width: image.getSize().width, height: image.getSize().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)
+    const key = line.name
+    delete this.displayedImages[key]
+    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)
+    // soundObjectを作成
+    const soundObject = await this.getSoundObject(line)
+    // 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.scenarioManager.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)
+    this.newpageHandler()
+    // sceneファイルを読み込む
+    await this.loadScene(line.to)
+    // 画面を表示する
+    await this.loadScreen(this.sceneConfig)
+  }
+
+  // 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 {
+      this.sceneFile.res = json
+      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
+  }
+
+  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)
+    }
+  }
+}