From 8212888de0b2bad22d7fe246fb09d62bbd790ecb Mon Sep 17 00:00:00 2001
From: Kevin Ngo <me@ngokevin.com>
Date: Wed, 3 Oct 2018 18:06:03 -0700
Subject: [PATCH] hook up pause menu to event, use mixins for pause menu

---
 src/state/index.js         |  2 +-
 src/templates/dialogs.html | 46 ++++++++++++++++++++------------------
 2 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/src/state/index.js b/src/state/index.js
index da8a24c..9b77386 100644
--- a/src/state/index.js
+++ b/src/state/index.js
@@ -110,7 +110,7 @@ AFRAME.registerState({
     },
 
     pausegame: (state) => {
-      state.menu.active = true;
+      state.isPaused = true;
     },
 
     /**
diff --git a/src/templates/dialogs.html b/src/templates/dialogs.html
index 7d8a05f..cc36e4d 100644
--- a/src/templates/dialogs.html
+++ b/src/templates/dialogs.html
@@ -1,25 +1,27 @@
+<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.070 0.01"
+  text="align: center; wrapCount: 17; color: #AAA"></a-mixin>
+
 <a-entity id="pauseDialog" position="0 1.6 -2" bind__visible="isPaused">
-    <a-entity position="0 0.35 0"
-      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"
-      mixin="slice" slice9="width: 1; height: 0.27; padding: 0.04">
-      <a-entity mixin="font" text="align: center; wrapCount: 17; value: CONTINUE; color: #AAA" position="0 -0.070 0.01"></a-entity>
-    </a-entity>
-    <a-entity
-      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"
-      mixin="slice" slice9="width: 1; height: 0.27; padding: 0.04">
-      <a-entity mixin="font" text="align: center; wrapCount: 17; value: RESTART SONG; color: #AAA" position="0 -0.070 0.01"></a-entity>
-    </a-entity>
+  <a-entity id="continueButton" mixin="dialogButton" position="0 0.35 0">
+    <a-entity mixin="dialogButtonText" text="value: CONTINUE" position="0 -0.070 0.01"></a-entity>
+  </a-entity>
 
-    <a-entity position="0 -0.35 0"
-      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"
-      mixin="slice" slice9="width: 1; height: 0.27; padding: 0.04">
-      <a-entity mixin="font" text="align: center; wrapCount: 17; value: EXIT TO MENU; color: #AAA" position="0 -0.070 0.01"></a-entity>
-    </a-entity>
+  <a-entity id="restartButton" mixin="dialogButton">
+    <a-entity mixin="dialogButtonText" text="value: RESTART SONG"></a-entity>
+  </a-entity>
 
-</a-entity>
\ No newline at end of file
+  <a-entity id="exitButton" mixin="dialogButton" position="0 -0.35 0">
+    <a-entity mixin="dialogButtonText" text="value: EXIT TO MENU" position="0 -0.070 0.01"></a-entity>
+  </a-entity>
+</a-entity>