From 2ab0de079976d82a85f8179565bd07b0d309f18b Mon Sep 17 00:00:00 2001
From: "John \"Elwin\" Edwards" <elwin@rlgallery.org>
Date: Sat, 23 Jun 2012 17:11:51 -0700
Subject: [PATCH] Improvements to the keyboard.

Add a number pad to the keyboard.  Make it hidden by default for
RLG-Web.
---
 index-rlg.html | 16 ++++++++++++++--
 index-sh.html  |  9 +++++++++
 rlgterm.js     | 18 ++++++++++++++----
 shterm.js      |  7 +++++++
 style-rlg.css  |  5 +++++
 tty.css        | 10 ++++++++++
 6 files changed, 59 insertions(+), 6 deletions(-)

diff --git a/index-rlg.html b/index-rlg.html
index ea4eb46..fe45707 100644
--- a/index-rlg.html
+++ b/index-rlg.html
@@ -16,6 +16,7 @@
 </div>
 <div id="termwrap">TERM</div>
 <div class="modal" id="keyboard">
+<div id="keys">
 <div class="keyrow">
   <div class="key" onclick="vkey('`')">`</div>
   <div class="key" onclick="vkey('1')">1</div>
@@ -31,6 +32,9 @@
   <div class="key" onclick="vkey('-')">-</div>
   <div class="key" onclick="vkey('=')">=</div>
   <div class="key" onclick="vkey('\b')" style="width: 2.5em">Bksp</div>
+  <div class="rkey" onclick="vkey('KP9')">↗</div>
+  <div class="rkey" onclick="vkey('KP8')">↑</div>
+  <div class="rkey" onclick="vkey('KP7')">↖</div>
 </div>
 <div class="keyrow">
   <div class="key" onclick="vkey('\t')" style="width: 2.5em">Tab</div>
@@ -47,6 +51,9 @@
   <div class="key" onclick="vkey('[')">[</div>
   <div class="key" onclick="vkey(']')">]</div>
   <div class="key" onclick="vkey('\\')">\</div>
+  <div class="rkey" onclick="vkey('KP6')">→</div>
+  <div class="rkey" onclick="vkey('KP5')">·</div>
+  <div class="rkey" onclick="vkey('KP4')">←</div>
 </div>
 <div class="keyrow">
   <div class="key" onclick="togglectrl()" id="ctrlkey">Ctrl</div>
@@ -62,6 +69,9 @@
   <div class="key" onclick="vkey(';')">;</div>
   <div class="key" onclick="vkey('\'')">'</div>
   <div class="key" onclick="vkey('\n')" style="width: 4em">Ret</div>
+  <div class="rkey" onclick="vkey('KP3')">↘</div>
+  <div class="rkey" onclick="vkey('KP2')">↓</div>
+  <div class="rkey" onclick="vkey('KP1')">↙</div>
 </div>
 <div class="keyrow">
   <div class="key" onclick="toggleshift()" id="shiftkey">Shift</div>
@@ -79,6 +89,8 @@
 <div class="keyrow">
   <div class="key" onclick="vkey(' ')" id="spacebar"></div>
 </div>
+</div>
+<div class="centerb"><span class="ibutton" onclick="toggleBlock('keys')">Keyboard</span></div>
 <div class="rfloat"><span class="ibutton" onclick="stop()">Stop</span></div>
 <div class="rfloat">Font:
 <span onclick="textsize(false)" class="ibutton">Smaller</span>
@@ -105,7 +117,7 @@
 </div>
 <div class="modal" id="register">
 <div class="formtable">
-<div><div>Name:</div><div><input type="text" name="name" id="regin_name"></div></div>
+<div><div>Name:</div><div><input type="text" name="name" id="regin_name" maxlength="10"></div></div>
 <div><div>Password:</div><div><input type="password" name="pw" id="regin_pw"></div></div>
 <div><div>E-mail (optional):</div><div><input type="text" name="email" id="regin_email"></div></div>
 <div>
@@ -115,7 +127,7 @@
 </div>
 </div>
 <div class="modal" id="misc">
-<div class="centerb"><span class="ibutton" onclick="toggledebug()">Messages</span></div>
+<div class="centerb"><span class="ibutton" onclick="toggleBlock('debug')">Messages</span></div>
 </div>
 <div id="debug">
 </div>
diff --git a/index-sh.html b/index-sh.html
index 16b1342..d3375fe 100644
--- a/index-sh.html
+++ b/index-sh.html
@@ -31,6 +31,9 @@ Browsing with Javascript turned off?  I sympathize.  I didn't want Javascript to
   <div class="key" onclick="vkey('-')">-</div>
   <div class="key" onclick="vkey('=')">=</div>
   <div class="key" onclick="vkey('\b')" style="width: 2.5em">Bksp</div>
+  <div class="rkey" onclick="vkey('KP9')">↗</div>
+  <div class="rkey" onclick="vkey('KP8')">↑</div>
+  <div class="rkey" onclick="vkey('KP7')">↖</div>
 </div>
 <div class="keyrow">
   <div class="key" onclick="vkey('\t')" style="width: 2.5em">Tab</div>
@@ -47,6 +50,9 @@ Browsing with Javascript turned off?  I sympathize.  I didn't want Javascript to
   <div class="key" onclick="vkey('[')">[</div>
   <div class="key" onclick="vkey(']')">]</div>
   <div class="key" onclick="vkey('\\')">\</div>
+  <div class="rkey" onclick="vkey('KP6')">→</div>
+  <div class="rkey" onclick="vkey('KP5')">·</div>
+  <div class="rkey" onclick="vkey('KP4')">←</div>
 </div>
 <div class="keyrow">
   <div class="key" onclick="togglectrl()" id="ctrlkey">Ctrl</div>
@@ -62,6 +68,9 @@ Browsing with Javascript turned off?  I sympathize.  I didn't want Javascript to
   <div class="key" onclick="vkey(';')">;</div>
   <div class="key" onclick="vkey('\'')">'</div>
   <div class="key" onclick="vkey('\n')" style="width: 4em">Ret</div>
+  <div class="rkey" onclick="vkey('KP3')">↘</div>
+  <div class="rkey" onclick="vkey('KP2')">↓</div>
+  <div class="rkey" onclick="vkey('KP1')">↙</div>
 </div>
 <div class="keyrow">
   <div class="key" onclick="toggleshift()" id="shiftkey">Shift</div>
diff --git a/rlgterm.js b/rlgterm.js
index a069932..cde09ca 100644
--- a/rlgterm.js
+++ b/rlgterm.js
@@ -327,6 +327,10 @@ var charshifts = { '-': "5f", '=': "2b", '[': "7b", ']': "7d", '\\': "7c",
   ';': "3a", '\'': "22", ',': "3c", '.': "3e", '/': "3f", '`': "7e"
 }
 
