add overlay base

skarab42 · Nov 14, 2020 · b1347c3 · b1347c3
1 parent f156c2a
commit b1347c3
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 20 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -3,22 +3,22 @@ module.exports = {
     browser: true,
     commonjs: true,
     es2021: true,
-    node: true
+    node: true,
   },
   plugins: ["svelte3"],
   extends: "eslint:recommended",
   overrides: [
     {
       files: ["**/*.svelte"],
-      processor: "svelte3/svelte3"
-    }
+      processor: "svelte3/svelte3",
+    },
   ],
   parserOptions: {
     ecmaVersion: 12,
-    sourceType: "module"
+    sourceType: "module",
   },
   rules: {
     "no-console": "warn",
-    "no-debugger": "warn"
-  }
+    "no-debugger": "warn",
+  },
 };
diff --git a/app/client/overlay.html b/app/client/overlay.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en" class="h-screen overflow-hidden subpixel-antialiased">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>overlay - marv</title>
+    <link rel="icon" href="icon.ico" />
+  </head>
+  <body>
+    <main></main>
+    <script type="module" src="js/overlay.js"></script>
+  </body>
+</html>
diff --git a/app/server/libs/actions/push.js b/app/server/libs/actions/push.js
@@ -1,5 +1,6 @@
 const socket = require("../socket.io");
 const { v4: uuid } = require("uuid");
+const get = require("./get");
 
 const io = socket();
 
@@ -8,13 +9,11 @@ let lock = false;
 
 function sendAction(action) {
   io.emit("actions.start", action);
-
   return new Promise((resolve, reject) => {
-    setTimeout(() => {
-      if (Math.random() > 0.5) resolve(action);
-      else reject(new Error("Oops"));
+    io.__overlaySocket.emit("actions.start", action, ({ error }) => {
+      error ? reject({ error, action }) : resolve(action);
       io.emit("actions.end", action);
-    }, 2000);
+    });
   });
 }
 
@@ -43,14 +42,14 @@ function processQueue() {
     });
 }
 
-function createAction(action) {
+function createAction(action, data) {
   return {
     id: uuid(),
     type: null,
     widgetId: null,
     trigger: "immediat",
-    data: null,
     ...action,
+    data,
   };
 }
 
@@ -66,7 +65,8 @@ function pushAction(action) {
 }
 
 module.exports = function push(action) {
-  action = createAction(action);
+  const { items } = get(action.widgetId);
+  action = createAction(action, items);
 
   io.emit("actions.push", action);
 

diff --git a/app/server/libs/socket.io/index.js b/app/server/libs/socket.io/index.js
@@ -14,9 +14,19 @@ module.exports = (server) => {
 
   io = socket(server, options);
 
-  io.on("connection", (socket) => {
-    socket.use(require("./api")(socket));
-    socket.use(require("./unhandledEvent"));
+  io.on("connection", (clientSocket) => {
+    clientSocket.use(require("./api")(clientSocket));
+    clientSocket.use(require("./unhandledEvent"));
+  });
+
+  // TODO extract this shit !!!!
+  const adminNamespace = io.of("/overlay");
+
+  adminNamespace.on("connection", (overlaySocket) => {
+    io.__overlaySocket = overlaySocket;
+    overlaySocket.on("disconnect", () => {
+      io.__overlaySocket = null;
+    });
   });
 
   return io;

diff --git a/overlay-src/overlay.js b/overlay-src/overlay.js
@@ -0,0 +1,13 @@
+import io from "socket.io-client";
+
+const socket = io("/overlay", {
+  transports: ["websocket"],
+  upgrade: false,
+});
+
+socket.on("actions.start", (action, cb) => {
+  setTimeout(() => {
+    if (Math.random() > 0.5) cb({ error: "Fake error message", action });
+    else cb({ success: true, action });
+  }, 2000);
+});
diff --git a/rollup.config.js b/rollup.config.js
@@ -10,21 +10,22 @@ import css from "rollup-plugin-css-only";
 
 const watch = process.env.ROLLUP_WATCH;
 
-const inputDir = "client-src";
+const clientDir = "client-src";
+const overlayDir = "overlay-src";
 const publicDir = "app/client";
 const jsDir = `${publicDir}/js`;
 const cssDir = `${publicDir}/css`;
 
 export default {
-  input: `${inputDir}/index.js`,
+  input: [`${clientDir}/index.js`, `${overlayDir}/overlay.js`],
   output: {
     format: "es",
     dir: jsDir,
     sourcemap: true,
   },
   plugins: [
     alias({
-      entries: [{ find: "@", replacement: `${__dirname}/client-src` }],
+      entries: [{ find: "@", replacement: `${__dirname}/${clientDir}` }],
     }),
     resolve({ browser: true, dedupe: ["svelte"] }),
     commonjs(),