From ab39372475b8ea7f34e2785644a9d46530e7e218 Mon Sep 17 00:00:00 2001
From: Kevin Ngo <me@ngokevin.com>
Date: Thu, 20 Sep 2018 06:09:44 -0700
Subject: [PATCH] make menu animations more perf, top align difficulty menu for
 now (fixes #21)

---
 src/templates/menu.html | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/templates/menu.html b/src/templates/menu.html
index 2af1280..922cdb0 100644
--- a/src/templates/menu.html
+++ b/src/templates/menu.html
@@ -98,22 +98,24 @@
   </a-entity>
 
   <a-entity id="menuDifficultiesGroup"
-    position="0.35 0.180 0"
-    animation__toleft="property: position;  to: 0.195 0.18 0; dur: 200; easing: easeOutCubic; startEvents: menuchallengeselect"
-    animation__toright="property: position; to: 0.35 0.18 0; dur: 200; easing: easeOutCubic; startEvents: menuback">
+    position="0.35 0.18 0"
+    animation__toleft="property: position.x; to: 0.195; dur: 200; easing: easeOutCubic; startEvents: menuchallengeselect"
+    animation__toright="property: 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: material.opacity; to: 1.0; startEvents: menuchallengeselect; dur: 200"
-      animation__fadeout="property: material.opacity; to: 0.0; startEvents: menuback; dur: 200"
+      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>