webtalekit-alpha 0.2.11 → 0.2.13

package/.history/src/core/drawer_20240816025358.ts

@@ -0,0 +1,357 @@
+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) * devicePixelRatio;
+    canvas.height = (resolution.height || 720) * devicePixelRatio;
+    // 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, speed: number = 50) {
+    const fragments = this.parseText(text);
+    await this.renderFragments(fragments, speed);
+  }
+
+  private async renderFragments(fragments: (string | HTMLElement)[], speed: number) {
+    for (const fragment of fragments) {
+      if (typeof fragment === 'string') {
+        await this.typeText(fragment, speed);
+      } else {
+        const element = fragment;
+        this.messageText.appendChild(element);
+        if (element.childNodes.length > 0) {
+          await this.renderFragments(Array.from(element.childNodes) as (string | HTMLElement)[], speed);
+        }
+      }
+    }
+  }
+
+  private async typeText(text: string, speed: number) {
+    for (const char of text) {
+      this.messageText.appendChild(document.createTextNode(char));
+      await sleep(speed);
+    }
+  }
+
+  private createElementFromTag(tag: string): HTMLElement | null {
+    const colorMatch = tag.match(/<color\s+value="(.*?)">/);
+    if (colorMatch) {
+      const span = document.createElement('span');
+      span.style.color = colorMatch[1];
+      return span;
+    }
+
+    const rubyMatch = tag.match(/<ruby\s+text="(.*?)">/);
+    if (rubyMatch) {
+      const ruby = document.createElement('ruby');
+      const rt = document.createElement('rt');
+      rt.textContent = rubyMatch[1];
+      ruby.appendChild(rt);
+      return ruby;
+    }
+
+    switch (tag) {
+      case '<b>':
+        return document.createElement('strong');
+      case '<i>':
+        return document.createElement('em');
+      default:
+        return null;
+    }
+  }
+
+  private parseText(text: string): (string | HTMLElement)[] {
+    const fragments: (string | HTMLElement)[] = [];
+    let currentElement: HTMLElement | null = null;
+    let currentText = '';
+
+    const pushCurrentText = () => {
+      if (currentText) {
+        if (currentElement) {
+          if (currentElement.tagName.toLowerCase() === 'ruby') {
+            currentElement.insertBefore(document.createTextNode(currentText), currentElement.firstChild);
+          } else {
+            currentElement.appendChild(document.createTextNode(currentText));
+          }
+        } else {
+          fragments.push(currentText);
+        }
+        currentText = '';
+      }
+    };
+
+    for (let i = 0; i < text.length; i++) {
+      if (text[i] === '<') {
+        const tagEnd = text.indexOf('>', i);
+        if (tagEnd === -1) {
+          currentText += text[i];
+          continue;
+        }
+
+        const tag = text.slice(i, tagEnd + 1);
+        if (tag.startsWith('</')) {
+          // 閉じタグの処理
+          pushCurrentText();
+          if (currentElement && currentElement.parentElement) {
+            currentElement = currentElement.parentElement;
+          } else {
+            currentElement = null;
+          }
+        } else {
+          // 開始タグの処理
+          pushCurrentText();
+          const newElement = this.createElementFromTag(tag);
+          if (newElement) {
+            if (currentElement) {
+              currentElement.appendChild(newElement);
+            } else {
+              fragments.push(newElement);
+            }
+            currentElement = newElement;
+          } else {
+            currentText += tag;
+          }
+        }
+        i = tagEnd;
+      } else {
+        currentText += text[i];
+      }
+    }
+
+    pushCurrentText();
+    return fragments;
+  }
+
+  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
+        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'
+    }
+  }
+}