From bb927748b46ba6dd6efd89a535ba74d9f78f1295 Mon Sep 17 00:00:00 2001
From: Kevin Ngo <me@ngokevin.com>
Date: Thu, 20 Sep 2018 01:09:16 -0700
Subject: [PATCH] reuse search result texture for selected challenge section

---
 .../menu-selected-challenge-image.js          | 24 +++++++++++++++++++
 src/templates/menu.html                       | 10 ++++----
 2 files changed, 30 insertions(+), 4 deletions(-)
 create mode 100644 src/components/menu-selected-challenge-image.js

diff --git a/src/components/menu-selected-challenge-image.js b/src/components/menu-selected-challenge-image.js
new file mode 100644
index 0000000..e4049cd
--- /dev/null
+++ b/src/components/menu-selected-challenge-image.js
@@ -0,0 +1,24 @@
+/**
+ * Reuse images from the search results to not create another texture.
+ */
+AFRAME.registerComponent('menu-selected-challenge-image', {
+  schema: {
+    selectedChallengeId: {type: 'string'}
+  },
+
+  init: function () {
+    this.searchResultEls = document.getElementById('searchResultList');
+  },
+
+  update: function () {
+    const data = this.data;
+    const el = this.el;
+
+    if (!data.selectedChallengeId) { 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;
+  }
+});
diff --git a/src/templates/menu.html b/src/templates/menu.html
index c063d89..dfbd657 100644
--- a/src/templates/menu.html
+++ b/src/templates/menu.html
@@ -136,14 +136,16 @@
     </a-entity>
   </a-entity>
 
-  <a-entity id="menuSelectedChallengePanel" bind__visible="!!menuSelectedChallenge.id"
-            position="0.82 0 0.001">
+  <!-- Selected challenge info. -->
+  <a-entity
+    id="menuSelectedChallengePanel"
+    bind__visible="!!menuSelectedChallenge.id"
+    position="0.82 0 0.001">
     <a-entity id="menuSelectedChallengeImage"
-              bind__material="src: menuSelectedChallenge.image"
+              bind__menu-selected-challenge-image="selectedChallengeId: menuSelectedChallenge.id"
               geometry="primitive: plane; height: 0.3; width: 0.3"
               material="shader: flat"
               position="0 0.382 0"></a-entity>
-
     <a-entity id="menuSelectedChallengeInfo">
       <a-entity class="menuSelectedChallengeSongAuthor" position="0 0.058 0"
         mixin="textFont" text="wrapCount: 40; align: center; color: #FF185B" bind__text="value: menuSelectedChallenge.songSubName"></a-entity>