From ccecc5eae74f507cea48be6569592bcb0c6a34f5 Mon Sep 17 00:00:00 2001
From: Michael FIG <mfig@agoric.com>
Date: Wed, 14 Aug 2019 13:49:11 -0600
Subject: [PATCH] ag-solo: properly order the X and Y axes

fixes #61
---
 README.md                | 4 ++--
 lib/ag-solo/html/main.js | 9 +++++----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index 519242962a1..381ae9ec3d6 100644
--- a/README.md
+++ b/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. 
diff --git a/lib/ag-solo/html/main.js b/lib/ag-solo/html/main.js
index 4d5ab6d7c34..858350311e2 100644
--- a/lib/ag-solo/html/main.js
+++ b/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);