<a-asset-item id="arrowredObj" src="assets/models/arrowred.obj"></a-asset-item>
<a-asset-item id="arrowblueObj" src="assets/models/arrowblue.obj"></a-asset-item>
<a-asset-item id="dotredObj" src="assets/models/dotred.obj"></a-asset-item>
<a-asset-item id="dotblueObj" src="assets/models/dotblue.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="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="logoSparksJSON" src="assets/models/logosparks.json"></a-asset-item>
<a-asset-item id="sparksJSON" src="assets/models/sparks.json"></a-asset-item>
<a-asset-item id="mineObj" src="assets/models/mine.obj"></a-asset-item>
<a-asset-item id="mineBrokenObj" src="assets/models/minebroken.obj"></a-asset-item>
<a-asset-item id="mineParticlesJSON" src="assets/models/mineparticles.json"></a-asset-item>
<a-asset-item id="saberParticlesJSON" 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>
-->
<a-asset-item id="stageNormalObj" src="assets/models/stagenormal.obj"></a-asset-item>
<a-asset-item id="stageAdditiveObj" src="assets/models/stageadditive.obj"></a-asset-item>
<a-asset-item id="stepbackObj" src="assets/models/stepback.obj"></a-asset-item>
<a-asset-item id="missObj" src="assets/models/miss.obj"></a-asset-item>
<a-asset-item id="wrongObj" src="assets/models/wrong.obj"></a-asset-item>
<a-asset-item id="smokeObj" src="assets/models/smoke.obj"></a-asset-item>
<a-asset-item id="audiocolumnObj" src="assets/models/audiocolumn.obj"></a-asset-item>
<a-asset-item id="leftLaserObj" src="assets/models/leftlaser.obj"></a-asset-item>
<a-asset-item id="rightLaserObj" src="assets/models/rightlaser.obj"></a-asset-item>
<a-asset-item id="logoObj" src="assets/models/logo.obj"></a-asset-item>
<a-asset-item id="logofrontUObj" src="assets/models/logofront-u.obj"></a-asset-item>
<a-asset-item id="logoGlowObj" src="assets/models/logoglow.obj"></a-asset-item>
<a-asset-item id="logoGodraysObj" src="assets/models/logogodrays.obj"></a-asset-item>
<a-asset-item id="saberGlowObj" src="assets/models/saberglow.obj"></a-asset-item>
<a-asset-item id="redbeamObj" src="assets/models/redbeam.obj"></a-asset-item>
<a-asset-item id="bluebeamObj" src="assets/models/bluebeam.obj"></a-asset-item>


<!--<a-asset-item id="wallglowObj" src="assets/models/wallglow.obj"></a-asset-item>-->

<a-asset-item id="tutorial1Obj" src="assets/models/tutorial1.obj"></a-asset-item>
<a-asset-item id="tutorial2Obj" src="assets/models/tutorial2.obj"></a-asset-item>
<a-asset-item id="tutorial3Obj" src="assets/models/tutorial3.obj"></a-asset-item>

<audio id="beatMissSound" src="assets/sounds/miss.ogg"></audio>
<audio id="confirmSound" src="assets/sounds/beatHit.ogg"></audio>
<audio id="hoverSound" src="assets/sounds/hover.ogg"></audio>
<audio id="victorySound" src="assets/sounds/victory.ogg"></audio>
<audio id="victorySong" src="assets/sounds/victorySong.ogg"></audio>
<audio id="crescendo" src="assets/sounds/crescendo.ogg"></audio>

{% for i in range(1, 11) %}
<audio id="hitSound{{ i }}" src="assets/sounds/hit{{ i }}.ogg"></audio>
<audio id="hitSound{{ i }}left" src="assets/sounds/hit{{ i }}left.ogg"></audio>
<audio id="hitSound{{ i }}right" src="assets/sounds/hit{{ i }}right.ogg"></audio>
{% endfor %}

