1 files changed, 59 insertions, 0 deletions
diff --git a/html/src/components/app.tsx b/html/src/components/app.tsx
new file mode 100644
index 0000000..a899b7f
--- /dev/null
+++ b/html/src/components/app.tsx
@@ -0,0 +1,59 @@
+import { h, Component } from 'preact';
+
+import { ITerminalOptions, ITheme } from 'xterm';
+import { ClientOptions, Xterm } from './terminal';
+
+if ((module as any).hot) {
+    // tslint:disable-next-line:no-var-requires
+    require('preact/debug');
+}
+
+const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+const path = window.location.pathname.replace(/[\/]+$/, '');
+const wsUrl = [protocol, '//', window.location.host, path, '/ws', window.location.search].join('');
+const tokenUrl = [window.location.protocol, '//', window.location.host, path, '/token'].join('');
+const clientOptions = {
+    rendererType: 'webgl',
+    disableLeaveAlert: false,
+    disableResizeOverlay: false,
+    titleFixed: null,
+} as ClientOptions;
+const termOptions = {
+    fontSize: 13,
+    fontFamily: 'Menlo For Powerline,Consolas,Liberation Mono,Menlo,Courier,monospace',
+    theme: {
+        foreground: '#d2d2d2',
+        background: '#2b2b2b',
+        cursor: '#adadad',
+        black: '#000000',
+        red: '#d81e00',
+        green: '#5ea702',
+        yellow: '#cfae00',
+        blue: '#427ab3',
+        magenta: '#89658e',
+        cyan: '#00a7aa',
+        white: '#dbded8',
+        brightBlack: '#686a66',
+        brightRed: '#f54235',
+        brightGreen: '#99e343',
+        brightYellow: '#fdeb61',
+        brightBlue: '#84b0d8',
+        brightMagenta: '#bc94b7',
+        brightCyan: '#37e6e8',
+        brightWhite: '#f1f1f0',
+    } as ITheme,
+} as ITerminalOptions;
+
+export class App extends Component {
+    render() {
+        return (
+            <Xterm
+                id="terminal-container"
+                wsUrl={wsUrl}
+                tokenUrl={tokenUrl}
+                clientOptions={clientOptions}
+                termOptions={termOptions}
+            />
+        );
+    }
+}