+var kpkeys = { "KP1": "1b4f46", "KP2": "1b4f42", "KP3": "1b5b367e", 
+               "KP4": "1b4f44", "KP5": "1b5b45", "KP6": "1b4f43", 
+               "KP7": "1b4f48", "KP8": "1b4f41", "KP9": "1b5b357e" };
+
 function vkey(c) {
   if (!session.playing)
     return;
@@ -363,6 +367,9 @@ function vkey(c) {
     else
       keystr = c.charCodeAt(0).toString(16);
   }
+  else if (c in kpkeys) {
+    keystr = kpkeys[c];
+  }
   else
     return;
   var datareq = new XMLHttpRequest();
@@ -760,11 +767,14 @@ function setmode(mode, ev) {
   }
 }
 
-function toggledebug() {
-  if (document.getElementById("debug").style.display != "block")
-    document.getElementById("debug").style.display = "block";
+function toggleBlock(id) {
+  var element = document.getElementById(id);
+  if (!element)
+    return;
+  if (element.style.display != "block")
+    element.style.display = "block";
   else
-    document.getElementById("debug").style.display = "none";
+    element.style.display = "none";
 }
 
 function debug(level, msg) {
diff --git a/shterm.js b/shterm.js
index a5d1927..a798444 100644
--- a/shterm.js
+++ b/shterm.js
@@ -260,6 +260,10 @@ var charshifts = { '-': "5f", '=': "2b", '[': "7b", ']': "7d", '\\': "7c",
   ';': "3a", '\'': "22", ',': "3c", '.': "3e", '/': "3f", '`': "7e"
 }
 
+var kpkeys = { "KP1": "1b4f46", "KP2": "1b4f42", "KP3": "1b5b367e", 
+               "KP4": "1b4f44", "KP5": "1b5b45", "KP6": "1b4f43", 
+               "KP7": "1b4f48", "KP8": "1b4f41", "KP9": "1b5b357e" };
+
 function vkey(c) {
   var keystr;
   if (c.match(/^[a-z]$/)) {
@@ -294,6 +298,9 @@ function vkey(c) {
     else
       keystr = c.charCodeAt(0).toString(16);
   }
+  else if (c in kpkeys) {
+    keystr = kpkeys[c];
+  }
   else
     return;
   //writeData("Sending " + keystr);
diff --git a/style-rlg.css b/style-rlg.css
index 0b3ac38..f81ecc3 100644
--- a/style-rlg.css
+++ b/style-rlg.css
@@ -21,6 +21,7 @@ div.rfloat {
 }
 
 div.centerb {
+	clear: both;
 	margin: 0.2em;
 	padding: 0.4em;
 	text-align: center;
@@ -74,6 +75,10 @@ div#nogames {
 	text-align: center;
 }
 
+div#keys {
+	display: none;
+}
+
 div#debug {
 	display: none;
 }
diff --git a/tty.css b/tty.css
index d5a7210..78a50d5 100644
--- a/tty.css
+++ b/tty.css
@@ -23,6 +23,16 @@ div.key {
 	background-color: white;
 	color: black;
 }
+div.rkey {
+	width: 2em;
+	height: 2em;
+	float: right;
+	border: 2px solid black;
+	margin: 0.2em;
+	text-align: center;
+	background-color: white;
+	color: black;
+}
 div.keysel {
 	width: 2em;
 	height: 2em;