201 lines
12 KiB
HTML
201 lines
12 KiB
HTML
<!-- Macro is a templating function. It is rendered into the HTML below with searchResults(). -->
|
|
{% macro searchResults () %}
|
|
<a-entity id="searchResultList"
|
|
bind-for="for: item; in: searchResultsPage; key: id; template: #searchResultTemplate; updateInPlace: true; pool: 6; delay: 25"
|
|
layout="type: box; columns: 1; marginRow: -0.2"
|
|
search-result-list
|
|
position="0 0.644 0"></a-entity>
|
|
|
|
<!-- TODO: Pagination icons. -->
|
|
<a-mixin id="searchPageButton"
|
|
animation__mouseenter="property: components.slice9.material.color; type: color; from: #050505; to: #333; startEvents: mouseenter; pauseEvents: mouseleave; dur: 150"
|
|
animation__mouseleave="property: components.slice9.material.color; type: color; from: #333; to: #050505; startEvents: mouseleave; pauseEvents: mouseenter; dur: 150"
|
|
mixin="slice"
|
|
slice9="width: 0.5; height: 0.08; padding: 0.03"
|
|
text="align: center; wrapCount: 40; zOffset: 0.001"></a-mixin>
|
|
|
|
<a-entity id="searchPrevPage" mixin="searchPageButton" bind-toggle__raycastable="search.hasPrev && menu.active" position="-0.05 0.65 0.01" proxy-event="event: click; to: a-scene; as: searchprevpage" bind__visible="search.hasPrev">
|
|
<a-entity geometry="primitive: plane; width: 0.08; height: 0.08" material="shader: flat; src: #downIconImg; transparent: true" rotation="0 0 180" position="0 0 -0.001"></a-entity>
|
|
</a-entity>
|
|
<a-entity id="searchNextPage" mixin="searchPageButton" bind-toggle__raycastable="search.hasNext && menu.active" position="-0.05 -0.634 0.01" proxy-event="event: click; to: a-scene; as: searchnextpage" bind__visible="search.hasNext">
|
|
<a-entity geometry="primitive: plane; width: 0.08; height: 0.08" material="shader: flat; src: #downIconImg; transparent: true" position="0 0 -0.001"></a-entity>
|
|
</a-entity>
|
|
{% endmacro %}
|
|
|
|
{% raw %}
|
|
<template id="searchResultTemplate">
|
|
<a-entity
|
|
class="searchResult"
|
|
bind-item__data-id="item.id"
|
|
bind-item__song-preview="challengeId: item.id; previewStartTime: item.previewStartTime">
|
|
<a-entity
|
|
class="searchResultBackground"
|
|
active-color
|
|
bind-item__active-color="active: menuSelectedChallenge.id === item.id"
|
|
bind-item__animation__mouseenter="enabled: menuSelectedChallenge.id !== item.id"
|
|
bind-item__animation__mouseleave="enabled: menuSelectedChallenge.id !== item.id"
|
|
bind-toggle__raycastable="menu.active"
|
|
geometry="primitive: plane; width: 1.1; height: 0.2"
|
|
material="shader: flat; color: #067197; transparent: true; opacity: 0.0"
|
|
position="0 -0.13 -0.002"
|
|
play-sound="event: mouseenter; sound: #hoverSound; volume: 0.03"
|
|
animation__mouseenter="property: components.material.material.opacity; from: 0.0; to: 1.0; startEvents: mouseenter; pauseEvents: mouseleave; dur: 150"
|
|
animation__mouseleave="property: components.material.material.opacity; from: 1.0; to: 0.0; startEvents: mouseleave; pauseEvents: mouseenter; dur: 150"></a-entity>
|
|
<a-entity class="searchResultContent" position="0.125 -0.05 0">
|
|
<a-entity
|
|
class="searchResultImage"
|
|
bind-item__search-result-image="id: item.id"
|
|
geometry="primitive: plane; width: 0.2; height: 0.2"
|
|
material="shader: flat; color: #223"
|
|
position="-0.576 -0.08 0.001"></a-entity>
|
|
<a-entity
|
|
class="searchResultTitleActive"
|
|
mixin="textFont"
|
|
bind-item__text="value: item.shortSongName"
|
|
bind-item__visible="menuSelectedChallenge.id === item.id"
|
|
text="align: left; color: #333; wrapCount: 28"
|
|
position="0.064 -0.091 0"></a-entity>
|
|
<a-entity
|
|
class="searchResultTitle"
|
|
bind-item__text="value: item.shortSongName"
|
|
bind-item__visible="menuSelectedChallenge.id !== item.id"
|
|
mixin="textFont"
|
|
text="align: left; color: #FFF; wrapCount: 28"
|
|
position="0.064 -0.091 0"></a-entity>
|
|
<a-entity
|
|
class="searchResultAuthor"
|
|
mixin="textFont"
|
|
bind-item__text="value: item.shortSongSubName"
|
|
text="wrapCount: 42; align: left; color: #999"
|
|
position="0.064 -0.147 0"></a-entity>
|
|
</a-entity>
|
|
</a-entity>
|
|
</template>
|
|
{% endraw %}
|
|
|
|
<!-- Menu container begins here. -->
|
|
<a-entity id="menu" bind__visible="menu.active" position="0 1.6 -2">
|
|
<a-entity id="menuBackground"
|
|
mixin="slice"
|
|
slice9="width: 2.5; height: 1.4"
|
|
position="0 0 -0.005"
|
|
raycastable></a-entity>
|
|
|
|
<a-entity id="searchResultsContainer" position="0 0 0.001"
|
|
animation__toleft="property: object3D.position.x; to: -0.59; dur: 200; easing: easeOutCubic; startEvents: menuchallengeselect"
|
|
animation__toright="property: object3D.position.x; to: 0; dur: 200; easing: easeOutCubic; startEvents: menuback"
|
|
proxy-event__divisor1="event: menuchallengeselect; to: #divisorA, #divisorB"
|
|
proxy-event__divisor2="event: menuback; to: #divisorA, #divisorB">
|
|
|
|
<a-entity id="divisorA"
|
|
position="0.566 0 -0.0025"
|
|
geometry="primitive:plane; height:1.17; width:0.005"
|
|
material="shader: flat; color: #fff; transparent: true; opacity: 0.0"
|
|
animation__fadein ="property: components.material.material.opacity; to: 1.0; startEvents: menuchallengeselect; dur: 200"
|
|
animation__fadeout="property: components.material.material.opacity; to: 0.0; startEvents: menuback; dur: 200"></a-entity>
|
|
|
|
{{ searchResults() }}
|
|
</a-entity>
|
|
|
|
<a-entity id="menuDifficultiesGroup"
|
|
position="0.35 0.18 0"
|
|
animation__toleft="property: object3D.position.x; to: 0.195; dur: 200; easing: easeOutCubic; startEvents: menuchallengeselect"
|
|
animation__toright="property: object3D.position.x; to: 0.35; dur: 200; easing: easeOutCubic; startEvents: menuback">
|
|
|
|
<a-entity id="divisorB"
|
|
position="0.218 -0.179 -0.003"
|
|
geometry="primitive: plane; height: 1.17; width: 0.005"
|
|
material="shader: flat; color: #fff; transparent: true; opacity: 0.0"
|
|
animation__fadein="property: components.material.opacity; to: 1.0; startEvents: menuchallengeselect; dur: 200"
|
|
animation__fadeout="property: components.material.opacity; to: 0.0; startEvents: menuback; dur: 200"
|
|
></a-entity>
|
|
|
|
<!-- Top-aligned. TODO: Smart-centering. -->
|
|
<a-entity id="menuDifficulties"
|
|
bind-for="for: item; in: menuDifficulties; updateInPlace: true; pool: 5"
|
|
bind__visible="!!menuSelectedChallenge.id"
|
|
layout="type: box; columns: 1; marginRow: -0.2; orderAttribute: data-bind-for-key"
|
|
position="0 0.52 0"
|
|
menu-difficulty-select>
|
|
{% raw %}
|
|
<template>
|
|
<!-- Item is a string representing the difficulty. -->
|
|
<a-entity class="difficultyOption" bind-item__data-difficulty="item">
|
|
<a-entity class="difficultyBackground"
|
|
bind-item__active-color="active: menuSelectedChallenge.difficulty === item"
|
|
bind-item__animation__mouseenter="enabled: menuSelectedChallenge.difficulty !== item"
|
|
bind-item__animation__mouseleave="enabled: menuSelectedChallenge.difficulty !== item"
|
|
bind-toggle__raycastable="menu.active && !!menuSelectedChallenge.id && menuSelectedChallenge.difficulty !== item"
|
|
geometry="primitive: plane; width: 0.4; height: 0.2"
|
|
material="shader: flat; color: #067197; transparent: true; opacity: 0.0"
|
|
position="0 -0.005 0"
|
|
play-sound="event: mouseenter; sound: #hoverSound; volume: 0.03"
|
|
animation__mouseenter="property: components.material.material.opacity; to: 1.0; startEvents: mouseenter; pauseEvents: mouseleave; dur: 150"
|
|
animation__mouseleave="property: components.material.material.opacity; to: 0.0; startEvents: mouseleave; pauseEvents: mouseenter; dur: 150"></a-entity>
|
|
<a-entity class="difficultyText" mixin="textFont" bind-item__active-text-color="active: menuSelectedChallenge.difficulty === item" active-text-color="color: #333" bind-item__text-uppercase="value: item" text="wrapCount: 28; align: center; color: #FAFAFA" position="0 -0.057 0.001"></a-entity>
|
|
</a-entity>
|
|
</template>
|
|
{% endraw %}
|
|
</a-entity>
|
|
</a-entity>
|
|
|
|
<!-- Selected challenge info. -->
|
|
<a-entity
|
|
id="menuSelectedChallengePanel"
|
|
bind__visible="!!menuSelectedChallenge.id"
|
|
position="0.82 0 0.001">
|
|
<a-entity id="menuSelectedChallengeImage"
|
|
bind__menu-selected-challenge-image="selectedChallengeId: menuSelectedChallenge.id"
|
|
geometry="primitive: plane; height: 0.3; width: 0.3"
|
|
material="shader: flat"
|
|
position="0 0.382 0"></a-entity>
|
|
<a-entity id="menuSelectedChallengeInfo">
|
|
<a-entity class="menuSelectedChallengeSongAuthor" position="0 0.058 0"
|
|
mixin="textFont" text="wrapCount: 40; align: center; color: #FF185B" bind__text="value: menuSelectedChallenge.songSubName"></a-entity>
|
|
<a-entity class="menuSelectedChallengeSongName" position="0 -0.031 0"
|
|
mixin="textFont" text="align: center; color: #FF185B; wrapCount: 22; baseline: top; lineHeight: 36; width: 0.81"
|
|
bind__text="value: menuSelectedChallenge.songName"></a-entity>
|
|
<a-entity class="menuSelectedChallengeAuthor" position="0 -0.257 0"
|
|
mixin="textFont" text="align: center; color: #FFF; wrapCount: 33; width: 0.78; baseline: bottom" bind__text="value: menuSelectedChallenge.author"></a-entity>
|
|
<a-entity class="menuSelectedChallengeDownloads" position="0 -0.325 0"
|
|
mixin="textFont" text="align: center; color: #FFF; wrapCount: 35" bind__text="value: menuSelectedChallenge.downloadsText"></a-entity>
|
|
</a-entity>
|
|
|
|
<a-plane id="playButton"
|
|
play-button
|
|
play-sound="event: mouseenter; sound: #hoverSound; volume: 0.03"
|
|
position="0 -0.482 0"
|
|
proxy-event="event: click; to: a-scene; as: playbuttonclick"
|
|
material="shader: flat; src: #playImg; transparent: true; color: #CCC"
|
|
width="0.4"
|
|
height="0.2"
|
|
animation__mouseenter1="property: components.material.material.color; type: color; from: #CCC; to: #FFF; startEvents: mouseenter; pauseEvents: mouseleave; dur: 150"
|
|
animation__mouseleave1="property: components.material.material.color; type: color; from: #FFF; to: #CCC; 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="menu.active && !!menuSelectedChallenge.id"
|
|
bind__visible="menu.active && !!menuSelectedChallenge.id"></a-plane>
|
|
</a-entity>
|
|
</a-entity>
|
|
|
|
<a-entity id="keyboard" super-keyboard="width: 1; hand: {{ DEBUG_KEYBOARD and '#mouseCursor' or '#rightHand' }}; imagePath: assets/img/keyboard/; injectToRaycasterObjects: false" position="0 0.8 -1" rotation="-40 0 0" keyboard-raycastable search bind__super-keyboard="show: menu.active"></a-entity>
|
|
|
|
<!-- Representation of the song information during play mode. Not part of menu.
|
|
TODO: Move to different template along with score and such. -->
|
|
<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>
|