feat: application title bar and sidebar (#142)

- Addition of stateful components Titlebar and SideBar
- Basic Functionality to make sure state management works as intended

Desktop/src/main/main.ts

@@ -38,16 +38,16 @@ let dataFromParser = {};
 console.log('---------------------------');
 console.log(path.resolve(__dirname, 'test.yaml'));
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-ipcMain.on('editor/visualizeRequest', (event, scenario, format) => {
+ipcMain.handle('editor/visualizeRequest', (event, scenario, format) => {
   let scenarioParsed = {};
   if (format === 'json') scenarioParsed = JSON.parse(scenario);
   else scenarioParsed = yamlParser.load(scenario);
 
   console.log(scenarioParsed);
-  Object.assign(tempScenarioSave, { ...scenario });
+  Object.assign(tempScenarioSave, { ...scenarioParsed });
   parserAndGenerator(
-    path.resolve(__dirname, 'test.yaml'),
-    path.resolve(__dirname, 'temp.json')
+    path.resolve(__dirname, 'save.yaml'),
+    path.resolve(__dirname, 'save.json')
   )
     .then((res: any) => {
       dataFromParser = res;
@@ -59,17 +59,12 @@ ipcMain.on('editor/visualizeRequest', (event, scenario, format) => {
     });
 });
 
-ipcMain.on('editor/action', (_event, actionName) => {
+ipcMain.handle('editor/action', async (_event, actionName) => {
   const managerInstance = requestManager();
-  managerInstance
-    .createReqHandler(dataFromParser)
-    .then(() => {
-      managerInstance.startScenario(actionName);
-    })
-    .catch((err: any) => {
-      console.log(err);
-    });
-  console.log('Sending to manager');
+
+  await managerInstance.createReqHandler();
+
+  await managerInstance.startScenario(actionName);
 });
 
 if (process.env.NODE_ENV === 'production') {

Desktop/src/main/menu.js

@@ -0,0 +1,59 @@
+const { app, Menu } = require('electron');
+
+const isMac = process.platform === 'darwin';
+
+const template = [
+  {
+    label: 'File',
+    submenu: [isMac ? { role: 'close' } : { role: 'quit' }],
+  },
+  {
+    label: 'Edit',
+    submenu: [
+      { role: 'undo' },
+      { role: 'redo' },
+      { type: 'separator' },
+      { role: 'cut' },
+      { role: 'copy' },
+      { role: 'paste' },
+    ],
+  },
+  {
+    label: 'View',
+    submenu: [
+      { role: 'reload' },
+      { role: 'forcereload' },
+      { role: 'toggledevtools' },
+      { type: 'separator' },
+      { role: 'resetzoom' },
+      { role: 'zoomin' },
+      { role: 'zoomout' },
+      { type: 'separator' },
+      { role: 'togglefullscreen' },
+    ],
+  },
+  {
+    label: 'Window',
+    submenu: [{ role: 'minimize' }, { role: 'zoom' }],
+  },
+  {
+    role: 'help',
+    submenu: [
+      {
+        label: 'Learn More',
+        click: async () => {
+          // eslint-disable-next-line global-require
+          const { shell } = require('electron');
+          await shell.openExternal('https://electronjs.org');
+        },
+      },
+    ],
+  },
+];
+
+const MenuBuilder = Menu.buildFromTemplate(template);
+Menu.setApplicationMenu(MenuBuilder);
+
+module.exports = {
+  MenuBuilder,
+};

Desktop/src/main/renderer.js

@@ -0,0 +1,63 @@
+const { remote, ipcRenderer } = require('electron');
+
+function getCurrentWindow() {
+  return remote.getCurrentWindow();
+}
+
+function openMenu(x, y) {
+  ipcRenderer.send(`display-app-menu`, { x, y });
+}
+
+function minimizeWindow(browserWindow = getCurrentWindow()) {
+  if (browserWindow.minimizable) {
+    // browserWindow.isMinimizable() for old electron versions
+    browserWindow.minimize();
+  }
+}
+
+function maxUnmaxWindow(browserWindow = getCurrentWindow()) {
+  if (browserWindow.isMaximized()) {
+    browserWindow.unmaximize();
+  } else {
+    browserWindow.maximize();
+  }
+}
+
+function closeWindow(browserWindow = getCurrentWindow()) {
+  browserWindow.close();
+}
+
+function isWindowMaximized(browserWindow = getCurrentWindow()) {
+  return browserWindow.isMaximized();
+}
+
+window.addEventListener('DOMContentLoaded', () => {
+  const menuButton = document.getElementById('menu-btn');
+  const minimizeButton = document.getElementById('minimize-btn');
+  const maxUnmaxButton = document.getElementById('max-unmax-btn');
+  const closeButton = document.getElementById('close-btn');
+
+  menuButton.addEventListener('click', (e) => {
+    openMenu(e.x, e.y);
+  });
+
+  minimizeButton.addEventListener('click', (e) => {
+    minimizeWindow();
+  });
+
+  maxUnmaxButton.addEventListener('click', (e) => {
+    const icon = maxUnmaxButton.querySelector('i.far');
+
+    maxUnmaxWindow();
+    if (isWindowMaximized()) {
+      icon.classList.remove('fa-square');
+      icon.classList.add('fa-clone');
+    } else {
+      icon.classList.add('fa-square');
+      icon.classList.remove('fa-clone');
+    }
+  });
+  closeButton.addEventListener('click', (e) => {
+    closeWindow();
+  });
+});

Desktop/src/main/setup.ts

@@ -0,0 +1,71 @@
+import { ipcMain, BrowserWindow, WebContents } from 'electron';
+
+const setupEventListener = (
+  browserWindow: BrowserWindow,
+  sender: WebContents
+) => {
+  browserWindow.addListener('maximize', () => {
+    sender.send(
+      'electron-react-titlebar/maximunize/change',
+      true,
+      browserWindow.id
+    );
+  });
+  browserWindow.addListener('unmaximize', () => {
+    sender.send(
+      'electron-react-titlebar/maximunize/change',
+      false,
+      browserWindow.id
+    );
+  });
+};
+
+// eslint-disable-next-line import/prefer-default-export
+export const initialize = (): void => {
+  ipcMain.handle(
+    'electron-react-titlebar/initialize',
+    (event, browserWindowId): number | undefined => {
+      const browserWindow = browserWindowId
+        ? BrowserWindow.fromId(browserWindowId)
+        : BrowserWindow.fromWebContents(event.sender);
+      if (browserWindow) {
+        setupEventListener(browserWindow, event.sender);
+        return browserWindow.id;
+      }
+      return undefined;
+    }
+  );
+
+  ipcMain.on(
+    'electron-react-titlebar/maximumize/set',
+    (event, browserWindowId) => {
+      const browserWindow = browserWindowId
+        ? BrowserWindow.fromId(browserWindowId)
+        : BrowserWindow.fromWebContents(event.sender);
+      if (browserWindow?.isMaximizable()) {
+        if (browserWindow.isMaximized()) {
+          browserWindow.unmaximize();
+        } else {
+          browserWindow.maximize();
+        }
+      }
+    }
+  );
+
+  ipcMain.on(
+    'electron-react-titlebar/minimumize/set',
+    (event, browserWindowId) => {
+      const browserWindow = browserWindowId
+        ? BrowserWindow.fromId(browserWindowId)
+        : BrowserWindow.fromWebContents(event.sender);
+      browserWindow?.minimize();
+    }
+  );
+
+  ipcMain.on('electron-react-titlebar/close', (event, browserWindowId) => {
+    const browserWindow = browserWindowId
+      ? BrowserWindow.fromId(browserWindowId)
+      : BrowserWindow.fromWebContents(event.sender);
+    browserWindow?.close();
+  });
+};

Desktop/src/main/temp.json

@@ -0,0 +1,52 @@
+{
+  "version": "0.0.1",
+  "user-logs-on": {
+    "game/server/{serverId}/events/player/{playerId}/connect": {
+      "playerId": {
+        "min": 0,
+        "max": 2000
+      },
+      "serverId": {
+        "min": 0,
+        "max": 4
+      }
+    }
+  },
+  "user-gameLoop": {
+    "loop": {
+      "interval": 600,
+      "cycles": 5,
+      "game/server/{serverId}/events/player/{playerId}/hit": {
+        "serverId": "1",
+        "playerId": {
+          "regex": "^[\\w\\d]{1,22}$"
+        },
+        "payload": {
+          "crit": 125,
+          "apDamage": 30
+        }
+      },
+      "game/server/{serverId}/events/player/{playerId}/item/{itemId}/pickup": {
+        "serverId": "1",
+        "playerId": {
+          "regex": "^[\\w\\d]{1,22}$"
+        },
+        "itemId": {
+          "min": 0,
+          "max": 4
+        }
+      },
+      "game/server/{serverId}/events/player/{playerId}/chat": {
+        "serverId": "1",
+        "playerId": {
+          "regex": "^[\\w\\d]{1,22}$"
+        },
+        "payload": "well played m8"
+      }
+    }
+  },
+  "scenario-SimpleGame": [
+    "user-logs-on",
+    "user-gameLoop"
+  ]
+}

Desktop/src/main/tempScenarioSave.js

@@ -0,0 +1,94 @@
+/* eslint-disable */
+const fs = require('fs');
+const path = require('path');
+
+const cache = {};
+
+function autoSave(filename, onSave) {
+  const filepath = path.resolve(filename);
+
+  if (filepath in cache) {
+    return cache[filepath];
+  }
+
+  const object = read(filepath);
+  let changed = false;
+  let writing = false;
+
+  return (cache[filepath] = wrap(object, change));
+
+  function change() {
+    if (!changed) {
+      changed = true;
+
+      if (!writing) {
+        setImmediate(save);
+      }
+    }
+  }
+
+  function save() {
+    changed = false;
+    writing = true;
+
+    const json = JSON.stringify(object, null, 2);
+
+    if (typeof onSave === 'function') {
+      fs.writeFile(filepath, json, (err) => {
+        onSave(err);
+
+        if (changed) {
+          setImmediate(save);
+        } else {
+          writing = false;
+        }
+      });
+    } else {
+      fs.writeFileSync(filepath, json);
+    }
+  }
+}
+
+function wrap(o, change) {
+  const innerCache = {};
+
+  return new Proxy(o, {
+    set(o, prop, v) {
+      if (typeof v === 'object') {
+        if (innerCache[prop] !== v) {
+          change();
+        }
+      } else if (v !== o[prop]) {
+        change();
+      }
+
+      o[prop] = v;
+
+      if (innerCache.hasOwnProperty(prop)) {
+        delete innerCache[prop];
+      }
+
+      return true;
+    },
+    get(o, prop) {
+      if (o.hasOwnProperty(prop) && typeof o[prop] === 'object') {
+        if (prop in innerCache) {
+          return innerCache[prop];
+        }
+        return (innerCache[prop] = wrap(o[prop], change));
+      }
+      return o[prop];
+    },
+  });
+}
+
+function read(p) {
+  try {
+    const raw = fs.readFileSync(p);
+    return JSON.parse(raw);
+  } catch (err) {
+    return {};
+  }
+}
+
+module.exports = autoSave;