initial crosshair app

lacymorrow · Oct 5, 2019 · b2a8a0e · b2a8a0e
1 parent 878065d
commit b2a8a0e
Show file tree

Hide file tree

Showing 12 changed files with 262 additions and 52 deletions.
diff --git a/config.js b/config.js
@@ -3,6 +3,6 @@ const Store = require('electron-store');
 
 module.exports = new Store({
 	defaults: {
-		favoriteAnimal: '🦄'
+		crosshair: 'starburst'
 	}
 });
diff --git a/index.css b/index.css
@@ -3,6 +3,7 @@ body {
 	padding: 0;
 	margin: 0;
 	background: transparent;
+	overflow: hidden;
 }
 
 /* Use OS default fonts */
@@ -23,21 +24,73 @@ body {
 	font-feature-settings: 'liga', 'clig', 'kern';
 }
 
-header {
+::selection {
+	background: transparent;
+	color:inherit;
+}
+
+.container {
+	overflow: hidden;
+	position: relative;
+	background: none;
+	border-radius: 5px;
+	width: 100%;
+	height: 100%;
+}
+
+.background {
+	border-radius: 5px;
 	position: absolute;
-	width: 500px;
-	height: 250px;
-	top: 50%;
-	left: 50%;
-	margin-top: -125px;
-	margin-left: -250px;
-	text-align: center;
-}
-
-header h1 {
-	font-size: 60px;
-	font-weight: 200;
-	margin: 0;
-	padding: 0;
-	opacity: 0.7;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	z-index: -1;
+}
+.draggable .background {
+	background: rgba(255, 255, 255, .3);
+}
+
+/* Application Style */
+.crosshairImg {
+	-webkit-user-select: none;
+	width: 100%;
+	height: auto;
+}
+
+.drag-me {
+  display: none;
+  border: 1px solid #EEE;
+  /*border-radius: 5px;*/
+  /*background: rgba(255, 255, 255, .3);*/
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  bottom: 1px;
+  right: 1;
+  cursor: move;
+  cursor: -webkit-grab;
+  cursor: -moz-grab;
+  -webkit-user-select: none;
+  -webkit-app-region: drag;
+}
+
+.drag-me:active {
+	cursor: move;
+	cursor: -webkit-grabbing;
+	cursor: -moz-grabbing;
+}
+
+/*.drag-me:before {
+	content: '.';
+	position: absolute;
+	left: 14px;
+	font-size: 20px;
+	line-height: 20px;
+	color: #ac14c2;
+	text-shadow: 0 5px #ac14c2, 0 10px #ac14c2, 5px 0 #ac14c2, 5px 5px #ac14c2, 5px 10px #ac14c2, 10px 0 #ac14c2, 10px 5px #ac14c2, 10px 10px #ac14c2;
+}*/
+
+.draggable .drag-me {
+	display: inline-block;
 }
diff --git a/index.html b/index.html
@@ -2,17 +2,17 @@
 <html>
 	<head>
 		<meta charset="utf-8">
-		<title>Electron boilerplate</title>
+		<title>CrossOver</title>
 		<link rel="stylesheet" href="index.css">
 	</head>
 	<body>
 		<div class="container">
-			<header>
-				<h1>Electron boilerplate</h1>
-				<p></p>
-			</header>
-			<section class="main"></section>
-			<footer></footer>
+			<div class="background"></div>
+			<div class="crosshair">
+				<img class="crosshairImg" src="static/bullseye.png" draggable="false" />
+			</div>
+			<div class="drag-me">
+			</div>
 		</div>
 	</body>
 </html>
diff --git a/index.js b/index.js
@@ -1,6 +1,8 @@
 'use strict';
+const fs = require('fs');
+
 const path = require('path');
-const {app, BrowserWindow, Menu} = require('electron');
+const {app, globalShortcut, BrowserWindow, Menu} = require('electron');
 /// const {autoUpdater} = require('electron-updater');
 const {is} = require('electron-util');
 const unhandled = require('electron-unhandled');
@@ -13,8 +15,21 @@ unhandled();
 debug();
 contextMenu();
 
+/* Settings
+
+	- crosshair
+	- size
+	- position
+	- opacity
+	- hide shortcut
+	-
+
+	- color?
+
+*/
+
 // Note: Must match `build.appId` in package.json
-app.setAppUserModelId('com.company.AppName');
+app.setAppUserModelId('com.lacymorrow.CrossOver');
 
 // Uncomment this before publishing your first version.
 // It's commented out as it throws an error if there are no published versions.
@@ -30,14 +45,43 @@ app.setAppUserModelId('com.company.AppName');
 // Prevent window from being garbage collected
 let mainWindow;
 
+// Crosshair images
+let crosshairs = []
+const crosshairsPath = 'static/crosshairs'
+
+fs.readdir(crosshairsPath, (err, dir) => {
+    for (var i = 0, filepath; filepath = dir[i]; i++) {
+    	let filename = path.basename(filepath, '.png')
+    	if(! /^\..*/.test(filename)) {
+	        // display files
+    		console.log(filename);
+    		crosshairs.push(filename)
+	    }
+    }
+});
+
 const createMainWindow = async () => {
 	const win = new BrowserWindow({
+		alwaysOnTop: true,
+		frame: false,
+		closable: false,
+		maximizable: false,
+		minimizable: false,
+		skipTaskbar: true,
+		titleBarStyle: 'customButtonsOnHover',
+		transparent: true,
 		title: app.getName(),
+		resizable: true,
 		show: false,
-		width: 600,
-		height: 400
+		width: 100,
+		height: 100
 	});
 
+	// Hides the app from the dock and CMD+Tab, necessary for staying on top macOS fullscreen windows
+	app.dock.hide();
+	win.setAlwaysOnTop(true, "floating", 1);
+	win.setVisibleOnAllWorkspaces(true, {visibleOnFullScreen: true})
+
 	win.on('ready-to-show', () => {
 		win.show();
 	});
@@ -53,11 +97,68 @@ const createMainWindow = async () => {
 	return win;
 };
 
+const lockWindow = (lock) => {
+	console.log(`Locked: ${lock}`)
+
+	mainWindow.setClosable(!lock)
+	mainWindow.setResizable(!lock)
+
+	if (lock) {
+
+		// Lock
+		mainWindow.webContents.executeJavaScript('document.body.classList.remove("draggable")')
+		app.dock.hide();
+	} else {
+
+		// Unlock
+		mainWindow.webContents.executeJavaScript('document.body.classList.add("draggable")')
+		app.dock.show();
+		mainWindow.show()
+	}
+}
+
 // Prevent multiple instances of the app
 if (!app.requestSingleInstanceLock()) {
 	app.quit();
 }
 
+app.on('ready', () => {
+	/* Global KeyListner */
+	// CMD/CTRL + SHIFT + 0
+	globalShortcut.register('Control+Shift+X', () => {
+		let unlocked = app.dock.isVisible();
+		lockWindow(unlocked)
+	})
+	// globalShortcut.register('Control+Shift+Up', () => {
+	// 	let unlocked = app.dock.isVisible();
+	// 	if(unlocked) {
+	// 		let bounds = mainWindow.getBounds()
+	// 		mainWindow.setBounds({ y: bounds.y - 1})
+	// 	}
+	// })
+	// globalShortcut.register('Control+Shift+Down', () => {
+	// 	let unlocked = app.dock.isVisible();
+	// 	if(unlocked) {
+	// 		let bounds = mainWindow.getBounds()
+	// 		mainWindow.setBounds({ y: bounds.y + 1})
+	// 	}
+	// })
+	// globalShortcut.register('Control+Shift+Left', () => {
+	// 	let unlocked = app.dock.isVisible();
+	// 	if(unlocked) {
+	// 		let bounds = mainWindow.getBounds()
+	// 		mainWindow.setBounds({ x: bounds.x - 1})
+	// 	}
+	// })
+	// globalShortcut.register('Control+Shift+Right', () => {
+	// 	let unlocked = app.dock.isVisible();
+	// 	if(unlocked) {
+	// 		let bounds = mainWindow.getBounds()
+	// 		mainWindow.setBounds({ x: bounds.x + 1})
+	// 	}
+	// })
+})
+
 app.on('second-instance', () => {
 	if (mainWindow) {
 		if (mainWindow.isMinimized()) {
@@ -69,9 +170,7 @@ app.on('second-instance', () => {
 });
 
 app.on('window-all-closed', () => {
-	if (!is.macos) {
-		app.quit();
-	}
+	app.quit();
 });
 
 app.on('activate', async () => {
@@ -80,11 +179,20 @@ app.on('activate', async () => {
 	}
 });
 
+// var resizeTimeout;
+// app.on('resize', (e)=>{
+//     clearTimeout(resizeTimeout);
+//     resizeTimeout = setTimeout(function(){
+//         var size = mainWindow.getSize();
+//         mainWindow.setSize(size[0], size[0]);
+//     }, 100);
+// });
+
 (async () => {
 	await app.whenReady();
 	Menu.setApplicationMenu(menu);
 	mainWindow = await createMainWindow();
 
-	const favoriteAnimal = config.get('favoriteAnimal');
-	mainWindow.webContents.executeJavaScript(`document.querySelector('header p').textContent = 'Your favorite animal is ${favoriteAnimal}'`);
+	const crosshair = config.get('crosshair');
+	mainWindow.webContents.executeJavaScript(`document.querySelector('.crosshairImg').src = '${crosshairsPath}/${crosshair}.png'`);
 })();