Merge pull request #1 from BigTeri/v0.2.0

v0.2.0
ardean · Dec 16, 2016 · d52de41 · d52de41
2 parents 7cca6e7 + 648df21
commit d52de41
Show file tree

Hide file tree

Showing 18 changed files with 425 additions and 120 deletions.
diff --git a/README.md b/README.md
@@ -1,7 +1,18 @@
 # jsremote
-[![NPM Version](http://img.shields.io/npm/v/jsremote.svg?style=flat)](https://www.npmjs.org/package/jsremote)
+[![NPM Version][npm-image]][npm-url]
+[![NPM Downloads][downloads-image]][downloads-url]
+
+**NodeJS Desktop Remote using HTML5 Pointerlock**
+
+I use this package to control my Windows PC (hooked up to a projector) from my mac.
+
+Sadly I could not find a way to start the service automatically at boot time.
+On my Desktop is a shortcut to a "start jsremote" batch file `run as Admin enabled`.
+
+This package should work with `Linux` / `Mac` / `Windows` but is **only tested** on Windows.
+
+And yes, you can play `most` games with it... :wink:
 
-NodeJS desktop remote using HTML5 Pointerlock
 
 ## Installation
 
@@ -15,6 +26,22 @@ npm i -g jsremote
 jsremote
 ```
 
+- optional `-p PORT` /  `--port PORT`
+
 Open remote client on another machines's browser:
 
 http://myipaddress:4444/
+
+## TODO
+
+- mobile controls
+- special controls (escape button)
+
+## License
+
+[MIT](LICENSE)
+
+[npm-image]: https://img.shields.io/npm/v/jsremote.svg
+[npm-url]: https://npmjs.org/package/jsremote
+[downloads-image]: https://img.shields.io/npm/dm/jsremote.svg
+[downloads-url]: https://npmjs.org/package/jsremote
diff --git a/bin/index.js b/bin/index.js
@@ -1,3 +1,3 @@
 #!/usr/bin/env node
 
-require("../dist");
+require("../dist/cli");
diff --git a/client/config.js b/client/config.js
@@ -17,6 +17,7 @@ System.config({
     "babel": "npm:babel-core@5.8.38",
     "babel-runtime": "npm:babel-runtime@5.8.38",
     "core-js": "npm:core-js@1.2.7",
+    "events": "github:jspm/nodelibs-events@0.1.1",
     "jquery": "npm:jquery@3.1.1",
     "jspointerlock": "npm:jspointerlock@0.1.3",
     "github:jspm/nodelibs-assert@0.1.0": {

diff --git a/client/css/index.css b/client/css/index.css
@@ -1,6 +1,25 @@
-html, body {
+html, body, .fullscreen {
   margin: 0;
   height: 100%;
   width: 100%;
-  background-color: #cddc39;
+  font-family: monospace;
+}
+
+.fullscreen {
+  color: #ccc;
+  background-color: #000;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  user-select: none;
+  cursor: pointer;
+}
+
+.fullscreen h1 {
+  font-size: 6vw;
+}
+
+.fullscreen h1.error {
+  color: #FF0033;
 }
diff --git a/client/index.html b/client/index.html
@@ -6,6 +6,10 @@
     <link rel="stylesheet" href="./css/index.css">
   </head>
   <body>
+    <div class="fullscreen">
+      <h1>Loading...</h1>
+    </div>
+
     <script src="jspm_packages/system.js"></script>
     <script src="config.js"></script>
     <script>

diff --git a/client/src/connection.js b/client/src/connection.js
@@ -0,0 +1,26 @@
+import {
+  EventEmitter
+} from "events";
+import io from "../sockets/socket.io.js";
+
+export default class Connection extends EventEmitter {
+  constructor() {
+    super();
+
+    this.isConnected = false;
+
+    this.socket = io(location.host, {
+      path: location.pathname + "sockets"
+    });
+
+    this.socket
+      .on("connect", () => {
+        this.isConnected = true;
+        this.emit("connect");
+      })
+      .on("disconnect", () => {
+        this.isConnected = false;
+        this.emit("disconnect");
+      });
+  }
+}
diff --git a/client/src/hint.js b/client/src/hint.js
@@ -0,0 +1,20 @@
+import $ from "jquery";
+
+class Hint {
+  constructor() {
+    this.$element = $(".fullscreen > h1");
+  }
+
+  setText(message) {
+    this.$element.removeClass("error");
+    this.$element.text(message);
+  }
+
+  setError(message) {
+    this.$element.addClass("error");
+    this.$element.text(message);
+    console.error(message);
+  }
+}
+
+export default new Hint();
diff --git a/client/src/index.js b/client/src/index.js
@@ -1,73 +1,94 @@
 import $ from "jquery";
-import io from "../sockets/socket.io.js";
 import PointerLock from "jspointerlock";
-
-const keys = {
-  8: "backspace",
-  9: "tab",
-  13: "enter",
-  16: "shift",
-  17: "control",
-  37: "left",
-  38: "up",
-  39: "right",
-  40: "down",
-  46: "delete",
-  91: "command"
-};
+import Connection from "./connection";
+import hint from "./hint";
+import keys from "./keymap";
 
 const element = document.body;
 const $element = $(element);
 
+// TODO: pointerlock should accept jquery selector -> jspointerlock needs update
 const pointerLock = new PointerLock(element);
-const socket = io(location.host, {
-  path: location.pathname + "sockets"
+const connection = new Connection();
+const socket = connection.socket;
+
+connection
+  .on("connect", () => {
+    updateBindings();
+    updateHint();
+  })
+  .on("disconnect", () => {
+    // TODO: cancelPointerLock -> jspointerlock needs update
+    updateBindings();
+    updateHint();
+  });
+
+$element.on("click", () => {
+  if (!pointerLock.isLocked && connection.isConnected) {
+    pointerLock.requestPointerLock();
+  }
 });
 
-let isConnected = false;
-socket.on("connect", () => {
-  isConnected = true;
-  console.log("connect");
-}).on("disconnect", () => {
-  isConnected = false;
-  console.log("disconnect");
+pointerLock.on("change", (isOn) => {
+  updateBindings();
+  updateHint();
 });
 
+function updateHint() {
+  if (connection.isConnected) {
+    if (pointerLock.isLocked) {
+      hint.setText("You're controlling now");
+    } else {
+      hint.setText("Click to control");
+    }
+  } else {
+    hint.setError("Not connected to server!");
+  }
+}
+
+function updateBindings() {
+  if (pointerLock.isLocked) {
+    bind();
+  } else {
+    unbind();
+  }
+}
+
 function mouseMove(e) {
-  if (!isConnected) return;
+  if (!connection.isConnected) return;
 
   socket.emit("mouseMove", e.originalEvent.movementX, e.originalEvent.movementY);
 }
 
 function mouseDown(e) {
-  if (!isConnected) return;
+  if (!connection.isConnected) return;
 
   socket.emit("mouseDown", getMouseButton(e.which));
 }
 
 function mouseUp(e) {
-  if (!isConnected) return;
+  if (!connection.isConnected) return;
 
   socket.emit("mouseUp", getMouseButton(e.which));
 }
 
 function mouseScroll(e) {
-  if (!isConnected) return;
+  if (!connection.isConnected) return;
 
   if (e.originalEvent.deltaY === 0) return;
   socket.emit("mouseScroll", e.originalEvent.deltaY);
 }
 
 function keyboardDown(e) {
   e.preventDefault();
-  if (!isConnected) return;
+  if (!connection.isConnected) return;
 
   socket.emit("keyboardDown", getKeyboardKey(e));
 }
 
 function keyboardUp(e) {
   e.preventDefault();
-  if (!isConnected) return;
+  if (!connection.isConnected) return;
 
   socket.emit("keyboardUp", getKeyboardKey(e));
 }
@@ -92,20 +113,6 @@ function unbind() {
     .off("keyup", keyboardUp);
 }
 
-$element.on("click", (e) => {
-  if (!pointerLock.isLocked) {
-    pointerLock.requestPointerLock();
-  }
-});
-
-pointerLock.on("change", (isOn) => {
-  if (isOn) {
-    bind();
-  } else {
-    unbind();
-  }
-});
-
 function getKeyboardKey(e) {
   let key = keys[e.keyCode];
   if (!key) {

diff --git a/client/src/keymap.js b/client/src/keymap.js
@@ -0,0 +1,13 @@
+export default {
+  8: "backspace",
+  9: "tab",
+  13: "enter",
+  16: "shift",
+  17: "control",
+  37: "left",
+  38: "up",
+  39: "right",
+  40: "down",
+  46: "delete",
+  91: "command"
+};
diff --git a/dist/cli.js b/dist/cli.js
@@ -0,0 +1,32 @@
+"use strict";
+
+var _util = require("util");
+
+var _commander = require("commander");
+
+var _commander2 = _interopRequireDefault(_commander);
+
+var _server = require("./server");
+
+var _server2 = _interopRequireDefault(_server);
+
+var _package = require("../package");
+
+var _package2 = _interopRequireDefault(_package);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+_commander2.default.version(_package2.default.version).option("-p, --port [port]", "sets server port", parseInt).parse(process.argv);
+
+const server = new _server2.default({
+  port: _commander2.default.port
+});
+
+server.on("clientConnect", socket => {
+  (0, _util.log)("new client connected: " + socket.request.connection.remoteAddress);
+  socket.once("disconnect", () => (0, _util.log)("client disconnected: " + socket.request.connection.remoteAddress));
+});
+
+server.listen(() => {
+  (0, _util.log)(`jsremote server is running on port ${ server.port }`);
+});