<!-- Victory. -->
<a-entity
  id="victoryInfoContainer"
  class="overlay"
  position="0 0.9 -2"
  bind__visible="isVictory">

  <a-entity
    id="victoryAccuracyRing"
    bind__victory-accuracy-ring="accuracy: score.accuracy"
    animation="property: components.material.material.uniforms.progress.value; from: 0; easing: easeOutQuad; delay: 500; dur: 2000; autoplay: false"
    geometry="primitive: plane; width: 0.7; height: 0.7"
    material="shader: ring; transparent: true; color: #ABABAB; radiusInner: 0.8; color: #FAFAFA"
    position="0 0.48 0"></a-entity>

  <a-entity
    id="victoryInfoRank"
    class="accuracyTextCounterSubscribe"
    mixin="font"
    bind__animation="enabled: isVictory"
    bind__victory-rank="rank: score.rank"
    scale="0 0 0"
    position="0 0.15 0.25"
    animation__rotation="property: object3D.rotation.y; from: 0; to: -360; loop: true; easing: linear; dur: 5000; startEvents: textcounterdone"
    animation__scale="property: scale; from: 0 0 0; to: 1 1 1; loop: false; easing: easeOutQuad; dur: 300; startEvents: textcounterdone"
    play-sound="sound: #victorySound; event: textcounterdone"
    text="wrapCount: 3; align: center; baseline: center; width: 0.82; side: double"></a-entity>

  <a-entity
    id="victoryInfoAccuracy"
    mixin="font"
    bind__text-counter="enabled: isVictory; value: score.accuracy"
    text="align: left; color: #FAFAFA; wrapCount: 22; baseline: top; width: 0.81; value: 0.00%"
    text-counter="suffix: %; decimals: 2; emit: true"
    proxy-event="event: textcounterdone; to: .accuracyTextCounterSubscribe"
    position="0.75 0.725 0"></a-entity>

  <a-entity
    id="victoryInfoBeatsHit"
    class="accuracyTextCounterSubscribe"
    mixin="font"
    bind__text="opacity: isVictory && 0 || 0; value: score.beatsText"
    animation="property: components.text.material.uniforms.opacity.value; from: 0; to: 1; startEvents: textcounterdone"
    text="align: left; color: #FAFAFA; wrapCount: 22; baseline: top; width: 0.81"
    position="0.75 0.185 0"></a-entity>

  <a-entity
    id="victoryInfoScore"
    mixin="font"
    text="value: 0; align: center; color: #FAFAFA; wrapCount: 15; baseline: top; width: 2.25"
    bind__text-counter="enabled: isVictory; value: score.score"
    position="0 -0.19 0"></a-entity>

  <a-entity
    id="victoryInfoMaxCombo"
    mixin="font"
    text="align: center; color: #FAFAFA; wrapCount: 22; baseline: top; width: 1"
    text-counter="prefix: MAX COMBO: "
    bind__text-counter="enabled: isVictory; value: score.maxCombo"
    position="0 -0.3 0"></a-entity>

  <a-entity
    id="victoryButtons"
    position="0 0.2 0"
    play-sound="event: mouseenter; sound: #hoverSound; volume: 0.03"
    play-sound__click="event: click; sound: #confirmSound; volume: 0.25">
    <a-entity
      id="victoryRestartButton"
      class="accuracyTextCounterSubscribe"
      mixin="gameMenuButton"
      bind-toggle__raycastable="isVictory"
      bind__slice9="opacity: isVictory && 0 || 0"
      animation="property: components.slice9.material.opacity; from: 0; to: 1; startEvents: textcounterdone"
      position="-0.56 -0.79 0.05"
      proxy-event="event: click; to: a-scene; as: gamemenurestart"
      slice9="opacity: 0">
      <a-entity
        class="accuracyTextCounterSubscribe"
        mixin="gameMenuButtonText"
        bind__text="opacity: isVictory && 0 || 0"
        animation="property: components.text.material.uniforms.opacity.value; from: 0; to: 1; startEvents: textcounterdone"
        text="opacity: 0; value: PLAY AGAIN"></a-entity>
    </a-entity>

    <a-entity
      id="victoryExitButton"
      class="accuracyTextCounterSubscribe"
      mixin="gameMenuButton"
      bind-toggle__raycastable="isVictory"
      bind__slice9="opacity: isVictory && 0 || 0"
      animation="property: components.slice9.material.opacity; from: 0; to: 1; startEvents: textcounterdone"
      position="0.56 -0.79 0.05"
      proxy-event="event: click; to: a-scene; as: gamemenuexit"
      slice9="opacity: 0">
      <a-entity
        class="accuracyTextCounterSubscribe"
        mixin="gameMenuButtonText"
        bind__text="opacity: isVictory && 0 || 0"
        animation="property: components.text.material.uniforms.opacity.value; from: 0; to: 1; startEvents: textcounterdone"
        text="opacity: 0; value: BACK TO MENU"></a-entity>
    </a-entity>
  </a-entity>
</a-entity>