<img id="skyTexture" src="assets/img/sky.jpg">
<img id="backglowTexture" src="assets/img/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.jpg">
<img id="envmapWallTexture" src="assets/img/envmapwall.jpg">
<img id="neonImg" src="assets/img/neon.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="slicebtnImg" src="assets/img/slicebtn.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="sparkImg" src="assets/img/spark.png">
<img id="spark2Img" src="assets/img/spark2.png">
<img id="genresImg" src="assets/img/genres.png">
<img id="tutorialImg" src="assets/img/tutorial.png">
<img id="floorEnvImg" src="assets/img/floorenv.jpg">
<img id="floorNormalsImg" src="assets/img/floornormals.png">
<img id="atlasImg" src="assets/img/atlas.png">
<img id="logotexImg" src="assets/img/logotex.png">

<a-mixin id="slice" slice9="color: #050505; transparent: true; opacity: 0.9; 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="superKeyboardTextInput" mixin="font"></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="beatScore"
  mixin="font"
  text="opacity: 0; wrapCount: 19; color: #FFF; width: 1.5"
  animation__opacityin="property: components.text.material.uniforms.opacity.value; from: .5; to: 1; dur: 500; startEvents: beatscorestart"
  animation__opacityout="property: components.text.material.uniforms.opacity.value; from: 1; to: 0; dur: 500; delay: 700; startEvents: beatscorestart"
  animation__motionz="property: object3D.position.z; from: -2; to: -6; dur: 500; easing: easeOutQuart; startEvents: beatscorestart"
  animation__motiony="property: object3D.position.y; to: 0.1; dur: 500; easing: easeOutQuart; startEvents: beatscorestart"
></a-mixin>

<a-mixin
  id="beatScoreOk"
  score-beat="type: ok"
  mixin="beatScore"
  text="value: OK"></a-mixin>
<a-mixin
  id="beatScoreGood"
  score-beat="type: good"
  mixin="beatScore"
  text="value: GOOD; color: #A8E3FF"></a-mixin>
<a-mixin
  id="beatScoreGreat"
  score-beat="type: great"
  mixin="beatScore"
  text="value: GREAT; wrapCount: 16; color: #60CCFF"></a-mixin>
<a-mixin
  id="beatScoreSuper"
  score-beat="type: super"
  mixin="beatScore"
  text="value: SUPER!; wrapCount: 13; color: #00acfc"></a-mixin>

<a-mixin
  id="superCut"
  supercutfx
  geometry="primitive: plane; width: 3; height: 3"
  material="shader: superCutFxShader; transparent: true; depthWrite: false"></a-mixin>

<a-mixin
  id="wall"
  geometry
  material="shader: wallShader; transparent: true; side: double;"
  wall></a-mixin>

<a-mixin
  id="beatWrong"
  obj-model="obj: #wrongObj"
  material="shader: flat; transparent: true; src: #atlasImg"
  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"
  obj-model="obj: #missObj"
  material="shader: flat; transparent: true; src: #atlasImg"
  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-mixin
  id="bigMenuButton"
  mixin="slice"
  slice9="src: #slicebtnImg; color: #CCC; width: 1; right:  52;  bottom:  47; left: 77; top: 73; height: 0.22; padding: 0.1"
  animation__mouseenter1="property: components.slice9.material.color; type: color; from: #CCC; to: #FFF; startEvents: mouseenter; pauseEvents: mouseleave; dur: 150"
  animation__mouseleave1="property: components.slice9.material.color; type: color; from: #FFF; to: #CCC; startEvents: mouseleave; pauseEvents: mouseenter; dur: 150"
  animation__mouseenter2="property: scale; from: 1 1 1; to: 1.04 1.04 1.04; startEvents: mouseenter; pauseEvents: mouseleave; dur: 80"
  animation__mouseleave2="property: scale; to: 1 1 1; from: 1.04 1.04 1.04; startEvents: mouseleave; pauseEvents: mouseenter; dur: 80"></a-mixin>


<!-- stage, neons, etc animations launched from beat-loader events -->

