priv/static/index.html

@@ -12,9 +12,9 @@
       <p>Please wait, connecting...</p>
       <div id="chat-container"></div>
     </div>
-    <form id="command-window">
+    <div id="command-window">
       <input id="input-box" inputmode="latin-prose" autocomplete="off" spellcheck="true" autofocus />
-    </form>
+    </div>
     <script type="text/javascript" src="/assets/ansi_up.js"></script>
     <script type="text/javascript" src="/assets/main.js"></script>
   </body>

priv/static/main.js

@@ -22,6 +22,9 @@ window.webmu = (function() {
     var inputbox;
     var conn;
     var timer;
+    var history = [];
+    var historyPos = 0;
+
     function init() {
 	var proto = identify_protocol();
 	conn = new WebSocket(proto + window.location.host + "/mu");
@@ -29,9 +32,8 @@ window.webmu = (function() {
 	conn.onmessage = process_message;
 	conn.onclose = handle_hangup;
 	mainbox = document.getElementById("chat-container");
-	formwrapper = document.getElementById("command-window");
-	formwrapper.onsubmit = pose_input;
 	inputbox = document.getElementById("input-box");
+	inputbox.onkeypress = pose_input;
 	timer = window.setInterval(send_ping, 60000);
 	var n = Notification.requestPermission();
 	if (n !== undefined) {
@@ -107,11 +109,32 @@ window.webmu = (function() {
     }
 
     function pose_input(e) {
-	send_pose(inputbox.value);
-	inputbox.value = '';
-	// Never return the form, since it would refresh the page
-	return false;
+	if (!e) e = window.event;
+	switch (e.key) {
+	case "Enter":
+	    send_pose(inputbox.value);
+	    history.push(inputbox.value);
+	    historyPos = history.length;
+	    inputbox.value = '';
+	    break;
+	case "ArrowUp":
+	    if (inputbox.value.trim() && historyPos == history.length) {
+		history.push(inputbox.value);
+	    }
+	    if (historyPos > 0) {
+		inputbox.value = history[historyPos - 1];
+		historyPos--;
+	    }
+	    break;
+	case "ArrowDown":
+	    if (historyPos < history.length) {
+		historyPos++;
+		inputbox.value = history[historyPos] || "";
+	    }
+	    break;
+	}
     }
+
     function send_pose(pose) {
 	var json = JSON.stringify({"pose": pose});
 	conn.send(json);