Add basic frontend animation

manifest.json

@@ -5,7 +5,7 @@
   "permissions": ["storage", "activeTab"],
   "background": {
     "scripts": ["dist/background/index.js"],
-    "persistent": false
+    "persistent": true
   },
   "content_scripts": [
     {

package.json

@@ -5,10 +5,10 @@
   "main": "background.js",
   "scripts": {
     "clean": "rm -rf dist/background & rm -rf dist/frontend",
-    "serve": "parcel watch src/background/index.js --out-dir dist/background & parcel watch src/frontend/index.js --out-dir dist/frontend",
+    "serve": "parcel watch src/**/* --out-dir dist/background & parcel watch src/frontend/index.js --out-dir dist/frontend",
     "build:back": "parcel build src/background/index.js --out-dir dist/background",
     "build:front": "parcel build src/frontend/index.js --out-dir dist/frontend",
-    "build": "npm run clean && npm run build:back & npm run build:front",
+    "build": "npm run clean && npm run build:back && npm run build:front",
     "package": "npm run build && zip -r dii-hackathon-extension.zip dist/ manifest.json"
   },
   "repository": {
@@ -23,6 +23,7 @@
   },
   "homepage": "https://github.com/dennisschoepf/dii-hackathon-extension#readme",
   "devDependencies": {
+    "animejs": "^3.2.1",
     "dotenv": "^8.2.0",
     "mqtt": "4.1.0",
     "parcel": "^1.12.4"

src/background/api.js

@@ -12,6 +12,8 @@ const mqttOptions = {
 const client = mqtt.connect("mqtt://io.adafruit.com", mqttOptions);
 
 export function subscribeToAllSensors({ onHeartbeat, onTilt }) {
+  console.log(process.env.AIO_USERNAME);
+
   client.on("connect", () => {
     client.subscribe(mqttHeartbeatTopic);
     client.subscribe(mqttTiltTopic);

src/background/index.js

@@ -2,9 +2,9 @@ import { subscribeToAllSensors } from "./api";
 import dotenv from "dotenv";
 import { storeValue } from "./storage";
 
-dotenv.config();
-
 chrome.runtime.onInstalled.addListener(() => {
+  dotenv.config();
+
   subscribeToAllSensors({
     onHeartbeat: (heartbeatData) => storeValue("heartbeat", heartbeatData),
     onTilt: (tiltData) => storeValue("tilt", tiltData),

src/frontend/animation.js

@@ -0,0 +1,52 @@
+import anime from "animejs";
+
+export function setupStyles() {
+  const style = document.createElement("style");
+  style.innerHTML = `
+    .heartbeat-wrapper {
+      z-index: 9999;
+      position: fixed;
+      bottom: 120px;
+      width: 100vw;
+      display: flex;
+      justify-content: space-between;
+    }
+
+    .heartbeat-wrapper > .el {
+      height: 7px;
+      width: 7px;
+      border-radius: 50%;
+      background-color: #E02D25;
+      opacity: 0.75;
+    }
+  `;
+  document.head.appendChild(style);
+}
+
+export function setupHeartbeatElement() {
+  console.log("Start creation of heartbeat element");
+
+  const wrapper = document.createElement("div");
+  wrapper.classList.add("heartbeat-wrapper");
+
+  for (let i = 0; i < 120; i++) {
+    const el = document.createElement("div");
+    el.classList.add("el");
+    wrapper.appendChild(el);
+  }
+
+  document.body.appendChild(wrapper);
+}
+
+export function animate() {
+  return anime({
+    targets: ".heartbeat-wrapper .el",
+    keyframes: [{ translateY: 15 }, { translateY: -60 }, { translateY: 0 }],
+    duration: 1000,
+    easing: "cubicBezier(.1,1.42,.85,.09)",
+    delay: anime.stagger(100, {
+      start: 500,
+    }),
+    loop: 3,
+  });
+}

src/frontend/index.js

@@ -1,23 +1,19 @@
-const testEl = document.createElement("div");
-testEl.style["position"] = "fixed";
-testEl.style["top"] = "0";
-testEl.style["left"] = "0";
-testEl.style["z-index"] = "1000";
-testEl.style["background-color"] = "red";
-document.body.appendChild(testEl);
+import { setupHeartbeatElement, setupStyles, animate } from "./animation";
+
+const started = false;
+const timeElapsed = setupStyles();
+setupHeartbeatElement();
 
 chrome.storage.onChanged.addListener((changes, namespace) => {
   for (let key in changes) {
     const newValue = changes[key];
 
     if (key === "heartbeat") {
-      console.log("heartbeat", newValue);
-      testEl.innerHTML += `\nNew heartbeat: ${JSON.stringify(newValue)}`;
-    }
+      const animation = animate();
 
-    if (key === "tilt") {
-      console.log("tilt", newValue);
-      testEl.innerHTML += `\nNew tilt: ${JSON.stringify(newValue)}`;
+      if (started) {
+        animation.restart();
+      }
     }
   }
 });