<!DOCTYPE html>
<html>
  <head>
    <title>Super Saber</title>
    <link rel="shortcut icon" href="assets/img/favicon.png" type="image/x-icon">
    {% if IS_PRODUCTION %}
      <script src="vendor/aframe-master.min.js"></script>
    {% else %}
      <script src="vendor/aframe-master.js"></script>
    {% endif %}
    <script src="build/build.js"></script>
  </head>
  <body>
    <audio id="introSong" src="assets/sounds/introSong.ogg" loop></audio>

    <a-scene
      mixin="gameoverAnimation fogAnimation"
      bind__beat-loader="challengeId: challenge.id; difficulty: challenge.difficulty; isPlaying: isPlaying"
      bind__gameover="isGameOver: isGameOver"
      bind__intro-song="isPlaying: menuActive && !menuSelectedChallenge.id"
      bind__overlay="enabled: !isPlaying"
      bind__song="challengeId: challenge.id; isPlaying: isPlaying; isBeatsPreloaded: challenge.isBeatsPreloaded; isGameOver: isGameOver"
      bind__song-preview-system="challengeId: challenge.id; isSongLoading: isSongLoading; selectedChallengeId: menuSelectedChallenge.id"
      animation__gameover="property: object3D.background; type: color; to: #750000; startEvents: gameover"
      animation__gameoverfog="property: components.fog.el.object3D.fog.color; type: color; to: #330000; startEvents: gameover; dur: 500; easing: easeInQuad"
      console-shortcuts
      debug-controller
      effect-bloom="strength: 1"
      gpu-preloader
      loading-screen="backgroundColor: #000;"
      overlay="objects: #menu, #keyboard, #rightHand, #leftHand, [mixin~='cursorMesh'], #gameMenu, #stepback"
      pool__beat-arrow-blue="mixin: arrowBlueBeat; size: 5; container: #beatContainer"
      pool__beat-arrow-red="mixin: arrowRedBeat; size: 10; container: #beatContainer"
      pool__beat-dot-blue="mixin: dotBlueBeat; size: 10; container: #beatContainer"
      pool__beat-dot-red="mixin: dotRedBeat; size: 10; container: #beatContainer"
      pool__beat-mine="mixin: mine; size: 10; container: #beatContainer"
      pool__wall="mixin: wall; size: 10; container: #beatContainer"
      proxy-event__menuleft="event: menuchallengeunselect; to: .menuAnimation"
      proxy-event__menuright="event: menuchallengeselect; to: .menuAnimation"
      proxy-event__cleargame1="event: gamemenuexit; as: cleargame; to: a-scene"
      proxy-event__cleargame2="event: gamemenurestart; as: cleargame; to: a-scene"
      search
      stage-colors="color: blue"
      fog="color: #a00; density: 0.035; type: exponential"
      vr-mode-ui="enterVRButton: #vrButton">
      <a-assets timeout="10000">
        <a-asset-item id="arrowObj" src="assets/models/arrow.obj"></a-asset-item>
        <a-asset-item id="backglowObj" src="assets/models/backglow.obj"></a-asset-item>
        <a-asset-item id="beatObj" src="assets/models/beat.obj"></a-asset-item>
        <a-asset-item id="dotObj" src="assets/models/dot.obj"></a-asset-item>
        <a-asset-item id="logofrontObj" src="assets/models/logofront.obj"></a-asset-item>
        <a-asset-item id="logobackObj" src="assets/models/logoback.obj"></a-asset-item>
        <a-asset-item id="logofrontUObj" src="assets/models/logofront-u.obj"></a-asset-item>
        <a-asset-item id="laserObj" src="assets/models/laser/laser.obj"></a-asset-item>
        <a-asset-item id="laserNeonObj" src="assets/models/laserneon.obj"></a-asset-item>
        <a-asset-item id="logoSparks" src="assets/models/logosparks.json"></a-asset-item>
        <a-asset-item id="mineObj" src="assets/models/mine.obj"></a-asset-item>
        <a-asset-item id="sabercutParticles" src="assets/models/sabercut.json"></a-asset-item>
        <a-asset-item id="stageNeonObj" src="assets/models/neons.obj"></a-asset-item>
        <a-asset-item id="tunnelObj" src="assets/models/tunnel.obj"></a-asset-item>
        <a-asset-item id="tunnelNeonObj" src="assets/models/tunnelneon.obj"></a-asset-item>

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

        <img id="backglowTexture" src="assets/img/stage/backglow.png">
        <img id="cursorMeshImg" src="assets/models/laser/laser.png">
        <img id="downIconImg" src="assets/img/downIcon.png">
        <img id="envmapTexture" src="assets/img/envMap.png">
        <img id="floorImg" src="assets/img/stage/floor.png">
        <img id="gridImg" src="assets/img/grid.png">
        <img id="playImg" src="assets/img/play.png">
        <img id="skyTexture" src="assets/img/stage/sky.jpg">
        <img id="sliceImg" src="assets/img/slice.png">
        <img id="slicebtnImg" src="assets/img/slicebtn.png">
        <img id="smokeTexture" src="assets/img/stage/smoke.png">
        <img id="beamImg" src="assets/img/beam.png">
        <img id="wrongImg" src="assets/img/wrong.png">
        <img id="missImg" src="assets/img/miss.png">
        <img id="noiseTexture" src="assets/img/noise.png">
        <img id="neonImg" src="assets/img/neon.png">
        <img id="sparkImg" src="assets/img/spark.png">
        <img id="stepbackImg" src="assets/img/stepback.png">

        <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-mixin id="beat" visible="false"></a-mixin>
        <a-mixin id="beatBlock" mixin="gameoverAnimation" animation__gameover="property: components.material.material.opacity; from: 1; to: 0; startEvents: gameover"></a-mixin>
        <a-mixin id="beatSign" mixin="gameoverAnimation" animation__gameover="property: components.material.material.opacity; from: 1; to: 0; startEvents: gameover"></a-mixin>
        <a-mixin id="arrowBlueBeat" mixin="beat" beat="color: blue; type: arrow"></a-mixin>
        <a-mixin id="arrowRedBeat" mixin="beat" beat="color: red; type: arrow"></a-mixin>
        <a-mixin id="dotBlueBeat" mixin="beat" beat="color: blue; type: dot"></a-mixin>
        <a-mixin id="dotRedBeat" mixin="beat" beat="color: red; type: dot"></a-mixin>
        <a-mixin id="gameoverAnimation" animation__gameover="dur: 1000; easing: easeOutQuad"></a-mixin>
        <a-mixin id="mine" mixin="beat" beat="type: mine"></a-mixin>
        <a-mixin id="wall" geometry wall material="shader: wall-shader; tex: #noiseTexture; repeat: 2 2; transparent: true; side: double">

        <a-mixin id="beatWrong"
          geometry="primitive: plane; height: 0.3; width: 0.3"
          material="shader: flat; transparent: true; src: #wrongImg"
          visible="false"
          animation__posz="property: object3D.position.z; to: -8; startEvents: beatwrong; easing: easeOutQuart; dur: 4000"
          animation__alpha="property: components.material.material.opacity; from: 1; to: 0; startEvents: beatwrong; easing: easeOutQuart; dur: 4000"></a-mixin>

        <a-mixin id="beatMiss"
          geometry="primitive: plane; height: 0.25; width: 0.5"
          material="shader: flat; transparent: true; src: #missImg"
          visible="false"
          animation__posz="property: object3D.position.z; to: -8; startEvents: beatmiss; easing: easeOutQuart; dur: 4000"
          animation__alpha="property: components.material.material.opacity; from: 1; to: 0; startEvents: beatmiss; easing: easeOutQuart; dur: 4000"></a-mixin>
      </a-assets>

      <a-entity id="arrowObjTemplate" obj-model="obj: #arrowObj" visible="false"></a-entity>
      <a-entity id="beatObjTemplate" obj-model="obj: #beatObj" visible="false"></a-entity>
      <a-entity id="dotObjTemplate" obj-model="obj: #dotObj" visible="false"></a-entity>
      <a-entity id="mineObjTemplate" obj-model="obj: #mineObj" visible="false"></a-entity>

      <a-entity id="cursorLaser" obj-model="obj: #laserObj" visible="false"></a-entity>

      <a-entity id="container">
        <a-entity
          id="beatContainer"
          beat-hit-sound
          bind__pause="isPaused: !isPlaying"
          sound__beathit="poolSize: 12; src: assets/sounds/beatHit.ogg"></a-entity>
        {% include './templates/stage.html' %}
        {% include './templates/score.html' %}
        {% include './templates/menu.html' %}
        {% include './templates/gameMenu.html' %}
      </a-entity>

      <!-- Wrong + miss beat visual indicators. -->
      <a-entity id="badContainer" bind__visible="isPlaying">
        <a-entity id="wrongLeft" mixin='beatWrong'></a-entity>
        <a-entity id="wrongRight" mixin='beatWrong'></a-entity>
        <a-entity id="missLeft" mixin='beatMiss'></a-entity>
        <a-entity id="missRight" mixin='beatMiss'></a-entity>
      </a-entity>

      <a-entity id="saberParticles" particleplayer="src: #sabercutParticles; pscale: 0.5; loop: false; on: explode; img: #sparkImg; count: 20%; animateScale: true; initialScale: 4 1 1; finalScale: 0.2 0.2 1"> </a-entity>

      <!-- Player. -->
      <a-mixin
        id="raycaster"
        raycaster="objects: [raycastable]; far: 3; showLine: false"
        line="opacity: 0.75"></a-mixin>
      <a-mixin
        id="cursorMesh"
        material="shader: flat; transparent: true; src: #cursorMeshImg; depthTest: false"
        sub-object="from: #cursorLaser; name: glow"></a-mixin>
      <a-entity id="cameraRig">
        <a-entity id="camera" position="0 1.6 0.5" camera look-controls wasd-controls>
          <a-entity
            id="cameraCollider"
            bind__aabb-collider="enabled: isPlaying"
            aabb-collider="objects: [collidable]; interval: 50; collideNonVisible: false"
            geometry="primitive: box; width: 0.25; height: 0.25; depth: 0.25"
            proxy-event__wallhitstart="event: hitstart; to: a-scene; as: wallhitstart"
            proxy-event__wallhitend="event: hitend; to: a-scene; as: wallhitend"
            visible="false"></a-entity>
        </a-entity>

        {% macro saber (hand, otherHand, bladeColor, beamColor) %}
          <a-entity id="{{ hand }}Hand"
            mixin="raycaster"
            bind__hand-swapper="enabled: {{ otherHand }}RaycasterActive"
            bind__menu-controls="page: search.page; selectedChallengeId: menuSelectedChallenge.id"
            bind__pauser="enabled: isPlaying"
            bind__raycaster="enabled: {{ hand }}RaycasterActive"
            bind__saber-controls="bladeEnabled: isPlaying; isPaused: isPaused"
            bind__trail="enabled: isPlaying"
            haptics="events: mouseenter; dur: 35; force: 0.075"
            haptics__beat="eventsFrom: #beatContainer; events: beathit; dur: 80; force: 0.2"
            saber-controls="hand: {{ hand }}"
            thumb-controls
            thumb-controls-debug="enabled: false; hand: {{ hand }}; controllerType: vive-controls"
            trail="color: {{ bladeColor }}; hand: {{ hand }}">
            <a-entity
              id="{{ hand }}Laser"
              class="laser"
              bind__visible="menuActive && activeHand === '{{ hand }}'">
              <a-entity
                class="laserMesh"
                cursor-laser="hand: {{ hand }}"
                sub-object="from: #cursorLaser; name: beam"
                material="color: {{ beamColor }}; shader: flat; transparent: true; opacity: 0.04"></a-entity>
            </a-entity>

            <a-entity class="saberContainer" rotation="90 0 0">
              <a-entity
                class="bladeContainer"
                bind__visible="isPlaying"
                animation="property: scale; from: 0 0 0; to: 1 1 1; dur: 750; easing: linear; startEvents: drawblade"
                scale="0.001 0.001 0.001">
                <a-entity
                  class="blade"
                  geometry="primitive: box; height: 0.9; depth: 0.02; width: 0.02"
                  material="shader: flat; color: {{ bladeColor }}"
                  position="0 -0.55 0"></a-entity>
              </a-entity>
              <a-entity
                class="saberHandle"
                geometry="primitive: box; height: 0.2; depth: 0.025; width: 0.025"
                material="shader: flat; color: #151515">
                <a-entity
                  class="highlightTop"
                  geometry="primitive: box; height: 0.18; depth: 0.005; width: 0.005"
                  material="shader: flat; color: {{ bladeColor }}"
                  position="0 0 0.0125"></a-entity>
                <a-entity
                  class="highlightBottom"
                  geometry="primitive: box; height: 0.18; depth: 0.005; width: 0.005"
                  material="shader: flat; color: {{ bladeColor }}"
                  position="0 0 -0.0125"></a-entity>
              </a-entity>
            </a-entity>

            <a-entity
              class="fakeGlow"
              fake-glow="color: {{ beamColor }}"
              position="0 0.01 0"
              rotation="90 0 0"
              bind__visible="!isPlaying">
            </a-entity>
          </a-entity>

          <a-entity
            id="{{ hand }}CursorMesh"
            mixin="cursorMesh"
            bind__cursor-mesh="active: {{ hand }}RaycasterActive"
            cursor-mesh="active: {{ hand }}RaycasterActive; cursorEl: #{{ hand }}Hand"
            material="color: {{ beamColor }}"
            scale="1.3 1.3 1.3"></a-entity>
        {% endmacro %}

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

      <a-entity id="stepback" geometry="primitive: plane; width: 0.5; height: 0.25;" position="0 1.6 -1.55" material="shader: flat; src: #stepbackImg; transparent: true; opacity: 0;"></a-entity>

      {% if not IS_PRODUCTION %}
        <a-entity id="mouseCursor" mixin="raycaster" cursor="rayOrigin: mouse"
                  bind__raycaster="enabled: !inVR"></a-entity>
        <a-entity id="mouseCursorMesh" mixin="cursorMesh" cursor-mesh="cursorEl: #mouseCursor"
                  bind__cursor-mesh="active: menuActive"></a-entity>
      {% endif %}
    </a-scene>

    <a id="vrButton" href="#" title="Enter VR / Fullscreen"></a>
  </body>
</html>