<a-mixin id="bgColorAnimation"
  animation__bgcoloroff="isRawProperty: true; property: systems.materials.stageNormal.uniforms.backglowColor.value; type: color; to: {{ COLORS.BG_OFF }}; dur: 500; easing: linear; startEvents: bgcoloroff"
  animation__bgcolorblue="isRawProperty: true; property: systems.materials.stageNormal.uniforms.backglowColor.value; type: color; to: {{ COLORS.BG_BLUE }}; dur: 5; easing: linear; startEvents: bgcolorblue"
  animation__bgcolorbluefade="isRawProperty: true; property: systems.materials.stageNormal.uniforms.backglowColor.value; type: color; from: {{ COLORS.BG_BRIGHTBLUE }}; to: {{ COLORS.BG_BLUE }}; dur: 500; easing: linear; startEvents: bgcolorbluefade"
  animation__bgcolorred="isRawProperty: true; property: systems.materials.stageNormal.uniforms.backglowColor.value; type: color; to: {{ COLORS.BG_RED }}; dur: 5; easing: linear; startEvents: bgcolorred"
  animation__bgcolorredfade="isRawProperty: true; property: systems.materials.stageNormal.uniforms.backglowColor.value; type: color; from: {{ COLORS.BG_BRIGHTRED }}; to: {{ COLORS.BG_RED }}; dur: 500; easing: linear; startEvents: bgcolorredfade"


  animation__skycoloroff="isRawProperty: true; property: systems.materials.stageNormal.uniforms.skyColor.value; type: color; to: {{ COLORS.SKY_OFF }}; dur: 500; easing: linear; startEvents: bgcoloroff"
  animation__skycolorblue="isRawProperty: true; property: systems.materials.stageNormal.uniforms.skyColor.value; type: color; to: {{ COLORS.SKY_BLUE }}; dur: 5; easing: linear; startEvents: bgcolorblue"
  animation__skycolorred="isRawProperty: true; property: systems.materials.stageNormal.uniforms.skyColor.value; type: color; to: {{ COLORS.SKY_RED }}; dur: 5; easing: linear; startEvents: bgcolorred"

  animation__bgcolorgameover="isRawProperty: true; property: systems.materials.stageNormal.uniforms.backglowColor.value; type: color; to: {{ COLORS.BG_OFF }}; dur: 500; easing: linear; startEvents: bgcolorgameover"
  animation__skycolorgameover="isRawProperty: true; property: systems.materials.stageNormal.uniforms.skyColor.value; type: color; to: {{ COLORS.SKY_BLUE }}; dur: 5; easing: linear; startEvents: bgcolorgameover"
  ></a-mixin>

<a-mixin id="tunnelColorAnimation"
  animation__tunnelcoloroff="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.tunnelNeon.value; type: color; to: {{ COLORS.NEON_OFF }}; dur: 500; easing: linear; startEvents: tunnelcoloroff"
  animation__tunnelcolorblue="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.tunnelNeon.value; type: color; to: {{ COLORS.NEON_BLUE }}; dur: 5; easing: linear; startEvents: tunnelcolorblue"
  animation__tunnelcolorbluefade="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.tunnelNeon.value; type: color; from: {{ COLORS.NEON_BRIGHTBLUE }}; to: {{ COLORS.NEON_BLUE }}; dur: 500; easing: linear; startEvents: tunnelcolorbluefade"
  animation__tunnelcolorred="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.tunnelNeon.value; type: color; to: {{ COLORS.NEON_RED }}; dur: 5; easing: linear; startEvents: tunnelcolorred"
  animation__tunnelcolorredfade="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.tunnelNeon.value; type: color; from: {{ COLORS.NEON_BRIGHTRED }}; to: {{ COLORS.NEON_RED }}; dur: 500; easing: linear; startEvents: tunnelcolorredfade"
  ></a-mixin>

