From 5af0160769d4ee3031823c0fde54aebe06b16f04 Mon Sep 17 00:00:00 2001
From: "John \"Elwin\" Edwards" <elwin@rlgallery.org>
Date: Tue, 10 Jul 2012 08:08:54 -0700
Subject: [PATCH] RLG-Web: add a new message framework.

Add a message() function meant for UI messages, not debugging info.
---
 index-rlg.html |  2 ++
 rlgterm.js     | 24 +++++++++++++++++++++---
 style-rlg.css  | 14 ++++++++++++++
 3 files changed, 37 insertions(+), 3 deletions(-)

diff --git a/index-rlg.html b/index-rlg.html
index 33594e2..7780f67 100644
--- a/index-rlg.html
+++ b/index-rlg.html
@@ -130,6 +130,8 @@
 <div class="centerb"><a href="/about.html">Information</a></div>
 <div class="centerb"><span class="ibutton" onclick="toggleBlock('debug')">Messages</span></div>
 </div>
+<div class="modal" id="messages">
+</div>
 <div id="debug">
 </div>
 </body>
diff --git a/rlgterm.js b/rlgterm.js
index 85ba232..f6af361 100644
--- a/rlgterm.js
+++ b/rlgterm.js
@@ -261,7 +261,8 @@ function postResponseHandler() {
 }
 
 function errHandler() {
-  debug(1, "Server unavailable?");
+  //debug(1, "Server unavailable?");
+  message("Unable to connect to the server.");
 }
 
 function sendback(str) {
@@ -445,11 +446,13 @@ function formlogin(ev) {
       session.lcred = reply.k;
       session.lname = reply.u;
       setTitle("Logged in as " + reply.u);
-      debug(1, "Logged in as " + reply.u + " with id " + reply.k);
+      debug(0, "Logged in as " + reply.u + " with id " + reply.k);
+      message("You are now logged in as " + reply.u + ".");
       setmode("choose");
     }
     else if (reply.t == 'E') {
-      debug(1, "Could not log in: " + reply.s);
+      debug(0, "Could not log in: " + reply.s);
+      message("Logging in failed: " + reply.s);
       document.getElementById("input_name").value = "";
       document.getElementById("input_pw").value = "";
     }
@@ -622,11 +625,13 @@ function startgame(game) {
       termemu.resize(reply.h, reply.w);
       setTitle("Playing as " + session.lname);
       debug(1, "Playing with id " + session.id);
+      message("Your game has started.");
       setmode("play");
       getData();
     }
     else if (reply.t == 'E') {
       debug(1, "Could not start game: " + reply.s);
+      message("Your game could not be started: " + reply.s);
       if (reply.c == 1) {
         logout();
       }
@@ -656,11 +661,13 @@ function startwatching(gamenumber) {
       termemu.toAltBuf();
       setTitle("Watching");
       debug(1, "Watching with id " + session.id);
+      message("You are now watching.");
       setmode("play");
       getData();
     }
     else if (reply.t == 'E') {
       debug(1, "Could not watch game " + gamenumber + ": " + reply.s);
+      message("The game could not be watched: " + reply.s);
       getcurrent();
     }
   };
@@ -693,14 +700,17 @@ function formreg(ev) {
     if (reply.t == 'r') {
       /* Success */
       debug(1, "Registered account: " + reply.u);
+      message("Welcome " + reply.u + ", you are now registered.");
       session.lcred = reply.k;
       session.lname = reply.u;
       setTitle("Logged in as " + session.lname);
       debug(1, "Logged in as " + session.lname + " with id " + session.lcred);
+      message("You are now logged in as " + reply.u + ".");
       setmode("choose");
     }
     else if (reply.t == 'E') {
       debug(1, "Could not register: " + reply.s);
+      message("Registration failed.");
       document.getElementById("regin_name").value = "";
       document.getElementById("regin_pw").value = "";
       document.getElementById("regin_email").value = "";
@@ -797,6 +807,14 @@ function toggleBlock(id) {
     element.style.display = "none";
 }
 
+function message(msg, type) {
+  var msgdiv = document.createElement("div");
+  var msgtext = document.createTextNode(msg);
+  msgdiv.appendChild(msgtext);
+  var msgcontainer = document.getElementById("messages");
+  msgcontainer.insertBefore(msgdiv, msgcontainer.firstChild);
+}
+
 function debug(level, msg) {
   if (level < debugSuppress)
     return;
diff --git a/style-rlg.css b/style-rlg.css
index 0a91eed..573d3ee 100644
--- a/style-rlg.css
+++ b/style-rlg.css
@@ -80,6 +80,20 @@ div#keys {
 	font-size: 12px;
 }
 
+div#messages {
+	width: 100%;
+	max-height: 10em;
+	overflow: scroll;
+	clear: both;
+}
+
+div#messages div {
+	margin: 0.4em 0.8em;
+	padding: 0.4em 0.4em;
+	font-weight: bold;
+	background-color: white;
+}
+
 div#debug {
 	display: none;
 }