Share panel and Fix step 7

3 files changed, 54 insertions, 18 deletions

diff --git a/client/colors.less b/client/colors.less
index 6c9c5f1..2a710ae 100644
--- a/client/colors.less
+++ b/client/colors.less
@@ -210,6 +210,28 @@ body {
       }
       div.final {
         text-align: center;
+        display: flex;
+        justify-content: center;
+        div.dominants {
+
+        }
+        div.share {
+          margin-left: 40px;
+          width: 260px;
+          button {
+            font-size: 1.2em;
+            width: 100%;
+            margin-top: 45px;
+            color: #2636F9;
+            padding: 7px 35px;
+            background-color: white;
+            border: 1px #2636F9 solid;
+            &:hover, &:active {
+              color: white;
+              background-color: #2636F9;
+            }
+          }
+        }
       }
     }
     div.about-wrapper {
diff --git a/client/effects.js b/client/effects.js
index 63a5ab1..934eb76 100644
--- a/client/effects.js
+++ b/client/effects.js
@@ -240,33 +240,34 @@ Effects = (function() {
     var photos = $('div.photo').length;
 
     var cols = [];
-    _.each(Session.get('photos'), function (x, i) {
-      var id = x.id;
+    _.each(Session.get('photos'), function (p, i) {
+      var id = p.id;
       cols.push(Session.get(id + ':finalcols'));
     });
 
+    // transpose to get pixel color groups
+    cols = _.zip.apply(_, cols);
+
     for (var y = 0; y < gridDim; y++) {
-      for(var x = 0; x < gridDim; x++) {
+      for (var x = 0; x < gridDim; x++) {
+        _.delay(function(x, y) {
 
-        var c = []
-        for (var j = 0; j < photos; j++) {
-          c.push(cols[j][(y * gridDim) + x]);
-        }
+          // get most recurring item/color
+          var col = cols[(y * gridDim) + x];
+          var c = _.chain(col).countBy().pairs().max(_.last).head().value().split(',');
+          var nc = new paper.Color(+c[0], +c[1], +c[2]);
 
-        var freq_col = _.chain(c).countBy().pairs().max(_.last).head().value();
-        freq_col = freq_col.split(',');
-        var nc = new paper.Color(+freq_col[0], +freq_col[1], +freq_col[2]);
+          var rec = new paper.Path.Rectangle({
+            point: [x * gridSize, y * gridSize],
+            size: [gridSize, gridSize],
+            strokeWidth: 0,
+            fillColor: nc
+          });
 
-        var rec = new paper.Path.Rectangle({
-          point: [x * gridSize, y * gridSize],
-          size: [gridSize, gridSize],
-          strokeWidth: 0,
-          fillColor: nc
-        });
+          p.view.draw();
+        }, ((y * gridDim) + x) * 35, x, y);
       }
     }
-    p.view.draw();
-
   }
 
   return {
diff --git a/client/templates/photos.html b/client/templates/photos.html
index a7ab636..50e29bc 100644
--- a/client/templates/photos.html
+++ b/client/templates/photos.html
@@ -29,6 +29,19 @@
     </div>
     <div class="final" style="display: none">
       <canvas id="canvas-final" style="height: 315px; width: 315px;"></canvas>
+      <div class="dominants">
+        <div id="dominant1" class="color"></div>
+        <h5>#AABBCC</h5>
+        <div id="dominant2" class="color"></div>
+        <h5>#AABBCC</h5>
+      </div>
+      <div class="share">
+        <p>This is your icon! Now what...?</p>
+        <button class="share-instagram">Share on Instagram</button>
+        <button class="share-facebook">Share on Facebook</button>
+        <button class="share-save">Save to gallery</button>
+        <button class="share-print">Print me a copy</button>
+      </div>
     </div>
     <canvas id="canvas-all" style="display: none; height: 150px; width: 150px;"></canvas>
   </div>