<a-mixin id="floorColorAnimation"
  animation__floorcoloroff="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.floorNeon.value; type: color; to: {{ COLORS.NEON_OFF }}; dur: 500; easing: linear; startEvents: floorcoloroff"
  animation__floorcolorblue="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.floorNeon.value; type: color; to: {{ COLORS.NEON_BLUE }}; dur: 5; easing: linear; startEvents: floorcolorblue"
  animation__floorcolorbluefade="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.floorNeon.value; type: color; from: {{ COLORS.NEON_BRIGHTBLUE }}; to: {{ COLORS.NEON_BLUE }}; dur: 500; easing: linear; startEvents: floorcolorbluefade"
  animation__floorcolorred="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.floorNeon.value; type: color; to: {{ COLORS.NEON_RED }}; dur: 5; easing: linear; startEvents: floorcolorred"
  animation__floorcolorredfade="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.floorNeon.value; type: color; from: {{ COLORS.NEON_BRIGHTRED }}; to: {{ COLORS.NEON_RED }}; dur: 500; easing: linear; startEvents: floorcolorredfade"
  ></a-mixin>

<a-mixin id="leftLaserColorAnimation"
  animation__leftlasercoloroff="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.leftLaser.value; type: color; to: {{ COLORS.NEON_OFF }}; dur: 500; easing: linear; startEvents: leftlasercoloroff"
  animation__leftlasercolorblue="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.leftLaser.value; type: color; to: {{ COLORS.NEON_BLUE }}; dur: 5; easing: linear; startEvents: leftlasercolorblue"
  animation__leftlasercolorbluefade="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.leftLaser.value; type: color; from: {{ COLORS.NEON_BRIGHTBLUE }}; to: {{ COLORS.NEON_BLUE }}; dur: 500; easing: linear; startEvents: leftlasercolorbluefade"
  animation__leftlasercolorred="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.leftLaser.value; type: color; to: {{ COLORS.NEON_RED }}; dur: 5; easing: linear; startEvents: leftlasercolorred"
  animation__leftlasercolorredfade="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.leftLaser.value; type: color; from: {{ COLORS.NEON_BRIGHTRED }}; to: {{ COLORS.NEON_RED }}; dur: 500; easing: linear; startEvents: leftlasercolorredfade"
  ></a-mixin>

<a-mixin id="rightLaserColorAnimation"
  animation__rightlasercoloroff="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.rightLaser.value; type: color; to: {{ COLORS.NEON_OFF }}; dur: 500; easing: linear; startEvents: rightlasercoloroff"
  animation__rightlasercolorblue="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.rightLaser.value; type: color; to: {{ COLORS.NEON_BLUE }}; dur: 5; easing: linear; startEvents: rightlasercolorblue"
  animation__rightlasercolorbluefade="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.rightLaser.value; type: color; from: {{ COLORS.NEON_BRIGHTBLUE }}; to: {{ COLORS.NEON_BLUE }}; dur: 500; easing: linear; startEvents: rightlasercolorbluefade"
  animation__rightlasercolorred="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.rightLaser.value; type: color; to: {{ COLORS.NEON_RED }}; dur: 5; easing: linear; startEvents: rightlasercolorred"
  animation__rightlasercolorredfade="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.rightLaser.value; type: color; from: {{ COLORS.NEON_BRIGHTRED }}; to: {{ COLORS.NEON_RED }}; dur: 500; easing: linear; startEvents: rightlasercolorredfade"
  ></a-mixin>


<a-mixin id="textGlowColorAnimation"
  animation__textglowoff="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.textGlow.value; type: color; to: {{ COLORS.TEXT_OFF }}; dur: 5; easing: easeInOutCubic; startEvents: textglowoff"
  animation__textglownormal="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.textGlow.value; type: color; to: {{ COLORS.TEXT_NORMAL }}; dur: 750; easing: easeInOutCubic; delay: 100; startEvents: textglownormal"
  animation__textglowbold="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.textGlow.value; type: color; from: {{ COLORS.TEXT_BOLD }}; to: {{ COLORS.TEXT_NORMAL }}; dur: 500; easing: easeInOutCubic; startEvents: textglowbold"
  ></a-mixin>
