add a new demo (multiplex)

zhengyao-lin · Nov 30, 2019 · 5c2ab7a · 5c2ab7a
1 parent fad8c4b
commit 5c2ab7a
Show file tree

Hide file tree

Showing 11 changed files with 204 additions and 30 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,7 @@
 # yterm
 
-`yterm` is a terminal emulator in web. Similar project [`xterm.js`](https://github.com/xtermjs/xterm.js).
+`yterm` is a terminal emulator in web.  
+[`xterm.js`](https://github.com/xtermjs/xterm.js) is a similar project.  
 My project proposal and weekly rubrics can be found [here](https://gitlab.engr.illinois.edu/zl38/fa19-cs242-project/tree/proposal)
 
 # Project structure

diff --git a/demo/Makefile b/demo/Makefile
@@ -0,0 +1,6 @@
+NPM_INSTALL := npm install --no-save
+NPX := npx
+
+.PHONY: deps
+deps:
+	$(NPM_INSTALL) $(DEPS)
diff --git a/demo/multiplex/Makefile b/demo/multiplex/Makefile
@@ -0,0 +1,7 @@
+DEPS := ws@^7.2.0 node-pty@^0.9.0
+
+.PHONY: all
+all: deps
+	$(NPX) ts-node server.ts
+
+include ../Makefile
diff --git a/demo/demo.html → demo/multiplex/demo.html b/demo/demo.html → demo/multiplex/demo.html
@@ -63,7 +63,7 @@ <h3 id="title">yterm</h3>
         </div>
     </body>
 
-    <script src="../dist/yterm.js"></script>
+    <script src="../../dist/yterm.js"></script>
     <script>
         const font = new yterm.Font("Ubuntu Mono", 16);
         const schemeA = new yterm.TangoColorScheme();

diff --git a/demo/multiplex/server.ts b/demo/multiplex/server.ts
@@ -0,0 +1,45 @@
+import ws from "ws";
+import { spawn } from "node-pty";
+
+const server = new ws.Server({ host: "localhost", port: 3131 });
+const proc = spawn("bash", [], {
+    cols: 82,
+    rows: 25
+});
+
+const connections: Record<number, ws> = {};
+let connectionId = 0;
+
+proc.on("data", (data: string) => {
+    for (const connId in connections) {
+        try {
+            connections[connId].send(data);
+        } catch (e) {
+            console.warn(`failed to send data to connection ${connId}`, e);
+        }
+    }
+});
+
+server.on("connection", ws => {
+    const id = connectionId++;
+
+    connections[id] = ws;
+
+    ws.on("message", (msg: Buffer) => {
+        proc.write(msg.toString());
+    });
+
+    ws.on("close", () => {
+        delete connections[id];
+    });
+});
+
+server.on("listening", () => {
+    console.log("listening on", server.address());
+    console.log("open demo.html to view the frontend");
+});
+
+process.on("exit", () => {
+    console.log("killing client process");
+    proc.kill();
+});
diff --git a/demo/simple/Makefile b/demo/simple/Makefile
@@ -0,0 +1,7 @@
+DEPS := ws@^7.2.0 node-pty@^0.9.0
+
+.PHONY: all
+all: deps
+	$(NPX) ts-node server.ts
+
+include ../Makefile
diff --git a/demo/simple/demo.html b/demo/simple/demo.html
@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+    </head>
+
+    <body>
+        <style>
+            body {
+                margin: 0;
+                font-family: monospace;
+            }
+
+            #container {
+                display: flex;
+
+                position: absolute;
+                top: 0;
+                left: 0;
+                height: 100%;
+                width: 100%;
+
+                justify-content: center;
+            }
+
+            #col {
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+                flex: 0 0;
+            }
+
+            #main {
+                border-radius: 15px;
+
+                box-shadow:
+                    0 0 60px 10px rgba(0, 0, 0, 0.2),
+                    0 0 30px 1px rgba(0, 0, 0, 0.05);
+
+                overflow: hidden;
+                padding: 10px;
+            }
+
+            #title {
+                max-width: 90%;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                white-space: nowrap;
+            }
+
+            canvas {
+                vertical-align: bottom;
+                cursor: text;
+            }
+        </style>
+        <div id="container">
+            <div id="col">
+                <h3 id="title">yterm</h3>
+                <div id="main"></div>
+                <input id="transition" type="range" style="width: 100%; margin-top: 2em;" min="0" max="1000", value="0"></input>
+            </div>
+        </div>
+    </body>
+
+    <script src="../../dist/yterm.js"></script>
+    <script>
+        const font = new yterm.Font("Ubuntu Mono", 16);
+        const schemeA = new yterm.TangoColorScheme();
+        const schemeB = new yterm.TomorrowColorScheme();
+        const schemeMixed = new yterm.TransitionColorScheme(schemeA, schemeB);
+
+        function getTransitionScheme (t) {
+            schemeMixed.setTransition(t);
+
+            return new yterm.StyleScheme({
+                font: font,
+                colorScheme: schemeMixed,
+            });
+        }
+
+        function updateAmbience (scheme) {
+            main.style.background = scheme.colorScheme.getSGRBackground(yterm.SGRColor.SGR_COLOR_DEFAULT);
+            document.body.style.background = scheme.colorScheme.getSGRBackground(yterm.SGRColor.SGR_COLOR_DEFAULT);
+            document.body.style.color = scheme.colorScheme.getSGRForeground(yterm.SGRColor.SGR_COLOR_DEFAULT);
+        }
+
+        const main = document.getElementById("main");
+        const transition = document.getElementById("transition");
+
+        const renderer = new yterm.CanvasRenderer(main, getTransitionScheme(0), 82, 25);
+        const source = new yterm.WebSocketSource("ws://localhost:3131");
+        const input = new yterm.KeyboardEventInput(document);
+        const term = new yterm.Terminal(source, renderer, input);
+
+        const eventLoop = () => {
+            document.getElementById("title").innerText = term.getTitle();
+            window.requestAnimationFrame(eventLoop);
+        };
+
+        eventLoop();
+
+        updateAmbience(getTransitionScheme(0));
+
+        transition.oninput = () => {
+            const scheme = getTransitionScheme(transition.value / 1000);
+            renderer.setStyleScheme(scheme);
+            updateAmbience(scheme);
+        };
+
+        /**
+         * demo:
+         * telnet towel.blinkenlights.nl
+         * vi
+         * sl
+         * cmatrix
+         * screenfetch
+         * less
+         * curl -L https://raw.githubusercontent.com/keroserene/rickrollrc/master/roll.sh | bash
+         */
+    </script>
+</html>
diff --git a/demo/server.ts → demo/simple/server.ts b/demo/server.ts → demo/simple/server.ts
@@ -26,6 +26,11 @@ server.on("connection", ws => {
     });
 });
 
