[Toss-devel-svn] SF.net SVN: toss:[1442] trunk/Toss

[<luk...@us...>]

Revision: 1442
          http://toss.svn.sourceforge.net/toss/?rev=1442&view=rev
Author:   lukaszkaiser
Date:     2011-05-15 22:48:50 +0000 (Sun, 15 May 2011)

Log Message:
-----------
Web user interface improvements.

Modified Paths:
--------------
    trunk/Toss/Server/ReqHandler.ml
    trunk/Toss/Server/ReqHandler.mli
    trunk/Toss/Server/Server.ml
    trunk/Toss/WebClient/Connect.js
    trunk/Toss/WebClient/DefaultStyle.js
    trunk/Toss/WebClient/Login.js
    trunk/Toss/WebClient/Main.js
    trunk/Toss/WebClient/Style.css
    trunk/Toss/WebClient/index.html
    trunk/Toss/WebClient/pics/Breakthrough.png
    trunk/Toss/WebClient/pics/Checkers.png
    trunk/Toss/WebClient/pics/Chess.png
    trunk/Toss/WebClient/pics/Connect4.png
    trunk/Toss/WebClient/pics/Connect4.svg
    trunk/Toss/WebClient/pics/Entanglement.png
    trunk/Toss/WebClient/pics/Gomoku.png
    trunk/Toss/WebClient/pics/Gomoku.svg
    trunk/Toss/WebClient/pics/Pawn-Whopping.png
    trunk/Toss/WebClient/pics/Style.css
    trunk/Toss/WebClient/pics/Style2.css
    trunk/Toss/WebClient/pics/Tic-Tac-Toe.png
    trunk/Toss/WebClient/pics/Tic-Tac-Toe.svg
    trunk/Toss/WebClient/pics/convert_all.sh

Added Paths:
-----------
    trunk/Toss/WebClient/pics/Style3.css

Removed Paths:
-------------
    trunk/Toss/WebClient/contact.html

Modified: trunk/Toss/Server/ReqHandler.ml
===================================================================
--- trunk/Toss/Server/ReqHandler.ml	2011-05-14 14:30:21 UTC (rev 1441)
+++ trunk/Toss/Server/ReqHandler.ml	2011-05-15 22:48:50 UTC (rev 1442)
@@ -6,7 +6,9 @@
 let html_dir_path = ref (if Sys.file_exists "/usr/share/toss" then
     "/usr/share/toss/html" else "WebClient/")
 
+let quit_on_eof = ref true;
 
+
 (* ---------- Basic request type and internal handler ---------- *)
 
 type req_state =
@@ -55,12 +57,15 @@
     let heur = match game_modified, g_heur with
       | false, Some h -> Some h
       | true, _ | _, None -> Some (compute_heuristic advr state) in
-    let (move, _) = 
-      Aux.random_elem (Play.maximax_unfold_choose effort
-			 (fst state) (snd state) (Aux.unsome heur)) in
-    Play.cancel_timeout ();
-    (heur, game_modified, state, gdl_transl, playclock),
-    Move.move_gs_str state move
+    try
+      let (move, _) = 
+	Aux.random_elem (Play.maximax_unfold_choose effort
+			   (fst state) (snd state) (Aux.unsome heur)) in
+      Play.cancel_timeout ();
+      (heur, game_modified, state, gdl_transl, playclock),
+      Move.move_gs_str state move
+    with Not_found -> (heur, game_modified, state, gdl_transl, playclock), 
+      "ERR: suggest called but no possible moves!"
   )
 
   | Aux.Left(Arena.ApplyRule (r_name,  mtch, t, p) as req) ->
@@ -399,7 +404,7 @@
     let content = Aux.input_file f in
     close_in f;
     let tp = match String.sub fname ((String.index fname '.') + 1) 2 with
-      | "ht" -> "text/html charset=utf-8"
+      | "ht" -> "text/html; charset=utf-8"
       | "ic" -> "image/x-icon"
       | "pn" -> "image/png"
       | "cs" -> "text/css"
@@ -707,14 +712,15 @@
       output_string out_ch ("ERR could not parse\n");
       flush out_ch;
       rstate, true
-    | End_of_file ->
+    | End_of_file when !quit_on_eof ->
       output_string out_ch ("ERR processing completed -- EOF\n");
       flush out_ch;
-      raise End_of_file      
+      raise End_of_file
     | exn ->
       Printf.printf "Toss Server: error -- exception %s\n%!"
         (Printexc.to_string exn);
       Printf.printf "Exception backtrace: %s\n%!"
         (Printexc.get_backtrace ());
       output_string out_ch ("ERR internal error -- see server stdout\n");
+      flush out_ch;
       rstate, true

Modified: trunk/Toss/Server/ReqHandler.mli
===================================================================
--- trunk/Toss/Server/ReqHandler.mli	2011-05-14 14:30:21 UTC (rev 1441)
+++ trunk/Toss/Server/ReqHandler.mli	2011-05-15 22:48:50 UTC (rev 1442)
@@ -5,6 +5,7 @@
 (** Set debugging level. *)
 val set_debug_level : int -> unit
 
+val quit_on_eof : bool ref
 
 (** {2 Request Handling Functions} *)
 

Modified: trunk/Toss/Server/Server.ml
===================================================================
--- trunk/Toss/Server/Server.ml	2011-05-14 14:30:21 UTC (rev 1441)
+++ trunk/Toss/Server/Server.ml	2011-05-15 22:48:50 UTC (rev 1442)
@@ -169,6 +169,8 @@
     ("-nm", Arg.Unit (fun () -> Heuristic.use_monotonic := false),
      " monotonicity off");
     ("-p", Arg.Int (fun i -> (port := i)), " port number (default: 8110)");
+    ("-eof", Arg.Unit (fun () -> ReqHandler.quit_on_eof := false),
+     "do not quit server on end of file of requests");
     ("-html", Arg.String (fun s -> ReqHandler.html_dir_path := s), 
      "set path to directory with html files for the web-based client");
     ("-db", Arg.String (fun s -> (DB.dbFILE := s)), "use specified DB file");

Modified: trunk/Toss/WebClient/Connect.js
===================================================================
--- trunk/Toss/WebClient/Connect.js	2011-05-14 14:30:21 UTC (rev 1441)
+++ trunk/Toss/WebClient/Connect.js	2011-05-15 22:48:50 UTC (rev 1442)
@@ -28,7 +28,8 @@
 var PAYOFF_STR = ""
 var PLAYER_STR = ""
 
-var ASYNC_REQ_PENDING = 0;
+var ASYNC_ALL_REQ_PENDING = 0;
+var ASYNC_CMD_REQ_PENDING = {};
 
 // Helper function: sign of a number.
 function sign (x) { 
@@ -78,21 +79,32 @@
 }
 
 // Send [msg] to server asynchronously, ignore response text.
