From 4b3d812031dd07c251623d7155159115e99d2671 Mon Sep 17 00:00:00 2001
From: Ben Beltran <ben@nsovocal.com>
Date: Mon, 28 Aug 2017 22:54:26 -0500
Subject: Commit everything hastily

I left evertything until the last minute, so I didn't have a chance
to do it nicely. SORRY.
---
 lib/components/status.js        |  16 ++++
 lib/components/wave_renderer.js | 157 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 173 insertions(+)
 create mode 100644 lib/components/status.js
 create mode 100644 lib/components/wave_renderer.js

(limited to 'lib/components')

diff --git a/lib/components/status.js b/lib/components/status.js
new file mode 100644
index 0000000..4a8b099
--- /dev/null
+++ b/lib/components/status.js
@@ -0,0 +1,16 @@
+import Vue from 'vue';
+import DataService from '../services/data';
+
+const internals = {};
+
+export default Vue.component('posts', {
+  template: '<div class="status-widget">' +
+      '<transition name="fade">' +
+      '<div v-if="state === 0" class="waiting-message">Waiting</div>' +
+      '<div v-if="state === 2 && !winner" class="no-winner">Could not read you</div>' +
+      '<div v-if="state === 2 && winner" class="winner" v-bind:class="[winner]">{{winner}}</div>' +
+      '</transition>' +
+      '</div>',
+
+  data: DataService.data
+});
diff --git a/lib/components/wave_renderer.js b/lib/components/wave_renderer.js
new file mode 100644
index 0000000..c9cadc0
--- /dev/null
+++ b/lib/components/wave_renderer.js
@@ -0,0 +1,157 @@
+import Vue from 'vue';
+import DataService from '../services/data';
+
+const internals = {
+
+  // Constants
+
+  kColors: {
+    donatello: 'purple',
+    leonardo: 'blue',
+    michaelangelo: 'orange',
+    raphael: 'red'
+  },
+  kFrequency: 100,
+  kGradientFade: 0.1,
+  kMinValue: 25,
+  kMaxValue: 100,
+  kRandomJitter: 10,
+  kTargetFPS: 60,
+
+  // Utility functions
+
+  scale(value, min, max) {
+
+    return ((value - min) / (max - min)) * (internals.kMaxValue - internals.kMinValue) - internals.kMinValue;
+  }
+};
+
+export default Vue.component('posts', {
+  template: '<transition name="fade">' +
+    '<canvas v-show="state === 1" class="wave-renderer"></canvas>' +
+    '</transition>',
+
+  data: DataService.data,
+
+  computed: {
+
+    // Convert from the min / max value in the measurement to a
+    // predefined min value between 0 and 100 (see kMinValue and
+    // kMaxValue for actual values)
+
+    scaledAverages() {
+
+      const keys = Object.keys(this.runningAverages);
+
+      const averages = keys.reduce((averages, averageCategory) => {
+
+        const runningAverage = this.runningAverages[averageCategory];
+        averages[averageCategory] = runningAverage.average;
+        return averages;
+      }, {});
+
+      const max = Math.max(...Object.values(averages));
+      const min = Math.min(...Object.values(averages));
+
+      const scaledAverages = Object.keys(averages).reduce((scaledAverages, averageCategory) => {
+
+        const value = averages[averageCategory];
+        scaledAverages[averageCategory] = internals.scale(value, min, max);
+        return scaledAverages;
+      }, {});
+
+      return scaledAverages;
+    }
+  },
+
+  methods: {
+    onResize() {
+
+      this.$el.width = window.innerWidth;
+      this.$el.height = window.innerHeight;
+    }
+  },
+
+  // Initiates the animation loop
+
+  mounted() {
+
+    // Make sure we resize, do an initial sizing
+
+    window.addEventListener('resize', this.onResize.bind(this));
+    this.onResize();
+
+    // Start the whole animation (Sorry it's a mess)
+
+    const canvas = this.$el;
+
+    const context = canvas.getContext('2d');
+    const interval = 1000 / internals.kTargetFPS;
+
+    let lastTimestamp = 0;
+
+    const animationHandler = (timestamp) => {
+
+      window.requestAnimationFrame(animationHandler);
+      const delta = timestamp - lastTimestamp;
+
+      if (delta > interval) {
+
+        const keys = Object.keys(this.scaledAverages);
+        const values = Object.values(this.scaledAverages);
+        const segments = keys.length;
+        const period = canvas.width / segments;
+
+        const fillGradient = context.createLinearGradient(0, 0, canvas.width, 0);
+        const gradientBandWidth = 1 / segments;
+
+        // Position the drawing cursor left-center of screen
+
+        context.clearRect(0, 0, canvas.width, canvas.height);
+        context.beginPath();
+        context.moveTo(0, canvas.height);
+        context.lineTo(0, canvas.height / 2);
+
+        // Iterate over the segments
+
+        for (let currentSegment = 0; currentSegment < segments; ++currentSegment) {
+          const segmentStart = currentSegment * period;
+          const segmentEnd = currentSegment + period;
+
+          const category = keys[currentSegment];
+          const magnitude = values[currentSegment];
+          const segmentHeight = Math.round(Math.random() * internals.kRandomJitter + magnitude * (canvas.height / 2) / 100);
+
+          // Calculate the gradient using the correct color according to
+          // scale
+
+          const color = internals.kColors[category] || 'black';
+          let currentGradientPosition = currentSegment * gradientBandWidth + internals.kGradientFade;
+          fillGradient.addColorStop(currentGradientPosition, color);
+          currentGradientPosition = (currentSegment + 1) * gradientBandWidth - internals.kGradientFade;
+          fillGradient.addColorStop(currentGradientPosition, color);
+
+          // This draws the sine wave
+
+          for (let angle = 0; angle < 180; ++angle) {
+            const currentPixel = segmentStart + angle * period / 180;
+            const currentAngle = angle + 180 * (currentSegment % 2);
+            const currentRadians = currentAngle * Math.PI / 180;
+            const currentHeight = segmentHeight * Math.sin(internals.kFrequency * currentRadians);
+
+            context.lineTo(currentPixel, currentHeight + canvas.height / 2);
+          }
+        }
+
+        context.lineTo(canvas.width, canvas.height / 2);
+        context.lineTo(canvas.width, canvas.height);
+        context.fillStyle = fillGradient;
+        context.fill();
+
+        lastTimestamp = timestamp;
+      }
+    };
+
+    window.requestAnimationFrame(animationHandler);
+  }
+});
-- 
cgit