102 lines
5.0 KiB
HTML
102 lines
5.0 KiB
HTML
|
{% macro searchResults () %}
|
||
|
|
<a-entity id="searchResultList"
|
||
|
|
layout="type: box; columns: 3; marginRow: 0.25; marginColumn: 0.85"
|
||
|
|
bind-for="for: item; in: searchResults; key: id; template: #searchResultTemplate">
|
||
|
|
</a-entity>
|
||
|
|
|
||
|
|
{% raw %}
|
||
|
|
<template id="searchResultTemplate">
|
||
|
|
<a-entity class="searchResult" search-result data-song-id="{{ item.id }}" data-title="{{ item.songName }}">
|
||
|
|
<a-entity>
|
||
|
|
<a-entity class="searchResultSlice"
|
||
|
|
geometry="primitive: plane; width: 0.8; height: 0.2"
|
||
|
|
material="shader:flat; transparent: true; src:#resultImg; color: #BBB"
|
||
|
|
position="0 -0.13 -0.01"
|
||
|
|
play-audio="event: mouseenter; audio: #hoverSound; volume: 0.03"
|
||
|
|
animation__mouseenter="property: material.color; from: #BBB; to: #FFF; startEvents: mouseenter; pauseEvents: mouseleave; dur: 150"
|
||
|
|
animation__mouseleave="property: material.color; from: #FFF; to: #BBB; startEvents: mouseleave; pauseEvents: mouseenter; dur: 150"
|
||
|
|
raycastable></a-entity>
|
||
|
|
<a-entity class="searchResultIcons"
|
||
|
|
geometry="primitive: plane; width: 0.8; height: 0.2"
|
||
|
|
material="shader: flat; transparent: true; src: #resultIconsImg; color: #FFF"
|
||
|
|
position="0 -0.13 -0.005"
|
||
|
|
raycastable></a-entity>
|
||
|
|
</a-entity>
|
||
|
|
<a-entity class="searchResultAuthor" mixin="textFont" text="wrapCount: 48; align: center; color: #54c2fd; value: {{ item.subSongName }}" position="0 -0.060 0"></a-entity>
|
||
|
|
<a-entity class="searchResultTitle" mixin="textFont" text="align: center; color: #FFF; wrapCount: 35; value: {{ item.songName }}" position="0 -0.111 0"></a-entity>
|
||
|
|
<a-entity class="searchResultDownloads" mixin="textFont" text="color: #cc0856; anchor: left; value: {{ item.downloads }}" position="0.192 -0.184 0"></a-entity>
|
||
|
|
</a-entity>
|
||
|
|
</template>
|
||
|
|
{% endraw %}
|
||
|
|
{% endmacro %}
|
||
|
|
|
||
|
|
<a-entity id="menu"
|
||
|
|
bind__visible="menuActive"
|
||
|
|
position="0 1 -1">
|
||
|
|
<a-input id="search"
|
||
|
|
event-set__1="_event: mouseenter; background-color: #333; placeholder-color: #FFF"
|
||
|
|
event-set__2="_event: mouseleave; background-color: #182029; placeholder-color: #F3D765"
|
||
|
|
event-set__3="_event: blur; value:"
|
||
|
|
event-set__4="_event: challengeset; value:"
|
||
|
|
position="-0.42 0.32 -0.1"
|
||
|
|
scale="0.65 0.65 0.65"
|
||
|
|
placeholder=" Search challenges..."
|
||
|
|
play-audio="event: mouseenter; audio: #hoverSound; volume: 0.03"
|
||
|
|
color="#FFF"
|
||
|
|
cursorColor="#f3d765"
|
||
|
|
font="exo2semibold"
|
||
|
|
letter-spacing="-1"
|
||
|
|
placeholder-color="#f3d765"
|
||
|
|
background-color="#182029"
|
||
|
|
bind-toggle__raycastable="menuActive && !isSearchScreen"
|
||
|
|
proxy-event="event: click; to: a-scene; as: searchfocus; captureBubbles: true"
|
||
|
|
search
|
||
|
|
width="1.3"></a-input>
|
||
|
|
<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"
|
||
|
|
raycaster="far:2"
|
||
|
|
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="keyboardContaner"
|
||
|
|
position="0 0 1"
|
||
|
|
scale="0.4 0.4 0.4"
|
||
|
|
bind__visible="isSearchScreen">
|
||
|
|
<a-keyboard id="kb"
|
||
|
|
bind__keyboard="isOpen: isSearchScreen"
|
||
|
|
bind__isPlaying="isSearchScreen"
|
||
|
|
event__set="_event: diddismiss; visible: false"
|
||
|
|
proxy-event="event: diddismiss; to: a-scene; as: searchblur"
|
||
|
|
keyboard-raycastable></a-keyboard>
|
||
|
|
</a-entity>
|
||
|
|
|
||
|
|
<a-entity id="searchResultsContainer" position="-0.85 0.7 0">
|
||
|
|
{{ searchResults() }}
|
||
|
|
</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>
|