feat: create first version of keypress-shower

inomdzhon · Apr 25, 2020 · d9cea57 · d9cea57
1 parent c88c682
commit d9cea57
Show file tree

Hide file tree

Showing 17 changed files with 494 additions and 31 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1 +1,4 @@
-/node_modules
+# Specific system files should be ignored by user in global `.gitignore`.
+# More info here https://gist.github.com/subfuzion/db7f57fff2fb6998a16c
+
+/node_modules
diff --git a/assets/dark/icon-active.png b/assets/dark/icon-active.png
diff --git a/assets/dark/[email protected] b/assets/dark/[email protected]
diff --git a/assets/dark/icon.png b/assets/dark/icon.png
diff --git a/assets/dark/[email protected] b/assets/dark/[email protected]
diff --git a/assets/light/icon-active.png b/assets/light/icon-active.png
diff --git a/assets/light/[email protected] b/assets/light/[email protected]
diff --git a/assets/light/icon.png b/assets/light/icon.png
diff --git a/assets/light/[email protected] b/assets/light/[email protected]
diff --git a/client/constants.js b/client/constants.js
@@ -0,0 +1,82 @@
+module.exports.humanizedKeyCodes = new Map([
+  [41, '`'],
+  [2, '1'],
+  [3, '2'],
+  [4, '3'],
+  [5, '4'],
+  [6, '5'],
+  [7, '6'],
+  [8, '7'],
+  [9, '8'],
+  [10, '9'],
+  [11, '0'],
+  [12, '-'],
+  [13, '+'],
+
+  [16, 'q'],
+  [17, 'w'],
+  [18, 'e'],
+  [19, 'r'],
+  [20, 't'],
+  [21, 'y'],
+  [22, 'u'],
+  [23, 'i'],
+  [24, 'o'],
+  [25, 'p'],
+  [26, '['],
+  [27, ']'],
+  [43, '\\'],
+
+  [30, 'a'],
+  [31, 's'],
+  [32, 'd'],
+  [33, 'f'],
+  [34, 'g'],
+  [35, 'h'],
+  [36, 'j'],
+  [37, 'k'],
+  [38, 'l'],
+  [39, ';'],
+  [40, '\''],
+
+  [44, 'z'],
+  [45, 'x'],
+  [46, 'c'],
+  [47, 'v'],
+  [48, 'b'],
+  [49, 'n'],
+  [50, 'm'],
+  [51, ','],
+  [52, '.'],
+  [53, '/'],
+
+  [59, 'f1'],
+  [60, 'f2'],
+  [61, 'f3'],
+  [62, 'f4'],
+  [63, 'f5'],
+  [64, 'f6'],
+  [65, 'f7'],
+  [66, 'f8'],
+  [67, 'f9'],
+  [68, 'f10'],
+  [87, 'f11'],
+  [88, 'f12'],
+
+  [1, 'esc'],
+  [14, '⌫'], // delete
+  [15, 'tab'],
+  [29, '⌃'], // ctrl
+  [56, '⌥'], // alt
+  [57, '␣'], // space
+  [42, '⇧'], // shift
+  [54, 'right⇧'], // rshift
+  [28, '⏎︎'], // enter
+  [3675, '⌘'], // cmd
+  [3676, 'right⌘'], // cmd
+  [3640, 'right⌥'], // ralt
+  [57416, '↑'], // up
+  [57424, '↓'], // down
+  [57419, '←'], // left
+  [57421, '→'], // right
+]);
diff --git a/client/index.css b/client/index.css
@@ -0,0 +1,47 @@
+body {
+  margin: 0;
+  width: 100vw;
+  height: 100vh;
+}
+
+.keypress {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  padding: 2vmax 1vmax;
+  width: 100%;
+  text-align: center;
+  box-sizing: border-box;
+}
+
+.keypress__item {
+  padding: 1vmax;
+}
+
+.keypress__item_type_plus {
+  padding: 0;
+}
+
+.keypress-item {
+  padding: 1vmax;
+  font-family: Arial, -apple-system, sans-serif;
+  font-weight: 700;
+  font-size: 4vmax;
+  line-height: 1;
+  text-transform: uppercase;
+  color: #fff;
+  border-radius: 0.5vmax;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.keypress-item-plus {
+  font-family: Arial, -apple-system, sans-serif;
+  font-weight: 700;
+  font-size: 4vmax;
+  line-height: 1;
+  color: #fff;
+}
diff --git a/client/index.html b/client/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Keypress Shower</title>
+  <!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag -->
+  <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';"/>
+  <link rel="stylesheet" href="./index.css">
+</head>
+<body>
+
+<div id="root" class="keypress"></div>
+
+<template id="keypress-item">
+  <div class="keypress__item">
+    <div class="keypress-item"></div>
+  </div>
+</template>
+
+<template id="keypress-item-plus">
+  <div class="keypress__item keypress__item_type_plus">
+    <div class="keypress-item-plus">+</div>
+  </div>
+</template>
+
+<script type="text/javascript" src="./index.js"></script>
+
+</body>
+</html>
diff --git a/client/index.js b/client/index.js
@@ -0,0 +1,37 @@
+const { ipcRenderer } = require('electron');
+const { humanizedKeyCodes } = require('./constants.js');
+
+ipcRenderer.on('keydown', (event, message) => {
+  computeKeyPressed(message.type, message.keycode);
+});
+
+ipcRenderer.on('keyup', (event, message) => {
+  computeKeyPressed(message.type, message.keycode);
+});
+
+const pressedKeys = new Map();
+
+function computeKeyPressed(type, keyCode) {
+  switch (type) {
+    case 'keydown':
+      pressedKeys.set(keyCode, humanizedKeyCodes.get(keyCode));
+      break;
+    case 'keyup':
+      pressedKeys.delete(keyCode);
+      break;
+  }
+
+  renderKeysPressed();
+}
+
+const elemRoot = document.getElementById('root');
+
+function renderKeysPressed() {
+  const result = [];
+
+  pressedKeys.forEach((value) => {
+    result.push(`<div class="keypress__item"><div class="keypress-item">${value}</div></div>`);
+  });
+
+  elemRoot.innerHTML = result.join(`<div class="keypress__item keypress__item_type_plus"><div class="keypress-item-plus">+</div></div>`);
+}
diff --git a/index.html b/index.html
diff --git a/main.js b/main.js
@@ -1,17 +1,33 @@
-const { app, BrowserWindow } = require('electron')
-
-function createWindow () {
-  // Создаем окно браузера.
-  let win = new BrowserWindow({
-    width: 800,
-    height: 600,
-    webPreferences: {
-      nodeIntegration: true
-    }
-  })
-
-  // и загрузить index.html приложения.
-  win.loadFile('index.html')
+/*
+ * TODO
+ *  - Hide App in Mission Control
+ */
+
+// libs
+const { app } = require('electron');
+
+// modules
+const { AppController } = require('./server/AppController.js');
+const { BrowserWindowController } = require('./server/BrowserWindowController.js');
+
+let appController = null;
+
+function handleAppReady() {
+  appController = new AppController(new BrowserWindowController('./client/index.html'));
+
+  appController.onQuit(() => {
+    appController.stop();
+    app.exit(0);
+  });
+
+  appController.start();
+}
+
+function handleAppWindowAllClosed(event) {
+  // Hook for prevent app quit.
+  event.preventDefault();
 }
 
-app.whenReady().then(createWindow)
+// app.dock.hide();
+app.once('ready', handleAppReady);
+app.on('window-all-closed', handleAppWindowAllClosed);