[Toss-devel-svn] SF.net SVN: toss:[1442] trunk/Toss
Status: Beta
Brought to you by:
lukaszkaiser
From: <luk...@us...> - 2011-05-15 22:48:59
|
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 — 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] |