ag-solo: properly order the X and Y axes

fixes Agoric#61

README.md

@@ -162,8 +162,8 @@ You might see something like:
 ```
 
 The `quantity` tells us which pixels we've received. `{ x:1, y:4 }`
-means that we got a pixel that is in the second row (`x:1`) and 5 pixels
-from the left (`y:4`). To color the pixel, we need to get the use
+means that we got a pixel that is in the fifth row (`y:4`) and 2 pixels
+from the left (`x:1`). To color the pixel, we need to get the use
 object from the payment. You can think of the use object as a regular
 JavaScript object that just happens to be associated with an ERTP
 payment. 

lib/ag-solo/html/main.js

@@ -109,8 +109,9 @@ function run() {
     while (galleryNode.firstChild) {
       galleryNode.removeChild(galleryNode.firstChild);
     }
-    for (let x = 0; x < state.length; x += 1) {
-      for (let y = 0; y < state.length; y += 1) {
+    // We need to render increasing x followed by increasing y.
+    for (let y = 0; y < state[0].length; y += 1) {
+      for (let x = 0; x < state.length; x += 1) {
         const px = document.createElement('div');
         px.id = `pix${x}.${y}`;
         px.className = 'pixel';
@@ -147,8 +148,8 @@ function run() {
       void px.offsetWidth;
       px.classList.add('updated');
     }
-    for (let x = 0; x < state.length; x += 1) {
-      for (let y = 0; y < state.length; y += 1) {
+    for (let y = 0; y < state[0].length; y += 1) {
+      for (let x = 0; x < state.length; x += 1) {
         const newcolor = state[x][y];
         if (newcolor !== oldState[x][y]) {
           renderPixel(x, y, newcolor);