WebController - Utility メソッド

このセクションには、サンプルに役立つすべての関数が含まれていますが、Genvid API の関数は含まれていません。

popularityToText

popularityToText(popularity)

popularityToText メソッドは popularity 値をテキスト値に変換します。

  // Converts popularity value to popularity text
  popularityToText(popularity) {
    const hearts = ["💔", "♡", "♥", "💕"];
    const levels = [0.1, 1.0, 5.0];
    for (let i = 0; i < hearts.length; ++i) {
      if (popularity < levels[i]) {
        return hearts[i];
      }
    }
    return hearts[levels.length];
  }

centerAt

centerAt(htmlElement, pos_2d, offsetPixels)

centerAt メソッドは、送信された 2D 位置で中心におかれた HTML 要素の位置を変更します。このメソッドは、各オブジェクト上に表示された名前 div 要素を移動させるために使用します。

  // Changes the HTML element position to be at the center of the pos 2d sent
  centerAt(htmlElement, pos2d, offsetPixels) {
    // Converts from [-1, 1] range to [0, 1].
    let vh = genvidMath.vec2(0.5, 0.5);
    let pos2dN = genvidMath.mad2D(pos2d, vh, vh);

    // Converts from [0, 1] range to [0, w].
    let p = htmlElement.parentElement;
    let pSize = genvidMath.vec2(p.clientWidth, p.clientHeight);
    let posInParent = genvidMath.mul2D(pos2dN, pSize);

    // Adjusts for centering element.
    let eSize = genvidMath.vec2(
      htmlElement.clientWidth,
      htmlElement.clientHeight
    );
    let eOffset = genvidMath.muls2D(eSize, -0.5);
    let posCentered = genvidMath.add2D(posInParent, eOffset);

    // Applies user offset.
    const posFinal = genvidMath.sub2D(posCentered, offsetPixels);
    Object.assign(htmlElement.style, {
      left: posFinal.x + "px",
      bottom: posFinal.y + "px",
      position: "absolute",
      zIndex: "1100",
    });
  }

preN

preN(str, n, c)

preN メソッドは、文字列に空白を追加します。このメソッドは、Genvid オーバーレイ上のデータを適切に表示するために使用します。

  // Widens a string to at least n characters, prefixing with spaces.
  preN(str, n, c) {
    let s = str.length;
    if (s < n) {
      str = c.repeat(n - s) + str;
    }
    return str;
  }

msToDuration

msToDuration(duration)

msToDuration メソッドは、ミリ秒を日、時間、分、秒に変換します。

  // Method used to convert ms to specific duration
  msToDuration(duration) {
    const msInADay = 1000 * 60 * 60 * 24;
    const date = new Date(duration);
    const days = (duration - (duration % msInADay)) / msInADay;
    return `${days ? `${days}:` : ""}${date.toLocaleTimeString(undefined, {
      hour12: false,
      timeZone: "GMT",
    })}:${this.preN(date.getMilliseconds().toFixed(0), 3, "0")}`;
  }

checkFullScreen

checkFullScreen()

checkFullScreen メソッドは、現在の全画面ステータスを戻します。

  checkFullScreen() {
    return (
      document.fullscreenElement ||
      document.webkitFullscreenElement ||
      document.mozFullScreenElement ||
      document.msFullscreenElement
    );
  }