junisaber/src/templates/dialogs.html

<a-mixin
  id="dialogButton"
  mixin="slice"
  bind-toggle__raycastable="isPaused"
  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="dialogButtonText"
  mixin="font"
  position="0 -0.07 0.01"
  text="align: center; wrapCount: 17; color: #AAA"></a-mixin>

<a-entity mixin="dialogButtonText" text="value: GAME OVER; color: #ff7171; width: 4" bind__visible="isGameOver" position="0 1.8 -2.3"></a-entity>

<a-entity id="pauseDialog" position="0 1.6 -2" bind__visible="isPaused">
  <a-entity
    id="resumeButton"
    mixin="dialogButton"
    bind-toggle__raycastable="isPaused && !isGameOver"
    position="0 0.35 0"
    proxy-event="event: click; to: a-scene; as: pausemenuresume"
    bind__visible="!isGameOver">
    <a-entity mixin="dialogButtonText" text="value: RESUME"></a-entity>
  </a-entity>

  <a-entity
    id="restartButton"
    mixin="dialogButton"
    proxy-event="event: click; to: a-scene; as: pausemenurestart">
    <a-entity mixin="dialogButtonText" text="value: RESTART SONG"></a-entity>
  </a-entity>

  <a-entity
    id="exitButton"
    mixin="dialogButton"
    position="0 -0.35 0"
    proxy-event="event: click; to: a-scene; as: pausemenuexit">
    <a-entity mixin="dialogButtonText" text="value: EXIT TO MENU"></a-entity>
  </a-entity>
</a-entity>