From fa10328fcbd2b979195167965eef1cb9b93b8ac3 Mon Sep 17 00:00:00 2001
From: Simey de Klerk <simeydeklerk@gmail.com>
Date: Thu, 24 Oct 2019 23:26:56 +0200
Subject: [PATCH 1/2] (feat): Add Gravity

---
 assets/javascript/party-mode.js | 30 +++++++++++++++++++++++++++---
 index.njk                       |  1 +
 2 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/assets/javascript/party-mode.js b/assets/javascript/party-mode.js
index dfc207bdb6..f88967a56c 100644
--- a/assets/javascript/party-mode.js
+++ b/assets/javascript/party-mode.js
@@ -10,10 +10,11 @@ images.forEach(image => image.remove());
 
 let showImages = false;
 
-// add additional 'x-start' and 'y-start' attributes
-rects.forEach(rect => {
+// add additional 'x-start' and 'y-start' and original index attributes
+rects.forEach((rect, i) => {
   rect.setAttribute('x-start', rect.getAttribute('x'));
   rect.setAttribute('y-start', rect.getAttribute('y'));
+  rect.setAttribute('key', i)
 });
 
 document.addEventListener('keydown', onKeyDown);
@@ -34,7 +35,8 @@ function onKeyDown(event) {
     f: flip,
     v: vert,
     w: walk,
-    a: toggleImages
+    a: toggleImages,
+    g: gravity,
   };
   const f = keyMap[key];
   if (f) {
@@ -72,6 +74,21 @@ function twist() {
   transform(({ x, y }) => [390 - y, x]);
 }
 
+function gravity() {
+  // create an array of arrays for every column
+  const cols = Array.from({length:width},() => []) 
+  rects.forEach(rect => cols[rectToObj(rect).x / 10].push(rect))
+  cols.forEach(col => {
+    col.sort((b,a) => rectToObj(a).y - rectToObj(b).y)
+    col.forEach((rect, i) => {
+      const y = (height-i-1) * 10
+      const key = rect.getAttribute('key')
+      rect.setAttribute('y', y)
+      images[key].setAttribute('y', y)
+    })
+  })
+}
+
 function walk() {
   transform(w);
 }
@@ -86,6 +103,13 @@ const w = ({ x, y }) => {
   return [newX, newY];
 };
 
+function rectToObj(rect) {
+  const [x, y, xStart, yStart] = ['x', 'y', 'x-start', 'y-start'].map(
+    key => rect.getAttribute(key)
+  );
+  return {x, y, xStart, yStart};
+}
+
 function transform(transformFunction) {
   rects.forEach((rect, i) => {
     const image = images[i];
diff --git a/index.njk b/index.njk
index 042a1a8220..590c184330 100644
--- a/index.njk
+++ b/index.njk
@@ -59,6 +59,7 @@
           <button class="nes-btn" onClick="flip()">Flip (f)</button>
           <button class="nes-btn" onClick="vert()">V-Flip (v)</button>
           <button class="nes-btn" onClick="walk()">Walk (w)</button>
+          <button class="nes-btn" onClick="gravity()">Gravity (g)</button>
           <button class="nes-btn" onClick="reset()">Reset (Esc)</button>
           <button class="nes-btn" onClick="toggleImages()">Avatars (a)</button>
         </div>

From b799e37a0a4e087f6024a4f7129caab7ac42928d Mon Sep 17 00:00:00 2001
From: Simey de Klerk <simeydeklerk@gmail.com>
Date: Tue, 29 Oct 2019 23:25:01 +0200
Subject: [PATCH 2/2] Add Gravity to RunAll

---
 assets/javascript/party-mode.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/javascript/party-mode.js b/assets/javascript/party-mode.js
index d7f4e21674..013c0314a2 100644
--- a/assets/javascript/party-mode.js
+++ b/assets/javascript/party-mode.js
@@ -64,7 +64,7 @@ function runAll() {
 
   isRunningAll = true;
 
-  const effects = [order, reset, twist, flip, vert, random, walk, reset];
+  const effects = [order, reset, twist, flip, vert, random, walk, reset, gravity];
 
   runningTimeout = runFirst(effects);
 }