-function async_server_msg (msg, f) {
+function async_server_msg (msg, count, f) {
     var xml_request = new XMLHttpRequest ();
     xml_request.open ('POST', 'Handler', true);
     xml_request.setRequestHeader ('Content-Type',
         'application/x-www-form-urlencoded; charset=UTF-8');
-    xml_request.onreadystatechange = function () {
-	if (xml_request.readyState == 4) {
-	    ASYNC_REQ_PENDING -= 1;
-	    resp = xml_request.responseText;
-	    if (resp.indexOf ("MOD_PYTHON ERROR") > -1) {
-		alert (resp.substring(resp.indexOf("Traceback")));
-	    } else { f(resp) };
+    if (count) {
+	xml_request.onreadystatechange = function () {
+	    if (xml_request.readyState == 4) {
+		ASYNC_ALL_REQ_PENDING -= 1;
+		resp = xml_request.responseText;
+		if (resp.indexOf ("MOD_PYTHON ERROR") > -1) {
+		    alert (resp.substring(resp.indexOf("Traceback")));
+		} else { f(resp) };
+	    }
 	}
+    } else {
+	xml_request.onreadystatechange = function () {
+	    if (xml_request.readyState == 4) {
+		resp = xml_request.responseText;
+		if (resp.indexOf ("MOD_PYTHON ERROR") > -1) {
+		    alert (resp.substring(resp.indexOf("Traceback")));
+		} else { f(resp) };
+	    }
+	}
     };
-    ASYNC_REQ_PENDING += 1;
+    if (count) { ASYNC_ALL_REQ_PENDING += 1; }
     xml_request.send (msg);
 }
 
@@ -103,12 +115,19 @@
 
 // Send [msg] to server attaching prefix '[cmd]#' async., ignore response.
 function async_srv_ignore (cmd, msg) {
-    return (async_server_msg (cmd + '#' + msg, function(x) { } ));
+    return (async_server_msg (cmd + '#' + msg, false, function(x) { } ));
 }
 
 // Send [msg] to server attaching prefix '[cmd]#' async., run f on return.
 function async_srv (cmd, msg, f) {
-    return (async_server_msg (cmd + '#' + msg, f ));
+    if (ASYNC_CMD_REQ_PENDING[cmd]) {
+	ASYNC_CMD_REQ_PENDING[cmd] += 1;
+    } else { ASYNC_CMD_REQ_PENDING[cmd] = 1; };
+    var fm = function (m) {
+	ASYNC_CMD_REQ_PENDING[cmd] -= 1;
+	f ();
+    };
+    return (async_server_msg (cmd + '#' + msg, true, f));
 }
 
 // Strip [c1] and [c2] from beginning and end of [str].
@@ -174,9 +193,9 @@
 function translate_pos (pos) {
     var x = ((pos[0] - MODEL_MINX) * SVG_WIDTH) / MODEL_WIDTH;
     if (VIEW_MIRROR == 0) {
-      var y = ((pos[1] - MODEL_MINY) * SVG_HEIGHT) / MODEL_HEIGHT;
+	var y = ((pos[1] - MODEL_MINY) * SVG_HEIGHT) / MODEL_HEIGHT;
     } else {
-      var y = ((MODEL_HEIGHT - (pos[1] - MODEL_MINY)) * SVG_WIDTH) / MODEL_HEIGHT;
+	var y = ((MODEL_HEIGHT - (pos[1] - MODEL_MINY))*SVG_WIDTH)/MODEL_HEIGHT;
     }
     return ([x + SVG_MARGINX, y + SVG_MARGINY])
 }
@@ -209,26 +228,37 @@
     SVG_MARGINY = margx;
     var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
     svg.setAttribute('id', 'svg');
-    var wx = SVG_WIDTH + 2*SVG_MARGINX;
-    var wy = SVG_HEIGHT + 2*SVG_MARGINY;
-    svg.setAttribute('viewBox', '0 0 ' + wx + " " + wy);
+    var wx = SVG_WIDTH + 2*SVG_MARGINX + 20;
+    var wy = SVG_HEIGHT + 2*SVG_MARGINY + 20;
+    svg.setAttribute('viewBox', '-10 -10 ' + wx + " " + wy);
     document.getElementById(parent_id).appendChild(svg);
 }
 
-// Create new svg element [elem], child of svg, with [attributes].
-function svg_from_string (x, y, sizex, sizey, s) {
+// Just make an svg elem from string
+function bare_svg_from_string (s) {
     var parser = new DOMParser ();
     var svgs = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg">';
+    var doc = parser.parseFromString(svgs + s + '</svg>', "text/xml");
+    return (document.adoptNode(doc.childNodes[0]).childNodes[0]);
+}
+
+// Create new svg element [elem], child of svg, set attributes, scale.
+function svg_from_string (x, y, sizex, sizey, s, attributes) {
+    var parser = new DOMParser ();
+    var svgs = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg">';
     var scfx = (SUGGESTED_ELEM_SIZEX - 10) / sizex;
     var scfy = (SUGGESTED_ELEM_SIZEY - 10) / sizey;
     var sc = "scale(" + scfx + "," + scfy + ")";
     var gs = '<g transform="translate(' + x + "," + y + ") " + sc + '">';
-    var doc = parser.parseFromString(svgs+ gs+ s + ' </g> </svg>', "text/xml");
-    var elem = document.adoptNode(doc.childNodes[0]);
-    return(elem.childNodes[0]);
+    var doc = parser.parseFromString(svgs+ gs+ s + '</g></svg>', "text/xml");
+    var elem = document.adoptNode(doc.childNodes[0]).childNodes[0];
+    var elem_in = elem.childNodes[0];
+    for (var i = 0; i < attributes.length; i++) {
+        elem_in.setAttribute (attributes[i][0], attributes[i][1].toString());
+    }
+    return (elem);
 }
 
-
 // Create new svg element [elem], child of svg, with [attributes].
 function add_svg (elem, attributes) {
     var elem = document.createElementNS("http://www.w3.org/2000/svg", elem);

Modified: trunk/Toss/WebClient/DefaultStyle.js
===================================================================
--- trunk/Toss/WebClient/DefaultStyle.js	2011-05-14 14:30:21 UTC (rev 1441)
+++ trunk/Toss/WebClient/DefaultStyle.js	2011-05-15 22:48:50 UTC (rev 1442)
@@ -2,10 +2,11 @@
 
 // This module implements default drawing style for games.
 // Functions expected from this module:
-// - draw_elem (elem)
+// - draw_background (game)
+// - draw_elem (game, elem)
 // - highlight_elem (elem)
 // - unhighlight_elem (elem)
-// - draw_rel (rel_name, args)
+// - draw_rel (game, rel_name, args)
 
 
 var DEFpawn = '<g transform="translate(-22.5,-22.5)"> \
@@ -140,6 +141,19 @@
     return (parseInt(s).toString() == s)
 }
 
+// Mostly we skip background drawings, but when needed, they are here.
+function draw_background (game) {
+   if (game == "Connect4") {
+       var x = SVG_MARGINX;
+       var y = SVG_MARGINY;
+       var w = SVG_WIDTH + 2 * x;
+       var h = SVG_HEIGHT + 2 * x;
+       var b = '<rect x="' + 0 + '" y="' + 0 + '" width="' + w + '" height="'
+	   + h + '" stroke-width="5" rx="5" ry="5" id="board_connect4" />';
+       document.getElementById("svg").appendChild(bare_svg_from_string (b));
+   }
+}
+
 // To draw chess board we distinguish even/odd placed elements.
 function elem_class (elem) {
     var elem_cl = "model-elem";
@@ -151,17 +165,25 @@
 }
 
 // Draw the element [elem].
-function draw_elem (elem) {
+function draw_elem (game, elem) {
     var pos = ELEM_POS[elem];
-    add_svg ("rect",
-             [["x", pos[0] - SUGGESTED_ELEM_SIZEX], 
-              ["y", pos[1] - SUGGESTED_ELEM_SIZEY], 
-              ["width", 2 * SUGGESTED_ELEM_SIZEX],
-              ["height", 2 * SUGGESTED_ELEM_SIZEX],
-              ["id", "elem_" + elem],
-              ["class", elem_class(elem)],
-              ["onclick", ("handle_elem_click('" + elem + "')")]]
-             );
+    if (game != "Connect4") {
+	add_svg ("rect",
+		 [["x", pos[0] - SUGGESTED_ELEM_SIZEX], 
+		  ["y", pos[1] - SUGGESTED_ELEM_SIZEY], 
+		  ["width", 2 * SUGGESTED_ELEM_SIZEX],
+		  ["height", 2 * SUGGESTED_ELEM_SIZEY],
+		  ["id", "elem_" + elem],
+		  ["class", elem_class(elem)],
+		  ["onclick", ("handle_elem_click('" + elem + "')")]]
+		);
+    } else {
+	var circ = svg_from_string
+	(pos[0], pos[1], 10, 10, '<circle cx="0" cy="0" r="20" />',
+	 [["id", "elem_" + elem], ["class", elem_class(elem)],
+	  ["onclick", "handle_elem_click('" + elem + "')"]])
+	document.getElementById("svg").appendChild(circ);
+    }
 }
 
 // Highlight the element [elem].
@@ -177,18 +199,45 @@
 }
 
 // Draw relation [rel_name] between elements [args].
-function draw_rel (rel_name, args) {
+function draw_rel (game, rel_name, args) {
     if (args.length == 1) {
         var is = 'id="' + "pred_" + args[0] + "_" + rel_name + '" ';
         var hs = 'onclick="' + "handle_elem_click('" + args[0] + "')" + '" ';
         var pos = ELEM_POS[args[0]];
         if (rel_name == "P") { // Tic-tac-toe cross
-          var cs = 'class="' + "model-pred-" + rel_name + '" ';
-          var ls1 = '<line x1="-10" y1="-10" x2="10" y2="10" />';
-	  var ls2 = '<line x1="10" y1="-10" x2="-10" y2="10" />';
-          var cr = svg_from_string (pos[0], pos[1], 12, 12,
-	      '<g ' + cs + is + hs + '>' + ls1 + ls2 + '</g>');
-	  document.getElementById("svg").appendChild(cr);
+	    if (game != "Connect4") {
+		var cs = 'class="' + "model-pred-" + rel_name + '" ';
+		var ls1 = '<line x1="-10" y1="-10" x2="10" y2="10" />';
+		var ls2 = '<line x1="10" y1="-10" x2="-10" y2="10" />';
+		var cr = svg_from_string 
+		(pos[0], pos[1], 12, 12,
+		 '<g ' + cs + is + hs + '>' + ls1 + ls2 + '</g>', []);
+		document.getElementById("svg").appendChild(cr);
+	    } else {
+		var cls = "model-pred-" + rel_name;
+		var ids = "pred_" + args[0] + "_" + rel_name;
+		var circ = svg_from_string
+		(pos[0], pos[1], 10, 10, 
+		 '<circle cx="0" cy="0" r="20" />',
+		 [["id", ids], ["class", cls],
+		  ["onclick", "handle_elem_click('" + args[0] + "')"]]);
+		document.getElementById("svg").appendChild(circ);
+	    }
+	} else if (rel_name == "Q") { // Tic-tac-toe Circle
+	    var clp = ["class", "model-pred-" + rel_name];
+	    var idp = ["id", "pred_" + args[0] + "_" + rel_name];
+	    var hdp = ["onclick", ("handle_elem_click('" + args[0] + "')")];
+	    if (game != "Connect4") {
+		var circ = svg_from_string (pos[0], pos[1], 10, 10, 
+					    '<circle cx="0" cy="0" r="8" />',
+					    [idp, clp, hdp]);
+		document.getElementById("svg").appendChild(circ);
+	    } else {
+		var circ = svg_from_string (pos[0], pos[1], 10, 10, 
+					    '<circle cx="0" cy="0" r="20" />',
+					    [idp, clp, hdp]);
+		document.getElementById("svg").appendChild(circ);
+	    }
         } else if (rel_name == "R") { // Robber in Entanglement
           add_svg ("circle",
              [["cx", pos[0]], ["cy", pos[1]], ["r", SUGGESTED_ELEM_SIZEX - 5],
@@ -197,53 +246,53 @@
               ["onclick", ("handle_elem_click('" + args[0] + "')")]]);
         } else if (rel_name == "wP") { // Chess Figure: white pawn
           var f = svg_from_string (pos[0], pos[1], 20, 20,
-	      '<g class="chessW" ' + is + hs + '>' + DEFpawn + '</g>');
+	      '<g class="chessW" ' + is + hs + '>' + DEFpawn + '</g>', []);
 	  document.getElementById("svg").appendChild(f);
         } else if (rel_name == "bP") { // Chess Figure: black pawn
           var f = svg_from_string (pos[0], pos[1], 20, 20,
-	      '<g class="chessB" ' + is + hs + '>' + DEFpawn + '</g>');
+	      '<g class="chessB" ' + is + hs + '>' + DEFpawn + '</g>', []);
 	  document.getElementById("svg").appendChild(f);
         } else if (rel_name == "wN") { // Chess Figure: white knight
           var f = svg_from_string (pos[0], pos[1], 20, 20,
-	      '<g class="chessW" ' + is + hs + '>' + DEFknight + '</g>');
+	      '<g class="chessW" ' + is + hs + '>' + DEFknight + '</g>', []);
 	  document.getElementById("svg").appendChild(f);
         } else if (rel_name == "bN") { // Chess Figure: black knight
           var f = svg_from_string (pos[0], pos[1], 20, 20,
-	      '<g class="chessB" ' + is + hs + '>' + DEFknight + '</g>');
+	      '<g class="chessB" ' + is + hs + '>' + DEFknight + '</g>', []);
 	  document.getElementById("svg").appendChild(f);
         } else if (rel_name == "wB") { // Chess Figure: white bishop
           var f = svg_from_string (pos[0], pos[1], 20, 20,
-	      '<g class="chessW" ' + is + hs + '>' + DEFbishop + '</g>');
+	      '<g class="chessW" ' + is + hs + '>' + DEFbishop + '</g>', []);
 	  document.getElementById("svg").appendChild(f);
         } else if (rel_name == "bB") { // Chess Figure: black bishop
           var f = svg_from_string (pos[0], pos[1], 20, 20,
-	      '<g class="chessB" ' + is + hs + '>' + DEFbishop + '</g>');
+	      '<g class="chessB" ' + is + hs + '>' + DEFbishop + '</g>', []);
 	  document.getElementById("svg").appendChild(f);
         } else if (rel_name == "wR") { // Chess Figure: white rook
           var f = svg_from_string (pos[0], pos[1], 20, 20,
-	      '<g class="chessW" ' + is + hs + '>' + DEFrook + '</g>');
+	      '<g class="chessW" ' + is + hs + '>' + DEFrook + '</g>', []);
 	  document.getElementById("svg").appendChild(f);
         } else if (rel_name == "bR") { // Chess Figure: black rook
           var f = svg_from_string (pos[0], pos[1], 20, 20,
-	      '<g class="chessB" ' + is + hs + '>' + DEFrook + '</g>');
+	      '<g class="chessB" ' + is + hs + '>' + DEFrook + '</g>', []);
 	  document.getElementById("svg").appendChild(f);
         } else if (rel_name == "wQ" || rel_name == "Wq") { 
 	    // Chess Figure: white queen or Checkers: white queen
             var f = svg_from_string (pos[0], pos[1], 20, 20,
-	        '<g class="chessW" ' + is + hs + '>' + DEFqueen + '</g>');
+	        '<g class="chessW" ' + is + hs + '>' + DEFqueen + '</g>', []);
 	    document.getElementById("svg").appendChild(f);
         } else if (rel_name == "bQ" || rel_name == "Bq") { 
 	    // Chess Figure: black queen or Checkers: black queen
             var f = svg_from_string (pos[0], pos[1], 20, 20,
-	        '<g class="chessB" ' + is + hs + '>' + DEFqueen + '</g>');
+	        '<g class="chessB" ' + is + hs + '>' + DEFqueen + '</g>', []);
 	  document.getElementById("svg").appendChild(f);
         } else if (rel_name == "wK") { // Chess Figure: white king
           var f = svg_from_string (pos[0], pos[1], 20, 20,
-	      '<g class="chessW" ' + is + hs + '>' + DEFking + '</g>');
+	      '<g class="chessW" ' + is + hs + '>' + DEFking + '</g>', []);
 	  document.getElementById("svg").appendChild(f);
         } else if (rel_name == "bK") { // Chess Figure: black king
           var f = svg_from_string (pos[0], pos[1], 20, 20,
-	      '<g class="chessB" ' + is + hs + '>' + DEFking + '</g>');
+	      '<g class="chessB" ' + is + hs + '>' + DEFking + '</g>', []);
 	  document.getElementById("svg").appendChild(f);
         } else {
           add_svg ("circle",

Modified: trunk/Toss/WebClient/Login.js
===================================================================
--- trunk/Toss/WebClient/Login.js	2011-05-14 14:30:21 UTC (rev 1441)
+++ trunk/Toss/WebClient/Login.js	2011-05-15 22:48:50 UTC (rev 1442)
@@ -54,6 +54,10 @@
 	var udata = srv("USERPLAYS", "user");
 	if (udata != "") { setup_user (udata.split("$")) };
     }
+    if (window.location.href.indexOf("?simple=true") > 0) {
+	document.getElementById("loginform").style.display = "none";
+	document.getElementById("topright-register").style.display = "none";
+    };
     cur_game = "";
     if (game) { var cur_game = game; }
     var gindex = window.location.href.indexOf("?game=")
@@ -235,9 +239,10 @@
 function begin_mailto (name, domain, title) {
     var address = name + '@' + domain;
     if(title) {
-        document.write("<a class='mail' href='mailto:" + address + "'>" + "<span>");
+        document.write("<a class='contact' href='mailto:" + address + "'>" +
+		       title + "<span style='display: none;'>");
     } else {
-        document.write("<a class='mail' href='mailto:" + address + "'>" +
+        document.write("<a class='contact' href='mailto:" + address + "'>" +
 		       address + "<span style='display: none;'>");
     }
 }

Modified: trunk/Toss/WebClient/Main.js
===================================================================
--- trunk/Toss/WebClient/Main.js	2011-05-14 14:30:21 UTC (rev 1441)
+++ trunk/Toss/WebClient/Main.js	2011-05-15 22:48:50 UTC (rev 1442)
@@ -16,6 +16,8 @@
 
 var LAST_CLICKED_ELEM = "";
 
+var SIMPLE_MOVES = true;
+
 // Get model information from server.
 function get_model_info () {
     get_elems_with_pos ();
@@ -35,12 +37,13 @@
 
 // Draw the model using function from Toss[X]Style.js.
 // WARNING: must call get_model_info first!
-function draw_model () {
+function draw_model (game) {
+    draw_background (game);
     for (var i = 0; i < ELEMS.length; i++) {
-        draw_elem (ELEMS[i]);
+        draw_elem (game, ELEMS[i]);
     }
     for (var i = 0; i < RELS.length; i++) {
-        draw_rel (RELS[i][0], RELS[i][1]);
+        draw_rel (game, RELS[i][0], RELS[i][1]);
     }
 }
 
@@ -55,8 +58,17 @@
     svg_e.parentNode.removeChild (svg_e);
 }
 
+function win_s (i) {
+    var pl = PLAYS[CUR_PLAY_I][i];
+    if (pl == UNAME) { return ("You Win!"); }
+    return (disp_name(pl) + " Wins");
+}
+
 // Substitute players for 0 and 1 in a payoff string.
 function subst_pl (s) {
+    if (s == "0: 1., 1: -1.") { return (win_s (0)); }
+    if (s == "0: -1., 1: 1.") { return (win_s (1)); }
+    if (s == "0: 0., 1: 0.") { return ("Tie"); }
     var s1 = s.replace (/0:/g, disp_name(PLAYS[CUR_PLAY_I][0]) + ":");
     var s2 = s1.replace (/1:/g, disp_name(PLAYS[CUR_PLAY_I][1]) + ":");
     var s3 = s2.replace (/1.,/g, "1,");
@@ -68,16 +80,24 @@
 // Full redraw.
 function full_redraw () {
     clear_svg ();
-    document.getElementById("working").style.display = "block";
+    if (! SIMPLE_MOVES) {
+	document.getElementById("working").style.display = "block";
+    }
     get_model_info ();
     create_svg_box (SVG_MARGINX, SVG_MARGINY, "board");
-    draw_model ();
+    draw_model (GAME_NAME);
      if (PAYOFF_STR == "") {
 	document.getElementById('movebt').innerHTML = "Make move:";
 	document.getElementById('cur-move').innerHTML = "none";
     } else {
-	document.getElementById('movebt').innerHTML = "Payoffs:";
-	document.getElementById('cur-move').innerHTML = subst_pl(PAYOFF_STR);
+	if (SIMPLE_MOVES) {
+	    document.getElementById("board").style.paddingTop = "0em";
+	}
+	document.getElementById("move-info-par").style.display = "none";
+	document.getElementById('payoffs').innerHTML = 
+	    "Result: " + subst_pl(PAYOFF_STR);
+	document.getElementById('payoffs').style.display = "inline";
+	document.getElementById('new-play-par').style.display = "block";
     }
     document.getElementById("working").style.display = "none";
 }
@@ -120,13 +140,34 @@
 
 // Handler for clicks on elements.
 function handle_elem_click (elem) {
-    if (ASYNC_REQ_PENDING != 0) { return; }
+    if (ASYNC_ALL_REQ_PENDING != 0) { return; }
     var moves = get_moves (elem, LAST_CLICKED_ELEM);
     if (moves.length == 0) { 
 	LAST_CLICKED_ELEM = "";
 	moves = get_moves (elem, LAST_CLICKED_ELEM); 
     };
-    if (moves.length > ELEM_COUNTERS[elem]) {
+    if (moves.length == 0) { // still no moves, unhighlight
+	for (var i = 0; i < CUR_ELEMS.length; i++) {
+            unhighlight_elem (CUR_ELEMS[i]);
+	}
+	CUR_ELEMS = [];
+	CUR_MOVE = "";
+	LAST_CLICKED_ELEM = "";
+    } else if (moves.length == 1) {
+        show_move (moves[0]);
+        ELEM_COUNTERS[elem] = 1;
+	if (SIMPLE_MOVES) { make_move (); };
+    } else if (LAST_CLICKED_ELEM != "" && LAST_CLICKED_ELEM != elem //move fast
+	       && moves.length == 2 && moves[0].length > moves[1].length + 2) {
+        show_move (moves[1]);
+        ELEM_COUNTERS[elem] = 2;
+	if (SIMPLE_MOVES) { make_move (); };
+    } else if (LAST_CLICKED_ELEM != "" && LAST_CLICKED_ELEM != elem //move fast
+	       && moves.length == 2 && moves[1].length > moves[0].length + 2) {
+        show_move (moves[0]);
+        ELEM_COUNTERS[elem] = 1;
+	if (SIMPLE_MOVES) { make_move (); };
+    } else if (moves.length > ELEM_COUNTERS[elem]) {
         show_move (moves[ELEM_COUNTERS[elem]]);
         ELEM_COUNTERS[elem] += 1;
     } else if (moves.length > 0) {
@@ -151,7 +192,7 @@
 }
 
 function disp_name (uname) {
-    if (uname == "guest") { return ("Guest"); }
+    if (uname == "guest") { return ("You"); }
     if (UNAME_TO_NAME_MAP[uname]) { return (UNAME_TO_NAME_MAP[uname]); }
     name = srv ("GET_NAME", uname);
     UNAME_TO_NAME_MAP[uname] = name;
@@ -219,7 +260,9 @@
     document.getElementById("game-disp").style.display = "block";
     document.getElementById("play-number").innerHTML = "" + play_id;
     CUR_PLAY_I = pi;
-    VIEW_MIRROR = (PLAYS[CUR_PLAY_I][0] == UNAME) ? 0 : 1;
+    if (game == "Connect4") { VIEW_MIRROR = 0; } else {
+	VIEW_MIRROR = (PLAYS[CUR_PLAY_I][0] == UNAME) ? 0 : 1;
+    }
     document.getElementById("cur-player").innerHTML = 
 	disp_name(PLAYS[CUR_PLAY_I][PLAYS[CUR_PLAY_I][3]]);
     toss_open_db (play_py_id(pi));
@@ -229,14 +272,16 @@
 
 // Apply current move.
 function make_move () {
-    if (ASYNC_REQ_PENDING != 0) return;
+    if (ASYNC_ALL_REQ_PENDING != 0) { alert ("async"); return; }
     if (CUR_MOVE == "") return;
     var m = PLAYS[CUR_PLAY_I][3];
     if (PLAYS[CUR_PLAY_I][m] != UNAME && PLAYS[CUR_PLAY_I][m] != "computer") {
         alert ("It is your Opponent's turn");
         return;
     }
-    document.getElementById("working").style.display = "block";
+    if (! SIMPLE_MOVES) {
+	document.getElementById("working").style.display = "block";
+    }
     async_srv("MOVE_PLAY", 'c, '+ CUR_MOVE +', '+ play_py_id (CUR_PLAY_I),
 	      make_move_continue);
 }
@@ -257,7 +302,8 @@
     var li = new_play_item (GAME_NAME, CUR_PLAY_I);
     old_li.parentNode.replaceChild (li, old_li);
     if (PLAYS[CUR_PLAY_I][PLAYER_STR] == "computer") {
-	suggest_move_async (make_move);
+	var mv_time = document.getElementById("speed").value;
+	suggest_move_async (mv_time, make_move);
     }
 }
 
@@ -271,7 +317,7 @@
     li.setAttribute ("class", "opponents-list-elem");
     li.setAttribute ("id", "opponent-" + uid); // + "-" + index
     li.innerHTML = 
-	'<button class="dbt" onclick="new_play_do(' + "'" + uid + "'" + ')">' +
+	'<button class="dbt" onclick="new_play_do('+ "'" + uid + "', 0"+ ')">'+
         disp_name(uid) + ' (' + uid + ') </button>';
     return (li);
 }
@@ -293,7 +339,7 @@
   var zeroli = document.createElement('li');
   zeroli.setAttribute ("class", "opponents-list-elem");
   zeroli.setAttribute ("id", "opponent-" + "-0");
-  zeroli.innerHTML = '<button class="dbt" onclick="new_play_do(-1)">' + 
+  zeroli.innerHTML = '<button class="dbt" onclick="new_play_do(-1, 0)">' + 
 	'Play against Yourself</button>';
   o.appendChild (zeroli);
   for (var i = 0; i < FRIENDS.length; i++) {
@@ -307,6 +353,8 @@
 function new_play (game) {
     if (UNAME == "") { alert ("Please log in to create plays"); return; }
     GAME_NAME = game;
+    var olist = document.getElementById("opponents-list");
+    while (olist.childNodes.length > 0) { olist.removeChild(olist.firstChild); }
     make_opnt_list ();
 }
 
@@ -352,10 +400,16 @@
 function new_play_guest (game) {
     GAME_NAME = game;
     UNAME = "guest";
-    new_play_do ("computer");
+    document.getElementById("topuser").innerHTML = "Welcome!";
+    document.getElementById("loginform").style.display = "none";
+    document.getElementById("topright-register").style.display = "none";
+    document.getElementById("topright").style.display = "inline";
+    document.getElementById("logoutbt").style.display = "none";
+    document.getElementById("welcome").style.display = "none";
+    new_play_do ("computer", 0);
 }
 
-function new_play_do (opp_uid) {
+function new_play_do (opp_uid, vm) {
     list_plays (GAME_NAME)
     game_click (GAME_NAME)
     document.getElementById ("game-title").innerHTML = GAME_NAME;
@@ -373,7 +427,7 @@
     FREE_PLAY_NO = parseInt(info_nbr.substring(0, info_idx));
     document.getElementById("play-number").innerHTML = "" + FREE_PLAY_NO;
     CUR_PLAY_I = PLAYS.length;
-    VIEW_MIRROR = 0;
+    VIEW_MIRROR = vm;
     document.getElementById("cur-player").innerHTML = disp_name(UNAME);
     document.getElementById("game-disp").style.display = "block";
     document.getElementById("plays").style.left = "30em";
@@ -391,6 +445,32 @@
     FRIENDS = convert_python_list (',', lst);
 }
 
+function play_anew (me_starts) {
+    document.getElementById('payoffs').innerHTML = "Not Finished Yet";
+    document.getElementById('payoffs').style.display = "none";
+    document.getElementById('new-play-par').style.display = "none";
+    toggle_suggestions ();
+    toggle_suggestions ();
+    clear_svg ();
+    if (me_starts) {
+	var opp = PLAYS[CUR_PLAY_I][1];
+	if (PLAYS[CUR_PLAY_I][0] != UNAME) { opp = PLAYS[CUR_PLAY_I][0]; }
+	new_play_do (opp, 0);
+    } else {
+	var opp = PLAYS[CUR_PLAY_I][1];
+	if (PLAYS[CUR_PLAY_I][0] != UNAME) { opp = PLAYS[CUR_PLAY_I][0]; }
+	var me = UNAME;
+	UNAME = opp;
+	var vm = (GAME_NAME == "Connect4") ? 0 : 1;
+	new_play_do (me, vm);
+	UNAME = me;
+	if (opp == "computer") {
+	    var mv_time = document.getElementById("speed").value;
+	    suggest_move_async (mv_time, make_move);
+	}
+    }
+}
+
 function decrease_moving (n) {
     document.getElementById("working").innerHTML = "Moving in " + n + "s ...";
     if (n > 0) {
@@ -398,43 +478,44 @@
     }
 }
 
-function suggest_move_async (f) {
-    document.getElementById("working").innerHTML = "Moving in 5s ...";
-    document.getElementById("working").style.display = "block";
-    setTimeout("decrease_moving(4)", 1000)
+function show_moving_msg (n) {
+    if (n > 1) {
+	document.getElementById("working").innerHTML = "Moving in "+ n+ "s ...";
+	document.getElementById("working").style.display = "block";
+	setTimeout("decrease_moving(" + (n-1) + ")", 1000);
+    }
+}
+
+function suggest_move_async (time, f) {
+    show_moving_msg (time);
     var fm = function (m) {
 	document.getElementById("working").style.display = "none";
 	document.getElementById("working").innerHTML = "Working...";
 	if (m != "") { show_move (m); f() }
     };
-    async_srv("SUGGEST", 'c, 5, '+ play_py_id (CUR_PLAY_I), fm);
+    async_srv("SUGGEST", 'c, ' + time + ', '+ play_py_id (CUR_PLAY_I), fm);
 }
 
 function suggest_move_click () {
-    suggest_move_async (function () {});
+    var mv_time = document.getElementById("speed").value;
+    suggest_move_async (mv_time, function () {});
 }
 
-function suggest_move_better_click () {
-    document.getElementById("working").innerHTML = "Moving in 10s ...";
-    document.getElementById("working").style.display = "block";
-    setTimeout("decrease_moving(9)", 1000)
-    var fm = function (m) {
-	document.getElementById("working").style.display = "none";
-	document.getElementById("working").innerHTML = "Working...";
-	if (m != "") { show_move (m); f() }
-    };
-    async_srv("SUGGEST", 'c, 10, '+ play_py_id (CUR_PLAY_I), fm);
-}
-
 function toggle_suggestions () {
     var txt = document.getElementById("suggestions-toggle").innerHTML;
-    if (txt.indexOf ("Show") == -1) {
+    if (txt.indexOf ("Before") == -1) {
+	SIMPLE_MOVES = true;
+	document.getElementById("play-nbr-info").style.display = "none";
+	document.getElementById("board").style.paddingTop = "1em";
 	document.getElementById("suggestions-toggle").innerHTML =
-	    "Show Move Suggestions";
-	document.getElementById("player-info-par").style.display = "none";
+	    "Ask Before Move";
+	document.getElementById("move-info-par").style.display = "none";
     } else {
+	SIMPLE_MOVES = false;
+	document.getElementById("play-nbr-info").style.display = "inline";
+	document.getElementById("board").style.paddingTop = "0em";
 	document.getElementById("suggestions-toggle").innerHTML =
-	    "Hide Move Suggestions";
-	document.getElementById("player-info-par").style.display = "block";
+	    "Move Without Asking";
+	document.getElementById("move-info-par").style.display = "block";
     }
 }

Modified: trunk/Toss/WebClient/Style.css
===================================================================
--- trunk/Toss/WebClient/Style.css	2011-05-14 14:30:21 UTC (rev 1441)
+++ trunk/Toss/WebClient/Style.css	2011-05-15 22:48:50 UTC (rev 1442)
@@ -116,6 +116,25 @@
     top: 2px;
 }
 
+#speed {
+    position: relative;
+    top: -2px;
+    font-weight: bold;
+    font-family: Verdana, 'TeXGyreHerosRegular', sans;
+    color: #400827;
+    background-color: #fff1d4;
+    border-color: #fff1d4;
+    border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-width: 1px;
+}
+
+.speed_val {
+    color: #400827;
+    background-color: #fff1d4;
+    border-color: #400827;
+}
+
 .forminput {
     border-color: #fff1d4;
     border-radius: 4px;
@@ -159,7 +178,7 @@
 
 #logoutbt {
     position: relative;
-    top: -0.2em;
+    top: -0.1em;
     font-family: Verdana, 'TeXGyreHerosRegular', sans;
     font-size: 1em;
     font-weight: bold;
@@ -291,7 +310,7 @@
 
 /* Bottom styles. */
 
-#contact {
+.contact {
     position: absolute;
     top: 0px;
     right: 0.5em;
@@ -421,7 +440,7 @@
 
 #opponents {
     display: none;
-    position: absolute;
+    position: fixed;
     left: 0px;
     right: 0px;
     top: 4em;
@@ -523,9 +542,16 @@
 #move-info-par {
     margin-top: 0.5em;
     padding: 0px;
+    display: none;
 }
 
+#new-play-par {
+    display: none;
+    padding: 0px;
+}
+
 #board {
+    padding-top: 1em;
     min-width: 10em;
     max-width: 120em;
     width: 100%;
@@ -536,10 +562,10 @@
 }
 
 #working {
-    position: absolute;
+    position: fixed;
     left: 0px;
     right: 0px;
-    top: 7em;
+    top: 4em;
     width: 10em;
     margin-left: auto;
     margin-right: auto;
@@ -548,6 +574,7 @@
     color: #fff1d4;
     background-color: #400827;
     padding: 1em;
+    border: 1px solid #260314;
 }
 
 #opening {
@@ -626,13 +653,18 @@
 #svg {
     min-width: 10em;
     max-width: 120em;
-    width: 75%;
+    width: 80%;
     min-height: 10em;
-    max-height: 35em;
-    height: 75%;
+    max-height: 40em;
+    height: 80%;
     /* border: 1px solid #260314; */
 }
 
+#board_connect4 {
+    fill: blue;
+    stroke: #260314;
+}
+
 .model-elem, .model-elem-0, .model-elem-1 {
     fill: #ffe4aa; /* #ffce9e; */
     stroke: #260314;
@@ -659,17 +691,35 @@
     stroke-width: 3px;
 }
 
+.Game-Connect4 .model-elem-highlight {
+    opacity: 0.3;
+}
+
+
 .model-pred-P {
     fill: #400827;
     stroke: #260314;
     stroke-width: 5px;
 }
 
+.Game-Connect4 .model-pred-P {
+    fill: red;
+    stroke: #260314;
+    stroke-width: 3px;
+}
+
 .model-pred-Q {
     fill: #ffe4aa; /* #ffce9e; */
     stroke: #260314;
+    stroke-width: 3px;
 }
 
+.Game-Connect4 .model-pred-Q {
+    fill: yellow;
+    stroke: #260314;
+    stroke-width: 3px;
+}
+
 .model-pred-C {
     fill: #fff1d4;
     stroke: #260314;
@@ -695,13 +745,13 @@
 }
 
 .Game-Checkers .model-pred-B {
-    fill: #fff1d4;
+    fill: white;
     stroke: #260314;
     stroke-width: 3px;
 }
 
 .Game-Checkers .model-pred-W {
-    fill: #400827;
+    fill: red;
     stroke: #260314;
     stroke-width: 3px;
 }
@@ -712,8 +762,7 @@
     stroke-width: 3px;
 }
 
-.Game-Chess .chessW .chess-path-A, .Game-Pawn-Whopping .chessW .chess-path-A,
-  .Game-Checkers .chessB .chess-path-A {
+.Game-Chess .chessW .chess-path-A, .Game-Pawn-Whopping .chessW .chess-path-A {
     opacity: 1;
     fill: #fff1d4;
     fill-opacity: 1;
@@ -728,9 +777,23 @@
     stroke-opacity: 1;
 }
 
-.Game-Chess .chessB .chess-path-A, .Game-Pawn-Whopping .chessB .chess-path-A, 
-  .Game-Checkers .chessW .chess-path-A {
+.Game-Checkers .chessB .chess-path-A {
     opacity: 1;
+    fill: white;
+    fill-opacity: 1;
+    fill-rule: nonzero;
+    stroke: #260314;
+    stroke-width: 1.5;
+    stroke-linecap: round;
+    stroke-linejoin: miter;
+    stroke-miterlimit: 4;
+    stroke-dasharray: none;
+    stroke-dashoffset: 10;
+    stroke-opacity: 1;
+}
+
+.Game-Chess .chessB .chess-path-A, .Game-Pawn-Whopping .chessB .chess-path-A {
+    opacity: 1;
     fill: #400827;
     fill-opacity: 1;
     fill-rule: nonzero;
@@ -744,9 +807,23 @@
     stroke-opacity: 1;
 }
 
-.Game-Chess .chessW .chess-path-B, .Game-Pawn-Whopping .chessW .chess-path-B, 
-  .Game-Checkers .chessB .chess-path-B {
+.Game-Checkers .chessW .chess-path-A {
     opacity: 1;
+    fill: red;
+    fill-opacity: 1;
+    fill-rule: nonzero;
+    stroke: #260314;
+    stroke-width: 1.5;
+    stroke-linecap: round;
+    stroke-linejoin: miter;
+    stroke-miterlimit: 4;
+    stroke-dasharray: none;
+    stroke-dashoffset: 10;
+    stroke-opacity: 1;
+}
+
+.Game-Chess .chessW .chess-path-B, .Game-Pawn-Whopping .chessW .chess-path-B {
+    opacity: 1;
     fill: #fff1d4;
     fill-opacity: 1;
     fill-rule: evenodd;
@@ -759,9 +836,22 @@
     stroke-opacity: 1;
 }
 
-.Game-Chess .chessB .chess-path-B, .Game-Pawn-Whopping .chessB .chess-path-B,
-  .Game-Checkers .chessW .chess-path-B {
+.Game-Checkers .chessB .chess-path-B {
     opacity: 1;
+    fill: white;
+    fill-opacity: 1;
+    fill-rule: evenodd;
+    stroke: #260314;
+    stroke-width: 1.5;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-miterlimit: 4;
+    stroke-dasharray: none;
+    stroke-opacity: 1;
+}
+
+.Game-Chess .chessB .chess-path-B, .Game-Pawn-Whopping .chessB .chess-path-B {
+    opacity: 1;
     fill: #400827;
     fill-opacity: 1;
     fill-rule: evenodd;
@@ -774,9 +864,22 @@
     stroke-opacity: 1;
 }
 
+.Game-Checkers .chessW .chess-path-B {
+    opacity: 1;
+    fill: red;
+    fill-opacity: 1;
+    fill-rule: evenodd;
+    stroke: #260314;
+    stroke-width: 1.5;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-miterlimit: 4;
+    stroke-dasharray: none;
+    stroke-opacity: 1;
+}
 
-.Game-Chess .chessW .chess-path-Bx, .Game-Pawn-Whopping .chessW .chess-path-Bx,
-  .Game-Checkers .chessB .chess-path-Bx {
+
+.Game-Chess .chessW .chess-path-Bx, .Game-Pawn-Whopping .chessW .chess-path-Bx {
     opacity: 1;
     fill: #fff1d4;
     fill-opacity: 1;
@@ -790,9 +893,22 @@
     stroke-opacity: 1;
 }
 
-.Game-Chess .chessB .chess-path-Bx, .Game-Pawn-Whopping .chessB .chess-path-Bx,
-  .Game-Checkers .chessW .chess-path-Bx {
+.Game-Checkers .chessB .chess-path-Bx {
     opacity: 1;
+    fill: white;
+    fill-opacity: 1;
+    fill-rule: evenodd;
+    stroke: #260314;
+    stroke-width: 1.5;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-miterlimit: 4;
+    stroke-dasharray: none;
+    stroke-opacity: 1;
+}
+
+.Game-Chess .chessB .chess-path-Bx, .Game-Pawn-Whopping .chessB .chess-path-Bx {
+    opacity: 1;
     fill: #fff1d4;
     fill-opacity: 1;
     fill-rule: evenodd;
@@ -805,9 +921,22 @@
     stroke-opacity: 1;
 }
 
-.Game-Chess .chessW .chess-path-C, .Game-Pawn-Whopping .chessW .chess-path-C,
-  .Game-Checkers .chessB .chess-path-C {
+.Game-Checkers .chessW .chess-path-Bx {
     opacity: 1;
+    fill: white;
+    fill-opacity: 1;
+    fill-rule: evenodd;
+    stroke: #400827;
+    stroke-width: 1.5;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-miterlimit: 4;
+    stroke-dasharray: none;
+    stroke-opacity: 1;
+}
+
+.Game-Chess .chessW .chess-path-C, .Game-Pawn-Whopping .chessW .chess-path-C {
+    opacity: 1;
     fill: #400827;
     fill-opacity: 1;
     stroke: #260314;
@@ -819,8 +948,20 @@
     stroke-opacity: 1;
 }
 
-.Game-Chess .chessB .chess-path-C, .Game-Pawn-Whopping .chessB .chess-path-C,
-  .Game-Checkers .chessW .chess-path-C {
+.Game-Checkers .chessB .chess-path-C {
+    opacity: 1;
+    fill: red;
+    fill-opacity: 1;
+    stroke: #260314;
+    stroke-width: 1.5;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-miterlimit: 4;
+    stroke-dasharray: none;
+    stroke-opacity: 1;
+}
+
+.Game-Chess .chessB .chess-path-C, .Game-Pawn-Whopping .chessB .chess-path-C {
     opacity:1;
     fill: #fff1d4;
     fill-opacity: 1;
@@ -833,8 +974,20 @@
     stroke-opacity: 1;
 }
 
-.Game-Chess .chessW .chess-path-D, .Game-Pawn-Whopping .chessW .chess-path-D,
-  .Game-Checkers .chessB .chess-path-D {
+.Game-Checkers .chessW .chess-path-C {
+    opacity:1;
+    fill: white;
+    fill-opacity: 1;
+    stroke: white;
+    stroke-width: 1.5;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-miterlimit: 4;
+    stroke-dasharray: none;
+    stroke-opacity: 1;
+}
+
+.Game-Chess .chessW .chess-path-D, .Game-Pawn-Whopping .chessW .chess-path-D {
     fill: #fff1d4;
     fill-opacity: 0.75;
     fill-rule: evenodd;
@@ -847,8 +1000,20 @@
     stroke-opacity: 1;
 }
 
-.Game-Chess .chessB .chess-path-D, .Game-Pawn-Whopping .chessB .chess-path-D,
-  .Game-Checkers .chessW .chess-path-D {
+.Game-Checkers .chessB .chess-path-D {
+    fill: white;
+    fill-opacity: 0.75;
+    fill-rule: evenodd;
+    stroke: #260314;
+    stroke-width: 1;
+    stroke-linecap: round;
+    stroke-linejoin: miter;
+    stroke-miterlimit: 4;
+    stroke-dasharray: none;
+    stroke-opacity: 1;
+}
+
+.Game-Chess .chessB .chess-path-D, .Game-Pawn-Whopping .chessB .chess-path-D {
     fill: #400827;
     fill-opacity: 0.75;
     fill-rule: evenodd;
@@ -860,3 +1025,16 @@
     stroke-dasharray: none;
     stroke-opacity: 1;
 }
+
+.Game-Checkers .chessW .chess-path-D {
+    fill: red;
+    fill-opacity: 0.75;
+    fill-rule: evenodd;
+    stroke: #260314;
+    stroke-width: 1;
+    stroke-linecap: round;
+    stroke-linejoin: miter;
+    stroke-miterlimit: 4;
+    stroke-dasharray: none;
+    stroke-opacity: 1;
+}

Deleted: trunk/Toss/WebClient/contact.html
===================================================================
--- trunk/Toss/WebClient/contact.html	2011-05-14 14:30:21 UTC (rev 1441)
+++ trunk/Toss/WebClient/contact.html	2011-05-15 22:48:50 UTC (rev 1442)
@@ -1,50 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xml:lang="en" lang="en">
-<head>
-  <meta http-equiv="Content-Type" content="text/xhtml+xml; charset=UTF-8" />
-  <title>tPlay &mdash; Contact</title>
-  <meta http-equiv="X-UA-Compatible" content="chrome=1" />
-  <link rel="icon" type="image/vnd.microsoft.icon" href="favicon.ico" />
-  <link href="fontstyle.css" media="screen" rel="stylesheet" type="text/css" />
-  <link rel="stylesheet" type="text/css" href="Style.css" media="screen" title="Default"/>
-  <script type="text/javascript" src="Login.js">  </script>
-</head>
-
-<body>
-
-<div id="main">
-
-<div id="top">
-<div id="logo"><a href="index.html"><img src="toss.png" alt="tPlay" /></a></div>
-</div>
-
-<div id="register-content">
-
-<h2>Contact tPlay</h2>
-
-Just write an email to 
-<script type="text/javascript">begin_mailto("tossplay", "gmail.com");</script>
-tossplay [AT] gmail [DOT] com 
-<script type="text/javascript">end_mailto();</script>
-
-<h2>Links</h2>
-
-<ul>
-<li><a class="ta" href="http://toss.sourceforge.net/">Toss Homepage</a></li>
-<li><a class="ta" href="http://www.playok.com/">Online games on PlayOK</a></li>
-<li><a class="ta" href="http://www.apronus.com/chess/wbeditor.php">Chess
-    on Apronus</a></li>
-</ul>
-
-</div>
-
-<div id="bottom">
-<a href="http://toss.sourceforge.net" id="toss-link">Powered by Toss</a>
-<a href="contact.html" id="contact">Contact and Info</a>
-</div>
-
-</div>
-
-
-</body>
-</html>

Modified: trunk/Toss/WebClient/index.html
===================================================================
--- trunk/Toss/WebClient/index.html	2011-05-14 14:30:21 UTC (rev 1441)
+++ trunk/Toss/WebClient/index.html	2011-05-15 22:48:50 UTC (rev 1442)
@@ -47,6 +47,17 @@
 </form>
 </div>
 <span id="topright">
+  Speed: <select id="speed">
+    <option class="speed_val" value="1">1s</option>
+    <option class="speed_val" value="2">2s</option>
+    <option class="speed_val" value="3">3s</option>
+    <option class="speed_val" value="4">4s</option>
+    <option class="speed_val" value="5">5s</option>
+    <option class="speed_val" value="10">10s</option>
+    <option class="speed_val" value="15">15s</option>
+    <option class="speed_val" value="30">30s</option>
+    <option class="speed_val" value="60">60s</option>
+  </select>
   <button id="logoutbt" onclick="logout()">Logout</button>
 </span>
 <span id="topright-register">
@@ -69,49 +80,44 @@
 </div>
 
 <div id="welcome">
-<p id="welcome-top">Enjoy the best games on <span class="logo-in">tPlay</span> for free</p>
-<p>
+<p id="welcome-top">Enjoy the best games on <span class="logo-in">tPlay</span>
+  for free</p>
+<p id="p-under-welcome" style="display: none;">
   Strategic games are fun! 
   <a href="register.html">Register</a>, login and enjoy quality games
   with our best interface on <span class="logo-in">tPlay</span>!
 </p>
 
 <p style="width:100%; text-align: justify">
-<button onclick="new_play_guest('Breakthrough')" style="width:24%"
-	class="boldobt" title="Play Breakthrough">
-  <img style="max-width:95%" src="pics/Breakthrough.png" alt="Breakthrough Board">
-</button>
-<button onclick="new_play_guest('Checkers')" style="width:24%"
-	class="boldobt" title="Play Checkers">
-  <img style="max-width:95%" src="pics/Checkers.png" alt="Checkers Board">
-</button>
-<button onclick="new_play_guest('Chess')" style="width:24%"
+<button onclick="new_play_guest('Chess')" style="width:32%"
 	class="boldobt" title="Play Chess">
-  <img style="max-width:95%" src="pics/Chess.png" alt="Chess Board">
+  <img style="max-width:95%" src="pics/Chess.png" alt="Chess Board" />
 </button>
-<button onclick="new_play_guest('Connect4')" style="width:24%"
+<button onclick="new_play_guest('Connect4')" style="width:32%"
 	class="boldobt" title="Play Connect4">
-  <img style="max-width:95%" src="pics/Connect4.png" alt="Connect4 Board">
+  <img style="max-width:95%" src="pics/Connect4.png" alt="Connect4 Board" />
 </button>
+<button onclick="new_play_guest('Pawn-Whopping')" style="width:32%"
+	class="boldobt" title="Play Pawn-Whopping">
+  <img style="max-width:95%" src="pics/Pawn-Whopping.png"
+       alt="Pawn-Whopping Board" />
+</button>
 </p>
 
 <p style="width:100%; text-align: justify">
-<button onclick="new_play_guest('Entanglement')" style="width:24%"
-	class="boldobt" title="Play Entanglement">
-  <img style="max-width:95%" src="pics/Entanglement.png" alt="Entanglement Board">
+<button onclick="new_play_guest('Breakthrough')" style="width:32%"
+	class="boldobt" title="Play Breakthrough">
+  <img style="max-width:95%" src="pics/Breakthrough.png"
+       alt="Breakthrough Board" />
 </button>
-<button onclick="new_play_guest('Gomoku')" style="width:24%"
+<button onclick="new_play_guest('Checkers')" style="width:32%"
+	class="boldobt" title="Play Checkers">
+  <img style="max-width:95%" src="pics/Checkers.png" alt="Checkers Board" />
+</button>
+<button onclick="new_play_guest('Gomoku')" style="width:32%"
 	class="boldobt" title="Play Gomoku">
-  <img style="max-width:95%" src="pics/Gomoku.png" alt="Gomoku Board">
+  <img style="max-width:95%" src="pics/Gomoku.png" alt="Gomoku Board" />
 </button>
-<button onclick="new_play_guest('Pawn-Whopping')" style="width:24%"
-	class="boldobt" title="Play Pawn-Whopping">
-  <img style="max-width:95%" src="pics/Pawn-Whopping.png" alt="Pawn-Whopping Board">
-</button>
-<button onclick="new_play_guest('Tic-Tac-Toe')" style="width:24%"
-	class="boldobt" title="Play Tic-Tac-Toe">
-  <img style="max-width:95%" src="pics/Tic-Tac-Toe.png" alt="Tic-Tac-Toe Board">
-</button>
 </p>
 
 <ul class="welcome-list">
@@ -131,11 +137,8 @@
     <a href="http://en.wikipedia.org/wiki/Pawn_(chess)"
        >Pawn-Whopping,</a>
   and many other board games</li>
+<li>Focus fully on the game thanks to our intuitive clean interface</li>
 <li>Challenge your friends or play a fast game against the computer for fun</li>
-<li>Focus fully on the game thanks to our intuitive clean interface</li>
-<li>Keep and analyze your games to improve your strength</li>
-<li>Invent new games with <a href="http://toss.sourceforge.net/">Toss</a>
-  and play them online here</li>
 </ul>
 
 </div>
@@ -231,34 +234,42 @@
 <div id="game-disp">
   <p id="game-info-par">
     <span id="game-title"></span>
-    game <span id="play-number">?</span>
+    <span id="play-nbr-info" style="display:none;">
+      (game <span id="play-number">?</span>)
+    </span>
+    <span id="payoffs" style="display:none;">Not Finished Yet</span>
   </p>
 
+  <p id="new-play-par">
+    <button id="new_game_me" class="bt" onclick="play_anew(true)">
+      New Game (You Start)
+    </button>
+    <button id="new_game_opp" class="bt" onclick="play_anew(false)">
+      New Game (Opponent Starts)
+    </button>
+  </p>
+
   <p id="move-info-par">
+    <span style="display: none;">Moves: <span id="cur-player">?</span></span>
     <button id="movebt" class="bt" onclick="make_move ()">Make move:</button>
-    <span id="cur-move">none</span>    
-  </p>
-
-  <p id="player-info-par">
-    Moving: <span id="cur-player">?</span>
+    <span id="cur-move">none</span>
     <button id="sugbt" class="bt" onclick="suggest_move_click()">
-      Suggest (weak, fast)
+      Suggest
     </button>
-    <button id="sugbts" class="bt" onclick="suggest_move_better_click()">
-      Suggest (stronger, slow)
-    </button>
   </p>
-
   <div id="board"><div id="working">Working...</div></div>
 </div>
 
 
 <div id="bottom">
 <button id="suggestions-toggle" onclick="toggle_suggestions()">
-  Show Move Suggestions
+  Ask Before Move
 </button>
 <a href="http://toss.sourceforge.net" id="toss-link">Powered by Toss</a>
-<a href="contact.html" id="contact">Contact and Info</a>
+<script type="text/javascript">begin_mailto(
+  "tossplay", "gmail.com", "Contact Us");</script>
+tossplay [AT] gmail [DOT] com
+<script type="text/javascript">end_mailto();</script>
 </div>
 
 </div>

Modified: trunk/Toss/WebClient/pics/Breakthrough.png
===================================================================
(Binary files differ)

Modified: trunk/Toss/WebClient/pics/Checkers.png
===================================================================
(Binary files differ)

Modified: trunk/Toss/WebClient/pics/Chess.png
===================================================================
(Binary files differ)

Modified: trunk/Toss/WebClient/pics/Connect4.png
===================================================================
(Binary files differ)

Modified: trunk/Toss/WebClient/pics/Connect4.svg
===================================================================
--- trunk/Toss/WebClient/pics/Connect4.svg	2011-05-14 14:30:21 UTC (rev 1441)
+++ trunk/Toss/WebClient/pics/Connect4.svg	2011-05-15 22:48:50 UTC (rev 1442)
@@ -1,2 +1,2 @@
-<?xml-stylesheet href="Style.css" type="text/css"?>
-<svg id="svg" viewBox="0 0 580 580"><rect class="model-elem-0" x="15" y="515" width="50" height="50" id="elem_a1" ></rect><rect class="model-elem-1" x="98.33333333333333" y="515" width="50" height="50" id="elem_b1" ></rect><rect class="model-elem-0" x="181.66666666666666" y="515" width="50" height="50" id="elem_c1" ></rect><rect class="model-elem-1" x="265" y="515" width="50" height="50" id="elem_d1" ></rect><rect class="model-elem-0" x="348.3333333333333" y="515" width="50" height="50" id="elem_e1" ></rect><rect class="model-elem-1" x="431.6666666666667" y="515" width="50" height="50" id="elem_f1" ></rect><rect class="model-elem-0" x="515" y="515" width="50" height="50" id="elem_g1" ></rect><rect class="model-elem-1" x="15" y="415" width="50" height="50" id="elem_a2" ></rect><rect class="model-elem-0" x="98.33333333333333" y="415" width="50" height="50" id="elem_b2" ></rect><rect class="model-elem-1" x="181.66666666666666" y="415" width="50" height="50" id="elem_c2" ></rect><rect class="model-elem-0" x="265" y="415" width="50" height="50" id="elem_d2" ></rect><rect class="model-elem-1" x="348.3333333333333" y="415" width="50" height="50" id="elem_e2" ></rect><rect class="model-elem-0" x="431.6666666666667" y="415" width="50" height="50" id="elem_f2" ></rect><rect class="model-elem-1" x="515" y="415" width="50" height="50" id="elem_g2" ></rect><rect class="model-elem-0" x="15" y="315" width="50" height="50" id="elem_a3" ></rect><rect class="model-elem-1" x="98.33333333333333" y="315" width="50" height="50" id="elem_b3" ></rect><rect class="model-elem-0" x="181.66666666666666" y="315" width="50" height="50" id="elem_c3" ></rect><rect class="model-elem-1" x="265" y="315" width="50" height="50" id="elem_d3" ></rect><rect class="model-elem-0" x="348.3333333333333" y="315" width="50" height="50" id="elem_e3" ></rect><rect class="model-elem-1" x="431.6666666666667" y="315" width="50" height="50" id="elem_f3" ></rect><rect class="model-elem-0" x="515" y="315" width="50" height="50" id="elem_g3" ></rect><rect class="model-elem-1" x="15" y="215" width="50" height="50" id="elem_a4" ></rect><rect class="model-elem-0" x="98.33333333333333" y="215" width="50" height="50" id="elem_b4" ></rect><rect class="model-elem-1" x="181.66666666666666" y="215" width="50" height="50" id="elem_c4" ></rect><rect class="model-elem-0" x="265" y="215" width="50" height="50" id="elem_d4" ></rect><rect class="model-elem-1" x="348.3333333333333" y="215" width="50" height="50" id="elem_e4" ></rect><rect class="model-elem-0" x="431.6666666666667" y="215" width="50" height="50" id="elem_f4" ></rect><rect class="model-elem-1" x="515" y="215" width="50" height="50" id="elem_g4" ></rect><rect class="model-elem-0" x="15" y="115" width="50" height="50" id="elem_a5" ></rect><rect class="model-elem-1" x="98.33333333333333" y="115" width="50" height="50" id="elem_b5" ></rect><rect class="model-elem-0" x="181.66666666666666" y="115" width="50" height="50" id="elem_c5" ></rect><rect class="model-elem-1" x="265" y="115" width="50" height="50" id="elem_d5" ></rect><rect class="model-elem-0" x="348.3333333333333" y="115" width="50" height="50" id="elem_e5" ></rect><rect class="model-elem-1" x="431.6666666666667" y="115" width="50" height="50" id="elem_f5" ></rect><rect class="model-elem-0" x="515" y="115" width="50" height="50" id="elem_g5" ></rect><rect class="model-elem-1" x="15" y="15" width="50" height="50" id="elem_a6" ></rect><rect class="model-elem-0" x="98.33333333333333" y="15" width="50" height="50" id="elem_b6" ></rect><rect class="model-elem-1" x="181.66666666666666" y="15" width="50" height="50" id="elem_c6" ></rect><rect class="model-elem-0" x="265" y="15" width="50" height="50" id="elem_d6" ></rect><rect class="model-elem-1" x="348.3333333333333" y="15" width="50" height="50" id="elem_e6" ></rect><rect class="model-elem-0" x="431.6666666666667" y="15" width="50" height="50" id="elem_f6" ></rect><rect class="model-elem-1" x="515" y="15" width="50" height="50" id="elem_g6" ></rect><circle class="model-pred-Q" cx="206.66666666666666" cy="540" r="13" id="pred_c1_Q" stroke-width="4.5" ></circle><circle class="model-pred-Q" cx="373.3333333333333" cy="540" r="13" id="pred_e1_Q" stroke-width="4.5" ></circle><circle class="model-pred-Q" cx="206.66666666666666" cy="440" r="13" id="pred_c2_Q" stroke-width="4.5" ></circle><circle class="model-pred-Q" cx="456.6666666666667" cy="440" r="13" id="pred_f2_Q" stroke-width="4.5" ></circle><circle class="model-pred-Q" cx="290" cy="340" r="13" id="pred_d3_Q" stroke-width="4.5" ></circle><g transform="translate(290,540) scale(1.25,1.25)"><g class="model-pred-P" id="pred_d1_P" ><line x1="-10" y1="-10" x2="10" y2="10"></line><line x1="10" y1="-10" x2="-10" y2="10"></line></g> </g><g transform="translate(456.6666666666667,540) scale(1.25,1.25)"><g class="model-pred-P" id="pred_f1_P" ><line x1="-10" y1="-10" x2="10" y2="10"></line><line x1="10" y1="-10" x2="-10" y2="10"></line></g> </g><g transform="translate(290,440) scale(1.25,1.25)"><g class="model-pred-P" id="pred_d2_P" ><line x1="-10" y1="-10" x2="10" y2="10"></line><line x1="10" y1="-10" x2="-10" y2="10"></line></g> </g><g transform="translate(373.3333333333333,440) scale(1.25,1.25)"><g class="model-pred-P" id="pred_e2_P" ><line x1="-10" y1="-10" x2="10" y2="10"></line><line x1="10" y1="-10" x2="-10" y2="10"></line></g> </g><g transform="translate(456.6666666666667,340) scale(1.25,1.25)"><g class="model-pred-P" id="pred_f3_P" ><line x1="-10" y1="-10" x2="10" y2="10"></line><line x1="10" y1="-10" x2="-10" y2="10"></line></g> </g></svg>
+<?xml-stylesheet href="Style3.css" type="text/css"?>
+<svg id="svg" viewBox="-10 -10 600 600"><rect x="0" y="0" width="580" height="580" stroke-width="5" rx="5" ry="5" id="board_connect4"></rect><g transform="translate(40,540) scale(1.5,1.5)"><circle cx="0" cy="0" r="20" id="elem_a1" class="model-elem-0" ></circle></g><g transform="translate(123.33333333333333,540) scale(1.5,1.5)"><circle cx="0" cy="0" r="20" id="elem_b1" class="model-elem-1" ></circle></g><g transform="translate(206.66666666666666,540) scale(1.5,1.5)"><circle cx="0" cy="0" r="20" id="elem_c1" class="model-elem-0" ></circle></g><g transform="translate(290,540) scale(1.5,1.5)"><circle cx="0" cy="0" r="20" id="elem_d1" class="model-elem-1" ></circle></g><g transform="translate(373.3333333333333,540) scale(1.5,1.5)"><circle cx="0" cy="0" r="20" id="elem_e1" class="model-elem-0" ></circle></g><g transform="translate(456.6666666666667,540) scale(1.5,1.5)"><circle cx="0" cy="0" r="20" id="elem_f1" class="model-elem-1" ></circle></g><g transform="translate(540,540) scale(1.5,1.5)"><circle cx="0" cy="0" r="20" id="elem_g1" class="model-elem-0" ></circle></g><g transform="translate(40,440) scale(1.5,1.5)"><circle cx="0" cy="0" r="20" id="elem_a2" class="model-elem-1" ></circle></g><g transform="translate(123.33333333333333,440) scale(1.5,1.5)"><circle cx="0" cy="0" r="20" id="elem_b2" class="model-elem-0" ></circle></g><g transform="translate(206.66666666666666,440) scale(1.5,1.5)"><circle cx="0" cy="0" r="20" id="elem_c2" class="model-elem-1" ></circle></g><g transform="translate(290,440) scale(1.5,1.5)"><circle cx="0" cy="0" r="20" id="elem_d2" class="model-elem-0" ></circle></g><g transform="translate(373.3333333333333,440) scale(1.5,1.5)"><circle cx="0" cy="0" r="20" id="elem_e2" class="model-elem-1" ></circle></g><g transform="translate(456.6666666666667,440) scale(1.5,1.5)"><circle cx="0" cy="0" r="20" id="elem_f2" class="model-elem-0" ></circle></g><g transform="translate(540,440) scale(1.5,1.5)"><circle cx="0" cy="0" r="20" id="elem_g2" class="model-elem-1" ></circle></g><g transform="translate(40,340) scale(1.5,1.5)"><circle cx="0" cy="0" r="20" id="elem_a3" class="model-elem-0" ></circle></g><g transform="translate(123.33333333333333,340) scale(1.5,1.5)"><circle cx="0" cy="0" r="20" id="elem_b3" class="model-elem-1" ></circle></g><g transform="translate(206.66666666666666,340) scale(1.5,1.5)"><circle cx="0" cy="0" r="20" id="elem_c3" class="model-elem-0" ></circle></g><g transform="translate(290,340) scale(1.5,1.5)"><circle cx="0" cy="0" r="20" id="elem_d3" class="model-elem-1" ></circle></g><g transform="translate(373.3333333333333,340) scale(1.5,1.5)"><circle cx="0" cy="0" r="20" id="elem_e3" class="model-elem-0" ></circle></g><g transform="translate(456.6666666666667,340) scale(1.5,1.5)"><circle cx="0" cy="0" r="20" id="elem_f3" class="model-elem-1" ></circle></g><g transform="translate(540,340) scale(1.5,1.5)"><circle cx="0" cy="0" r="20" id="elem_g3" class="model-elem-0" ></circle></g><g transform="translate(40,240) scale(1.5,1.5)"><circle cx="0" cy="0" r="20" id="elem_a4" class="model-elem-1" ></circle></g><g transform="translate(123.33333333333333,240) scale(1.5,1.5)"><circle cx="0" cy="0" r="20" id="elem_b4" class="model-elem-0" ></circle></g><g transform="translate(206.66666666666666,240) scale(1.5,1.5)"><circle cx="0" cy="0" r="20" id="elem_c4" class="model-elem-1" ></circle></g><g transform="translate(290,240) scale(1.5,1.5)"><circle cx="0" cy="0" r="20" id="elem_d4" class="model-elem-0" ></circle></g><g transform="translate(373.3333333333333,240) scale(1.5,1.5)"><circle cx="0" cy="0" r="20" id="elem_e4" class="model-elem-1" ></circle></g><g transform="translate(456.6666666666667,240) scale(1.5,1.5)"><circle cx="0" cy="0" r="20" id="elem_f4" class="model-elem-0" ></circle></g><g transform="translate(540,240) scale(1.5,1.5)"><circle cx="0" cy="0" r="20" id="elem_g4" class="model-elem-1" ></circle></g><g transform="translate(40,140) scale(1.5,1.5)"><circle cx="0" cy="0" r=...
 
[truncated message content]