Dominants

4 files changed, 57 insertions, 2 deletions

diff --git a/client/button.js b/client/button.js
index 6691063..62e27e3 100644
--- a/client/button.js
+++ b/client/button.js
@@ -43,10 +43,33 @@ function animate() {
   delay += 2000;
 
   _.delay(function() {
-    Effects.average();
-  }, delay);
+    $('h4.step').text('(Step 4)');
+    $('div.photos').hide();
+
+    var palette = Effects.average();
+
+    $('div#dominant1').css('background', 'rgba(' + palette[0][0] + ',' + palette[0][1] + ',' + palette[0][2] + ',1)');
+    $('div#dominant2').css('background', 'rgba(' + palette[1][0] + ',' + palette[1][1] + ',' + palette[1][2] + ',1)');
+
+    $('div#dominant1').siblings('h5').text('#'
+      + palette[0][0].toString(16).toUpperCase()
+      + palette[0][1].toString(16).toUpperCase()
+      + palette[0][2].toString(16).toUpperCase()
+    )
+    $('div#dominant2').siblings('h5').text('#'
+      + palette[1][0].toString(16).toUpperCase()
+      + palette[1][1].toString(16).toUpperCase()
+      + palette[1][2].toString(16).toUpperCase()
+    )
+
+    $('div.dominants').show();
+  }, delay + 2000);
+
+  delay += 2000;
 
   _.delay(function() {
+    $('div.dominants').hide();
+    $('div.photos').show();
     _.each(Session.get('photos'), function(x, i) {
       _.delay(function () {
         Effects.averageColor(x.id);
diff --git a/client/colors.less b/client/colors.less
index 83e9006..031ad52 100644
--- a/client/colors.less
+++ b/client/colors.less
@@ -129,6 +129,24 @@ body {
           }
         }
       }
+      div.dominants {
+        margin: 0 auto;
+        width: 400px;
+        div.dominant {
+          text-align: left;
+          flex: 0 0 auto;
+          h3 {
+            color: #2636F9;
+          }
+          div.color {
+            background-color: red;
+            height: 72px;
+          }
+          h5 {
+            color: #808080;
+          }
+        }
+      }
     }
   }
 }
diff --git a/client/effects.js b/client/effects.js
index fc425a1..d2eeb74 100644
--- a/client/effects.js
+++ b/client/effects.js
@@ -134,6 +134,8 @@ Effects = (function() {
 
     Session.set('g_p1', g_p1);
     Session.set('g_p2', g_p2);
+
+    return g_palette;
   }
 
   function averageColor(id) {
diff --git a/client/templates/photos.html b/client/templates/photos.html
index 85af3a0..e844b44 100644
--- a/client/templates/photos.html
+++ b/client/templates/photos.html
@@ -10,6 +10,18 @@
         {{> photo}}
       {{/each}}
     </div>
+    <div class="dominants" style="display: none;">
+      <div class="dominant">
+        <h3>Dominant color #1</h3>
+        <div id="dominant1" class="color"></div>
+        <h5>#AABBCC</h5>
+      </div>
+      <div class="dominant">
+        <h3>Dominant color #2</h3>
+        <div id="dominant2" class="color"></div>
+        <h5>#AABBCC</h5>
+      </div>
+    </div>
     <canvas id="canvas-all" style="display: none; height: 150px; width: 150px;"></canvas>
   </div>
 </template>