don't use atlas for menu selected challenge image because pagination...perhaps can use for dialog image

src/components/copy-texture.js

@@ -0,0 +1,29 @@
+AFRAME.registerComponent('copy-texture', {
+  dependencies: ['geometry', 'material'],
+
+  schema: {
+    from: {type: 'selector'}
+  },
+
+  init: function () {
+    const data = this.data;
+
+    data.from.addEventListener('materialtextureloaded', () => { this.copyTexture(); });
+    this.copyTexture();
+  },
+
+  copyTexture: function () {
+    const el = this.el;
+    const target = this.data.from;
+    const material = el.getObject3D('mesh').material;
+
+    if (!target.getObject3D('mesh')) { return; }
+
+    material.map = target.getObject3D('mesh').material.map;
+
+    if (!material.map) { return; }
+
+    material.map.needsUpdate = true;
+    material.needsUpdate = true;
+  }
+});

src/components/menu-selected-challenge-image.js

@@ -1,27 +1,13 @@
-/**
- * Reuse images from the search result.
- */
 AFRAME.registerComponent('menu-selected-challenge-image', {
-  dependencies: ['geometry', 'material'],
-
   schema: {
-    selectedChallengeIndex: {type: 'number'}
-  },
-
-  init: function () {
-    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;
+    selectedChallengeId: {type: 'string'}
   },
 
   update: function () {
-    const data = this.data;
     const el = this.el;
-
-    if (data.selectedChallengeIndex === -1 || data.selectedChallengeIndex === '') { return; }
-
-    // Update UVs.
-    el.setAttribute('atlas-uvs', 'row', data.selectedChallengeIndex + 1);
+    if (!this.data.selectedChallengeId) { return; }
+    el.setAttribute(
+      'material', 'src',
+      `https://s3-us-west-2.amazonaws.com/supersaber/${this.data.selectedChallengeId}-image.jpg`);
   }
 });

src/components/search-thumbnail-atlas.js

@@ -23,10 +23,9 @@ AFRAME.registerComponent('search-thumbnail-atlas', {
 
     this.ctx = canvas.getContext('2d');
     this.clearCanvas();
-
     document.body.appendChild(canvas);
-    this.el.setAttribute('material', 'src', canvas);
 
+    this.el.setAttribute('material', 'src', canvas);
     this.images = [];
   },
 
@@ -34,8 +33,6 @@ AFRAME.registerComponent('search-thumbnail-atlas', {
     var el = this.el;
     var data = this.data;
 
-    this.clearCanvas();
-
     const results = el.sceneEl.systems.state.state.searchResultsPage;
     for (let i = 0; i < results.length; i++) {
       let img = this.images[i] = this.images[i] || document.createElement('img');