Added text, changed colours, fixed bugs

index.js

@@ -2,7 +2,7 @@
 require('electron-reload')(__dirname);
 
 const {app, BrowserWindow, ipcMain} = require("electron");
-// const dbus = new (require("./dbus.js"))();
+const dbus = new (require("./dbus.js"))();
 
 process.title = "streamdeck-editor";
 
@@ -43,41 +43,41 @@ app.on('activate', function () {
 });
 
 
-// ipcMain.on("get-deck-info", (event) => {
-//     dbus.getDeckInfo((info) => {
-//         event.reply("deck-info", info);
-//     });
-//     dbus.listenToPage(page => {
-//         event.reply("page-updated", page);
-//     });
-// });
-//
-// ipcMain.on('get-config', (event) => {
-//     dbus.getConfig((config) => {
-//         event.reply("config", config);
-//     })
-// });
-//
-// ipcMain.on('set-config', (event, arg) => {
-//     dbus.setConfig(arg, (status) => {
-//         event.reply("status", status);
-//     })
-// });
-//
-// ipcMain.on("reload", (event) => {
-//     dbus.reload((status) => {
-//         event.reply("reload", status);
-//     })
-// });
-//
-// ipcMain.on("set-page", (event, arg) => {
-//     dbus.setPage(arg, status => {
-//         event.reply("page-set", status);
-//     })
-// });
-//
-// ipcMain.on("commit-config", (event, arg) => {
-//     dbus.commitConfig(status => {
-//         event.reply("config-committed", status);
-//     })
-// });
+ipcMain.on("get-deck-info", (event) => {
+    dbus.getDeckInfo((info) => {
+        event.reply("deck-info", info);
+    });
+    dbus.listenToPage(page => {
+        event.reply("page-updated", page);
+    });
+});
+
+ipcMain.on('get-config', (event) => {
+    dbus.getConfig((config) => {
+        event.reply("config", config);
+    })
+});
+
+ipcMain.on('set-config', (event, arg) => {
+    dbus.setConfig(arg, (status) => {
+        event.reply("status", status);
+    })
+});
+
+ipcMain.on("reload", (event) => {
+    dbus.reload((status) => {
+        event.reply("reload", status);
+    })
+});
+
+ipcMain.on("set-page", (event, arg) => {
+    dbus.setPage(arg, status => {
+        event.reply("page-set", status);
+    })
+});
+
+ipcMain.on("commit-config", (event, arg) => {
+    dbus.commitConfig(status => {
+        event.reply("config-committed", status);
+    })
+});

resources/css/app.css

@@ -7,22 +7,54 @@ html, body {
 }
 
 body {
-    @apply bg-gray-700 text-gray-200;
+    @apply bg-darker text-gray-200;
 }
 
 select, input, button {
     @apply block bg-gray-100 text-gray-600 p-1 m-1 my-2 rounded
 }
 
+input {
+    @apply px-2;
+}
+
+#pages {
+    width: -webkit-fill-available;
+    @apply h-64
+}
+
+#pages::-webkit-scrollbar {
+    @apply hidden;
+}
+
 button {
-    @apply bg-blue-900 text-white p-2 text-sm
+    @apply bg-accent text-white p-2 text-sm
 }
 
 .deck-table {
+    @apply hidden;
+}
 
+.deck-table.active {
+    @apply table;
 }
 
 .deck-table td {
-    width: 72px; height: 72px;
-    @apply inline-block m-2 bg-gray-600 rounded shadow shadow-inner;
+    width: 72px;
+    height: 72px;
+    background-size: 72px 72px;
+    @apply inline-block m-2 bg-darkest rounded shadow shadow-inner inline-flex justify-center align-middle cursor-pointer;
+}
+
+.deck-table td div {
+    @apply inline-flex justify-center align-middle cursor-pointer select-none;
+}
+
+.selected {
+    @apply border-accent border border-collapse
+}
+
+svg {
+    stroke-width: 0.5;
+    @apply font-bold font-sans w-full stroke-black fill-white
 }

tailwind.config.js

@@ -1,6 +1,19 @@
 module.exports = {
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        accent: "#c33",
+        dark: "#444",
+        darker: "#333",
+        darkest: "#451111"
+      },
+      stroke: {
+        black: "#000"
+      },
+      fill: {
+        white: "#fff"
+      }
+    },
 },
   variants: {},
   plugins: []