<!DOCTYPE html>
<html>
  <head>
    <title>Supersaber</title>
    <script src="vendor/aframe.effects.js"></script>
    <script src="build/build.js"></script>
  </head>
  <body>
    <a-scene
      bind__beat-loader="challengeId: challenge.id; difficulty: challenge.difficulty"
      bind__song="challengeId: challenge.id; isPlaying: !menu.active && !challenge.isLoading"
      bind__song-preview-system="selectedChallengeId: menuSelectedChallenge.id"
      bind-toggle__overlay="menu.active"
      console-shortcuts
      debug-controller
      effect-bloom="strength: 1"
      proxy-event="event: menuchallengeselect; to: #searchResultsContainer, #menuDifficultiesGroup"
      overlay="objects: #menu, #keyboard, #rightHand, #leftHand"
      search
      stage-colors="blue"
      fog="color: #a00; density: 0.035; type: exponential">
      <a-assets timeout="10000">
        <!-- Stage -->
        <a-image id="backglowTexture" src="assets/img/stage/backglow.png"></a-image>
        <a-image id="floor" src="assets/img/stage/floor.png"></a-image>
        <a-image id="skyTexture" src="assets/img/stage/sky.jpg"></a-image>
        <a-image id="smokeTexture" src="assets/img/stage/smoke.png"></a-image>
        <a-asset-item id="backglow-obj" src="assets/models/backglow.obj"></a-asset-item>
        <a-mixin id="laser" laser geometry="height: 300; depth: 0.16; width: 0.16" materials="neon"></a-mixin>

        <audio id="hoverSound" src="assets/sounds/hover.ogg"></audio>
        <audio id="saberDraw" src="assets/sounds/saberDraw.wav"></audio>

        <img id="cursorMeshImage" src="assets/img/cursor-mesh.png">
        <img id="gridImg" src="assets/img/grid.png">
        <img id="playImg" src="assets/img/play.png">
        <img id="sliceImg" src="assets/img/slice.png">
        <img id="downIconImg" src="assets/img/downIcon.png">

        <a-asset-item src="assets/models/logosparks.json" id="logoSparks"></a-asset-item>

        <a-mixin id="slice" slice9="color: #050505; transparent: true; opacity: 0.7; src: #sliceImg; left: 50; right: 52; top: 50; bottom: 52; padding: 0.18"></a-mixin>
        <a-mixin id="font" text="font: assets/fonts/Teko-Bold.json; shader: msdf; letterSpacing: 1"></a-mixin>
        <a-mixin id="textFont" text="font: assets/fonts/Teko-Bold.json; shader: msdf; letterSpacing: 1"></a-mixin>
      </a-assets>

      <audio id="introSong" src="assets/sounds/introSong.ogg" autoplay loop></audio>

      <a-entity id="container">
        {% include './templates/stage.html' %}
        {% include './templates/gameUi.html' %}
        {% include './templates/menu.html' %}
      </a-entity>

      <!-- Player. -->
      <a-mixin
        id="raycaster"
        raycaster="objects: [raycastable]; far: 3"
        line="opacity: 0.75"></a-mixin>
      <a-entity id="cameraRig">
        <a-entity id="camera" position="0 1.6 0.5" camera look-controls wasd-controls></a-entity>

        {% macro saber (hand, otherHand, color) %}
          <a-entity id="{{ hand }}Hand"
            mixin="raycaster"
            bind__hand-swapper="enabled: {{ otherHand }}RaycasterActive"
            bind__pauser="enabled: !menu.active"
            bind__raycaster="enabled: {{ hand }}RaycasterActive; showLine: {{ hand }}RaycasterActive"
            bind__saber-controls="bladeEnabled: !menu.active"
            cursor
            saber-controls="hand: {{ hand }}"
            haptics="events: mouseenter; dur: 35; force: 0.075"
            line="color: {{ color }}">
            <a-entity class="fakeGlow" rotation="90 0 0" position="0 0.01 0" bind__visible="menu.active">
              <a-entity geometry="primitive: cylinder; height: 0.1831; radius: 0.0055" material="color: {{ color }}; shader: flat; opacity: 0.11"></a-entity>
              <a-entity geometry="primitive: cylinder; height: 0.1832; radius: 0.0065" material="color: {{ color }}; shader: flat; opacity: 0.09"></a-entity>
              <a-entity geometry="primitive: cylinder; height: 0.1833; radius: 0.0075" material="color: {{ color }}; shader: flat; opacity: 0.06"></a-entity>
              <a-entity geometry="primitive: cylinder; height: 0.1834; radius: 0.0085" material="color: {{ color }}; shader: flat; opacity: 0.04"></a-entity>
            </a-entity>
          </a-entity>
        {% endmacro %}

        {{ saber('left', 'right', 'pink') }}
        {{ saber('right', 'left', 'cyan') }}
      </a-entity>

      <a-mixin
        id="cursorMesh"
        geometry="primitive: plane; width: 0.26; height: 0.26"
        material="shader: flat; color: white; transparent: true; src: #cursorMeshImage; side: both; depthTest: false"></a-mixin>
      <a-entity id="leftCursorMesh" mixin="cursorMesh" cursor-mesh="cursorEl: #leftHand"></a-entity>
      <a-entity id="rightCursorMesh" mixin="cursorMesh" cursor-mesh="cursorEl: #rightHand"></a-entity>
      {% if not IS_PRODUCTION %}
        <a-entity id="mouseCursor" mixin="raycaster" cursor="rayOrigin: mouse"
                  bind__raycaster="enabled: !inVR" raycaster="showLine: false"></a-entity>
        <a-entity id="mouseCursorMesh" mixin="cursorMesh" cursor-mesh="cursorEl: #mouseCursor"></a-entity>
      {% endif %}
    </a-scene>
  </body>
</html>
