Files
junisaber/src/templates/menu.html
2018-07-20 20:47:42 +02:00

91 lines
5.0 KiB
HTML

{% macro searchResults () %}
<a-entity id="searchResultList"
bind-for="for: item; in: searchResults; key: id; template: #searchResultTemplate"
layout="type: box; columns: 1; marginRow: 0.1"
search-result-list>
</a-entity>
{% raw %}
<template id="searchResultTemplate">
<a-entity class="searchResult" data-id="{{ item.id }}">
<a-entity class="searchResultSlice"
geometry="primitive: plane; width: 0.8; height: 0.1"
material="shader: flat; transparent: true; color: #111; opacity: 0.45"
position="0 -0.13 -0.01"
play-audio="event: mouseenter; audio: #hoverSound; volume: 0.03"
animation__mouseenter="property: material.color; from: #111; to: #444; startEvents: mouseenter; pauseEvents: mouseleave; dur: 150"
animation__mouseleave="property: material.color; from: #444; to: #111; startEvents: mouseleave; pauseEvents: mouseenter; dur: 150"
raycastable></a-entity>
<a-entity class="searchResultContent" position="0.125 -0.05 0">
<a-entity class="searchResultImage" geometry="primitive: plane; width: 0.1; height: 0.1" material="shader: flat; src: url(https://s3-us-west-2.amazonaws.com/supersaber/{{ item.id }}-image.jpg)" position="-0.58 -0.08 0.001"></a-entity>
<a-entity class="searchResultAuthor" mixin="textFont" text="wrapCount: 55; align: left; color: #54c2fd; value: {{ item.songSubName }}" position="0 -0.055 0"></a-entity>
<a-entity class="searchResultTitle" mixin="textFont" text="align: left; color: #FFF; wrapCount: 45; value: {{ item.songName }}" position="0 -0.09 0"></a-entity>
<a-entity class="searchResultDownloads" mixin="textFont" text="color: #cc0856; anchor: left; value: {{ item.downloads }}" position="0.12 -0.09 0"></a-entity>
</a-entity>
</a-entity>
</template>
{% endraw %}
{% endmacro %}
<a-entity id="menu" bind__visible="menu.active" position="0 1 -1">
<a-entity id="keyboard" super-keyboard="hand: {{ DEBUG_KEYBOARD and '#mouseCursor' or '#rightHand' }}; imagePath: assets/img/keyboard/; injectToRaycasterObjects: false" position="0 0.2 0.02" keyboard-raycastable search></a-entity>
<a-plane id="play"
play-button
play-audio="event: mouseenter; audio: #hoverSound; volume: 0.03"
position="0 0.15 0"
material="shader: flat; src: #playImg; transparent: true; color: #BBB"
width="0.512"
height="0.256"
animation__mouseenter1="property: material.color; from: #BBB; to: #FFF; startEvents: mouseenter; pauseEvents: mouseleave; dur: 150"
animation__mouseleave1="property: material.color; from: #FFF; to: #BBB; startEvents: mouseleave; pauseEvents: mouseenter; dur: 150"
animation__mouseenter2="property: scale; from: 1 1 1; to: 1.1 1.1 1.1; startEvents: mouseenter; pauseEvents: mouseleave; dur: 150"
animation__mouseleave2="property: scale; to: 1 1 1; from: 1.1 1.1 1.1; startEvents: mouseleave; pauseEvents: mouseenter; dur: 150"
bind-toggle__raycastable="playButtonShowing"
bind__visible="playButtonShowing"></a-plane>
<a-entity id="searchResultsContainer" position="0 0.7 0">
{{ searchResults() }}
</a-entity>
<a-entity id="menuDifficulties"
bind-for="for: difficulty; in: menuDifficulties"
bind__visible="!!menuSelectedChallenge.id"
menu-difficulty-select
layout="type: box; columns: 1; marginRow: -0.125"
position="1 1 0">
{% raw %}
<template>
<a-entity class="difficultyOption" data-difficulty="{{ difficulty }}">
<a-entity class="difficultySlice"
geometry="primitive: plane; width: 0.3; height: 0.1"
material="shader: flat; transparent: true; color: #111; opacity: 0.45"
position="-0.4 -0.005 0"
play-audio="event: mouseenter; audio: #hoverSound; volume: 0.03"
animation__mouseenter="property: material.color; from: #111; to: #444; startEvents: mouseenter; pauseEvents: mouseleave; dur: 150"
animation__mouseleave="property: material.color; from: #444; to: #111; startEvents: mouseleave; pauseEvents: mouseenter; dur: 150"
bind-toggle__raycastable="menu.active && !!menuSelectedChallenge.id"></a-entity>
<a-entity mixin="textFont" text="value: {{ difficulty }}" position="0 0 0.001"></a-entity>
</a-entity>
</template>
{% endraw %}
</a-entity>
</a-entity>
<a-entity id="songInfo"
bind__visible="isChallengeScreen"
position="0 -0.25 0">
<a-entity id="loadingText"
bind__text="value: loadingText"
mixin="textFont"
text="align: center; width: 1.25"
position="0 1 -1"
rotation="-25 0 0"
bind__visible="challenge.isLoading"></a-entity>
<a-entity id="title"
mixin="textFont"
text="align: center; width: 2.50; wrapCount: 80"
position="0 0.9 -1"
rotation="-25 0 0"></a-entity>
</a-entity>