feat: add Avatar Toggle (twilio-labs#1081)

* (feat): Add Display Avatars toggle * Update party-mode.js
bbtbir · Oct 21, 2019 · 9afdad6 · 9afdad6
1 parent 2b51df0
commit 9afdad6
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 19 deletions.
diff --git a/assets/javascript/name-hover.js b/assets/javascript/name-hover.js
@@ -15,7 +15,7 @@ let currentName;
  */
 function pixelHover(event) {
   const node = event.target; // Get Node element of current target
-  const fill = node.style.fill; // Get fill style of node
+  const fill = node.style.fill || node.getAttribute('color'); // Get fill style of node
   const name = node.getAttribute('name'); // Check if attribute name is in node
 
   // Calculate top position and put in variable
@@ -25,7 +25,8 @@ function pixelHover(event) {
   let contributorName = document.getElementById('contributor-name');
 
   // If node is a rect element and has name attribute in it and the tooltip didn't exist yet
-  if (node.nodeName === 'rect' && name && !tooltip) {
+  // prettier-ignore
+  if ((node.nodeName === 'rect' || node.nodeName === 'image') && name && !tooltip) {
     currentName = name.replace(/ /g, '');
     const textName = document.createTextNode(`@${currentName}`);
     tooltip = document.createElement('div');
@@ -94,11 +95,17 @@ function styleElem(elem, style = {}) {
  * @param  {String} rgb String of rgb color
  */
 function getContrastYIQ(rgb) {
-  // Split rgb string into an array by ', '
-  const rgbS = rgb.substring(4, rgb.length - 1).split(', ');
-  const r = rgbS[0],
-    g = rgbS[1],
-    b = rgbS[2];
+  let r, g, b;
+  if (rgb.startsWith('#')) {
+    const hex = rgb.slice(1);
+    r = parseInt(hex.substring(0, 2), 16);
+    g = parseInt(hex.substring(2, 4), 16);
+    b = parseInt(hex.substring(4, 6), 16);
+  } else {
+    // Split rgb string into an array by ', '
+    const rgbS = rgb.substring(4, rgb.length - 1).split(', ');
+    [r, g, b] = rgbS;
+  }
   const yiq = (r * 299 + g * 587 + b * 114) / 1000;
   return yiq >= 128 ? true : false;
 }
diff --git a/assets/javascript/party-mode.js b/assets/javascript/party-mode.js
@@ -1,12 +1,19 @@
-// get All the pixels into an array
-const pixels = Array.from(
-  document.querySelectorAll('#pixel-canvas rect.pixel')
+const canvas = document.getElementById('pixel-canvas');
+const rects = Array.from(
+  document.querySelectorAll('#pixel-canvas .pixel-rect')
 );
+const images = Array.from(
+  document.querySelectorAll('#pixel-canvas .pixel-image')
+);
+// hide image-pixels on load
+images.forEach(image => image.remove());
+
+let showImages = false;
 
 // add additional 'x-start' and 'y-start' attributes
-pixels.forEach(p => {
-  p.setAttribute('x-start', p.getAttribute('x'));
-  p.setAttribute('y-start', p.getAttribute('y'));
+rects.forEach(rect => {
+  rect.setAttribute('x-start', rect.getAttribute('x'));
+  rect.setAttribute('y-start', rect.getAttribute('y'));
 });
 
 document.addEventListener('keydown', onKeyDown);
@@ -26,7 +33,8 @@ function onKeyDown(event) {
     t: twist,
     f: flip,
     v: vert,
-    w: walk
+    w: walk,
+    a: toggleImages
   };
   const f = keyMap[key];
   if (f) {
@@ -79,12 +87,34 @@ const w = ({ x, y }) => {
 };
 
 function transform(transformFunction) {
-  pixels.forEach((p, i) => {
+  rects.forEach((rect, i) => {
+    const image = images[i];
     const [x, y, xStart, yStart] = ['x', 'y', 'x-start', 'y-start'].map(j =>
-      Number(p.getAttribute(j))
+      Number(rect.getAttribute(j))
     );
     const [xNew, yNew] = transformFunction({ x, y, xStart, yStart, i });
-    p.setAttribute('x', xNew);
-    p.setAttribute('y', yNew);
+    rect.setAttribute('x', xNew);
+    rect.setAttribute('y', yNew);
+    image.setAttribute('x', xNew);
+    image.setAttribute('y', yNew);
   });
 }
+
+function toggleImages() {
+  showImages = !showImages;
+  if (showImages) {
+    rects.forEach(rect => rect.remove());
+    images.forEach(image => {
+      const name = image.getAttribute('name');
+      image.classList.remove('hidden');
+      image.setAttribute(
+        'xlink:href',
+        `//avatars.githubusercontent.com/${name}?size=20`
+      );
+      canvas.appendChild(image);
+    });
+  } else {
+    rects.forEach(rect => canvas.appendChild(rect));
+    images.forEach(image => image.remove());
+  }
+}
diff --git a/index.njk b/index.njk
@@ -60,14 +60,33 @@
           <button class="nes-btn" onClick="vert()">V-Flip (v)</button>
           <button class="nes-btn" onClick="walk()">Walk (w)</button>
           <button class="nes-btn" onClick="reset()">Reset (Esc)</button>
+          <button class="nes-btn" onClick="toggleImages()">Avatars (a)</button>
         </div>
       <section  id="canvas" class="nes-container with-title" aria-label="You are in the Pixel Art Canvas. Hover over a pixel to hear the github username who contributed it.">
         <div role="heading" aria-level="2" class="screenreader-only">Pixel Art Canvas</div>
         <svg id="pixel-canvas" viewbox="0 0 {{defaults.image.width * defaults.image.scale}} {{defaults.image.height * defaults.image.scale}}">
           <rect x="0" y="0" width="100%" height="100%" style="fill: {{defaults.image.background}}"/>
           {% for pixel in pixels.data %}
             {% if pixel.color %}
-              <rect class="pixel" x="{{pixel.x * defaults.image.scale}}" y="{{(defaults.image.height - pixel.y - 1) * defaults.image.scale}}" width="{{defaults.image.scale}}" height="{{defaults.image.scale}}" style="fill: {{pixel.color}}" name="{% if pixel.username %} {{pixel.username}} {% endif %}"/> 
+              <rect 
+                class="pixel-rect pixel" 
+                x="{{pixel.x * defaults.image.scale}}" 
+                y="{{(defaults.image.height - pixel.y - 1) * defaults.image.scale}}" 
+                width="{{defaults.image.scale}}" 
+                height="{{defaults.image.scale}}" 
+                style="fill: {{pixel.color}}" 
+                name="{% if pixel.username %}{{pixel.username}} {% endif %}"
+              /> 
+              <image 
+                class="pixel-image pixel hidden"
+                x="{{pixel.x * defaults.image.scale}}" 
+                y="{{(defaults.image.height - pixel.y - 1) * defaults.image.scale}}" 
+                width="{{defaults.image.scale}}" 
+                height="{{defaults.image.scale}}"
+                xlink:href="#" 
+                color="{{pixel.color}}" 
+                name="{% if pixel.username %}{{pixel.username}}{% endif %}" 
+              /> 
             {% elif pixel.tileName %}
               <image xlink:href="assets/tiles/{{pixel.tileName}}.png" width="{{defaults.image.scale * 5}}" height="{{defaults.image.scale * 5}}" x="{{pixel.x * defaults.image.scale}}" y="{{(defaults.image.height - pixel.y - 5) * defaults.image.scale }}" name="{% if pixel.username %}{{pixel.username}}{% endif %}"/>
             {% endif %}

diff --git a/styles/main.css b/styles/main.css
@@ -153,3 +153,7 @@ p code {
 .pixel {
   transition: all 0.4s ease-in-out;
 }
+
+.hidden {
+  display: none;
+}