{% extends "timeline-page.html" %}

{% block title %}{{ title }}{% endblock %}
{% block head %}
    {{ super() }}
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="shortcut icon" href="{{ resources }}/scripts/TemplateData/favicon.ico">
    <link rel="stylesheet" href="{{ resources }}/scripts/TemplateData/style.css">
    <script>
      psynet.page.attributes = {{ attributes(participant) | tojson }};
      psynet.page.contents = {{ contents | tojson }};
    </script>
{% endblock %}

{% block stylesheets %}
    {{ super() }}
    <link rel="stylesheet" type="text/css" href="{{ resources }}/css/custom.css">
{% endblock %}

{% block main_body %}
    <div id="unity-container" class="unity-desktop">
      <canvas id="unity-canvas"></canvas>
      <div id="unity-loading-bar">
        <div id="unity-logo"></div>
        <div id="unity-progress-bar-empty">
          <div id="unity-progress-bar-full"></div>
        </div>
      </div>
      <div id="unity-footer">
        <div id="unity-webgl-logo"></div>
        <div id="unity-fullscreen-button"></div>
        <div id="unity-build-title">{{ title }}</div>
      </div>
    </div>
    <script>
      let randomKey = Math.random().toString(36).substring(7);  // random key to prevent caching
      let buildUrl = "{{ resources }}/scripts/Build";
      let loaderUrl = buildUrl + "/WebGL.loader.js?random=" + randomKey;
      let config = {
        dataUrl: buildUrl + "/WebGL.data?random=" + randomKey,
        frameworkUrl: buildUrl + "/WebGL.framework.js?random=" + randomKey,
        codeUrl: buildUrl + "/WebGL.wasm?random=" + randomKey,
      };

      let container = document.querySelector("#unity-container");
      let canvas = document.querySelector("#unity-canvas");
      let loadingBar = document.querySelector("#unity-loading-bar");
      let progressBarFull = document.querySelector("#unity-progress-bar-full");
      let fullscreenButton = document.querySelector("#unity-fullscreen-button");

      if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
        container.className = "unity-mobile";
        config.devicePixelRatio = 1;
      } else {
        canvas.style.width = "{{ game_container_width }}";
        canvas.style.height = "{{ game_container_height }}";
      }
      loadingBar.style.display = "block";

      let script = document.createElement("script");
      let unityInstance;
      script.src = loaderUrl;
      script.onload = () => {
        createUnityInstance(canvas, config, (progress) => {
          progressBarFull.style.width = 100 * progress + "%";
        }).then((ui) => {
          unityInstance = ui;
          loadingBar.style.display = "none";
          fullscreenButton.onclick = () => {
            unityInstance.SetFullscreen(1);
          };
        }).catch((message) => {
          alert(message);
        });
      };
      document.body.appendChild(script);
    </script>
{% endblock %}

{% block libs %}
    {{ super() }}
{% endblock %}
