164 lines
8.3 KiB
HTML
164 lines
8.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Supersaber</title>
|
|
<script src="vendor/aframe.effects.js"></script>
|
|
<script src="build/build.js"></script>
|
|
</head>
|
|
<body>
|
|
<audio id="introSong" src="assets/sounds/introSong.ogg" loop></audio>
|
|
|
|
<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__overlay="enabled: menu.active"
|
|
console-shortcuts
|
|
debug-controller
|
|
effect-bloom="strength: 1"
|
|
intro-song
|
|
overlay="objects: #menu, #keyboard, #rightHand, #leftHand, [mixin~='cursorMesh']"
|
|
pool__beat-arrow-blue="mixin: beat arrow-blue-beat; size: 5; container: #beatContainer"
|
|
pool__beat-arrow-red="mixin: beat arrow-red-beat; size: 10; container: #beatContainer"
|
|
pool__beat-dot-blue="mixin: beat dot-blue-beat; size: 10; container: #beatContainer"
|
|
pool__beat-dot-red="mixin: beat dot-red-beat; size: 10; container: #beatContainer"
|
|
proxy-event="event: menuchallengeselect; to: #searchResultsContainer, #menuDifficultiesGroup"
|
|
search
|
|
stage-colors="blue"
|
|
fog="color: #a00; density: 0.035; type: exponential" debug>
|
|
<a-assets timeout="10000">
|
|
<a-asset-item id="arrow-obj" src="assets/models/arrow.obj"></a-asset-item>
|
|
<a-asset-item id="backglow-obj" src="assets/models/backglow.obj"></a-asset-item>
|
|
<a-asset-item id="beat-obj" src="assets/models/beat.obj"></a-asset-item>
|
|
<a-asset-item id="dot-obj" src="assets/models/dot.obj"></a-asset-item>
|
|
<a-asset-item id="logofront-obj" src="assets/models/logofront.obj"></a-asset-item>
|
|
<a-asset-item id="logoback-obj" src="assets/models/logoback.obj"></a-asset-item>
|
|
<a-asset-item id="logofront-u-obj" src="assets/models/logofront-u.obj"></a-asset-item>
|
|
<a-asset-item id="logoSparks" src="assets/models/logosparks.json"></a-asset-item>
|
|
<a-asset-item id="laserObj" src="assets/models/laser/laser.obj"></a-asset-item>
|
|
|
|
<audio id="hoverSound" src="assets/sounds/hover.ogg"></audio>
|
|
<audio id="saberDraw" src="assets/sounds/saberDraw.wav"></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>
|
|
<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="smokeTexture" src="assets/img/stage/smoke.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="stageLaser" geometry="height: 300; depth: 0.16; width: 0.16" materials="neon"></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" beat></a-mixin>
|
|
<a-mixin id="arrow-blue-beat" beat="color: blue; type: arrow"></a-mixin>
|
|
<a-mixin id="arrow-red-beat" beat="color: red; type: arrow"></a-mixin>
|
|
<a-mixin id="dot-blue-beat" beat="color: blue; type: dot"></a-mixin>
|
|
</a-assets>
|
|
|
|
<a-entity id="beatContainer"></a-entity>
|
|
|
|
<a-entity id="cursorLaser" obj-model="obj: #laserObj" visible="false"></a-entity>
|
|
|
|
<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-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>
|
|
|
|
{% macro saber (hand, otherHand, bladeColor, beamColor) %}
|
|
<a-entity id="{{ hand }}Hand"
|
|
mixin="raycaster"
|
|
bind__hand-swapper="enabled: {{ otherHand }}RaycasterActive"
|
|
bind__pauser="enabled: !menu.active"
|
|
bind__raycaster="enabled: {{ hand }}RaycasterActive"
|
|
bind__saber-controls="bladeEnabled: !menu.active"
|
|
bind__trail="enabled: !menu.active"
|
|
haptics="events: mouseenter; dur: 35; force: 0.075"
|
|
saber-controls="hand: {{ hand }}"
|
|
trail="color: {{ bladeColor }}">
|
|
|
|
<a-entity
|
|
id="{{ hand }}Laser"
|
|
bind__visible="activeHand === '{{ hand }}'"
|
|
cursor-laser="hand: {{ hand }}"
|
|
sub-object="from: #cursorLaser; name: beam"
|
|
material="color: {{ beamColor }}; shader: flat; transparent: true; opacity: 0.04"></a-entity>
|
|
|
|
<a-entity class="saberContainer" rotation="90 0 0">
|
|
<a-entity
|
|
class="bladeContainer"
|
|
bind__visible="!menu.active"
|
|
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 }}"
|
|
play-sound="event: drawblade; sound: #saberDraw"
|
|
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" 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: {{ beamColor }}; shader: flat; opacity: 0.11"></a-entity>
|
|
<a-entity geometry="primitive: cylinder; height: 0.1832; radius: 0.0065" material="color: {{ beamColor }}; shader: flat; opacity: 0.09"></a-entity>
|
|
<a-entity geometry="primitive: cylinder; height: 0.1833; radius: 0.0075" material="color: {{ beamColor }}; shader: flat; opacity: 0.06"></a-entity>
|
|
<a-entity geometry="primitive: cylinder; height: 0.1834; radius: 0.0085" material="color: {{ beamColor }}; shader: flat; opacity: 0.04"></a-entity>
|
|
</a-entity>
|
|
</a-entity>
|
|
|
|
<a-entity
|
|
id="{{ hand }}CursorMesh"
|
|
mixin="cursorMesh"
|
|
cursor-mesh="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>
|
|
|
|
{% 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>
|