From 6416d24d2e958225253184528c9b7e414363d14e Mon Sep 17 00:00:00 2001
From: Kevin Ngo <me@ngokevin.com>
Date: Sun, 7 Oct 2018 00:23:16 -0700
Subject: [PATCH] use texture atlas for menu selected challenge

---
 .../menu-selected-challenge-image.js          | 19 +++++++++++--------
 src/state/index.js                            |  2 +-
 src/templates/dialogs.html                    | 19 +++++++------------
 src/templates/menu.html                       |  5 +++--
 4 files changed, 22 insertions(+), 23 deletions(-)

diff --git a/src/components/menu-selected-challenge-image.js b/src/components/menu-selected-challenge-image.js
index e4049cd..be301f9 100644
--- a/src/components/menu-selected-challenge-image.js
+++ b/src/components/menu-selected-challenge-image.js
@@ -1,24 +1,27 @@
 /**
- * Reuse images from the search results to not create another texture.
+ * Reuse images from the search result.
  */
 AFRAME.registerComponent('menu-selected-challenge-image', {
+  dependencies: ['geometry', 'material'],
+
   schema: {
-    selectedChallengeId: {type: 'string'}
+    selectedChallengeIndex: {type: 'number'}
   },
 
   init: function () {
-    this.searchResultEls = document.getElementById('searchResultList');
+    const el = this.el;
+    this.searchThumbnails = document.getElementById('searchThumbnailImages');
+    el.getObject3D('mesh').material.map = this.searchThumbnails.getObject3D('mesh').material.map;
+    el.getObject3D('mesh').material.needsUpdate = true;
   },
 
   update: function () {
     const data = this.data;
     const el = this.el;
 
-    if (!data.selectedChallengeId) { return; }
+    if (data.selectedChallengeIndex === -1 || data.selectedChallengeIndex === '') { return; }
 
-    const imageEl = this.searchResultEls
-      .querySelector(`[data-id="${data.selectedChallengeId}"] .searchResultImage`);
-    el.getObject3D('mesh').material.map = imageEl.getObject3D('mesh').material.map;
-    el.getObject3D('mesh').material.needsUpdate = true;
+    // Update UVs.
+    el.setAttribute('atlas-uvs', 'row', data.selectedChallengeIndex + 1);
   }
 });
diff --git a/src/state/index.js b/src/state/index.js
index f7e35df..a8b28c1 100644
--- a/src/state/index.js
+++ b/src/state/index.js
@@ -48,7 +48,7 @@ AFRAME.registerState({
       downloads: '',
       downloadsText: '',
       id: '',
-      index: '',
+      index: -1,
       image: '',
       songName: '',
       songSubName: ''
diff --git a/src/templates/dialogs.html b/src/templates/dialogs.html
index 61d4804..77b33e4 100644
--- a/src/templates/dialogs.html
+++ b/src/templates/dialogs.html
@@ -42,22 +42,17 @@
 
   <a-entity id="pauseDialogInfo" 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="menuSelectedChallengeImage"
-      bind__menu-selected-challenge-image="selectedChallengeId: menuSelectedChallenge.id"
-      geometry="primitive: plane; height: 0.3; width: 0.3"
+    <a-entity id="dialogImage"
+      bind__menu-selected-challenge-image="selectedChallengeIndex: menuSelectedChallenge.index"
+      geometry="primitive: plane; buffer: false; skipCache: true; height: 0.3; width: 0.3"
       material="shader: flat"
+      atlas-uvs="totalColumns: 1; totalRows: 6; column: 1"
       position="0 0.382 0"></a-entity>
-    <a-entity id="menuSelectedChallengeInfo">
-      <a-entity class="menuSelectedChallengeSongAuthor" position="0 0.058 0"
+    <a-entity id="dialogSelectedChallengeInfo">
+      <a-entity class="dialogSelectedChallengeSongSubName" position="0 0.058 0"
         mixin="textFont" text="wrapCount: 40; align: center; color: #FF185B" bind__text="value: menuSelectedChallenge.songSubName"></a-entity>
-      <a-entity class="menuSelectedChallengeSongName" position="0 -0.031 0"
+      <a-entity class="diallogSelectedChallengeSongName" 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 class="menuSelectedChallengeAuthor" position="0 -0.257 0"
-        mixin="textFont" text="align: center; color: #FFF; wrapCount: 33; width: 0.78; baseline: bottom" bind__text="value: menuSelectedChallenge.author"></a-entity>
-      <a-entity class="menuSelectedChallengeDownloads" position="0 -0.325 0"
-        mixin="textFont" text="align: center; color: #FFF; wrapCount: 35" bind__text="value: menuSelectedChallenge.downloadsText"></a-entity>
     </a-entity>
-  </a-entity>
-
 </a-entity>
diff --git a/src/templates/menu.html b/src/templates/menu.html
index 932fac2..092d918 100644
--- a/src/templates/menu.html
+++ b/src/templates/menu.html
@@ -165,9 +165,10 @@
     bind__visible="!!menuSelectedChallenge.id"
     position="0.82 0 0.001">
     <a-entity id="menuSelectedChallengeImage"
-              bind__menu-selected-challenge-image="selectedChallengeId: menuSelectedChallenge.id"
-              geometry="primitive: plane; height: 0.3; width: 0.3"
+              bind__menu-selected-challenge-image="selectedChallengeIndex: menuSelectedChallenge.index"
+              geometry="primitive: plane; buffer: false; skipCache: true; height: 0.3; width: 0.3"
               material="shader: flat"
+              atlas-uvs="totalColumns: 1; totalRows: 6; column: 1"
               position="0 0.382 0"></a-entity>
     <a-entity id="menuSelectedChallengeInfo">
       <a-entity class="menuSelectedChallengeSongAuthor" position="0 0.058 0"