+server.on("listening", () => {
+    console.log("listening on", server.address());
+    console.log("open demo.html to view the frontend");
+});
+
 process.on("exit", () => {
     console.log("killing all processes");
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -2,12 +2,14 @@
   "name": "yterm",
   "version": "0.0.1",
   "description": "",
+  "main": "dist/yterm.ts",
+  "types": "dist/yterm.d.ts",
   "scripts": {
     "build": "npx webpack --mode production",
     "build-dev": "npx webpack --mode development",
     "test": "npx tsc --noEmit && npx mocha -r ts-node/register tests/**/*.test.ts",
     "coverage": "npx nyc -r text -r lcov -n src -e .ts npm run test",
-    "demo": "npx ts-node demo/server.ts"
+    "demo": "cd demo && make -C"
   },
   "author": "zl38",
   "license": "MIT",
@@ -25,8 +27,5 @@
     "webpack": "^4.41.2",
     "webpack-cli": "^3.3.10"
   },
-  "dependencies": {
-    "node-pty": "^0.9.0",
-    "ws": "^7.2.0"
-  }
+  "dependencies": {}
 }
diff --git a/tsconfig.json b/tsconfig.json
@@ -4,8 +4,9 @@
     "strict": true,
     "esModuleInterop": true,
     "downlevelIteration": true,
+    "declaration": true,
     "target": "es5",
-    "outDir": "dist/yterm"
+    "outDir": "dist"
   },
   "include": [
     "src/**/*"