added proper server connection dialog

public/index.html

@@ -51,6 +51,13 @@
 				<li><a href="https://github.com/mellodoot/openterminal" target="_blank">source</a></li>
 			</ul>
 		</footer>
+		<div id="dialog-backdrop"></div>
+		<div id="connect-dialog">
+			<button id="connect-close">X</button>
+			<p>Enter the address of the server you would like to connect to:</p>	
+			<input id="connect-url" name="server" type="text" spellcheck="false">
+			<button id="connect-submit">Connect</button>
+		</div>
 		<div id="overlay"></div>
 	</body>
 </html>

public/scripts/main.js

@@ -5,10 +5,50 @@ document.addEventListener("DOMContentLoaded", () => {
 	Visual.bind();
 	Terminal.start();
 
-	document.getElementById("connect").addEventListener("click", () => {
-		var new_server = prompt("Enter the address of the server you would like to connect to:");
+	const dialog_backdrop = document.getElementById("dialog-backdrop");
+	const connect_button = document.getElementById("connect");
+	const connect_dialog = document.getElementById("connect-dialog");
+	const connect_url = document.getElementById("connect-url");
+	const connect_submit = document.getElementById("connect-submit");
+	const connect_close = document.getElementById("connect-close");
+
+	connect_url.placeholder = window.location.host;
+
+	connect_button.addEventListener("click", () => {
+		connect_url.value = "";
+		connect_dialog.classList.add("show");
+		dialog_backdrop.classList.add("show");
+		connect_url.focus();
+		Terminal.set_enable_input(false);
+	});
+
+	connect_submit.addEventListener("click", () => {
+		connect_close.click();
+		const new_server = connect_url.value;
 		if (!new_server) return;
 		Terminal.connect(new_server);
 	});
+
+	connect_dialog.addEventListener("keydown", event => {
+		switch (event.key) {
+			case "Enter":
+				connect_submit.click();
+				break;
+			case "Escape":
+				connect_close.click();
+				break;
+		}
+		return;
+	});
+
+	connect_close.addEventListener("click", () => {
+		connect_dialog.classList.remove("show");
+		dialog_backdrop.classList.remove("show");
+		Terminal.set_enable_input(true);
+	});
+
+	dialog_backdrop.addEventListener("click", () => {
+		connect_close.click();
+	});
 });
 

public/scripts/terminal.js

@@ -10,6 +10,7 @@ var client;
 var my_colour = false;
 var pre_buffer_chars = 0;
 var server_url = "";
+var enable_input = true;
 
 const DATA_TYPES = {
 	ping: 0,
@@ -223,11 +224,22 @@ function new_caret() {
 	content.appendChild(new_caret);
 }
 
+/**
+ * sets whether or not the terminal should accept user input
+ * (handy for not interfering with dialogs)
+ * @param {value} boolean 
+ */
+export function set_enable_input(value) {
+	enable_input = value;
+}
+
 /**
  * the input handler for the document.
  * automatically scrolls to the bottom of the page on valid key presses.
  */
 function handle_input(event) {
+	if (!enable_input) return;
+
 	if (event.key == "'") {
 		event.preventDefault();
 	}

public/styles/main.css

@@ -135,6 +135,7 @@ div#overlay {
 	pointer-events: none;
 	animation: linear .05s infinite alternate overlay-flicker;
 	mix-blend-mode: overlay;
+	z-index: 100;
 }
 
 body.lcd div#overlay {
@@ -173,3 +174,75 @@ body.lcd pre#content {
 	pointer-events: none;
 }
 
+#dialog-backdrop {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100vw;
+	height: 100vh;
+	display: none;
+	background: black;
+	opacity: .25;
+	z-index: 99;
+}
+
+#connect-dialog {
+	position: fixed;
+	top: 50%;
+	left: 50%;
+	max-width: calc(100vw - 4rem);
+	width: 16rem;
+	margin: auto auto;
+	padding: 1rem;
+	display: none;
+	transform: translate(-50%, -50%);
+	border: 1px solid var(--colour);
+	color: var(--colour);
+	background: var(--bgcolour);
+	text-shadow: 0 0 2em;
+	z-index: 99;
+}
+
+#dialog-backdrop.show,
+#connect-dialog.show {
+	display: block;
+}
+
+#connect-dialog p {
+	margin: 0 0 1em 0;
+}
+
+#connect-dialog input {
+	font-family: inherit;
+	color: var(--colour);
+	border: 1px solid var(--colour);
+	background: transparent;
+}
+
+#connect-dialog input::placeholder {
+	font-family: inherit;
+	color: var(--colour);
+	opacity: .25;
+}
+
+#connect-dialog button {
+	font-family: inherit;
+	border: 1px solid var(--colour);
+	color: var(--colour);
+	background: transparent;
+	cursor: pointer;
+}
+
+#connect-dialog #connect-close {
+	position: absolute;
+	top: -0.7em;
+	right: 1rem;
+	border: none;
+	background: var(--bgcolour);
+}
+
+*:focus {
+	outline: none;
+	box-shadow: 0 0 4px;
+}
+