junisaber/src/templates/gameMenu.html

<a-mixin
  id="gameMenuButton"
  mixin="slice"
  animation__mouseenter="property: components.slice9.material.color; type: color; from: #050505; to: #067197; startEvents: mouseenter; pauseEvents: mouseleave; dur: 150"
  animation__mouseleave="property: components.slice9.material.color; type: color; from: #067197; to: #050505; startEvents: mouseleave; pauseEvents: mouseenter; dur: 150"
  slice9="width: 1; height: 0.27; padding: 0.04"></a-mixin>

<a-mixin
  id="gameMenuButtonText"
  mixin="font"
  position="0 -0.07 0.01"
  text="align: center; wrapCount: 17; color: #F0F0F0"></a-mixin>

<!-- Titles. -->
<a-entity id="inGameMenuTitles" position="0 1.7 -2.3">
  <a-entity mixin="gameMenuButtonText" text="value: GAME OVER; color: #ff7171; width: 4" bind__visible="isGameOver"></a-entity>
  <a-entity mixin="gameMenuButtonText" text="value: SONG CLEAR; color: #7171FF; width: 4" bind__visible="isVictory"></a-entity>
</a-entity>

<a-entity
  id="gameMenu"
  bind__visible="isGameOver || isPaused || isVictory"
  position="0 1.1 -2"
  play-sound="event: mouseenter; sound: #hoverSound; volume: 0.03">

  <!-- Actions. -->
  <a-entity
    id="resumeButton"
    mixin="gameMenuButton"
    bind-toggle__raycastable="isPaused"
    bind__visible="isPaused"
    position="0 0.35 0"
    proxy-event="event: click; to: a-scene; as: gamemenuresume">
    <a-entity mixin="gameMenuButtonText" text="value: RESUME"></a-entity>
  </a-entity>

  <a-entity
    id="restartButton"
    mixin="gameMenuButton"
    bind-toggle__raycastable="isPaused || isGameOver || isVictory"
    proxy-event="event: click; to: a-scene; as: gamemenurestart">
    <a-entity mixin="gameMenuButtonText" text="value: RESTART SONG"></a-entity>
  </a-entity>

  <a-entity
    id="exitButton"
    mixin="gameMenuButton"
    bind-toggle__raycastable="isPaused || isGameOver || isVictory"
    position="0 -0.35 0"
    proxy-event="event: click; to: a-scene; as: gamemenuexit">
    <a-entity mixin="gameMenuButtonText" text="value: EXIT TO MENU"></a-entity>
  </a-entity>

  <!-- Song info. -->
  <a-entity id="gameMenuSongInfoContainer" position="-1.64 -0.12 0.798" rotation="0 55 0">
    <a-entity mixin="slice" slice9="width: 0.77; height: 1; padding: 0.04" position="0 0.110 -0.03"></a-entity>

    <a-entity id="gameMenuSongImage"
      copy-texture="from: #menuSelectedChallengeImage"
      geometry="primitive: plane; buffer: false; skipCache: true; height: 0.3; width: 0.3"
      material="shader: flat"
      position="0 0.382 0"></a-entity>

    <a-entity id="gameMenuSongInfo">
      <a-entity class="gameMenuSongSubName" position="0 0.058 0"
        mixin="textFont" text="wrapCount: 40; align: center; color: #FF185B" bind__text="value: menuSelectedChallenge.songSubName"></a-entity>
      <a-entity class="gameMenuSongName" 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>
  </a-entity>

  <!-- Victory. -->
  <a-entity id="victoryInfoContainer" position="1.64 -0.12 0.798" rotation="0 -55 0" bind__visible="isVictory">
    <a-entity mixin="slice" slice9="width: 0.77; height: 1; padding: 0.04" position="0 0.110 -0.03"></a-entity>

    <a-entity id="victoryInfo" layout="type: box; columns: 1; margin: -0.1">
      <!-- TODO: Different color text based on rank. (bind__rank-text="rank: score.rank") -->
      <a-entity
        id="victoryInfoRank"
        mixin="textFont"
        text="wrapCount: 1; align: center; color: #AAFFAA; width: 0.5"
        bind__text="value: score.rank"></a-entity>

      <a-entity
        id="victoryInfoScore"
        mixin="textFont"
        text="align: center; color: #FAFAFA; wrapCount: 22; baseline: top; lineHeight: 36; width: 0.81"
        bind__text="value: score.scoreText"></a-entity>

      <a-entity
        id="victoryInfoAccuracy"
        mixin="textFont"
        text="align: center; color: #FAFAFA; wrapCount: 22; baseline: top; lineHeight: 36; width: 0.81"
        bind__text="value: score.accuracy"></a-entity>

      <a-entity
        id="victoryInfoMaxCombo"
        mixin="textFont"
        text="align: center; color: #FAFAFA; wrapCount: 22; baseline: top; lineHeight: 36; width: 0.81"
        bind__text="value: score.maxComboText"></a-entity>
    </a-entity>
  </a-entity>
</a-entity>