reuse search result texture for selected challenge section

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;
+  }
+});

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>