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

package.json

@@ -16,7 +16,7 @@
     "aframe-orbit-controls": "^1.2.0",
     "aframe-proxy-event-component": "^2.1.0",
     "aframe-slice9-component": "^1.0.0",
-    "aframe-state-component": "^6.1.0",
+    "aframe-state-component": "^6.2.0",
     "aframe-super-keyboard": "2.0.2",
     "aframe-thumb-controls-component": "^1.1.0",
     "algoliasearch": "^3.29.0",

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');

src/state/index.js

@@ -243,6 +243,7 @@ function computeSearchPagination (state) {
   state.search.songSubNameTexts = '';
 
   state.searchResultsPage.length = 0;
+  state.searchResultsPage.__dirty = true;
   for (i = state.search.page * SEARCH_PER_PAGE;
        i < state.search.page * SEARCH_PER_PAGE + SEARCH_PER_PAGE; i++) {
     if (!state.search.results[i]) { break; }

src/templates/dialogs.html

@@ -42,12 +42,13 @@
 
   <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="dialogImage"
-      bind__menu-selected-challenge-image="selectedChallengeIndex: menuSelectedChallenge.index"
+      copy-texture="from: #menuSelectedChallengeImage"
       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="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>

src/templates/menu.html

@@ -25,6 +25,7 @@
   <a-entity
     id="searchThumbnailImages"
     bind__search-thumbnail-atlas="dummyUpdater: search.songSubNameTexts"
+    bind__visible="searchResultsPage.length > 0"
     geometry="primitive: plane; buffer: false; width: 0.2; height: 1.2"
     dynamic-texture-atlas="canvasId: searchThumbnailImagesCanvas; canvasWidth: 64; canvasHeight: 512; numColumns: 1; numRows: 6; debug: true"
     material="shader: flat"
@@ -165,10 +166,9 @@
     bind__visible="!!menuSelectedChallenge.id"
     position="0.82 0 0.001">
     <a-entity id="menuSelectedChallengeImage"
-              bind__menu-selected-challenge-image="selectedChallengeIndex: menuSelectedChallenge.index"
-              geometry="primitive: plane; buffer: false; skipCache: true; height: 0.3; width: 0.3"
+              bind__menu-selected-challenge-image="selectedChallengeId: menuSelectedChallenge.id"
+              geometry="primitive: plane; 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"