Add deck structure and basic trigger

public/javascripts/index.js

@@ -1,5 +1,43 @@
 const socket = io();
+const deck = document.getElementById("deck");
 
-socket.on("connected", socket => {
+socket.on("connected", () => {
     console.log("Connected !");
+    socket.emit("getDeck");
+});
+
+socket.on("getDeck", data => {
+    deck.innerHTML = "";
+
+    for (let x = 0; x < data.x; x++) {
+        const r = document.createElement("div");
+        r.id = "r" + x;
+        for (let y = 0; y < data.y; y++) {
+            const c = document.createElement("div");
+            c.id = r.id+"c"+y;
+            r.insertAdjacentElement("beforeend", c);
+        }
+        deck.insertAdjacentElement("beforeend", r);
+    }
+
+    for (const [x, cols] of Object.entries(data.rows))
+        for (const [y, col] of Object.entries(cols)) {
+            const e = document.getElementById(`r${x}c${y}`);
+            if (e) {
+                if (col.image)
+                    e.insertAdjacentHTML("beforeend", `<img src="${col.image}" alt="${col.text}">`);
+                else if (col.text)
+                    e.insertAdjacentHTML("beforeend", `<p>${col.text}</p>`);
+
+                e.addEventListener("click", ev => {
+                    ev.stopPropagation();
+                    socket.emit("trigger", [x, y]);
+                })
+            }
+        }
+});
+
+socket.on("trigger", data => {
+    if (data.error)
+        alert(data.error)
 });

public/stylesheets/style.sass

@@ -1,7 +1,24 @@
 //noinspection CssUnknownTarget
 @import "materialize-css/sass/materialize.scss"
 
-#deck>.row>.col
+#deck p
+  font-size: 1.3vw
+
+#deck
+  display: flex
+  align-items: center
+  justify-content: center
+
+#deck>div>div
   border: black 3px solid
   margin: 0.3em
   text-align: center
+  height: 15vh
+  width: 15vh
+  display: flex
+  align-items: center
+  justify-content: center
+
+#deck>div>div>img
+  max-height: 15vh
+  max-width: 15vh

sockets/getDeck.js

@@ -0,0 +1,5 @@
+module.exports = socket => {
+    return () => {
+        socket.emit("getDeck", require("../db.json").deck);
+    }
+};

sockets/index.js

@@ -1,4 +1,6 @@
 module.exports = socket => {
+    socket.on("getDeck", require("./getDeck")(socket));
+    socket.on("trigger", require("./trigger")(socket));
     console.log("New connection !");
     socket.emit("connected");
 };

sockets/trigger.js

@@ -0,0 +1,26 @@
+const db = require("../db.json");
+
+module.exports = socket => {
+    return data => {
+        let err = null;
+        if (data && Array.isArray(data) && data.length === 2) {
+            const el = db.deck.rows[data[0]][data[1]];
+            if (el) {
+                try {
+                    const type = require("../types/" + el.type);
+                    type.trigger(el, socket);
+                } catch (exc) {
+                    if (exc.code === "MODULE_NOT_FOUND")
+                        err = "typeNotFound";
+                    else
+                        err = "unknown";
+                }
+            } else {
+                err = "notFound";
+            }
+        } else
+            err = "badData";
+        if (err)
+            socket.emit("trigger", {error: err})
+    }
+};

types/execCommand.js

@@ -0,0 +1,8 @@
+const { exec } = require('child_process');
+
+module.exports.trigger = el => {
+    exec(el.options, (err) => {
+        if (err)
+            console.error(err);
+    });
+};

views/index.pug

@@ -1,5 +1,5 @@
 extends layout
 
 block content
+  h1.center OpenDeck
   .container#deck
-    h1.center OpenDeck