Thread: [Toss-devel-svn] SF.net SVN: toss:[1217] trunk/Toss/WebClient
Status: Beta
Brought to you by:
lukaszkaiser
From: <luk...@us...> - 2010-12-04 15:39:15
|
Revision: 1217 http://toss.svn.sourceforge.net/toss/?rev=1217&view=rev Author: lukaszkaiser Date: 2010-12-04 15:39:08 +0000 (Sat, 04 Dec 2010) Log Message: ----------- Parsing and setting SVG elements from strings in WebClient. Modified Paths: -------------- trunk/Toss/WebClient/TossConnect.js trunk/Toss/WebClient/TossDefaultStyle.js Modified: trunk/Toss/WebClient/TossConnect.js =================================================================== --- trunk/Toss/WebClient/TossConnect.js 2010-12-04 13:02:34 UTC (rev 1216) +++ trunk/Toss/WebClient/TossConnect.js 2010-12-04 15:39:08 UTC (rev 1217) @@ -174,6 +174,20 @@ } // Create new svg element [elem], child of svg, with [attributes]. +function svg_from_string (x, y, sizex, sizey, s) { + 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]); +} + + +// 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); elem.setAttribute ("class", "svgelem"); Modified: trunk/Toss/WebClient/TossDefaultStyle.js =================================================================== --- trunk/Toss/WebClient/TossDefaultStyle.js 2010-12-04 13:02:34 UTC (rev 1216) +++ trunk/Toss/WebClient/TossDefaultStyle.js 2010-12-04 15:39:08 UTC (rev 1217) @@ -47,22 +47,14 @@ if (args.length == 1) { var pos = ELEM_POS[args[0]]; if (rel_name == "P") { // Tic-tac-toe cross - add_svg ("line", - [["x1", pos[0] - SUGGESTED_ELEM_SIZEX + 5], - ["y1", pos[1] - SUGGESTED_ELEM_SIZEX + 5], - ["x2", pos[0] + SUGGESTED_ELEM_SIZEX - 5], - ["y2", pos[1] + SUGGESTED_ELEM_SIZEX - 5], - ["id", "pred_" + args[0] + "_" + rel_name], - ["class", "model-pred-" + rel_name], - ["onclick", ("handle_elem_click('" + args[0] + "')")]]); - add_svg ("line", - [["x1", pos[0] - SUGGESTED_ELEM_SIZEX + 5], - ["y1", pos[1] + SUGGESTED_ELEM_SIZEX - 5], - ["x2", pos[0] + SUGGESTED_ELEM_SIZEX - 5], - ["y2", pos[1] - SUGGESTED_ELEM_SIZEX + 5], - ["id", "pred_" + args[0] + "_" + rel_name], - ["class", "model-pred-" + rel_name], - ["onclick", ("handle_elem_click('" + args[0] + "')")]]); + var is = 'id="' + "pred_" + args[0] + "_" + rel_name + '" '; + var cs = 'class="' + "model-pred-" + rel_name + '" '; + var hs = 'onclick="' + "handle_elem_click('" + args[0] + "')" + '" '; + 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 if (rel_name == "R") { // Robber in Entanglement add_svg ("circle", [["cx", pos[0]], ["cy", pos[1]], ["r", SUGGESTED_ELEM_SIZEX - 15], This was sent by the SourceForge.net collaborative development platform, the world's largest Open Source development site. |
From: <luk...@us...> - 2010-12-12 00:01:29
|
Revision: 1246 http://toss.svn.sourceforge.net/toss/?rev=1246&view=rev Author: lukaszkaiser Date: 2010-12-12 00:01:22 +0000 (Sun, 12 Dec 2010) Log Message: ----------- Make WebClient run on local user db (start). Modified Paths: -------------- trunk/Toss/WebClient/.cvsignore trunk/Toss/WebClient/README trunk/Toss/WebClient/TossConnect.js trunk/Toss/WebClient/TossHandler.py trunk/Toss/WebClient/TossMain.js trunk/Toss/WebClient/TossStyle.css trunk/Toss/WebClient/colors.html trunk/Toss/WebClient/index.html Added Paths: ----------- trunk/Toss/WebClient/crypto-sha256.js trunk/Toss/WebClient/make_db.py trunk/Toss/WebClient/register.html Removed Paths: ------------- trunk/Toss/WebClient/TossAltStyle.css Property Changed: ---------------- trunk/Toss/WebClient/ Property changes on: trunk/Toss/WebClient ___________________________________________________________________ Modified: svn:ignore - # We are still using .cvsignore files as we find them easier to manage # than svn properties. Therefore if you change .cvsignore do the following. # svn propset svn:ignore -F .cvsignore . *.ttf *.eot *.svg *.woff *~ + # We are still using .cvsignore files as we find them easier to manage # than svn properties. Therefore if you change .cvsignore do the following. # svn propset svn:ignore -F .cvsignore . plays games TossServer tossdb.sqlite *.ttf *.eot *.svg *.woff *~ Modified: trunk/Toss/WebClient/.cvsignore =================================================================== --- trunk/Toss/WebClient/.cvsignore 2010-12-11 13:38:17 UTC (rev 1245) +++ trunk/Toss/WebClient/.cvsignore 2010-12-12 00:01:22 UTC (rev 1246) @@ -2,6 +2,10 @@ # than svn properties. Therefore if you change .cvsignore do the following. # svn propset svn:ignore -F .cvsignore . +plays +games +TossServer +tossdb.sqlite *.ttf *.eot *.svg Modified: trunk/Toss/WebClient/README =================================================================== --- trunk/Toss/WebClient/README 2010-12-11 13:38:17 UTC (rev 1245) +++ trunk/Toss/WebClient/README 2010-12-12 00:01:22 UTC (rev 1246) @@ -1,28 +1,26 @@ -This is an experimental new Toss Client, which is supposed to run in browsers. +This is an experimental new Toss Client, which runs in a browser. -Connection with Toss Server goes through a python wrapper, thus you need to - sudo apt-get install libapache2-mod-python -to run the wrapper, and in /etc/apache2/sites-enabled/[your-site] add e.g. - <Directory /var/www/TossClient> +Connection with Server goes through a python wrapper and it uses sqlite, so do: + sudo apt-get install libapache2-mod-python sqite python-pysqlite2 +to run the wrapper. Make sure apache works (you may need to edit the file +/etc/apache2/apache2.conf and set ServerRoot to e.g. /var/www/) and then +in the file /etc/apache2/sites-enabled/[your-site] add e.g. + <Directory /var/www/WebClient> AddHandler mod_python .py PythonHandler TossHandler # During development you might turn debugging on PythonDebug On </Directory> The main handler script is called TossHander.py (server side) and corresponding -JavaScript functions are in Toss*.js. To start client open index.html. +JavaScript functions are in Toss*.js. To start client open index.html, but +first make sure that WebClient is linked in /var/www (ln -s should suffice). -In the html root directory, or wherever you want to place this web client, you -must create "plays/" and "games/" directories and make "plays/" writeable. -In "games/" you should place the games toss files and the TossServer binary. +You must create "plays/" and "games/" directories and make "plays/" writeable. +In "games/" you should place the games toss files, you can link examples +symbolically. Moreover, copy Server as TossServer to the WebClient directory. +You also need a database, run "python make_db.py" to create an empty one. -To display text nicely hyphenated, we use a JavaScript Hyphenation program, -Hyphenator (http://code.google.com/p/hyphenator/). It is licenced under GPL3 -and you should download it separately and place "Hyphenator.js" and "patterns/" -in the same directory where you have Toss*.js files (and "plays/" directory). -You should also download and unzip font files listed in fontsstyle.css. - -To generate thumbnails we also use rsvg-convert. Install it on ubuntu with +To generate thumbnails we use rsvg-convert. Install it on ubuntu with "sudo apt-get install librsvg2-bin". To flip images and make them better we use imagemagick, you should also install it. You need both on the server as well. Deleted: trunk/Toss/WebClient/TossAltStyle.css =================================================================== --- trunk/Toss/WebClient/TossAltStyle.css 2010-12-11 13:38:17 UTC (rev 1245) +++ trunk/Toss/WebClient/TossAltStyle.css 2010-12-12 00:01:22 UTC (rev 1246) @@ -1,392 +0,0 @@ -/* General */ - -html { - height: 100%; - width: 100%; -} - -body { - background-color: #eceab0; - font-family: Verdana, sans; - height: 100%; -} - -#logo { - font-size: 2em; - float: left; - font-family: 'OFL Sorts Mill Goudy TT', arial, serif; - width: 4.5em; - padding-left: 0.25em; -} - -#logo a, #logo a:link, #logo a:active, #logo a:visited { - color: #61b594; - background-color: transparent; - text-decoration: none; -} - -#logo a:hover { - color: #eceab0; -} - -.logo-in { - /*font-family: 'OFL Sorts Mill Goudy TT', arial, serif; - font-size: 1.2em;*/ -} - -#top { - font-weight: bold; - position: absolute; - top: 0px; - left: 0px; - width: 100%; - height: 2.5em; - color: #61b594; - background-color: #bf4c18; - border-color: #597533; - border-style: solid; - border-width: 0px 0px 5px 0px; -} - -#topbar { - margin-left: 9.5em; - padding-left: 1em; - padding-right: 1em; - padding-top: 0.7em; -} - -#fbpicture { - position: absolute; - top: 0px; - right: 0px; - margin-right: 0.5em; - height: 2.5em; -} - -#fbpic { - height: 2.5em; -} - -#fblogin { - float: right; - margin-right: 0em; -} - -#bottom { - position: relative; - bottom: 0px; - left: -0.5em; - width: 100%; - padding-right: 1em; - height: 1.3em; - text-align: right; - color: #61b594; - background-color: #bf4c18; - border-color: #597533; - border-style: solid; - border-width: 5px 0px 0px 0px; -} - -#sidebar { - float: left; - width: 8.2em; - color: #61b594; - background-color: #bf4c18; - margin-top: 1em; - margin-left: 0em; - padding-left: 0.1em; - border: 1px solid #597533; - -moz-border-radius: 8px; - -webkit-border-radius: 8px; -} - -#menu-top-par { - margin-top: 0.5em; - margin-bottom: 0em; -} - -#menu-list { - list-style: none; - padding: 0em; - margin: 0.25em; - margin-bottom: 0.5em; -} - -#sidebar button { - text-align: left; - border: none; - font-weight: bold; - text-decoration: none; - color: #61b594; - background-color: #bf4c18; - width: 100%; -} - -#sidebar a { - font-weight: bold; - text-decoration: none; - color: #61b594; - width: 100%; -} - -#sidebar a:hover { - color: #eceab0; -} - -#sidebar .game-highlighted { - color: #eceab0; -} - - -/* Content */ - -#main { - margin-top: 2.5em; - color: #597533; - background-color: #61b594; - margin-left: 9em; - margin-right: 1em; - padding: 1em; - min-height: 100%; - padding-bottom: 2em; - border: 1px solid #597533; - border-bottom: 0px; -} - -#main a, #main a:link, #main a:active, #main a:visited { - color: #597533; - text-decoration: underline; -} - -#main a:hover { - color: #bf4c18; - text-decoration: none; -} - - -#opponents { - display: none; - position: absolute; - left: 19em; - top: 3.5em; - min-width: 20em; - color: #61b594; - background-color: #bf4c18; - font-weight: bold; - padding: 1em; - border: 1px solid #597533; - z-index: 10; -} - -#opponents a, #opponents a:link, #opponents a:active, #opponents a:visited { - color: #61b594; - text-decoration: none; - font-weight: bold; -} - -#opponents a:hover { - color: #eceab0; -} - -#opponents-list { - list-style: square; - margin-top: 0.5em; -} - -.opponents-list-elem { - /* margin-left: -1em; */ -} - -#opponents-next { - position: absolute; - right: 1em; - bottom: 0.25em; -} - -#opponents-prev { - position: absolute; - left: 1em; - bottom: 0.25em; - display: none; -} - -#welcome { - text-align: justify; - margin-top: 1em; -} - -#welcome-top { - font-size: 1.2em; - font-weight: bold; - padding-left: 1.25em; -} - -.short { - max-width: 40em; -} - -#features-list { - list-style: square; -} - -#game-title { - font-size: 1.2em; - font-weight: bold; - margin-top: 1em; - margin-bottom: 2em; -} - -#game-disp { - position: relative; - display: none; -} - -#game-desc { - text-align: justify; - display: none; - width: 29em; - height: 19em; - margin-right: 1em; - padding-right: 1em; - border-right: 1px solid #597533; -} - -#board-disp { - position: relative; - display: none; -} - -#board { - position: absolute; - left: 9em; - padding-right: 1em; - top: 0px; - width: 20em; - height: 19em; - border-right: 1px solid #597533; -} - -#working { - position: absolute; - left: 4.5em; - top: 7em; - width: 10em; - text-align: center; - font-weight: bold; - color: #61b594; - background-color: #bf4c18; - display: none; - padding: 1em; -} - -#move { - position: absolute; - left: 0px; - top: 0px; -} - -#play-no-div { - padding-bottom: 0.5em; - padding-left: 1em; -} - -#cur-move, #cur-player { - padding-left: 1em; - margin-top: 0.5em; - margin-bottom: 0.5em; -} - -#mk-move { - padding-left: 0em; -} - -#plays { - position: absolute; - left: 30em; - top: 0px; - padding-left: 1em; -} - -#plays-list { - list-style: none; - margin-top: 0.25em; -} - -.plays-list-elem { - margin-left: -1.5em; -} - -.plays-list-elem a { - margin-right: 0.5em; -} - -.plays-list-elem .thumb { - position: relative; - top: 5px; - left: 0px; - border: 1px solid #597533; -} - - - -/* SVG styling */ -.board-outline { - fill: #eceab0; - stroke: #597533; - stroke-width: 10px; -} - -.model-elem { - fill: #eceab0; - stroke: #597533; - stroke-width: 3px; -} - -.model-elem-highlight { - fill: #61b594; - stroke: #bf4c18; - stroke-width: 3px; -} - -.model-pred-P { - fill: #bf4c18; - stroke: #597533; - stroke-width: 5px; -} - -.model-pred-Q { - fill: #eceab0; - stroke: #597533; - stroke-width: 5px; -} - -.model-pred-C { - fill: #61b594; - stroke: #597533; - stroke-width: 3px; -} - -.model-pred-R { - fill: #bf4c18; - stroke: #597533; - stroke-width: 3px; - z-index: 7; -} - -.model-pred-W { - fill: #61b594; - stroke: #597533; - stroke-width: 3px; -} - -.model-pred-B { - fill: #bf4c18; - stroke: #597533; - stroke-width: 3px; -} - -.model-edge-E { - fill: #597533; - stroke: #597533; - stroke-width: 3px; -} Modified: trunk/Toss/WebClient/TossConnect.js =================================================================== --- trunk/Toss/WebClient/TossConnect.js 2010-12-11 13:38:17 UTC (rev 1245) +++ trunk/Toss/WebClient/TossConnect.js 2010-12-12 00:01:22 UTC (rev 1246) @@ -1,11 +1,10 @@ // JavaScript Toss Module -- Connect (basic Toss Server connection routines) -var GAMES_DIR = "/var/www/games/"; -var PLAYS_DIR = "/var/www/plays/"; -var MAIN_DIR = "/var/www"; +var GAMES_DIR = "/var/www/WebClient/games/"; +var PLAYS_DIR = "/var/www/WebClient/plays/"; +var MAIN_DIR = "/var/www/WebClient/"; -var UID = 0; -var UNAME = "Guest"; +var UNAME = ""; var MODEL_MAXX = 0.0; var MODEL_MINX = 0.0; @@ -50,9 +49,41 @@ xml_request.setRequestHeader ('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8'); xml_request.send (msg); - return (xml_request.responseText); + resp = xml_request.responseText; + if (resp.indexOf ("MOD_PYTHON ERROR") > -1) { + alert (resp.substring(resp.indexOf("Traceback"))); + return (""); + } + return (resp) } +// Simple encryption +function crypt (s) { + var c = Crypto.SHA256(s, true); + var d = c.replace("#", "$"); + return (d.replace(" ", "$")); +} + +// Login +function login () { + un = document.getElementById('username').value; + pwd = document.getElementById('password').value; + resp = sync_server_msg ("LOGIN#" + un + " " + crypt(pwd)); + if (resp == "OK") { + UNAME = un; + document.getElementById("topuser").innerHTML = "Welcome " + un; + document.getElementById("loginform").style.display = "none"; + } else { + alert (resp) + } +} + +// Logout +function logout () { + document.getElementById("loginform").style.display = "inline"; + document.getElementById("topuser").innerHTML = ""; +} + // Send [msg] to server attaching prefix '[port]#' and return response text. function srv (port, msg) { return (sync_server_msg (port.toString() + '#' + msg)); Modified: trunk/Toss/WebClient/TossHandler.py =================================================================== --- trunk/Toss/WebClient/TossHandler.py 2010-12-11 13:38:17 UTC (rev 1245) +++ trunk/Toss/WebClient/TossHandler.py 2010-12-12 00:01:22 UTC (rev 1246) @@ -3,7 +3,14 @@ import time from Wrapper import * from mod_python import apache, Cookie +from pysqlite2 import dbapi2 as sqlite3 +DB_FILE = "/var/www/WebClient/tossdb.sqlite" + +TUID = "toss_id_05174_" + +db = None + def tmp_log (str): file = open ("/tmp/th.log", 'w') file.write (str) @@ -28,7 +35,7 @@ if not (is_toss_server ("localhost", 8110 + i)): return (8110 + i) def open_toss_server (port): - args = ["/var/www/games/TossServer", + args = ["/var/www/WebClient/TossServer", "-s", "localhost", "-t", "600", "-p", str(port)] server_proc = subprocess.Popen(args) time.sleep (0.1) @@ -87,8 +94,50 @@ if cg == 0: return("Changed") return ("Some error encountered, please try again in a few seconds.") +def get_from_db (uid, tbl): + res = [] + for r in db.execute("select * from passwd where id='" + uid + "'"): + res.append(r) + return (res) + +def passwd_from_db (uid): + res = get_from_db (uid, "passwd") + if len(res) > 1: raise Exception ("db", "multiple passwords for " + uid) + if len(res) == 0: return (None) + (uid, passwd) = res[0] + return (str(passwd)) + +def confirm_username (req): + cookies = Cookie.get_cookies(req) + if not (cookies.has_key(TUID + 'username')): return "" + if not (cookies.has_key(TUID + 'passphrase')): return "" + uid = cookies[TUID + 'username'].value + pwd1 = cookies[TUID + 'passphrase'].value + pwd2 = passwd_from_db (uid) + if (pwd1 != pwd2): return "" + return (uid) + +def login_user (req, uid, pwd): + db_pwd = passwd_from_db (uid) + if not db_pwd: return ("no such user registered") + if (pwd != db_pwd): return ("wrong password") + cookie1 = Cookie.Cookie(TUID + 'username', uid) + cookie2 = Cookie.Cookie(TUID + 'passphrase', pwd) + Cookie.add_cookie(req, cookie1) + Cookie.add_cookie(req, cookie2) + return ("OK") + +def register_user (uid, pwd): + if passwd_from_db (uid): return (False) + db.execute ("insert into passwd(id, passwd) values (?, ?)", (uid, pwd)) + db.commit () + return (True) + def handler(req): + global db req.content_type = "text/plain" + db = sqlite3.connect(DB_FILE) + usr = confirm_username (req) msg = req.read () #tmp_log(msg) if msg.find('#') == -1: @@ -99,8 +148,31 @@ port = open_toss_server (free_toss_port ()) req.write(str(port)) return apache.OK - port, sep, fun = msg.partition('#') - c = SystemClient ("localhost", int(port)) - res = eval (fun) + cmd, sep, data = msg.partition('#') + if cmd == "USERNAME": + req.write(usr) + return apache.OK + if cmd == "REGISTER": + uname, sep, pwd = data.partition(' ') + if register_user (uname, pwd): + req.write("Registration successful for " + uname) + return apache.OK + req.write("Registration failed, username " + uname + " already in use.") + return apache.OK + if cmd == "LOGIN": + uname, sep, pwd = data.partition(' ') + res = login_user (req, uname, pwd) + if res == "OK": + req.write("OK") + return apache.OK + req.write("Login failed for " + uname + ": " + res) + return apache.OK + if cmd == "LOGOUT": + cookie = Cookie.Cookie(TUID + 'passphrase', "") + Cookie.add_cookie(req, cookie) + req.write ("user logged out: " + usr + ".") + return apache.OK + c = SystemClient ("localhost", int(cmd)) + res = eval (data) req.write(str(res)) return apache.OK Modified: trunk/Toss/WebClient/TossMain.js =================================================================== --- trunk/Toss/WebClient/TossMain.js 2010-12-11 13:38:17 UTC (rev 1245) +++ trunk/Toss/WebClient/TossMain.js 2010-12-12 00:01:22 UTC (rev 1246) @@ -8,9 +8,6 @@ var CUR_PLAY_I = -1; var MAX_PLAY_NO = 0; -var UNIQUEID = 0; -var ID_TO_USER_MAP = {} -var ID_TO_USER_FNAME_MAP = {} var FRIENDS = [] var MAX_OPNT_LEN = 20; @@ -114,30 +111,6 @@ } } -function fbname (uid) { - if (ID_TO_USER_MAP[uid]) { return (ID_TO_USER_MAP[uid]); } - UNIQUEID += 1; - var n = "fbname" + UNIQUEID; - var res = '<span id="' + n + '"></span>'; - FB.api('/' + uid, function(response) { - ID_TO_USER_MAP[uid] = response.name; - document.getElementById(n).innerHTML = response.name; - }); - return (res); -} - -function fbfirstname (uid) { - if (ID_TO_USER_FNAME_MAP[uid]) { return (ID_TO_USER_FNAME_MAP[uid]); } - UNIQUEID += 1; - var n = "fbfirstname" + UNIQUEID; - var res = '<span id="' + n + '"></span>'; - FB.api('/' + uid, function(response) { - ID_TO_USER_FNAME_MAP[uid] = response.first_name; - document.getElementById(n).innerHTML = response.first_name; - }); - return (res); -} - function play_file_name (i) { return ("/plays/" + GAME_NAME + "_" + PLAYS[i][0] + "_" + PLAYS[i][1] + "_" + PLAYS[i][2] + "_" + PLAYS[i][3]) @@ -149,8 +122,8 @@ li.setAttribute ("id", "plays-list-elem-" + i); var fn = play_file_name (i); var p = PLAYS[i][2]; - li.innerHTML = "" + PLAYS[i][2] + ': ' + fbname(PLAYS[i][0]) + " vs " + - fbname(PLAYS[i][1]) + " " + //" move " + PLAYS[i][3] + " "+ + li.innerHTML = "" + PLAYS[i][2] + ': ' + PLAYS[i][0] + " vs " + + PLAYS[i][1] + " " + //" move " + PLAYS[i][3] + " "+ '<a title="Open" href="#" onclick="'+ "play_click('"+ fn + "', " + p + ", " + i + ')"><img title="Open" height="20" width="20" class="thumb"'+ ' src="' + fn + '.png" alt="Play '+ PLAYS[i][2] + '"/></a>'; @@ -162,7 +135,7 @@ function list_plays (game) { MAX_PLAY_NO = 0; - var lst = srv (TOSS_PORT, "list_plays ('" + game + "', " + UID + ")"); + var lst = srv (TOSS_PORT, "list_plays ('" + game + "', '" + UNAME + "')"); PLAYS = convert_python_list ('\n', strip ('\n', ' ', lst)); var plist = document.getElementById("plays-list"); while (plist.childNodes.length > 0) { plist.removeChild(plist.firstChild); } @@ -214,9 +187,9 @@ document.getElementById("board-disp").style.display = "block"; document.getElementById("play-number").innerHTML = "" + play_id; CUR_PLAY_I = pi; - VIEW_MIRROR = (PLAYS[CUR_PLAY_I][0] == UID) ? 0 : 1; + VIEW_MIRROR = (PLAYS[CUR_PLAY_I][0] == UNAME) ? 0 : 1; document.getElementById("cur-player").innerHTML = - fbfirstname (PLAYS[CUR_PLAY_I][PLAYS[CUR_PLAY_I][3] % 2]); + PLAYS[CUR_PLAY_I][PLAYS[CUR_PLAY_I][3] % 2]; toss_open (MAIN_DIR + play + ".toss"); full_redraw (); } @@ -226,7 +199,7 @@ function make_move () { if (CUR_MOVE == "") return; var m = PLAYS[CUR_PLAY_I][3] % 2; - if (PLAYS[CUR_PLAY_I][m] != UID) { + if (PLAYS[CUR_PLAY_I][m] != UNAME) { alert ("It is your Opponent's turn"); return; } @@ -236,7 +209,7 @@ CUR_ELEMS = []; ELEM_COUNTERS = {}; document.getElementById("cur-player").innerHTML = - fbfirstname (PLAYS[CUR_PLAY_I][(m + 1) % 2]); + PLAYS[CUR_PLAY_I][(m + 1) % 2]; document.getElementById('cur-move').innerHTML = "none"; full_redraw (); var fn_old = MAIN_DIR + play_file_name (CUR_PLAY_I); @@ -264,7 +237,7 @@ function opponent_item (data, index) { var li = document.createElement('li'); li.setAttribute ("class", "opponents-list-elem"); - li.setAttribute ("id", "opponent-" + UNIQUEID + "-" + index); + li.setAttribute ("id", "opponent-" + data.id + "-" + index); li.innerHTML = '<a href="#" onclick="new_play_do(' + data.id + ')">' + data.name + '</a>'; return (li); @@ -286,7 +259,7 @@ } var zeroli = document.createElement('li'); zeroli.setAttribute ("class", "opponents-list-elem"); - zeroli.setAttribute ("id", "opponent-" + UNIQUEID + "-0"); + zeroli.setAttribute ("id", "opponent-" + "-0"); zeroli.innerHTML = '<a href="#" onclick="new_play_do(-1)">Play against Yourself</a>'; o.appendChild (zeroli); for (var i = 0; i < FRIENDS.length; i++) { @@ -298,27 +271,18 @@ } function new_play () { - if (UID == 0) { alert ("Please log in to create plays"); return; } - UNIQUEID += 1; - if (FRIENDS.length == 0) { - FB.api('/me/friends', function(response) { - FRIENDS = response.data.sort (data_cmp); - store_friend_names (); - make_opnt_list (); - }); - } else { - make_opnt_list (); - } + if (UNAME == "") { alert ("Please log in to create plays"); return; } + make_opnt_list (); } function opponents_next () { for (var i = CUR_OPNT_START; i < CUR_OPNT_START + MAX_OPNT_LEN; i++) { - document.getElementById("opponent-" + UNIQUEID + "-" + i).style.display = "none"; + document.getElementById("opponent-" + "-" + i).style.display = "none"; } CUR_OPNT_START += MAX_OPNT_LEN; for (var i = CUR_OPNT_START; i < CUR_OPNT_START + MAX_OPNT_LEN; i++) { if (i < FULL_OPNT_LEN) { - document.getElementById("opponent-" + UNIQUEID + "-" + i).style.display = "list-item"; + document.getElementById("opponent-" + "-" + i).style.display = "list-item"; } } document.getElementById("opponents-prev").style.display = "block" @@ -330,12 +294,12 @@ function opponents_prev () { for (var i = CUR_OPNT_START; i < CUR_OPNT_START + MAX_OPNT_LEN; i++) { if (i < FULL_OPNT_LEN) { - document.getElementById("opponent-" + UNIQUEID + "-" + i).style.display = "none"; + document.getElementById("opponent-" + "-" + i).style.display = "none"; } } CUR_OPNT_START -= MAX_OPNT_LEN; for (var i = CUR_OPNT_START; i < CUR_OPNT_START + MAX_OPNT_LEN; i++) { - document.getElementById("opponent-" + UNIQUEID + "-" + i).style.display = "list-item"; + document.getElementById("opponent-" + "-" + i).style.display = "list-item"; } document.getElementById("opponents-next").style.display = "block" if (CUR_OPNT_START == 0) { @@ -354,18 +318,18 @@ document.getElementById("opponents").style.display = "none"; var olist = document.getElementById("opponents-list"); while (olist.childNodes.length > 0) { olist.removeChild(olist.firstChild); } - if (opp_uid == -1) { opp_uid = UID; } - if (opp_uid == 0 || UID == 0) { return; } + if (opp_uid == -1) { opp_uid = UNAME; } + if (opp_uid == 0 || UNAME == "") { return; } document.getElementById("plays-txt").style.display = "block"; document.getElementById("plays-list").style.display = "block"; MAX_PLAY_NO = parseInt(MAX_PLAY_NO) + 1; document.getElementById("play-number").innerHTML = "" + MAX_PLAY_NO; CUR_PLAY_I = PLAYS.length; VIEW_MIRROR = 0; - document.getElementById("cur-player").innerHTML = fbfirstname (UID); + document.getElementById("cur-player").innerHTML = UNAME; document.getElementById("board-disp").style.display = "block"; document.getElementById("plays").style.left = "30em"; - var p = [UID, opp_uid, MAX_PLAY_NO, 0]; + var p = [UNAME, opp_uid, MAX_PLAY_NO, 0]; PLAYS.push(p); toss_open (GAMES_DIR + GAME_NAME + ".toss"); document.getElementById("game-desc").style.display = "none"; @@ -377,33 +341,15 @@ document.getElementById("plays-list").appendChild(li); } -function TossFBInit (response) { - if (response.session) { - FB.api('/me', function(response) { - document.getElementById("fblogin").style.display = "none"; - document.getElementById("fbpicture").style.display = "block"; - UID = response.id; - UNAME = response.name; - var pic = "http://graph.facebook.com/" + response.id + "/picture"; - document.getElementById("fbuser").innerHTML = " " + response.name; - document.getElementById("fbpicture").innerHTML = - '<img alt="Facebook Picture" id="fbpic" src="' + pic + '"/>'; - ID_TO_USER_MAP[UID] = UNAME; - ID_TO_USER_FNAME_MAP[UID] = response.first_name; - }); - FB.api('/me/friends', function(response) { - FRIENDS = response.data.sort (data_cmp); - store_friend_names (); - }); - } else { - document.getElementById("fblogin").style.display = "inline"; - document.getElementById("fbpicture").style.display = "none"; - document.getElementById("fbuser").innerHTML = "Guest"; - } +function startup () { + if (navigator.userAgent.indexOf('MSIE') !=-1) { + document.getElementById("nosvg").style.display = "block"; + } else { + var un = srv("USERNAME", "user"); + if (un != "") { + UNAME = un + document.getElementById("topuser").innerHTML = "Welcome " + un; + document.getElementById("loginform").style.display = "none"; + } + } } - -function svgMessage () { - if (navigator.userAgent.indexOf('MSIE') !=-1) { - document.getElementById("nosvg").style.display = "block"; - } -} Modified: trunk/Toss/WebClient/TossStyle.css =================================================================== --- trunk/Toss/WebClient/TossStyle.css 2010-12-11 13:38:17 UTC (rev 1245) +++ trunk/Toss/WebClient/TossStyle.css 2010-12-12 00:01:22 UTC (rev 1246) @@ -7,14 +7,14 @@ body { background-color: #b5bf8f; - font-family: 'TeXGyreHerosRegular', Verdana, sans; + font-family: Verdana, 'TeXGyreHerosRegular', sans; height: 100%; } #logo { font-size: 2em; float: left; - font-family: 'OFLSortsMillGoudyRegular', arial, serif; + font-family: arial, 'OFLSortsMillGoudyRegular', serif; width: 4.5em; padding-left: 0.25em; } @@ -55,19 +55,7 @@ padding-top: 0.7em; } -#fbpicture { - position: absolute; - top: 0px; - right: 0px; - margin-right: 0.5em; - height: 2.5em; -} - -#fbpic { - height: 2.5em; -} - -#fblogin { +#topright { float: right; margin-right: 0em; } Modified: trunk/Toss/WebClient/colors.html =================================================================== --- trunk/Toss/WebClient/colors.html 2010-12-11 13:38:17 UTC (rev 1245) +++ trunk/Toss/WebClient/colors.html 2010-12-12 00:01:22 UTC (rev 1246) @@ -1,5 +1,5 @@ <!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" xmlns:fb="http://www.facebook.com/2008/fbml" xml:lang="en" lang="en"> +<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</title> Added: trunk/Toss/WebClient/crypto-sha256.js =================================================================== --- trunk/Toss/WebClient/crypto-sha256.js (rev 0) +++ trunk/Toss/WebClient/crypto-sha256.js 2010-12-12 00:01:22 UTC (rev 1246) @@ -0,0 +1,7 @@ +/* + * Crypto-JS v2.0.0 + * http://code.google.com/p/crypto-js/ + * Copyright (c) 2009, Jeff Mott. All rights reserved. + * http://code.google.com/p/crypto-js/wiki/License + */ +(function(){var c="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";var d=window.Crypto={};var a=d.util={rotl:function(h,g){return(h<<g)|(h>>>(32-g))},rotr:function(h,g){return(h<<(32-g))|(h>>>g)},endian:function(h){if(h.constructor==Number){return a.rotl(h,8)&16711935|a.rotl(h,24)&4278255360}for(var g=0;g<h.length;g++){h[g]=a.endian(h[g])}return h},randomBytes:function(h){for(var g=[];h>0;h--){g.push(Math.floor(Math.random()*256))}return g},bytesToWords:function(h){for(var k=[],j=0,g=0;j<h.length;j++,g+=8){k[g>>>5]|=h[j]<<(24-g%32)}return k},wordsToBytes:function(i){for(var h=[],g=0;g<i.length*32;g+=8){h.push((i[g>>>5]>>>(24-g%32))&255)}return h},bytesToHex:function(g){for(var j=[],h=0;h<g.length;h++){j.push((g[h]>>>4).toString(16));j.push((g[h]&15).toString(16))}return j.join("")},hexToBytes:function(h){for(var g=[],i=0;i<h.length;i+=2){g.push(parseInt(h.substr(i,2),16))}return g},bytesToBase64:function(h){if(typeof btoa=="function"){return btoa(e.bytesToString(h))}for(var g=[],l=0;l<h.length;l+=3){var m=(h[l]<<16)|(h[l+1]<<8)|h[l+2];for(var k=0;k<4;k++){if(l*8+k*6<=h.length*8){g.push(c.charAt((m>>>6*(3-k))&63))}else{g.push("=")}}}return g.join("")},base64ToBytes:function(h){if(typeof atob=="function"){return e.stringToBytes(atob(h))}h=h.replace(/[^A-Z0-9+\/]/ig,"");for(var g=[],j=0,k=0;j<h.length;k=++j%4){if(k==0){continue}g.push(((c.indexOf(h.charAt(j-1))&(Math.pow(2,-2*k+8)-1))<<(k*2))|(c.indexOf(h.charAt(j))>>>(6-k*2)))}return g}};d.mode={};var b=d.charenc={};var f=b.UTF8={stringToBytes:function(g){return e.stringToBytes(unescape(encodeURIComponent(g)))},bytesToString:function(g){return decodeURIComponent(escape(e.bytesToString(g)))}};var e=b.Binary={stringToBytes:function(j){for(var g=[],h=0;h<j.length;h++){g.push(j.charCodeAt(h))}return g},bytesToString:function(g){for(var j=[],h=0;h<g.length;h++){j.push(String.fromCharCode(g[h]))}return j.join("")}}})();(function(){var g=Crypto,b=g.util,c=g.charenc,f=c.UTF8,e=c.Binary;var a=[1116352408,1899447441,3049323471,3921009573,961987163,1508970993,2453635748,2870763221,3624381080,310598401,607225278,1426881987,1925078388,2162078206,2614888103,3248222580,3835390401,4022224774,264347078,604807628,770255983,1249150122,1555081692,1996064986,2554220882,2821834349,2952996808,3210313671,3336571891,3584528711,113926993,338241895,666307205,773529912,1294757372,1396182291,1695183700,1986661051,2177026350,2456956037,2730485921,2820302411,3259730800,3345764771,3516065817,3600352804,4094571909,275423344,430227734,506948616,659060556,883997877,958139571,1322822218,1537002063,1747873779,1955562222,2024104815,2227730452,2361852424,2428436474,2756734187,3204031479,3329325298];var d=g.SHA256=function(j,h){var i=b.wordsToBytes(d._sha256(j));return h&&h.asBytes?i:h&&h.asString?e.bytesToString(i):b.bytesToHex(i)};d._sha256=function(q){if(q.constructor==String){q=f.stringToBytes(q)}var y=b.bytesToWords(q),z=q.length*8,r=[1779033703,3144134277,1013904242,2773480762,1359893119,2600822924,528734635,1541459225],s=[],K,J,I,G,F,E,D,C,B,A,p,o;y[z>>5]|=128<<(24-z%32);y[((z+64>>9)<<4)+15]=z;for(var B=0;B<y.length;B+=16){K=r[0];J=r[1];I=r[2];G=r[3];F=r[4];E=r[5];D=r[6];C=r[7];for(var A=0;A<64;A++){if(A<16){s[A]=y[A+B]}else{var n=s[A-15],u=s[A-2],M=((n<<25)|(n>>>7))^((n<<14)|(n>>>18))^(n>>>3),L=((u<<15)|(u>>>17))^((u<<13)|(u>>>19))^(u>>>10);s[A]=M+(s[A-7]>>>0)+L+(s[A-16]>>>0)}var t=F&E^~F&D,k=K&J^K&I^J&I,x=((K<<30)|(K>>>2))^((K<<19)|(K>>>13))^((K<<10)|(K>>>22)),v=((F<<26)|(F>>>6))^((F<<21)|(F>>>11))^((F<<7)|(F>>>25));p=(C>>>0)+v+t+(a[A])+(s[A]>>>0);o=x+k;C=D;D=E;E=F;F=G+p;G=I;I=J;J=K;K=p+o}r[0]+=K;r[1]+=J;r[2]+=I;r[3]+=G;r[4]+=F;r[5]+=E;r[6]+=D;r[7]+=C}return r};d._blocksize=16})(); \ No newline at end of file Modified: trunk/Toss/WebClient/index.html =================================================================== --- trunk/Toss/WebClient/index.html 2010-12-11 13:38:17 UTC (rev 1245) +++ trunk/Toss/WebClient/index.html 2010-12-12 00:01:22 UTC (rev 1246) @@ -1,5 +1,5 @@ <!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" xmlns:fb="http://www.facebook.com/2008/fbml" xml:lang="en" lang="en"> +<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</title> @@ -7,28 +7,30 @@ <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="TossStyle.css" media="screen" title="Default"/> - <link rel="alternate stylesheet" type="text/css" href="plays/TossAltStyle.css" media="screen" title="Alternate"/> + <script type="text/javascript" src="crypto-sha256.js"> </script> <script type="text/javascript" src="TossConnect.js"> </script> <script type="text/javascript" src="TossDefaultStyle.js"> </script> <script type="text/javascript" src="TossMain.js"> </script> - <script type="text/javascript" src="Hyphenator.js"> </script> - <script type="text/javascript"> - Hyphenator.config({minwordlength : 4}); - Hyphenator.run(); - </script> </head> -<body onload="svgMessage()"> +<body onload="startup()"> <div id="top"> <div id="logo"><a href="http://www.tplay.org">tPlay</a></div> <div id="topbar"> -Welcome <span id="fbuser">Guest</span> -<div id="fblogin"> - <fb:login-button></fb:login-button> +<span id="topuser"></span> +<form id="loginform" style="display: inline;"> +Username: <input type="text" name="username" id="username" /> +Password: <input type="password" name="password" id="password" /> + +<a id="login" href="#" onclick="login()">Login</a> + +<a href="register.html">Register</a> +</form> +<span id="topright"> + <a id="logout" href="#" onclick="logout()">Logout</a> +</span> </div> -<div id="fbpicture"></div> </div> -</div> <div id="sidebar"> <p id="menu-top-par"><span style="font-weight: bold;">Games:</span></p> @@ -167,13 +169,5 @@ <div style="margin-right: 0em; display: none;">Disclaimer</div> </div> -<div id="fb-root" style="display: none;"></div> -<script src="http://connect.facebook.net/en_US/all.js"></script> -<script> - FB.init({appId: 127638590595426, status: true, cookie: true, xfbml: true}); - FB.getLoginStatus(TossFBInit, true); - FB.Event.subscribe('auth.login', TossFBInit); - FB.Event.subscribe('auth.sessionChange', TossFBInit); -</script> </body> </html> Added: trunk/Toss/WebClient/make_db.py =================================================================== --- trunk/Toss/WebClient/make_db.py (rev 0) +++ trunk/Toss/WebClient/make_db.py 2010-12-12 00:01:22 UTC (rev 1246) @@ -0,0 +1,11 @@ +#!/usr/bin/python + +from pysqlite2 import dbapi2 as sqlite3 + +print "Creating empty Toss DB" + +conn = sqlite3.connect("tossdb.sqlite") +conn.execute("create table passwd(id string primary key, passwd string)") +conn.commit () + +print "Created tossdb.sqlite" Property changes on: trunk/Toss/WebClient/make_db.py ___________________________________________________________________ Added: svn:executable + * Added: trunk/Toss/WebClient/register.html =================================================================== --- trunk/Toss/WebClient/register.html (rev 0) +++ trunk/Toss/WebClient/register.html 2010-12-12 00:01:22 UTC (rev 1246) @@ -0,0 +1,40 @@ +<!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" xml:lang="en" lang="en"> +<head> + <meta http-equiv="Content-Type" content="text/xhtml+xml; charset=UTF-8" /> + <title>test register</title> + <script type="text/javascript" src="crypto-sha256.js"></script> +</head> + +<body> + +<h2>Registration</h2> + +<p> +Username: <input type="text" id="username" /> +Password: <input type="text" id="password" /> +<a id="click" href="#" onclick="register()">Register</a> </p> + +<script> +function sync_server_msg (msg) { + var xml_request = new XMLHttpRequest (); + xml_request.open ('POST', 'PyHandler.py', false); + xml_request.setRequestHeader ('Content-Type', + 'application/x-www-form-urlencoded; charset=UTF-8'); + xml_request.send (msg); + alert (xml_request.responseText); +} + +function crypt (s) { + var c = Crypto.SHA256(s, true); + return (c.replace("#", "$")); +} + +function register () { + un = document.getElementById('username').value; + pwd = document.getElementById('password').value; + sync_server_msg ("REGISTER#" + un + " " + crypt(pwd)); +} +</script> +</body> +</html> This was sent by the SourceForge.net collaborative development platform, the world's largest Open Source development site. |
From: <luk...@us...> - 2010-12-12 20:24:30
|
Revision: 1248 http://toss.svn.sourceforge.net/toss/?rev=1248&view=rev Author: lukaszkaiser Date: 2010-12-12 20:24:21 +0000 (Sun, 12 Dec 2010) Log Message: ----------- Storing games and play states in db instead of files. Modified Paths: -------------- trunk/Toss/WebClient/.cvsignore trunk/Toss/WebClient/README trunk/Toss/WebClient/TossConnect.js trunk/Toss/WebClient/TossHandler.py trunk/Toss/WebClient/TossMain.js trunk/Toss/WebClient/Wrapper.py trunk/Toss/WebClient/make_db.py trunk/Toss/WebClient/register.html Added Paths: ----------- trunk/Toss/WebClient/change_colours.sh Removed Paths: ------------- trunk/Toss/WebClient/colors.html Property Changed: ---------------- trunk/Toss/WebClient/ Property changes on: trunk/Toss/WebClient ___________________________________________________________________ Modified: svn:ignore - # We are still using .cvsignore files as we find them easier to manage # than svn properties. Therefore if you change .cvsignore do the following. # svn propset svn:ignore -F .cvsignore . plays games TossServer tossdb.sqlite *.ttf *.eot *.svg *.woff *~ + # We are still using .cvsignore files as we find them easier to manage # than svn properties. Therefore if you change .cvsignore do the following. # svn propset svn:ignore -F .cvsignore . TossServer tossdb.sqlite *.ttf *.eot *.svg *.woff *~ Modified: trunk/Toss/WebClient/.cvsignore =================================================================== --- trunk/Toss/WebClient/.cvsignore 2010-12-12 00:01:54 UTC (rev 1247) +++ trunk/Toss/WebClient/.cvsignore 2010-12-12 20:24:21 UTC (rev 1248) @@ -2,8 +2,6 @@ # than svn properties. Therefore if you change .cvsignore do the following. # svn propset svn:ignore -F .cvsignore . -plays -games TossServer tossdb.sqlite *.ttf Modified: trunk/Toss/WebClient/README =================================================================== --- trunk/Toss/WebClient/README 2010-12-12 00:01:54 UTC (rev 1247) +++ trunk/Toss/WebClient/README 2010-12-12 20:24:21 UTC (rev 1248) @@ -1,7 +1,7 @@ This is an experimental new Toss Client, which runs in a browser. Connection with Server goes through a python wrapper and it uses sqlite, so do: - sudo apt-get install libapache2-mod-python sqite python-pysqlite2 + sudo apt-get install libapache2-mod-python sqlite3 python-pysqlite2 to run the wrapper. Make sure apache works (you may need to edit the file /etc/apache2/apache2.conf and set ServerRoot to e.g. /var/www/) and then in the file /etc/apache2/sites-enabled/[your-site] add e.g. @@ -14,25 +14,17 @@ The main handler script is called TossHander.py (server side) and corresponding JavaScript functions are in Toss*.js. To start client open index.html, but first make sure that WebClient is linked in /var/www (ln -s should suffice). +Then run "./make_db" from WebClient and make sure TossHandler top is ok. +Also copy Server from main Toss dir as TossServer to the WebClient directory. -You must create "plays/" and "games/" directories and make "plays/" writeable. -In "games/" you should place the games toss files, you can link examples -symbolically. Moreover, copy Server as TossServer to the WebClient directory. -You also need a database, run "python make_db.py" to create an empty one. -To generate thumbnails we use rsvg-convert. Install it on ubuntu with -"sudo apt-get install librsvg2-bin". To flip images and make them better we use -imagemagick, you should also install it. You need both on the server as well. - TODO: + - bug with play numbering with different players (or just hide numbers?) - change wording from play to game - - adjust colors, e.g. more whitish with yellow board? - enable google (or other) analytics - - facebook message to friend on play start - refresh (async?) plays in which the other player moves - move interface: first click all, second click toggle, if one - confirm msg - after the above: remove left-of-board div, confirm in the middle - after the above: show game result in the middle / instead of move - option to give up game and offer a draw - sort plays by who's turn it is - - bug with play numbering with different players (or just hide numbers?) Modified: trunk/Toss/WebClient/TossConnect.js =================================================================== --- trunk/Toss/WebClient/TossConnect.js 2010-12-12 00:01:54 UTC (rev 1247) +++ trunk/Toss/WebClient/TossConnect.js 2010-12-12 20:24:21 UTC (rev 1248) @@ -1,9 +1,5 @@ // JavaScript Toss Module -- Connect (basic Toss Server connection routines) -var GAMES_DIR = "/var/www/WebClient/games/"; -var PLAYS_DIR = "/var/www/WebClient/plays/"; -var MAIN_DIR = "/var/www/WebClient/"; - var UNAME = ""; var MODEL_MAXX = 0.0; @@ -99,6 +95,7 @@ for (j = str.length - 1; j > -1; j--) { if (str.charAt(j) != c1 && str.charAt(j) != c2) break; } + if (i > j) { return ("") }; return (str.substring(i, j+1)); } @@ -188,9 +185,9 @@ } // Open [file_name] on Toss Server running on port [port] and get dimenstions. -function toss_open (file_name) { +function toss_open_game (game_name) { open_toss_server (); - srv (TOSS_PORT, 'c.open("' + file_name + '")'); + srv (TOSS_PORT, 'open_game(c, "' + game_name + '")'); var dim_msg = srv (TOSS_PORT, "c.model.get_dim()"); var dim = strip('(', ')', dim_msg).split(','); MODEL_MAXX = parseFloat(strip(' ', ' ', dim[0])); @@ -201,7 +198,21 @@ MODEL_HEIGHT = Math.max (SVG_HEIGHT / 100, (MODEL_MAXY - MODEL_MINY)); } +// Open [file_name] on Toss Server running on port [port] and get dimenstions. +function toss_open_db (file_name_params) { + open_toss_server (); + srv (TOSS_PORT, 'open_db(c, ' + file_name_params + ')'); + var dim_msg = srv (TOSS_PORT, "c.model.get_dim()"); + var dim = strip('(', ')', dim_msg).split(','); + MODEL_MAXX = parseFloat(strip(' ', ' ', dim[0])); + MODEL_MINX = parseFloat(strip(' ', ' ', dim[1])); + MODEL_MAXY = parseFloat(strip(' ', ' ', dim[2])); + MODEL_MINY = parseFloat(strip(' ', ' ', dim[3])); + MODEL_WIDTH = Math.max (SVG_WIDTH / 100, (MODEL_MAXX - MODEL_MINX)); + MODEL_HEIGHT = Math.max (SVG_HEIGHT / 100, (MODEL_MAXY - MODEL_MINY)); +} + // ---- Two functions below are very basic and thus in this file. --- // Create basic svg box. Modified: trunk/Toss/WebClient/TossHandler.py =================================================================== --- trunk/Toss/WebClient/TossHandler.py 2010-12-12 00:01:54 UTC (rev 1247) +++ trunk/Toss/WebClient/TossHandler.py 2010-12-12 20:24:21 UTC (rev 1248) @@ -16,6 +16,12 @@ file.write (str) file.close() +def get_all_from_db (tbl, select_s): + res = [] + for r in db.execute("select * from " + tbl + " where " + select_s): + res.append(r) + return (res) + def is_toss_server (host, port): """Simple server check - tries to get time from Toss server.""" try: @@ -45,63 +51,55 @@ subprocess.call(["cp", f1, f2]) def list_plays (game, player_id): - lsp = "ls /var/www/plays/" + str(game) + "*_" + str(player_id) + "_*.toss" - ls = subprocess.Popen([lsp], shell=True, stdout=subprocess.PIPE).communicate()[0] - return (ls) + or_s = "(player1='" + player_id + "' or player2='" + player_id + "')" + plays = get_all_from_db ("cur_states", "game='" + game + "' and " + or_s) + def play_name (p): + (g, p1, p2, pid, move, toss, svg) = p + return ("/plays/" + str(g) + "_" + str(p1) + "_" + str(p2) + "_" + + str(pid) + "_" + str(move)) + return (str([play_name (p) for p in plays])) -def write_svg (fname, svg_str): - svgfile = open (fname + ".svg", 'w') - svgfile.write ('<?xml-stylesheet href="TossStyle.css" type="text/css"?>\n') - svgfile.write (svg_str) - svgfile.close() - subprocess.call(["rsvg-convert", fname + ".svg", "-h", "20", "-w", "20", "-o", fname + ".png"]) - #subprocess.call(["convert", "-flip", fname + ".png", fname + ".png"]) +def db_cur_insert (game, p1, p2, pid, move, toss, svg_str): + db.execute ("insert into cur_states(game, player1, player2, playid, move, toss, svg) values (?, ?, ?, ?, ?, ?, ?)", (game, p1, p2, pid, move, toss, svg_str)) + db.commit () -def new_play (orig_f, fname, svg_str): - cp (orig_f, fname + ".toss") - write_svg (fname, svg_str) - return ("ok"); +def db_old_insert (game, p1, p2, pid, move, toss, svg_str): + db.execute ("insert into old_states(game, player1, player2, playid, move, toss, svg) values (?, ?, ?, ?, ?, ?, ?)", (game, p1, p2, pid, move, toss, svg_str)) + db.commit () -def move_play (client, old_fn, new_fn, svg_s): - state = client.get_state () - file = open (new_fn + ".toss", 'w') - file.write (state) - file.close () - subprocess.call(["mv", old_fn + ".toss", old_fn + ".tossm"]) - write_svg (new_fn, svg_s) - return ("OK") +def new_play (game, p1, p2, pid, move, svg_str): + res = get_all_from_db ("games", "game='" + game + "'") + (_, toss) = res[0] + db_cur_insert (game, p1, p2, pid, move, toss, svg_str) + return ("ok") -def change_colors (a, b, c, d): - file = open ("/var/www/plays/change.sh", 'w') - file.write ('#!/bin/bash' + "\n") - file.write ('export VERYLIGHT="' + a + '";' + "\n") - file.write ('export LIGHT="' + b + '";' + "\n") - file.write ('export DARK="' + c + '";' + "\n") - file.write ('export VERYDARK="' + d + '";' + "\n") - file.write (''' - sed "s/b5bf8f/NLGHT/g" /var/www/TossStyle.css | - sed "s/ffe4aa/VRYLGHT/g" | - sed "s/400827/NDRK/g" | - sed "s/260314/VRYDRK/g" | - sed "s/VRYLGHT/$VERYLIGHT/g" | - sed "s/NLGHT/$LIGHT/g" | - sed "s/NDRK/$DARK/g" | - sed "s/VRYDRK/$VERYDARK/g" > /var/www/plays/TossAltStyle.css'''); - file.close () - x = subprocess.call(["chmod a+x /var/www/plays/change.sh"], shell=True) - if x == 0: - cg = subprocess.call(["/var/www/plays/change.sh"], shell=True) - if cg == 0: return("Changed") - return ("Some error encountered, please try again in a few seconds.") +def game_select_s (g, p1, p2, pid, m): + return("game='" + g + "' and player1='" + p1 + "' and player2='" + p2 + + "' and playid=" + pid + " and move=" + m) -def get_from_db (uid, tbl): - res = [] - for r in db.execute("select * from passwd where id='" + uid + "'"): - res.append(r) - return (res) +def open_db (client, game, p1, p2, pid, move): + select_s = game_select_s (game, p1, p2, pid, move) + res = get_all_from_db ("cur_states", select_s) + (_, _, _, _, _, toss, _) = res[0] + client.open_from_str (toss) -def passwd_from_db (uid): - res = get_from_db (uid, "passwd") +def open_game (client, game): + res = get_all_from_db ("games", "game='" + game + "'") + (_, toss) = res[0] + client.open_from_str (toss) + +def move_play (client, g, p1, p2, pid, m, svg_s): + new_toss = client.get_state () + select_s = game_select_s (g, p1, p2, pid, m) + old_res = get_all_from_db ("cur_states", select_s) + (_, _, _, _, _, old_toss, old_svg) = old_res[0] + db.execute ("delete from cur_states where " + select_s) + db_old_insert (g, p1, p2, pid, m, old_toss, old_svg) + db_cur_insert (g, p1, p2, pid, int(m) + 1, new_toss, svg_s) + return ("OK") + +def passwd_from_db (uid): + res = get_all_from_db ("passwd", "id='" + uid + "'") if len(res) > 1: raise Exception ("db", "multiple passwords for " + uid) if len(res) == 0: return (None) (uid, passwd) = res[0] @@ -141,10 +139,6 @@ msg = req.read () #tmp_log(msg) if msg.find('#') == -1: - if msg.find('COL') > -1: - res = eval (msg.replace('COL', 'change_colors')) - req.write(str(res)) - return apache.OK port = open_toss_server (free_toss_port ()) req.write(str(port)) return apache.OK Modified: trunk/Toss/WebClient/TossMain.js =================================================================== --- trunk/Toss/WebClient/TossMain.js 2010-12-12 00:01:54 UTC (rev 1247) +++ trunk/Toss/WebClient/TossMain.js 2010-12-12 20:24:21 UTC (rev 1248) @@ -116,6 +116,11 @@ PLAYS[i][1] + "_" + PLAYS[i][2] + "_" + PLAYS[i][3]) } +function play_file_cmd (i) { + return ("'" + GAME_NAME + "', '" + PLAYS[i][0] + "', '" + + PLAYS[i][1] + "', '" + PLAYS[i][2] + "', '" + PLAYS[i][3] + "'") +} + function new_play_item (i) { var li = document.createElement('li'); li.setAttribute ("class", "plays-list-elem"); @@ -141,8 +146,7 @@ while (plist.childNodes.length > 0) { plist.removeChild(plist.firstChild); } var d = game.length + 2; for (var i = 0; i < PLAYS.length; i++) { - var p = PLAYS[i].substring(PLAYS[i].lastIndexOf('/') + d, - PLAYS[i].length - 5); + var p = PLAYS[i].substring(PLAYS[i].lastIndexOf('/') + d); PLAYS[i] = convert_python_list ('_', p); if (PLAYS[i][2] > MAX_PLAY_NO) { MAX_PLAY_NO = PLAYS[i][2]; } plist.appendChild(new_play_item (i)); @@ -176,7 +180,7 @@ create_svg_box ("19em", "19em", 40, 40, "board"); } document.getElementById("opening").style.display = "block"; - toss_open (GAMES_DIR + game + ".toss"); + toss_open_game (game); document.getElementById("opening").style.display = "none"; list_plays (game); document.getElementById("game-disp").style.display = "block"; @@ -190,7 +194,7 @@ VIEW_MIRROR = (PLAYS[CUR_PLAY_I][0] == UNAME) ? 0 : 1; document.getElementById("cur-player").innerHTML = PLAYS[CUR_PLAY_I][PLAYS[CUR_PLAY_I][3] % 2]; - toss_open (MAIN_DIR + play + ".toss"); + toss_open_db (play_file_cmd(pi)); full_redraw (); } @@ -212,11 +216,9 @@ PLAYS[CUR_PLAY_I][(m + 1) % 2]; document.getElementById('cur-move').innerHTML = "none"; full_redraw (); - var fn_old = MAIN_DIR + play_file_name (CUR_PLAY_I); + var fn = play_file_cmd (CUR_PLAY_I); PLAYS[CUR_PLAY_I][3] = parseInt(PLAYS[CUR_PLAY_I][3]) + 1; - var fn_new = MAIN_DIR + play_file_name (CUR_PLAY_I); - srv (TOSS_PORT, "move_play(c, '" + fn_old + "', '" + fn_new + "', " + - svg_string () + ")"); + srv (TOSS_PORT, "move_play(c, " + fn + ", " + svg_string () + ")"); var old_li = document.getElementById ("plays-list-elem-" + CUR_PLAY_I); var li = new_play_item (CUR_PLAY_I); old_li.parentNode.replaceChild (li, old_li); @@ -331,12 +333,11 @@ document.getElementById("plays").style.left = "30em"; var p = [UNAME, opp_uid, MAX_PLAY_NO, 0]; PLAYS.push(p); - toss_open (GAMES_DIR + GAME_NAME + ".toss"); + toss_open_game (GAME_NAME); document.getElementById("game-desc").style.display = "none"; full_redraw (); - var fn = MAIN_DIR + play_file_name (CUR_PLAY_I); - srv (TOSS_PORT, "new_play('" + GAMES_DIR + GAME_NAME + ".toss', '" + - fn + "', " + svg_string () + ")"); + var fn = play_file_cmd (CUR_PLAY_I); + srv (TOSS_PORT, "new_play(" + fn + ", " + svg_string () + ")"); li = new_play_item (CUR_PLAY_I); document.getElementById("plays-list").appendChild(li); } Modified: trunk/Toss/WebClient/Wrapper.py =================================================================== --- trunk/Toss/WebClient/Wrapper.py 2010-12-12 00:01:54 UTC (rev 1247) +++ trunk/Toss/WebClient/Wrapper.py 2010-12-12 20:24:21 UTC (rev 1248) @@ -424,6 +424,10 @@ params[ps[0]] = float(ps[1]) return ((msg[0], emb, params, int(msg[3]))) + def open_from_str (self, s): + state_str = ("#db#") + "$".join (s.split ("\n")) + self.set_state (state_str) + def open (self, file_name_s): file_name = str(file_name_s) if file_name == '': return Added: trunk/Toss/WebClient/change_colours.sh =================================================================== --- trunk/Toss/WebClient/change_colours.sh (rev 0) +++ trunk/Toss/WebClient/change_colours.sh 2010-12-12 20:24:21 UTC (rev 1248) @@ -0,0 +1,14 @@ +#!/bin/bash +export VERYLIGHT="f0f0f0"; +export LIGHT="b9bdbc"; +export DARK="3c3b37"; +export VERYDARK="000000"; + + sed "s/b5bf8f/NLGHT/g" TossStyle.css | + sed "s/ffe4aa/VRYLGHT/g" | + sed "s/400827/NDRK/g" | + sed "s/260314/VRYDRK/g" | + sed "s/VRYLGHT/$VERYLIGHT/g" | + sed "s/NLGHT/$LIGHT/g" | + sed "s/NDRK/$DARK/g" | + sed "s/VRYDRK/$VERYDARK/g" > TossAltStyle.css Property changes on: trunk/Toss/WebClient/change_colours.sh ___________________________________________________________________ Added: svn:executable + * Deleted: trunk/Toss/WebClient/colors.html =================================================================== --- trunk/Toss/WebClient/colors.html 2010-12-12 00:01:54 UTC (rev 1247) +++ trunk/Toss/WebClient/colors.html 2010-12-12 20:24:21 UTC (rev 1248) @@ -1,75 +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</title> - <meta http-equiv="X-UA-Compatible" content="chrome=1"> - <link rel="icon" type="image/vnd.microsoft.icon" href="/favicon.ico" /> - <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=OFL+Sorts+Mill+Goudy+TT"/> - <link rel="stylesheet" type="text/css" href="TossStyle.css" media="screen" title="Default"/> - <link rel="alternate stylesheet" type="text/css" href="plays/TossAltStyle.css" media="screen" title="Alternate"/> - <script type="text/javascript" src="Hyphenator.js"> </script> - <script type="text/javascript"> - Hyphenator.config({minwordlength : 4}); - Hyphenator.run(); - - // Send [msg] to server and return response text. - function sync_server_msg (msg) { - var xml_request = new XMLHttpRequest (); - xml_request.open ('POST', 'TossHandler.py', false); - xml_request.setRequestHeader ('Content-Type', - 'application/x-www-form-urlencoded; charset=UTF-8'); - xml_request.send (msg); - return (xml_request.responseText); - } - - function change_color (a, b, c, d) { - alert (sync_server_msg ("COL('"+a+"', '"+b+"', '"+c+"', '"+d+"')")); - } - </script> -</head> - -<body> -<div id="top"> - <div id="logo"><a href="http://www.tplay.org">tPlay</a></div> - <div id="topbar"></div> -</div> - -<div id="main"> - -<div id="welcome" class="hyphenate"> -<p id="welcome-top">Change colors on <span class="logo-in">tPlay</span></p> -<p class="short"> -Insert four colors in the boxes below (in hex notation, as the example given) -and press the <b>Change</b> button to change the colors of the alternate -CSS style file for tPlay. Then, open tPlay again (remember to reload) and -in the <b>View</b> menu of your browser go to <b>Page Style</b> and -click on <b>Alternate</b> to see your changes. You may also do this -directly on this page to get the first impression.</p> - -<p class="short">Your colors will <b>not</b> be saved forever, -only for a short period of time. If you like them, then email -them to lukaszkaiser at gmail dot com.</p> - -<ul> -<li>Very Light # - <input id="vlt" name="vlt" value="eceab0"; type="text" style="margin-left: 0.4em" size="24"/> -</li> -<li>Light Color # <input id="lt" name="lt" value="61b594" type="text" size="24"/></li> -<li>Dark Color # <input id="dk" name="dk" value="bf4c18" type="text" size="24"/></li> -<li>Very Dark # - <input id="vdk" name="vdk" value="597533" type="text" style="margin-left: 0.4em" size="24"/> -</li> -</ul> - -<p><button onclick="change_color( - document.getElementById('vlt').value, - document.getElementById('lt').value, - document.getElementById('dk').value, - document.getElementById('vdk').value)">Change</button> -</p> - -</div> - -</body> -</html> Modified: trunk/Toss/WebClient/make_db.py =================================================================== --- trunk/Toss/WebClient/make_db.py 2010-12-12 00:01:54 UTC (rev 1247) +++ trunk/Toss/WebClient/make_db.py 2010-12-12 20:24:21 UTC (rev 1248) @@ -1,11 +1,31 @@ #!/usr/bin/python +import os from pysqlite2 import dbapi2 as sqlite3 print "Creating empty Toss DB" conn = sqlite3.connect("tossdb.sqlite") conn.execute("create table passwd(id string primary key, passwd string)") +conn.execute("create table cur_states(game string, player1 string, player2 string, playid int, move int, toss string, svg string)") +conn.execute("create table old_states(game string, player1 string, player2 string, playid int, move int, toss string, svg string)") +conn.execute("create table games(game string primary key, toss string)") conn.commit () +def add_game (g): + f = open("../examples/" + g + ".toss") + toss = f.read() + f.close() + conn.execute ("insert into games(game, toss) values (?, ?)", (g, toss)) + +games = ["Breakthrough", "Chess", "Entanglement", "Gomoku", "Tic-Tac-Toe"] + +for g in games: + print ("Added " + g) + add_game (g) + +conn.commit () + +os.chmod ("tossdb.sqlite", 0777) + print "Created tossdb.sqlite" Modified: trunk/Toss/WebClient/register.html =================================================================== --- trunk/Toss/WebClient/register.html 2010-12-12 00:01:54 UTC (rev 1247) +++ trunk/Toss/WebClient/register.html 2010-12-12 20:24:21 UTC (rev 1248) @@ -18,7 +18,7 @@ <script> function sync_server_msg (msg) { var xml_request = new XMLHttpRequest (); - xml_request.open ('POST', 'PyHandler.py', false); + xml_request.open ('POST', 'TossHandler.py', false); xml_request.setRequestHeader ('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8'); xml_request.send (msg); This was sent by the SourceForge.net collaborative development platform, the world's largest Open Source development site. |
From: <luk...@us...> - 2010-12-12 23:31:14
|
Revision: 1249 http://toss.svn.sourceforge.net/toss/?rev=1249&view=rev Author: lukaszkaiser Date: 2010-12-12 23:31:07 +0000 (Sun, 12 Dec 2010) Log Message: ----------- Move play listing to the main page. Modified Paths: -------------- trunk/Toss/WebClient/README trunk/Toss/WebClient/TossConnect.js trunk/Toss/WebClient/TossHandler.py trunk/Toss/WebClient/TossMain.js trunk/Toss/WebClient/TossStyle.css trunk/Toss/WebClient/index.html Modified: trunk/Toss/WebClient/README =================================================================== --- trunk/Toss/WebClient/README 2010-12-12 20:24:21 UTC (rev 1248) +++ trunk/Toss/WebClient/README 2010-12-12 23:31:07 UTC (rev 1249) @@ -19,8 +19,7 @@ TODO: - - bug with play numbering with different players (or just hide numbers?) - - change wording from play to game + - redo TossServer calls and caching - enable google (or other) analytics - refresh (async?) plays in which the other player moves - move interface: first click all, second click toggle, if one - confirm msg Modified: trunk/Toss/WebClient/TossConnect.js =================================================================== --- trunk/Toss/WebClient/TossConnect.js 2010-12-12 20:24:21 UTC (rev 1248) +++ trunk/Toss/WebClient/TossConnect.js 2010-12-12 23:31:07 UTC (rev 1249) @@ -60,26 +60,6 @@ return (d.replace(" ", "$")); } -// Login -function login () { - un = document.getElementById('username').value; - pwd = document.getElementById('password').value; - resp = sync_server_msg ("LOGIN#" + un + " " + crypt(pwd)); - if (resp == "OK") { - UNAME = un; - document.getElementById("topuser").innerHTML = "Welcome " + un; - document.getElementById("loginform").style.display = "none"; - } else { - alert (resp) - } -} - -// Logout -function logout () { - document.getElementById("loginform").style.display = "inline"; - document.getElementById("topuser").innerHTML = ""; -} - // Send [msg] to server attaching prefix '[port]#' and return response text. function srv (port, msg) { return (sync_server_msg (port.toString() + '#' + msg)); Modified: trunk/Toss/WebClient/TossHandler.py =================================================================== --- trunk/Toss/WebClient/TossHandler.py 2010-12-12 20:24:21 UTC (rev 1248) +++ trunk/Toss/WebClient/TossHandler.py 2010-12-12 23:31:07 UTC (rev 1249) @@ -119,9 +119,10 @@ db_pwd = passwd_from_db (uid) if not db_pwd: return ("no such user registered") if (pwd != db_pwd): return ("wrong password") - cookie1 = Cookie.Cookie(TUID + 'username', uid) - cookie2 = Cookie.Cookie(TUID + 'passphrase', pwd) - Cookie.add_cookie(req, cookie1) + t = time.time() + 3600; + cookie1 = Cookie.Cookie(TUID + 'username', uid, expires=t) + cookie2 = Cookie.Cookie(TUID + 'passphrase', pwd, expires=t) + Cookie.add_cookie(req, cookie1) Cookie.add_cookie(req, cookie2) return ("OK") @@ -131,6 +132,12 @@ db.commit () return (True) +def get_free_id (): + fid = 0 + for f in db.execute ("select count(*) from cur_states"): + fid = int(f[0]) + return (fid + 1) + def handler(req): global db req.content_type = "text/plain" @@ -162,10 +169,18 @@ req.write("Login failed for " + uname + ": " + res) return apache.OK if cmd == "LOGOUT": - cookie = Cookie.Cookie(TUID + 'passphrase', "") + cookie = Cookie.Cookie(TUID + 'passphrase', "a") + cookie = Cookie.Cookie(TUID + 'username', "a") Cookie.add_cookie(req, cookie) req.write ("user logged out: " + usr + ".") return apache.OK + if cmd == "LISTPLAYS": + res = eval(data) + req.write(str(res)) + return apache.OK + if cmd == "FREEID": + req.write(str(get_free_id ())) + return apache.OK c = SystemClient ("localhost", int(cmd)) res = eval (data) req.write(str(res)) Modified: trunk/Toss/WebClient/TossMain.js =================================================================== --- trunk/Toss/WebClient/TossMain.js 2010-12-12 20:24:21 UTC (rev 1248) +++ trunk/Toss/WebClient/TossMain.js 2010-12-12 23:31:07 UTC (rev 1249) @@ -6,7 +6,6 @@ var PLAYS = []; var CUR_PLAY_I = -1; -var MAX_PLAY_NO = 0; var FRIENDS = [] @@ -111,69 +110,47 @@ } } -function play_file_name (i) { - return ("/plays/" + GAME_NAME + "_" + PLAYS[i][0] + "_" + - PLAYS[i][1] + "_" + PLAYS[i][2] + "_" + PLAYS[i][3]) -} - function play_file_cmd (i) { return ("'" + GAME_NAME + "', '" + PLAYS[i][0] + "', '" + PLAYS[i][1] + "', '" + PLAYS[i][2] + "', '" + PLAYS[i][3] + "'") } -function new_play_item (i) { +function new_play_item (game, i) { var li = document.createElement('li'); li.setAttribute ("class", "plays-list-elem"); - li.setAttribute ("id", "plays-list-elem-" + i); - var fn = play_file_name (i); + li.setAttribute ("id", "plays-list-" + game + "-elem-" + i); var p = PLAYS[i][2]; li.innerHTML = "" + PLAYS[i][2] + ': ' + PLAYS[i][0] + " vs " + PLAYS[i][1] + " " + //" move " + PLAYS[i][3] + " "+ - '<a title="Open" href="#" onclick="'+ "play_click('"+ fn + "', " + p + - ", " + i + ')"><img title="Open" height="20" width="20" class="thumb"'+ - ' src="' + fn + '.png" alt="Play '+ PLAYS[i][2] + '"/></a>'; - // '<a href="#" onclick="'+ "play_click('"+ fn + "', " + p + ", " + i + - // ')">Open</a>'; + '<a title="Open" href="#" onclick="'+ "play_click('"+ game + "', " + p + + ", " + i + ')">Open</a>'; // +'<a href="#" onclick="'+ "del_play('"+ fn + "')" + '">Delete</a>'; return (li); } function list_plays (game) { - MAX_PLAY_NO = 0; - var lst = srv (TOSS_PORT, "list_plays ('" + game + "', '" + UNAME + "')"); - PLAYS = convert_python_list ('\n', strip ('\n', ' ', lst)); - var plist = document.getElementById("plays-list"); + var lst = srv ("LISTPLAYS", "list_plays ('" + game + "', '" + UNAME + "')"); + PLAYS = convert_python_list (',', lst); + var plist = document.getElementById("plays-list-" + game); while (plist.childNodes.length > 0) { plist.removeChild(plist.firstChild); } var d = game.length + 2; for (var i = 0; i < PLAYS.length; i++) { var p = PLAYS[i].substring(PLAYS[i].lastIndexOf('/') + d); PLAYS[i] = convert_python_list ('_', p); - if (PLAYS[i][2] > MAX_PLAY_NO) { MAX_PLAY_NO = PLAYS[i][2]; } - plist.appendChild(new_play_item (i)); + plist.appendChild(new_play_item (game, i)); } if (PLAYS.length == 0) { - document.getElementById("plays-txt").style.display = "none"; - document.getElementById("plays-list").style.display = "none"; + document.getElementById("plays-list-" + game).style.display = "none"; } else { - document.getElementById("plays-txt").style.display = "block"; - document.getElementById("plays-list").style.display = "block"; + document.getElementById("plays-list-" + game).style.display = "block"; } } function game_click (game) { document.getElementById("welcome").style.display = "none"; - document.getElementById("board-disp").style.display = "none"; document.getElementById("game-disp").style.display = "none"; - document.getElementById("game-desc").style.display = "block"; - if (GAME_NAME != "") { - document.getElementById(GAME_NAME).className = ""; - document.getElementById(GAME_NAME + "-desc").style.display = "none"; - clear_svg (); - } - document.getElementById ("game-title").innerHTML = game; - document.getElementById(game).className = "game-highlighted"; + document.getElementById("plays").style.display = "none"; GAME_NAME = game; - document.getElementById(GAME_NAME + "-desc").style.display = "block"; if (game == "Tic-Tac-Toe") { // bigger margins needed create_svg_box ("19em", "19em", 130, 130, "board"); } else { @@ -182,13 +159,14 @@ document.getElementById("opening").style.display = "block"; toss_open_game (game); document.getElementById("opening").style.display = "none"; - list_plays (game); document.getElementById("game-disp").style.display = "block"; } -function play_click (play, play_id, pi) { - document.getElementById("game-desc").style.display = "none"; - document.getElementById("board-disp").style.display = "block"; +function play_click (game, play_id, pi) { + list_plays (game) + game_click (game) + document.getElementById ("game-title").innerHTML = game; + 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; @@ -219,8 +197,8 @@ var fn = play_file_cmd (CUR_PLAY_I); PLAYS[CUR_PLAY_I][3] = parseInt(PLAYS[CUR_PLAY_I][3]) + 1; srv (TOSS_PORT, "move_play(c, " + fn + ", " + svg_string () + ")"); - var old_li = document.getElementById ("plays-list-elem-" + CUR_PLAY_I); - var li = new_play_item (CUR_PLAY_I); + var old_li = document.getElementById ("plays-list-" + GAME_NAME + "-elem-" + CUR_PLAY_I); + var li = new_play_item (GAME_NAME, CUR_PLAY_I); old_li.parentNode.replaceChild (li, old_li); } @@ -272,9 +250,10 @@ document.getElementById("opponents").style.display = "block"; } -function new_play () { - if (UNAME == "") { alert ("Please log in to create plays"); return; } - make_opnt_list (); +function new_play (game) { + if (UNAME == "") { alert ("Please log in to create plays"); return; } + GAME_NAME = game; + make_opnt_list (); } function opponents_next () { @@ -317,40 +296,71 @@ } function new_play_do (opp_uid) { + list_plays (GAME_NAME) + game_click (GAME_NAME) document.getElementById("opponents").style.display = "none"; var olist = document.getElementById("opponents-list"); while (olist.childNodes.length > 0) { olist.removeChild(olist.firstChild); } if (opp_uid == -1) { opp_uid = UNAME; } if (opp_uid == 0 || UNAME == "") { return; } - document.getElementById("plays-txt").style.display = "block"; - document.getElementById("plays-list").style.display = "block"; - MAX_PLAY_NO = parseInt(MAX_PLAY_NO) + 1; - document.getElementById("play-number").innerHTML = "" + MAX_PLAY_NO; + document.getElementById("plays-list-" + GAME_NAME).style.display = "block"; + FREE_PLAY_NO = parseInt(srv("FREEID", "play")) + document.getElementById("play-number").innerHTML = "" + FREE_PLAY_NO; CUR_PLAY_I = PLAYS.length; VIEW_MIRROR = 0; document.getElementById("cur-player").innerHTML = UNAME; - document.getElementById("board-disp").style.display = "block"; + document.getElementById("game-disp").style.display = "block"; document.getElementById("plays").style.left = "30em"; - var p = [UNAME, opp_uid, MAX_PLAY_NO, 0]; + var p = [UNAME, opp_uid, FREE_PLAY_NO, 0]; PLAYS.push(p); toss_open_game (GAME_NAME); - document.getElementById("game-desc").style.display = "none"; full_redraw (); var fn = play_file_cmd (CUR_PLAY_I); srv (TOSS_PORT, "new_play(" + fn + ", " + svg_string () + ")"); - li = new_play_item (CUR_PLAY_I); - document.getElementById("plays-list").appendChild(li); + li = new_play_item (GAME_NAME, CUR_PLAY_I); + document.getElementById("plays-list-" + GAME_NAME).appendChild(li); } +function setup_user (un) { + UNAME = un + document.getElementById("topuser").innerHTML = "Welcome " + un; + document.getElementById("loginform").style.display = "none"; + document.getElementById("welcome").style.display = "none"; + document.getElementById("plays").style.display = "block"; + list_plays ("Breakthrough"); + list_plays ("Chess"); + list_plays ("Entanglement"); + list_plays ("Gomoku"); + list_plays ("Tic-Tac-Toe"); +} + function startup () { if (navigator.userAgent.indexOf('MSIE') !=-1) { document.getElementById("nosvg").style.display = "block"; } else { var un = srv("USERNAME", "user"); - if (un != "") { - UNAME = un - document.getElementById("topuser").innerHTML = "Welcome " + un; - document.getElementById("loginform").style.display = "none"; - } + if (un != "") { setup_user (un) }; } } + +// Login +function login () { + un = document.getElementById('username').value; + pwd = document.getElementById('password').value; + resp = sync_server_msg ("LOGIN#" + un + " " + crypt(pwd)); + if (resp == "OK") { + setup_user (un) + } else { + alert (resp) + } +} + +// Logout +function logout () { + document.getElementById("loginform").style.display = "inline"; + document.getElementById("topuser").innerHTML = ""; + document.getElementById("plays").style.display = "none"; + document.getElementById("game-title").style.display = "none"; + document.getElementById("game-disp").style.display = "none"; + document.getElementById("welcome").style.display = "block"; +} Modified: trunk/Toss/WebClient/TossStyle.css =================================================================== --- trunk/Toss/WebClient/TossStyle.css 2010-12-12 20:24:21 UTC (rev 1248) +++ trunk/Toss/WebClient/TossStyle.css 2010-12-12 23:31:07 UTC (rev 1249) @@ -75,19 +75,6 @@ border-width: 5px 0px 0px 0px; } -#sidebar { - float: left; - width: 8.2em; - color: #ffe4aa; - background-color: #400827; - margin-top: 1em; - margin-left: 0em; - padding-left: 0.1em; - border: 1px solid #260314; - -moz-border-radius: 8px; - -webkit-border-radius: 8px; -} - #menu-top-par { margin-top: 0.5em; margin-bottom: 0em; @@ -100,39 +87,33 @@ margin-bottom: 0.5em; } -#sidebar button { - text-align: left; - border: none; +#topbar a { font-weight: bold; text-decoration: none; color: #ffe4aa; - background-color: #400827; width: 100%; } -#sidebar a { - font-weight: bold; - text-decoration: none; - color: #ffe4aa; - width: 100%; -} - -#sidebar a:hover { +#topbar a:hover { color: #b5bf8f; } -#sidebar .game-highlighted { - color: #b5bf8f; -} - /* Content */ +.game_list { + font-weight: bold; +} + +.game_list a { + font-weight: normal; +} + #main { margin-top: 2.5em; color: #260314; background-color: #ffe4aa; - margin-left: 9em; + margin-left: 1em; margin-right: 1em; padding: 1em; min-height: 100%; @@ -239,11 +220,6 @@ border-right: 1px solid #260314; } -#board-disp { - position: relative; - display: none; -} - #board { position: absolute; left: 9em; @@ -302,9 +278,7 @@ } #plays { - position: absolute; - left: 30em; - top: 0px; + display: none; padding-left: 1em; } Modified: trunk/Toss/WebClient/index.html =================================================================== --- trunk/Toss/WebClient/index.html 2010-12-12 20:24:21 UTC (rev 1248) +++ trunk/Toss/WebClient/index.html 2010-12-12 23:31:07 UTC (rev 1249) @@ -15,16 +15,17 @@ <body onload="startup()"> <div id="top"> -<div id="logo"><a href="http://www.tplay.org">tPlay</a></div> +<div id="logo"><a href="index.html">tPlay</a></div> <div id="topbar"> <span id="topuser"></span> <form id="loginform" style="display: inline;"> Username: <input type="text" name="username" id="username" /> + Password: <input type="password" name="password" id="password" /> <a id="login" href="#" onclick="login()">Login</a> -<a href="register.html">Register</a> +(<a href="register.html">Register</a>) </form> <span id="topright"> <a id="logout" href="#" onclick="logout()">Logout</a> @@ -32,27 +33,6 @@ </div> </div> -<div id="sidebar"> -<p id="menu-top-par"><span style="font-weight: bold;">Games:</span></p> -<ul id="menu-list"> - <li class="menu-list-item"> - <a id="Breakthrough" href="#" onclick="game_click('Breakthrough')">Breakthrough</a> - </li> - <li class="menu-list-item"> - <a id="Chess" href="#" onclick="game_click('Chess')">Chess</a> - </li> - <li class="menu-list-item"> - <a id="Entanglement" href="#" onclick="game_click('Entanglement')">Entanglement</a> - </li> - <li class="menu-list-item"> - <a id="Gomoku" href="#" onclick="game_click('Gomoku')">Gomoku</a> - </li> - <li class="menu-list-item"> - <a id="Tic-Tac-Toe" href="#" onclick="game_click('Tic-Tac-Toe')">Tic-Tac-Toe</a> - </li> -</ul> -</div> - <div id="main"> <div id="opponents"> @@ -64,15 +44,10 @@ <div id="welcome" class="hyphenate"> <p id="welcome-top">Enjoy games on <span class="logo-in">tPlay</span></p> -<p class="short">Strategic games are fun. Analyzing your plays you can improve -your strength and reasoning skills. On <span class="logo-in">tPlay</span> -you will enjoy the most challenging games.</p> -<ul id="features-list"> -<li>Login through Facebook on the upper right</li> -<li>Choose a game from the list — one you like or a new one to learn</li> -<li>Your plays are saved so you can analyze and restart them</li> -<li>Play against your Friends or against yourself to improve your strength</li> -<ul> +<p class="short"> + Strategic games are fun! + <a href="register.html">Register</a>, login and enjoy + <span class="logo-in">tPlay</span>!</p> </div> <div id="nosvg" class="hyphenate short" @@ -96,71 +71,53 @@ <div id="game-title"></div> +<div id="plays"> + <p> + <a href="http://en.wikipedia.org/wiki/Breakthrough_(board_game)" + class="game_list">Breakthrough</a> + (<a href="#" onclick="new_play ('Breakthrough')">New Game</a>) + </p> + <ul id="plays-list-Breakthrough"></ul> + <p> + <a class="game_list" href="http://en.wikipedia.org/wiki/Chess">Chess</a> + (<a href="#" onclick="new_play ('Chess')">New Game</a>) + </p> + <ul id="plays-list-Chess"></ul> + <p> + <a href="http://en.wikipedia.org/wiki/Entanglement_(graph_measure)" + class="game_list">Entanglement</a> + (<a href="#" onclick="new_play ('Entanglement')">New Game</a>) + </p> + <ul id="plays-list-Entanglement"></ul> + <p> + <a href="http://en.wikipedia.org/wiki/Gomoku" + class="game_list">Gomoku</a> + (<a href="#" onclick="new_play ('Gomoku')">New Game</a>) + </p> + <ul id="plays-list-Gomoku"></ul> + <p> + <a href="http://en.wikipedia.org/wiki/Tic-tac-toe" + class="game_list">Tic-Tac-Toe</a> + (<a href="#" onclick="new_play ('Tic-Tac-Toe')">New Game</a>) + </p> + <ul id="plays-list-Tic-Tac-Toe"></ul> +</div> + + <div id="opening" style="display: none;">Opening may take some time ...</div> <div id="game-disp"> - <div id="game-desc" class="hyphenate"> - <div id="Breakthrough-desc" style="display: none;"> - <p><a href="http://en.wikipedia.org/wiki/Breakthrough_(board_game)"">Breakthrough</a> is - a modern game in which the players attempt to get through the pieces of the opponent - and reach the other end of the board. The pieces move one space straight forward if the - target square is empty or one space diagonally forward, possibly beating opponents piece.</p> - <p>Even with these simple rules, Breakthrough is an interesting game in which a good - strategy requires to balance attacking pivotal pieces of the opponent and organizing - your own defensive patterns. Play yourself to see how challenging this can be.</p> + <div id="move"> + <div id="play-no-div">Game <span id="play-number">?</span></div> + Active player:<br/> + <div id="cur-player"></div> + Chosen move:<br/> + <div id="cur-move">none</div> + <div id="mk-move"> + <a href="#" onclick="make_move ()">Make move</a> </div> - <div id="Chess-desc" style="display: none;"> - <p><a href="http://en.wikipedia.org/wiki/Chess">Chess</a>, - the great classical game.</p> - </div> - <div id="Entanglement-desc" style="display: none;"> - <p><a href="http://en.wikipedia.org/wiki/Entanglement_(graph_measure)">Entanglement</a> is a game - in which a number of cops attempt to capture a robber. In each step, the cops are informed - about the current position of the robber and one of the cops may decide to fly there. - The robber on the other hand must then choose a road and get away to another position.</p> - <p>Entanglement started as a game which gives insight into how the network of roads is - intertwined. But in many cases playing it is really challenging — try capturing - a robber on a 9×2 grid with three cops to see why.</p> - </div> - <div id="Gomoku-desc" style="display: none;"> - <p><a href="http://en.wikipedia.org/wiki/Gomoku">Gomoku</a>, also known as five in a row, - is a strategic game in which each player tries to get 5 of his or her stones in a row, - horizontally, vertically, or diagonally. It is played on various board sizes and often - with additional rules, but we stick to the free-style version.</p> - <p>Gomoku has been solved for 15×15 boards, on which the starting player has - a winning strategy, and on 6×6 boards, where both players can ensure a draw. - Even though the starting player clearly has an advantage, it is challenging to win - and on an 8×8 board an interesting fight for a draw often takes place.</p> - </div> - <div id="Tic-Tac-Toe-desc" style="display: none;"> - <p><a href="http://en.wikipedia.org/wiki/Tic-tac-toe">Tic-Tac-Toe</a> is a very - simple game in which the objective of one player is to get three consecutive - crosses in a horizontal, vertical or diagonal row, and the other player attempts - the same with circles.</p> - <p>This game is not very interesting to play — both players can force a draw - with a strategy which is not hard to figure out. But exactly this simplicity - can be exploited for educational purposes, e.g. to explain concepts about games - on example plays.</p> - </div> </div> - <div id="board-disp"> - <div id="move"> - <div id="play-no-div">Play <span id="play-number">?</span></div> - Active player:<br/> - <div id="cur-player"></div> - Chosen move:<br/> - <div id="cur-move">none</div> - <div id="mk-move"> - <a href="#" onclick="make_move ()">Make move</a> - </div> - </div> - <div id="board"><div id="working">Working...</div></div> - </div> - <div id="plays"> - <div id="plays-txt">Plays:</div> - <ul id="plays-list"></ul> - <a href="#" onclick="new_play ()">Create new play</a> - </div> + <div id="board"><div id="working">Working...</div></div> </div> </div> This was sent by the SourceForge.net collaborative development platform, the world's largest Open Source development site. |
From: <luk...@us...> - 2010-12-14 00:28:39
|
Revision: 1250 http://toss.svn.sourceforge.net/toss/?rev=1250&view=rev Author: lukaszkaiser Date: 2010-12-14 00:28:32 +0000 (Tue, 14 Dec 2010) Log Message: ----------- Moving WebClient to internal toss port handling. This requires that toss state (or its db id) is communicated at each request which is not the case now - the current version will break in multi-user case (to be corrected soon). Modified Paths: -------------- trunk/Toss/WebClient/TossHandler.py trunk/Toss/WebClient/make_db.py Modified: trunk/Toss/WebClient/TossHandler.py =================================================================== --- trunk/Toss/WebClient/TossHandler.py 2010-12-12 23:31:07 UTC (rev 1249) +++ trunk/Toss/WebClient/TossHandler.py 2010-12-14 00:28:32 UTC (rev 1250) @@ -36,10 +36,6 @@ except: return (False) -def free_toss_port (): - for i in range(10000): - if not (is_toss_server ("localhost", 8110 + i)): return (8110 + i) - def open_toss_server (port): args = ["/var/www/WebClient/TossServer", "-s", "localhost", "-t", "600", "-p", str(port)] @@ -47,6 +43,27 @@ time.sleep (0.1) return (port) +def get_toss_port (): + free_ports = get_all_from_db ("ports", "locked='false'") + if len(free_ports) == 0: + fid = 0 + for f in db.execute ("select count(*) from ports"): + fid = int(f[0]) + port = 8110+fid+1 + db.execute ("insert into ports(port, locked) values (?, ?)", + (port, 'true')) + db.commit () + open_toss_server (port) + return (port) + (port, _) = free_ports[0] + db.execute ("update ports set locked='true' where port=" + str(port)) + db.commit () + return (port) + +def release_toss_port (port): + db.execute ("update ports set locked='false' where port=" + str(port)) + db.commit () + def cp (f1, f2): subprocess.call(["cp", f1, f2]) @@ -54,17 +71,17 @@ or_s = "(player1='" + player_id + "' or player2='" + player_id + "')" plays = get_all_from_db ("cur_states", "game='" + game + "' and " + or_s) def play_name (p): - (g, p1, p2, pid, move, toss, svg) = p + (pid, g, p1, p2, move, toss, svg) = p return ("/plays/" + str(g) + "_" + str(p1) + "_" + str(p2) + "_" + str(pid) + "_" + str(move)) return (str([play_name (p) for p in plays])) def db_cur_insert (game, p1, p2, pid, move, toss, svg_str): - db.execute ("insert into cur_states(game, player1, player2, playid, move, toss, svg) values (?, ?, ?, ?, ?, ?, ?)", (game, p1, p2, pid, move, toss, svg_str)) + db.execute ("insert into cur_states(playid, game, player1, player2, move, toss, svg) values (?, ?, ?, ?, ?, ?, ?)", (pid, game, p1, p2, move, toss, svg_str)) db.commit () def db_old_insert (game, p1, p2, pid, move, toss, svg_str): - db.execute ("insert into old_states(game, player1, player2, playid, move, toss, svg) values (?, ?, ?, ?, ?, ?, ?)", (game, p1, p2, pid, move, toss, svg_str)) + db.execute ("insert into old_states(playid, game, player1, player2, move, toss, svg) values (?, ?, ?, ?, ?, ?, ?)", (pid, game, p1, p2, move, toss, svg_str)) db.commit () def new_play (game, p1, p2, pid, move, svg_str): @@ -146,8 +163,7 @@ msg = req.read () #tmp_log(msg) if msg.find('#') == -1: - port = open_toss_server (free_toss_port ()) - req.write(str(port)) + req.write(str(17)) # not used any more return apache.OK cmd, sep, data = msg.partition('#') if cmd == "USERNAME": @@ -181,7 +197,9 @@ if cmd == "FREEID": req.write(str(get_free_id ())) return apache.OK - c = SystemClient ("localhost", int(cmd)) + port = get_toss_port () + c = SystemClient ("localhost", port) res = eval (data) + release_toss_port (port) req.write(str(res)) return apache.OK Modified: trunk/Toss/WebClient/make_db.py =================================================================== --- trunk/Toss/WebClient/make_db.py 2010-12-12 23:31:07 UTC (rev 1249) +++ trunk/Toss/WebClient/make_db.py 2010-12-14 00:28:32 UTC (rev 1250) @@ -7,9 +7,10 @@ conn = sqlite3.connect("tossdb.sqlite") conn.execute("create table passwd(id string primary key, passwd string)") -conn.execute("create table cur_states(game string, player1 string, player2 string, playid int, move int, toss string, svg string)") -conn.execute("create table old_states(game string, player1 string, player2 string, playid int, move int, toss string, svg string)") +conn.execute("create table cur_states(playid int primary key, game string, player1 string, player2 string, move int, toss string, svg string)") +conn.execute("create table old_states(playid int, game string, player1 string, player2 string, move int, toss string, svg string)") conn.execute("create table games(game string primary key, toss string)") +conn.execute("create table ports(port int primary key, locked bool)") conn.commit () def add_game (g): This was sent by the SourceForge.net collaborative development platform, the world's largest Open Source development site. |
From: <luk...@us...> - 2010-12-15 00:02:37
|
Revision: 1251 http://toss.svn.sourceforge.net/toss/?rev=1251&view=rev Author: lukaszkaiser Date: 2010-12-15 00:02:30 +0000 (Wed, 15 Dec 2010) Log Message: ----------- Grouping toss requests and separating commands. WebClient works in multi-client mode except for small problems mentioned in comments in TossHandler. Modified Paths: -------------- trunk/Toss/WebClient/TossConnect.js trunk/Toss/WebClient/TossHandler.py trunk/Toss/WebClient/TossMain.js trunk/Toss/WebClient/TossStyle.css Modified: trunk/Toss/WebClient/TossConnect.js =================================================================== --- trunk/Toss/WebClient/TossConnect.js 2010-12-14 00:28:32 UTC (rev 1250) +++ trunk/Toss/WebClient/TossConnect.js 2010-12-15 00:02:30 UTC (rev 1251) @@ -12,7 +12,6 @@ var SVG_HEIGHT = 500; var SVG_MARGINX = 50; var SVG_MARGINY = 50; -var TOSS_PORT = 0; var VIEW_WIDTH = "19em"; var VIEW_HEIGHT = "19em"; var VIEW_MIRROR = 0; @@ -26,6 +25,12 @@ var CACHED_MOVES = "" +var DIM_STR = "" +var ELEM_STR = "" +var RELS_STR = "" +var MOVES_STR = "" + + // Helper function: sign of a number. function sign (x) { if (x > 0.01) { return (1); } @@ -38,6 +43,17 @@ CACHED_MOVES = ""; } +function set_info (info) { + var res_arr = []; + res_arr = info.split("$"); + if (res_arr.length != 4) { return (false); } + DIM_STR = res_arr[0]; + ELEM_STR = res_arr[1]; + RELS_STR = res_arr[2]; + MOVES_STR = res_arr[3]; + return (true); +} + // Send [msg] to server and return response text. function sync_server_msg (msg) { var xml_request = new XMLHttpRequest (); @@ -60,9 +76,9 @@ return (d.replace(" ", "$")); } -// Send [msg] to server attaching prefix '[port]#' and return response text. -function srv (port, msg) { - return (sync_server_msg (port.toString() + '#' + msg)); +// Send [msg] to server attaching prefix '[cmd]#' and return response text. +function srv (cmd, msg) { + return (sync_server_msg (cmd + '#' + msg)); } // Strip [c1] and [c2] from beginning and end of [str]. @@ -91,15 +107,11 @@ return (res_arr); } -// Get elements of Toss Model active on [port]. -function get_elems (port) { - return (convert_python_list (',', srv(port, "c.model.get_elems()"))); -} -// Get moves applicable to [elem] in Toss Model active on [port]. -function get_moves (port, elem) { +// Get moves applicable to [elem] in a game. +function get_moves (elem) { if (CACHED_MOVES == "") { - CACHED_MOVES = srv (port, 'c.cur_moves()'); + CACHED_MOVES = MOVES_STR } var all_moves = convert_python_list (';', CACHED_MOVES); var elem_moves = [] @@ -111,9 +123,9 @@ return (elem_moves) } -// Get relation tuples of Toss Model active on [port]. -function get_rels (port) { - var r = convert_python_list(';', srv (port, "c.model.get_rels_simple ()")); +// Get relation tuples. +function get_rels () { + var r = convert_python_list(';', RELS_STR); var rels = []; for (var i = 0; i < r.length; i++) { var rel_name = strip(' ', '\'', r[i].substring(1,r[i].indexOf(','))); @@ -136,17 +148,9 @@ return ([x + SVG_MARGINX, y + SVG_MARGINY]) } -// Get position of element [elem] from Toss Model active on [port]. -function get_elem_pos (port, elem) { - res = srv(port, 'c.model.get_elem_pos("' + elem + '")'); - res_pair = strip('(', ')', res).split(','); - return (translate_pos ([parseFloat(strip(' ', ' ', res_pair[0])), - parseFloat(strip(' ', ' ', res_pair[1]))])) -} - -// Get elements and positions of Toss Model active on [port]. -function get_elems_with_pos (port) { - var l = convert_python_list(',', srv(port, "c.model.get_elems_with_pos()")); +// Get elements and positions. +function get_elems_with_pos () { + var l = convert_python_list(',', ELEM_STR); ELEMS = []; ELEM_POS = {}; for (var i = 0; i < l.length; i++) { @@ -157,18 +161,11 @@ } -// Open Toss Server, set TOSS_PORT to the port on which it is opened. -function open_toss_server () { - if (TOSS_PORT > 0) { return; } - var port = sync_server_msg ("OPEN TOSS"); - TOSS_PORT = port; -} - -// Open [file_name] on Toss Server running on port [port] and get dimenstions. +// Open [file_name] on Toss Server and get info. function toss_open_game (game_name) { - open_toss_server (); - srv (TOSS_PORT, 'open_game(c, "' + game_name + '")'); - var dim_msg = srv (TOSS_PORT, "c.model.get_dim()"); + var info = srv ("OPENGAME", game_name); + set_info (info); + var dim_msg = DIM_STR; var dim = strip('(', ')', dim_msg).split(','); MODEL_MAXX = parseFloat(strip(' ', ' ', dim[0])); MODEL_MINX = parseFloat(strip(' ', ' ', dim[1])); @@ -178,11 +175,11 @@ MODEL_HEIGHT = Math.max (SVG_HEIGHT / 100, (MODEL_MAXY - MODEL_MINY)); } -// Open [file_name] on Toss Server running on port [port] and get dimenstions. +// Open [file_name] on Toss Server and get info. function toss_open_db (file_name_params) { - open_toss_server (); - srv (TOSS_PORT, 'open_db(c, ' + file_name_params + ')'); - var dim_msg = srv (TOSS_PORT, "c.model.get_dim()"); + var info = srv ("OPEN_DB", 'c, ' + file_name_params); + set_info (info); + var dim_msg = DIM_STR; var dim = strip('(', ')', dim_msg).split(','); MODEL_MAXX = parseFloat(strip(' ', ' ', dim[0])); MODEL_MINX = parseFloat(strip(' ', ' ', dim[1])); Modified: trunk/Toss/WebClient/TossHandler.py =================================================================== --- trunk/Toss/WebClient/TossHandler.py 2010-12-14 00:28:32 UTC (rev 1250) +++ trunk/Toss/WebClient/TossHandler.py 2010-12-15 00:02:30 UTC (rev 1251) @@ -46,10 +46,11 @@ def get_toss_port (): free_ports = get_all_from_db ("ports", "locked='false'") if len(free_ports) == 0: - fid = 0 + fid = 0 for f in db.execute ("select count(*) from ports"): fid = int(f[0]) port = 8110+fid+1 + # WARNING: two proc can get same fid! Avoid by sqlite write-atomicity! db.execute ("insert into ports(port, locked) values (?, ?)", (port, 'true')) db.commit () @@ -57,6 +58,7 @@ return (port) (port, _) = free_ports[0] db.execute ("update ports set locked='true' where port=" + str(port)) + # This could give same port to 2 proc (1st line). Avoid by sql-write! db.commit () return (port) @@ -94,27 +96,44 @@ return("game='" + g + "' and player1='" + p1 + "' and player2='" + p2 + "' and playid=" + pid + " and move=" + m) +def get_game_info (client): + dim_s = str(client.model.get_dim()) + model_s = str(client.model.get_elems_with_pos()) + rels_s = str(client.model.get_rels_simple()) + moves_s = str(client.cur_moves()) + return (dim_s + "$" + model_s + "$" + rels_s + "$" + moves_s) + def open_db (client, game, p1, p2, pid, move): select_s = game_select_s (game, p1, p2, pid, move) res = get_all_from_db ("cur_states", select_s) (_, _, _, _, _, toss, _) = res[0] client.open_from_str (toss) + return (get_game_info (client)) def open_game (client, game): res = get_all_from_db ("games", "game='" + game + "'") (_, toss) = res[0] client.open_from_str (toss) + return (get_game_info (client)) -def move_play (client, g, p1, p2, pid, m, svg_s): +def move_play (client, move_tup, g, p1, p2, pid, m): + open_db (client, g, p1, p2, pid, m) + (move1, move2, move3) = move_tup + client.make_move (move1, move2, move3) new_toss = client.get_state () select_s = game_select_s (g, p1, p2, pid, m) old_res = get_all_from_db ("cur_states", select_s) (_, _, _, _, _, old_toss, old_svg) = old_res[0] db.execute ("delete from cur_states where " + select_s) db_old_insert (g, p1, p2, pid, m, old_toss, old_svg) - db_cur_insert (g, p1, p2, pid, int(m) + 1, new_toss, svg_s) - return ("OK") + db_cur_insert (g, p1, p2, pid, int(m) + 1, new_toss, "") + return (get_game_info (client)) +def upd_svg (g, p1, p2, pid, m, svg_s): + select_s = game_select_s (g, p1, p2, pid, m) + db.execute ("update cur_states set svg='" + svg_s + "' where " + select_s) + db.commit () + def passwd_from_db (uid): res = get_all_from_db ("passwd", "id='" + uid + "'") if len(res) > 1: raise Exception ("db", "multiple passwords for " + uid) @@ -162,9 +181,6 @@ usr = confirm_username (req) msg = req.read () #tmp_log(msg) - if msg.find('#') == -1: - req.write(str(17)) # not used any more - return apache.OK cmd, sep, data = msg.partition('#') if cmd == "USERNAME": req.write(usr) @@ -190,16 +206,27 @@ Cookie.add_cookie(req, cookie) req.write ("user logged out: " + usr + ".") return apache.OK - if cmd == "LISTPLAYS": - res = eval(data) + if cmd == "LIST_PLAYS": + res = eval (cmd.lower() + "(" + data + ")") req.write(str(res)) return apache.OK if cmd == "FREEID": req.write(str(get_free_id ())) return apache.OK - port = get_toss_port () - c = SystemClient ("localhost", port) - res = eval (data) - release_toss_port (port) - req.write(str(res)) + if cmd == "OPENGAME": + port = get_toss_port () + c = SystemClient ("localhost", port) + res = open_game(c, data) + release_toss_port (port) + req.write(str(res)) + return apache.OK + if ((cmd == "OPEN_DB") or (cmd == "UPD_SVG") or + (cmd == "NEW_PLAY") or (cmd == "MOVE_PLAY")): + port = get_toss_port () + c = SystemClient ("localhost", port) + res = eval (cmd.lower() + "(" + data + ")") + release_toss_port (port) + req.write(str(res)) + return apache.OK + req.write("MOD_PYTHON ERROR ; Traceback: Unknown Toss Command! \n " + cmd) return apache.OK Modified: trunk/Toss/WebClient/TossMain.js =================================================================== --- trunk/Toss/WebClient/TossMain.js 2010-12-14 00:28:32 UTC (rev 1250) +++ trunk/Toss/WebClient/TossMain.js 2010-12-15 00:02:30 UTC (rev 1251) @@ -15,12 +15,11 @@ // Get model information from server. function get_model_info () { - get_elems_with_pos (TOSS_PORT); + get_elems_with_pos (); for (var i = 0; i < ELEMS.length; i++) { ELEM_COUNTERS[ELEMS[i]] = 0; - //ELEM_POS[ELEMS[i]] = get_elem_pos (TOSS_PORT, ELEMS[i]); } - RELS = get_rels (TOSS_PORT); + RELS = get_rels (); var sqrt = Math.round (Math.sqrt (ELEMS.length)); if (sqrt * sqrt == ELEMS.length) { // perhaps a grid SUGGESTED_ELEM_SIZEX = SVG_WIDTH / (2.0 * (sqrt-1)); @@ -100,7 +99,7 @@ // Handler for clicks on elements. function handle_elem_click (elem) { - var moves = get_moves (TOSS_PORT, elem); + var moves = get_moves (elem); if (moves.length > ELEM_COUNTERS[elem]) { show_move (moves[ELEM_COUNTERS[elem]]); ELEM_COUNTERS[elem] += 1; @@ -110,7 +109,7 @@ } } -function play_file_cmd (i) { +function play_py_id (i) { return ("'" + GAME_NAME + "', '" + PLAYS[i][0] + "', '" + PLAYS[i][1] + "', '" + PLAYS[i][2] + "', '" + PLAYS[i][3] + "'") } @@ -129,7 +128,7 @@ } function list_plays (game) { - var lst = srv ("LISTPLAYS", "list_plays ('" + game + "', '" + UNAME + "')"); + var lst = srv ("LIST_PLAYS", "'" + game + "', '" + UNAME + "'"); PLAYS = convert_python_list (',', lst); var plist = document.getElementById("plays-list-" + game); while (plist.childNodes.length > 0) { plist.removeChild(plist.firstChild); } @@ -172,7 +171,7 @@ VIEW_MIRROR = (PLAYS[CUR_PLAY_I][0] == UNAME) ? 0 : 1; document.getElementById("cur-player").innerHTML = PLAYS[CUR_PLAY_I][PLAYS[CUR_PLAY_I][3] % 2]; - toss_open_db (play_file_cmd(pi)); + toss_open_db (play_py_id(pi)); full_redraw (); } @@ -185,7 +184,8 @@ alert ("It is your Opponent's turn"); return; } - srv (TOSS_PORT, 'c.make_move' + CUR_MOVE); + var info = srv("MOVE_PLAY", 'c, '+ CUR_MOVE +', '+ play_py_id (CUR_PLAY_I)); + set_info (info); clear_move_cache (); CUR_MOVE = ""; CUR_ELEMS = []; @@ -194,9 +194,8 @@ PLAYS[CUR_PLAY_I][(m + 1) % 2]; document.getElementById('cur-move').innerHTML = "none"; full_redraw (); - var fn = play_file_cmd (CUR_PLAY_I); PLAYS[CUR_PLAY_I][3] = parseInt(PLAYS[CUR_PLAY_I][3]) + 1; - srv (TOSS_PORT, "move_play(c, " + fn + ", " + svg_string () + ")"); + srv ("UPD_SVG", play_py_id(CUR_PLAY_I) + ", " + svg_string()); var old_li = document.getElementById ("plays-list-" + GAME_NAME + "-elem-" + CUR_PLAY_I); var li = new_play_item (GAME_NAME, CUR_PLAY_I); old_li.parentNode.replaceChild (li, old_li); @@ -315,8 +314,8 @@ PLAYS.push(p); toss_open_game (GAME_NAME); full_redraw (); - var fn = play_file_cmd (CUR_PLAY_I); - srv (TOSS_PORT, "new_play(" + fn + ", " + svg_string () + ")"); + var fn = play_py_id (CUR_PLAY_I); + srv ("NEW_PLAY", fn + ", " + svg_string ()); li = new_play_item (GAME_NAME, CUR_PLAY_I); document.getElementById("plays-list-" + GAME_NAME).appendChild(li); } Modified: trunk/Toss/WebClient/TossStyle.css =================================================================== --- trunk/Toss/WebClient/TossStyle.css 2010-12-14 00:28:32 UTC (rev 1250) +++ trunk/Toss/WebClient/TossStyle.css 2010-12-15 00:02:30 UTC (rev 1251) @@ -367,10 +367,10 @@ .chessW .chess-path-A { opacity:1; - fill:#ffffff; + fill:#ffe4aa; fill-opacity:1; fill-rule:nonzero; - stroke:#000000; + stroke:#260314; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:miter; @@ -382,10 +382,10 @@ .chessB .chess-path-A { opacity:1; - fill:#000000; + fill:#400827; fill-opacity:1; fill-rule:nonzero; - stroke:#000000; + stroke:#260314; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:miter; @@ -397,10 +397,10 @@ .chessW .chess-path-B { opacity:1; - fill:#ffffff; + fill:#ffe4aa; fill-opacity:1; fill-rule:evenodd; - stroke:#000000; + stroke:#260314; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; @@ -411,10 +411,10 @@ .chessB .chess-path-B { opacity:1; - fill:#000000; + fill:#400827; fill-opacity:1; fill-rule:evenodd; - stroke:#000000; + stroke:#260314; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; @@ -425,9 +425,9 @@ .chessW .chess-path-C { opacity:1; - fill:#000000; + fill:#400827; fill-opacity:1; - stroke:#000000; + stroke:#260314; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; @@ -438,9 +438,9 @@ .chessB .chess-path-C { opacity:1; - fill:#ffffff; + fill:#ffe4aa; fill-opacity:1; - stroke:#ffffff; + stroke:#ffe4aa; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; @@ -450,10 +450,10 @@ } .chessW .chess-path-D { - fill: #ffffff; + fill: #ffe4aa; fill-opacity: 0.75; fill-rule:evenodd; - stroke: #000000; + stroke: #260314; stroke-width:1; stroke-linecap:round; stroke-linejoin:mitter; @@ -463,10 +463,10 @@ } .chessB .chess-path-D { - fill: #000000; + fill: #400827; fill-opacity: 0.75; fill-rule:evenodd; - stroke: #000000; + stroke: #ffe4aa; stroke-width:1; stroke-linecap:round; stroke-linejoin:mitter; This was sent by the SourceForge.net collaborative development platform, the world's largest Open Source development site. |
From: <luk...@us...> - 2010-12-16 22:53:10
|
Revision: 1252 http://toss.svn.sourceforge.net/toss/?rev=1252&view=rev Author: lukaszkaiser Date: 2010-12-16 22:53:03 +0000 (Thu, 16 Dec 2010) Log Message: ----------- WebClient cleanup, next step. Modified Paths: -------------- trunk/Toss/WebClient/README trunk/Toss/WebClient/TossConnect.js trunk/Toss/WebClient/TossDefaultStyle.js trunk/Toss/WebClient/TossHandler.py trunk/Toss/WebClient/TossMain.js trunk/Toss/WebClient/TossStyle.css trunk/Toss/WebClient/Wrapper.py trunk/Toss/WebClient/make_db.py trunk/Toss/WebClient/register.html Modified: trunk/Toss/WebClient/README =================================================================== --- trunk/Toss/WebClient/README 2010-12-15 00:02:30 UTC (rev 1251) +++ trunk/Toss/WebClient/README 2010-12-16 22:53:03 UTC (rev 1252) @@ -19,7 +19,8 @@ TODO: - - redo TossServer calls and caching + - better register html + - back button handler (reload), enter for login - enable google (or other) analytics - refresh (async?) plays in which the other player moves - move interface: first click all, second click toggle, if one - confirm msg Modified: trunk/Toss/WebClient/TossConnect.js =================================================================== --- trunk/Toss/WebClient/TossConnect.js 2010-12-15 00:02:30 UTC (rev 1251) +++ trunk/Toss/WebClient/TossConnect.js 2010-12-16 22:53:03 UTC (rev 1252) @@ -51,6 +51,14 @@ ELEM_STR = res_arr[1]; RELS_STR = res_arr[2]; MOVES_STR = res_arr[3]; + var dim = strip('(', ')', DIM_STR).split(','); + MODEL_MAXX = parseFloat(strip(' ', ' ', dim[0])); + MODEL_MINX = parseFloat(strip(' ', ' ', dim[1])); + MODEL_MAXY = parseFloat(strip(' ', ' ', dim[2])); + MODEL_MINY = parseFloat(strip(' ', ' ', dim[3])); + MODEL_WIDTH = Math.max (SVG_WIDTH / 100, (MODEL_MAXX - MODEL_MINX)); + MODEL_HEIGHT = Math.max (SVG_HEIGHT / 100, (MODEL_MAXY - MODEL_MINY)); + return (true); } @@ -162,31 +170,9 @@ // Open [file_name] on Toss Server and get info. -function toss_open_game (game_name) { - var info = srv ("OPENGAME", game_name); - set_info (info); - var dim_msg = DIM_STR; - var dim = strip('(', ')', dim_msg).split(','); - MODEL_MAXX = parseFloat(strip(' ', ' ', dim[0])); - MODEL_MINX = parseFloat(strip(' ', ' ', dim[1])); - MODEL_MAXY = parseFloat(strip(' ', ' ', dim[2])); - MODEL_MINY = parseFloat(strip(' ', ' ', dim[3])); - MODEL_WIDTH = Math.max (SVG_WIDTH / 100, (MODEL_MAXX - MODEL_MINX)); - MODEL_HEIGHT = Math.max (SVG_HEIGHT / 100, (MODEL_MAXY - MODEL_MINY)); -} - -// Open [file_name] on Toss Server and get info. function toss_open_db (file_name_params) { - var info = srv ("OPEN_DB", 'c, ' + file_name_params); + var info = srv ("OPEN_DB", file_name_params); set_info (info); - var dim_msg = DIM_STR; - var dim = strip('(', ')', dim_msg).split(','); - MODEL_MAXX = parseFloat(strip(' ', ' ', dim[0])); - MODEL_MINX = parseFloat(strip(' ', ' ', dim[1])); - MODEL_MAXY = parseFloat(strip(' ', ' ', dim[2])); - MODEL_MINY = parseFloat(strip(' ', ' ', dim[3])); - MODEL_WIDTH = Math.max (SVG_WIDTH / 100, (MODEL_MAXX - MODEL_MINX)); - MODEL_HEIGHT = Math.max (SVG_HEIGHT / 100, (MODEL_MAXY - MODEL_MINY)); } Modified: trunk/Toss/WebClient/TossDefaultStyle.js =================================================================== --- trunk/Toss/WebClient/TossDefaultStyle.js 2010-12-15 00:02:30 UTC (rev 1251) +++ trunk/Toss/WebClient/TossDefaultStyle.js 2010-12-16 22:53:03 UTC (rev 1252) @@ -238,9 +238,10 @@ document.getElementById("svg").appendChild(f); } else { add_svg ("circle", - [["cx", pos[0]], ["cy", pos[1]], ["r", SUGGESTED_ELEM_SIZEX - 10], + [["cx", pos[0]], ["cy", pos[1]], ["r", SUGGESTED_ELEM_SIZEX - 12], ["id", "pred_" + args[0] + "_" + rel_name], ["class", "model-pred-" + rel_name], + ["stroke-width", (SUGGESTED_ELEM_SIZEX / 10) + 2], ["onclick", ("handle_elem_click('" + args[0] + "')")]]); } } Modified: trunk/Toss/WebClient/TossHandler.py =================================================================== --- trunk/Toss/WebClient/TossHandler.py 2010-12-15 00:02:30 UTC (rev 1251) +++ trunk/Toss/WebClient/TossHandler.py 2010-12-16 22:53:03 UTC (rev 1252) @@ -9,42 +9,26 @@ TUID = "toss_id_05174_" -db = None - def tmp_log (str): file = open ("/tmp/th.log", 'w') file.write (str) file.close() -def get_all_from_db (tbl, select_s): +def get_all_from_db (db, tbl, select_s): res = [] for r in db.execute("select * from " + tbl + " where " + select_s): res.append(r) return (res) -def is_toss_server (host, port): - """Simple server check - tries to get time from Toss server.""" - try: - sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) - sock.connect ((host, port)) - sock.send ("GET dynamics\n") - data = sock.recv(2048) - sock.close () - time = [s.strip() for s in data.split('/')] - (ts, t) = (float(time[0]), float(time[1])) - return (True) - except: - return (False) - def open_toss_server (port): args = ["/var/www/WebClient/TossServer", - "-s", "localhost", "-t", "600", "-p", str(port)] + "-s", "localhost", "-p", str(port)] server_proc = subprocess.Popen(args) time.sleep (0.1) return (port) -def get_toss_port (): - free_ports = get_all_from_db ("ports", "locked='false'") +def get_toss_port (db): + free_ports = get_all_from_db (db, "ports", "locked='false'") if len(free_ports) == 0: fid = 0 for f in db.execute ("select count(*) from ports"): @@ -62,40 +46,32 @@ db.commit () return (port) -def release_toss_port (port): +def release_toss_port (db, port): db.execute ("update ports set locked='false' where port=" + str(port)) db.commit () def cp (f1, f2): subprocess.call(["cp", f1, f2]) -def list_plays (game, player_id): +def list_plays (db, game, player_id): or_s = "(player1='" + player_id + "' or player2='" + player_id + "')" - plays = get_all_from_db ("cur_states", "game='" + game + "' and " + or_s) + plays = get_all_from_db (db, "cur_states", "game='"+ game + "' and " + or_s) def play_name (p): - (pid, g, p1, p2, move, toss, svg) = p + (pid, g, p1, p2, move, _, _, _) = p return ("/plays/" + str(g) + "_" + str(p1) + "_" + str(p2) + "_" + str(pid) + "_" + str(move)) return (str([play_name (p) for p in plays])) -def db_cur_insert (game, p1, p2, pid, move, toss, svg_str): - db.execute ("insert into cur_states(playid, game, player1, player2, move, toss, svg) values (?, ?, ?, ?, ?, ?, ?)", (pid, game, p1, p2, move, toss, svg_str)) +def db_cur_insert (db, game, p1, p2, pid, move, toss, info, svg_str): + db.execute ("insert into cur_states(playid, game, player1, player2, move, toss, info, svg) values (?, ?, ?, ?, ?, ?, ?, ?)", + (pid, game, p1, p2, move, toss, info, svg_str)) db.commit () -def db_old_insert (game, p1, p2, pid, move, toss, svg_str): - db.execute ("insert into old_states(playid, game, player1, player2, move, toss, svg) values (?, ?, ?, ?, ?, ?, ?)", (pid, game, p1, p2, move, toss, svg_str)) +def db_old_insert (db, game, p1, p2, pid, move, toss, info, svg_str): + db.execute ("insert into old_states(playid, game, player1, player2, move, toss, info, svg) values (?, ?, ?, ?, ?, ?, ?, ?)", + (pid, game, p1, p2, move, toss, info, svg_str)) db.commit () -def new_play (game, p1, p2, pid, move, svg_str): - res = get_all_from_db ("games", "game='" + game + "'") - (_, toss) = res[0] - db_cur_insert (game, p1, p2, pid, move, toss, svg_str) - return ("ok") - -def game_select_s (g, p1, p2, pid, m): - return("game='" + g + "' and player1='" + p1 + "' and player2='" + p2 + - "' and playid=" + pid + " and move=" + m) - def get_game_info (client): dim_s = str(client.model.get_dim()) model_s = str(client.model.get_elems_with_pos()) @@ -103,56 +79,63 @@ moves_s = str(client.cur_moves()) return (dim_s + "$" + model_s + "$" + rels_s + "$" + moves_s) -def open_db (client, game, p1, p2, pid, move): - select_s = game_select_s (game, p1, p2, pid, move) - res = get_all_from_db ("cur_states", select_s) - (_, _, _, _, _, toss, _) = res[0] - client.open_from_str (toss) - return (get_game_info (client)) - -def open_game (client, game): - res = get_all_from_db ("games", "game='" + game + "'") +def new_play (db, client, game, p1, p2, pid, move): + res = get_all_from_db (db, "games", "game='" + game + "'") (_, toss) = res[0] client.open_from_str (toss) - return (get_game_info (client)) + info = get_game_info (client) + db_cur_insert (db, game, p1, p2, pid, move, toss, info, "") + return (info) -def move_play (client, move_tup, g, p1, p2, pid, m): - open_db (client, g, p1, p2, pid, m) +def game_select_s (g, p1, p2, pid, m): + return("game='" + g + "' and player1='" + p1 + "' and player2='" + p2 + + "' and playid=" + pid + " and move=" + m) + +def open_db (db, game, p1, p2, pid, move): + select_s = game_select_s (game, p1, p2, pid, move) + res = get_all_from_db (db, "cur_states", select_s) + (_, _, _, _, _, _, info, _) = res[0] + return (info) + + +def move_play (db, client, move_tup, g, p1, p2, pid, m): + select_s = game_select_s (g, p1, p2, pid, m) + old_res = get_all_from_db (db, "cur_states", select_s) + (_, _, _, _, _, old_toss, old_info, old_svg) = old_res[0] + client.open_from_str (old_toss) (move1, move2, move3) = move_tup client.make_move (move1, move2, move3) new_toss = client.get_state () - select_s = game_select_s (g, p1, p2, pid, m) - old_res = get_all_from_db ("cur_states", select_s) - (_, _, _, _, _, old_toss, old_svg) = old_res[0] + new_info = get_game_info (client) db.execute ("delete from cur_states where " + select_s) - db_old_insert (g, p1, p2, pid, m, old_toss, old_svg) - db_cur_insert (g, p1, p2, pid, int(m) + 1, new_toss, "") - return (get_game_info (client)) + db_old_insert (db, g, p1, p2, pid, m, old_toss, old_info, old_svg) + db_cur_insert (db, g, p1, p2, pid, int(m) + 1, new_toss, new_info, "") + return (new_info) -def upd_svg (g, p1, p2, pid, m, svg_s): +def upd_svg (db, g, p1, p2, pid, m, svg_s): select_s = game_select_s (g, p1, p2, pid, m) db.execute ("update cur_states set svg='" + svg_s + "' where " + select_s) db.commit () -def passwd_from_db (uid): - res = get_all_from_db ("passwd", "id='" + uid + "'") +def passwd_from_db (db, uid): + res = get_all_from_db (db, "passwd", "id='" + uid + "'") if len(res) > 1: raise Exception ("db", "multiple passwords for " + uid) if len(res) == 0: return (None) (uid, passwd) = res[0] return (str(passwd)) -def confirm_username (req): +def confirm_username (db, req): cookies = Cookie.get_cookies(req) if not (cookies.has_key(TUID + 'username')): return "" if not (cookies.has_key(TUID + 'passphrase')): return "" uid = cookies[TUID + 'username'].value pwd1 = cookies[TUID + 'passphrase'].value - pwd2 = passwd_from_db (uid) + pwd2 = passwd_from_db (db, uid) if (pwd1 != pwd2): return "" return (uid) -def login_user (req, uid, pwd): - db_pwd = passwd_from_db (uid) +def login_user (db, req, uid, pwd): + db_pwd = passwd_from_db (db, uid) if not db_pwd: return ("no such user registered") if (pwd != db_pwd): return ("wrong password") t = time.time() + 3600; @@ -162,23 +145,22 @@ Cookie.add_cookie(req, cookie2) return ("OK") -def register_user (uid, pwd): - if passwd_from_db (uid): return (False) +def register_user (db, uid, pwd): + if passwd_from_db (db, uid): return (False) db.execute ("insert into passwd(id, passwd) values (?, ?)", (uid, pwd)) db.commit () return (True) -def get_free_id (): +def get_free_id (db): fid = 0 for f in db.execute ("select count(*) from cur_states"): fid = int(f[0]) return (fid + 1) def handler(req): - global db req.content_type = "text/plain" db = sqlite3.connect(DB_FILE) - usr = confirm_username (req) + usr = confirm_username (db, req) msg = req.read () #tmp_log(msg) cmd, sep, data = msg.partition('#') @@ -187,14 +169,14 @@ return apache.OK if cmd == "REGISTER": uname, sep, pwd = data.partition(' ') - if register_user (uname, pwd): + if register_user (db, uname, pwd): req.write("Registration successful for " + uname) return apache.OK req.write("Registration failed, username " + uname + " already in use.") return apache.OK if cmd == "LOGIN": uname, sep, pwd = data.partition(' ') - res = login_user (req, uname, pwd) + res = login_user (db, req, uname, pwd) if res == "OK": req.write("OK") return apache.OK @@ -206,26 +188,18 @@ Cookie.add_cookie(req, cookie) req.write ("user logged out: " + usr + ".") return apache.OK - if cmd == "LIST_PLAYS": - res = eval (cmd.lower() + "(" + data + ")") - req.write(str(res)) - return apache.OK if cmd == "FREEID": - req.write(str(get_free_id ())) + req.write(str(get_free_id (db))) return apache.OK - if cmd == "OPENGAME": - port = get_toss_port () - c = SystemClient ("localhost", port) - res = open_game(c, data) - release_toss_port (port) + if (cmd == "LIST_PLAYS") or (cmd == "OPEN_DB") or (cmd == "UPD_SVG"): + res = eval (cmd.lower() + "(db, " + data + ")") req.write(str(res)) return apache.OK - if ((cmd == "OPEN_DB") or (cmd == "UPD_SVG") or - (cmd == "NEW_PLAY") or (cmd == "MOVE_PLAY")): - port = get_toss_port () + if (cmd == "NEW_PLAY") or (cmd == "MOVE_PLAY"): + port = get_toss_port (db) c = SystemClient ("localhost", port) - res = eval (cmd.lower() + "(" + data + ")") - release_toss_port (port) + res = eval (cmd.lower() + "(db, " + data + ")") + release_toss_port (db, port) req.write(str(res)) return apache.OK req.write("MOD_PYTHON ERROR ; Traceback: Unknown Toss Command! \n " + cmd) Modified: trunk/Toss/WebClient/TossMain.js =================================================================== --- trunk/Toss/WebClient/TossMain.js 2010-12-15 00:02:30 UTC (rev 1251) +++ trunk/Toss/WebClient/TossMain.js 2010-12-16 22:53:03 UTC (rev 1252) @@ -156,7 +156,6 @@ create_svg_box ("19em", "19em", 40, 40, "board"); } document.getElementById("opening").style.display = "block"; - toss_open_game (game); document.getElementById("opening").style.display = "none"; document.getElementById("game-disp").style.display = "block"; } @@ -312,10 +311,11 @@ document.getElementById("plays").style.left = "30em"; var p = [UNAME, opp_uid, FREE_PLAY_NO, 0]; PLAYS.push(p); - toss_open_game (GAME_NAME); + var fn = play_py_id (CUR_PLAY_I); + info = srv ("NEW_PLAY", "c, " + fn); + set_info(info); full_redraw (); - var fn = play_py_id (CUR_PLAY_I); - srv ("NEW_PLAY", fn + ", " + svg_string ()); + srv ("UPD_SVG", play_py_id(CUR_PLAY_I) + ", " + svg_string()); li = new_play_item (GAME_NAME, CUR_PLAY_I); document.getElementById("plays-list-" + GAME_NAME).appendChild(li); } @@ -346,7 +346,8 @@ function login () { un = document.getElementById('username').value; pwd = document.getElementById('password').value; - resp = sync_server_msg ("LOGIN#" + un + " " + crypt(pwd)); + ts = "toss##in$$some167S4lT_-"; + resp = sync_server_msg ("LOGIN#" + un + " " + crypt(ts + pwd)); if (resp == "OK") { setup_user (un) } else { Modified: trunk/Toss/WebClient/TossStyle.css =================================================================== --- trunk/Toss/WebClient/TossStyle.css 2010-12-15 00:02:30 UTC (rev 1251) +++ trunk/Toss/WebClient/TossStyle.css 2010-12-16 22:53:03 UTC (rev 1252) @@ -332,7 +332,6 @@ .model-pred-Q { fill: #b5bf8f; stroke: #260314; - stroke-width: 5px; } .model-pred-C { Modified: trunk/Toss/WebClient/Wrapper.py =================================================================== --- trunk/Toss/WebClient/Wrapper.py 2010-12-15 00:02:30 UTC (rev 1251) +++ trunk/Toss/WebClient/Wrapper.py 2010-12-16 22:53:03 UTC (rev 1252) @@ -14,8 +14,7 @@ self.p = pos def __str__ (self): - return ("Nbr " + (str (self.i)) + " pos " + (str (self.i)) + ": " + - (str (self.get_rels ()))) + return ("Nbr " + (str (self.i)) + " pos " + (str (self.i)) + ";") def id (self): return ("SOME MODEL", "SFX") @@ -27,43 +26,15 @@ return (" RULE " + (str (self.i)) + " LEFT ") return (" RULE " + (str (self.i)) + " RIGHT ") - def add_elem (self, el_x = 0.0, el_y = 0.0, el_vx = 0.0, el_vy = 0.0): - self.s.changes += 1 - el = self.s.msg ("ADD ELEM" + (self._pos ())) - self.set_elem_val (el, "x", el_x) - self.set_elem_val (el, "y", el_y) - self.set_elem_val (el, "vx", el_vx) - self.set_elem_val (el, "vy", el_vy) - return (el) - def get_elem_val (self, el_id, val): v = self.s.msg ("GET FUN" + (self._pos ()) + val + " " + (str (el_id))) return (float (v)) - def set_elem_val (self, el, val, x): - self.s.changes += 1 - m = self.s.msg ("SET FUN" + (self._pos()) + val + - " " + (str (el)) + " " + (repr (float (x)))) - return (m) - def get_elem_pos (self, el_id): x = self.get_elem_val (el_id, "x") y = self.get_elem_val (el_id, "y") return (x, y) - def set_elem_pos (self, el_id, x, y): - self.set_elem_val (el_id, "x", x) - self.set_elem_val (el_id, "y", y) - - def get_elem_velocity (self, el_id): - vx = self.get_elem_val (el_id, "vx") - vy = self.get_elem_val (el_id, "vy") - return (vx, vy) - - def set_elem_velocity (self, el_id, vx, vy): - self.set_elem_val (el_id, "vx", vx) - self.set_elem_val (el_id, "vy", vy) - def get_elems (self): m = self.s.msg ("GET ALLOF ELEM" + (self._pos ())) if len(m) < 1: @@ -84,42 +55,15 @@ sumx, sumy, l = sum(posx), sum(posy), len(pos) return (maxx, minx, maxy, miny, sumx / l, sumy / l) - def del_elem (self, el_id): - self.s.changes += 1 - m = self.s.msg ("DEL ELEM" + (self._pos ()) + (str (el_id))) - return (m) - def add_rel (self, rel, args): - rel_s = rel + "(" + ", ".join(str(v) for v in args) + ")" - self.s.changes += 1 - self.s.set_arity (rel, len(args)) - m = self.s.msg ("ADD REL" + (self._pos ()) + rel_s) - return (rel_s) + def get_rel_names_arities (self): + mrel = self.s.msg ("GET SIGNATURE REL" + (self._pos ())) + if len(mrel) < 1: return ([]) + pair_strs = [s.strip() for s in mrel.split (',')] + rels_ar_lst = [p.split(':') for p in pair_strs] + rels = [(rl[0].strip(), int (rl[1].strip())) for rl in rels_ar_lst] + return ([r for r in set(rels)]) - def get_rel_name (self, rel_id): - # Note that now rel_id is a string "Rel(args)" - return (rel_id[0:rel_id.find('(')]) - - def del_rel (self, rel_id): - self.s.changes += 1 - m = self.s.msg ("DEL REL" + (self._pos ()) + rel_id) - return (m) - - def get_rel_ids (self): - return ([i for (_, _, i) in self.get_rels ()]) - - def is_adjacent (self, el_id, rel_id): - # rel_id is Rel(Arg1,...,ArgN), just check if el_id = ArgK - args = [a.strip() for a in rel_id[rel_id.find('(')+1:-1].split(',')] - return (el_id in args) - - def is_in_rel (self, el_id, rel_name): - # it would be more efficient to add a request for it! - res = False - for args in self.get_rel (rel_name): - if el_id in args: res = True - return (res) - def get_rel (self, rel_name): m = self.s.msg ("GET ALLOF REL" + (self._pos ()) + rel_name) cur = m.find('{') @@ -128,18 +72,6 @@ tps = [ts.strip('{}() ') for ts in m[max(cur,par):].split(";")] return ([[t.strip() for t in ts.split(",")] for ts in tps]) - def get_rels (self, nodes = []): - """Return list of (rel, args, rel_id) for all rel(args) tuples.""" - sig = self.get_rel_names_arities () - if nodes == []: nodes = self.get_elems () - tuples = [] - def rel_str (rel, args): - return (rel + "(" + ", ".join(str(v) for v in args) + ")") - for (r, _) in sig: - tuples = [(r, a, rel_str (r, a)) for a in self.get_rel (r)] + tuples - return ([(n, args, i) for (n, args, i) in tuples - if set(args) <= set(nodes)]) - def get_rels_simple (self): """Return list of (rel, args, rel_id) for all rel(args) tuples.""" sig = self.get_rel_names_arities () @@ -148,17 +80,6 @@ tuples = [(r, a) for a in self.get_rel (r)] + tuples return ("; ".join ([str(t) for t in tuples])) - def set_arity (self, rel, i): - return (self.s.set_arity (rel, i)) - - def get_rel_names_arities (self): - mrel = self.s.msg ("GET SIGNATURE REL" + (self._pos ())) - if len(mrel) < 1: return ([]) - pair_strs = [s.strip() for s in mrel.split (',')] - rels_ar_lst = [p.split(':') for p in pair_strs] - rels = [(rl[0].strip(), int (rl[1].strip())) for rl in rels_ar_lst] - return ([r for r in set(rels)]) - def get_elems_with_pos (self): m = self.s.msg ("GET ALLOF ELEM" + (self._pos ())) if len(m) < 1: return ([]) @@ -175,14 +96,9 @@ """ self.host = host self.port = port - self.changes = 0 # increment on each change of model or rules - - # Initialize the model and the rules. self.model = ModelClient (self, ";MODEL", 0) - self.rule_names = self.__names_of_rules () - self.rules = [(ModelClient (self, i, 0), ModelClient (self, i, 1)) - for i in self.rule_names] + def __str__ (self): return ("System") @@ -198,29 +114,10 @@ sock.close () return (res.strip ()) - def __no_of_rules (self): - """Get number of rewrite rules from server.""" - names_msg = self.msg ("GET RULE") - if len(names_msg.strip()) < 1: return(0) - names = [s.strip() for s in names_msg.split (';')] - return (int (len(names))); - - def __names_of_rules (self): - """Get names of rewrite rules from server.""" - names_msg = self.msg ("GET RULE") - if len(names_msg.strip()) < 1: return([]) - return ([s.strip() for s in names_msg.split (';')]) - - def no_of_locs (self): - """Get number of game locations from server.""" - m = self.msg ("GET LOC").split("/") - return (int (m[1].strip())) - def get_state (self): return (self.msg ("GET STATE")) def set_state (self, state): - self.changes += 1 m = self.msg ("SET STATE " + state) return (m) @@ -231,38 +128,9 @@ def set_cur_loc (self, i): """Set current game location.""" - self.changes += 1 m = self.msg ("SET LOC " + str(i)) return (m) - def add_new_loc (self): - """Create a new location.""" - i = self.get_cur_loc () - self.set_cur_loc (-1) - self.set_cur_loc (i) - - def get_loc_player (self, i): - """Get player for the i-th position.""" - m = self.msg ("GET LOC PLAYER " + (str (i))) - return (m) - - def set_loc_player (self, i, player): - """Set player for the i-th position.""" - self.changes += 1 - m = self.msg ("SET LOC PLAYER " + (str (i)) + " " + player) - return (m) - - def get_loc_payoff (self, i, player): - """Get [player]s payoff for the i-th position.""" - m = self.msg ("GET LOC PAYOFF " + (str (i)) + " " + player) - return (m) - - def set_loc_payoff (self, i, player, pay): - """Set [player]s payoff for the i-th position.""" - self.changes += 1 - m = self.msg ("SET LOC PAYOFF " + (str (i)) + " " + player + " " + pay) - return (m) - def get_payoffs (self): """Get (evaluated) payoffs for all players in the current location.""" m = self.msg ("GET PAYOFF") @@ -285,92 +153,6 @@ int (gs[1].strip()))) return ([make_move(m.strip('[] ')) for m in moves]) - def itvls_str (self, itvls): - """Print a list of intervals to string.""" - return (", ".join([f + ": " + str (s) + " -- " + str (e) - for (f,s,e) in itvls])) - - def set_loc_moves (self, i, moves): - """Set moves (3ples (rule, interval, loc)) for the i-th position.""" - moves_str = "; ".join(["[" + r + ", " + iv + " -> " + str(l) + "]" - for (r, iv, l) in moves]) - self.changes += 1 - m = self.msg ("SET LOC MOVES " + (str (i)) + " " + moves_str) - return (m) - - def get_rdata (self, i): - m = self.msg ("GET DATA r" + (str (i))) - if m[0:3] == "ERR": return ("none") - return (m) - - def set_rdata (self, i, data_s): - self.changes += 1 - return (self.msg ("SET DATA r" + (str (i)) + " " + data_s)) - - def set_arity (self, rel, i): - m = self.msg ("SET SIGNATURE " + rel + " " + str(i)) - return (m) - - def add_rule (self): - rule_name = str(len(self.rules) + 1) - self.rule_names.append(rule_name) - emptyr_str = " [||]->[||] with [] pre true inv true post true" - self.changes += 1 - self.msg ("SET RULE " + rule_name + emptyr_str) - rl = ModelClient (self, rule_name, 0) - rr = ModelClient (self, rule_name, 1) - self.rules.append ((rl, rr)) - return (len(self.rules)) - - - def get_conditions (self, i): - m = self.msg ("GET RULE cond " + self.rule_names[i]) - return ([c.strip() for c in m.split(";")]) - - def set_conditions (self, i, pre_s, inv_s, post_s): - self.changes += 1 - m = self.msg ("SET RULE cond " + self.rule_names[i] + " " + pre_s + - " " + inv_s + " " + post_s) - return (m) - - def get_emb_rels (self, i): - m = self.msg ("GET RULE emb " + self.rule_names[i]) - return (m) - - def set_emb_rels (self, i, lst_s): - self.changes += 1 - m = self.msg ("SET RULE emb " + self.rule_names[i] + " " + lst_s) - return (m) - - def get_embeddings (self, i, elem): - m = self.msg ("GET RULE assoc " + self.rule_names[i] + " " + str(elem)) - return (m) - - def set_embeddings (self, i, elem, lst_s): - self.changes += 1 - m = self.msg ("SET RULE assoc " + self.rule_names[i] + " "+ str(elem) + " " + lst_s) - return (m) - - def get_update (self, i, elem, fun): - m = self.msg ("GET RULE update " + self.rule_names[i] + " "+ fun + " " + str(elem)) - return (m) - - def set_update (self, i, elem, fun, t): - self.changes += 1 - m = self.msg ("SET RULE update " + self.rule_names[i] + " " + - fun + " " + str(elem) + " " + t) - return (m) - - def get_dynamic (self, i, elem, fun): - m = self.msg ("GET RULE dynamics "+ self.rule_names[i] +" "+ fun + " " + str(elem)) - return (m) - - def set_dynamic (self, i, elem, fun, t): - self.changes += 1 - m = self.msg ("SET RULE dynamics "+ self.rule_names[i] + " " + - fun + " " + str(elem) + " " + t) - return (m) - def query (self, rule_nm): msg = self.msg ("GET RULE " + rule_nm + " MODEL") if msg.find('->') < 0: return ([]) @@ -395,48 +177,10 @@ shifts[seq[0]][seq[1]] = [float(f) for f in seq[2:]] return (shifts) - def set_time (self, tstep, t): - m = self.msg ("SET dynamics " + repr(tstep) + " " + repr(t)) - return (m) - - def get_time (self): - m = self.msg ("GET dynamics") - t = [s.strip() for s in m.split('/')] - return ((float(t[0]), float(t[1]))) - - def suggest (self, no_iters, loc): - (ts, t) = self.get_time () - # Note that we set max. horizon to 500 here - # syntax variant 1: - # "EVAL LOC MOVES advancement_ratio location TIMEOUT time_in_sec method optional_playout_horizon" - # syntax variant 2: - # "EVAL LOC MOVES [{0: heuristic_player_0_loc_0; 1: heuristic_player_1_loc_0}; {0: heuristic_player_0_loc_1; 1: heuristic_player_1_loc_1}] advancement_ratio location TIMEOUT time_in_sec method optional_playout_horizon" - m = self.msg ("EVAL LOC MOVES 2.5 " + str(loc) +" TIMEOUT 120 "+ str(no_iters) + " uct_greedy_playouts 500") - self.set_time (ts, t) - msg = [s.strip() for s in m.split(';')] - emb = dict() - for s in msg[1].split(','): - es = [x.strip() for x in s.split(':')] - emb[es[0]] = es[1] - params = dict() - for s in msg[2].split(','): - ps = [x.strip() for x in s.split(':')] - params[ps[0]] = float(ps[1]) - return ((msg[0], emb, params, int(msg[3]))) - def open_from_str (self, s): state_str = ("#db#") + "$".join (s.split ("\n")) self.set_state (state_str) - def open (self, file_name_s): - file_name = str(file_name_s) - if file_name == '': return - file = open (file_name, 'r') - state = file.read () - file.close () - state_str = ("#"+file_name+"#") + "$".join (state.split ("\n")) - self.set_state (state_str) - def cur_moves (self): cur_loc = self.get_cur_loc () moves = [] @@ -446,15 +190,6 @@ moves.append ((m, r, endp)) return ("; ".join([str(m) for m in moves])) - def cur_move_touching (self, elem): - cur_loc = self.get_cur_loc () - moves = [] - for (r, itvls, endp) in self.get_loc_moves (cur_loc): - for m in self.query (r): - # FIXME! currently we ignore params in html (skip itvls here) - if str(elem) in m.values(): moves.append ((m, r, endp)) - return ("; ".join([str(m) for m in moves])) - def make_move (self, m, r, endp): self.apply_rule (r, m, 1.0, []) self.set_cur_loc (endp) Modified: trunk/Toss/WebClient/make_db.py =================================================================== --- trunk/Toss/WebClient/make_db.py 2010-12-15 00:02:30 UTC (rev 1251) +++ trunk/Toss/WebClient/make_db.py 2010-12-16 22:53:03 UTC (rev 1252) @@ -3,16 +3,22 @@ import os from pysqlite2 import dbapi2 as sqlite3 +TUID = "toss_id_05174_" # from TossHandler import TUID + print "Creating empty Toss DB" conn = sqlite3.connect("tossdb.sqlite") conn.execute("create table passwd(id string primary key, passwd string)") -conn.execute("create table cur_states(playid int primary key, game string, player1 string, player2 string, move int, toss string, svg string)") -conn.execute("create table old_states(playid int, game string, player1 string, player2 string, move int, toss string, svg string)") +conn.execute("create table cur_states(playid int primary key, game string, player1 string, player2 string, move int, toss string, info string, svg string)") +conn.execute("create table old_states(playid int, game string, player1 string, player2 string, move int, toss string, info string, svg string)") conn.execute("create table games(game string primary key, toss string)") conn.execute("create table ports(port int primary key, locked bool)") +conn.execute("create table lock(tid int primary key, locked bool)") conn.commit () +conn.execute ("insert into lock(tid, locked) values (?, ?)", + (TUID, 'false')) + def add_game (g): f = open("../examples/" + g + ".toss") toss = f.read() Modified: trunk/Toss/WebClient/register.html =================================================================== --- trunk/Toss/WebClient/register.html 2010-12-15 00:02:30 UTC (rev 1251) +++ trunk/Toss/WebClient/register.html 2010-12-16 22:53:03 UTC (rev 1252) @@ -33,7 +33,8 @@ function register () { un = document.getElementById('username').value; pwd = document.getElementById('password').value; - sync_server_msg ("REGISTER#" + un + " " + crypt(pwd)); + ts = "toss##in$$some167S4lT_-"; + sync_server_msg ("REGISTER#" + un + " " + crypt(ts + pwd)); } </script> </body> This was sent by the SourceForge.net collaborative development platform, the world's largest Open Source development site. |
From: <luk...@us...> - 2010-12-18 17:50:00
|
Revision: 1254 http://toss.svn.sourceforge.net/toss/?rev=1254&view=rev Author: lukaszkaiser Date: 2010-12-18 17:49:52 +0000 (Sat, 18 Dec 2010) Log Message: ----------- Continue to improve WebClient, order in file names, registration and user table. Modified Paths: -------------- trunk/Toss/WebClient/README trunk/Toss/WebClient/index.html trunk/Toss/WebClient/make_db.py trunk/Toss/WebClient/register.html Added Paths: ----------- trunk/Toss/WebClient/Connect.js trunk/Toss/WebClient/DefaultStyle.js trunk/Toss/WebClient/Handler.py trunk/Toss/WebClient/Login.js trunk/Toss/WebClient/Main.js trunk/Toss/WebClient/Style.css Removed Paths: ------------- trunk/Toss/WebClient/TossConnect.js trunk/Toss/WebClient/TossDefaultStyle.js trunk/Toss/WebClient/TossHandler.py trunk/Toss/WebClient/TossMain.js trunk/Toss/WebClient/TossStyle.css Copied: trunk/Toss/WebClient/Connect.js (from rev 1253, trunk/Toss/WebClient/TossConnect.js) =================================================================== --- trunk/Toss/WebClient/Connect.js (rev 0) +++ trunk/Toss/WebClient/Connect.js 2010-12-18 17:49:52 UTC (rev 1254) @@ -0,0 +1,212 @@ +// JavaScript Toss Module -- Connect (basic Toss Server connection routines) + +var UNAME = ""; + +var MODEL_MAXX = 0.0; +var MODEL_MINX = 0.0; +var MODEL_MAXY = 0.0; +var MODEL_MINY = 0.0; +var MODEL_WIDTH = 0.0; +var MODEL_HEIGHT = 0.0; +var SVG_WIDTH = 500; +var SVG_HEIGHT = 500; +var SVG_MARGINX = 50; +var SVG_MARGINY = 50; +var VIEW_WIDTH = "19em"; +var VIEW_HEIGHT = "19em"; +var VIEW_MIRROR = 0; + +var GAME_NAME = ""; // name of current game, e.g. "Breakthrough" +var ELEMS = []; // used to store the list of elements +var ELEM_POS = {}; // positions of elements +var RELS = []; // relations +var SUGGESTED_ELEM_SIZEX = 25; // suggested size of elements +var SUGGESTED_ELEM_SIZEY = 25; // suggested size of elements + +var CACHED_MOVES = "" + +var DIM_STR = "" +var ELEM_STR = "" +var RELS_STR = "" +var MOVES_STR = "" + + +// Helper function: sign of a number. +function sign (x) { + if (x > 0.01) { return (1); } + else if (x < -0.01) { return (-1); } + else { return (0); } +} + +// Clears cached moves. +function clear_move_cache () { + CACHED_MOVES = ""; +} + +function set_info (info) { + var res_arr = []; + res_arr = info.split("$"); + if (res_arr.length != 4) { return (false); } + DIM_STR = res_arr[0]; + ELEM_STR = res_arr[1]; + RELS_STR = res_arr[2]; + MOVES_STR = res_arr[3]; + var dim = strip('(', ')', DIM_STR).split(','); + MODEL_MAXX = parseFloat(strip(' ', ' ', dim[0])); + MODEL_MINX = parseFloat(strip(' ', ' ', dim[1])); + MODEL_MAXY = parseFloat(strip(' ', ' ', dim[2])); + MODEL_MINY = parseFloat(strip(' ', ' ', dim[3])); + MODEL_WIDTH = Math.max (SVG_WIDTH / 100, (MODEL_MAXX - MODEL_MINX)); + MODEL_HEIGHT = Math.max (SVG_HEIGHT / 100, (MODEL_MAXY - MODEL_MINY)); + + return (true); +} + +// Send [msg] to server and return response text. +function sync_server_msg (msg) { + var xml_request = new XMLHttpRequest (); + xml_request.open ('POST', 'TossHandler.py', false); + xml_request.setRequestHeader ('Content-Type', + 'application/x-www-form-urlencoded; charset=UTF-8'); + xml_request.send (msg); + resp = xml_request.responseText; + if (resp.indexOf ("MOD_PYTHON ERROR") > -1) { + alert (resp.substring(resp.indexOf("Traceback"))); + return (""); + } + return (resp) +} + +// Send [msg] to server attaching prefix '[cmd]#' and return response text. +function srv (cmd, msg) { + return (sync_server_msg (cmd + '#' + msg)); +} + +// Strip [c1] and [c2] from beginning and end of [str]. +function strip (c1, c2, str) { + if (str.length == 0) return (str); + var i = 0; var j = 0; + for (i = 0; i < str.length; i++) { + if (str.charAt(i) != c1 && str.charAt(i) != c2) break; + } + for (j = str.length - 1; j > -1; j--) { + if (str.charAt(j) != c1 && str.charAt(j) != c2) break; + } + if (i > j) { return ("") }; + return (str.substring(i, j+1)); +} + +// Convert a string [str] representing python list to array and return it. +// WARNING: we use [sep] as separator, it must not occur in list elements! +function convert_python_list (sep, str) { + var res_arr = []; + res_arr = strip('[', ']', str).split(sep); + if (res_arr.length == 1 && res_arr[0] == "") { return ([]); } + for (i = 0; i < res_arr.length; i++) { + res_arr[i] = strip (' ', '\'', res_arr[i]) + } + return (res_arr); +} + + +// Get moves applicable to [elem] in a game. +function get_moves (elem) { + if (CACHED_MOVES == "") { + CACHED_MOVES = MOVES_STR + } + var all_moves = convert_python_list (';', CACHED_MOVES); + var elem_moves = [] + for (i = 0; i < all_moves.length; i++) { + if (all_moves[i].indexOf(elem) >= 0) { + elem_moves.push(all_moves[i]) + } + } + return (elem_moves) +} + +// Get relation tuples. +function get_rels () { + var r = convert_python_list(';', RELS_STR); + var rels = []; + for (var i = 0; i < r.length; i++) { + var rel_name = strip(' ', '\'', r[i].substring(1,r[i].indexOf(','))); + var args_s = r[i].substring(r[i].indexOf('[')+1, r[i].indexOf(']')); + if (rel_name[0] != "_" && args_s != "''") { + rels.push ([rel_name, convert_python_list (',', args_s)]); + } + } + return (rels) +} + +// Translate position from Toss Model coordinates to SVG coordinates. +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; + } else { + var y = ((MODEL_HEIGHT - (pos[1] - MODEL_MINY)) * SVG_WIDTH) / MODEL_HEIGHT; + } + return ([x + SVG_MARGINX, y + SVG_MARGINY]) +} + +// Get elements and positions. +function get_elems_with_pos () { + var l = convert_python_list(',', ELEM_STR); + ELEMS = []; + ELEM_POS = {}; + for (var i = 0; i < l.length; i++) { + var e = convert_python_list (';', l[i]); + ELEMS.push (e[0]); + ELEM_POS[e[0]] = translate_pos ([parseFloat(e[1]), parseFloat(e[2])]); + } +} + + +// Open [file_name] on Toss Server and get info. +function toss_open_db (file_name_params) { + var info = srv ("OPEN_DB", file_name_params); + set_info (info); +} + + +// ---- Two functions below are very basic and thus in this file. --- + +// Create basic svg box. +function create_svg_box (bwidth, bheight, margx, margy, parent_id) { + VIEW_WIDTH = bwidth; + VIEW_HEIGHT = bheight; + SVG_MARGINX = margx; + SVG_MARGINY = margx; + var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); + svg.setAttribute('id', 'svg'); + svg.setAttribute('width', bwidth); + svg.setAttribute('height', bheight); + var wx = SVG_WIDTH + 2*SVG_MARGINX; + var wy = SVG_HEIGHT + 2*SVG_MARGINY; + svg.setAttribute('viewBox', '0 0 ' + 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) { + 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]); +} + + +// 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); + elem.setAttribute ("class", "svgelem"); + for (var i = 0; i < attributes.length; i++) { + elem.setAttribute (attributes[i][0], attributes[i][1].toString()); + } + document.getElementById("svg").appendChild(elem); +} Copied: trunk/Toss/WebClient/DefaultStyle.js (from rev 1253, trunk/Toss/WebClient/TossDefaultStyle.js) =================================================================== --- trunk/Toss/WebClient/DefaultStyle.js (rev 0) +++ trunk/Toss/WebClient/DefaultStyle.js 2010-12-18 17:49:52 UTC (rev 1254) @@ -0,0 +1,272 @@ +// JavaScript Toss Module -- DefaultStyle (requires TossConnect.js) + +// This module implements default drawing style for games. +// Functions expected from this module: +// - draw_outline () +// - draw_elem (elem) +// - highlight_elem (elem) +// - unhighlight_elem (elem) +// - draw_rel (rel_name, args) + + +var DEFpawn = '<g transform="translate(-22.5,-22.5)"> \ + <path \ + d="M 22,9 C 19.792,9 18,10.792 18,13 C 18,13.885 18.294,14.712 18.781,15.375 C 16.829,16.497 15.5,18.588 15.5,21 C 15.5,23.034 16.442,24.839 17.906,26.031 C 14.907,27.089 10.5,31.578 10.5,39.5 L 33.5,39.5 C 33.5,31.578 29.093,27.089 26.094,26.031 C 27.558,24.839 28.5,23.034 28.5,21 C 28.5,18.588 27.171,16.497 25.219,15.375 C 25.706,14.712 26,13.885 26,13 C 26,10.792 24.208,9 22,9 z " \ + class="chess-path-A" /> \ + </g>'; + +var DEFknight = '<g transform="translate(-22.5,-22.5)"> \ + <path \ + d="M 22,10 C 32.5,11 38.5,18 38,39 L 15,39 C 15,30 25,32.5 23,18" \ + class="chess-path-B" /> \ + <path \ + d="M 24,18 C 24.384,20.911 18.447,25.369 16,27 C 13,29 13.181,31.343 11,31 C 9.9583,30.056 12.413,27.962 11,28 C 10,28 11.187,29.232 10,30 C 9,30 5.9968,31 6,26 C 6,24 12,14 12,14 C 12,14 13.886,12.098 14,10.5 C 13.274,9.5056 13.5,8.5 13.5,7.5 C 14.5,6.5 16.5,10 16.5,10 L 18.5,10 C 18.5,10 19.282,8.0081 21,7 C 22,7 22,10 22,10" \ + class="chess-path-B" /> \ + <path \ + d="M 9 23.5 A 0.5 0.5 0 1 1 8,23.5 A 0.5 0.5 0 1 1 9 23.5 z" \ + transform="translate(0.5,2)" \ + class="chess-path-C" /> \ + <path \ + d="M 15 15.5 A 0.5 1.5 0 1 1 14,15.5 A 0.5 1.5 0 1 1 15 15.5 z" \ + transform="matrix(0.866,0.5,-0.5,0.866,9.6926,-5.1734)" \ + class="chess-path-C" /> \ + <path \ + d="M 37,39 C 38,19 31.5,11.5 25,10.5" \ + class="chess-path-D" /> \ + </g>'; + +var DEFbishop = '<g transform="translate(-22.5,-22.5)"> \ + <path \ + d="M 9,36 C 12.385,35.028 19.115,36.431 22.5,34 C 25.885,36.431 32.615,35.028 36,36 C 36,36 37.646,36.542 39,38 C 38.323,38.972 37.354,38.986 36,38.5 C 32.615,37.528 25.885,38.958 22.5,37.5 C 19.115,38.958 12.385,37.528 9,38.5 C 7.6459,38.986 6.6771,38.972 6,38 C 7.3541,36.055 9,36 9,36 z " \ + style="stroke-linecap:butt;" class="chess-path-Bx" /> \ + <path \ + d="M 15,32 C 17.5,34.5 27.5,34.5 30,32 C 30.5,30.5 30,30 30,30 C 30,27.5 27.5,26 27.5,26 C 33,24.5 33.5,14.5 22.5,10.5 C 11.5,14.5 12,24.5 17.5,26 C 17.5,26 15,27.5 15,30 C 15,30 14.5,30.5 15,32 z " \ + style="stroke-linecap:butt;" class="chess-path-B" /> \ + <path \ + d="M 25 10 A 2.5 2.5 0 1 1 20,10 A 2.5 2.5 0 1 1 25 10 z" \ + transform="translate(0,-2)" \ + style="stroke-linecap:butt;" class="chess-path-Bx" /> \ + <path \ + d="M 17.5,26 L 27.5,26" \ + style="stroke-linecap:butt;" class="chess-path-D" /> \ + <path \ + d="M 15,30 L 30,30" \ + style="stroke-linecap:butt;" class="chess-path-D" /> \ + <path \ + d="M 22.5,15.5 L 22.5,20.5" \ + style="stroke-linecap:butt;" class="chess-path-D" /> \ + <path \ + d="M 20,18 L 25,18" \ + style="stroke-linecap:butt;" class="chess-path-D" /> \ + </g>'; + +var DEFrook = '<g transform="translate(-22.5,-22.5)"> \ + <path \ + d="M 9,39 L 36,39 L 36,36 L 9,36 L 9,39 z " \ + style="stroke-linecap:butt;" class="chess-path-Bx" /> \ + <path \ + d="M 12,36 L 12,32 L 33,32 L 33,36 L 12,36 z " \ + style="stroke-linecap:butt;" class="chess-path-Bx" /> \ + <path \ + d="M 11,14 L 11,9 L 15,9 L 15,11 L 20,11 L 20,9 L 25,9 L 25,11 L 30,11 L 30,9 L 34,9 L 34,14" \ + style="stroke-linecap:butt;" class="chess-path-B" /> \ + <path \ + d="M 34,14 L 31,17 L 14,17 L 11,14" \ + style="stroke-linecap:butt;" class="chess-path-B" /> \ + <path \ + d="M 31,17 L 31,29.5 L 14,29.5 L 14,17" \ + style="stroke-linecap:butt;" class="chess-path-B" /> \ + <path \ + d="M 31,29.5 L 32.5,32 L 12.5,32 L 14,29.5" \ + class="chess-path-Bx" /> \ + <path \ + d="M 11,14 L 34,14" \ + class="chess-path-D" /> \ + </g>'; + +var DEFqueen = '<g transform="translate(-22.5,-22.5)"> \ + <path \ + d="M 9 13 A 2 2 0 1 1 5,13 A 2 2 0 1 1 9 13 z" \ + transform="translate(-1,-1)" \ + style="fill-rule: none;" class="chess-path-B" /> \ + <path \ + d="M 9 13 A 2 2 0 1 1 5,13 A 2 2 0 1 1 9 13 z" \ + transform="translate(15.5,-5.5)" \ + style="fill-rule: none;" class="chess-path-B" /> \ + <path \ + d="M 9 13 A 2 2 0 1 1 5,13 A 2 2 0 1 1 9 13 z" \ + transform="translate(32,-1)" \ + style="fill-rule: none;" class="chess-path-B" /> \ + <path \ + d="M 9 13 A 2 2 0 1 1 5,13 A 2 2 0 1 1 9 13 z" \ + transform="translate(7,-4.5)" \ + style="fill-rule: none;" class="chess-path-B" /> \ + <path \ + d="M 9 13 A 2 2 0 1 1 5,13 A 2 2 0 1 1 9 13 z" \ + transform="translate(24,-4)" \ + style="fill-rule: none;" class="chess-path-B" /> \ + <path \ + d="M 9,26 C 17.5,24.5 30,24.5 36,26 L 38,14 L 31,25 L 31,11 L 25.5,24.5 L 22.5,9.5 L 19.5,24.5 L 14,10.5 L 14,25 L 7,14 L 9,26 z " \ + style="stroke-linecap:butt;" class="chess-path-B" /> \ + <path \ + d="M 9,26 C 9,28 10.5,28 11.5,30 C 12.5,31.5 12.5,31 12,33.5 C 10.5,34.5 10.5,36 10.5,36 C 9,37.5 11,38.5 11,38.5 C 17.5,39.5 27.5,39.5 34,38.5 C 34,38.5 35.5,37.5 34,36 C 34,36 34.5,34.5 33,33.5 C 32.5,31 32.5,31.5 33.5,30 C 34.5,28 36,28 36,26 C 27.5,24.5 17.5,24.5 9,26 z " \ + style="stroke-linecap:butt;" class="chess-path-B" /> \ + <path \ + d="M 11.5,30 C 15,29 30,29 33.5,30" \ + class="chess-path-D" /> \ + <path \ + d="M 12,33.5 C 18,32.5 27,32.5 33,33.5" \ + class="chess-path-D" /> \ + <path \ + d="M 10.5,36 C 15.5,35 29,35 34,36" \ + class="chess-path-D" /> \ + </g>'; + +var DEFking = '<g transform="translate(-22.5,-22.5)"> \ + <path d="M 22.5,11.625 L 22.5,6" class="chess-path-D" /> \ + <path d="M 22.5,25 C 22.5,25 27,17.5 25.5,14.5 C 25.5,14.5 24.5,12 22.5,12 C 20.5,12 19.5,14.5 19.5,14.5 C 18,17.5 22.5,25 22.5,25" \ + style="fill:stroke-linecap:butt;" class="chess-path-B" /> \ + <path d="M 11.5,37 C 17,40.5 27,40.5 32.5,37 L 32.5,30 C 32.5,30 41.5,25.5 38.5,19.5 C 34.5,13 25,16 22.5,23.5 L 22.5,27 L 22.5,23.5 C 19,16 9.5,13 6.5,19.5 C 3.5,25.5 11.5,29.5 11.5,29.5 L 11.5,37 z " \ + class="chess-path-D" /> \ + <path d="M 20,8 L 25,8" class="chess-path-D" /> \ + <path d="M 11.5,29.5 C 17,27 27,27 32.5,30" class="chess-path-D" /> \ + <path d="M 11.5,37 C 17,34.5 27,34.5 32.5,37" \ + class="chess-path-D" /> \ + <path d="M 11.5,33.5 C 17,31.5 27,31.5 32.5,33.5" \ + class="chess-path-D" /> \ + </g>'; + +// Draw a box around the board. +function draw_outline () { + var w = SVG_WIDTH + 2*SVG_MARGINX; + var h = SVG_HEIGHT + 2*SVG_MARGINY; + add_svg ("rect", [["class", "board-outline"], ["width", w], ["height", h]]); +} + +// Draw the element [elem]. +function draw_elem (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", "model-elem"], + ["onclick", ("handle_elem_click('" + elem + "')")]] + ); +} + +// Highlight the element [elem]. +function highlight_elem (elem) { + var e = document.getElementById ("elem_" + elem); + e.setAttribute ("class", "model-elem-highlight"); +} + +// Unhighlight the element [elem]. +function unhighlight_elem (elem) { + var e = document.getElementById ("elem_" + elem); + e.setAttribute ("class", "model-elem"); +} + +// Draw relation [rel_name] between elements [args]. +function draw_rel (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); + } else if (rel_name == "R") { // Robber in Entanglement + add_svg ("circle", + [["cx", pos[0]], ["cy", pos[1]], ["r", SUGGESTED_ELEM_SIZEX - 5], + ["id", "pred_" + args[0] + "_" + rel_name], + ["class", "model-pred-" + rel_name], + ["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>'); + 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>'); + 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>'); + 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>'); + 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>'); + 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>'); + 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>'); + 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>'); + document.getElementById("svg").appendChild(f); + } else if (rel_name == "wQ") { // Chess Figure: white queen + var f = svg_from_string (pos[0], pos[1], 20, 20, + '<g class="chessW" ' + is + hs + '>' + DEFqueen + '</g>'); + document.getElementById("svg").appendChild(f); + } else if (rel_name == "bQ") { // Chess Figure: black queen + var f = svg_from_string (pos[0], pos[1], 20, 20, + '<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>'); + 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>'); + document.getElementById("svg").appendChild(f); + } else { + add_svg ("circle", + [["cx", pos[0]], ["cy", pos[1]], ["r", SUGGESTED_ELEM_SIZEX - 12], + ["id", "pred_" + args[0] + "_" + rel_name], + ["class", "model-pred-" + rel_name], + ["stroke-width", (SUGGESTED_ELEM_SIZEX / 10) + 2], + ["onclick", ("handle_elem_click('" + args[0] + "')")]]); + } + } + if (args.length == 2) { + if (rel_name == "E") { + var pos1 = ELEM_POS[args[0]]; + var pos2 = ELEM_POS[args[1]]; + if (sign (pos1[0] - pos2[0]) == 0) { + var d = SUGGESTED_ELEM_SIZEY * sign (pos1[1] - pos2[1]); + add_svg ("line", [["x1", pos1[0]], ["y1", pos1[1] - d], + ["x2", pos2[0]], ["y2", pos2[1] + d], + ["class", "model-edge-E"]]); + } else if (sign (pos1[1] - pos2[1]) == 0) { + var d = SUGGESTED_ELEM_SIZEX * sign (pos1[0] - pos2[0]); + add_svg ("line", [["x1", pos1[0] - d], ["y1", pos1[1]], + ["x2", pos2[0] + d], ["y2", pos2[1]], + ["class", "model-edge-E"]]); + } + else { + var dx = SUGGESTED_ELEM_SIZEX * sign (pos1[0] - pos2[0]); + var dy = SUGGESTED_ELEM_SIZEY * sign (pos1[1] - pos2[1]); + add_svg ("line", [["x1", pos1[0] + dx], ["y1", pos1[1] + dy], + ["x2", pos2[0] - dx], ["y2", pos2[1] - dy], + ["class", "model-edge-E"]]); + } + } + } +} Copied: trunk/Toss/WebClient/Handler.py (from rev 1253, trunk/Toss/WebClient/TossHandler.py) =================================================================== --- trunk/Toss/WebClient/Handler.py (rev 0) +++ trunk/Toss/WebClient/Handler.py 2010-12-18 17:49:52 UTC (rev 1254) @@ -0,0 +1,227 @@ +import subprocess +import socket +import time +from Wrapper import * +from mod_python import apache, Cookie +from pysqlite2 import dbapi2 as sqlite3 + +DB_FILE = "/var/www/WebClient/tossdb.sqlite" + +TUID = "toss_id_05174_" + +def tmp_log (str): + file = open ("/tmp/th.log", 'a') + file.write (str) + file.close() + +def get_all_from_db (db, tbl, select_s): + res = [] + for r in db.execute("select * from " + tbl + " where " + select_s): + res.append(r) + return (res) + +def open_toss_server (port): + args = ["/var/www/WebClient/TossServer", + "-s", "localhost", "-p", str(port)] + server_proc = subprocess.Popen(args) + time.sleep (0.1) + return (port) + +def get_global_lock (db): + cur = db.cursor () + cur.execute ("update lock set locked='true' " + + " where locked='false' and tid='" + str(TUID) + "'") + db.commit () + if cur.rowcount == 1: + return + time.sleep (0.1) + get_global_lock (db) + +def release_global_lock (db): + db.execute ("update lock set locked='false' " + + " where locked='true' and tid='" + str(TUID) + "'") + db.commit () + +def get_toss_port (db): + get_global_lock (db) + free_ports = get_all_from_db (db, "ports", "locked='false'") + if len(free_ports) == 0: + fid = 0 + for f in db.execute ("select count(*) from ports"): + fid = int(f[0]) + port = 8110+fid+1 + db.execute ("insert into ports(port, locked) values (?, ?)", + (port, 'true')) + release_global_lock (db) + open_toss_server (port) + return (port) + (port, _) = free_ports[0] + db.execute ("update ports set locked='true' where port=" + str(port)) + release_global_lock (db) + return (port) + +def release_toss_port (db, port): + db.execute ("update ports set locked='false' where port=" + str(port)) + db.commit () + +def cp (f1, f2): + subprocess.call(["cp", f1, f2]) + +def list_plays (db, game, player_id): + or_s = "(player1='" + player_id + "' or player2='" + player_id + "')" + plays = get_all_from_db (db, "cur_states", "game='"+ game + "' and " + or_s) + def play_name (p): + (pid, g, p1, p2, move, _, _, _) = p + return ("/plays/" + str(g) + "_" + str(p1) + "_" + str(p2) + "_" + + str(pid) + "_" + str(move)) + return (str([play_name (p) for p in plays])) + +def db_cur_insert (db, game, p1, p2, pid, move, toss, info, svg_str): + db.execute ("insert into cur_states(playid, game, player1, player2, move, toss, info, svg) values (?, ?, ?, ?, ?, ?, ?, ?)", + (pid, game, p1, p2, move, toss, info, svg_str)) + db.commit () + +def db_old_insert (db, game, p1, p2, pid, move, toss, info, svg_str): + db.execute ("insert into old_states(playid, game, player1, player2, move, toss, info, svg) values (?, ?, ?, ?, ?, ?, ?, ?)", + (pid, game, p1, p2, move, toss, info, svg_str)) + db.commit () + +def get_game_info (client): + dim_s = str(client.model.get_dim()) + model_s = str(client.model.get_elems_with_pos()) + rels_s = str(client.model.get_rels_simple()) + moves_s = str(client.cur_moves()) + return (dim_s + "$" + model_s + "$" + rels_s + "$" + moves_s) + +def new_play (db, client, game, p1, p2, pid, move): + res = get_all_from_db (db, "games", "game='" + game + "'") + (_, toss) = res[0] + client.open_from_str (toss) + info = get_game_info (client) + model = client.get_model () + db_cur_insert (db, game, p1, p2, pid, move, model, info, "") + return (info) + +def game_select_s (g, p1, p2, pid, m): + return("game='" + g + "' and player1='" + p1 + "' and player2='" + p2 + + "' and playid=" + pid + " and move=" + m) + +def open_db (db, game, p1, p2, pid, move): + select_s = game_select_s (game, p1, p2, pid, move) + res = get_all_from_db (db, "cur_states", select_s) + (_, _, _, _, _, _, info, _) = res[0] + return (info) + + +def move_play (db, client, move_tup, g, p1, p2, pid, m): + select_s = game_select_s (g, p1, p2, pid, m) + old_res = get_all_from_db (db, "cur_states", select_s) + (_, _, _, _, _, old_toss, old_info, old_svg) = old_res[0] + res = get_all_from_db (db, "games", "game='" + g + "'") + (_, game_toss) = res[0] + client.open_from_str (game_toss + "\n MODEL " + old_toss) + (move1, move2, move3) = move_tup + client.make_move (move1, move2, move3) + new_toss = client.get_model () + new_info = get_game_info (client) + db.execute ("delete from cur_states where " + select_s) + db_old_insert (db, g, p1, p2, pid, m, old_toss, old_info, old_svg) + db_cur_insert (db, g, p1, p2, pid, int(m) + 1, new_toss, new_info, "") + return (new_info) + +def upd_svg (db, g, p1, p2, pid, m, svg_s): + select_s = game_select_s (g, p1, p2, pid, m) + db.execute ("update cur_states set svg='" + svg_s + "' where " + select_s) + db.commit () + +def passwd_from_db (db, uid): + res = get_all_from_db (db, "users", "id='" + uid + "'") + if len(res) > 1: raise Exception ("db", "multiple entries for " + uid) + if len(res) == 0: return (None) + (uid, _, _, _, passwd) = res[0] + return (str(passwd)) + +def confirm_username (db, req): + cookies = Cookie.get_cookies(req) + if not (cookies.has_key(TUID + 'username')): return "" + if not (cookies.has_key(TUID + 'passphrase')): return "" + uid = cookies[TUID + 'username'].value + pwd1 = cookies[TUID + 'passphrase'].value + pwd2 = passwd_from_db (db, uid) + if (pwd1 != pwd2): return "" + return (uid) + +def login_user (db, req, uid, pwd): + db_pwd = passwd_from_db (db, uid) + if not db_pwd: return ("no such user registered") + if (pwd != db_pwd): return ("wrong password") + t = time.time() + 3600; + cookie1 = Cookie.Cookie(TUID + 'username', uid, expires=t) + cookie2 = Cookie.Cookie(TUID + 'passphrase', pwd, expires=t) + Cookie.add_cookie(req, cookie1) + Cookie.add_cookie(req, cookie2) + return ("OK") + +def register_user (db, ui): + if len(ui) != 5: return (False) + (uid, name, surname, email, pwd) = (ui[0], ui[1], ui[2], ui[3], ui[4]) + if passwd_from_db (db, uid): return (False) + db.execute ("insert into users(id, name, surname, email, passwd) " + + "values (?, ?, ?, ?, ?)", (uid, name, surname, email, pwd)) + db.commit () + return (True) + +def get_free_id (db): + fid = 0 + for f in db.execute ("select count(*) from cur_states"): + fid = int(f[0]) + return (fid + 1) + +def handler(req): + req.content_type = "text/plain" + db = sqlite3.connect(DB_FILE) + usr = confirm_username (db, req) + msg = req.read () + #tmp_log(msg) + cmd, sep, data = msg.partition('#') + if cmd == "USERNAME": + req.write(usr) + return apache.OK + if cmd == "REGISTER": + ui = data.split('$') + if register_user (db, ui): + req.write("Registration successful for " + ui[0] + ".") + return apache.OK + req.write("Registration failed:\n username "+ui[0]+" already in use."+ + "\nPlease choose another username and try again.") + return apache.OK + if cmd == "LOGIN": + uname, sep, pwd = data.partition(' ') + res = login_user (db, req, uname, pwd) + if res == "OK": + req.write("OK") + return apache.OK + req.write("Login failed for " + uname + ": " + res) + return apache.OK + if cmd == "LOGOUT": + cookie = Cookie.Cookie(TUID + 'passphrase', "a") + cookie = Cookie.Cookie(TUID + 'username', "a") + Cookie.add_cookie(req, cookie) + req.write ("user logged out: " + usr + ".") + return apache.OK + if cmd == "FREEID": + req.write(str(get_free_id (db))) + return apache.OK + if (cmd == "LIST_PLAYS") or (cmd == "OPEN_DB") or (cmd == "UPD_SVG"): + res = eval (cmd.lower() + "(db, " + data + ")") + req.write(str(res)) + return apache.OK + if (cmd == "NEW_PLAY") or (cmd == "MOVE_PLAY"): + port = get_toss_port (db) + c = SystemClient ("localhost", port) + res = eval (cmd.lower() + "(db, " + data + ")") + release_toss_port (db, port) + req.write(str(res)) + return apache.OK + req.write("MOD_PYTHON ERROR ; Traceback: Unknown Toss Command! \n " + cmd) + return apache.OK Added: trunk/Toss/WebClient/Login.js =================================================================== --- trunk/Toss/WebClient/Login.js (rev 0) +++ trunk/Toss/WebClient/Login.js 2010-12-18 17:49:52 UTC (rev 1254) @@ -0,0 +1,113 @@ +// JavaScript Toss Module -- Login (requires Main.js, all other) + +TSALT = "toss##in$$some167S4lT_-"; +CORRMSG = "\nPlease correct this and try again." + + +// Simple encryption +function crypt (s) { + var c = Crypto.SHA256(s, true); + var d = c.replace("#", "@"); + return (d.replace("$", "@")); +} + +// Setup a user +function setup_user (un) { + UNAME = un + document.getElementById("topuser").innerHTML = "Welcome " + un; + document.getElementById("loginform").style.display = "none"; + document.getElementById("topright-register").style.display = "none"; + document.getElementById("topright").style.display = "inline"; + document.getElementById("welcome").style.display = "none"; + document.getElementById("plays").style.display = "block"; + list_plays ("Breakthrough"); + list_plays ("Chess"); + list_plays ("Entanglement"); + list_plays ("Gomoku"); + list_plays ("Tic-Tac-Toe"); +} + +// Clear view +function clear_view () { + document.getElementById("loginform").style.display = "inline"; + document.getElementById("topright-register").style.display = "inline"; + document.getElementById("topright").style.display = "none"; + document.getElementById("topuser").innerHTML = ""; + document.getElementById("plays").style.display = "none"; + document.getElementById("game-title").style.display = "none"; + document.getElementById("game-disp").style.display = "none"; + document.getElementById("welcome").style.display = "block"; +} + +// Onload handler +function startup () { + if (navigator.userAgent.indexOf('MSIE') !=-1) { + document.getElementById("nosvg").style.display = "block"; + } else { + var un = srv("USERNAME", "user"); + if (un != "") { setup_user (un) }; + } +} + +// Login +function login () { + un = document.getElementById('username').value; + pwd = document.getElementById('password').value; + resp = sync_server_msg ("LOGIN#" + un + " " + crypt(TSALT + pwd)); + if (resp == "OK") { + setup_user (un) + } else { + alert (resp) + } +} + +// Logout +function logout () { + clear_view (); +} + +// Register new user +function register () { + un = document.getElementById('username').value; + pwd = document.getElementById('password').value; + rptpwd = document.getElementById('rptpassword').value; + name = document.getElementById('name').value; + surname = document.getElementById('surname').value; + email = document.getElementById('email').value; + if (un.length < 2) { + alert ("Your username must contain at least 2 letters." + CORRMSG); + return; + } + if (un.indexOf(" ") > 0) { + alert ("Your username must not contain spaces." + CORRMSG); + return; + } + if (pwd.length < 3) { + alert ("Your password is too short." + CORRMSG); + return; + } + if (pwd != rptpwd) { + alert ("Password and Repeated Password do not match." + CORRMSG); + return; + } + if (name == "") { + alert ("Your name was not given and it is necessary." + CORRMSG); + return; + } + if (surname == "") { + alert ("Your surname was not given and it is necessary." + CORRMSG); + return; + } + if (email.indexOf("@") < 1 || email.indexOf(".") < 1) { + alert ("Please provide a valid email address."); + return; + } + if (un.indexOf ("$") > 0 || name.indexOf ("$") > 0 || + surname.indexOf ("$") > 0 || email.indexOf ("$") > 0) { + alert ("Your data must not contain $, i.e. the dolar sign." + CORRMSG); + return; + } + data = un + "$" + name + "$" + surname + "$" + email; + resp = sync_server_msg ("REGISTER#" + data + "$" + crypt(TSALT + pwd)); + alert (resp); +} Copied: trunk/Toss/WebClient/Main.js (from rev 1253, trunk/Toss/WebClient/TossMain.js) =================================================================== --- trunk/Toss/WebClient/Main.js (rev 0) +++ trunk/Toss/WebClient/Main.js 2010-12-18 17:49:52 UTC (rev 1254) @@ -0,0 +1,321 @@ +// JavaScript Toss Module -- Main (requires Connect.js, DefaultStyle.js) + +var ELEM_COUNTERS = {}; +var CUR_MOVE = ""; +var CUR_ELEMS = []; + +var PLAYS = []; +var CUR_PLAY_I = -1; + +var FRIENDS = [] + +var MAX_OPNT_LEN = 20; +var FULL_OPNT_LEN = 0; +var CUR_OPNT_START = 0; + +// Get model information from server. +function get_model_info () { + get_elems_with_pos (); + for (var i = 0; i < ELEMS.length; i++) { + ELEM_COUNTERS[ELEMS[i]] = 0; + } + RELS = get_rels (); + var sqrt = Math.round (Math.sqrt (ELEMS.length)); + if (sqrt * sqrt == ELEMS.length) { // perhaps a grid + SUGGESTED_ELEM_SIZEX = SVG_WIDTH / (2.0 * (sqrt-1)); + SUGGESTED_ELEM_SIZEY = SVG_HEIGHT / (2.0 * (sqrt-1)); + } else { + SUGGESTED_ELEM_SIZEX = SVG_WIDTH / 20; + SUGGESTED_ELEM_SIZEY = SVG_HEIGHT / 20; + } +} + +// Draw the model using function from Toss[X]Style.js. +// WARNING: must call get_model_info first! +function draw_model () { + draw_outline (); + for (var i = 0; i < ELEMS.length; i++) { + draw_elem (ELEMS[i]); + } + for (var i = 0; i < RELS.length; i++) { + draw_rel (RELS[i][0], RELS[i][1]); + } +} + +// Clear whole svg box. +function clear_svg () { + clear_move_cache (); + ELEM_COUNTERS = {}; + CUR_MOVE = ""; + CUR_ELEMS = []; + document.getElementById('cur-move').innerHTML = "none"; + var svg_e = document.getElementById("svg"); + svg_e.parentNode.removeChild (svg_e); +} + +// Full redraw. +function full_redraw () { + clear_svg (); + document.getElementById("working").style.display = "block"; + get_model_info (); + create_svg_box (VIEW_WIDTH, VIEW_HEIGHT, SVG_MARGINX, SVG_MARGINY, "board"); + draw_model (); + document.getElementById("working").style.display = "none"; +} + +// Helper function: get value elements from a move string [s]. +function get_move_elems (s) { + var vals = []; + var arr = strip('(', ')', s).split(','); + for (var i = 0; i < arr.length; i++) { + if (arr[i].indexOf(':') > -1) { + var v = arr[i].substring (arr[i].indexOf(':')+1, arr[i].length); + vals.push (strip ('\'', ' ', strip ('{', '}', v))); + } + } + return (vals) +} + +// Helper function: highlight move, unhighlight old, save current. +function show_move (m) { + var m_act = get_move_elems (m); + var m_rule = m.substring (m.indexOf("},")+4, m.lastIndexOf(',')-1); + for (var i = 0; i < CUR_ELEMS.length; i++) { + unhighlight_elem (CUR_ELEMS[i]); + } + for (var i = 0; i < m_act.length; i++) { + highlight_elem (m_act[i]); + } + var m_str = strip (' ', ' ', m_act.toString ()); + if (m_str == "") { + document.getElementById('cur-move').innerHTML = "none"; + } else { + document.getElementById('cur-move').innerHTML = + m_rule + ': <br/>' + m_str; + } + CUR_ELEMS = m_act; + CUR_MOVE = m.toString(); +} + +// Handler for clicks on elements. +function handle_elem_click (elem) { + var moves = get_moves (elem); + if (moves.length > ELEM_COUNTERS[elem]) { + show_move (moves[ELEM_COUNTERS[elem]]); + ELEM_COUNTERS[elem] += 1; + } else if (moves.length > 0) { + show_move (moves[0]); + ELEM_COUNTERS[elem] = 1; + } +} + +function play_py_id (i) { + return ("'" + GAME_NAME + "', '" + PLAYS[i][0] + "', '" + + PLAYS[i][1] + "', '" + PLAYS[i][2] + "', '" + PLAYS[i][3] + "'") +} + +function new_play_item (game, i) { + var li = document.createElement('li'); + li.setAttribute ("class", "plays-list-elem"); + li.setAttribute ("id", "plays-list-" + game + "-elem-" + i); + var p = PLAYS[i][2]; + li.innerHTML = "" + PLAYS[i][2] + ': ' + PLAYS[i][0] + " vs " + + PLAYS[i][1] + " " + //" move " + PLAYS[i][3] + " "+ + '<a title="Open" href="#" onclick="'+ "play_click('"+ game + "', " + p + + ", " + i + ')">Open</a>'; + // +'<a href="#" onclick="'+ "del_play('"+ fn + "')" + '">Delete</a>'; + return (li); +} + +function list_plays (game) { + var lst = srv ("LIST_PLAYS", "'" + game + "', '" + UNAME + "'"); + PLAYS = convert_python_list (',', lst); + var plist = document.getElementById("plays-list-" + game); + while (plist.childNodes.length > 0) { plist.removeChild(plist.firstChild); } + var d = game.length + 2; + for (var i = 0; i < PLAYS.length; i++) { + var p = PLAYS[i].substring(PLAYS[i].lastIndexOf('/') + d); + PLAYS[i] = convert_python_list ('_', p); + plist.appendChild(new_play_item (game, i)); + } + if (PLAYS.length == 0) { + document.getElementById("plays-list-" + game).style.display = "none"; + } else { + document.getElementById("plays-list-" + game).style.display = "block"; + } +} + +function game_click (game) { + document.getElementById("welcome").style.display = "none"; + document.getElementById("game-disp").style.display = "none"; + document.getElementById("plays").style.display = "none"; + GAME_NAME = game; + if (game == "Tic-Tac-Toe") { // bigger margins needed + create_svg_box ("19em", "19em", 130, 130, "board"); + } else { + create_svg_box ("19em", "19em", 40, 40, "board"); + } + document.getElementById("opening").style.display = "block"; + document.getElementById("opening").style.display = "none"; + document.getElementById("game-disp").style.display = "block"; +} + +function play_click (game, play_id, pi) { + list_plays (game); + game_click (game); + document.getElementById ("game-title").innerHTML = game; + 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; + document.getElementById("cur-player").innerHTML = + PLAYS[CUR_PLAY_I][PLAYS[CUR_PLAY_I][3] % 2]; + toss_open_db (play_py_id(pi)); + full_redraw (); +} + + +// Apply current move. +function make_move () { + if (CUR_MOVE == "") return; + var m = PLAYS[CUR_PLAY_I][3] % 2; + if (PLAYS[CUR_PLAY_I][m] != UNAME) { + alert ("It is your Opponent's turn"); + return; + } + var info = srv("MOVE_PLAY", 'c, '+ CUR_MOVE +', '+ play_py_id (CUR_PLAY_I)); + set_info (info); + clear_move_cache (); + CUR_MOVE = ""; + CUR_ELEMS = []; + ELEM_COUNTERS = {}; + document.getElementById("cur-player").innerHTML = + PLAYS[CUR_PLAY_I][(m + 1) % 2]; + document.getElementById('cur-move').innerHTML = "none"; + full_redraw (); + PLAYS[CUR_PLAY_I][3] = parseInt(PLAYS[CUR_PLAY_I][3]) + 1; + srv ("UPD_SVG", play_py_id(CUR_PLAY_I) + ", " + svg_string()); + var old_li = document.getElementById ("plays-list-" + GAME_NAME + "-elem-" + CUR_PLAY_I); + var li = new_play_item (GAME_NAME, CUR_PLAY_I); + old_li.parentNode.replaceChild (li, old_li); +} + + +function del_play (play) { + alert ("Deleting " + play); +} + +function store_friend_names () { + for (var i = 0; i < FRIENDS.length; i++) { + ID_TO_USER_MAP[FRIENDS[i].id] = FRIENDS[i].name; + ID_TO_USER_FNAME_MAP[FRIENDS[i].id] = FRIENDS[i].first_name; + } +} + +function opponent_item (data, index) { + var li = document.createElement('li'); + li.setAttribute ("class", "opponents-list-elem"); + li.setAttribute ("id", "opponent-" + data.id + "-" + index); + li.innerHTML = '<a href="#" onclick="new_play_do(' + data.id + ')">' + + data.name + '</a>'; + return (li); +} + +function data_cmp (d1, d2) { + if (d1.name < d2.name) { return -1; } + if (d1.name > d2.name) { return 1; } + return (0); +} + +function make_opnt_list () { + var o = document.getElementById("opponents-list"); + FULL_OPNT_LEN = FRIENDS.length + 1; + CUR_OPNT_START = 0; + document.getElementById("opponents-prev").style.display = "none"; + if (MAX_OPNT_LEN > FULL_OPNT_LEN) { + document.getElementById("opponents-next").style.display = "none" + } + var zeroli = document.createElement('li'); + zeroli.setAttribute ("class", "opponents-list-elem"); + zeroli.setAttribute ("id", "opponent-" + "-0"); + zeroli.innerHTML = '<a href="#" onclick="new_play_do(-1)">Play against Yourself</a>'; + o.appendChild (zeroli); + for (var i = 0; i < FRIENDS.length; i++) { + var oi = opponent_item (FRIENDS[i], i+1); + if (i > MAX_OPNT_LEN - 2) { oi.style.display = "none"; } + o.appendChild (oi); + } + document.getElementById("opponents").style.display = "block"; +} + +function new_play (game) { + if (UNAME == "") { alert ("Please log in to create plays"); return; } + GAME_NAME = game; + make_opnt_list (); +} + +function opponents_next () { + for (var i = CUR_OPNT_START; i < CUR_OPNT_START + MAX_OPNT_LEN; i++) { + document.getElementById("opponent-" + "-" + i).style.display = "none"; + } + CUR_OPNT_START += MAX_OPNT_LEN; + for (var i = CUR_OPNT_START; i < CUR_OPNT_START + MAX_OPNT_LEN; i++) { + if (i < FULL_OPNT_LEN) { + document.getElementById("opponent-" + "-" + i).style.display = "list-item"; + } + } + document.getElementById("opponents-prev").style.display = "block" + if (CUR_OPNT_START + MAX_OPNT_LEN > FULL_OPNT_LEN) { + document.getElementById("opponents-next").style.display = "none" + } +} + +function opponents_prev () { + for (var i = CUR_OPNT_START; i < CUR_OPNT_START + MAX_OPNT_LEN; i++) { + if (i < FULL_OPNT_LEN) { + document.getElementById("opponent-" + "-" + i).style.display = "none"; + } + } + CUR_OPNT_START -= MAX_OPNT_LEN; + for (var i = CUR_OPNT_START; i < CUR_OPNT_START + MAX_OPNT_LEN; i++) { + document.getElementById("opponent-" + "-" + i).style.display = "list-item"; + } + document.getElementById("opponents-next").style.display = "block" + if (CUR_OPNT_START == 0) { + document.getElementById("opponents-prev").style.display = "none" + } +} + +function svg_string () { + var svg_el = document.getElementById ("svg"); + var svg_s = (new XMLSerializer()).serializeToString(svg_el); + svg_s = svg_s.replace(/onclick="[^\"]*"/g, ""); + return ("'''" + svg_s + "'''"); +} + +function new_play_do (opp_uid) { + list_plays (GAME_NAME) + game_click (GAME_NAME) + document.getElementById("opponents").style.display = "none"; + var olist = document.getElementById("opponents-list"); + while (olist.childNodes.length > 0) { olist.removeChild(olist.firstChild); } + if (opp_uid == -1) { opp_uid = UNAME; } + if (opp_uid == 0 || UNAME == "") { return; } + document.getElementById("plays-list-" + GAME_NAME).style.display = "block"; + FREE_PLAY_NO = parseInt(srv("FREEID", "play")) + document.getElementById("play-number").innerHTML = "" + FREE_PLAY_NO; + CUR_PLAY_I = PLAYS.length; + VIEW_MIRROR = 0; + document.getElementById("cur-player").innerHTML = UNAME; + document.getElementById("game-disp").style.display = "block"; + document.getElementById("plays").style.left = "30em"; + var p = [UNAME, opp_uid, FREE_PLAY_NO, 0]; + PLAYS.push(p); + var fn = play_py_id (CUR_PLAY_I); + info = srv ("NEW_PLAY", "c, " + fn); + set_info(info); + full_redraw (); + srv ("UPD_SVG", play_py_id(CUR_PLAY_I) + ", " + svg_string()); + li = new_play_item (GAME_NAME, CUR_PLAY_I); + document.getElementById("plays-list-" + GAME_NAME).appendChild(li); +} Modified: trunk/Toss/WebClient/README =================================================================== --- trunk/Toss/WebClient/README 2010-12-18 00:52:28 UTC (rev 1253) +++ trunk/Toss/WebClient/README 2010-12-18 17:49:52 UTC (rev 1254) @@ -7,19 +7,19 @@ in the file /etc/apache2/sites-enabled/[your-site] add e.g. <Directory /var/www/WebClient> AddHandler mod_python .py - PythonHandler TossHandler + PythonHandler Handler # During development you might turn debugging on PythonDebug On </Directory> -The main handler script is called TossHander.py (server side) and corresponding -JavaScript functions are in Toss*.js. To start client open index.html, but +The main handler script is called Hander.py (server side) and corresponding +JavaScript functions are in *.js. To start client open index.html, but first make sure that WebClient is linked in /var/www (ln -s should suffice). -Then run "./make_db" from WebClient and make sure TossHandler top is ok. +Then run "./make_db" from WebClient and make sure Handler entry (above) is ok. Also copy Server from main Toss dir as TossServer to the WebClient directory. TODO: - - better register html and user table + - use name in interface, try buttons, add oponents table and adding page - move interface: first click all, second click toggle, if one - confirm msg - after the above: remove left-of-board div, confirm in the middle - after the above: show game result in the middle / instead of move Copied: trunk/Toss/WebClient/Style.css (from rev 1253, trunk/Toss/WebClient/TossStyle.css) =================================================================== --- trunk/Toss/WebClient/Style.css (rev 0) +++ trunk/Toss/WebClient/Style.css 2010-12-18 17:49:52 UTC (rev 1254) @@ -0,0 +1,515 @@ +/* General */ + +html { + height: 100%; + width: 100%; +} + +body { + background-color: #b5bf8f; + font-family: Verdana, 'TeXGyreHerosRegular', sans; + height: 100%; +} + +.reglabel { + float: left; + clear: left; + width: 10em; +} + +#logo { + font-size: 2em; + float: left; + font-family: arial, 'OFLSortsMillGoudyRegular', serif; + width: 4.5em; + padding-left: 0.25em; +} + +#logo a, #logo a:link, #logo a:active, #logo a:visited { + color: #ffe4aa; + background-color: transparent; + text-decoration: none; +} + +#logo a:hover { + color: #b5bf8f; +} + +.logo-in { + /*font-family: 'OFL Sorts Mill Goudy TT', arial, serif; + font-size: 1.2em;*/ +} + +#top { + font-weight: bold; + position: absolute; + top: 0px; + left: 0px; + width: 100%; + height: 2.5em; + color: #ffe4aa; + background-color: #400827; + border-color: #260314; + border-style: solid; + border-width: 0px 0px 5px 0px; +} + +#topbar { + margin-left: 9.5em; + padding-left: 1em; + padding-right: 1em; + padding-top: 0.7em; +} + +#topright { + float: right; + margin-right: 0em; + display: none; +} + +#topright-register { + float: right; + margin-right: 0em; +} + +#bottom { + position: relative; + bottom: 0px; + left: -0.5em; + width: 100%; + padding-right: 1em; + height: 1.3em; + text-align: right; + color: #ffe4aa; + background-color: #400827; + border-color: #260314; + border-style: solid; + border-width: 5px 0px 0px 0px; +} + +#menu-top-par { + margin-top: 0.5em; + margin-bottom: 0em; +} + +#menu-list { + list-style: none; + padding: 0em; + margin: 0.25em; + margin-bottom: 0.5em; +} + +#topbar a { + font-weight: bold; + text-decoration: none; + color: #ffe4aa; + width: 100%; +} + +#topbar a:hover { + color: #b5bf8f; +} + + +/* Content */ + +.game_list { + font-weight: bold; +} + +.game_list a { + font-weight: normal; +} + +#main { + margin-top: 2.5em; + color: #260314; + background-color: #ffe4aa; + margin-left: 1em; + margin-right: 1em; + padding: 1em; + min-height: 100%; + padding-bottom: 2em; + border: 1px solid #260314; + border-bottom: 0px; +} + +#main a, #main a:link, #main a:active, #main a:visited { + color: #260314; + text-decoration: underline; +} + +#main a:hover { + color: #400827; + text-decoration: none; +} + + +#opponents { + display: none; + position: absolute; + left: 19em; + top: 3.5em; + min-width: 20em; + color: #ffe4aa; + background-color: #400827; + font-weight: bold; + padding: 1em; + border: 1px solid #260314; + z-index: 10; +} + +#opponents a, #opponents a:link, #opponents a:active, #opponents a:visited { + color: #ffe4aa; + text-decoration: none; + font-weight: bold; +} + +#opponents a:hover { + color: #b5bf8f; +} + +#opponents-list { + list-style: square; + margin-top: 0.5em; +} + +.opponents-list-elem { + /* margin-left: -1em; */ +} + +#opponents-next { + position: absolute; + right: 1em; + bottom: 0.25em; +} + +#opponents-prev { + position: absolute; + left: 1em; + bottom: 0.25em; + display: none; +} + +#welcome { + text-align: justify; + margin-top: 1em; +} + +#welcome-top { + font-size: 1.2em; + font-weight: bold; + padding-left: 1.25em; +} + +.short { + max-width: 40em; +} + +#features-list { + list-style: square; +} + +#game-title { + font-size: 1.2em; + font-weight: bold; + margin-top: 1em; + margin-bottom: 2em; +} + +#game-disp { + position: relative; + display: none; +} + +#game-desc { + text-align: justify; + display: none; + width: 29em; + height: 19em; + margin-right: 1em; + padding-right: 1em; + border-right: 1px solid #260314; +} + +#board { + position: absolute; + left: 9em; + padding-right: 1em; + top: 0px; + width: 20em; + height: 19em; + border-right: 1px solid #260314; +} + +#working { + position: absolute; + left: 4.5em; + top: 7em; + width: 10em; + text-align: center; + font-weight: bold; + color: #ffe4aa; + background-color: #400827; + display: none; + padding: 1em; +} + +#opening { + position: absolute; + left: 10em; + top: 7em; + width: 16em; + text-align: center; + font-weight: bold; + color: #ffe4aa; + background-color: #400827; + display: none; + padding: 1em; +} + +#move { + position: absolute; + left: 0px; + top: 0px; +} + +#play-no-div { + padding-bottom: 0.5em; + padding-left: 1em; +} + +#cur-move, #cur-player { + padding-left: 1em; + margin-top: 0.5em; + margin-bottom: 0.5em; +} + +#mk-move { + padding-left: 0em; +} + +#plays { + display: none; + padding-left: 1em; +} + +#plays-list { + list-style: none; + margin-top: 0.25em; +} + +.plays-list-elem { + margin-left: -1.5em; +} + +.plays-list-elem a { + margin-right: 0.5em; +} + +.plays-list-elem .thumb { + position: relative; + top: 5px; + left: 0px; + border: 1px solid #260314; +} + + + +/* SVG styling */ +.board-outline { + fill: #b5bf8f; + stroke: #260314; + stroke-width: 10px; +} + +.model-elem { + fill: #b5bf8f; + stroke: #260314; + stroke-width: 3px; +} + +.model-elem-highlight { + fill: #ffe4aa; + stroke: #400827; + stroke-width: 3px; +} + +.model-pred-P { + fill: #400827; + stroke: #260314; + stroke-width: 5px; +} + +.model-pred-Q { + fill: #b5bf8f; + stroke: #260314; +} + +.model-pred-C { + fill: #ffe4aa; + stroke: #260314; + stroke-width: 3px; +} + +.model-pred-R { + fill: #400827; + stroke: #260314; + stroke-width: 3px; +} + +.model-pred-W { + fill: #ffe4aa; + stroke: #260314; + stroke-width: 3px; +} + +.model-pred-B { + fill: #400827; + stroke: #260314; + stroke-width: 3px; +} + +.model-edge-E { + fill: #260314; + stroke: #260314; + stroke-width: 3px; +} + +.chessW .chess-path-A { + opacity:1; + fill:#ffe4aa; + 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; +} + +.chessB .chess-path-A { + opacity:1; + fill:#400827; + 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; +} + +.chessW .chess-path-B { + opacity:1; + fill:#ffe4aa; + 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; +} + +.chessB .chess-path-B { + opacity:1; + fill: #400827; + 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; +} + +.chessW .chess-path-Bx { + opacity:1; + fill:#ffe4aa; + 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; +} + +.chessB .chess-path-Bx { + opacity:1; + fill: #ffe4aa; + 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; +} + +.chessW .chess-path-C { + opacity:1; + fill:#400827; + fill-opacity:1; + stroke:#260314; + stroke-width:1.5; + stroke-linecap:round; + stroke-linejoin:round; + stroke-miterlimit:4; + stroke-dasharray:none; + stroke-opacity:1; +} + +.chessB .chess-path-C { + opacity:1; + fill:#ffe4aa; + fill-opacity:1; + stroke:#ffe4aa; + stroke-width:1.5; + stroke-linecap:round; + stroke-linejoin:round; + stroke-miterlimit:4; + stroke-dasharray:none; + stroke-opacity:1; +} + +.chessW .chess-path-D { + fill: #ffe4aa; + fill-opacity: 0.75; + fill-rule:evenodd; + stroke: #260314; + stroke-width:1; + stroke-linecap:round; + stroke-linejoin:mitter; + stroke-miterlimit:4; + stroke-dasharray:none; + stroke-opacity:1; +} + +.chessB .chess-path-D { + fill: #400827; + fill-opacity: 0.75; + fill-rule:evenodd; + stroke: #ffe4aa; + stroke-width:1; + stroke-linecap:round; + stroke-linejoin:mitter; + stroke-miterlimit:4; + stroke-dasharray:none; + stroke-opacity:1; +} Deleted: trunk/Toss/WebClient/TossConnect.js =================================================================== --- trunk/Toss/WebClient/TossConnect.js 2010-12-18 00:52:28 UTC (rev 1253) +++ trunk/Toss/WebClient/TossConnect.js 2010-12-18 17:49:52 UTC (rev 1254) @@ -1,219 +0,0 @@ -// JavaScript Toss Module -- Connect (basic Toss Server connection routines) - -var UNAME = ""; - -var MODEL_MAXX = 0.0; -var MODEL_MINX = 0.0; -var MODEL_MAXY = 0.0; -var MODEL_MINY = 0.0; -var MODEL_WIDTH = 0.0; -var MODEL_HEIGHT = 0.0; -var SVG_WIDTH = 500; -var SVG_HEIGHT = 500; -var SVG_MARGINX = 50; -var SVG_MARGINY = 50; -var VIEW_WIDTH = "19em"; -var VIEW_HEIGHT = "19em"; -var VIEW_MIRROR = 0; - -var GAME_NAME = ""; // name of current game, e.g. "Breakthrough" -var ELEMS = []; // used to store the list of elements -var ELEM_POS = {}; // positions of elements -var RELS = []; // relations -var SUGGESTED_ELEM_SIZEX = 25; // suggested size of elements -var SUGGESTED_ELEM_SIZEY = 25; // suggested size of elements - -var CACHED_MOVES = "" - -var DIM_STR = "" -var ELEM_STR = "" -var RELS_STR = "" -var MOVES_STR = "" - - -// Helper function: sign of a number. -function sign (x) { - if (x > 0.01) { return (1); } - else if (x < -0.01) { return (-1); } - else { return (0); } -} - -// Clears cached moves. -function clear_move_cache () { - CACHED_MOVES = ""; -} - -function set_info (info) { - var res_arr = []; - res_arr = info.split("$"); - if (res_arr.length != 4) { return (false); } - DIM_STR = res_arr[0]; - ELEM_STR = res_arr[1]; - RELS_STR = res_arr[2]; - MOVES_STR = res_arr[3]; - var dim = strip('(', ')', DIM_STR).split(','); - MODEL_MAXX = parseFloat(strip(' ', ' ', dim[0])); - MODEL_MINX = parseFloat(strip(' ', ' ', dim[1])); - MODEL_MAXY = parseFloat(strip(' ', ' ', dim[2])); - MODEL_MINY = parseFloat(strip(' ', ' ', dim[3])); - MODEL_WIDTH = Math.max (SVG_WIDTH / 100, (MODEL_MAXX - MODEL_MINX)); - MODEL_HEIGHT = Math.max (SVG_HEIGHT / 100, (MODEL_MAXY - MODEL_MINY)); - - return (true); -} - -// Send [msg] to server and return response text. -function sync_server_msg (msg) { - var xml_request = new XMLHttpRequest (); - xml_request.open ('POST', 'TossHandler.py', false); - xml_request.setRequestHeader ('Content-Type', - 'application/x-www-form-urlencoded; charset=UTF-8'); - xml_request.send (msg); - resp = xml_request.responseText; - if (resp.indexOf ("MOD_PYTHON ERROR") > -1) { - alert (resp.substring(resp.indexOf("Traceback"))); - return (""); - } - return (resp) -} - -// Simple encryption -function crypt (s) { - var c = Crypto.SHA256(s, true); - var d = c.replace("#", "$"); - return (d.replace(" ", "$")); -} - -// Send [msg] to server attaching prefix '[cmd]#' and return response text. -function srv (cmd, msg) { - return (sync_server_msg (cmd + '#' + msg)); -} - -// Strip [c1] and [c2] from beginning and end of [str]. -function strip (c1, c2, str) { - if (str.length == 0) return (str); - var i = 0; var j = 0; - for (i = 0; i < str.length; i++) { - if (str.charAt(i) != c1 && str.charAt(i) != c2) break; - } - for (j = str.length - 1; j > -1; j--) { - if (str.charAt(j) != c1 && str.charAt(j) != c2) break; - } - if (i > j) { return ("") }; - return (str.substring(i, j+1)); -} - -// Convert a string [str] representing python list to array and return it. -// WARNING: we use [sep] as separator, it must not occur in list elements! -funct... [truncated message content] |
From: <luk...@us...> - 2010-12-19 00:33:50
|
Revision: 1255 http://toss.svn.sourceforge.net/toss/?rev=1255&view=rev Author: lukaszkaiser Date: 2010-12-19 00:33:43 +0000 (Sun, 19 Dec 2010) Log Message: ----------- WebClient work. Modified Paths: -------------- trunk/Toss/WebClient/Handler.py trunk/Toss/WebClient/Login.js trunk/Toss/WebClient/Main.js trunk/Toss/WebClient/README trunk/Toss/WebClient/Style.css trunk/Toss/WebClient/index.html trunk/Toss/WebClient/make_db.py trunk/Toss/WebClient/register.html Added Paths: ----------- trunk/Toss/WebClient/profile.html Modified: trunk/Toss/WebClient/Handler.py =================================================================== --- trunk/Toss/WebClient/Handler.py 2010-12-18 17:49:52 UTC (rev 1254) +++ trunk/Toss/WebClient/Handler.py 2010-12-19 00:33:43 UTC (rev 1255) @@ -76,6 +76,10 @@ str(pid) + "_" + str(move)) return (str([play_name (p) for p in plays])) +def list_friends (db, uid): + friends = get_all_from_db (db, "friends", "id='"+ uid + "'") + return (str([str(f) for (_, f) in friends])) + def db_cur_insert (db, game, p1, p2, pid, move, toss, info, svg_str): db.execute ("insert into cur_states(playid, game, player1, player2, move, toss, info, svg) values (?, ?, ?, ?, ?, ?, ?, ?)", (pid, game, p1, p2, move, toss, info, svg_str)) @@ -151,13 +155,17 @@ if (pwd1 != pwd2): return "" return (uid) -def login_user (db, req, uid, pwd): +def login_user (db, req, uid, chk, pwd): db_pwd = passwd_from_db (db, uid) if not db_pwd: return ("no such user registered") if (pwd != db_pwd): return ("wrong password") - t = time.time() + 3600; - cookie1 = Cookie.Cookie(TUID + 'username', uid, expires=t) - cookie2 = Cookie.Cookie(TUID + 'passphrase', pwd, expires=t) + t = time.time() + 3600000; + if chk == "false": + cookie1 = Cookie.Cookie(TUID + 'username', uid) + cookie2 = Cookie.Cookie(TUID + 'passphrase', pwd) + else: + cookie1 = Cookie.Cookie(TUID + 'username', uid, expires=t) + cookie2 = Cookie.Cookie(TUID + 'passphrase', pwd, expires=t) Cookie.add_cookie(req, cookie1) Cookie.add_cookie(req, cookie2) return ("OK") @@ -171,6 +179,45 @@ db.commit () return (True) +def add_opponent (db, uid, oppid): + if uid == "": return ("You must login first to add opponents.") + if get_user_name (db, oppid) == "": + return ("No such opponent found among tPlay users.") + db.execute ("insert into friends(id, fid) values (?, ?)", (uid, oppid)) + db.commit () + return ("OK") + +def get_user_name (db, uname): + res = get_all_from_db (db, "users", "id='" + uname + "'") + if len(res) > 1: raise Exception ("db", "many entries for " + uname) + if len(res) == 0: return ("") + (_, name, _, _, _) = res[0] + return (name) + +def get_user_surname (db, uname): + res = get_all_from_db (db, "users", "id='" + uname + "'") + if len(res) > 1: raise Exception ("db", "many entries for " + uname) + if len(res) == 0: return ("") + (_, _, surname, _, _) = res[0] + return (surname) + +def get_user_mail (db, uname): + res = get_all_from_db (db, "users", "id='" + uname + "'") + if len(res) > 1: raise Exception ("db", "many entries for " + uname) + if len(res) == 0: return ("") + (_, _, _, email, _) = res[0] + return (email) + +def change_user_data (db, uid, udata): + if uid == "": return ("You must login first to change data.") + if len(udata) != 3: return ("Internal error, data not changed.") + uid_s = "id='" + uid + "'" + db.execute ("update users set name='" + udata[0] + "' where " + uid_s) + db.execute ("update users set surname='" + udata[1] + "' where " + uid_s) + db.execute ("update users set email='" + udata[2] + "' where " + uid_s) + db.commit () + return ("OK") + def get_free_id (db): fid = 0 for f in db.execute ("select count(*) from cur_states"): @@ -196,22 +243,44 @@ "\nPlease choose another username and try again.") return apache.OK if cmd == "LOGIN": - uname, sep, pwd = data.partition(' ') - res = login_user (db, req, uname, pwd) - if res == "OK": - req.write("OK") - return apache.OK - req.write("Login failed for " + uname + ": " + res) + ui = data.split("$") + res = "internal error" + if len(ui) == 3: + res = login_user (db, req, ui[0], ui[1], ui[2]) + if res == "OK": + req.write("OK") + return apache.OK + req.write("Login failed for " + ui[0] + ": " + res) return apache.OK if cmd == "LOGOUT": - cookie = Cookie.Cookie(TUID + 'passphrase', "a") - cookie = Cookie.Cookie(TUID + 'username', "a") - Cookie.add_cookie(req, cookie) - req.write ("user logged out: " + usr + ".") + cookie1 = Cookie.Cookie(TUID + 'passphrase', "a") + cookie2 = Cookie.Cookie(TUID + 'username', "a") + Cookie.add_cookie(req, cookie1) + Cookie.add_cookie(req, cookie2) + req.write ("User logged out: " + usr + ".") return apache.OK if cmd == "FREEID": req.write(str(get_free_id (db))) return apache.OK + if cmd == "ADDOPP": + req.write(str(add_opponent (db, usr, data))) + return apache.OK + if cmd == "GET_NAME": + req.write(str(get_user_name (db, data))) + return apache.OK + if cmd == "GET_SURNAME": + req.write(str(get_user_surname (db, data))) + return apache.OK + if cmd == "LIST_FRIENDS": + req.write(str(list_friends (db, usr))) + return apache.OK + if cmd == "GET_MAIL": + if usr == "": return ("You must login first to get email data.") + req.write(str(get_user_mail (db, data))) + return apache.OK + if cmd == "CHANGEUSR": + req.write(str(change_user_data (db, usr, data.split("$")))) + return apache.OK if (cmd == "LIST_PLAYS") or (cmd == "OPEN_DB") or (cmd == "UPD_SVG"): res = eval (cmd.lower() + "(db, " + data + ")") req.write(str(res)) Modified: trunk/Toss/WebClient/Login.js =================================================================== --- trunk/Toss/WebClient/Login.js 2010-12-18 17:49:52 UTC (rev 1254) +++ trunk/Toss/WebClient/Login.js 2010-12-19 00:33:43 UTC (rev 1255) @@ -14,7 +14,7 @@ // Setup a user function setup_user (un) { UNAME = un - document.getElementById("topuser").innerHTML = "Welcome " + un; + document.getElementById("topuser").innerHTML = "Welcome " + disp_name(un); document.getElementById("loginform").style.display = "none"; document.getElementById("topright-register").style.display = "none"; document.getElementById("topright").style.display = "inline"; @@ -25,6 +25,7 @@ list_plays ("Entanglement"); list_plays ("Gomoku"); list_plays ("Tic-Tac-Toe"); + get_opponents (); } // Clear view @@ -49,13 +50,40 @@ } } +// Onload handler for the profile page +function startup_profile () { + var un = srv("USERNAME", "user"); + if (un != "") { + UNAME = un + document.getElementById("topuser").innerHTML = + "Welcome " + disp_name(un); + document.getElementById("loginform").style.display = "none"; + document.getElementById("topright-register").style.display = "none"; + document.getElementById("topright").style.display = "inline"; + document.getElementById("welcome").style.display = "none"; + document.getElementById("main-profile").style.display = "block"; + document.getElementById('name').value = srv("GET_NAME", un); + document.getElementById('surname').value = srv("GET_SURNAME", un); + document.getElementById('email').value = srv("GET_MAIL", un); + get_opponents (); + var o = document.getElementById("opponents-list"); + for (var i = 0; i < FRIENDS.length; i++) { + var li = document.createElement('li'); + li.innerHTML = disp_name(FRIENDS[i]) + " (" + FRIENDS[i] + ")"; + o.appendChild (li); + } + }; +} + // Login function login () { un = document.getElementById('username').value; pwd = document.getElementById('password').value; - resp = sync_server_msg ("LOGIN#" + un + " " + crypt(TSALT + pwd)); + chk = "false"; + if (document.getElementById('remember').checked) { chk = "true" }; + resp = sync_server_msg ("LOGIN#" + un +"$"+ chk +"$"+ crypt(TSALT + pwd)); if (resp == "OK") { - setup_user (un) + window.location.reload () } else { alert (resp) } @@ -64,8 +92,21 @@ // Logout function logout () { clear_view (); + resp = sync_server_msg ("LOGOUT#user"); + return; } +function logout_profile () { + document.getElementById("loginform").style.display = "inline"; + document.getElementById("topright-register").style.display = "inline"; + document.getElementById("topright").style.display = "none"; + document.getElementById("topuser").innerHTML = ""; + document.getElementById("main-profile").style.display = "none"; + document.getElementById("welcome").style.display = "block"; + resp = sync_server_msg ("LOGOUT#user"); + return; +} + // Register new user function register () { un = document.getElementById('username').value; @@ -111,3 +152,38 @@ resp = sync_server_msg ("REGISTER#" + data + "$" + crypt(TSALT + pwd)); alert (resp); } + +// Change user data +function change_profile () { + name = document.getElementById('name').value; + surname = document.getElementById('surname').value; + email = document.getElementById('email').value; + if (name == "") { + alert ("Your name was not given and it is necessary." + CORRMSG); + return; + } + if (surname == "") { + alert ("Your surname was not given and it is necessary." + CORRMSG); + return; + } + if (email.indexOf("@") < 1 || email.indexOf(".") < 1) { + alert ("Please provide a valid email address."); + return; + } + if (name.indexOf ("$") > 0 || surname.indexOf ("$") > 0 || + email.indexOf ("$") > 0) { + alert ("Your data must not contain $, i.e. the dolar sign." + CORRMSG); + return; + } + resp = sync_server_msg ("CHANGEUSR#" + name + "$" + surname + "$" + email); + if (resp != "OK") { alert(resp); } + window.location.reload (); +} + +// Add opponent for the current user. +function add_opponent () { + oppuname = document.getElementById('oppuname').value; + resp = sync_server_msg ("ADDOPP#" + oppuname); + if (resp != "OK") { alert(resp); } + window.location.reload (); +} \ No newline at end of file Modified: trunk/Toss/WebClient/Main.js =================================================================== --- trunk/Toss/WebClient/Main.js 2010-12-18 17:49:52 UTC (rev 1254) +++ trunk/Toss/WebClient/Main.js 2010-12-19 00:33:43 UTC (rev 1255) @@ -8,6 +8,7 @@ var CUR_PLAY_I = -1; var FRIENDS = [] +var UNAME_TO_NAME_MAP = {} var MAX_OPNT_LEN = 20; var FULL_OPNT_LEN = 0; @@ -114,15 +115,23 @@ PLAYS[i][1] + "', '" + PLAYS[i][2] + "', '" + PLAYS[i][3] + "'") } +function disp_name (uname) { + if (UNAME_TO_NAME_MAP[uname]) { return (UNAME_TO_NAME_MAP[uname]); } + name = srv ("GET_NAME", uname); + UNAME_TO_NAME_MAP[uname] = name; + return (name); +} + function new_play_item (game, i) { var li = document.createElement('li'); li.setAttribute ("class", "plays-list-elem"); li.setAttribute ("id", "plays-list-" + game + "-elem-" + i); var p = PLAYS[i][2]; - li.innerHTML = "" + PLAYS[i][2] + ': ' + PLAYS[i][0] + " vs " + - PLAYS[i][1] + " " + //" move " + PLAYS[i][3] + " "+ - '<a title="Open" href="#" onclick="'+ "play_click('"+ game + "', " + p + - ", " + i + ')">Open</a>'; + var bs = '<button class="bt" title="Open" onclick="'+ "play_click('" + + game + "', " + p + ", " + i + ')">Open</button> '; + li.innerHTML = bs + disp_name(PLAYS[i][0]) +" vs " + + disp_name(PLAYS[i][1])+ " (game " + PLAYS[i][2] + ')' + // +'<a href="#" onclick="'+ "del_play('"+ fn + "')" + '">Delete</a>'; return (li); } @@ -169,7 +178,7 @@ CUR_PLAY_I = pi; VIEW_MIRROR = (PLAYS[CUR_PLAY_I][0] == UNAME) ? 0 : 1; document.getElementById("cur-player").innerHTML = - PLAYS[CUR_PLAY_I][PLAYS[CUR_PLAY_I][3] % 2]; + disp_name(PLAYS[CUR_PLAY_I][PLAYS[CUR_PLAY_I][3] % 2]); toss_open_db (play_py_id(pi)); full_redraw (); } @@ -190,7 +199,7 @@ CUR_ELEMS = []; ELEM_COUNTERS = {}; document.getElementById("cur-player").innerHTML = - PLAYS[CUR_PLAY_I][(m + 1) % 2]; + disp_name(PLAYS[CUR_PLAY_I][(m + 1) % 2]); document.getElementById('cur-move').innerHTML = "none"; full_redraw (); PLAYS[CUR_PLAY_I][3] = parseInt(PLAYS[CUR_PLAY_I][3]) + 1; @@ -205,19 +214,13 @@ alert ("Deleting " + play); } -function store_friend_names () { - for (var i = 0; i < FRIENDS.length; i++) { - ID_TO_USER_MAP[FRIENDS[i].id] = FRIENDS[i].name; - ID_TO_USER_FNAME_MAP[FRIENDS[i].id] = FRIENDS[i].first_name; - } -} - -function opponent_item (data, index) { +function opponent_item (uid, index) { var li = document.createElement('li'); li.setAttribute ("class", "opponents-list-elem"); - li.setAttribute ("id", "opponent-" + data.id + "-" + index); - li.innerHTML = '<a href="#" onclick="new_play_do(' + data.id + ')">' + - data.name + '</a>'; + li.setAttribute ("id", "opponent-" + uid); // + "-" + index + li.innerHTML = + '<button class="dbt" onclick="new_play_do(' + "'" + uid + "'" + ')">' + + disp_name(uid) + ' (' + uid + ') </button>'; return (li); } @@ -238,7 +241,8 @@ var zeroli = document.createElement('li'); zeroli.setAttribute ("class", "opponents-list-elem"); zeroli.setAttribute ("id", "opponent-" + "-0"); - zeroli.innerHTML = '<a href="#" onclick="new_play_do(-1)">Play against Yourself</a>'; + zeroli.innerHTML = '<button class="dbt" onclick="new_play_do(-1)">' + + 'Play against Yourself</button>'; o.appendChild (zeroli); for (var i = 0; i < FRIENDS.length; i++) { var oi = opponent_item (FRIENDS[i], i+1); @@ -306,7 +310,7 @@ document.getElementById("play-number").innerHTML = "" + FREE_PLAY_NO; CUR_PLAY_I = PLAYS.length; VIEW_MIRROR = 0; - document.getElementById("cur-player").innerHTML = UNAME; + document.getElementById("cur-player").innerHTML = disp_name(UNAME); document.getElementById("game-disp").style.display = "block"; document.getElementById("plays").style.left = "30em"; var p = [UNAME, opp_uid, FREE_PLAY_NO, 0]; @@ -319,3 +323,8 @@ li = new_play_item (GAME_NAME, CUR_PLAY_I); document.getElementById("plays-list-" + GAME_NAME).appendChild(li); } + +function get_opponents () { + var lst = srv ("LIST_FRIENDS", "user"); + FRIENDS = convert_python_list (',', lst); +} \ No newline at end of file Modified: trunk/Toss/WebClient/README =================================================================== --- trunk/Toss/WebClient/README 2010-12-18 17:49:52 UTC (rev 1254) +++ trunk/Toss/WebClient/README 2010-12-19 00:33:43 UTC (rev 1255) @@ -19,8 +19,8 @@ TODO: - - use name in interface, try buttons, add oponents table and adding page - move interface: first click all, second click toggle, if one - confirm msg + - move suggestions and play against computer - after the above: remove left-of-board div, confirm in the middle - after the above: show game result in the middle / instead of move - sort plays by who's turn it is Modified: trunk/Toss/WebClient/Style.css =================================================================== --- trunk/Toss/WebClient/Style.css 2010-12-18 17:49:52 UTC (rev 1254) +++ trunk/Toss/WebClient/Style.css 2010-12-19 00:33:43 UTC (rev 1255) @@ -11,12 +11,146 @@ height: 100%; } +.bt { + border-color: #260314; + border-radius: 4px; + border-width: 1px; + color: #260314; + background-color: #ffe4aa; + font-size: 0.9em; + font-family: Verdana, 'TeXGyreHerosRegular', sans; +} + +.bt:hover { + cursor: pointer; + text-decoration: underline; +} + +#plays .bt { + width: 7em; + position: absolute; + right: 0px; +} + +.dbt { + border-color: #ffe4aa; + border-radius: 4px; + border-width: 0px; + color: #ffe4aa; + background-color: #400827; + font-size: 0.9em; + font-family: Verdana, 'TeXGyreHerosRegular', sans; +} + +.dbt:hover { + cursor: pointer; + text-decoration: underline; +} + .reglabel { float: left; clear: left; - width: 10em; + width: 12em; + margin-top: 0.3em; } +.loginsmall { + position: relative; + top: 1px; + font-size: 0.6em; + margin: 0px; + padding: 0px; +} + +.loginchk { + font-size: 0.6em; + margin: 0px; + padding: 0px; +} + +.loginput { + border-color: #ffe4aa; + border-radius: 4px; + border-width: 1px; + position: relative; + top: 2px; +} + +.forminput { + border-color: #ffe4aa; + border-radius: 4px; + border-width: 2px; + position: relative; + top: 2px; +} + +#remember { + margin: 0px; + padding: 0px; + position: absolute; + top: -2px; + left: -1em; +} + +#rememberspan { + margin: 0px; + padding: 0px; + position: relative; + top: -2px; +} + +#loginbt { + position: relative; + top: -2px; + font-weight: bold; + font-family: Verdana, 'TeXGyreHerosRegular', sans; + color: #400827; + background-color: #ffffff; + border-color: #ffe4aa; + border-radius: 4px; + border-width: 1px; +} + +#loginbt:hover { + cursor: pointer; +} + +#logoutbt { + position: relative; + top: -0.2em; + font-family: Verdana, 'TeXGyreHerosRegular', sans; + font-size: 1em; + font-weight: bold; + color: #ffe4aa; + background-color: #400827; + border-color: #ffe4aa; + border-radius: 4px; + border-width: 0px; +} + +#logoutbt:hover { + cursor: pointer; + color: #b5bf8f; +} + +#login1 { + position: absolute; + top: 0px; + left: 10em; +} + +#login2 { + position: absolute; + top: 0px; + left: 20em; +} + +#login3 { + position: absolute; + top: 0.3em; + left: 30em; +} + #logo { font-size: 2em; float: left; @@ -25,13 +159,13 @@ padding-left: 0.25em; } -#logo a, #logo a:link, #logo a:active, #logo a:visited { +#top a, #logo a:link, #logo a:active, #logo a:visited { color: #ffe4aa; background-color: transparent; text-decoration: none; } -#logo a:hover { +#top a:hover { color: #b5bf8f; } @@ -62,13 +196,17 @@ } #topright { - float: right; + position: absolute; + top: 0.7em; + right: 1em; margin-right: 0em; display: none; } #topright-register { - float: right; + position: absolute; + top: 0.7em; + right: 1em; margin-right: 0em; } @@ -136,19 +274,19 @@ #main a, #main a:link, #main a:active, #main a:visited { color: #260314; - text-decoration: underline; + text-decoration: none; } #main a:hover { color: #400827; - text-decoration: none; + text-decoration: underline; } #opponents { display: none; position: absolute; - left: 19em; + left: 6em; top: 3.5em; min-width: 20em; color: #ffe4aa; @@ -159,16 +297,6 @@ z-index: 10; } -#opponents a, #opponents a:link, #opponents a:active, #opponents a:visited { - color: #ffe4aa; - text-decoration: none; - font-weight: bold; -} - -#opponents a:hover { - color: #b5bf8f; -} - #opponents-list { list-style: square; margin-top: 0.5em; @@ -178,6 +306,28 @@ /* margin-left: -1em; */ } +#opponents-cancel { + position: absolute; + right: 1em; + top: 1em; + width: 5em; +} + +#opponents-add { + position: absolute; + right: 6.5em; + top: 1.2em; + width: 6em; + border-color: #260314; + border-radius: 4px; + border-width: 1px; + color: #260314; + background-color: #ffe4aa; + font-weight: normal; + text-align: center; + font-size: 0.9em; +} + #opponents-next { position: absolute; right: 1em; @@ -289,18 +439,29 @@ padding-left: 0em; } +.game-par { + padding-top: 2px; + border-top: 2px solid #260314; +} + #plays { + position: absolute; + top: 3em; + left: 3em; + width: 30em; display: none; - padding-left: 1em; } -#plays-list { +.plays-list { + margin-left: 1em; + padding-left: 0px; list-style: none; margin-top: 0.25em; } .plays-list-elem { - margin-left: -1.5em; + margin-left: 0em; + margin-bottom: 0.5em; } .plays-list-elem a { Modified: trunk/Toss/WebClient/index.html =================================================================== --- trunk/Toss/WebClient/index.html 2010-12-18 17:49:52 UTC (rev 1254) +++ trunk/Toss/WebClient/index.html 2010-12-19 00:33:43 UTC (rev 1255) @@ -20,15 +20,30 @@ <div id="topbar"> <span id="topuser"></span> <form id="loginform" style="display: inline;"> -Username: <input type="text" name="username" id="username" /> - -Password: <input type="password" name="password" id="password" - onkeypress="if (window.event && window.event.keyCode == 13) { login () }" /> - -<a id="login" href="#" onclick="login()">Login</a> +<div id="login1"> + <p class="loginsmall">Username:</p> +<input class="loginput" type="text" name="username" id="username" size="15" /> +</div> +<div id="login2"> + <p class="loginsmall">Password:</p> +<input class="loginput" type="password" name="password" id="password" size="15" + onkeypress="if (window.event && window.event.keyCode == 13) { login() }" + /> +</div> +<div id="login3"> + <p class="loginchk"> + <input type="checkbox" id="remember" value="r" + checked="yes"><span id="rememberspan">Remember me</span> + </input> + </p> + <button type="button" id="loginbt" onclick="login()"> + <span id="loginspan">Login</span> + </button> +</div> </form> +</div> <span id="topright"> - <a id="logout" href="#" onclick="logout()">Logout</a> + <button id="logoutbt" onclick="logout()">Logout</button> </span> <span id="topright-register"> <a href="register.html">Register</a> @@ -39,13 +54,19 @@ <div id="main"> <div id="opponents"> - Pick Opponent: (<a href="#" onclick="new_play_do(0)">Cancel</a>) + Pick Opponent: + <a id="opponents-add" href="profile.html" target="_blank" + onclick="window.location.reload()">Find New</a> + <button class="bt" id="opponents-cancel" + onclick="window.location.reload()">Cancel</button> <ul id="opponents-list"></ul> - <a href="#" id="opponents-prev" onclick="opponents_prev()">Prev</a> - <a href="#" id="opponents-next" onclick="opponents_next()">Next</a> + <button class="bt" id="opponents-prev" + onclick="opponents_prev()">Prev</button> + <button class="bt" id="opponents-next" + onclick="opponents_next()">Next</button> </div> -<div id="welcome" class="hyphenate"> +<div id="welcome"> <p id="welcome-top">Enjoy games on <span class="logo-in">tPlay</span></p> <p class="short"> Strategic games are fun! @@ -53,7 +74,7 @@ <span class="logo-in">tPlay</span>!</p> </div> -<div id="nosvg" class="hyphenate short" +<div id="nosvg" style="border: 1px solid #260314; padding-left: 1em; display: none;"> <p style="padding-left: 1.2em; font-size: 1.2em;"<b>SVG Support Missing</b></p> <p>Your browser does not seem to support SVG, @@ -75,35 +96,35 @@ <div id="game-title"></div> <div id="plays"> - <p> + <p class="game-par"> + <button class="bt" onclick="new_play ('Breakthrough')">New Game</button> <a href="http://en.wikipedia.org/wiki/Breakthrough_(board_game)" class="game_list">Breakthrough</a> - (<a href="#" onclick="new_play ('Breakthrough')">New Game</a>) </p> - <ul id="plays-list-Breakthrough"></ul> - <p> + <ul class="plays-list" id="plays-list-Breakthrough"></ul> + <p class="game-par"> + <button class="bt" onclick="new_play ('Chess')">New Game</button> <a class="game_list" href="http://en.wikipedia.org/wiki/Chess">Chess</a> - (<a href="#" onclick="new_play ('Chess')">New Game</a>) </p> - <ul id="plays-list-Chess"></ul> - <p> + <ul class="plays-list" id="plays-list-Chess"></ul> + <p class="game-par"> + <button class="bt" onclick="new_play ('Entanglement')">New Game</button> <a href="http://en.wikipedia.org/wiki/Entanglement_(graph_measure)" class="game_list">Entanglement</a> - (<a href="#" onclick="new_play ('Entanglement')">New Game</a>) </p> - <ul id="plays-list-Entanglement"></ul> - <p> + <ul class="plays-list" id="plays-list-Entanglement"></ul> + <p class="game-par"> + <button class="bt" onclick="new_play ('Gomoku')">New Game</button> <a href="http://en.wikipedia.org/wiki/Gomoku" class="game_list">Gomoku</a> - (<a href="#" onclick="new_play ('Gomoku')">New Game</a>) </p> - <ul id="plays-list-Gomoku"></ul> - <p> + <ul class="plays-list" id="plays-list-Gomoku"></ul> + <p class="game-par"> + <button class="bt" onclick="new_play ('Tic-Tac-Toe')">New Game</button> <a href="http://en.wikipedia.org/wiki/Tic-tac-toe" class="game_list">Tic-Tac-Toe</a> - (<a href="#" onclick="new_play ('Tic-Tac-Toe')">New Game</a>) </p> - <ul id="plays-list-Tic-Tac-Toe"></ul> + <ul class="plays-list" id="plays-list-Tic-Tac-Toe"></ul> </div> @@ -117,7 +138,7 @@ Chosen move:<br/> <div id="cur-move">none</div> <div id="mk-move"> - <a href="#" onclick="make_move ()">Make move</a> + <button class="bt" onclick="make_move ()">Make move</button> </div> </div> <div id="board"><div id="working">Working...</div></div> Modified: trunk/Toss/WebClient/make_db.py =================================================================== --- trunk/Toss/WebClient/make_db.py 2010-12-18 17:49:52 UTC (rev 1254) +++ trunk/Toss/WebClient/make_db.py 2010-12-19 00:33:43 UTC (rev 1255) @@ -14,6 +14,7 @@ conn.execute("create table games(game string primary key, toss string)") conn.execute("create table ports(port int primary key, locked bool)") conn.execute("create table lock(tid int primary key, locked bool)") +conn.execute("create table friends(id string, fid string)") conn.commit () conn.execute ("insert into lock(tid, locked) values (?, ?)", Added: trunk/Toss/WebClient/profile.html =================================================================== --- trunk/Toss/WebClient/profile.html (rev 0) +++ trunk/Toss/WebClient/profile.html 2010-12-19 00:33:43 UTC (rev 1255) @@ -0,0 +1,101 @@ +<!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 — Profile</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="crypto-sha256.js"> </script> + <script type="text/javascript" src="Connect.js"> </script> + <script type="text/javascript" src="DefaultStyle.js"> </script> + <script type="text/javascript" src="Main.js"> </script> + <script type="text/javascript" src="Login.js"> </script> +</head> + +<body onload="startup_profile()"> +<div id="top"> +<div id="logo"><a href="index.html">tPlay</a></div> +<div id="topbar"> +<span id="topuser"></span> +<form id="loginform" style="display: inline;"> +<div id="login1"> + <p class="loginsmall">Username:</p> +<input class="loginput" type="text" name="username" id="username" size="15" /> +</div> +<div id="login2"> + <p class="loginsmall">Password:</p> +<input class="loginput" type="password" name="password" id="password" size="15" + onkeypress="if (window.event && window.event.keyCode == 13) { login() }" + /> +</div> +<div id="login3"> + <p class="loginchk"> + <input type="checkbox" id="remember" value="r" + checked="yes"><span id="rememberspan">Remember me</span> + </input> + </p> + <button type="button" id="loginbt" onclick="login()"> + <span id="loginspan">Login</span> + </button> +</div> +</form> +</div> +<span id="topright"> + <button id="logoutbt" onclick="logout_profile()">Logout</button> +</span> +<span id="topright-register"> + <a href="register.html">Register</a> +</span> +</div> +</div> + +<div id="main"> + +<div id="welcome"> +<p id="welcome-top">To edit your <span class="logo-in">tPlay</span> + profile please login above or <a href="register.html">register</a> first. +</p> +</div> + +<div id="main-profile" style="display: none;"> +<h2>Your Profile</h2> + +<form id="changeprofileform"> +<p> <span class="reglabel">Name:</span> + <input class="forminput" type="text" name="name" id="name" /> +</p> +<p> <span class="reglabel">Surname:</span> + <input class="forminput" type="text" name="surname" id="surname" /> +</p> +<p> <span class="reglabel">Email:</span> + <input class="forminput" type="text" name="email" id="email" /> +</p> +<button class="bt" id="changebt" type="button" + onclick="change_profile()">Change</button> +</form> + +<h2>Your Opponents</h2> + +<div id="opponents-profile"> + <ul id="opponents-list"></ul> +</div> + +<form id="opponentsform"> +<p> <span class="reglabel">Opponent Username:</span> + <input class="forminput" type="text" name="oppuname" id="oppuname" /> +</p> +<button class="bt" id="oppaddbt" type="button" + onclick="add_opponent()">Add Opponent</button> +</form> +</div> + +</div> + +<div id="bottom"> +<div style="margin-right: 0em; display: none;">Disclaimer</div> +</div> + +</body> +</html> Modified: trunk/Toss/WebClient/register.html =================================================================== --- trunk/Toss/WebClient/register.html 2010-12-18 17:49:52 UTC (rev 1254) +++ trunk/Toss/WebClient/register.html 2010-12-19 00:33:43 UTC (rev 1255) @@ -12,7 +12,7 @@ <script type="text/javascript" src="Login.js"> </script> </head> -<body"> +<body> <div id="top"> <div id="logo"><a href="index.html">tPlay</a></div> </div> @@ -23,23 +23,24 @@ <form id="registerform"> <p> <span class="reglabel">Username:</span> - <input type="text" name="username" id="username" /> </p> + <input class="forminput" type="text" name="username" id="username" /> </p> <p> <span class="reglabel">Password:</span> - <input type="password" name="password" id="password" /> + <input class="forminput" type="password" name="password" id="password" /> </p> <p> <span class="reglabel">Repeat Password:</span> - <input type="password" name="rptpassword" id="rptpassword" /> + <input class="forminput" type="password" name="rptpassword" + id="rptpassword" /> </p> <p> <span class="reglabel">Name:</span> - <input type="text" name="name" id="name" /> + <input class="forminput" type="text" name="name" id="name" /> </p> <p> <span class="reglabel">Surname:</span> - <input type="text" name="surname" id="surname" /> + <input class="forminput" type="text" name="surname" id="surname" /> </p> <p> <span class="reglabel">Email:</span> - <input type="text" name="email" id="email" /> + <input class="forminput" type="text" name="email" id="email" /> </p> -<button id="registerbt" type="button" onclick="register()">Register</button> +<button class="bt" id="registerbt" type="button" onclick="register()">Register</button> </form> </div> This was sent by the SourceForge.net collaborative development platform, the world's largest Open Source development site. |
From: <luk...@us...> - 2010-12-19 12:26:28
|
Revision: 1259 http://toss.svn.sourceforge.net/toss/?rev=1259&view=rev Author: lukaszkaiser Date: 2010-12-19 12:26:22 +0000 (Sun, 19 Dec 2010) Log Message: ----------- Bugfix for a concurrency problem in db, other small corrections. Modified Paths: -------------- trunk/Toss/WebClient/Connect.js trunk/Toss/WebClient/Handler.py trunk/Toss/WebClient/Main.js trunk/Toss/WebClient/README trunk/Toss/WebClient/Style.css trunk/Toss/WebClient/index.html Modified: trunk/Toss/WebClient/Connect.js =================================================================== --- trunk/Toss/WebClient/Connect.js 2010-12-19 01:18:01 UTC (rev 1258) +++ trunk/Toss/WebClient/Connect.js 2010-12-19 12:26:22 UTC (rev 1259) @@ -12,8 +12,8 @@ var SVG_HEIGHT = 500; var SVG_MARGINX = 50; var SVG_MARGINY = 50; -var VIEW_WIDTH = "19em"; -var VIEW_HEIGHT = "19em"; +var VIEW_WIDTH = "20em"; +var VIEW_HEIGHT = "20em"; var VIEW_MIRROR = 0; var GAME_NAME = ""; // name of current game, e.g. "Breakthrough" Modified: trunk/Toss/WebClient/Handler.py =================================================================== --- trunk/Toss/WebClient/Handler.py 2010-12-19 01:18:01 UTC (rev 1258) +++ trunk/Toss/WebClient/Handler.py 2010-12-19 12:26:22 UTC (rev 1259) @@ -97,14 +97,23 @@ moves_s = str(client.cur_moves()) return (dim_s + "$" + model_s + "$" + rels_s + "$" + moves_s) -def new_play (db, client, game, p1, p2, pid, move): +def get_free_id (db): + fid = 0 + for f in db.execute ("select count(*) from cur_states"): + fid = int(f[0]) + return (fid + 1) + +def new_play (db, client, game, p1, p2, move): res = get_all_from_db (db, "games", "game='" + game + "'") (_, toss) = res[0] client.open_from_str (toss) info = get_game_info (client) model = client.get_model () + get_global_lock (db) + pid = get_free_id (db) db_cur_insert (db, game, p1, p2, pid, move, model, info, "") - return (info) + release_global_lock (db) + return (str(pid) + "$" + info) def game_select_s (g, p1, p2, pid, m): return("game='" + g + "' and player1='" + p1 + "' and player2='" + p2 + @@ -116,21 +125,25 @@ (_, _, _, _, _, _, info, _) = res[0] return (info) +def db_escape (s): + return (s.replace("'", "''")) def move_play (db, client, move_tup, g, p1, p2, pid, m): - select_s = game_select_s (g, p1, p2, pid, m) - old_res = get_all_from_db (db, "cur_states", select_s) + sel_s = game_select_s (g, p1, p2, pid, m) + old_res = get_all_from_db (db, "cur_states", sel_s) (_, _, _, _, _, old_toss, old_info, old_svg) = old_res[0] res = get_all_from_db (db, "games", "game='" + g + "'") (_, game_toss) = res[0] client.open_from_str (game_toss + "\n MODEL " + old_toss) (move1, move2, move3) = move_tup client.make_move (move1, move2, move3) - new_toss = client.get_model () + new_toss = db_escape (client.get_model ()) new_info = get_game_info (client) - db.execute ("delete from cur_states where " + select_s) + new_info_db = db_escape (new_info) + db.execute ("update cur_states set toss='" + new_toss + "' where " + sel_s) + db.execute ("update cur_states set info='"+ new_info_db +"' where "+ sel_s) + db.execute ("update cur_states set move=" + str(int(m)+1) +" where "+ sel_s) db_old_insert (db, g, p1, p2, pid, m, old_toss, old_info, old_svg) - db_cur_insert (db, g, p1, p2, pid, int(m) + 1, new_toss, new_info, "") return (new_info) def upd_svg (db, g, p1, p2, pid, m, svg_s): @@ -218,12 +231,6 @@ db.commit () return ("OK") -def get_free_id (db): - fid = 0 - for f in db.execute ("select count(*) from cur_states"): - fid = int(f[0]) - return (fid + 1) - def handler(req): req.content_type = "text/plain" db = sqlite3.connect(DB_FILE) @@ -259,9 +266,6 @@ Cookie.add_cookie(req, cookie2) req.write ("User logged out: " + usr + ".") return apache.OK - if cmd == "FREEID": - req.write(str(get_free_id (db))) - return apache.OK if cmd == "ADDOPP": req.write(str(add_opponent (db, usr, data))) return apache.OK Modified: trunk/Toss/WebClient/Main.js =================================================================== --- trunk/Toss/WebClient/Main.js 2010-12-19 01:18:01 UTC (rev 1258) +++ trunk/Toss/WebClient/Main.js 2010-12-19 12:26:22 UTC (rev 1259) @@ -92,7 +92,7 @@ document.getElementById('cur-move').innerHTML = "none"; } else { document.getElementById('cur-move').innerHTML = - m_rule + ': <br/>' + m_str; + m_rule + ': ' + m_str; } CUR_ELEMS = m_act; CUR_MOVE = m.toString(); @@ -306,7 +306,10 @@ if (opp_uid == -1) { opp_uid = UNAME; } if (opp_uid == 0 || UNAME == "") { return; } document.getElementById("plays-list-" + GAME_NAME).style.display = "block"; - FREE_PLAY_NO = parseInt(srv("FREEID", "play")) + info_nbr = srv ("NEW_PLAY", "c, '" + GAME_NAME + "', '" + UNAME + + "', '" + opp_uid + "', 0"); + info_idx = info_nbr.indexOf('$'); + 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; @@ -315,9 +318,7 @@ document.getElementById("plays").style.left = "30em"; var p = [UNAME, opp_uid, FREE_PLAY_NO, 0]; PLAYS.push(p); - var fn = play_py_id (CUR_PLAY_I); - info = srv ("NEW_PLAY", "c, " + fn); - set_info(info); + set_info(info_nbr.substring(info_idx+1)); full_redraw (); srv ("UPD_SVG", play_py_id(CUR_PLAY_I) + ", " + svg_string()); li = new_play_item (GAME_NAME, CUR_PLAY_I); Modified: trunk/Toss/WebClient/README =================================================================== --- trunk/Toss/WebClient/README 2010-12-19 01:18:01 UTC (rev 1258) +++ trunk/Toss/WebClient/README 2010-12-19 12:26:22 UTC (rev 1259) @@ -21,7 +21,6 @@ TODO: - move interface: first click all, second click toggle, if one - confirm msg - move suggestions and play against computer - - after the above: remove left-of-board div, confirm in the middle - after the above: show game result in the middle / instead of move - sort plays by who's turn it is - option to give up game and offer a draw Modified: trunk/Toss/WebClient/Style.css =================================================================== --- trunk/Toss/WebClient/Style.css 2010-12-19 01:18:01 UTC (rev 1258) +++ trunk/Toss/WebClient/Style.css 2010-12-19 12:26:22 UTC (rev 1259) @@ -14,6 +14,7 @@ .bt { border-color: #260314; border-radius: 4px; + -moz-border-radius: 4px; border-width: 1px; color: #260314; background-color: #ffe4aa; @@ -35,6 +36,7 @@ .dbt { border-color: #ffe4aa; border-radius: 4px; + -moz-border-radius: 4px; border-width: 0px; color: #ffe4aa; background-color: #400827; @@ -71,6 +73,7 @@ .loginput { border-color: #ffe4aa; border-radius: 4px; + -moz-border-radius: 4px; border-width: 1px; position: relative; top: 2px; @@ -79,6 +82,7 @@ .forminput { border-color: #ffe4aa; border-radius: 4px; + -moz-border-radius: 4px; border-width: 2px; position: relative; top: 2px; @@ -108,6 +112,7 @@ background-color: #ffffff; border-color: #ffe4aa; border-radius: 4px; + -moz-border-radius: 4px; border-width: 1px; } @@ -125,6 +130,7 @@ background-color: #400827; border-color: #ffe4aa; border-radius: 4px; + -moz-border-radius: 4px; border-width: 0px; } @@ -320,6 +326,7 @@ width: 6em; border-color: #260314; border-radius: 4px; + -moz-border-radius: 4px; border-width: 1px; color: #260314; background-color: #ffe4aa; @@ -352,24 +359,24 @@ padding-left: 1.25em; } -.short { - max-width: 40em; +#game-disp { + position: relative; + top: -1em; + left: 0em; + width: 30em; + display: none; } -#features-list { - list-style: square; -} - -#game-title { - font-size: 1.2em; +#game-info-par { font-weight: bold; - margin-top: 1em; - margin-bottom: 2em; + margin-bottom: 0px; + margin-top: 0.5em; + padding: 0px; } -#game-disp { - position: relative; - display: none; +#move-info-par { + margin-top: 0.5em; + padding: 0px; } #game-desc { @@ -384,12 +391,10 @@ #board { position: absolute; - left: 9em; - padding-right: 1em; - top: 0px; + left: 0em; + top: 3.5em; width: 20em; - height: 19em; - border-right: 1px solid #260314; + height: 20em; } #working { @@ -418,27 +423,11 @@ padding: 1em; } -#move { - position: absolute; - left: 0px; - top: 0px; -} - -#play-no-div { - padding-bottom: 0.5em; - padding-left: 1em; -} - #cur-move, #cur-player { - padding-left: 1em; - margin-top: 0.5em; - margin-bottom: 0.5em; + margin-top: 0em; + margin-bottom: 0em; } -#mk-move { - padding-left: 0em; -} - .game-par { padding-top: 2px; border-top: 2px solid #260314; Modified: trunk/Toss/WebClient/index.html =================================================================== --- trunk/Toss/WebClient/index.html 2010-12-19 01:18:01 UTC (rev 1258) +++ trunk/Toss/WebClient/index.html 2010-12-19 12:26:22 UTC (rev 1259) @@ -68,7 +68,7 @@ <div id="welcome"> <p id="welcome-top">Enjoy games on <span class="logo-in">tPlay</span></p> -<p class="short"> +<p> Strategic games are fun! <a href="register.html">Register</a>, login and enjoy <span class="logo-in">tPlay</span>!</p> @@ -93,8 +93,6 @@ </ul> </div> -<div id="game-title"></div> - <div id="plays"> <p class="game-par"> <button class="bt" onclick="new_play ('Breakthrough')">New Game</button> @@ -131,16 +129,17 @@ <div id="opening" style="display: none;">Opening may take some time ...</div> <div id="game-disp"> - <div id="move"> - <div id="play-no-div">Game <span id="play-number">?</span></div> - Active player:<br/> - <div id="cur-player"></div> - Chosen move:<br/> - <div id="cur-move">none</div> - <div id="mk-move"> - <button class="bt" onclick="make_move ()">Make move</button> - </div> - </div> + <p id="game-info-par"> + <span id="game-title"></span> + game <span id="play-number">?</span>, + <span id="cur-player"></span> moving + </p> + + <p id="move-info-par"> + <button id="movebt" class="bt" onclick="make_move ()">Make move:</button> + <span id="cur-move">none</span> + </p> + <div id="board"><div id="working">Working...</div></div> </div> This was sent by the SourceForge.net collaborative development platform, the world's largest Open Source development site. |
From: <luk...@us...> - 2010-12-19 17:35:17
|
Revision: 1261 http://toss.svn.sourceforge.net/toss/?rev=1261&view=rev Author: lukaszkaiser Date: 2010-12-19 17:35:10 +0000 (Sun, 19 Dec 2010) Log Message: ----------- Corrections to WebClient. Modified Paths: -------------- trunk/Toss/WebClient/Connect.js trunk/Toss/WebClient/DefaultStyle.js trunk/Toss/WebClient/Handler.py trunk/Toss/WebClient/Login.js trunk/Toss/WebClient/Main.js trunk/Toss/WebClient/README trunk/Toss/WebClient/Style.css trunk/Toss/WebClient/index.html Added Paths: ----------- trunk/Toss/WebClient/MakeDB.py Removed Paths: ------------- trunk/Toss/WebClient/make_db.py Modified: trunk/Toss/WebClient/Connect.js =================================================================== --- trunk/Toss/WebClient/Connect.js 2010-12-19 14:31:15 UTC (rev 1260) +++ trunk/Toss/WebClient/Connect.js 2010-12-19 17:35:10 UTC (rev 1261) @@ -12,8 +12,6 @@ var SVG_HEIGHT = 500; var SVG_MARGINX = 50; var SVG_MARGINY = 50; -var VIEW_WIDTH = "20em"; -var VIEW_HEIGHT = "20em"; var VIEW_MIRROR = 0; var GAME_NAME = ""; // name of current game, e.g. "Breakthrough" @@ -65,7 +63,7 @@ // Send [msg] to server and return response text. function sync_server_msg (msg) { var xml_request = new XMLHttpRequest (); - xml_request.open ('POST', 'TossHandler.py', false); + xml_request.open ('POST', 'Handler.py', false); xml_request.setRequestHeader ('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8'); xml_request.send (msg); @@ -77,11 +75,33 @@ return (resp) } +// Send [msg] to server asynchronously, ignore response text. +function async_server_msg (msg) { + var xml_request = new XMLHttpRequest (); + xml_request.open ('POST', 'Handler.py', true); + xml_request.setRequestHeader ('Content-Type', + 'application/x-www-form-urlencoded; charset=UTF-8'); + 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"))); + } + } + }; + xml_request.send (msg); +} + // Send [msg] to server attaching prefix '[cmd]#' and return response text. function srv (cmd, msg) { return (sync_server_msg (cmd + '#' + msg)); } +// Send [msg] to server attaching prefix '[cmd]#' async., ignore response. +function async_srv (cmd, msg) { + return (async_server_msg (cmd + '#' + msg)); +} + // Strip [c1] and [c2] from beginning and end of [str]. function strip (c1, c2, str) { if (str.length == 0) return (str); @@ -172,15 +192,11 @@ // ---- Two functions below are very basic and thus in this file. --- // Create basic svg box. -function create_svg_box (bwidth, bheight, margx, margy, parent_id) { - VIEW_WIDTH = bwidth; - VIEW_HEIGHT = bheight; +function create_svg_box (margx, margy, parent_id) { SVG_MARGINX = margx; SVG_MARGINY = margx; var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); svg.setAttribute('id', 'svg'); - svg.setAttribute('width', bwidth); - svg.setAttribute('height', bheight); var wx = SVG_WIDTH + 2*SVG_MARGINX; var wy = SVG_HEIGHT + 2*SVG_MARGINY; svg.setAttribute('viewBox', '0 0 ' + wx + " " + wy); Modified: trunk/Toss/WebClient/DefaultStyle.js =================================================================== --- trunk/Toss/WebClient/DefaultStyle.js 2010-12-19 14:31:15 UTC (rev 1260) +++ trunk/Toss/WebClient/DefaultStyle.js 2010-12-19 17:35:10 UTC (rev 1261) @@ -2,7 +2,6 @@ // This module implements default drawing style for games. // Functions expected from this module: -// - draw_outline () // - draw_elem (elem) // - highlight_elem (elem) // - unhighlight_elem (elem) @@ -136,12 +135,6 @@ class="chess-path-D" /> \ </g>'; -// Draw a box around the board. -function draw_outline () { - var w = SVG_WIDTH + 2*SVG_MARGINX; - var h = SVG_HEIGHT + 2*SVG_MARGINY; - add_svg ("rect", [["class", "board-outline"], ["width", w], ["height", h]]); -} // Draw the element [elem]. function draw_elem (elem) { Modified: trunk/Toss/WebClient/Handler.py =================================================================== --- trunk/Toss/WebClient/Handler.py 2010-12-19 14:31:15 UTC (rev 1260) +++ trunk/Toss/WebClient/Handler.py 2010-12-19 17:35:10 UTC (rev 1261) @@ -1,14 +1,12 @@ import subprocess import socket import time -from Wrapper import * from mod_python import apache, Cookie from pysqlite2 import dbapi2 as sqlite3 +from Wrapper import * +import MakeDB -DB_FILE = "/var/www/WebClient/tossdb.sqlite" -TUID = "toss_id_05174_" - def tmp_log (str): file = open ("/tmp/th.log", 'a') file.write (str) @@ -21,7 +19,7 @@ return (res) def open_toss_server (port): - args = ["/var/www/WebClient/TossServer", + args = [MakeDB.SERVER_FILE, "-s", "localhost", "-p", str(port)] server_proc = subprocess.Popen(args) time.sleep (0.1) @@ -30,7 +28,7 @@ def get_global_lock (db): cur = db.cursor () cur.execute ("update lock set locked='true' " + - " where locked='false' and tid='" + str(TUID) + "'") + " where locked='false' and tid='" + str(MakeDB.TUID) + "'") db.commit () if cur.rowcount == 1: return @@ -39,7 +37,7 @@ def release_global_lock (db): db.execute ("update lock set locked='false' " + - " where locked='true' and tid='" + str(TUID) + "'") + " where locked='true' and tid='" + str(MakeDB.TUID) + "'") db.commit () def get_toss_port (db): @@ -160,10 +158,10 @@ def confirm_username (db, req): cookies = Cookie.get_cookies(req) - if not (cookies.has_key(TUID + 'username')): return "" - if not (cookies.has_key(TUID + 'passphrase')): return "" - uid = cookies[TUID + 'username'].value - pwd1 = cookies[TUID + 'passphrase'].value + if not (cookies.has_key(MakeDB.TUID + 'username')): return "" + if not (cookies.has_key(MakeDB.TUID + 'passphrase')): return "" + uid = cookies[MakeDB.TUID + 'username'].value + pwd1 = cookies[MakeDB.TUID + 'passphrase'].value pwd2 = passwd_from_db (db, uid) if (pwd1 != pwd2): return "" return (uid) @@ -174,11 +172,11 @@ if (pwd != db_pwd): return ("wrong password") t = time.time() + 3600000; if chk == "false": - cookie1 = Cookie.Cookie(TUID + 'username', uid) - cookie2 = Cookie.Cookie(TUID + 'passphrase', pwd) + cookie1 = Cookie.Cookie(MakeDB.TUID + 'username', uid) + cookie2 = Cookie.Cookie(MakeDB.TUID + 'passphrase', pwd) else: - cookie1 = Cookie.Cookie(TUID + 'username', uid, expires=t) - cookie2 = Cookie.Cookie(TUID + 'passphrase', pwd, expires=t) + cookie1 = Cookie.Cookie(MakeDB.TUID + 'username', uid, expires=t) + cookie2 = Cookie.Cookie(MakeDB.TUID + 'passphrase', pwd, expires=t) Cookie.add_cookie(req, cookie1) Cookie.add_cookie(req, cookie2) return ("OK") @@ -231,9 +229,16 @@ db.commit () return ("OK") +def user_plays (db, usr): + name = get_user_name (db, usr); + plays = "" + for g in MakeDB.GAMES: + plays += "$" + list_plays (db, g, usr) + return (usr + "$" + name + plays) + def handler(req): req.content_type = "text/plain" - db = sqlite3.connect(DB_FILE) + db = sqlite3.connect(MakeDB.DB_FILE) usr = confirm_username (db, req) msg = req.read () #tmp_log(msg) @@ -241,6 +246,12 @@ if cmd == "USERNAME": req.write(usr) return apache.OK + if cmd == "USERPLAYS": + if usr == "": + req.write(usr) + return apache.OK + req.write (user_plays (db, usr)) + return apache.OK if cmd == "REGISTER": ui = data.split('$') if register_user (db, ui): @@ -260,8 +271,8 @@ req.write("Login failed for " + ui[0] + ": " + res) return apache.OK if cmd == "LOGOUT": - cookie1 = Cookie.Cookie(TUID + 'passphrase', "a") - cookie2 = Cookie.Cookie(TUID + 'username', "a") + cookie1 = Cookie.Cookie(MakeDB.TUID + 'passphrase', "a") + cookie2 = Cookie.Cookie(MakeDB.TUID + 'username', "a") Cookie.add_cookie(req, cookie1) Cookie.add_cookie(req, cookie2) req.write ("User logged out: " + usr + ".") Modified: trunk/Toss/WebClient/Login.js =================================================================== --- trunk/Toss/WebClient/Login.js 2010-12-19 14:31:15 UTC (rev 1260) +++ trunk/Toss/WebClient/Login.js 2010-12-19 17:35:10 UTC (rev 1261) @@ -12,19 +12,21 @@ } // Setup a user -function setup_user (un) { - UNAME = un - document.getElementById("topuser").innerHTML = "Welcome " + disp_name(un); +function setup_user (udata) { + UNAME = udata[0]; + UNAME_TO_NAME_MAP[UNAME] = udata[1]; + document.getElementById("topuser").innerHTML = + "Welcome " + disp_name(UNAME); document.getElementById("loginform").style.display = "none"; document.getElementById("topright-register").style.display = "none"; document.getElementById("topright").style.display = "inline"; document.getElementById("welcome").style.display = "none"; document.getElementById("plays").style.display = "block"; - list_plays ("Breakthrough"); - list_plays ("Chess"); - list_plays ("Entanglement"); - list_plays ("Gomoku"); - list_plays ("Tic-Tac-Toe"); + list_plays_string ("Breakthrough", udata[2]); + list_plays_string ("Chess", udata[3]); + list_plays_string ("Entanglement", udata[4]); + list_plays_string ("Gomoku", udata[5]); + list_plays_string ("Tic-Tac-Toe", udata[6]); get_opponents (); } @@ -45,8 +47,8 @@ if (navigator.userAgent.indexOf('MSIE') !=-1) { document.getElementById("nosvg").style.display = "block"; } else { - var un = srv("USERNAME", "user"); - if (un != "") { setup_user (un) }; + var udata = srv("USERPLAYS", "user"); + if (udata != "") { setup_user (udata.split("$")) }; } } Modified: trunk/Toss/WebClient/Main.js =================================================================== --- trunk/Toss/WebClient/Main.js 2010-12-19 14:31:15 UTC (rev 1260) +++ trunk/Toss/WebClient/Main.js 2010-12-19 17:35:10 UTC (rev 1261) @@ -34,7 +34,6 @@ // Draw the model using function from Toss[X]Style.js. // WARNING: must call get_model_info first! function draw_model () { - draw_outline (); for (var i = 0; i < ELEMS.length; i++) { draw_elem (ELEMS[i]); } @@ -59,7 +58,7 @@ clear_svg (); document.getElementById("working").style.display = "block"; get_model_info (); - create_svg_box (VIEW_WIDTH, VIEW_HEIGHT, SVG_MARGINX, SVG_MARGINY, "board"); + create_svg_box (SVG_MARGINX, SVG_MARGINY, "board"); draw_model (); document.getElementById("working").style.display = "none"; } @@ -127,17 +126,17 @@ li.setAttribute ("class", "plays-list-elem"); li.setAttribute ("id", "plays-list-" + game + "-elem-" + i); var p = PLAYS[i][2]; - var bs = '<button class="bt" title="Open" onclick="'+ "play_click('" + - game + "', " + p + ", " + i + ')">Open</button> '; - li.innerHTML = bs + disp_name(PLAYS[i][0]) +" vs " + - disp_name(PLAYS[i][1])+ " (game " + PLAYS[i][2] + ')' - + var pname = disp_name(PLAYS[i][0]) +" vs " + disp_name(PLAYS[i][1]) + + " (game " + PLAYS[i][2] + ')'; + var bs = '<button class="obt" title="Open game ' + PLAYS[i][2] + + '" onclick="'+ "play_click('" + game + "', " + p + ", " + i + ')">' + + pname + '</button> '; + li.innerHTML = bs // +'<a href="#" onclick="'+ "del_play('"+ fn + "')" + '">Delete</a>'; return (li); } -function list_plays (game) { - var lst = srv ("LIST_PLAYS", "'" + game + "', '" + UNAME + "'"); +function list_plays_string (game, lst) { PLAYS = convert_python_list (',', lst); var plist = document.getElementById("plays-list-" + game); while (plist.childNodes.length > 0) { plist.removeChild(plist.firstChild); } @@ -154,18 +153,22 @@ } } +function list_plays (game) { + var lst = srv ("LIST_PLAYS", "'" + game + "', '" + UNAME + "'"); + list_plays_string (game, lst); +} + + function game_click (game) { document.getElementById("welcome").style.display = "none"; document.getElementById("game-disp").style.display = "none"; document.getElementById("plays").style.display = "none"; GAME_NAME = game; if (game == "Tic-Tac-Toe") { // bigger margins needed - create_svg_box ("19em", "19em", 130, 130, "board"); + create_svg_box (130, 130, "board"); } else { - create_svg_box ("19em", "19em", 40, 40, "board"); + create_svg_box (40, 40, "board"); } - document.getElementById("opening").style.display = "block"; - document.getElementById("opening").style.display = "none"; document.getElementById("game-disp").style.display = "block"; } @@ -192,6 +195,7 @@ alert ("It is your Opponent's turn"); return; } + document.getElementById("working").style.display = "block"; var info = srv("MOVE_PLAY", 'c, '+ CUR_MOVE +', '+ play_py_id (CUR_PLAY_I)); set_info (info); clear_move_cache (); @@ -201,9 +205,10 @@ document.getElementById("cur-player").innerHTML = disp_name(PLAYS[CUR_PLAY_I][(m + 1) % 2]); document.getElementById('cur-move').innerHTML = "none"; + document.getElementById("working").style.display = "none"; full_redraw (); PLAYS[CUR_PLAY_I][3] = parseInt(PLAYS[CUR_PLAY_I][3]) + 1; - srv ("UPD_SVG", play_py_id(CUR_PLAY_I) + ", " + svg_string()); + async_srv ("UPD_SVG", play_py_id(CUR_PLAY_I) + ", " + svg_string()); var old_li = document.getElementById ("plays-list-" + GAME_NAME + "-elem-" + CUR_PLAY_I); var li = new_play_item (GAME_NAME, CUR_PLAY_I); old_li.parentNode.replaceChild (li, old_li); @@ -300,14 +305,17 @@ function new_play_do (opp_uid) { list_plays (GAME_NAME) game_click (GAME_NAME) + document.getElementById ("game-title").innerHTML = GAME_NAME; document.getElementById("opponents").style.display = "none"; var olist = document.getElementById("opponents-list"); while (olist.childNodes.length > 0) { olist.removeChild(olist.firstChild); } if (opp_uid == -1) { opp_uid = UNAME; } if (opp_uid == 0 || UNAME == "") { return; } document.getElementById("plays-list-" + GAME_NAME).style.display = "block"; + document.getElementById("working").style.display = "block"; info_nbr = srv ("NEW_PLAY", "c, '" + GAME_NAME + "', '" + UNAME + "', '" + opp_uid + "', 0"); + document.getElementById("working").style.display = "none"; info_idx = info_nbr.indexOf('$'); FREE_PLAY_NO = parseInt(info_nbr.substring(0, info_idx)); document.getElementById("play-number").innerHTML = "" + FREE_PLAY_NO; @@ -320,7 +328,7 @@ PLAYS.push(p); set_info(info_nbr.substring(info_idx+1)); full_redraw (); - srv ("UPD_SVG", play_py_id(CUR_PLAY_I) + ", " + svg_string()); + async_srv ("UPD_SVG", play_py_id(CUR_PLAY_I) + ", " + svg_string()); li = new_play_item (GAME_NAME, CUR_PLAY_I); document.getElementById("plays-list-" + GAME_NAME).appendChild(li); } @@ -328,4 +336,4 @@ function get_opponents () { var lst = srv ("LIST_FRIENDS", "user"); FRIENDS = convert_python_list (',', lst); -} \ No newline at end of file +} Copied: trunk/Toss/WebClient/MakeDB.py (from rev 1258, trunk/Toss/WebClient/make_db.py) =================================================================== --- trunk/Toss/WebClient/MakeDB.py (rev 0) +++ trunk/Toss/WebClient/MakeDB.py 2010-12-19 17:35:10 UTC (rev 1261) @@ -0,0 +1,47 @@ +#!/usr/bin/python + +import os +from pysqlite2 import dbapi2 as sqlite3 + +DB_FILE = "/var/www/WebClient/tossdb.sqlite" + +SERVER_FILE = "/var/www/WebClient/TossServer" + +GAMES_PATH = "../examples" +GAMES = ["Breakthrough", "Chess", "Entanglement", "Gomoku", "Tic-Tac-Toe"] + +TUID = "toss_id_05174_" + + + +def create_db (db_file, games_path, games): + conn = sqlite3.connect(db_file) + conn.execute("create table users(id string primary key," + + " name string, surname string, email string, passwd string)") + conn.execute("create table cur_states(playid int primary key," + + " game string, player1 string, player2 string," + + " move int, toss string, info string, svg string)") + conn.execute("create table old_states(playid int," + + " game string, player1 string, player2 string," + + " move int, toss string, info string, svg string)") + conn.execute("create table games(game string primary key, toss string)") + conn.execute("create table ports(port int primary key, locked bool)") + conn.execute("create table lock(tid int primary key, locked bool)") + conn.execute("create table friends(id string, fid string)") + conn.commit () + conn.execute ("insert into lock(tid, locked) values (?, ?)", + (TUID, 'false')) + for g in games: + f = open(games_path + "/" + g + ".toss") + toss = f.read() + f.close() + conn.execute ("insert into games(game, toss) values (?, ?)", (g, toss)) + print ("Added " + g) + conn.commit () + os.chmod (db_file, 0777) + + +if __name__ == "__main__": + print "Creating empty Toss DB" + create_db (DB_FILE, GAMES_PATH, GAMES) + print "Created tossdb.sqlite" Modified: trunk/Toss/WebClient/README =================================================================== --- trunk/Toss/WebClient/README 2010-12-19 14:31:15 UTC (rev 1260) +++ trunk/Toss/WebClient/README 2010-12-19 17:35:10 UTC (rev 1261) @@ -21,7 +21,6 @@ TODO: - move interface: first click all, second click toggle, if one - confirm msg - move suggestions and play against computer - - after the above: show game result in the middle / instead of move - sort plays by who's turn it is - option to give up game and offer a draw - enable google (or other) analytics Modified: trunk/Toss/WebClient/Style.css =================================================================== --- trunk/Toss/WebClient/Style.css 2010-12-19 14:31:15 UTC (rev 1260) +++ trunk/Toss/WebClient/Style.css 2010-12-19 17:35:10 UTC (rev 1261) @@ -1,14 +1,20 @@ /* General */ html { + position: absolute; height: 100%; width: 100%; } body { + position: absolute; + height: 100%; + width: 100%; + padding: 0px; + margin: 0px; + text-align: center; background-color: #b5bf8f; font-family: Verdana, 'TeXGyreHerosRegular', sans; - height: 100%; } .bt { @@ -30,9 +36,26 @@ #plays .bt { width: 7em; position: absolute; - right: 0px; + right: 2px; } +.obt { + text-align: left; + border-color: #260314; + border-radius: 4px; + -moz-border-radius: 4px; + border-width: 0px; + color: #260314; + background-color: #ffe4aa; + font-size: 0.9em; + font-family: Verdana, 'TeXGyreHerosRegular', sans; +} + +.obt:hover { + cursor: pointer; + text-decoration: underline; +} + .dbt { border-color: #ffe4aa; border-radius: 4px; @@ -142,26 +165,25 @@ #login1 { position: absolute; top: 0px; - left: 10em; + left: 8em; } #login2 { position: absolute; top: 0px; - left: 20em; + left: 18em; } #login3 { position: absolute; top: 0.3em; - left: 30em; + left: 28em; } #logo { font-size: 2em; float: left; font-family: arial, 'OFLSortsMillGoudyRegular', serif; - width: 4.5em; padding-left: 0.25em; } @@ -192,10 +214,12 @@ border-color: #260314; border-style: solid; border-width: 0px 0px 5px 0px; + z-index: 9; + text-align: left; } #topbar { - margin-left: 9.5em; + margin-left: 6.5em; padding-left: 1em; padding-right: 1em; padding-top: 0.7em; @@ -217,11 +241,12 @@ } #bottom { - position: relative; + position: absolute; bottom: 0px; - left: -0.5em; + left: 0em; width: 100%; - padding-right: 1em; + padding: 0px; + margin: 0px; height: 1.3em; text-align: right; color: #ffe4aa; @@ -266,16 +291,24 @@ } #main { - margin-top: 2.5em; + text-align: left; + position: absolute; + top: 0px; + bottom: 0px; + left: 0px; + right: 0px; + margin-left: auto; + margin-right: auto; + width: 90%; + height: 100%; + padding-top: 0px; + padding-bottom: 0px; + padding-left: 2px; + padding-right: 2px; color: #260314; background-color: #ffe4aa; - margin-left: 1em; - margin-right: 1em; - padding: 1em; - min-height: 100%; - padding-bottom: 2em; - border: 1px solid #260314; - border-bottom: 0px; + border-left: 1px solid #260314; + border-right: 1px solid #260314; } #main a, #main a:link, #main a:active, #main a:visited { @@ -360,10 +393,13 @@ } #game-disp { - position: relative; - top: -1em; - left: 0em; - width: 30em; + text-align: center; + margin-left: auto; + margin-right: auto; + margin-top: 3em; + min-width: 10em; + max-width: 60em; + width: 80%; display: none; } @@ -379,29 +415,24 @@ padding: 0px; } -#game-desc { - text-align: justify; - display: none; - width: 29em; - height: 19em; - margin-right: 1em; - padding-right: 1em; - border-right: 1px solid #260314; -} - #board { - position: absolute; - left: 0em; - top: 3.5em; - width: 20em; - height: 20em; + min-width: 10em; + max-width: 60em; + width: 70%; + margin-left: auto; + margin-right: auto; + margin-top: 0em; + text-align: center; } #working { position: absolute; - left: 4.5em; + left: 0px; + right: 0px; top: 7em; width: 10em; + margin-left: auto; + margin-right: auto; text-align: center; font-weight: bold; color: #ffe4aa; @@ -429,15 +460,19 @@ } .game-par { - padding-top: 2px; - border-top: 2px solid #260314; + padding: 0px; + border-top: 0px solid #260314; } #plays { position: absolute; - top: 3em; - left: 3em; - width: 30em; + left: 0px; + right: 0px; + top: 2.5em; + margin-left: auto; + margin-right: auto; + width: 100%; + max-width: 50em; display: none; } @@ -445,12 +480,12 @@ margin-left: 1em; padding-left: 0px; list-style: none; - margin-top: 0.25em; + margin-top: 0em; } .plays-list-elem { margin-left: 0em; - margin-bottom: 0.5em; + margin-bottom: 0em; } .plays-list-elem a { @@ -467,10 +502,14 @@ /* SVG styling */ -.board-outline { - fill: #b5bf8f; - stroke: #260314; - stroke-width: 10px; +#svg { + min-width: 10em; + max-width: 60em; + width: 70%; + min-height: 10em; + max-height: 60em; + height: 70%; + /* border: 1px solid #260314; */ } .model-elem { @@ -527,139 +566,139 @@ } .chessW .chess-path-A { - opacity:1; - fill:#ffe4aa; - 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; + opacity: 1; + fill: #ffe4aa; + 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; } .chessB .chess-path-A { - opacity:1; - fill:#400827; - 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; + opacity: 1; + fill: #400827; + 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; } .chessW .chess-path-B { - opacity:1; - fill:#ffe4aa; - 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; + opacity: 1; + fill: #ffe4aa; + 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; } .chessB .chess-path-B { - opacity:1; + opacity: 1; fill: #400827; - 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; + 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; } .chessW .chess-path-Bx { - opacity:1; - fill:#ffe4aa; - 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; + opacity: 1; + fill: #ffe4aa; + 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; } .chessB .chess-path-Bx { - opacity:1; + opacity: 1; fill: #ffe4aa; - fill-opacity:1; - fill-rule:evenodd; + 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; + stroke-width: 1.5; + stroke-linecap: round; + stroke-linejoin: round; + stroke-miterlimit: 4; + stroke-dasharray: none; + stroke-opacity: 1; } .chessW .chess-path-C { - opacity:1; - fill:#400827; - fill-opacity:1; - stroke:#260314; - stroke-width:1.5; - stroke-linecap:round; - stroke-linejoin:round; - stroke-miterlimit:4; - stroke-dasharray:none; - stroke-opacity:1; + opacity: 1; + fill: #400827; + fill-opacity: 1; + stroke: #260314; + stroke-width: 1.5; + stroke-linecap: round; + stroke-linejoin: round; + stroke-miterlimit: 4; + stroke-dasharray: none; + stroke-opacity: 1; } .chessB .chess-path-C { opacity:1; - fill:#ffe4aa; - fill-opacity:1; - stroke:#ffe4aa; - stroke-width:1.5; - stroke-linecap:round; - stroke-linejoin:round; - stroke-miterlimit:4; - stroke-dasharray:none; - stroke-opacity:1; + fill: #ffe4aa; + fill-opacity: 1; + stroke: #ffe4aa; + stroke-width: 1.5; + stroke-linecap: round; + stroke-linejoin: round; + stroke-miterlimit: 4; + stroke-dasharray: none; + stroke-opacity: 1; } .chessW .chess-path-D { fill: #ffe4aa; fill-opacity: 0.75; - fill-rule:evenodd; + fill-rule: evenodd; stroke: #260314; - stroke-width:1; - stroke-linecap:round; - stroke-linejoin:mitter; - stroke-miterlimit:4; - stroke-dasharray:none; - stroke-opacity:1; + stroke-width: 1; + stroke-linecap: round; + stroke-linejoin: miter; + stroke-miterlimit: 4; + stroke-dasharray: none; + stroke-opacity: 1; } .chessB .chess-path-D { fill: #400827; fill-opacity: 0.75; - fill-rule:evenodd; + fill-rule: evenodd; stroke: #ffe4aa; - stroke-width:1; - stroke-linecap:round; - stroke-linejoin:mitter; - stroke-miterlimit:4; - stroke-dasharray:none; - stroke-opacity:1; + stroke-width: 1; + stroke-linecap: round; + stroke-linejoin: miter; + stroke-miterlimit: 4; + stroke-dasharray: none; + stroke-opacity: 1; } Modified: trunk/Toss/WebClient/index.html =================================================================== --- trunk/Toss/WebClient/index.html 2010-12-19 14:31:15 UTC (rev 1260) +++ trunk/Toss/WebClient/index.html 2010-12-19 17:35:10 UTC (rev 1261) @@ -126,8 +126,6 @@ </div> -<div id="opening" style="display: none;">Opening may take some time ...</div> - <div id="game-disp"> <p id="game-info-par"> <span id="game-title"></span> Deleted: trunk/Toss/WebClient/make_db.py =================================================================== --- trunk/Toss/WebClient/make_db.py 2010-12-19 14:31:15 UTC (rev 1260) +++ trunk/Toss/WebClient/make_db.py 2010-12-19 17:35:10 UTC (rev 1261) @@ -1,39 +0,0 @@ -#!/usr/bin/python - -import os -from pysqlite2 import dbapi2 as sqlite3 - -TUID = "toss_id_05174_" # from TossHandler import TUID - -print "Creating empty Toss DB" - -conn = sqlite3.connect("tossdb.sqlite") -conn.execute("create table users(id string primary key, name string, surname string, email string, passwd string)") -conn.execute("create table cur_states(playid int primary key, game string, player1 string, player2 string, move int, toss string, info string, svg string)") -conn.execute("create table old_states(playid int, game string, player1 string, player2 string, move int, toss string, info string, svg string)") -conn.execute("create table games(game string primary key, toss string)") -conn.execute("create table ports(port int primary key, locked bool)") -conn.execute("create table lock(tid int primary key, locked bool)") -conn.execute("create table friends(id string, fid string)") -conn.commit () - -conn.execute ("insert into lock(tid, locked) values (?, ?)", - (TUID, 'false')) - -def add_game (g): - f = open("../examples/" + g + ".toss") - toss = f.read() - f.close() - conn.execute ("insert into games(game, toss) values (?, ?)", (g, toss)) - -games = ["Breakthrough", "Chess", "Entanglement", "Gomoku", "Tic-Tac-Toe"] - -for g in games: - print ("Added " + g) - add_game (g) - -conn.commit () - -os.chmod ("tossdb.sqlite", 0777) - -print "Created tossdb.sqlite" This was sent by the SourceForge.net collaborative development platform, the world's largest Open Source development site. |
From: <luk...@us...> - 2011-01-10 01:10:14
|
Revision: 1279 http://toss.svn.sourceforge.net/toss/?rev=1279&view=rev Author: lukaszkaiser Date: 2011-01-10 01:10:08 +0000 (Mon, 10 Jan 2011) Log Message: ----------- Some more small corrections. Modified Paths: -------------- trunk/Toss/WebClient/MakeDB.py trunk/Toss/WebClient/Style.css trunk/Toss/WebClient/contact.html trunk/Toss/WebClient/favicon.ico trunk/Toss/WebClient/index.html trunk/Toss/WebClient/profile.html trunk/Toss/WebClient/register.html Added Paths: ----------- trunk/Toss/WebClient/toss.png Modified: trunk/Toss/WebClient/MakeDB.py =================================================================== --- trunk/Toss/WebClient/MakeDB.py 2011-01-09 23:36:40 UTC (rev 1278) +++ trunk/Toss/WebClient/MakeDB.py 2011-01-10 01:10:08 UTC (rev 1279) @@ -3,18 +3,18 @@ import os from pysqlite2 import dbapi2 as sqlite3 +TUID = "toss_id_05174_" + DB_FILE = "/var/www/WebClient/tossdb.sqlite" SERVER_FILE = "/var/www/WebClient/TossServer" GAMES_PATH = "../examples" + GAMES = ["Breakthrough", "Checkers", "Chess", "Entanglement", "Gomoku", "Tic-Tac-Toe"] -TUID = "toss_id_05174_" - - def create_db (db_file, games_path, games): conn = sqlite3.connect(db_file) conn.execute("create table users(id string primary key," + Modified: trunk/Toss/WebClient/Style.css =================================================================== --- trunk/Toss/WebClient/Style.css 2011-01-09 23:36:40 UTC (rev 1278) +++ trunk/Toss/WebClient/Style.css 2011-01-10 01:10:08 UTC (rev 1279) @@ -15,7 +15,7 @@ padding: 0px; margin: 0px; text-align: center; - background-color: #f7ffd8; + background-color: #f5f2ef; font-family: Verdana, 'TeXGyreHerosRegular', sans; } @@ -173,7 +173,7 @@ #logoutbt:hover { cursor: pointer; - color: #f7ffd8; + color: #f5f2ef; } #login1 { @@ -204,6 +204,7 @@ #logo img { height: 1.5em; width: 2.5em; + border: 0px; } #top a, #logo a:link, #logo a:active, #logo a:visited { @@ -213,7 +214,7 @@ } #top a:hover { - color: #f7ffd8; + color: #f5f2ef; } .logo-in { @@ -338,7 +339,7 @@ } #topbar a:hover { - color: #f7ffd8; + color: #f5f2ef; } @@ -635,7 +636,7 @@ } .model-elem-highlight { - fill: #f7ffd8; + fill: #f5f2ef; stroke: #400827; stroke-width: 3px; } Modified: trunk/Toss/WebClient/contact.html =================================================================== --- trunk/Toss/WebClient/contact.html 2011-01-09 23:36:40 UTC (rev 1278) +++ trunk/Toss/WebClient/contact.html 2011-01-10 01:10:08 UTC (rev 1279) @@ -28,7 +28,7 @@ <div id="main"> <div id="top"> -<div id="logo"><a href="index.html"><img src="toss.svg" alt="tPlay" /></a></div> +<div id="logo"><a href="index.html"><img src="toss.png" alt="tPlay" /></a></div> </div> <div id="register-content"> Modified: trunk/Toss/WebClient/favicon.ico =================================================================== (Binary files differ) Modified: trunk/Toss/WebClient/index.html =================================================================== --- trunk/Toss/WebClient/index.html 2011-01-09 23:36:40 UTC (rev 1278) +++ trunk/Toss/WebClient/index.html 2011-01-10 01:10:08 UTC (rev 1279) @@ -19,7 +19,7 @@ <div id="main"> <div id="top"> -<div id="logo"><a href="index.html"><img src="toss.svg" alt="tPlay" /></a></div> +<div id="logo"><a href="index.html"><img src="toss.png" alt="tPlay" /></a></div> <div id="topbar"> <span id="topuser"></span> <form id="loginform" style="display: inline;"> Modified: trunk/Toss/WebClient/profile.html =================================================================== --- trunk/Toss/WebClient/profile.html 2011-01-09 23:36:40 UTC (rev 1278) +++ trunk/Toss/WebClient/profile.html 2011-01-10 01:10:08 UTC (rev 1279) @@ -16,7 +16,7 @@ <body onload="startup_profile()"> <div id="top"> -<div id="logo"><a href="index.html"><img src="toss.svg" alt="tPlay" /></a></div> +<div id="logo"><a href="index.html"><img src="toss.png" alt="tPlay" /></a></div> <div id="topbar"> <span id="topuser"></span> <form id="loginform" style="display: inline;"> Modified: trunk/Toss/WebClient/register.html =================================================================== --- trunk/Toss/WebClient/register.html 2011-01-09 23:36:40 UTC (rev 1278) +++ trunk/Toss/WebClient/register.html 2011-01-10 01:10:08 UTC (rev 1279) @@ -14,7 +14,7 @@ <body> <div id="top"> -<div id="logo"><a href="index.html"><img src="toss.svg" alt="tPlay" /></a></div> +<div id="logo"><a href="index.html"><img src="toss.png" alt="tPlay" /></a></div> </div> <div id="main"> Added: trunk/Toss/WebClient/toss.png =================================================================== (Binary files differ) Property changes on: trunk/Toss/WebClient/toss.png ___________________________________________________________________ Added: svn:mime-type + application/octet-stream This was sent by the SourceForge.net collaborative development platform, the world's largest Open Source development site. |
From: <luk...@us...> - 2011-01-13 03:02:10
|
Revision: 1280 http://toss.svn.sourceforge.net/toss/?rev=1280&view=rev Author: lukaszkaiser Date: 2011-01-13 03:02:02 +0000 (Thu, 13 Jan 2011) Log Message: ----------- Just small easy corrections for now. Modified Paths: -------------- trunk/Toss/WebClient/Handler.py trunk/Toss/WebClient/Login.js trunk/Toss/WebClient/Style.css trunk/Toss/WebClient/profile.html Modified: trunk/Toss/WebClient/Handler.py =================================================================== --- trunk/Toss/WebClient/Handler.py 2011-01-10 01:10:08 UTC (rev 1279) +++ trunk/Toss/WebClient/Handler.py 2011-01-13 03:02:02 UTC (rev 1280) @@ -75,6 +75,9 @@ return (str([play_name (p) for p in plays])) def list_friends (db, uid): + if (uid == "**"): + users = get_all_from_db (db, "users", "0=0") + return ([str(u) for (u, _, _, _, _) in users]) friends = get_all_from_db (db, "friends", "id='"+ uid + "'") return (str([str(f) for (_, f) in friends])) @@ -313,7 +316,9 @@ req.write(str(get_user_surname (db, data))) return apache.OK if cmd == "LIST_FRIENDS": - req.write(str(list_friends (db, usr))) + requsr = usr + if data == "**": requsr = "**" + req.write(str(list_friends (db, requsr))) return apache.OK if cmd == "GET_MAIL": if usr == "": return ("You must login first to get email data.") Modified: trunk/Toss/WebClient/Login.js =================================================================== --- trunk/Toss/WebClient/Login.js 2011-01-10 01:10:08 UTC (rev 1279) +++ trunk/Toss/WebClient/Login.js 2011-01-13 03:02:02 UTC (rev 1280) @@ -75,16 +75,27 @@ li.innerHTML = disp_name(FRIENDS[i]) + " (" + FRIENDS[i] + ")"; o.appendChild (li); } + var lst = srv ("LIST_FRIENDS", "**"); + var users = convert_python_list (',', lst); + var u = document.getElementById("users-list"); + for (var i = 0; i < users.length; i++) { + if (users[i] != un && FRIENDS.indexOf(users[i]) == -1) { + var li = document.createElement('li'); + li.innerHTML = disp_name(users[i]) + " (" + users[i] + ")"; + u.appendChild (li); + } + } }; } // Login -function login () { - un = document.getElementById('username').value; - pwd = document.getElementById('password').value; - chk = "false"; +function login () { + var unv = document.getElementById('username').value; + var un = unv.toLowerCase(); + var pwd = document.getElementById('password').value; + var chk = "false"; if (document.getElementById('remember').checked) { chk = "true" }; - resp = sync_server_msg ("LOGIN#" + un +"$"+ chk +"$"+ crypt(TSALT + pwd)); + var resp = sync_server_msg("LOGIN#"+ un +"$"+ chk +"$"+ crypt(TSALT + pwd)); if (resp == "OK") { window.location.reload () } else { @@ -112,12 +123,13 @@ // Register new user function register () { - un = document.getElementById('username').value; - pwd = document.getElementById('password').value; - rptpwd = document.getElementById('rptpassword').value; - name = document.getElementById('name').value; - surname = document.getElementById('surname').value; - email = document.getElementById('email').value; + var unv = document.getElementById('username').value; + var un = unv.toLowerCase(); + var pwd = document.getElementById('password').value; + var rptpwd = document.getElementById('rptpassword').value; + var name = document.getElementById('name').value; + var surname = document.getElementById('surname').value; + var email = document.getElementById('email').value; if (un.length < 2) { alert ("Your username must contain at least 2 letters." + CORRMSG); return; @@ -151,16 +163,16 @@ alert ("Your data must not contain $, i.e. the dolar sign." + CORRMSG); return; } - data = un + "$" + name + "$" + surname + "$" + email; - resp = sync_server_msg ("REGISTER#" + data + "$" + crypt(TSALT + pwd)); + var data = un + "$" + name + "$" + surname + "$" + email; + var resp = sync_server_msg ("REGISTER#" + data + "$" + crypt(TSALT + pwd)); alert (resp); } // Change user data function change_profile () { - name = document.getElementById('name').value; - surname = document.getElementById('surname').value; - email = document.getElementById('email').value; + var name = document.getElementById('name').value; + var surname = document.getElementById('surname').value; + var email = document.getElementById('email').value; if (name == "") { alert ("Your name was not given and it is necessary." + CORRMSG); return; @@ -178,15 +190,15 @@ alert ("Your data must not contain $, i.e. the dolar sign." + CORRMSG); return; } - resp = sync_server_msg ("CHANGEUSR#" + name + "$" + surname + "$" + email); + var resp = sync_server_msg ("CHANGEUSR#" + name +"$"+ surname +"$"+ email); if (resp != "OK") { alert(resp); } window.location.reload (); } // Add opponent for the current user. function add_opponent () { - oppuname = document.getElementById('oppuname').value; - resp = sync_server_msg ("ADDOPP#" + oppuname); + var oppuname = document.getElementById('oppuname').value; + var resp = sync_server_msg ("ADDOPP#" + oppuname); if (resp != "OK") { alert(resp); } window.location.reload (); -} \ No newline at end of file +} Modified: trunk/Toss/WebClient/Style.css =================================================================== --- trunk/Toss/WebClient/Style.css 2011-01-10 01:10:08 UTC (rev 1279) +++ trunk/Toss/WebClient/Style.css 2011-01-13 03:02:02 UTC (rev 1280) @@ -93,6 +93,13 @@ margin-top: 0.3em; } +.regwidelabel { + float: left; + clear: left; + width: 19em; + margin-top: 0.3em; +} + .loginsmall { position: relative; top: 1px; Modified: trunk/Toss/WebClient/profile.html =================================================================== --- trunk/Toss/WebClient/profile.html 2011-01-10 01:10:08 UTC (rev 1279) +++ trunk/Toss/WebClient/profile.html 2011-01-13 03:02:02 UTC (rev 1280) @@ -76,15 +76,22 @@ onclick="change_profile()">Change</button> </form> -<h2>Your Opponents</h2> +<h2>Your Current Opponents</h2> <div id="opponents-profile"> <ul id="opponents-list"></ul> </div> +<h2>Suggested Opponents</h2> + +<div id="users-profile"> + <ul id="users-list"></ul> +</div> + <form id="opponentsform"> -<p> <span class="reglabel">Opponent Username:</span> - <input class="forminput" type="text" name="oppuname" id="oppuname" /> +<p> <span class="regwidelabel">Opponent Username (in brackets):</span> + <input class="forminput" type="text" name="oppuname" id="oppuname" + onkeypress="if (window.event && window.event.keyCode == 13) { add_opponent() }" /> </p> <button class="bt" id="oppaddbt" type="button" onclick="add_opponent()">Add Opponent</button> This was sent by the SourceForge.net collaborative development platform, the world's largest Open Source development site. |
From: <luk...@us...> - 2011-01-13 19:33:58
|
Revision: 1281 http://toss.svn.sourceforge.net/toss/?rev=1281&view=rev Author: lukaszkaiser Date: 2011-01-13 19:33:52 +0000 (Thu, 13 Jan 2011) Log Message: ----------- One more very small change. Modified Paths: -------------- trunk/Toss/WebClient/Login.js trunk/Toss/WebClient/Style.css trunk/Toss/WebClient/profile.html Modified: trunk/Toss/WebClient/Login.js =================================================================== --- trunk/Toss/WebClient/Login.js 2011-01-13 03:02:02 UTC (rev 1280) +++ trunk/Toss/WebClient/Login.js 2011-01-13 19:33:52 UTC (rev 1281) @@ -53,6 +53,13 @@ } } +// Html of the list item for adding new opponents. +function add_opponent_item_html (uname) { + var onclick = 'onclick="add_opponent (' + "'" + uname + "'" + ')"'; + var bt = '<button class="bt" ' + onclick + ">Add</button>" + return (bt + " " + disp_name(uname) + " (" + uname + ")") +} + // Onload handler for the profile page function startup_profile () { var un = srv("USERNAME", "user"); @@ -81,7 +88,7 @@ for (var i = 0; i < users.length; i++) { if (users[i] != un && FRIENDS.indexOf(users[i]) == -1) { var li = document.createElement('li'); - li.innerHTML = disp_name(users[i]) + " (" + users[i] + ")"; + li.innerHTML = add_opponent_item_html (users[i]); u.appendChild (li); } } @@ -196,8 +203,7 @@ } // Add opponent for the current user. -function add_opponent () { - var oppuname = document.getElementById('oppuname').value; +function add_opponent (oppuname) { var resp = sync_server_msg ("ADDOPP#" + oppuname); if (resp != "OK") { alert(resp); } window.location.reload (); Modified: trunk/Toss/WebClient/Style.css =================================================================== --- trunk/Toss/WebClient/Style.css 2011-01-13 03:02:02 UTC (rev 1280) +++ trunk/Toss/WebClient/Style.css 2011-01-13 19:33:52 UTC (rev 1281) @@ -93,13 +93,6 @@ margin-top: 0.3em; } -.regwidelabel { - float: left; - clear: left; - width: 19em; - margin-top: 0.3em; -} - .loginsmall { position: relative; top: 1px; @@ -411,6 +404,12 @@ left: 1em; } +#users-list { + list-style: none; + padding-left: 1.5em; + margin-top: 0.5em; +} + #opponents { display: none; position: absolute; Modified: trunk/Toss/WebClient/profile.html =================================================================== --- trunk/Toss/WebClient/profile.html 2011-01-13 03:02:02 UTC (rev 1280) +++ trunk/Toss/WebClient/profile.html 2011-01-13 19:33:52 UTC (rev 1281) @@ -82,20 +82,12 @@ <ul id="opponents-list"></ul> </div> -<h2>Suggested Opponents</h2> +<h2>Suggested New Opponents</h2> <div id="users-profile"> <ul id="users-list"></ul> </div> -<form id="opponentsform"> -<p> <span class="regwidelabel">Opponent Username (in brackets):</span> - <input class="forminput" type="text" name="oppuname" id="oppuname" - onkeypress="if (window.event && window.event.keyCode == 13) { add_opponent() }" /> -</p> -<button class="bt" id="oppaddbt" type="button" - onclick="add_opponent()">Add Opponent</button> -</form> </div> </div> This was sent by the SourceForge.net collaborative development platform, the world's largest Open Source development site. |
From: <luk...@us...> - 2011-03-11 01:08:34
|
Revision: 1350 http://toss.svn.sourceforge.net/toss/?rev=1350&view=rev Author: lukaszkaiser Date: 2011-03-11 01:08:26 +0000 (Fri, 11 Mar 2011) Log Message: ----------- Guest play in WebClient. Modified Paths: -------------- trunk/Toss/WebClient/Login.js trunk/Toss/WebClient/Main.js trunk/Toss/WebClient/Style.css trunk/Toss/WebClient/index.html Added Paths: ----------- trunk/Toss/WebClient/pics/ trunk/Toss/WebClient/pics/Breakthrough.png trunk/Toss/WebClient/pics/Breakthrough.svg trunk/Toss/WebClient/pics/Checkers.html trunk/Toss/WebClient/pics/Checkers.png trunk/Toss/WebClient/pics/Checkers.svg trunk/Toss/WebClient/pics/Chess.png trunk/Toss/WebClient/pics/Chess.svg trunk/Toss/WebClient/pics/Connect4.png trunk/Toss/WebClient/pics/Connect4.svg trunk/Toss/WebClient/pics/Entanglement.png trunk/Toss/WebClient/pics/Entanglement.svg trunk/Toss/WebClient/pics/Gomoku.png trunk/Toss/WebClient/pics/Gomoku.svg trunk/Toss/WebClient/pics/Pawn-Whopping.png trunk/Toss/WebClient/pics/Pawn-Whopping.svg 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 Modified: trunk/Toss/WebClient/Login.js =================================================================== --- trunk/Toss/WebClient/Login.js 2011-03-10 18:14:24 UTC (rev 1349) +++ trunk/Toss/WebClient/Login.js 2011-03-11 01:08:26 UTC (rev 1350) @@ -151,6 +151,10 @@ alert ("Your username must not contain spaces." + CORRMSG); return; } + if (un == "guest" || un == "computer") { + alert ("Your username must not be 'guest' or 'computer'." + CORRMSG); + return; + } if (pwd.length < 3) { alert ("Your password is too short." + CORRMSG); return; Modified: trunk/Toss/WebClient/Main.js =================================================================== --- trunk/Toss/WebClient/Main.js 2011-03-10 18:14:24 UTC (rev 1349) +++ trunk/Toss/WebClient/Main.js 2011-03-11 01:08:26 UTC (rev 1350) @@ -218,8 +218,8 @@ 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; + alert ("It is your Opponent's turn"); + return; } document.getElementById("working").style.display = "block"; var info = srv("MOVE_PLAY", 'c, '+ CUR_MOVE +', '+ play_py_id (CUR_PLAY_I)); @@ -238,7 +238,7 @@ 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") { - var m = suggest_move_better (); + var m = suggest_move (); if (m != "") { make_move (); } } } @@ -333,6 +333,17 @@ return ("'''" + svg_s + "'''"); } +function new_play_guest (game) { + if (game == "Chess") { + alert ("At present Chess is not supported in automatic mode.\n" + + "Please Register (above, right) to play against Your Friends."); + return + } + GAME_NAME = game; + UNAME = "guest"; + new_play_do ("computer"); +} + function new_play_do (opp_uid) { list_plays (GAME_NAME) game_click (GAME_NAME) Modified: trunk/Toss/WebClient/Style.css =================================================================== --- trunk/Toss/WebClient/Style.css 2011-03-10 18:14:24 UTC (rev 1349) +++ trunk/Toss/WebClient/Style.css 2011-03-11 01:08:26 UTC (rev 1350) @@ -484,8 +484,9 @@ #welcome { text-align: justify; - margin-top: 5em; + margin-top: 4em; margin-left: 2em; + margin-bottom: 2em; } #welcome-top { Modified: trunk/Toss/WebClient/index.html =================================================================== --- trunk/Toss/WebClient/index.html 2011-03-10 18:14:24 UTC (rev 1349) +++ trunk/Toss/WebClient/index.html 2011-03-11 01:08:26 UTC (rev 1350) @@ -75,6 +75,45 @@ <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%" + class="boldobt" title="Play Chess"> + <img style="max-width:95%" src="pics/Chess.png" alt="Chess Board"> +</button> +<button onclick="new_play_guest('Connect4')" style="width:24%" + class="boldobt" title="Play Connect4"> + <img style="max-width:95%" src="pics/Connect4.png" alt="Connect4 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> +<button onclick="new_play_guest('Gomoku')" style="width:24%" + class="boldobt" title="Play Gomoku"> + <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"> <li>Play Breakthrough, Checkers, Chess, Gomoku and many other board games</li> <li>Challenge your friends or play a fast game against the computer for fun</li> @@ -83,6 +122,7 @@ <li>Invent new games with <a href="http://toss.sourceforge.net/">Toss</a> and play them online here</li> </ul> + </div> <div id="nosvg" Added: trunk/Toss/WebClient/pics/Breakthrough.png =================================================================== (Binary files differ) Property changes on: trunk/Toss/WebClient/pics/Breakthrough.png ___________________________________________________________________ Added: svn:mime-type + application/octet-stream Added: trunk/Toss/WebClient/pics/Breakthrough.svg =================================================================== --- trunk/Toss/WebClient/pics/Breakthrough.svg (rev 0) +++ trunk/Toss/WebClient/pics/Breakthrough.svg 2011-03-11 01:08:26 UTC (rev 1350) @@ -0,0 +1,3 @@ +<?xml-stylesheet href="Style.css" type="text/css"?> +<svg id="svg" viewBox="0 0 580 580"> +<rect class="model-elem-0" x="4.285714285714285" y="504.2857142857143" width="71.42857142857143" height="71.42857142857143" id="elem_a1" ></rect><rect class="model-elem-1" x="75.71428571428572" y="504.2857142857143" width="71.42857142857143" height="71.42857142857143" id="elem_b1" ></rect><rect class="model-elem-0" x="147.14285714285714" y="504.2857142857143" width="71.42857142857143" height="71.42857142857143" id="elem_c1" ></rect><rect class="model-elem-1" x="218.57142857142856" y="504.2857142857143" width="71.42857142857143" height="71.42857142857143" id="elem_d1" ></rect><rect class="model-elem-0" x="290" y="504.2857142857143" width="71.42857142857143" height="71.42857142857143" id="elem_e1" ></rect><rect class="model-elem-1" x="361.42857142857144" y="504.2857142857143" width="71.42857142857143" height="71.42857142857143" id="elem_f1" ></rect><rect class="model-elem-0" x="432.85714285714283" y="504.2857142857143" width="71.42857142857143" height="71.42857142857143" id="elem_g1" ></rect><rect class="model-elem-1" x="504.2857142857143" y="504.2857142857143" width="71.42857142857143" height="71.42857142857143" id="elem_h1" ></rect><rect class="model-elem-1" x="4.285714285714285" y="432.85714285714283" width="71.42857142857143" height="71.42857142857143" id="elem_a2" ></rect><rect class="model-elem-0" x="75.71428571428572" y="432.85714285714283" width="71.42857142857143" height="71.42857142857143" id="elem_b2" ></rect><rect class="model-elem-1" x="147.14285714285714" y="432.85714285714283" width="71.42857142857143" height="71.42857142857143" id="elem_c2" ></rect><rect class="model-elem-0" x="218.57142857142856" y="432.85714285714283" width="71.42857142857143" height="71.42857142857143" id="elem_d2" ></rect><rect class="model-elem-1" x="290" y="432.85714285714283" width="71.42857142857143" height="71.42857142857143" id="elem_e2" ></rect><rect class="model-elem-0" x="361.42857142857144" y="432.85714285714283" width="71.42857142857143" height="71.42857142857143" id="elem_f2" ></rect><rect class="model-elem-1" x="432.85714285714283" y="432.85714285714283" width="71.42857142857143" height="71.42857142857143" id="elem_g2" ></rect><rect class="model-elem-0" x="504.2857142857143" y="432.85714285714283" width="71.42857142857143" height="71.42857142857143" id="elem_h2" ></rect><rect class="model-elem-0" x="4.285714285714285" y="361.42857142857144" width="71.42857142857143" height="71.42857142857143" id="elem_a3" ></rect><rect class="model-elem-1" x="75.71428571428572" y="361.42857142857144" width="71.42857142857143" height="71.42857142857143" id="elem_b3" ></rect><rect class="model-elem-0" x="147.14285714285714" y="361.42857142857144" width="71.42857142857143" height="71.42857142857143" id="elem_c3" ></rect><rect class="model-elem-1" x="218.57142857142856" y="361.42857142857144" width="71.42857142857143" height="71.42857142857143" id="elem_d3" ></rect><rect class="model-elem-0" x="290" y="361.42857142857144" width="71.42857142857143" height="71.42857142857143" id="elem_e3" ></rect><rect class="model-elem-1" x="361.42857142857144" y="361.42857142857144" width="71.42857142857143" height="71.42857142857143" id="elem_f3" ></rect><rect class="model-elem-0" x="432.85714285714283" y="361.42857142857144" width="71.42857142857143" height="71.42857142857143" id="elem_g3" ></rect><rect class="model-elem-1" x="504.2857142857143" y="361.42857142857144" width="71.42857142857143" height="71.42857142857143" id="elem_h3" ></rect><rect class="model-elem-1" x="4.285714285714285" y="290" width="71.42857142857143" height="71.42857142857143" id="elem_a4" ></rect><rect class="model-elem-0" x="75.71428571428572" y="290" width="71.42857142857143" height="71.42857142857143" id="elem_b4" ></rect><rect class="model-elem-1" x="147.14285714285714" y="290" width="71.42857142857143" height="71.42857142857143" id="elem_c4" ></rect><rect class="model-elem-0" x="218.57142857142856" y="290" width="71.42857142857143" height="71.42857142857143" id="elem_d4" ></rect><rect class="model-elem-1" x="290" y="290" width="71.42857142857143" height="71.42857142857143" id="elem_e4" ></rect><rect class="model-elem-0" x="361.42857142857144" y="290" width="71.42857142857143" height="71.42857142857143" id="elem_f4" ></rect><rect class="model-elem-1" x="432.85714285714283" y="290" width="71.42857142857143" height="71.42857142857143" id="elem_g4" ></rect><rect class="model-elem-0" x="504.2857142857143" y="290" width="71.42857142857143" height="71.42857142857143" id="elem_h4" ></rect><rect class="model-elem-0" x="4.285714285714285" y="218.57142857142856" width="71.42857142857143" height="71.42857142857143" id="elem_a5" ></rect><rect class="model-elem-1" x="75.71428571428572" y="218.57142857142856" width="71.42857142857143" height="71.42857142857143" id="elem_b5" ></rect><rect class="model-elem-0" x="147.14285714285714" y="218.57142857142856" width="71.42857142857143" height="71.42857142857143" id="elem_c5" ></rect><rect class="model-elem-1" x="218.57142857142856" y="218.57142857142856" width="71.42857142857143" height="71.42857142857143" id="elem_d5" ></rect><rect class="model-elem-0" x="290" y="218.57142857142856" width="71.42857142857143" height="71.42857142857143" id="elem_e5" ></rect><rect class="model-elem-1" x="361.42857142857144" y="218.57142857142856" width="71.42857142857143" height="71.42857142857143" id="elem_f5" ></rect><rect class="model-elem-0" x="432.85714285714283" y="218.57142857142856" width="71.42857142857143" height="71.42857142857143" id="elem_g5" ></rect><rect class="model-elem-1" x="504.2857142857143" y="218.57142857142856" width="71.42857142857143" height="71.42857142857143" id="elem_h5" ></rect><rect class="model-elem-1" x="4.285714285714285" y="147.14285714285714" width="71.42857142857143" height="71.42857142857143" id="elem_a6" ></rect><rect class="model-elem-0" x="75.71428571428572" y="147.14285714285714" width="71.42857142857143" height="71.42857142857143" id="elem_b6" ></rect><rect class="model-elem-1" x="147.14285714285714" y="147.14285714285714" width="71.42857142857143" height="71.42857142857143" id="elem_c6" ></rect><rect class="model-elem-0" x="218.57142857142856" y="147.14285714285714" width="71.42857142857143" height="71.42857142857143" id="elem_d6" ></rect><rect class="model-elem-1" x="290" y="147.14285714285714" width="71.42857142857143" height="71.42857142857143" id="elem_e6" ></rect><rect class="model-elem-0" x="361.42857142857144" y="147.14285714285714" width="71.42857142857143" height="71.42857142857143" id="elem_f6" ></rect><rect class="model-elem-1" x="432.85714285714283" y="147.14285714285714" width="71.42857142857143" height="71.42857142857143" id="elem_g6" ></rect><rect class="model-elem-0" x="504.2857142857143" y="147.14285714285714" width="71.42857142857143" height="71.42857142857143" id="elem_h6" ></rect><rect class="model-elem-0" x="4.285714285714285" y="75.71428571428572" width="71.42857142857143" height="71.42857142857143" id="elem_a7" ></rect><rect class="model-elem-1" x="75.71428571428572" y="75.71428571428572" width="71.42857142857143" height="71.42857142857143" id="elem_b7" ></rect><rect class="model-elem-0" x="147.14285714285714" y="75.71428571428572" width="71.42857142857143" height="71.42857142857143" id="elem_c7" ></rect><rect class="model-elem-1" x="218.57142857142856" y="75.71428571428572" width="71.42857142857143" height="71.42857142857143" id="elem_d7" ></rect><rect class="model-elem-0" x="290" y="75.71428571428572" width="71.42857142857143" height="71.42857142857143" id="elem_e7" ></rect><rect class="model-elem-1" x="361.42857142857144" y="75.71428571428572" width="71.42857142857143" height="71.42857142857143" id="elem_f7" ></rect><rect class="model-elem-0" x="432.85714285714283" y="75.71428571428572" width="71.42857142857143" height="71.42857142857143" id="elem_g7" ></rect><rect class="model-elem-1" x="504.2857142857143" y="75.71428571428572" width="71.42857142857143" height="71.42857142857143" id="elem_h7" ></rect><rect class="model-elem-1" x="4.285714285714285" y="4.285714285714285" width="71.42857142857143" height="71.42857142857143" id="elem_a8" ></rect><rect class="model-elem-0" x="75.71428571428572" y="4.285714285714285" width="71.42857142857143" height="71.42857142857143" id="elem_b8" ></rect><rect class="model-elem-1" x="147.14285714285714" y="4.285714285714285" width="71.42857142857143" height="71.42857142857143" id="elem_c8" ></rect><rect class="model-elem-0" x="218.57142857142856" y="4.285714285714285" width="71.42857142857143" height="71.42857142857143" id="elem_d8" ></rect><rect class="model-elem-1" x="290" y="4.285714285714285" width="71.42857142857143" height="71.42857142857143" id="elem_e8" ></rect><rect class="model-elem-0" x="361.42857142857144" y="4.285714285714285" width="71.42857142857143" height="71.42857142857143" id="elem_f8" ></rect><rect class="model-elem-1" x="432.85714285714283" y="4.285714285714285" width="71.42857142857143" height="71.42857142857143" id="elem_g8" ></rect><rect class="model-elem-0" x="504.2857142857143" y="4.285714285714285" width="71.42857142857143" height="71.42857142857143" id="elem_h8" ></rect><circle class="model-pred-B" cx="40" cy="111.42857142857143" r="23.714285714285715" id="pred_a7_B" stroke-width="5.571428571428571" ></circle><circle class="model-pred-B" cx="111.42857142857143" cy="111.42857142857143" r="23.714285714285715" id="pred_b7_B" stroke-width="5.571428571428571" ></circle><circle class="model-pred-B" cx="182.85714285714286" cy="111.42857142857143" r="23.714285714285715" id="pred_c7_B" stroke-width="5.571428571428571" ></circle><circle class="model-pred-B" cx="254.28571428571428" cy="111.42857142857143" r="23.714285714285715" id="pred_d7_B" stroke-width="5.571428571428571" ></circle><circle class="model-pred-B" cx="325.7142857142857" cy="111.42857142857143" r="23.714285714285715" id="pred_e7_B" stroke-width="5.571428571428571" ></circle><circle class="model-pred-B" cx="397.14285714285717" cy="111.42857142857143" r="23.714285714285715" id="pred_f7_B" stroke-width="5.571428571428571" ></circle><circle class="model-pred-B" cx="468.57142857142856" cy="111.42857142857143" r="23.714285714285715" id="pred_g7_B" stroke-width="5.571428571428571" ></circle><circle class="model-pred-B" cx="540" cy="111.42857142857143" r="23.714285714285715" id="pred_h7_B" stroke-width="5.571428571428571" ></circle><circle class="model-pred-B" cx="40" cy="40" r="23.714285714285715" id="pred_a8_B" stroke-width="5.571428571428571" ></circle><circle class="model-pred-B" cx="111.42857142857143" cy="40" r="23.714285714285715" id="pred_b8_B" stroke-width="5.571428571428571" ></circle><circle class="model-pred-B" cx="182.85714285714286" cy="40" r="23.714285714285715" id="pred_c8_B" stroke-width="5.571428571428571" ></circle><circle class="model-pred-B" cx="254.28571428571428" cy="40" r="23.714285714285715" id="pred_d8_B" stroke-width="5.571428571428571" ></circle><circle class="model-pred-B" cx="325.7142857142857" cy="40" r="23.714285714285715" id="pred_e8_B" stroke-width="5.571428571428571" ></circle><circle class="model-pred-B" cx="397.14285714285717" cy="40" r="23.714285714285715" id="pred_f8_B" stroke-width="5.571428571428571" ></circle><circle class="model-pred-B" cx="468.57142857142856" cy="40" r="23.714285714285715" id="pred_g8_B" stroke-width="5.571428571428571" ></circle><circle class="model-pred-B" cx="540" cy="40" r="23.714285714285715" id="pred_h8_B" stroke-width="5.571428571428571" ></circle><circle class="model-pred-W" cx="40" cy="540" r="23.714285714285715" id="pred_a1_W" stroke-width="5.571428571428571" ></circle><circle class="model-pred-W" cx="111.42857142857143" cy="540" r="23.714285714285715" id="pred_b1_W" stroke-width="5.571428571428571" ></circle><circle class="model-pred-W" cx="182.85714285714286" cy="540" r="23.714285714285715" id="pred_c1_W" stroke-width="5.571428571428571" ></circle><circle class="model-pred-W" cx="254.28571428571428" cy="540" r="23.714285714285715" id="pred_d1_W" stroke-width="5.571428571428571" ></circle><circle class="model-pred-W" cx="325.7142857142857" cy="540" r="23.714285714285715" id="pred_e1_W" stroke-width="5.571428571428571" ></circle><circle class="model-pred-W" cx="397.14285714285717" cy="540" r="23.714285714285715" id="pred_f1_W" stroke-width="5.571428571428571" ></circle><circle class="model-pred-W" cx="468.57142857142856" cy="540" r="23.714285714285715" id="pred_g1_W" stroke-width="5.571428571428571" ></circle><circle class="model-pred-W" cx="540" cy="540" r="23.714285714285715" id="pred_h1_W" stroke-width="5.571428571428571" ></circle><circle class="model-pred-W" cx="40" cy="468.57142857142856" r="23.714285714285715" id="pred_a2_W" stroke-width="5.571428571428571" ></circle><circle class="model-pred-W" cx="111.42857142857143" cy="468.57142857142856" r="23.714285714285715" id="pred_b2_W" stroke-width="5.571428571428571" ></circle><circle class="model-pred-W" cx="182.85714285714286" cy="468.57142857142856" r="23.714285714285715" id="pred_c2_W" stroke-width="5.571428571428571" ></circle><circle class="model-pred-W" cx="254.28571428571428" cy="468.57142857142856" r="23.714285714285715" id="pred_d2_W" stroke-width="5.571428571428571" ></circle><circle class="model-pred-W" cx="325.7142857142857" cy="468.57142857142856" r="23.714285714285715" id="pred_e2_W" stroke-width="5.571428571428571" ></circle><circle class="model-pred-W" cx="397.14285714285717" cy="468.57142857142856" r="23.714285714285715" id="pred_f2_W" stroke-width="5.571428571428571" ></circle><circle class="model-pred-W" cx="468.57142857142856" cy="468.57142857142856" r="23.714285714285715" id="pred_g2_W" stroke-width="5.571428571428571" ></circle><circle class="model-pred-W" cx="540" cy="468.57142857142856" r="23.714285714285715" id="pred_h2_W" stroke-width="5.571428571428571" ></circle></svg> Added: trunk/Toss/WebClient/pics/Checkers.html =================================================================== --- trunk/Toss/WebClient/pics/Checkers.html (rev 0) +++ trunk/Toss/WebClient/pics/Checkers.html 2011-03-11 01:08:26 UTC (rev 1350) @@ -0,0 +1,16 @@ +<!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</title> + <meta name="Description" + content="Play the best strategic games online with a nice interface." /> + <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"/> +</head> +<body> +<svg id="svg" class="Game-Checkers" viewBox="0 0 580 580"><rect class="model-elem-0" x="4.285714285714285" y="504.2857142857143" width="71.42857142857143" height="71.42857142857143" id="elem_a1" ></rect><rect class="model-elem-1" x="75.71428571428572" y="504.2857142857143" width="71.42857142857143" height="71.42857142857143" id="elem_b1" ></rect><rect class="model-elem-0" x="147.14285714285714" y="504.2857142857143" width="71.42857142857143" height="71.42857142857143" id="elem_c1" ></rect><rect class="model-elem-1" x="218.57142857142856" y="504.2857142857143" width="71.42857142857143" height="71.42857142857143" id="elem_d1" ></rect><rect class="model-elem-0" x="290" y="504.2857142857143" width="71.42857142857143" height="71.42857142857143" id="elem_e1" ></rect><rect class="model-elem-1" x="361.42857142857144" y="504.2857142857143" width="71.42857142857143" height="71.42857142857143" id="elem_f1" ></rect><rect class="model-elem-0" x="432.85714285714283" y="504.2857142857143" width="71.42857142857143" height="71.42857142857143" id="elem_g1" ></rect><rect class="model-elem-1" x="504.2857142857143" y="504.2857142857143" width="71.42857142857143" height="71.42857142857143" id="elem_h1" ></rect><rect class="model-elem-1" x="4.285714285714285" y="432.85714285714283" width="71.42857142857143" height="71.42857142857143" id="elem_a2" ></rect><rect class="model-elem-0" x="75.71428571428572" y="432.85714285714283" width="71.42857142857143" height="71.42857142857143" id="elem_b2" ></rect><rect class="model-elem-1" x="147.14285714285714" y="432.85714285714283" width="71.42857142857143" height="71.42857142857143" id="elem_c2" ></rect><rect class="model-elem-0" x="218.57142857142856" y="432.85714285714283" width="71.42857142857143" height="71.42857142857143" id="elem_d2" ></rect><rect class="model-elem-1" x="290" y="432.85714285714283" width="71.42857142857143" height="71.42857142857143" id="elem_e2" ></rect><rect class="model-elem-0" x="361.42857142857144" y="432.85714285714283" width="71.42857142857143" height="71.42857142857143" id="elem_f2" ></rect><rect class="model-elem-1" x="432.85714285714283" y="432.85714285714283" width="71.42857142857143" height="71.42857142857143" id="elem_g2" ></rect><rect class="model-elem-0" x="504.2857142857143" y="432.85714285714283" width="71.42857142857143" height="71.42857142857143" id="elem_h2" ></rect><rect class="model-elem-0" x="4.285714285714285" y="361.42857142857144" width="71.42857142857143" height="71.42857142857143" id="elem_a3" ></rect><rect class="model-elem-1" x="75.71428571428572" y="361.42857142857144" width="71.42857142857143" height="71.42857142857143" id="elem_b3" ></rect><rect class="model-elem-0" x="147.14285714285714" y="361.42857142857144" width="71.42857142857143" height="71.42857142857143" id="elem_c3" ></rect><rect class="model-elem-1" x="218.57142857142856" y="361.42857142857144" width="71.42857142857143" height="71.42857142857143" id="elem_d3" ></rect><rect class="model-elem-0" x="290" y="361.42857142857144" width="71.42857142857143" height="71.42857142857143" id="elem_e3" ></rect><rect class="model-elem-1" x="361.42857142857144" y="361.42857142857144" width="71.42857142857143" height="71.42857142857143" id="elem_f3" ></rect><rect class="model-elem-0" x="432.85714285714283" y="361.42857142857144" width="71.42857142857143" height="71.42857142857143" id="elem_g3" ></rect><rect class="model-elem-1" x="504.2857142857143" y="361.42857142857144" width="71.42857142857143" height="71.42857142857143" id="elem_h3" ></rect><rect class="model-elem-1" x="4.285714285714285" y="290" width="71.42857142857143" height="71.42857142857143" id="elem_a4" ></rect><rect class="model-elem-0" x="75.71428571428572" y="290" width="71.42857142857143" height="71.42857142857143" id="elem_b4" ></rect><rect class="model-elem-1" x="147.14285714285714" y="290" width="71.42857142857143" height="71.42857142857143" id="elem_c4" ></rect><rect class="model-elem-0" x="218.57142857142856" y="290" width="71.42857142857143" height="71.42857142857143" id="elem_d4" ></rect><rect class="model-elem-1" x="290" y="290" width="71.42857142857143" height="71.42857142857143" id="elem_e4" ></rect><rect class="model-elem-0" x="361.42857142857144" y="290" width="71.42857142857143" height="71.42857142857143" id="elem_f4" ></rect><rect class="model-elem-1" x="432.85714285714283" y="290" width="71.42857142857143" height="71.42857142857143" id="elem_g4" ></rect><rect class="model-elem-0" x="504.2857142857143" y="290" width="71.42857142857143" height="71.42857142857143" id="elem_h4" ></rect><rect class="model-elem-0" x="4.285714285714285" y="218.57142857142856" width="71.42857142857143" height="71.42857142857143" id="elem_a5" ></rect><rect class="model-elem-1" x="75.71428571428572" y="218.57142857142856" width="71.42857142857143" height="71.42857142857143" id="elem_b5" ></rect><rect class="model-elem-0" x="147.14285714285714" y="218.57142857142856" width="71.42857142857143" height="71.42857142857143" id="elem_c5" ></rect><rect class="model-elem-1" x="218.57142857142856" y="218.57142857142856" width="71.42857142857143" height="71.42857142857143" id="elem_d5" ></rect><rect class="model-elem-0" x="290" y="218.57142857142856" width="71.42857142857143" height="71.42857142857143" id="elem_e5" ></rect><rect class="model-elem-1" x="361.42857142857144" y="218.57142857142856" width="71.42857142857143" height="71.42857142857143" id="elem_f5" ></rect><rect class="model-elem-0" x="432.85714285714283" y="218.57142857142856" width="71.42857142857143" height="71.42857142857143" id="elem_g5" ></rect><rect class="model-elem-1" x="504.2857142857143" y="218.57142857142856" width="71.42857142857143" height="71.42857142857143" id="elem_h5" ></rect><rect class="model-elem-1" x="4.285714285714285" y="147.14285714285714" width="71.42857142857143" height="71.42857142857143" id="elem_a6" ></rect><rect class="model-elem-0" x="75.71428571428572" y="147.14285714285714" width="71.42857142857143" height="71.42857142857143" id="elem_b6" ></rect><rect class="model-elem-1" x="147.14285714285714" y="147.14285714285714" width="71.42857142857143" height="71.42857142857143" id="elem_c6" ></rect><rect class="model-elem-0" x="218.57142857142856" y="147.14285714285714" width="71.42857142857143" height="71.42857142857143" id="elem_d6" ></rect><rect class="model-elem-1" x="290" y="147.14285714285714" width="71.42857142857143" height="71.42857142857143" id="elem_e6" ></rect><rect class="model-elem-0" x="361.42857142857144" y="147.14285714285714" width="71.42857142857143" height="71.42857142857143" id="elem_f6" ></rect><rect class="model-elem-1" x="432.85714285714283" y="147.14285714285714" width="71.42857142857143" height="71.42857142857143" id="elem_g6" ></rect><rect class="model-elem-0" x="504.2857142857143" y="147.14285714285714" width="71.42857142857143" height="71.42857142857143" id="elem_h6" ></rect><rect class="model-elem-0" x="4.285714285714285" y="75.71428571428572" width="71.42857142857143" height="71.42857142857143" id="elem_a7" ></rect><rect class="model-elem-1" x="75.71428571428572" y="75.71428571428572" width="71.42857142857143" height="71.42857142857143" id="elem_b7" ></rect><rect class="model-elem-0" x="147.14285714285714" y="75.71428571428572" width="71.42857142857143" height="71.42857142857143" id="elem_c7" ></rect><rect class="model-elem-1" x="218.57142857142856" y="75.71428571428572" width="71.42857142857143" height="71.42857142857143" id="elem_d7" ></rect><rect class="model-elem-0" x="290" y="75.71428571428572" width="71.42857142857143" height="71.42857142857143" id="elem_e7" ></rect><rect class="model-elem-1" x="361.42857142857144" y="75.71428571428572" width="71.42857142857143" height="71.42857142857143" id="elem_f7" ></rect><rect class="model-elem-0" x="432.85714285714283" y="75.71428571428572" width="71.42857142857143" height="71.42857142857143" id="elem_g7" ></rect><rect class="model-elem-1" x="504.2857142857143" y="75.71428571428572" width="71.42857142857143" height="71.42857142857143" id="elem_h7" ></rect><rect class="model-elem-1" x="4.285714285714285" y="4.285714285714285" width="71.42857142857143" height="71.42857142857143" id="elem_a8" ></rect><rect class="model-elem-0" x="75.71428571428572" y="4.285714285714285" width="71.42857142857143" height="71.42857142857143" id="elem_b8" ></rect><rect class="model-elem-1" x="147.14285714285714" y="4.285714285714285" width="71.42857142857143" height="71.42857142857143" id="elem_c8" ></rect><rect class="model-elem-0" x="218.57142857142856" y="4.285714285714285" width="71.42857142857143" height="71.42857142857143" id="elem_d8" ></rect><rect class="model-elem-1" x="290" y="4.285714285714285" width="71.42857142857143" height="71.42857142857143" id="elem_e8" ></rect><rect class="model-elem-0" x="361.42857142857144" y="4.285714285714285" width="71.42857142857143" height="71.42857142857143" id="elem_f8" ></rect><rect class="model-elem-1" x="432.85714285714283" y="4.285714285714285" width="71.42857142857143" height="71.42857142857143" id="elem_g8" ></rect><rect class="model-elem-0" x="504.2857142857143" y="4.285714285714285" width="71.42857142857143" height="71.42857142857143" id="elem_h8" ></rect><circle class="model-pred-W" cx="40" cy="540" r="23.714285714285715" id="pred_a1_W" stroke-width="5.571428571428571" ></circle><circle class="model-pred-W" cx="182.85714285714286" cy="540" r="23.714285714285715" id="pred_c1_W" stroke-width="5.571428571428571" ></circle><circle class="model-pred-W" cx="325.7142857142857" cy="540" r="23.714285714285715" id="pred_e1_W" stroke-width="5.571428571428571" ></circle><circle class="model-pred-W" cx="468.57142857142856" cy="540" r="23.714285714285715" id="pred_g1_W" stroke-width="5.571428571428571" ></circle><circle class="model-pred-W" cx="111.42857142857143" cy="468.57142857142856" r="23.714285714285715" id="pred_b2_W" stroke-width="5.571428571428571" ></circle><circle class="model-pred-W" cx="254.28571428571428" cy="468.57142857142856" r="23.714285714285715" id="pred_d2_W" stroke-width="5.571428571428571" ></circle><circle class="model-pred-W" cx="397.14285714285717" cy="468.57142857142856" r="23.714285714285715" id="pred_f2_W" stroke-width="5.571428571428571" ></circle><circle class="model-pred-W" cx="540" cy="468.57142857142856" r="23.714285714285715" id="pred_h2_W" stroke-width="5.571428571428571" ></circle><circle class="model-pred-W" cx="40" cy="397.14285714285717" r="23.714285714285715" id="pred_a3_W" stroke-width="5.571428571428571" ></circle><circle class="model-pred-W" cx="182.85714285714286" cy="397.14285714285717" r="23.714285714285715" id="pred_c3_W" stroke-width="5.571428571428571" ></circle><circle class="model-pred-W" cx="325.7142857142857" cy="397.14285714285717" r="23.714285714285715" id="pred_e3_W" stroke-width="5.571428571428571" ></circle><circle class="model-pred-W" cx="468.57142857142856" cy="397.14285714285717" r="23.714285714285715" id="pred_g3_W" stroke-width="5.571428571428571" ></circle><circle class="model-pred-B" cx="111.42857142857143" cy="182.85714285714286" r="23.714285714285715" id="pred_b6_B" stroke-width="5.571428571428571" ></circle><circle class="model-pred-B" cx="254.28571428571428" cy="182.85714285714286" r="23.714285714285715" id="pred_d6_B" stroke-width="5.571428571428571" ></circle><circle class="model-pred-B" cx="397.14285714285717" cy="182.85714285714286" r="23.714285714285715" id="pred_f6_B" stroke-width="5.571428571428571" ></circle><circle class="model-pred-B" cx="540" cy="182.85714285714286" r="23.714285714285715" id="pred_h6_B" stroke-width="5.571428571428571" ></circle><circle class="model-pred-B" cx="40" cy="111.42857142857143" r="23.714285714285715" id="pred_a7_B" stroke-width="5.571428571428571" ></circle><circle class="model-pred-B" cx="182.85714285714286" cy="111.42857142857143" r="23.714285714285715" id="pred_c7_B" stroke-width="5.571428571428571" ></circle><circle class="model-pred-B" cx="325.7142857142857" cy="111.42857142857143" r="23.714285714285715" id="pred_e7_B" stroke-width="5.571428571428571" ></circle><circle class="model-pred-B" cx="468.57142857142856" cy="111.42857142857143" r="23.714285714285715" id="pred_g7_B" stroke-width="5.571428571428571" ></circle><circle class="model-pred-B" cx="111.42857142857143" cy="40" r="23.714285714285715" id="pred_b8_B" stroke-width="5.571428571428571" ></circle><circle class="model-pred-B" cx="254.28571428571428" cy="40" r="23.714285714285715" id="pred_d8_B" stroke-width="5.571428571428571" ></circle><circle class="model-pred-B" cx="397.14285714285717" cy="40" r="23.714285714285715" id="pred_f8_B" stroke-width="5.571428571428571" ></circle><circle class="model-pred-B" cx="540" cy="40" r="23.714285714285715" id="pred_h8_B" stroke-width="5.571428571428571" ></circle></svg> +</body> +</html> Added: trunk/Toss/WebClient/pics/Checkers.png =================================================================== (Binary files differ) Property changes on: trunk/Toss/WebClient/pics/Checkers.png ___________________________________________________________________ Added: svn:mime-type + application/octet-stream Added: trunk/Toss/WebClient/pics/Checkers.svg =================================================================== --- trunk/Toss/WebClient/pics/Checkers.svg (rev 0) +++ trunk/Toss/WebClient/pics/Checkers.svg 2011-03-11 01:08:26 UTC (rev 1350) @@ -0,0 +1,2 @@ +<?xml-stylesheet href="Style2.css" type="text/css"?> +<svg id="svg" viewBox="0 0 580 580"><rect class="model-elem-0" x="4.285714285714285" y="504.2857142857143" width="71.42857142857143" height="71.42857142857143" id="elem_a1" ></rect><rect class="model-elem-1" x="75.71428571428572" y="504.2857142857143" width="71.42857142857143" height="71.42857142857143" id="elem_b1" ></rect><rect class="model-elem-0" x="147.14285714285714" y="504.2857142857143" width="71.42857142857143" height="71.42857142857143" id="elem_c1" ></rect><rect class="model-elem-1" x="218.57142857142856" y="504.2857142857143" width="71.42857142857143" height="71.42857142857143" id="elem_d1" ></rect><rect class="model-elem-0" x="290" y="504.2857142857143" width="71.42857142857143" height="71.42857142857143" id="elem_e1" ></rect><rect class="model-elem-1" x="361.42857142857144" y="504.2857142857143" width="71.42857142857143" height="71.42857142857143" id="elem_f1" ></rect><rect class="model-elem-0" x="432.85714285714283" y="504.2857142857143" width="71.42857142857143" height="71.42857142857143" id="elem_g1" ></rect><rect class="model-elem-1" x="504.2857142857143" y="504.2857142857143" width="71.42857142857143" height="71.42857142857143" id="elem_h1" ></rect><rect class="model-elem-1" x="4.285714285714285" y="432.85714285714283" width="71.42857142857143" height="71.42857142857143" id="elem_a2" ></rect><rect class="model-elem-0" x="75.71428571428572" y="432.85714285714283" width="71.42857142857143" height="71.42857142857143" id="elem_b2" ></rect><rect class="model-elem-1" x="147.14285714285714" y="432.85714285714283" width="71.42857142857143" height="71.42857142857143" id="elem_c2" ></rect><rect class="model-elem-0" x="218.57142857142856" y="432.85714285714283" width="71.42857142857143" height="71.42857142857143" id="elem_d2" ></rect><rect class="model-elem-1" x="290" y="432.85714285714283" width="71.42857142857143" height="71.42857142857143" id="elem_e2" ></rect><rect class="model-elem-0" x="361.42857142857144" y="432.85714285714283" width="71.42857142857143" height="71.42857142857143" id="elem_f2" ></rect><rect class="model-elem-1" x="432.85714285714283" y="432.85714285714283" width="71.42857142857143" height="71.42857142857143" id="elem_g2" ></rect><rect class="model-elem-0" x="504.2857142857143" y="432.85714285714283" width="71.42857142857143" height="71.42857142857143" id="elem_h2" ></rect><rect class="model-elem-0" x="4.285714285714285" y="361.42857142857144" width="71.42857142857143" height="71.42857142857143" id="elem_a3" ></rect><rect class="model-elem-1" x="75.71428571428572" y="361.42857142857144" width="71.42857142857143" height="71.42857142857143" id="elem_b3" ></rect><rect class="model-elem-0" x="147.14285714285714" y="361.42857142857144" width="71.42857142857143" height="71.42857142857143" id="elem_c3" ></rect><rect class="model-elem-1" x="218.57142857142856" y="361.42857142857144" width="71.42857142857143" height="71.42857142857143" id="elem_d3" ></rect><rect class="model-elem-0" x="290" y="361.42857142857144" width="71.42857142857143" height="71.42857142857143" id="elem_e3" ></rect><rect class="model-elem-1" x="361.42857142857144" y="361.42857142857144" width="71.42857142857143" height="71.42857142857143" id="elem_f3" ></rect><rect class="model-elem-0" x="432.85714285714283" y="361.42857142857144" width="71.42857142857143" height="71.42857142857143" id="elem_g3" ></rect><rect class="model-elem-1" x="504.2857142857143" y="361.42857142857144" width="71.42857142857143" height="71.42857142857143" id="elem_h3" ></rect><rect class="model-elem-1" x="4.285714285714285" y="290" width="71.42857142857143" height="71.42857142857143" id="elem_a4" ></rect><rect class="model-elem-0" x="75.71428571428572" y="290" width="71.42857142857143" height="71.42857142857143" id="elem_b4" ></rect><rect class="model-elem-1" x="147.14285714285714" y="290" width="71.42857142857143" height="71.42857142857143" id="elem_c4" ></rect><rect class="model-elem-0" x="218.57142857142856" y="290" width="71.42857142857143" height="71.42857142857143" id="elem_d4" ></rect><rect class="model-elem-1" x="290" y="290" width="71.42857142857143" height="71.42857142857143" id="elem_e4" ></rect><rect class="model-elem-0" x="361.42857142857144" y="290" width="71.42857142857143" height="71.42857142857143" id="elem_f4" ></rect><rect class="model-elem-1" x="432.85714285714283" y="290" width="71.42857142857143" height="71.42857142857143" id="elem_g4" ></rect><rect class="model-elem-0" x="504.2857142857143" y="290" width="71.42857142857143" height="71.42857142857143" id="elem_h4" ></rect><rect class="model-elem-0" x="4.285714285714285" y="218.57142857142856" width="71.42857142857143" height="71.42857142857143" id="elem_a5" ></rect><rect class="model-elem-1" x="75.71428571428572" y="218.57142857142856" width="71.42857142857143" height="71.42857142857143" id="elem_b5" ></rect><rect class="model-elem-0" x="147.14285714285714" y="218.57142857142856" width="71.42857142857143" height="71.42857142857143" id="elem_c5" ></rect><rect class="model-elem-1" x="218.57142857142856" y="218.57142857142856" width="71.42857142857143" height="71.42857142857143" id="elem_d5" ></rect><rect class="model-elem-0" x="290" y="218.57142857142856" width="71.42857142857143" height="71.42857142857143" id="elem_e5" ></rect><rect class="model-elem-1" x="361.42857142857144" y="218.57142857142856" width="71.42857142857143" height="71.42857142857143" id="elem_f5" ></rect><rect class="model-elem-0" x="432.85714285714283" y="218.57142857142856" width="71.42857142857143" height="71.42857142857143" id="elem_g5" ></rect><rect class="model-elem-1" x="504.2857142857143" y="218.57142857142856" width="71.42857142857143" height="71.42857142857143" id="elem_h5" ></rect><rect class="model-elem-1" x="4.285714285714285" y="147.14285714285714" width="71.42857142857143" height="71.42857142857143" id="elem_a6" ></rect><rect class="model-elem-0" x="75.71428571428572" y="147.14285714285714" width="71.42857142857143" height="71.42857142857143" id="elem_b6" ></rect><rect class="model-elem-1" x="147.14285714285714" y="147.14285714285714" width="71.42857142857143" height="71.42857142857143" id="elem_c6" ></rect><rect class="model-elem-0" x="218.57142857142856" y="147.14285714285714" width="71.42857142857143" height="71.42857142857143" id="elem_d6" ></rect><rect class="model-elem-1" x="290" y="147.14285714285714" width="71.42857142857143" height="71.42857142857143" id="elem_e6" ></rect><rect class="model-elem-0" x="361.42857142857144" y="147.14285714285714" width="71.42857142857143" height="71.42857142857143" id="elem_f6" ></rect><rect class="model-elem-1" x="432.85714285714283" y="147.14285714285714" width="71.42857142857143" height="71.42857142857143" id="elem_g6" ></rect><rect class="model-elem-0" x="504.2857142857143" y="147.14285714285714" width="71.42857142857143" height="71.42857142857143" id="elem_h6" ></rect><rect class="model-elem-0" x="4.285714285714285" y="75.71428571428572" width="71.42857142857143" height="71.42857142857143" id="elem_a7" ></rect><rect class="model-elem-1" x="75.71428571428572" y="75.71428571428572" width="71.42857142857143" height="71.42857142857143" id="elem_b7" ></rect><rect class="model-elem-0" x="147.14285714285714" y="75.71428571428572" width="71.42857142857143" height="71.42857142857143" id="elem_c7" ></rect><rect class="model-elem-1" x="218.57142857142856" y="75.71428571428572" width="71.42857142857143" height="71.42857142857143" id="elem_d7" ></rect><rect class="model-elem-0" x="290" y="75.71428571428572" width="71.42857142857143" height="71.42857142857143" id="elem_e7" ></rect><rect class="model-elem-1" x="361.42857142857144" y="75.71428571428572" width="71.42857142857143" height="71.42857142857143" id="elem_f7" ></rect><rect class="model-elem-0" x="432.85714285714283" y="75.71428571428572" width="71.42857142857143" height="71.42857142857143" id="elem_g7" ></rect><rect class="model-elem-1" x="504.2857142857143" y="75.71428571428572" width="71.42857142857143" height="71.42857142857143" id="elem_h7" ></rect><rect class="model-elem-1" x="4.285714285714285" y="4.285714285714285" width="71.42857142857143" height="71.42857142857143" id="elem_a8" ></rect><rect class="model-elem-0" x="75.71428571428572" y="4.285714285714285" width="71.42857142857143" height="71.42857142857143" id="elem_b8" ></rect><rect class="model-elem-1" x="147.14285714285714" y="4.285714285714285" width="71.42857142857143" height="71.42857142857143" id="elem_c8" ></rect><rect class="model-elem-0" x="218.57142857142856" y="4.285714285714285" width="71.42857142857143" height="71.42857142857143" id="elem_d8" ></rect><rect class="model-elem-1" x="290" y="4.285714285714285" width="71.42857142857143" height="71.42857142857143" id="elem_e8" ></rect><rect class="model-elem-0" x="361.42857142857144" y="4.285714285714285" width="71.42857142857143" height="71.42857142857143" id="elem_f8" ></rect><rect class="model-elem-1" x="432.85714285714283" y="4.285714285714285" width="71.42857142857143" height="71.42857142857143" id="elem_g8" ></rect><rect class="model-elem-0" x="504.2857142857143" y="4.285714285714285" width="71.42857142857143" height="71.42857142857143" id="elem_h8" ></rect><circle class="model-pred-W" cx="40" cy="540" r="23.714285714285715" id="pred_a1_W" stroke-width="5.571428571428571" ></circle><circle class="model-pred-W" cx="182.85714285714286" cy="540" r="23.714285714285715" id="pred_c1_W" stroke-width="5.571428571428571" ></circle><circle class="model-pred-W" cx="325.7142857142857" cy="540" r="23.714285714285715" id="pred_e1_W" stroke-width="5.571428571428571" ></circle><circle class="model-pred-W" cx="468.57142857142856" cy="540" r="23.714285714285715" id="pred_g1_W" stroke-width="5.571428571428571" ></circle><circle class="model-pred-W" cx="111.42857142857143" cy="468.57142857142856" r="23.714285714285715" id="pred_b2_W" stroke-width="5.571428571428571" ></circle><circle class="model-pred-W" cx="254.28571428571428" cy="468.57142857142856" r="23.714285714285715" id="pred_d2_W" stroke-width="5.571428571428571" ></circle><circle class="model-pred-W" cx="397.14285714285717" cy="468.57142857142856" r="23.714285714285715" id="pred_f2_W" stroke-width="5.571428571428571" ></circle><circle class="model-pred-W" cx="540" cy="468.57142857142856" r="23.714285714285715" id="pred_h2_W" stroke-width="5.571428571428571" ></circle><circle class="model-pred-W" cx="40" cy="397.14285714285717" r="23.714285714285715" id="pred_a3_W" stroke-width="5.571428571428571" ></circle><circle class="model-pred-W" cx="182.85714285714286" cy="397.14285714285717" r="23.714285714285715" id="pred_c3_W" stroke-width="5.571428571428571" ></circle><circle class="model-pred-W" cx="325.7142857142857" cy="397.14285714285717" r="23.714285714285715" id="pred_e3_W" stroke-width="5.571428571428571" ></circle><circle class="model-pred-W" cx="468.57142857142856" cy="397.14285714285717" r="23.714285714285715" id="pred_g3_W" stroke-width="5.571428571428571" ></circle><circle class="model-pred-B" cx="111.42857142857143" cy="182.85714285714286" r="23.714285714285715" id="pred_b6_B" stroke-width="5.571428571428571" ></circle><circle class="model-pred-B" cx="254.28571428571428" cy="182.85714285714286" r="23.714285714285715" id="pred_d6_B" stroke-width="5.571428571428571" ></circle><circle class="model-pred-B" cx="397.14285714285717" cy="182.85714285714286" r="23.714285714285715" id="pred_f6_B" stroke-width="5.571428571428571" ></circle><circle class="model-pred-B" cx="540" cy="182.85714285714286" r="23.714285714285715" id="pred_h6_B" stroke-width="5.571428571428571" ></circle><circle class="model-pred-B" cx="40" cy="111.42857142857143" r="23.714285714285715" id="pred_a7_B" stroke-width="5.571428571428571" ></circle><circle class="model-pred-B" cx="182.85714285714286" cy="111.42857142857143" r="23.714285714285715" id="pred_c7_B" stroke-width="5.571428571428571" ></circle><circle class="model-pred-B" cx="325.7142857142857" cy="111.42857142857143" r="23.714285714285715" id="pred_e7_B" stroke-width="5.571428571428571" ></circle><circle class="model-pred-B" cx="468.57142857142856" cy="111.42857142857143" r="23.714285714285715" id="pred_g7_B" stroke-width="5.571428571428571" ></circle><circle class="model-pred-B" cx="111.42857142857143" cy="40" r="23.714285714285715" id="pred_b8_B" stroke-width="5.571428571428571" ></circle><circle class="model-pred-B" cx="254.28571428571428" cy="40" r="23.714285714285715" id="pred_d8_B" stroke-width="5.571428571428571" ></circle><circle class="model-pred-B" cx="397.14285714285717" cy="40" r="23.714285714285715" id="pred_f8_B" stroke-width="5.571428571428571" ></circle><circle class="model-pred-B" cx="540" cy="40" r="23.714285714285715" id="pred_h8_B" stroke-width="5.571428571428571" ></circle></svg> Added: trunk/Toss/WebClient/pics/Chess.png =================================================================== (Binary files differ) Property changes on: trunk/Toss/WebClient/pics/Chess.png ___________________________________________________________________ Added: svn:mime-type + application/octet-stream Added: trunk/Toss/WebClient/pics/Chess.svg =================================================================== --- trunk/Toss/WebClient/pics/Chess.svg (rev 0) +++ trunk/Toss/WebClient/pics/Chess.svg 2011-03-11 01:08:26 UTC (rev 1350) @@ -0,0 +1,2 @@ +<?xml-stylesheet href="Style2.css" type="text/css"?> +<svg id="svg" class="Game-Chess" viewBox="0 0 580 580"><rect class="model-elem-0" x="4.285714285714285" y="504.2857142857143" width="71.42857142857143" height="71.42857142857143" id="elem_a1" ></rect><rect class="model-elem-1" x="75.71428571428572" y="504.2857142857143" width="71.42857142857143" height="71.42857142857143" id="elem_b1" ></rect><rect class="model-elem-0" x="147.14285714285714" y="504.2857142857143" width="71.42857142857143" height="71.42857142857143" id="elem_c1" ></rect><rect class="model-elem-1" x="218.57142857142856" y="504.2857142857143" width="71.42857142857143" height="71.42857142857143" id="elem_d1" ></rect><rect class="model-elem-0" x="290" y="504.2857142857143" width="71.42857142857143" height="71.42857142857143" id="elem_e1" ></rect><rect class="model-elem-1" x="361.42857142857144" y="504.2857142857143" width="71.42857142857143" height="71.42857142857143" id="elem_f1" ></rect><rect class="model-elem-0" x="432.85714285714283" y="504.2857142857143" width="71.42857142857143" height="71.42857142857143" id="elem_g1" ></rect><rect class="model-elem-1" x="504.2857142857143" y="504.2857142857143" width="71.42857142857143" height="71.42857142857143" id="elem_h1" ></rect><rect class="model-elem-1" x="4.285714285714285" y="432.85714285714283" width="71.42857142857143" height="71.42857142857143" id="elem_a2" ></rect><rect class="model-elem-0" x="75.71428571428572" y="432.85714285714283" width="71.42857142857143" height="71.42857142857143" id="elem_b2" ></rect><rect class="model-elem-1" x="147.14285714285714" y="432.85714285714283" width="71.42857142857143" height="71.42857142857143" id="elem_c2" ></rect><rect class="model-elem-0" x="218.57142857142856" y="432.85714285714283" width="71.42857142857143" height="71.42857142857143" id="elem_d2" ></rect><rect class="model-elem-1" x="290" y="432.85714285714283" width="71.42857142857143" height="71.42857142857143" id="elem_e2" ></rect><rect class="model-elem-0" x="361.42857142857144" y="432.85714285714283" width="71.42857142857143" height="71.42857142857143" id="elem_f2" ></rect><rect class="model-elem-1" x="432.85714285714283" y="432.85714285714283" width="71.42857142857143" height="71.42857142857143" id="elem_g2" ></rect><rect class="model-elem-0" x="504.2857142857143" y="432.85714285714283" width="71.42857142857143" height="71.42857142857143" id="elem_h2" ></rect><rect class="model-elem-0" x="4.285714285714285" y="361.42857142857144" width="71.42857142857143" height="71.42857142857143" id="elem_a3" ></rect><rect class="model-elem-1" x="75.71428571428572" y="361.42857142857144" width="71.42857142857143" height="71.42857142857143" id="elem_b3" ></rect><rect class="model-elem-0" x="147.14285714285714" y="361.42857142857144" width="71.42857142857143" height="71.42857142857143" id="elem_c3" ></rect><rect class="model-elem-1" x="218.57142857142856" y="361.42857142857144" width="71.42857142857143" height="71.42857142857143" id="elem_d3" ></rect><rect class="model-elem-0" x="290" y="361.42857142857144" width="71.42857142857143" height="71.42857142857143" id="elem_e3" ></rect><rect class="model-elem-1" x="361.42857142857144" y="361.42857142857144" width="71.42857142857143" height="71.42857142857143" id="elem_f3" ></rect><rect class="model-elem-0" x="432.85714285714283" y="361.42857142857144" width="71.42857142857143" height="71.42857142857143" id="elem_g3" ></rect><rect class="model-elem-1" x="504.2857142857143" y="361.42857142857144" width="71.42857142857143" height="71.42857142857143" id="elem_h3" ></rect><rect class="model-elem-1" x="4.285714285714285" y="290" width="71.42857142857143" height="71.42857142857143" id="elem_a4" ></rect><rect class="model-elem-0" x="75.71428571428572" y="290" width="71.42857142857143" height="71.42857142857143" id="elem_b4" ></rect><rect class="model-elem-1" x="147.14285714285714" y="290" width="71.42857142857143" height="71.42857142857143" id="elem_c4" ></rect><rect class="model-elem-0" x="218.57142857142856" y="290" width="71.42857142857143" height="71.42857142857143" id="elem_d4" ></rect><rect class="model-elem-1" x="290" y="290" width="71.42857142857143" height="71.42857142857143" id="elem_e4" ></rect><rect class="model-elem-0" x="361.42857142857144" y="290" width="71.42857142857143" height="71.42857142857143" id="elem_f4" ></rect><rect class="model-elem-1" x="432.85714285714283" y="290" width="71.42857142857143" height="71.42857142857143" id="elem_g4" ></rect><rect class="model-elem-0" x="504.2857142857143" y="290" width="71.42857142857143" height="71.42857142857143" id="elem_h4" ></rect><rect class="model-elem-0" x="4.285714285714285" y="218.57142857142856" width="71.42857142857143" height="71.42857142857143" id="elem_a5" ></rect><rect class="model-elem-1" x="75.71428571428572" y="218.57142857142856" width="71.42857142857143" height="71.42857142857143" id="elem_b5" ></rect><rect class="model-elem-0" x="147.14285714285714" y="218.57142857142856" width="71.42857142857143" height="71.42857142857143" id="elem_c5" ></rect><rect class="model-elem-1" x="218.57142857142856" y="218.57142857142856" width="71.42857142857143" height="71.42857142857143" id="elem_d5" ></rect><rect class="model-elem-0" x="290" y="218.57142857142856" width="71.42857142857143" height="71.42857142857143" id="elem_e5" ></rect><rect class="model-elem-1" x="361.42857142857144" y="218.57142857142856" width="71.42857142857143" height="71.42857142857143" id="elem_f5" ></rect><rect class="model-elem-0" x="432.85714285714283" y="218.57142857142856" width="71.42857142857143" height="71.42857142857143" id="elem_g5" ></rect><rect class="model-elem-1" x="504.2857142857143" y="218.57142857142856" width="71.42857142857143" height="71.42857142857143" id="elem_h5" ></rect><rect class="model-elem-1" x="4.285714285714285" y="147.14285714285714" width="71.42857142857143" height="71.42857142857143" id="elem_a6" ></rect><rect class="model-elem-0" x="75.71428571428572" y="147.14285714285714" width="71.42857142857143" height="71.42857142857143" id="elem_b6" ></rect><rect class="model-elem-1" x="147.14285714285714" y="147.14285714285714" width="71.42857142857143" height="71.42857142857143" id="elem_c6" ></rect><rect class="model-elem-0" x="218.57142857142856" y="147.14285714285714" width="71.42857142857143" height="71.42857142857143" id="elem_d6" ></rect><rect class="model-elem-1" x="290" y="147.14285714285714" width="71.42857142857143" height="71.42857142857143" id="elem_e6" ></rect><rect class="model-elem-0" x="361.42857142857144" y="147.14285714285714" width="71.42857142857143" height="71.42857142857143" id="elem_f6" ></rect><rect class="model-elem-1" x="432.85714285714283" y="147.14285714285714" width="71.42857142857143" height="71.42857142857143" id="elem_g6" ></rect><rect class="model-elem-0" x="504.2857142857143" y="147.14285714285714" width="71.42857142857143" height="71.42857142857143" id="elem_h6" ></rect><rect class="model-elem-0" x="4.285714285714285" y="75.71428571428572" width="71.42857142857143" height="71.42857142857143" id="elem_a7" ></rect><rect class="model-elem-1" x="75.71428571428572" y="75.71428571428572" width="71.42857142857143" height="71.42857142857143" id="elem_b7" ></rect><rect class="model-elem-0" x="147.14285714285714" y="75.71428571428572" width="71.42857142857143" height="71.42857142857143" id="elem_c7" ></rect><rect class="model-elem-1" x="218.57142857142856" y="75.71428571428572" width="71.42857142857143" height="71.42857142857143" id="elem_d7" ></rect><rect class="model-elem-0" x="290" y="75.71428571428572" width="71.42857142857143" height="71.42857142857143" id="elem_e7" ></rect><rect class="model-elem-1" x="361.42857142857144" y="75.71428571428572" width="71.42857142857143" height="71.42857142857143" id="elem_f7" ></rect><rect class="model-elem-0" x="432.85714285714283" y="75.71428571428572" width="71.42857142857143" height="71.42857142857143" id="elem_g7" ></rect><rect class="model-elem-1" x="504.2857142857143" y="75.71428571428572" width="71.42857142857143" height="71.42857142857143" id="elem_h7" ></rect><rect class="model-elem-1" x="4.285714285714285" y="4.285714285714285" width="71.42857142857143" height="71.42857142857143" id="elem_a8" ></rect><rect class="model-elem-0" x="75.71428571428572" y="4.285714285714285" width="71.42857142857143" height="71.42857142857143" id="elem_b8" ></rect><rect class="model-elem-1" x="147.14285714285714" y="4.285714285714285" width="71.42857142857143" height="71.42857142857143" id="elem_c8" ></rect><rect class="model-elem-0" x="218.57142857142856" y="4.285714285714285" width="71.42857142857143" height="71.42857142857143" id="elem_d8" ></rect><rect class="model-elem-1" x="290" y="4.285714285714285" width="71.42857142857143" height="71.42857142857143" id="elem_e8" ></rect><rect class="model-elem-0" x="361.42857142857144" y="4.285714285714285" width="71.42857142857143" height="71.42857142857143" id="elem_f8" ></rect><rect class="model-elem-1" x="432.85714285714283" y="4.285714285714285" width="71.42857142857143" height="71.42857142857143" id="elem_g8" ></rect><rect class="model-elem-0" x="504.2857142857143" y="4.285714285714285" width="71.42857142857143" height="71.42857142857143" id="elem_h8" ></rect><g transform="translate(40,40) scale(1.2857142857142858,1.2857142857142858)"><g class="chessB" id="pred_a8_bR" ><g transform="translate(-22.5,-22.5)"> <path d="M 9,39 L 36,39 L 36,36 L 9,36 L 9,39 z " style="stroke-linecap:butt;" class="chess-path-Bx"></path> <path d="M 12,36 L 12,32 L 33,32 L 33,36 L 12,36 z " style="stroke-linecap:butt;" class="chess-path-B"></path> <path d="M 11,14 L 11,9 L 15,9 L 15,11 L 20,11 L 20,9 L 25,9 L 25,11 L 30,11 L 30,9 L 34,9 L 34,14" style="stroke-linecap:butt;" class="chess-path-B"></path> <path d="M 34,14 L 31,17 L 14,17 L 11,14" style="stroke-linecap:butt;" class="chess-path-B"></path> <path d="M 31,17 L 31,29.5 L 14,29.5 L 14,17" style="stroke-linecap:butt;" class="chess-path-B"></path> <path d="M 31,29.5 L 32.5,32 L 12.5,32 L 14,29.5" class="chess-path-B"></path> <path d="M 11,14 L 34,14" class="chess-path-D"></path> </g></g> </g><g transform="translate(540,40) scale(1.2857142857142858,1.2857142857142858)"><g class="chessB" id="pred_h8_bR" ><g transform="translate(-22.5,-22.5)"> <path d="M 9,39 L 36,39 L 36,36 L 9,36 L 9,39 z " style="stroke-linecap:butt;" class="chess-path-Bx"></path> <path d="M 12,36 L 12,32 L 33,32 L 33,36 L 12,36 z " style="stroke-linecap:butt;" class="chess-path-B"></path> <path d="M 11,14 L 11,9 L 15,9 L 15,11 L 20,11 L 20,9 L 25,9 L 25,11 L 30,11 L 30,9 L 34,9 L 34,14" style="stroke-linecap:butt;" class="chess-path-B"></path> <path d="M 34,14 L 31,17 L 14,17 L 11,14" style="stroke-linecap:butt;" class="chess-path-B"></path> <path d="M 31,17 L 31,29.5 L 14,29.5 L 14,17" style="stroke-linecap:butt;" class="chess-path-B"></path> <path d="M 31,29.5 L 32.5,32 L 12.5,32 L 14,29.5" class="chess-path-B"></path> <path d="M 11,14 L 34,14" class="chess-path-D"></path> </g></g> </g><g transform="translate(254.28571428571428,540) scale(1.2857142857142858,1.2857142857142858)"><g class="chessW" id="pred_d1_wQ" ><g transform="translate(-22.5,-22.5)"> <path d="M 9 13 A 2 2 0 1 1 5,13 A 2 2 0 1 1 9 13 z" transform="translate(-1,-1)" style="fill-rule: none;" class="chess-path-BW"></path> <path d="M 9 13 A 2 2 0 1 1 5,13 A 2 2 0 1 1 9 13 z" transform="translate(15.5,-5.5)" style="fill-rule: none;" class="chess-path-BW"></path> <path d="M 9 13 A 2 2 0 1 1 5,13 A 2 2 0 1 1 9 13 z" transform="translate(32,-1)" style="fill-rule: none;" class="chess-path-BW"></path> <path d="M 9 13 A 2 2 0 1 1 5,13 A 2 2 0 1 1 9 13 z" transform="translate(7,-4.5)" style="fill-rule: none;" class="chess-path-BW"></path> <path d="M 9 13 A 2 2 0 1 1 5,13 A 2 2 0 1 1 9 13 z" transform="translate(24,-4)" style="fill-rule: none;" class="chess-path-BW"></path> <path d="M 9,26 C 17.5,24.5 30,24.5 36,26 L 38,14 L 31,25 L 31,11 L 25.5,24.5 L 22.5,9.5 L 19.5,24.5 L 14,10.5 L 14,25 L 7,14 L 9,26 z " style="stroke-linecap:butt;" class="chess-path-BW"></path> <path d="M 9,26 C 9,28 10.5,28 11.5,30 C 12.5,31.5 12.5,31 12,33.5... [truncated message content] |
From: <luk...@us...> - 2011-05-17 01:34:54
|
Revision: 1445 http://toss.svn.sourceforge.net/toss/?rev=1445&view=rev Author: lukaszkaiser Date: 2011-05-17 01:34:48 +0000 (Tue, 17 May 2011) Log Message: ----------- Further UI improvements. Modified Paths: -------------- trunk/Toss/WebClient/Login.js trunk/Toss/WebClient/Main.js trunk/Toss/WebClient/Style.css trunk/Toss/WebClient/index.html Modified: trunk/Toss/WebClient/Login.js =================================================================== --- trunk/Toss/WebClient/Login.js 2011-05-16 20:09:29 UTC (rev 1444) +++ trunk/Toss/WebClient/Login.js 2011-05-17 01:34:48 UTC (rev 1445) @@ -55,8 +55,21 @@ if (udata != "") { setup_user (udata.split("$")) }; } if (window.location.href.indexOf("?simple=true") > 0) { + SIMPLE_SET = true; + document.getElementById("pdescChess").style.display = "block"; + document.getElementById("pdescConnect4").style.display = "block"; + document.getElementById("pdescPawn-Whopping").style.display = "block"; + document.getElementById("pdescBreakthrough").style.display = "block"; + document.getElementById("pdescCheckers").style.display = "block"; + document.getElementById("pdescGomoku").style.display = "block"; document.getElementById("loginform").style.display = "none"; document.getElementById("topright-register").style.display = "none"; + document.getElementById("toss-link").style.display = "none"; + document.getElementById("welcome-top").style.display = "none"; + document.getElementById("welcome-list-main").style.display = "none"; + document.getElementById("topuser").innerHTML = "Choose Your Next Game"; + document.getElementById("leftupperlogo-link").href = + "index.html?simple=true"; }; cur_game = ""; if (game) { var cur_game = game; } Modified: trunk/Toss/WebClient/Main.js =================================================================== --- trunk/Toss/WebClient/Main.js 2011-05-16 20:09:29 UTC (rev 1444) +++ trunk/Toss/WebClient/Main.js 2011-05-17 01:34:48 UTC (rev 1445) @@ -17,6 +17,7 @@ var LAST_CLICKED_ELEM = ""; var SIMPLE_MOVES = true; +var SIMPLE_SET = false; // Get model information from server. function get_model_info () { @@ -94,6 +95,7 @@ document.getElementById("board").style.paddingTop = "0em"; } document.getElementById("move-info-par").style.display = "none"; + document.getElementById("game-info-par").style.paddingBottom = "0em"; document.getElementById('payoffs').innerHTML = "Result: " + subst_pl(PAYOFF_STR); document.getElementById('payoffs').style.display = "inline"; @@ -266,6 +268,7 @@ document.getElementById("cur-player").innerHTML = disp_name(PLAYS[CUR_PLAY_I][PLAYS[CUR_PLAY_I][3]]); toss_open_db (play_py_id(pi)); + document.getElementById("suggestions-toggle").style.display = "inline"; full_redraw (); } @@ -400,7 +403,17 @@ function new_play_guest (game) { GAME_NAME = game; UNAME = "guest"; - document.getElementById("topuser").innerHTML = "Welcome!"; + wgame = game; + if (game == "Breakthrough") { wgame = "Breakthrough_(board_game)" }; + if (game == "Pawn-Whopping") { wgame = "Pawn_(chess)" }; + if (game == "Entanglement") { wgame = "Entanglement_(graph_measure)" }; + wiki = "http://en.wikipedia.org/wiki/" + wgame; + document.getElementById("topuser").innerHTML = + game + ' (<a href="' + wiki + '">Move Rules</a>)'; + if (SIMPLE_SET) { document.getElementById("topuser").innerHTML = game }; + document.getElementById("pdescBack").style.display = "block"; + document.getElementById("game-title").style.display = "none"; + document.getElementById("game-info-par").style.paddingBottom = "1em"; document.getElementById("loginform").style.display = "none"; document.getElementById("topright-register").style.display = "none"; document.getElementById("topright").style.display = "inline"; @@ -423,6 +436,7 @@ info_nbr = srv ("NEW_PLAY", "c, '" + GAME_NAME + "', '" + UNAME + "', '" + opp_uid + "'"); document.getElementById("working").style.display = "none"; + document.getElementById("suggestions-toggle").style.display = "inline"; info_idx = info_nbr.indexOf('$'); FREE_PLAY_NO = parseInt(info_nbr.substring(0, info_idx)); document.getElementById("play-number").innerHTML = "" + FREE_PLAY_NO; @@ -449,6 +463,9 @@ document.getElementById('payoffs').innerHTML = "Not Finished Yet"; document.getElementById('payoffs').style.display = "none"; document.getElementById('new-play-par').style.display = "none"; + if (UNAME == "guest") { + document.getElementById("game-info-par").style.paddingBottom = "1em"; + }; toggle_suggestions (); toggle_suggestions (); clear_svg (); Modified: trunk/Toss/WebClient/Style.css =================================================================== --- trunk/Toss/WebClient/Style.css 2011-05-16 20:09:29 UTC (rev 1444) +++ trunk/Toss/WebClient/Style.css 2011-05-17 01:34:48 UTC (rev 1445) @@ -93,6 +93,58 @@ margin-top: 0.3em; } +.game-picbt { + position: relative; + top:0px; + left:0px; + text-align: center; + width:32%; + text-align: center; + border-width: 0px; + color: #260314; + background-color: #fff1d4; + font-family: Verdana, 'TeXGyreHerosRegular', sans; +} + +.game-picspan { + display: none; + position: absolute; + top: 50%; + left: 0px; + width: 100%; + text-align: center; + font-size: 2.2em; +} + +.game-pictxt { + position: relative; + top: -1em; + background-color: rgba(255, 241, 228, 0.8); + border-radius: 4px; + -moz-border-radius: 4px; + opacity: 1; +} + +.logo-picspan { + display: none; + position: absolute; + top: 0px; + left: 0px; + width: 100%; + text-align: center; + font-size: 1.1em; + font-weight: bold; + background-color: rgba(64, 8, 39, 0.7); +} + +.logo-pictxt { + position: relative; + top: 0em; + border-radius: 4px; + -moz-border-radius: 4px; + opacity: 1; +} + .loginsmall { position: relative; top: 1px; @@ -214,6 +266,9 @@ } #logo { + position: relative; + left: 0px; + top: 0px; font-size: 2em; float: left; font-family: arial, 'OFLSortsMillGoudyRegular', serif; Modified: trunk/Toss/WebClient/index.html =================================================================== --- trunk/Toss/WebClient/index.html 2011-05-16 20:09:29 UTC (rev 1444) +++ trunk/Toss/WebClient/index.html 2011-05-17 01:34:48 UTC (rev 1445) @@ -21,7 +21,14 @@ <div id="main"> <div id="top"> -<div id="logo"><a href="index.html"><img src="toss.png" alt="tPlay" /></a></div> +<div id="logo"> + <a id="leftupperlogo-link" href="index.html"> + <img src="toss.png" alt="tPlay" /> + <span id="pdescBack" class="logo-picspan"> + <span class="logo-pictxt">←</span> + </span> + </a> +</div> <div id="topbar"> <span id="topuser"></span> <form id="loginform" style="display: inline;" action=""> @@ -88,39 +95,57 @@ with our best interface on <span class="logo-in">tPlay</span>! </p> -<p style="width:100%; text-align: justify"> -<button onclick="new_play_guest('Chess')" style="width:32%" - class="boldobt" title="Play Chess"> +<p style="width:100%; text-align: justify;"> +<button onclick="new_play_guest('Chess')" class="game-picbt" + title="Play Chess"> <img style="max-width:95%" src="pics/Chess.png" alt="Chess Board" /> + <span id="pdescChess" class="game-picspan"> + <span class="game-pictxt">Chess</span> + </span> </button> -<button onclick="new_play_guest('Connect4')" style="width:32%" +<button onclick="new_play_guest('Connect4')" class="game-picbt" class="boldobt" title="Play Connect4"> <img style="max-width:95%" src="pics/Connect4.png" alt="Connect4 Board" /> + <span id="pdescConnect4" class="game-picspan"> + <span class="game-pictxt">Connect4</span> + </span> </button> -<button onclick="new_play_guest('Pawn-Whopping')" style="width:32%" +<button onclick="new_play_guest('Pawn-Whopping')" class="game-picbt" class="boldobt" title="Play Pawn-Whopping"> <img style="max-width:95%" src="pics/Pawn-Whopping.png" alt="Pawn-Whopping Board" /> + <span id="pdescPawn-Whopping" class="game-picspan"> + <span class="game-pictxt">Pawn-Whopping</span> + </span> </button> </p> <p style="width:100%; text-align: justify"> -<button onclick="new_play_guest('Breakthrough')" style="width:32%" +<button onclick="new_play_guest('Breakthrough')" class="game-picbt" class="boldobt" title="Play Breakthrough"> <img style="max-width:95%" src="pics/Breakthrough.png" alt="Breakthrough Board" /> + <span id="pdescBreakthrough" class="game-picspan"> + <span class="game-pictxt">Breakthrough</span> + </span> </button> -<button onclick="new_play_guest('Checkers')" style="width:32%" +<button onclick="new_play_guest('Checkers')" class="game-picbt" class="boldobt" title="Play Checkers"> <img style="max-width:95%" src="pics/Checkers.png" alt="Checkers Board" /> + <span id="pdescCheckers" class="game-picspan"> + <span class="game-pictxt">Checkers</span> + </span> </button> -<button onclick="new_play_guest('Gomoku')" style="width:32%" +<button onclick="new_play_guest('Gomoku')" class="game-picbt" class="boldobt" title="Play Gomoku"> <img style="max-width:95%" src="pics/Gomoku.png" alt="Gomoku Board" /> + <span id="pdescGomoku" class="game-picspan"> + <span class="game-pictxt">Gomoku</span> + </span> </button> </p> -<ul class="welcome-list"> +<ul id="welcome-list-main" class="welcome-list"> <li>Play <a href="http://en.wikipedia.org/wiki/Breakthrough_(board_game)" >Breakthrough,</a> @@ -262,9 +287,8 @@ <div id="bottom"> -<button id="suggestions-toggle" onclick="toggle_suggestions()"> - Ask Before Move -</button> +<button id="suggestions-toggle" style="display: none;" + onclick="toggle_suggestions()">Ask Before Move</button> <a href="http://toss.sourceforge.net" id="toss-link">Powered by Toss</a> <script type="text/javascript">begin_mailto( "tossplay", "gmail.com", "Contact Us");</script> This was sent by the SourceForge.net collaborative development platform, the world's largest Open Source development site. |
From: <luk...@us...> - 2011-05-18 15:52:21
|
Revision: 1446 http://toss.svn.sourceforge.net/toss/?rev=1446&view=rev Author: lukaszkaiser Date: 2011-05-18 15:52:15 +0000 (Wed, 18 May 2011) Log Message: ----------- Further UI improvements. Modified Paths: -------------- trunk/Toss/WebClient/Main.js trunk/Toss/WebClient/Style.css trunk/Toss/WebClient/index.html Added Paths: ----------- trunk/Toss/WebClient/support.html Modified: trunk/Toss/WebClient/Main.js =================================================================== --- trunk/Toss/WebClient/Main.js 2011-05-17 01:34:48 UTC (rev 1445) +++ trunk/Toss/WebClient/Main.js 2011-05-18 15:52:15 UTC (rev 1446) @@ -400,6 +400,14 @@ return ("'''" + svg_s + "'''"); } +function show_chess_warning () { + document.getElementById("chess-level-warning").style.display = "block"; +} + +function hide_chess_warning () { + document.getElementById("chess-level-warning").style.display = "none"; +} + function new_play_guest (game) { GAME_NAME = game; UNAME = "guest"; @@ -411,7 +419,7 @@ document.getElementById("topuser").innerHTML = game + ' (<a href="' + wiki + '">Move Rules</a>)'; if (SIMPLE_SET) { document.getElementById("topuser").innerHTML = game }; - document.getElementById("pdescBack").style.display = "block"; + document.getElementById("pdescBack").style.display = "inline"; document.getElementById("game-title").style.display = "none"; document.getElementById("game-info-par").style.paddingBottom = "1em"; document.getElementById("loginform").style.display = "none"; @@ -419,6 +427,10 @@ document.getElementById("topright").style.display = "inline"; document.getElementById("logoutbt").style.display = "none"; document.getElementById("welcome").style.display = "none"; + if (game == "Chess") { + show_chess_warning (); + setTimeout("hide_chess_warning ()", 3000); + } new_play_do ("computer", 0); } Modified: trunk/Toss/WebClient/Style.css =================================================================== --- trunk/Toss/WebClient/Style.css 2011-05-17 01:34:48 UTC (rev 1445) +++ trunk/Toss/WebClient/Style.css 2011-05-18 15:52:15 UTC (rev 1446) @@ -126,15 +126,12 @@ } .logo-picspan { + position: relative; + top: -0.5em; + left: 0px; display: none; - position: absolute; - top: 0px; - left: 0px; - width: 100%; - text-align: center; font-size: 1.1em; font-weight: bold; - background-color: rgba(64, 8, 39, 0.7); } .logo-pictxt { @@ -143,8 +140,16 @@ border-radius: 4px; -moz-border-radius: 4px; opacity: 1; + font-size: 1em; + background-color: rgba(64, 8, 39, 0.7); } +#leftupperlogo-img { + position: relative; + left: -0.2em; + top: 0px; +} + .loginsmall { position: relative; top: 1px; @@ -313,10 +318,10 @@ } #topbar { - margin-left: 6.5em; + margin-left: 7.5em; padding-left: 1em; padding-right: 1em; - padding-top: 0.7em; + padding-top: 0.8em; } #topright { @@ -369,6 +374,7 @@ position: absolute; top: 0px; right: 0.5em; + color: inherit; } #suggestions-toggle { @@ -493,7 +499,7 @@ margin-top: 0.5em; } -#opponents { +#opponents, #chess-level-warning { display: none; position: fixed; left: 0px; Modified: trunk/Toss/WebClient/index.html =================================================================== --- trunk/Toss/WebClient/index.html 2011-05-17 01:34:48 UTC (rev 1445) +++ trunk/Toss/WebClient/index.html 2011-05-18 15:52:15 UTC (rev 1446) @@ -23,10 +23,10 @@ <div id="top"> <div id="logo"> <a id="leftupperlogo-link" href="index.html"> - <img src="toss.png" alt="tPlay" /> <span id="pdescBack" class="logo-picspan"> - <span class="logo-pictxt">←</span> + <span class="logo-pictxt">⇐</span> </span> + <img id="leftupperlogo-img" src="toss.png" alt="tPlay" /> </a> </div> <div id="topbar"> @@ -72,6 +72,11 @@ </span> </div> +<div id="chess-level-warning"> +Chess is set to very weak play.</br> +<br/> +No training here, just have fun! +</div> <div id="opponents"> Pick Opponent: Added: trunk/Toss/WebClient/support.html =================================================================== --- trunk/Toss/WebClient/support.html (rev 0) +++ trunk/Toss/WebClient/support.html 2011-05-18 15:52:15 UTC (rev 1446) @@ -0,0 +1,96 @@ +<!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 — Support</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 id="topbar"><span id="topuser">Support</span></div> +</div> + +<div style="font-size: 1.1em; margin: 1em; padding: 1em;"> + +<h2>Contact Us</h2> +<p style="line-height: 130%;"> +Thank you for your interest in tPlay! We try to make our interface as +intuitive and simple as possible, and we hope it is mostly self-explanatory. +If you encounter any problems, have some remarks or just want to tell us +how you feel about tPlay, write us an email.<br/> +<span style="position: relative; top: 0px; left: 15em;"> +<script type="text/javascript">begin_mailto("tossplay", "gmail.com", + "Email tos...@gm...");</script>tossplay [AT] gmail [DOT] com +<script type="text/javascript">end_mailto();</script> +</span> +<br/> +</p> + +<h2>How Do I Move?</h2> +<p style="line-height: 130%;"> +At tPlay you make moves just by clicking on the fields from and to which you +move. In case there is only a single possible move, it is made directly to +speed up the play. If you make moves by mistake, activate the +<span style="font-weight: bold;">Ask Before Move</span> control +in the bottom-left of the screen. Then you will be asked to confirm +each selected move before it is taken. +</p> + +<h2>What Are The Rules Of The Games?</h2> +<ul> + <li>Breakthrough — break through opponent's lines, see + <a href="http://en.wikipedia.org/wiki/Breakthrough_(board_game)" + style="color: #400827;">Breakthrough on Wikipedia</a> +<li>Checkers — beat opponent's pieces, see + <a href="http://en.wikipedia.org/wiki/English_draughts" + style="color: #400827;">Checkers on Wikipedia</a> +<li>Chess — check-mate, see + <a href="http://en.wikipedia.org/wiki/Chess" + style="color: #400827;">Chess on Wikipedia</a> +<li>Connect4 — make a line of four, see + <a href="http://en.wikipedia.org/wiki/Connect4" + style="color: #400827;">Connect4 on Wikipedia</a> +</li> +<li>Gomoku — make a line of five, see + <a href="http://en.wikipedia.org/wiki/Gomoku" + style="color: #400827;">Gomoku on Wikipedia</a> +</li> +<li>Pawn-Whopping — get a pawn to the other end, see + <a href="http://en.wikipedia.org/wiki/Pawn_(chess)" + style="color: #400827;">Pawn Moves on Wikipedia</a> +</li> +</ul> + +<h2>How Do I Set The Playing Level?</h2> +<p style="line-height: 130%;"> +The level at tPlay varies according to the +<span style="font-weight: bold;">Speed</span> setting in the top right +corner of the screen. Increase the time for slower but better moves. +</p> + +<h2>Can I Play Other Games?</h2> +<p style="line-height: 130%;"> +We are adding new games to tPlay all the time. +Email us your suggestion if you desire a particular game! +</p> + +</div> + +<div id="bottom"> +<a href="http://toss.sourceforge.net" id="toss-link">Powered by Toss</a> +</div> + +</div> + + +</body> +</html> This was sent by the SourceForge.net collaborative development platform, the world's largest Open Source development site. |
From: <luk...@us...> - 2011-05-29 00:12:25
|
Revision: 1463 http://toss.svn.sourceforge.net/toss/?rev=1463&view=rev Author: lukaszkaiser Date: 2011-05-29 00:12:18 +0000 (Sun, 29 May 2011) Log Message: ----------- Cleanup in Javascript code. Modified Paths: -------------- trunk/Toss/WebClient/Connect.js trunk/Toss/WebClient/DefaultStyle.js trunk/Toss/WebClient/Login.js trunk/Toss/WebClient/Main.js trunk/Toss/WebClient/index.html trunk/Toss/WebClient/profile.html Added Paths: ----------- trunk/Toss/WebClient/State.js Modified: trunk/Toss/WebClient/Connect.js =================================================================== --- trunk/Toss/WebClient/Connect.js 2011-05-27 22:09:16 UTC (rev 1462) +++ trunk/Toss/WebClient/Connect.js 2011-05-29 00:12:18 UTC (rev 1463) @@ -2,12 +2,6 @@ var UNAME = ""; -var MODEL_MAXX = 0.0; -var MODEL_MINX = 0.0; -var MODEL_MAXY = 0.0; -var MODEL_MINY = 0.0; -var MODEL_WIDTH = 0.0; -var MODEL_HEIGHT = 0.0; var SVG_WIDTH = 500; var SVG_HEIGHT = 500; var SVG_MARGINX = 50; @@ -15,121 +9,13 @@ var VIEW_MIRROR = 0; var GAME_NAME = ""; // name of current game, e.g. "Breakthrough" -var ELEMS = []; // used to store the list of elements -var ELEM_POS = {}; // positions of elements -var RELS = []; // relations var SUGGESTED_ELEM_SIZEX = 25; // suggested size of elements var SUGGESTED_ELEM_SIZEY = 25; // suggested size of elements -var DIM_STR = "" -var ELEM_STR = "" -var RELS_STR = "" -var MOVES_STR = "" -var PAYOFF_STR = "" -var PLAYER_STR = "" - var ASYNC_ALL_REQ_PENDING = 0; var ASYNC_CMD_REQ_PENDING = {}; -// Helper function: sign of a number. -function sign (x) { - if (x > 0.01) { return (1); } - else if (x < -0.01) { return (-1); } - else { return (0); } -} -function set_info (info) { - var res_arr = []; - res_arr = info.split("$"); - if (res_arr.length != 5) { alert (res_arr); return (false); } - DIM_STR = res_arr[0]; - ELEM_STR = res_arr[1]; - RELS_STR = res_arr[2]; - if (res_arr[3].substring(2, 3) == "(") { - MOVES_STR = res_arr[3]; - PAYOFF_STR = ""; - } else { - MOVES_STR = ""; - PAYOFF_STR = res_arr[3]; - }; - PLAYER_STR = res_arr[4]; - var dim = strip('(', ')', DIM_STR).split(','); - MODEL_MAXX = parseFloat(strip(' ', ' ', dim[0])); - MODEL_MINX = parseFloat(strip(' ', ' ', dim[1])); - MODEL_MAXY = parseFloat(strip(' ', ' ', dim[2])); - MODEL_MINY = parseFloat(strip(' ', ' ', dim[3])); - MODEL_WIDTH = Math.max (SVG_WIDTH / 100, (MODEL_MAXX - MODEL_MINX)); - MODEL_HEIGHT = Math.max (SVG_HEIGHT / 100, (MODEL_MAXY - MODEL_MINY)); - return (true); -} - -// Send [msg] to server and return response text. -function sync_server_msg (msg) { - var xml_request = new XMLHttpRequest (); - xml_request.open ('POST', 'Handler', false); - xml_request.setRequestHeader ('Content-Type', - 'application/x-www-form-urlencoded; charset=UTF-8'); - xml_request.send (msg); - resp = xml_request.responseText; - if (resp.indexOf ("MOD_PYTHON ERROR") > -1) { - alert (resp.substring(resp.indexOf("Traceback"))); - return (""); - } - return (resp) -} - -// Send [msg] to server asynchronously, ignore response text. -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'); - 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) }; - } - } - }; - if (count) { ASYNC_ALL_REQ_PENDING += 1; } - xml_request.send (msg); -} - -// Send [msg] to server attaching prefix '[cmd]#' and return response text. -function srv (cmd, msg) { - return (sync_server_msg (cmd + '#' + msg)); -} - -// Send [msg] to server attaching prefix '[cmd]#' async., ignore response. -function async_srv_ignore (cmd, msg) { - 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) { - 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]. function strip (c1, c2, str) { if (str.length == 0) return (str); @@ -156,70 +42,122 @@ return (res_arr); } +function Connect () { + // Send [msg] to server and return response text. + var sync_server_msg = function (msg) { + var xml_request = new XMLHttpRequest (); + xml_request.open ('POST', 'Handler', false); + xml_request.setRequestHeader + ('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8'); + xml_request.send (msg); + resp = xml_request.responseText; + if (resp.indexOf ("MOD_PYTHON ERROR") > -1) { + alert (resp.substring(resp.indexOf("Traceback"))); + return (""); + } + return (resp) + } -// Get moves applicable to [elem] in a game. -function get_moves (elem, other) { - var all_moves = convert_python_list (';', MOVES_STR); - var elem_moves = [] - for (i = 0; i < all_moves.length; i++) { - var br = all_moves[i].indexOf(":"); - if (br < 0) { br = 0; }; - if (all_moves[i].indexOf(elem, br) > br) { - if (other == "") { - elem_moves.push(all_moves[i]) - } else if (all_moves[i].indexOf(other, br) > br) { - elem_moves.push(all_moves[i]) + // Send [msg] to server asynchronously, ignore response text. + var async_server_msg = function (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'); + 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) }; + } + } + }; + if (count) { ASYNC_ALL_REQ_PENDING += 1; } + xml_request.send (msg); } - return (elem_moves) -} -// Get relation tuples. -function get_rels () { - var r = convert_python_list(';', RELS_STR); - var rels = []; - for (var i = 0; i < r.length; i++) { - var rel_name = strip(' ', '\'', r[i].substring(1,r[i].indexOf(','))); - var args_s = r[i].substring(r[i].indexOf('[')+1, r[i].indexOf(']')); - if (rel_name[0] != "_" && args_s != "''") { - rels.push ([rel_name, convert_python_list (',', args_s)]); - } + // Send [msg] to server attaching prefix '[cmd]#' and return response text. + var srv = function (cmd, msg) { + return (sync_server_msg (cmd + '#' + msg)); } - return (rels) -} -// Translate position from Toss Model coordinates to SVG coordinates. -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; - } else { - var y = ((MODEL_HEIGHT - (pos[1] - MODEL_MINY))*SVG_WIDTH)/MODEL_HEIGHT; + // Send [msg] to server attaching prefix '[cmd]#' async., ignore response. + var async_srv_ignore = function (cmd, msg) { + async_server_msg (cmd + '#' + msg, false, function(x) { }); } - return ([x + SVG_MARGINX, y + SVG_MARGINY]) -} -// Get elements and positions. -function get_elems_with_pos () { - var l = convert_python_list(',', ELEM_STR); - ELEMS = []; - ELEM_POS = {}; - for (var i = 0; i < l.length; i++) { - var e = convert_python_list (';', l[i]); - ELEMS.push (e[0]); - ELEM_POS[e[0]] = translate_pos ([parseFloat(e[1]), parseFloat(e[2])]); + // Send [msg] to server attaching prefix '[cmd]#' async., run f on return. + var async_srv = function (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 (); + }; + async_server_msg (cmd + '#' + msg, true, f); } -} + this.get_name = function (uname) { return (srv ("GET_NAME", uname)); } + + this.list_plays = function (game, uname) { + return (srv ("LIST_PLAYS", "'" + game + "', '" + UNAME + "'")); + } -// Open [file_name] on Toss Server and get info. -function toss_open_db (file_name_params) { - var info = srv ("OPEN_DB", file_name_params); - set_info (info); + this.open_db = function (pid) { return (srv ("OPEN_DB", pid)); } + this.new_play = function (g, un, opp) { + return (srv("NEW_PLAY", "c, '" + g + "', '" + un + "', '" + opp +"'")); + } + this.make_move = function (move_s, pid, cont) { + async_srv("MOVE_PLAY", 'c, '+ move_s +', '+ pid, cont); + } + this.upd_svg = function (pid, svg_s) { + async_srv_ignore ("UPD_SVG", pid + ", " + svg_s); + } + this.suggest = function (time, pid, cont) { + async_srv("SUGGEST", 'c, ' + time + ', '+ pid, cont); + } + + this.friends = function () { return (srv ("LIST_FRIENDS", "user")); } + this.allopnts = function () { return (srv ("LIST_FRIENDS", "**")); } + this.plays = function () { return (srv("USERPLAYS", "user")); } + this.username = function () { return (srv("USERNAME", "user")); } + this.addopp = function (opp) { return (srv("ADDOPP", opp)); } + + this.name = function (un) { return (srv("GET_NAME", un)); } + this.surname = function (un) { return (srv("GET_SURNAME", un)); } + this.email = function (un) { return (srv("GET_MAIL", un)); } + + this.login = function (un, chk, cpwd) { + return (srv ("LOGIN", un +"$"+ chk +"$"+ cpwd)); + } + this.logout = function () { return (srv("LOGOUT", "user")); } + this.register = function (data, cpwd) { + return (srv ("REGISTER", data + "$" + cpwd)); + } + this.change_data = function (name, surname, email) { + return (srv ("CHANGEUSR", name +"$"+ surname +"$"+ email)); + } + + return (this); } +var CONN = new Connect (); + + // ---- Two functions below are very basic and thus in this file. --- // Create basic svg box. Modified: trunk/Toss/WebClient/DefaultStyle.js =================================================================== --- trunk/Toss/WebClient/DefaultStyle.js 2011-05-27 22:09:16 UTC (rev 1462) +++ trunk/Toss/WebClient/DefaultStyle.js 2011-05-29 00:12:18 UTC (rev 1463) @@ -8,7 +8,16 @@ // - unhighlight_elem (elem) // - draw_rel (game, rel_name, args) +// Helper function: sign of a number. +function sign (x) { + if (x > 0.01) { return (1); } + else if (x < -0.01) { return (-1); } + else { return (0); } +} + +// Drawings + var DEFpawn = '<g transform="translate(-22.5,-22.5)"> \ <path \ d="M 22,9 C 19.792,9 18,10.792 18,13 C 18,13.885 18.294,14.712 18.781,15.375 C 16.829,16.497 15.5,18.588 15.5,21 C 15.5,23.034 16.442,24.839 17.906,26.031 C 14.907,27.089 10.5,31.578 10.5,39.5 L 33.5,39.5 C 33.5,31.578 29.093,27.089 26.094,26.031 C 27.558,24.839 28.5,23.034 28.5,21 C 28.5,18.588 27.171,16.497 25.219,15.375 C 25.706,14.712 26,13.885 26,13 C 26,10.792 24.208,9 22,9 z " \ @@ -166,7 +175,7 @@ // Draw the element [elem]. function draw_elem (game, elem) { - var pos = ELEM_POS[elem]; + var pos = ST.elem_pos[elem]; if (game != "Connect4") { add_svg ("rect", [["x", pos[0] - SUGGESTED_ELEM_SIZEX], @@ -203,7 +212,7 @@ 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]]; + var pos = ST.elem_pos[args[0]]; if (rel_name == "P") { // Tic-tac-toe cross if (game != "Connect4") { var cs = 'class="' + "model-pred-" + rel_name + '" '; @@ -305,8 +314,8 @@ } if (args.length == 2) { if (rel_name == "E") { - var pos1 = ELEM_POS[args[0]]; - var pos2 = ELEM_POS[args[1]]; + var pos1 = ST.elem_pos[args[0]]; + var pos2 = ST.elem_pos[args[1]]; if (sign (pos1[0] - pos2[0]) == 0) { var d = SUGGESTED_ELEM_SIZEY * sign (pos1[1] - pos2[1]); add_svg ("line", [["x1", pos1[0]], ["y1", pos1[1] - d], Modified: trunk/Toss/WebClient/Login.js =================================================================== --- trunk/Toss/WebClient/Login.js 2011-05-27 22:09:16 UTC (rev 1462) +++ trunk/Toss/WebClient/Login.js 2011-05-29 00:12:18 UTC (rev 1463) @@ -52,7 +52,7 @@ navigator.userAgent.indexOf('MSIE 9') == -1) { document.getElementById("nosvg").style.display = "block"; } else { - var udata = srv("USERPLAYS", "user"); + var udata = CONN.plays (); if (udata != "") { setup_user (udata.split("$")) }; } if (window.location.href.indexOf("?simple=true") > 0) { @@ -93,9 +93,9 @@ // Onload handler for the profile page function startup_profile () { - var un = srv("USERNAME", "user"); + var un = CONN.username (); if (un != "") { - UNAME = un + UNAME = un; document.getElementById("topuser").innerHTML = "Welcome " + disp_name(un); document.getElementById("loginform").style.display = "none"; @@ -103,9 +103,9 @@ document.getElementById("topright").style.display = "inline"; document.getElementById("welcome").style.display = "none"; document.getElementById("main-profile").style.display = "block"; - document.getElementById('name').value = srv("GET_NAME", un); - document.getElementById('surname').value = srv("GET_SURNAME", un); - document.getElementById('email').value = srv("GET_MAIL", un); + document.getElementById('name').value = CONN.name (un); + document.getElementById('surname').value = CONN.surname (un); + document.getElementById('email').value = CONN.email (un); get_opponents (); var o = document.getElementById("opponents-list"); for (var i = 0; i < FRIENDS.length; i++) { @@ -113,7 +113,7 @@ li.innerHTML = disp_name(FRIENDS[i]) + " (" + FRIENDS[i] + ")"; o.appendChild (li); } - var lst = srv ("LIST_FRIENDS", "**"); + var lst = CONN.allopnts (); var users = convert_python_list (',', lst); var u = document.getElementById("users-list"); for (var i = 0; i < users.length; i++) { @@ -133,7 +133,7 @@ var pwd = document.getElementById('password').value; var chk = "false"; if (document.getElementById('remember').checked) { chk = "true" }; - var resp = sync_server_msg("LOGIN#"+ un +"$"+ chk +"$"+ crypt(TSALT + pwd)); + var resp = CONN.login (un, chk, crypt(TSALT + pwd)); if (resp == "OK") { window.location.reload () } else { @@ -148,7 +148,7 @@ // Logout function logout () { clear_view (); - resp = sync_server_msg ("LOGOUT#user"); + resp = CONN.logout (); return; } @@ -159,7 +159,7 @@ document.getElementById("topuser").innerHTML = ""; document.getElementById("main-profile").style.display = "none"; document.getElementById("welcome").style.display = "block"; - resp = sync_server_msg ("LOGOUT#user"); + resp = CONN.logout (); return; } @@ -210,7 +210,7 @@ return; } var data = un + "$" + name + "$" + surname + "$" + email; - var resp = sync_server_msg ("REGISTER#" + data + "$" + crypt(TSALT + pwd)); + var resp = CONN.register (data, crypt(TSALT + pwd)); alert (resp); } @@ -236,14 +236,14 @@ alert ("Your data must not contain $, i.e. the dolar sign." + CORRMSG); return; } - var resp = sync_server_msg ("CHANGEUSR#" + name +"$"+ surname +"$"+ email); + var resp = CONN.change_data (name, surname, email); if (resp != "OK") { alert(resp); } window.location.reload (); } // Add opponent for the current user. function add_opponent (oppuname) { - var resp = sync_server_msg ("ADDOPP#" + oppuname); + var resp = CONN.addopp (oppuname); if (resp != "OK") { alert(resp); } window.location.reload (); } Modified: trunk/Toss/WebClient/Main.js =================================================================== --- trunk/Toss/WebClient/Main.js 2011-05-27 22:09:16 UTC (rev 1462) +++ trunk/Toss/WebClient/Main.js 2011-05-29 00:12:18 UTC (rev 1463) @@ -19,15 +19,15 @@ var SIMPLE_MOVES = true; var SIMPLE_SET = false; +var ST = undefined; + // Get model information from server. function get_model_info () { - get_elems_with_pos (); - for (var i = 0; i < ELEMS.length; i++) { - ELEM_COUNTERS[ELEMS[i]] = 0; + for (var i = 0; i < ST.elems.length; i++) { + ELEM_COUNTERS[ST.elems[i]] = 0; } - RELS = get_rels (); - var sqrt = Math.round (Math.sqrt (ELEMS.length)); - if (sqrt * sqrt == ELEMS.length) { // perhaps a grid + var sqrt = Math.round (Math.sqrt (ST.elems.length)); + if (sqrt * sqrt == ST.elems.length) { // perhaps a grid SUGGESTED_ELEM_SIZEX = SVG_WIDTH / (2.0 * (sqrt-1)); SUGGESTED_ELEM_SIZEY = SVG_HEIGHT / (2.0 * (sqrt-1)); } else { @@ -40,11 +40,11 @@ // WARNING: must call get_model_info first! function draw_model (game) { draw_background (game); - for (var i = 0; i < ELEMS.length; i++) { - draw_elem (game, ELEMS[i]); + for (var i = 0; i < ST.elems.length; i++) { + draw_elem (game, ST.elems[i]); } - for (var i = 0; i < RELS.length; i++) { - draw_rel (game, RELS[i][0], RELS[i][1]); + for (var i = 0; i < ST.rels.length; i++) { + draw_rel (game, ST.rels[i][0], ST.rels[i][1]); } } @@ -87,7 +87,7 @@ get_model_info (); create_svg_box (SVG_MARGINX, SVG_MARGINY, "board"); draw_model (GAME_NAME); - if (PAYOFF_STR == "") { + if (ST.payoff == "") { document.getElementById('movebt').innerHTML = "Make move:"; document.getElementById('cur-move').innerHTML = "none"; } else { @@ -97,56 +97,38 @@ document.getElementById("move-info-par").style.display = "none"; document.getElementById("game-info-par").style.paddingBottom = "0em"; document.getElementById('payoffs').innerHTML = - "Result: " + subst_pl(PAYOFF_STR); + "Result: " + subst_pl(ST.payoff); document.getElementById('payoffs').style.display = "inline"; document.getElementById('new-play-par').style.display = "block"; } document.getElementById("working").style.display = "none"; } -// Helper function: get value elements from a move string [s]. -function get_move_elems (s) { - var vals = []; - var arr = strip('(', ')', s).split(','); - for (var i = 0; i < arr.length; i++) { - if (arr[i].indexOf(':') > -1) { - var v = arr[i].substring (arr[i].indexOf(':')+1, arr[i].length); - vals.push (strip ('\'', ' ', strip ('{', '}', v))); - } - } - return (vals) -} - // Helper function: highlight move, unhighlight old, save current. function show_move (m) { - var m_act = get_move_elems (m); - m_act.sort (); - var m_rule = strip ("'", " ", - m.substring (m.indexOf("},")+3, m.lastIndexOf(','))); for (var i = 0; i < CUR_ELEMS.length; i++) { unhighlight_elem (CUR_ELEMS[i]); } - for (var i = 0; i < m_act.length; i++) { - highlight_elem (m_act[i]); + for (var i = 0; i < m.matched.length; i++) { + highlight_elem (m.matched[i]); } - var m_str = strip (' ', ' ', m_act.toString ()); - if (m_str == "") { + if (m.matched_str == "") { document.getElementById('cur-move').innerHTML = "none"; } else { document.getElementById('cur-move').innerHTML = - m_str.replace (/,/g, " — ") + " (" + m_rule + ")" + m.matched_str.replace (/,/g, " — ") + " (" + m.rule + ")" } - CUR_ELEMS = m_act; - CUR_MOVE = m.toString(); + CUR_ELEMS = m.matched; + CUR_MOVE = m.def_str; } // Handler for clicks on elements. function handle_elem_click (elem) { if (ASYNC_ALL_REQ_PENDING != 0) { return; } - var moves = get_moves (elem, LAST_CLICKED_ELEM); + var moves = ST.get_moves (elem, LAST_CLICKED_ELEM); if (moves.length == 0) { LAST_CLICKED_ELEM = ""; - moves = get_moves (elem, LAST_CLICKED_ELEM); + moves = ST.get_moves (elem, LAST_CLICKED_ELEM); }; if (moves.length == 0) { // still no moves, unhighlight for (var i = 0; i < CUR_ELEMS.length; i++) { @@ -160,12 +142,12 @@ 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) { + && moves.length == 2 && moves[0].length > moves[1].length) { 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) { + && moves.length == 2 && moves[1].length > moves[0].length) { show_move (moves[0]); ELEM_COUNTERS[elem] = 1; if (SIMPLE_MOVES) { make_move (); }; @@ -196,7 +178,7 @@ function disp_name (uname) { if (uname == "guest") { return ("You"); } if (UNAME_TO_NAME_MAP[uname]) { return (UNAME_TO_NAME_MAP[uname]); } - name = srv ("GET_NAME", uname); + name = CONN.get_name (uname); UNAME_TO_NAME_MAP[uname] = name; return (name); } @@ -234,7 +216,7 @@ } function list_plays (game) { - var lst = srv ("LIST_PLAYS", "'" + game + "', '" + UNAME + "'"); + var lst = CONN.list_plays (game, UNAME); list_plays_string (game, lst); } @@ -267,7 +249,8 @@ } document.getElementById("cur-player").innerHTML = disp_name(PLAYS[CUR_PLAY_I][PLAYS[CUR_PLAY_I][3]]); - toss_open_db (play_py_id(pi)); + var info = CONN.open_db (play_py_id (pi)); + ST = new State (info); document.getElementById("suggestions-toggle").style.display = "inline"; full_redraw (); } @@ -285,26 +268,25 @@ 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); + CONN.make_move (CUR_MOVE, play_py_id (CUR_PLAY_I), make_move_continue); } function make_move_continue (info) { - set_info (info); + ST = new State (info); CUR_MOVE = ""; CUR_ELEMS = []; ELEM_COUNTERS = {}; - PLAYS[CUR_PLAY_I][3] = PLAYER_STR; + PLAYS[CUR_PLAY_I][3] = ST.PLAYER_STR; document.getElementById("cur-player").innerHTML = - disp_name(PLAYS[CUR_PLAY_I][PLAYER_STR]); + disp_name(PLAYS[CUR_PLAY_I][ST.PLAYER_STR]); document.getElementById("working").style.display = "none"; full_redraw (); - async_srv_ignore ("UPD_SVG", play_py_id(CUR_PLAY_I) + ", " + svg_string()); + CONN.upd_svg (play_py_id(CUR_PLAY_I), svg_string()); var old_li = document.getElementById ("plays-list-" + GAME_NAME + "-elem-" + CUR_PLAY_I); 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") { + if (PLAYS[CUR_PLAY_I][ST.PLAYER_STR] == "computer") { var mv_time = document.getElementById("speed").value; suggest_move_async (mv_time, make_move); } @@ -445,8 +427,7 @@ if (opp_uid == 0 || UNAME == "") { return; } document.getElementById("plays-list-" + GAME_NAME).style.display = "block"; document.getElementById("working").style.display = "block"; - info_nbr = srv ("NEW_PLAY", "c, '" + GAME_NAME + "', '" + UNAME + - "', '" + opp_uid + "'"); + info_nbr = CONN.new_play (GAME_NAME, UNAME, opp_uid); document.getElementById("working").style.display = "none"; document.getElementById("suggestions-toggle").style.display = "inline"; info_idx = info_nbr.indexOf('$'); @@ -459,15 +440,15 @@ document.getElementById("plays").style.left = "30em"; var p = [UNAME, opp_uid, FREE_PLAY_NO, 0]; PLAYS.push(p); - set_info(info_nbr.substring(info_idx+1)); + ST = new State (info_nbr.substring(info_idx+1)); full_redraw (); - async_srv_ignore ("UPD_SVG", play_py_id(CUR_PLAY_I) + ", " + svg_string()); + CONN.upd_svg (play_py_id(CUR_PLAY_I), svg_string()); li = new_play_item (GAME_NAME, CUR_PLAY_I); document.getElementById("plays-list-" + GAME_NAME).appendChild(li); } function get_opponents () { - var lst = srv ("LIST_FRIENDS", "user"); + var lst = CONN.friends (); FRIENDS = convert_python_list (',', lst); } @@ -520,9 +501,9 @@ var fm = function (m) { document.getElementById("working").style.display = "none"; document.getElementById("working").innerHTML = "Working..."; - if (m != "") { show_move (m); f() } + if (m != "") { show_move (new Move (m)); f() } }; - async_srv("SUGGEST", 'c, ' + time + ', '+ play_py_id (CUR_PLAY_I), fm); + CONN.suggest (time, play_py_id (CUR_PLAY_I), fm); } function suggest_move_click () { Added: trunk/Toss/WebClient/State.js =================================================================== --- trunk/Toss/WebClient/State.js (rev 0) +++ trunk/Toss/WebClient/State.js 2011-05-29 00:12:18 UTC (rev 1463) @@ -0,0 +1,127 @@ +// JavaScript Toss Module -- State representation and parsing. + +// ------ Move Object ----- + +// Create a move from the string [s]. +function Move (s) { + var vals = []; + var arr = strip('(', ')', s).split(','); + for (var i = 0; i < arr.length; i++) { + if (arr[i].indexOf(':') > -1) { + var v = arr[i].substring (arr[i].indexOf(':')+1, arr[i].length); + vals.push (strip ('\'', ' ', strip ('{', '}', v))); + } + } + vals.sort (); + this.matched = vals; + this.length = vals.length; + this.rule = strip ("'", " ", + s.substring (s.indexOf("},")+3, s.lastIndexOf(','))); + this.matched_str = strip (' ', ' ', this.matched.toString ()); + this.def_str = s; + return (this) +} + +function move_did_match (s) { + for (var i = 0; i < this.matched.length; i++) { + if (this.matched[i] == s) { return (true) } + } + return (false); +} +Move.prototype.did_match = move_did_match; + + + +// --------- State Object ------ + + +// Translate position from Toss Model coordinates to SVG coordinates. +function translate_pos (pos) { + var x = ((pos[0] - this.minx) * SVG_WIDTH) / this.width; + if (VIEW_MIRROR == 0) { + var y = ((pos[1] - this.miny) * SVG_HEIGHT) / this.height; + } else { + var y = + ((this.height - (pos[1] - this.miny)) * SVG_WIDTH) / + this.height; + } + return ([x + SVG_MARGINX, y + SVG_MARGINY]) +} + +// Object representing a state of the system (game). +function State (info_string) { + // The info is a $-separated array of 5 components. + var res_arr = []; + res_arr = info_string.split("$"); + if (res_arr.length != 5) { alert (res_arr); return (undefined); } + + // The first component gives the dimenstions of the structure. + var dim = strip('(', ')', res_arr[0]).split(','); + this.maxx = parseFloat(strip(' ', ' ', dim[0])); + this.minx = parseFloat(strip(' ', ' ', dim[1])); + this.maxy = parseFloat(strip(' ', ' ', dim[2])); + this.miny = parseFloat(strip(' ', ' ', dim[3])); + this.width = Math.max (SVG_WIDTH / 100, (this.maxx - this.minx)); + this.height = Math.max (SVG_HEIGHT / 100, (this.maxy - this.miny)); + + // The second component is the list of elements of the structure. + var l = convert_python_list(',', res_arr[1]); + this.elems = []; + // We directly compute element positions for svg. + this.elem_pos = {}; + this.translate_pos = translate_pos; + for (var i = 0; i < l.length; i++) { + var e = convert_python_list (';', l[i]); + this.elems.push (e[0]); + this.elem_pos[e[0]] = + this.translate_pos ([parseFloat(e[1]), parseFloat(e[2])]); + } + + // The third component are the relations in the structure. + var r = convert_python_list(';', res_arr[2]); + var rels = []; + for (var i = 0; i < r.length; i++) { + var rel_name = strip(' ', '\'', r[i].substring(1,r[i].indexOf(','))); + var args_s = r[i].substring(r[i].indexOf('[')+1, r[i].indexOf(']')); + if (rel_name[0] != "_" && args_s != "''") { + rels.push ([rel_name, convert_python_list (',', args_s)]); + } + } + this.rels = rels; + + // The fourth component is either the list of possible moves. + // If there are no moves possible, it is the payoff. + if (res_arr[3].substring(2, 3) == "(") { + var move_strs = convert_python_list (';', res_arr[3]); + var mvs = []; + for (i = 0; i < move_strs.length; i++) { + mvs.push (new Move (move_strs[i])); + } + this.moves = mvs; + this.payoff = ""; + } else { + this.moves = []; + this.payoff = res_arr[3]; + }; + + // The last component is the player (to be removed). + this.PLAYER_STR = res_arr[4]; + + return (this); +} + +// Get moves applicable to [elem] in a game. +function state_get_moves (elem, other) { + var elem_moves = []; + for (i = 0; i < this.moves.length; i++) { + if (this.moves[i].did_match(elem)) { + if (other == "") { + elem_moves.push(this.moves[i]) + } else if (this.moves[i].did_match(other)) { + elem_moves.push(this.moves[i]) + } + } + } + return (elem_moves) +} +State.prototype.get_moves = state_get_moves; Modified: trunk/Toss/WebClient/index.html =================================================================== --- trunk/Toss/WebClient/index.html 2011-05-27 22:09:16 UTC (rev 1462) +++ trunk/Toss/WebClient/index.html 2011-05-29 00:12:18 UTC (rev 1463) @@ -11,6 +11,7 @@ <link rel="stylesheet" type="text/css" href="Style.css" media="screen" title="Default"/> <script type="text/javascript" src="crypto-sha256.js"> </script> <script type="text/javascript" src="Connect.js"> </script> + <script type="text/javascript" src="State.js"> </script> <script type="text/javascript" src="DefaultStyle.js"> </script> <script type="text/javascript" src="Main.js"> </script> <script type="text/javascript" src="Login.js"> </script> Modified: trunk/Toss/WebClient/profile.html =================================================================== --- trunk/Toss/WebClient/profile.html 2011-05-27 22:09:16 UTC (rev 1462) +++ trunk/Toss/WebClient/profile.html 2011-05-29 00:12:18 UTC (rev 1463) @@ -9,6 +9,7 @@ <link rel="stylesheet" type="text/css" href="Style.css" media="screen" title="Default"/> <script type="text/javascript" src="crypto-sha256.js"> </script> <script type="text/javascript" src="Connect.js"> </script> + <script type="text/javascript" src="State.js"> </script> <script type="text/javascript" src="DefaultStyle.js"> </script> <script type="text/javascript" src="Main.js"> </script> <script type="text/javascript" src="Login.js"> </script> This was sent by the SourceForge.net collaborative development platform, the world's largest Open Source development site. |
From: <luk...@us...> - 2011-05-29 17:55:34
|
Revision: 1464 http://toss.svn.sourceforge.net/toss/?rev=1464&view=rev Author: lukaszkaiser Date: 2011-05-29 17:55:27 +0000 (Sun, 29 May 2011) Log Message: ----------- Cleaning JavaScript drawing code. Modified Paths: -------------- trunk/Toss/WebClient/Connect.js trunk/Toss/WebClient/Main.js trunk/Toss/WebClient/State.js trunk/Toss/WebClient/index.html trunk/Toss/WebClient/profile.html Added Paths: ----------- trunk/Toss/WebClient/Drawing.js Removed Paths: ------------- trunk/Toss/WebClient/DefaultStyle.js Modified: trunk/Toss/WebClient/Connect.js =================================================================== --- trunk/Toss/WebClient/Connect.js 2011-05-29 00:12:18 UTC (rev 1463) +++ trunk/Toss/WebClient/Connect.js 2011-05-29 17:55:27 UTC (rev 1464) @@ -1,16 +1,7 @@ // JavaScript Toss Module -- Connect (basic Toss Server connection routines) var UNAME = ""; - -var SVG_WIDTH = 500; -var SVG_HEIGHT = 500; -var SVG_MARGINX = 50; -var SVG_MARGINY = 50; -var VIEW_MIRROR = 0; - var GAME_NAME = ""; // name of current game, e.g. "Breakthrough" -var SUGGESTED_ELEM_SIZEX = 25; // suggested size of elements -var SUGGESTED_ELEM_SIZEY = 25; // suggested size of elements var ASYNC_ALL_REQ_PENDING = 0; var ASYNC_CMD_REQ_PENDING = {}; @@ -155,54 +146,3 @@ } var CONN = new Connect (); - - - -// ---- Two functions below are very basic and thus in this file. --- - -// Create basic svg box. -function create_svg_box (margx, margy, parent_id) { - SVG_MARGINX = margx; - 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 + 20; - var wy = SVG_HEIGHT + 2*SVG_MARGINY + 20; - svg.setAttribute('viewBox', '-10 -10 ' + wx + " " + wy); - document.getElementById(parent_id).appendChild(svg); -} - -// 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]).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); - elem.setAttribute ("class", "svgelem"); - for (var i = 0; i < attributes.length; i++) { - elem.setAttribute (attributes[i][0], attributes[i][1].toString()); - } - document.getElementById("svg").appendChild(elem); -} Deleted: trunk/Toss/WebClient/DefaultStyle.js =================================================================== --- trunk/Toss/WebClient/DefaultStyle.js 2011-05-29 00:12:18 UTC (rev 1463) +++ trunk/Toss/WebClient/DefaultStyle.js 2011-05-29 17:55:27 UTC (rev 1464) @@ -1,339 +0,0 @@ -// JavaScript Toss Module -- DefaultStyle (requires TossConnect.js) - -// This module implements default drawing style for games. -// Functions expected from this module: -// - draw_background (game) -// - draw_elem (game, elem) -// - highlight_elem (elem) -// - unhighlight_elem (elem) -// - draw_rel (game, rel_name, args) - -// Helper function: sign of a number. -function sign (x) { - if (x > 0.01) { return (1); } - else if (x < -0.01) { return (-1); } - else { return (0); } -} - - -// Drawings - -var DEFpawn = '<g transform="translate(-22.5,-22.5)"> \ - <path \ - d="M 22,9 C 19.792,9 18,10.792 18,13 C 18,13.885 18.294,14.712 18.781,15.375 C 16.829,16.497 15.5,18.588 15.5,21 C 15.5,23.034 16.442,24.839 17.906,26.031 C 14.907,27.089 10.5,31.578 10.5,39.5 L 33.5,39.5 C 33.5,31.578 29.093,27.089 26.094,26.031 C 27.558,24.839 28.5,23.034 28.5,21 C 28.5,18.588 27.171,16.497 25.219,15.375 C 25.706,14.712 26,13.885 26,13 C 26,10.792 24.208,9 22,9 z " \ - class="chess-path-A" /> \ - </g>'; - -var DEFknight = '<g transform="translate(-22.5,-22.5)"> \ - <path \ - d="M 22,10 C 32.5,11 38.5,18 38,39 L 15,39 C 15,30 25,32.5 23,18" \ - class="chess-path-B" /> \ - <path \ - d="M 24,18 C 24.384,20.911 18.447,25.369 16,27 C 13,29 13.181,31.343 11,31 C 9.9583,30.056 12.413,27.962 11,28 C 10,28 11.187,29.232 10,30 C 9,30 5.9968,31 6,26 C 6,24 12,14 12,14 C 12,14 13.886,12.098 14,10.5 C 13.274,9.5056 13.5,8.5 13.5,7.5 C 14.5,6.5 16.5,10 16.5,10 L 18.5,10 C 18.5,10 19.282,8.0081 21,7 C 22,7 22,10 22,10" \ - class="chess-path-B" /> \ - <path \ - d="M 9 23.5 A 0.5 0.5 0 1 1 8,23.5 A 0.5 0.5 0 1 1 9 23.5 z" \ - transform="translate(0.5,2)" \ - class="chess-path-C" /> \ - <path \ - d="M 15 15.5 A 0.5 1.5 0 1 1 14,15.5 A 0.5 1.5 0 1 1 15 15.5 z" \ - transform="matrix(0.866,0.5,-0.5,0.866,9.6926,-5.1734)" \ - class="chess-path-C" /> \ - <path \ - d="M 37,39 C 38,19 31.5,11.5 25,10.5" \ - class="chess-path-D" /> \ - </g>'; - -var DEFbishop = '<g transform="translate(-22.5,-22.5)"> \ - <path \ - d="M 9,36 C 12.385,35.028 19.115,36.431 22.5,34 C 25.885,36.431 32.615,35.028 36,36 C 36,36 37.646,36.542 39,38 C 38.323,38.972 37.354,38.986 36,38.5 C 32.615,37.528 25.885,38.958 22.5,37.5 C 19.115,38.958 12.385,37.528 9,38.5 C 7.6459,38.986 6.6771,38.972 6,38 C 7.3541,36.055 9,36 9,36 z " \ - style="stroke-linecap:butt;" class="chess-path-B" /> \ - <path \ - d="M 15,32 C 17.5,34.5 27.5,34.5 30,32 C 30.5,30.5 30,30 30,30 C 30,27.5 27.5,26 27.5,26 C 33,24.5 33.5,14.5 22.5,10.5 C 11.5,14.5 12,24.5 17.5,26 C 17.5,26 15,27.5 15,30 C 15,30 14.5,30.5 15,32 z " \ - style="stroke-linecap:butt;" class="chess-path-B" /> \ - <path \ - d="M 25 10 A 2.5 2.5 0 1 1 20,10 A 2.5 2.5 0 1 1 25 10 z" \ - transform="translate(0,-2)" \ - style="stroke-linecap:butt;" class="chess-path-Bx" /> \ - <path \ - d="M 17.5,26 L 27.5,26" \ - style="stroke-linecap:butt;" class="chess-path-D" /> \ - <path \ - d="M 15,30 L 30,30" \ - style="stroke-linecap:butt;" class="chess-path-D" /> \ - <path \ - d="M 22.5,15.5 L 22.5,20.5" \ - style="stroke-linecap:butt;" class="chess-path-D" /> \ - <path \ - d="M 20,18 L 25,18" \ - style="stroke-linecap:butt;" class="chess-path-D" /> \ - </g>'; - -var DEFrook = '<g transform="translate(-22.5,-22.5)"> \ - <path \ - d="M 9,39 L 36,39 L 36,36 L 9,36 L 9,39 z " \ - style="stroke-linecap:butt;" class="chess-path-Bx" /> \ - <path \ - d="M 12,36 L 12,32 L 33,32 L 33,36 L 12,36 z " \ - style="stroke-linecap:butt;" class="chess-path-B" /> \ - <path \ - d="M 11,14 L 11,9 L 15,9 L 15,11 L 20,11 L 20,9 L 25,9 L 25,11 L 30,11 L 30,9 L 34,9 L 34,14" \ - style="stroke-linecap:butt;" class="chess-path-B" /> \ - <path \ - d="M 34,14 L 31,17 L 14,17 L 11,14" \ - style="stroke-linecap:butt;" class="chess-path-B" /> \ - <path \ - d="M 31,17 L 31,29.5 L 14,29.5 L 14,17" \ - style="stroke-linecap:butt;" class="chess-path-B" /> \ - <path \ - d="M 31,29.5 L 32.5,32 L 12.5,32 L 14,29.5" \ - class="chess-path-B" /> \ - <path \ - d="M 11,14 L 34,14" \ - class="chess-path-D" /> \ - </g>'; - -var DEFqueen = '<g transform="translate(-22.5,-22.5)"> \ - <path \ - d="M 9 13 A 2 2 0 1 1 5,13 A 2 2 0 1 1 9 13 z" \ - transform="translate(-1,-1)" \ - style="fill-rule: none;" class="chess-path-B" /> \ - <path \ - d="M 9 13 A 2 2 0 1 1 5,13 A 2 2 0 1 1 9 13 z" \ - transform="translate(15.5,-5.5)" \ - style="fill-rule: none;" class="chess-path-B" /> \ - <path \ - d="M 9 13 A 2 2 0 1 1 5,13 A 2 2 0 1 1 9 13 z" \ - transform="translate(32,-1)" \ - style="fill-rule: none;" class="chess-path-B" /> \ - <path \ - d="M 9 13 A 2 2 0 1 1 5,13 A 2 2 0 1 1 9 13 z" \ - transform="translate(7,-4.5)" \ - style="fill-rule: none;" class="chess-path-B" /> \ - <path \ - d="M 9 13 A 2 2 0 1 1 5,13 A 2 2 0 1 1 9 13 z" \ - transform="translate(24,-4)" \ - style="fill-rule: none;" class="chess-path-B" /> \ - <path \ - d="M 9,26 C 17.5,24.5 30,24.5 36,26 L 38,14 L 31,25 L 31,11 L 25.5,24.5 L 22.5,9.5 L 19.5,24.5 L 14,10.5 L 14,25 L 7,14 L 9,26 z " \ - style="stroke-linecap:butt;" class="chess-path-B" /> \ - <path \ - d="M 9,26 C 9,28 10.5,28 11.5,30 C 12.5,31.5 12.5,31 12,33.5 C 10.5,34.5 10.5,36 10.5,36 C 9,37.5 11,38.5 11,38.5 C 17.5,39.5 27.5,39.5 34,38.5 C 34,38.5 35.5,37.5 34,36 C 34,36 34.5,34.5 33,33.5 C 32.5,31 32.5,31.5 33.5,30 C 34.5,28 36,28 36,26 C 27.5,24.5 17.5,24.5 9,26 z " \ - style="stroke-linecap:butt;" class="chess-path-B" /> \ - <path \ - d="M 11.5,30 C 15,29 30,29 33.5,30" \ - class="chess-path-D" /> \ - <path \ - d="M 12,33.5 C 18,32.5 27,32.5 33,33.5" \ - class="chess-path-D" /> \ - <path \ - d="M 10.5,36 C 15.5,35 29,35 34,36" \ - class="chess-path-D" /> \ - </g>'; - -var DEFking = '<g transform="translate(-22.5,-22.5)"> \ - <path d="M 22.5,11.625 L 22.5,6" class="chess-path-B" /> \ - <path d="M 22.5,25 C 22.5,25 27,17.5 25.5,14.5 C 25.5,14.5 24.5,12 22.5,12 C 20.5,12 19.5,14.5 19.5,14.5 C 18,17.5 22.5,25 22.5,25" \ - style="fill:stroke-linecap:butt;" class="chess-path-B" /> \ - <path d="M 11.5,37 C 17,40.5 27,40.5 32.5,37 L 32.5,30 C 32.5,30 41.5,25.5 38.5,19.5 C 34.5,13 25,16 22.5,23.5 L 22.5,27 L 22.5,23.5 C 19,16 9.5,13 6.5,19.5 C 3.5,25.5 11.5,29.5 11.5,29.5 L 11.5,37 z " \ - class="chess-path-B" /> \ - <path d="M 20,8 L 25,8" class="chess-path-B" /> \ - <path d="M 11.5,29.5 C 17,27 27,27 32.5,30" class="chess-path-D" /> \ - <path d="M 11.5,37 C 17,34.5 27,34.5 32.5,37" \ - class="chess-path-D" /> \ - <path d="M 11.5,33.5 C 17,31.5 27,31.5 32.5,33.5" \ - class="chess-path-D" /> \ - </g>'; - - -function is_int (s) { - 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"; - if (is_int (elem.substring(1))) { - var psum = elem.charCodeAt(0) + parseInt (elem.substring(1)); - elem_cl = "model-elem-" + (psum % 2); - }; - return (elem_cl); -} - -// Draw the element [elem]. -function draw_elem (game, elem) { - var pos = ST.elem_pos[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]. -function highlight_elem (elem) { - var e = document.getElementById ("elem_" + elem); - e.setAttribute ("class", "model-elem-highlight"); -} - -// Unhighlight the element [elem]. -function unhighlight_elem (elem) { - var e = document.getElementById ("elem_" + elem); - e.setAttribute ("class", elem_class(elem)); -} - -// Draw relation [rel_name] between elements [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 = ST.elem_pos[args[0]]; - if (rel_name == "P") { // Tic-tac-toe cross - 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], - ["id", "pred_" + args[0] + "_" + rel_name], - ["class", "model-pred-" + rel_name], - ["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>', []); - 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>', []); - 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>', []); - 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>', []); - 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>', []); - 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>', []); - 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>', []); - 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>', []); - 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>', []); - 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>', []); - 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>', []); - 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>', []); - document.getElementById("svg").appendChild(f); - } else { - add_svg ("circle", - [["cx", pos[0]], ["cy", pos[1]], ["r", SUGGESTED_ELEM_SIZEX - 12], - ["id", "pred_" + args[0] + "_" + rel_name], - ["class", "model-pred-" + rel_name], - ["stroke-width", (SUGGESTED_ELEM_SIZEX / 10) + 2], - ["onclick", ("handle_elem_click('" + args[0] + "')")]]); - } - } - if (args.length == 2) { - if (rel_name == "E") { - var pos1 = ST.elem_pos[args[0]]; - var pos2 = ST.elem_pos[args[1]]; - if (sign (pos1[0] - pos2[0]) == 0) { - var d = SUGGESTED_ELEM_SIZEY * sign (pos1[1] - pos2[1]); - add_svg ("line", [["x1", pos1[0]], ["y1", pos1[1] - d], - ["x2", pos2[0]], ["y2", pos2[1] + d], - ["class", "model-edge-E"]]); - } else if (sign (pos1[1] - pos2[1]) == 0) { - var d = SUGGESTED_ELEM_SIZEX * sign (pos1[0] - pos2[0]); - add_svg ("line", [["x1", pos1[0] - d], ["y1", pos1[1]], - ["x2", pos2[0] + d], ["y2", pos2[1]], - ["class", "model-edge-E"]]); - } - else { - var dx = SUGGESTED_ELEM_SIZEX * sign (pos1[0] - pos2[0]); - var dy = SUGGESTED_ELEM_SIZEY * sign (pos1[1] - pos2[1]); - add_svg ("line", [["x1", pos1[0] + dx], ["y1", pos1[1] + dy], - ["x2", pos2[0] - dx], ["y2", pos2[1] - dy], - ["class", "model-edge-E"]]); - } - } - } -} Copied: trunk/Toss/WebClient/Drawing.js (from rev 1463, trunk/Toss/WebClient/DefaultStyle.js) =================================================================== --- trunk/Toss/WebClient/Drawing.js (rev 0) +++ trunk/Toss/WebClient/Drawing.js 2011-05-29 17:55:27 UTC (rev 1464) @@ -0,0 +1,374 @@ +// JavaScript Toss Module -- Drawing + +var SVG_WIDTH = 500; +var SVG_HEIGHT = 500; +var SVG_MARGINX = 50; +var SVG_MARGINY = 50; +var VIEW_MIRROR = 0; + +var SUGGESTED_ELEM_SIZEX = 25; // suggested size of elements +var SUGGESTED_ELEM_SIZEY = 25; // suggested size of elements + + + +// ------ Drawing functions ---- + +// Create basic svg box. +function create_svg_box (margx, margy, parent_id) { + SVG_MARGINX = margx; + 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 + 20; + var wy = SVG_HEIGHT + 2*SVG_MARGINY + 20; + svg.setAttribute('viewBox', '-10 -10 ' + wx + " " + wy); + document.getElementById(parent_id).appendChild(svg); +} + +// Draw the model. +function draw_model (game, state) { + var sqrt = Math.round (Math.sqrt (state.elems.length)); + if (sqrt * sqrt == state.elems.length) { // perhaps a grid + SUGGESTED_ELEM_SIZEX = SVG_WIDTH / (2.0 * (sqrt-1)); + SUGGESTED_ELEM_SIZEY = SVG_HEIGHT / (2.0 * (sqrt-1)); + } else { + SUGGESTED_ELEM_SIZEX = SVG_WIDTH / 20; + SUGGESTED_ELEM_SIZEY = SVG_HEIGHT / 20; + } + draw_background (game); + for (var i = 0; i < state.elems.length; i++) { + draw_elem (game, state.elems[i]); + } + for (var i = 0; i < state.rels.length; i++) { + draw_rel (game, state.rels[i]); + } +} + +// Mostly we skip background drawings, but when needed, they are here. +function draw_background (game) { + var x = SVG_MARGINX; + var y = SVG_MARGINY; + var w = SVG_WIDTH + 2 * x; + var h = SVG_HEIGHT + 2 * x; + var bg = SHAPES.background_svg (game, 0, 0, w, h, []); + if (bg != undefined) { document.getElementById("svg").appendChild(bg); } +} + +// To draw chess board we distinguish even/odd placed elements. +function elem_class (elemid) { + var elem_cl = "model-elem"; + var is_int = function (s) { return (parseInt(s).toString() == s) }; + if (is_int (elemid.substring(1))) { + var psum = elemid.charCodeAt(0) + parseInt (elemid.substring(1)); + elem_cl = "model-elem-" + (psum % 2); + }; + return (elem_cl); +} + +// Draw the element [elem]. +function draw_elem (game, elem) { + if (game != "Connect4") { + var r = SHAPES.rect ( + elem.x, elem.y, 2 * SUGGESTED_ELEM_SIZEX, 2 * SUGGESTED_ELEM_SIZEY, + [["id", "elem_" + elem.id], ["class", elem_class(elem.id)], + ["onclick", ("handle_elem_click('" + elem.id + "')")]]); + document.getElementById("svg").appendChild(r); + } else { + var circ = SHAPES.circle ( + elem.x, elem.y, 30, + [["id", "elem_" + elem.id], ["class", elem_class(elem.id)], + ["onclick", "handle_elem_click('" + elem.id + "')"]]); + document.getElementById("svg").appendChild(circ); + } +} + +// Highlight the element [elem]. +function highlight_elem (elemid) { + var e = document.getElementById ("elem_" + elemid); + e.setAttribute ("class", "model-elem-highlight"); +} + +// Unhighlight the element [elem]. +function unhighlight_elem (elemid) { + var e = document.getElementById ("elem_" + elemid); + e.setAttribute ("class", elem_class(elemid)); +} + +// Draw relation [rel_name] between elements [args]. +function draw_rel (game, rel) { + if (rel.args.length == 1) { + var ihatrs = [["id", "pred_" + rel.args[0].id + "_" + rel.name], + ["onclick", "handle_elem_click('"+ rel.args[0].id +"')"]] + var pos = [rel.args[0].x, rel.args[0].y]; + var f = SHAPES.rel_svg (game, pos[0],pos[1],20,20, rel.name,ihatrs); + if (f != undefined) { + document.getElementById("svg").appendChild(f); + } else { + var circ = SHAPES.circle ( + pos[0], pos[1], SUGGESTED_ELEM_SIZEX - 10, + [["id", "pred_" + rel.args[0].id + "_" + rel.name], + ["class", "model-pred-" + rel.name], + ["stroke-width", (SUGGESTED_ELEM_SIZEX / 10) + 2], + ["onclick", ("handle_elem_click('"+ rel.args[0].id +"')")]]); + document.getElementById("svg").appendChild(circ); + } + } + if (rel.args.length == 2) { + if (rel.name == "E") { + var l = SHAPES.line (rel.args[0].x, rel.args[0].y, + rel.args[1].x, rel.args[1].y, + [["class", "model-edge-E"]]); + document.getElementById("svg").appendChild(l); + } + } +} + + +// ------------ Shape Drawings in SVG ------------------- + +function Shapes () { + var DEFpawn = '<g transform="translate(-22.5,-22.5)"> \ + <path \ + d="M 22,9 C 19.792,9 18,10.792 18,13 C 18,13.885 18.294,14.712 18.781,15.375 C 16.829,16.497 15.5,18.588 15.5,21 C 15.5,23.034 16.442,24.839 17.906,26.031 C 14.907,27.089 10.5,31.578 10.5,39.5 L 33.5,39.5 C 33.5,31.578 29.093,27.089 26.094,26.031 C 27.558,24.839 28.5,23.034 28.5,21 C 28.5,18.588 27.171,16.497 25.219,15.375 C 25.706,14.712 26,13.885 26,13 C 26,10.792 24.208,9 22,9 z " \ + class="chess-path-A" /> \ + </g>'; + + var DEFknight = '<g transform="translate(-22.5,-22.5)"> \ + <path \ + d="M 22,10 C 32.5,11 38.5,18 38,39 L 15,39 C 15,30 25,32.5 23,18" \ + class="chess-path-B" /> \ + <path \ + d="M 24,18 C 24.384,20.911 18.447,25.369 16,27 C 13,29 13.181,31.343 11,31 C 9.9583,30.056 12.413,27.962 11,28 C 10,28 11.187,29.232 10,30 C 9,30 5.9968,31 6,26 C 6,24 12,14 12,14 C 12,14 13.886,12.098 14,10.5 C 13.274,9.5056 13.5,8.5 13.5,7.5 C 14.5,6.5 16.5,10 16.5,10 L 18.5,10 C 18.5,10 19.282,8.0081 21,7 C 22,7 22,10 22,10" \ + class="chess-path-B" /> \ + <path \ + d="M 9 23.5 A 0.5 0.5 0 1 1 8,23.5 A 0.5 0.5 0 1 1 9 23.5 z" \ + transform="translate(0.5,2)" \ + class="chess-path-C" /> \ + <path \ + d="M 15 15.5 A 0.5 1.5 0 1 1 14,15.5 A 0.5 1.5 0 1 1 15 15.5 z" \ + transform="matrix(0.866,0.5,-0.5,0.866,9.6926,-5.1734)" \ + class="chess-path-C" /> \ + <path \ + d="M 37,39 C 38,19 31.5,11.5 25,10.5" \ + class="chess-path-D" /> \ + </g>'; + + var DEFbishop = '<g transform="translate(-22.5,-22.5)"> \ + <path \ + d="M 9,36 C 12.385,35.028 19.115,36.431 22.5,34 C 25.885,36.431 32.615,35.028 36,36 C 36,36 37.646,36.542 39,38 C 38.323,38.972 37.354,38.986 36,38.5 C 32.615,37.528 25.885,38.958 22.5,37.5 C 19.115,38.958 12.385,37.528 9,38.5 C 7.6459,38.986 6.6771,38.972 6,38 C 7.3541,36.055 9,36 9,36 z " \ + style="stroke-linecap:butt;" class="chess-path-B" /> \ + <path \ + d="M 15,32 C 17.5,34.5 27.5,34.5 30,32 C 30.5,30.5 30,30 30,30 C 30,27.5 27.5,26 27.5,26 C 33,24.5 33.5,14.5 22.5,10.5 C 11.5,14.5 12,24.5 17.5,26 C 17.5,26 15,27.5 15,30 C 15,30 14.5,30.5 15,32 z " \ + style="stroke-linecap:butt;" class="chess-path-B" /> \ + <path \ + d="M 25 10 A 2.5 2.5 0 1 1 20,10 A 2.5 2.5 0 1 1 25 10 z" \ + transform="translate(0,-2)" \ + style="stroke-linecap:butt;" class="chess-path-Bx" /> \ + <path \ + d="M 17.5,26 L 27.5,26" \ + style="stroke-linecap:butt;" class="chess-path-D" /> \ + <path \ + d="M 15,30 L 30,30" \ + style="stroke-linecap:butt;" class="chess-path-D" /> \ + <path \ + d="M 22.5,15.5 L 22.5,20.5" \ + style="stroke-linecap:butt;" class="chess-path-D" /> \ + <path \ + d="M 20,18 L 25,18" \ + style="stroke-linecap:butt;" class="chess-path-D" /> \ + </g>'; + + var DEFrook = '<g transform="translate(-22.5,-22.5)"> \ + <path \ + d="M 9,39 L 36,39 L 36,36 L 9,36 L 9,39 z " \ + style="stroke-linecap:butt;" class="chess-path-Bx" /> \ + <path \ + d="M 12,36 L 12,32 L 33,32 L 33,36 L 12,36 z " \ + style="stroke-linecap:butt;" class="chess-path-B" /> \ + <path \ + d="M 11,14 L 11,9 L 15,9 L 15,11 L 20,11 L 20,9 L 25,9 L 25,11 L 30,11 L 30,9 L 34,9 L 34,14" \ + style="stroke-linecap:butt;" class="chess-path-B" /> \ + <path \ + d="M 34,14 L 31,17 L 14,17 L 11,14" \ + style="stroke-linecap:butt;" class="chess-path-B" /> \ + <path \ + d="M 31,17 L 31,29.5 L 14,29.5 L 14,17" \ + style="stroke-linecap:butt;" class="chess-path-B" /> \ + <path \ + d="M 31,29.5 L 32.5,32 L 12.5,32 L 14,29.5" \ + class="chess-path-B" /> \ + <path \ + d="M 11,14 L 34,14" \ + class="chess-path-D" /> \ + </g>'; + + var DEFqueen = '<g transform="translate(-22.5,-22.5)"> \ + <path \ + d="M 9 13 A 2 2 0 1 1 5,13 A 2 2 0 1 1 9 13 z" \ + transform="translate(-1,-1)" \ + style="fill-rule: none;" class="chess-path-B" /> \ + <path \ + d="M 9 13 A 2 2 0 1 1 5,13 A 2 2 0 1 1 9 13 z" \ + transform="translate(15.5,-5.5)" \ + style="fill-rule: none;" class="chess-path-B" /> \ + <path \ + d="M 9 13 A 2 2 0 1 1 5,13 A 2 2 0 1 1 9 13 z" \ + transform="translate(32,-1)" \ + style="fill-rule: none;" class="chess-path-B" /> \ + <path \ + d="M 9 13 A 2 2 0 1 1 5,13 A 2 2 0 1 1 9 13 z" \ + transform="translate(7,-4.5)" \ + style="fill-rule: none;" class="chess-path-B" /> \ + <path \ + d="M 9 13 A 2 2 0 1 1 5,13 A 2 2 0 1 1 9 13 z" \ + transform="translate(24,-4)" \ + style="fill-rule: none;" class="chess-path-B" /> \ + <path \ + d="M 9,26 C 17.5,24.5 30,24.5 36,26 L 38,14 L 31,25 L 31,11 L 25.5,24.5 L 22.5,9.5 L 19.5,24.5 L 14,10.5 L 14,25 L 7,14 L 9,26 z " \ + style="stroke-linecap:butt;" class="chess-path-B" /> \ + <path \ + d="M 9,26 C 9,28 10.5,28 11.5,30 C 12.5,31.5 12.5,31 12,33.5 C 10.5,34.5 10.5,36 10.5,36 C 9,37.5 11,38.5 11,38.5 C 17.5,39.5 27.5,39.5 34,38.5 C 34,38.5 35.5,37.5 34,36 C 34,36 34.5,34.5 33,33.5 C 32.5,31 32.5,31.5 33.5,30 C 34.5,28 36,28 36,26 C 27.5,24.5 17.5,24.5 9,26 z " \ + style="stroke-linecap:butt;" class="chess-path-B" /> \ + <path \ + d="M 11.5,30 C 15,29 30,29 33.5,30" \ + class="chess-path-D" /> \ + <path \ + d="M 12,33.5 C 18,32.5 27,32.5 33,33.5" \ + class="chess-path-D" /> \ + <path \ + d="M 10.5,36 C 15.5,35 29,35 34,36" \ + class="chess-path-D" /> \ + </g>'; + + var DEFking = '<g transform="translate(-22.5,-22.5)"> \ + <path d="M 22.5,11.625 L 22.5,6" class="chess-path-B" /> \ + <path d="M 22.5,25 C 22.5,25 27,17.5 25.5,14.5 C 25.5,14.5 24.5,12 22.5,12 C 20.5,12 19.5,14.5 19.5,14.5 C 18,17.5 22.5,25 22.5,25" \ + style="fill:stroke-linecap:butt;" class="chess-path-B" /> \ + <path d="M 11.5,37 C 17,40.5 27,40.5 32.5,37 L 32.5,30 C 32.5,30 41.5,25.5 38.5,19.5 C 34.5,13 25,16 22.5,23.5 L 22.5,27 L 22.5,23.5 C 19,16 9.5,13 6.5,19.5 C 3.5,25.5 11.5,29.5 11.5,29.5 L 11.5,37 z " \ + class="chess-path-B" /> \ + <path d="M 20,8 L 25,8" class="chess-path-B" /> \ + <path d="M 11.5,29.5 C 17,27 27,27 32.5,30" class="chess-path-D" /> \ + <path d="M 11.5,37 C 17,34.5 27,34.5 32.5,37" \ + class="chess-path-D" /> \ + <path d="M 11.5,33.5 C 17,31.5 27,31.5 32.5,33.5" \ + class="chess-path-D" /> \ + </g>'; + + var default_rel = {}; + default_rel["wP"] = '<g class="chessW">' + DEFpawn + '</g>'; + default_rel["bP"] = '<g class="chessB">' + DEFpawn + '</g>'; + default_rel["wN"] = '<g class="chessW">' + DEFknight + '</g>'; + default_rel["bN"] = '<g class="chessB">' + DEFknight + '</g>'; + default_rel["wB"] = '<g class="chessW">' + DEFbishop + '</g>'; + default_rel["bB"] = '<g class="chessB">' + DEFbishop + '</g>'; + default_rel["wR"] = '<g class="chessW">' + DEFrook + '</g>'; + default_rel["bR"] = '<g class="chessB">' + DEFrook + '</g>'; + default_rel["wQ"] = '<g class="chessW">' + DEFqueen + '</g>'; + default_rel["Wq"] = '<g class="chessW">' + DEFqueen + '</g>'; + default_rel["bQ"] = '<g class="chessB">' + DEFqueen + '</g>'; + default_rel["Bq"] = '<g class="chessB">' + DEFqueen + '</g>'; + default_rel["wK"] = '<g class="chessW">' + DEFking + '</g>'; + default_rel["bK"] = '<g class="chessB">' + DEFking + '</g>'; + default_rel["P"] = + '<g class="model-pred-P">' + // Cross + '<line x1="-17" y1="-17" x2="17" y2="17" />' + + '<line x1="17" y1="-17" x2="-17" y2="17" /></g>'; + default_rel["Q"] = + '<circle class="model-pred-Q" cx="0" cy="0" r="17" />'; // Circle + + var game_rel = {}; + game_rel["Entanglement"] = {}; + game_rel["Entanglement"]["R"] = + '<circle class="model-pred-R" cx="0" cy="0" r="25" />'; + + game_rel["Connect4"] = {}; + game_rel["Connect4"]["P"] = + '<circle class="model-pred-P" cx="0" cy="0" r="40" />'; + game_rel["Connect4"]["Q"] = + '<circle class="model-pred-Q" cx="0" cy="0" r="40" />'; + + + var background = {}; + background["Connect4"] = '<rect x="0" y="0" width="500" height="500" ' + + 'stroke-width="5" rx="5" ry="5" id="board_connect4" />'; + + + // Create new svg element [elem], child of svg, set attributes, scale. + var svg_from_string = function (x, y, sizex, sizey, s, attrs) { + 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]).childNodes[0]; + var elem_in = elem.childNodes[0]; + for (var i = 0; i < attrs.length; i++) { + elem_in.setAttribute (attrs[i][0], attrs[i][1].toString()); + } + return (elem); + } + + + // Public methods + + var shapes_rel_svg = function (game, posx, posy, sizex, sizey, rn, attrs) { + var svg_s = default_rel[rn]; + if (game_rel[game] != undefined) { + if (game_rel[game][rn] != undefined) { + svg_s = game_rel[game][rn]; + } + } + if (svg_s == undefined) { return (undefined) }; + return (svg_from_string (posx, posy, sizex, sizey, svg_s, attrs)); + } + this.rel_svg = shapes_rel_svg; + + var shapes_circle = function (cx, cy, r, attrs) { + return (svg_from_string (cx, cy, SUGGESTED_ELEM_SIZEX - 10, + SUGGESTED_ELEM_SIZEY - 10, + '<circle cx="0" cy="0" r="' + r + '" />', + attrs)); + } + this.circle = shapes_circle; + + var shapes_rect = function (x, y, w, h, attrs) { + var rs = '<rect x="0" y="0" width="' + w + '" height="' + h + '" />' + return (svg_from_string (x - w/2, y - w/2, SUGGESTED_ELEM_SIZEX - 10, + SUGGESTED_ELEM_SIZEY - 10, rs, attrs)); + } + this.rect = shapes_rect; + + var shapes_line = function (x1, y1, x2, y2, attrs) { + var sign = function (x) { + if (x > 0.01) { return (1); } + else if (x < -0.01) { return (-1); } + else { return (0); } + } + var dx = SUGGESTED_ELEM_SIZEX * sign (x1 - x2); + var dy = SUGGESTED_ELEM_SIZEY * sign (y1 - y2); + var nx1 = x1 - dx; + var nx2 = x2 + dx; + var ny1 = y1 - dy; + var ny2 = y2 + dy; + var ls = '<line x1="' + nx1 + '" y1="' + ny1 + + '" x2="' + nx2 + '" y2="' + ny2 + '" />'; + return (svg_from_string (0, 0, SUGGESTED_ELEM_SIZEX - 10, + SUGGESTED_ELEM_SIZEY - 10, ls, attrs)); + } + this.line = shapes_line; + + var shapes_background_svg = function (game, x, y, w, h, attrs) { + var bg = background[game]; + if (bg == undefined) { return (undefined); } + var ws = (SUGGESTED_ELEM_SIZEX - 10) / (w / 500); + var hs = (SUGGESTED_ELEM_SIZEY - 10) / (h / 500); + return (svg_from_string (x, y, ws, hs, bg, attrs)); + } + this.background_svg = shapes_background_svg; + + return (this); +} + +var SHAPES = new Shapes (); Modified: trunk/Toss/WebClient/Main.js =================================================================== --- trunk/Toss/WebClient/Main.js 2011-05-29 00:12:18 UTC (rev 1463) +++ trunk/Toss/WebClient/Main.js 2011-05-29 17:55:27 UTC (rev 1464) @@ -21,33 +21,6 @@ var ST = undefined; -// Get model information from server. -function get_model_info () { - for (var i = 0; i < ST.elems.length; i++) { - ELEM_COUNTERS[ST.elems[i]] = 0; - } - var sqrt = Math.round (Math.sqrt (ST.elems.length)); - if (sqrt * sqrt == ST.elems.length) { // perhaps a grid - SUGGESTED_ELEM_SIZEX = SVG_WIDTH / (2.0 * (sqrt-1)); - SUGGESTED_ELEM_SIZEY = SVG_HEIGHT / (2.0 * (sqrt-1)); - } else { - SUGGESTED_ELEM_SIZEX = SVG_WIDTH / 20; - SUGGESTED_ELEM_SIZEY = SVG_HEIGHT / 20; - } -} - -// Draw the model using function from Toss[X]Style.js. -// WARNING: must call get_model_info first! -function draw_model (game) { - draw_background (game); - for (var i = 0; i < ST.elems.length; i++) { - draw_elem (game, ST.elems[i]); - } - for (var i = 0; i < ST.rels.length; i++) { - draw_rel (game, ST.rels[i][0], ST.rels[i][1]); - } -} - // Clear whole svg box. function clear_svg () { LAST_CLICKED_ELEM = ""; @@ -84,9 +57,11 @@ if (! SIMPLE_MOVES) { document.getElementById("working").style.display = "block"; } - get_model_info (); + for (var i = 0; i < ST.elems.length; i++) { + ELEM_COUNTERS[ST.elems[i].id] = 0; + } create_svg_box (SVG_MARGINX, SVG_MARGINY, "board"); - draw_model (GAME_NAME); + draw_model (GAME_NAME, ST); if (ST.payoff == "") { document.getElementById('movebt').innerHTML = "Make move:"; document.getElementById('cur-move').innerHTML = "none"; Modified: trunk/Toss/WebClient/State.js =================================================================== --- trunk/Toss/WebClient/State.js 2011-05-29 00:12:18 UTC (rev 1463) +++ trunk/Toss/WebClient/State.js 2011-05-29 17:55:27 UTC (rev 1464) @@ -31,25 +31,36 @@ Move.prototype.did_match = move_did_match; +// --------- Elem and Rel Objects ----- +function Elem (id, x, y) { + this.id = id; + this.x = x; + this.y = y; +} + +function Rel (name, args) { + this.name = name; + this.args = args; +} + + // --------- State Object ------ -// Translate position from Toss Model coordinates to SVG coordinates. -function translate_pos (pos) { - var x = ((pos[0] - this.minx) * SVG_WIDTH) / this.width; - if (VIEW_MIRROR == 0) { - var y = ((pos[1] - this.miny) * SVG_HEIGHT) / this.height; - } else { - var y = - ((this.height - (pos[1] - this.miny)) * SVG_WIDTH) / - this.height; - } - return ([x + SVG_MARGINX, y + SVG_MARGINY]) -} - // Object representing a state of the system (game). function State (info_string) { + // Private: Translate position from Model coordinates to SVG coordinates. + var translate_pos = function (pos, minx, miny, width, height) { + var x = ((pos[0] - minx) * SVG_WIDTH) / width; + if (VIEW_MIRROR == 0) { + var y = ((pos[1] - miny) * SVG_HEIGHT) / height; + } else { + var y = ((height - (pos[1] - miny))*SVG_WIDTH) / height; + } + return ([x + SVG_MARGINX, y + SVG_MARGINY]) + }; + // The info is a $-separated array of 5 components. var res_arr = []; res_arr = info_string.split("$"); @@ -67,24 +78,34 @@ // The second component is the list of elements of the structure. var l = convert_python_list(',', res_arr[1]); this.elems = []; - // We directly compute element positions for svg. - this.elem_pos = {}; - this.translate_pos = translate_pos; for (var i = 0; i < l.length; i++) { var e = convert_python_list (';', l[i]); - this.elems.push (e[0]); - this.elem_pos[e[0]] = - this.translate_pos ([parseFloat(e[1]), parseFloat(e[2])]); + var pos = translate_pos ([parseFloat(e[1]), parseFloat(e[2])], + this.minx, this.miny, this.width, this.height); + this.elems.push (new Elem (e[0], pos[0], pos[1])); } + var find_elem = function (elem_id, els) { + for (var i = 0; i < els.length; i++) { + if (els[i].id == elem_id) { return (els[i]); } + } + return (undefined); + } + // The third component are the relations in the structure. var r = convert_python_list(';', res_arr[2]); var rels = []; for (var i = 0; i < r.length; i++) { var rel_name = strip(' ', '\'', r[i].substring(1,r[i].indexOf(','))); var args_s = r[i].substring(r[i].indexOf('[')+1, r[i].indexOf(']')); - if (rel_name[0] != "_" && args_s != "''") { - rels.push ([rel_name, convert_python_list (',', args_s)]); + var args = convert_python_list (',', args_s); + var is_undefined = false; + for (var j = 0; j < args.length; j++) { + args[j] = find_elem (args[j], this.elems); + if (args[j] == undefined) { is_undefined = true }; + } + if (rel_name[0] != "_" && args_s != "''" && is_undefined == false) { + rels.push (new Rel (rel_name, args)); } } this.rels = rels; Modified: trunk/Toss/WebClient/index.html =================================================================== --- trunk/Toss/WebClient/index.html 2011-05-29 00:12:18 UTC (rev 1463) +++ trunk/Toss/WebClient/index.html 2011-05-29 17:55:27 UTC (rev 1464) @@ -12,7 +12,7 @@ <script type="text/javascript" src="crypto-sha256.js"> </script> <script type="text/javascript" src="Connect.js"> </script> <script type="text/javascript" src="State.js"> </script> - <script type="text/javascript" src="DefaultStyle.js"> </script> + <script type="text/javascript" src="Drawing.js"> </script> <script type="text/javascript" src="Main.js"> </script> <script type="text/javascript" src="Login.js"> </script> </head> Modified: trunk/Toss/WebClient/profile.html =================================================================== --- trunk/Toss/WebClient/profile.html 2011-05-29 00:12:18 UTC (rev 1463) +++ trunk/Toss/WebClient/profile.html 2011-05-29 17:55:27 UTC (rev 1464) @@ -10,7 +10,7 @@ <script type="text/javascript" src="crypto-sha256.js"> </script> <script type="text/javascript" src="Connect.js"> </script> <script type="text/javascript" src="State.js"> </script> - <script type="text/javascript" src="DefaultStyle.js"> </script> + <script type="text/javascript" src="Drawing.js"> </script> <script type="text/javascript" src="Main.js"> </script> <script type="text/javascript" src="Login.js"> </script> </head> This was sent by the SourceForge.net collaborative development platform, the world's largest Open Source development site. |
From: <luk...@us...> - 2011-06-10 23:30:04
|
Revision: 1475 http://toss.svn.sourceforge.net/toss/?rev=1475&view=rev Author: lukaszkaiser Date: 2011-06-10 23:29:58 +0000 (Fri, 10 Jun 2011) Log Message: ----------- Small styling improvements. Modified Paths: -------------- trunk/Toss/WebClient/Style.css trunk/Toss/WebClient/index.html Modified: trunk/Toss/WebClient/Style.css =================================================================== --- trunk/Toss/WebClient/Style.css 2011-06-10 17:38:57 UTC (rev 1474) +++ trunk/Toss/WebClient/Style.css 2011-06-10 23:29:58 UTC (rev 1475) @@ -19,6 +19,27 @@ font-family: Verdana, 'TeXGyreHerosRegular', sans; } +#nosvg { + display: none; + position: fixed; + left: 0px; + right: 0px; + top: 5em; + min-width: 20em; + width: 60%; + margin-left: auto; + margin-right: auto; + color: #fff1d4; + background-color: #400827; + font-weight: bold; + padding: 2em; + border: 1px solid #260314; +} + +#nosvg a { + color: #f5f2ef; +} + .bt { border-color: #260314; border-radius: 4px; @@ -107,7 +128,6 @@ } .game-picspan { - display: none; position: absolute; top: 50%; left: 0px; @@ -497,6 +517,7 @@ list-style: none; padding-left: 1.5em; margin-top: 0.5em; + padding-bottom: 1em; } #opponents, #chess-level-warning { Modified: trunk/Toss/WebClient/index.html =================================================================== --- trunk/Toss/WebClient/index.html 2011-06-10 17:38:57 UTC (rev 1474) +++ trunk/Toss/WebClient/index.html 2011-06-10 23:29:58 UTC (rev 1475) @@ -173,8 +173,7 @@ </div> -<div id="nosvg" - style="border: 1px solid #260314; padding-left: 1em; display: none;"> +<div id="nosvg"> <p style="padding-left: 1.2em; font-size: 1.2em;"><b>SVG Support Missing</b></p> <p>Your browser does not seem to support SVG, which is <b>necessary</b> to enjoy tPlay. @@ -249,11 +248,12 @@ <ul class="plays-list" id="plays-list-Tic-Tac-Toe"> <li style="display: none;"/> </ul> - <p class="game-par"> + <p class="game-par" style="display: none;"> <button onclick="new_play('Concurrent-Tic-Tac-Toe')" class="boldobt">Concurrent-Tic-Tac-Toe</button> </p> - <ul class="plays-list" id="plays-list-Concurrent-Tic-Tac-Toe"> + <ul class="plays-list" style="display: none;" + id="plays-list-Concurrent-Tic-Tac-Toe"> <li style="display: none;"/> </ul> </div> This was sent by the SourceForge.net collaborative development platform, the world's largest Open Source development site. |
From: <luk...@us...> - 2011-06-11 01:03:24
|
Revision: 1477 http://toss.svn.sourceforge.net/toss/?rev=1477&view=rev Author: lukaszkaiser Date: 2011-06-11 01:03:18 +0000 (Sat, 11 Jun 2011) Log Message: ----------- Corrections to whitespace bugs. Modified Paths: -------------- trunk/Toss/WebClient/Connect.js trunk/Toss/WebClient/Main.js Modified: trunk/Toss/WebClient/Connect.js =================================================================== --- trunk/Toss/WebClient/Connect.js 2011-06-10 23:37:14 UTC (rev 1476) +++ trunk/Toss/WebClient/Connect.js 2011-06-11 01:03:18 UTC (rev 1477) @@ -20,8 +20,9 @@ // Convert a string [str] representing python list to array and return it. // WARNING: we use [sep] as separator, it must not occur in list elements! -function convert_python_list (sep, str) { +function convert_python_list (sep, str_in) { var res_arr = []; + var str = strip(' ', '\n', str_in); res_arr = strip('[', ']', str).split(sep); if (res_arr.length == 1 && res_arr[0] == "") { return ([]); } for (i = 0; i < res_arr.length; i++) { Modified: trunk/Toss/WebClient/Main.js =================================================================== --- trunk/Toss/WebClient/Main.js 2011-06-10 23:37:14 UTC (rev 1476) +++ trunk/Toss/WebClient/Main.js 2011-06-11 01:03:18 UTC (rev 1477) @@ -42,7 +42,8 @@ } // Substitute players for 0 and 1 in a payoff string. -function subst_pl (s) { +function subst_pl (str) { + var s = strip (' ', '\n', str); 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"); } This was sent by the SourceForge.net collaborative development platform, the world's largest Open Source development site. |
From: <ch...@us...> - 2011-06-13 07:21:48
|
Revision: 1481 http://toss.svn.sourceforge.net/toss/?rev=1481&view=rev Author: chalmi Date: 2011-06-13 07:21:40 +0000 (Mon, 13 Jun 2011) Log Message: ----------- msw: Play premodel working with errors Modified Paths: -------------- trunk/Toss/WebClient/msw.html trunk/Toss/WebClient/msw.js Modified: trunk/Toss/WebClient/msw.html =================================================================== --- trunk/Toss/WebClient/msw.html 2011-06-13 05:51:18 UTC (rev 1480) +++ trunk/Toss/WebClient/msw.html 2011-06-13 07:21:40 UTC (rev 1481) @@ -20,6 +20,20 @@ <body> <div id="main"> +<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> <div id="game-disp"> <p id="game-info-par"> <span id="game-title"></span> @@ -51,7 +65,7 @@ <script type="text/javascript"> UNAME = "michal"; - CUR_PLAY_I = 2; + CUR_PLAY_I = 4; msw_plays("Tic-Tac-Toe"); var info = CONN.open_db(PLAYS[CUR_PLAY_I][2]); document.getElementById("game-disp").style.display = "block"; Modified: trunk/Toss/WebClient/msw.js =================================================================== --- trunk/Toss/WebClient/msw.js 2011-06-13 05:51:18 UTC (rev 1480) +++ trunk/Toss/WebClient/msw.js 2011-06-13 07:21:40 UTC (rev 1481) @@ -19,3 +19,153 @@ var lst = CONN.list_plays (game, UNAME); msw_list_plays_string (game, lst); } + +function msw_make_move_continue (info) { + document.getElementById("working").style.display = "none"; + full_redraw (GAME_NAME, info); + //var old_li = document.getElementById ("plays-list-" + GAME_NAME + + // "-elem-" + CUR_PLAY_I); + //var li = new_play_item (GAME_NAME, CUR_PLAY_I); + //old_li.parentNode.replaceChild (li, old_li); + if (ST.players.length==1 && PLAYS[CUR_PLAY_I][ST.players[0]]=="computer") { + var mv_time = document.getElementById("speed").value; + suggest_move_async (mv_time, msw_make_move); + } +} + +function msw_state_draw_model (game) { + var draw_background = function (game) { + var x = SVG_MARGINX; + var y = SVG_MARGINY; + var w = SVG_WIDTH + 2 * x; + var h = SVG_HEIGHT + 2 * x; + var bg = SHAPES.background_svg (game, 0, 0, w, h, []); + if (bg != undefined) {document.getElementById("svg").appendChild(bg);} + } + + // Draw the element [elem]. + var draw_elem = function (game, elem) { + if (game != "Connect4") { + var r = SHAPES.rect ( + elem.x, elem.y, 2 * SHAPES.elem_size_x, 2 * SHAPES.elem_size_y, + [["id", "elem_" + elem.id], ["class", elem_class(elem.id)], + ["onclick", ("msw_handle_elem_click('" + elem.id + "')")]]); + document.getElementById("svg").appendChild(r); + } else { + var circ = SHAPES.circle ( + elem.x, elem.y, 30, + [["id", "elem_" + elem.id], ["class", elem_class(elem.id)], + ["onclick", "msw_handle_elem_click('" + elem.id + "')"]]); + document.getElementById("svg").appendChild(circ); + } + } + + + // Draw relation [rel_name] between elements [args]. + function draw_rel (game, rel) { + if (rel.args.length == 1) { + var ihatrs = [["id", "pred_" + rel.args[0].id + "_" + rel.name], + ["onclick","msw_handle_elem_click('"+rel.args[0].id+"')"]] + var pos = [rel.args[0].x, rel.args[0].y]; + var f = SHAPES.rel_svg (game, pos[0],pos[1],20,20, rel.name,ihatrs); + if (f != undefined) { + document.getElementById("svg").appendChild(f); + } else { + var circ = SHAPES.circle ( + pos[0], pos[1], SHAPES.elem_size_x - 10, + [["id", "pred_" + rel.args[0].id + "_" + rel.name], + ["class", "model-pred-" + rel.name], + ["stroke-width", (SHAPES.elem_size_x / 10) + 2], + ["onclick", ("msw_handle_elem_click('"+rel.args[0].id+"')")]]); + document.getElementById("svg").appendChild(circ); + } + } + if (rel.args.length == 2) { + if (rel.name == "E") { + var l = SHAPES.line (rel.args[0].x, rel.args[0].y, + rel.args[1].x, rel.args[1].y, + [["class", "model-edge-E"]]); + document.getElementById("svg").appendChild(l); + } + } + } + + // Main draw_model function. + var sqrt = Math.round (Math.sqrt (this.elems.length)); + if (sqrt * sqrt == this.elems.length) { // perhaps a grid + SHAPES.elem_size_x = SVG_WIDTH / (2.0 * (sqrt-1)); + SHAPES.elem_size_y = SVG_HEIGHT / (2.0 * (sqrt-1)); + } else { + SHAPES.elem_size_x = SVG_WIDTH / 20; + SHAPES.elem_size_y = SVG_HEIGHT / 20; + } + draw_background (game); + for (var i = 0; i < this.elems.length; i++) { + draw_elem (game, this.elems[i]); + } + for (var i = 0; i < this.rels.length; i++) { + draw_rel (game, this.rels[i]); + } +} +State.prototype.draw_model = msw_state_draw_model; + +function msw_handle_elem_click (elem) { + if (ASYNC_ALL_REQ_PENDING != 0) { return; } + var moves = ST.get_moves (elem, LAST_CLICKED_ELEM); + if (moves.length == 0) { + LAST_CLICKED_ELEM = ""; + moves = ST.get_moves (elem, LAST_CLICKED_ELEM); + }; + if (moves.length == 0) { // still no moves, unhighlight + for (var i = 0; i < CUR_ELEMS.length; i++) { + ST.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) { msw_make_move (); }; + } else if (LAST_CLICKED_ELEM != "" && LAST_CLICKED_ELEM != elem //move fast + && moves.length == 2 && moves[0].length > moves[1].length) { + show_move (moves[1]); + ELEM_COUNTERS[elem] = 2; + if (SIMPLE_MOVES) { msw_make_move (); }; + } else if (LAST_CLICKED_ELEM != "" && LAST_CLICKED_ELEM != elem //move fast + && moves.length == 2 && moves[1].length > moves[0].length) { + show_move (moves[0]); + ELEM_COUNTERS[elem] = 1; + if (SIMPLE_MOVES) { msw_make_move (); }; + } else if (moves.length > ELEM_COUNTERS[elem]) { + show_move (moves[ELEM_COUNTERS[elem]]); + ELEM_COUNTERS[elem] += 1; + } else if (moves.length > 0) { + show_move (moves[0]); + ELEM_COUNTERS[elem] = 1; + }; + if (moves.length > 1 && LAST_CLICKED_ELEM == "") { + for (var i = 0; i < CUR_ELEMS.length; i++) { + ST.unhighlight_elem (CUR_ELEMS[i]); + } + document.getElementById('cur-move').innerHTML = elem + " — ?" + ST.highlight_elem (elem); + CUR_ELEMS = [elem]; + CUR_MOVE = ""; + }; + LAST_CLICKED_ELEM = elem; +} + +function msw_make_move () { + if (ASYNC_ALL_REQ_PENDING != 0) { alert ("async"); return; } + if (CUR_MOVE == "") return; + var m = parseInt(CUR_MOVE.substring (0, 1)) - 1; + if (!isNaN(m) && PLAYS[CUR_PLAY_I][m] != UNAME && PLAYS[CUR_PLAY_I][m] != "computer") { + alert ("It is your Opponent's move"); + return; + } + if (! SIMPLE_MOVES) { + document.getElementById("working").style.display = "block"; + } + CONN.make_move (CUR_MOVE, play_py_id (CUR_PLAY_I), msw_make_move_continue); +} This was sent by the SourceForge.net collaborative development platform, the world's largest Open Source development site. |
From: <ch...@us...> - 2011-06-13 05:51:29
|
Revision: 1480 http://toss.svn.sourceforge.net/toss/?rev=1480&view=rev Author: chalmi Date: 2011-06-13 05:51:18 +0000 (Mon, 13 Jun 2011) Log Message: ----------- Msw's sandbox Added Paths: ----------- trunk/Toss/WebClient/msw.html trunk/Toss/WebClient/msw.js Added: trunk/Toss/WebClient/msw.html =================================================================== --- trunk/Toss/WebClient/msw.html (rev 0) +++ trunk/Toss/WebClient/msw.html 2011-06-13 05:51:18 UTC (rev 1480) @@ -0,0 +1,62 @@ +<!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</title> + <meta name="Description" + content="Play the best strategic games online with a nice interface." /> + <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="crypto-sha256.js"> </script> + <script type="text/javascript" src="Connect.js"> </script> + <script type="text/javascript" src="State.js"> </script> + <script type="text/javascript" src="Main.js"> </script> + <script type="text/javascript" src="Login.js"> </script> + <script type="text/javascript" src="msw.js"></script> +</head> + +<body> + +<div id="main"> +<div id="game-disp"> + <p id="game-info-par"> + <span id="game-title"></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"> + <button id="movebt" class="bt" onclick="make_move ()">Make move:</button> + <span id="cur-move">none</span> + <button id="sugbt" class="bt" onclick="suggest_move_click()"> + Suggest + </button> + </p> + <div id="board"><div id="working">Working...</div></div> +</div> +</div> + +<script type="text/javascript"> + UNAME = "michal"; + CUR_PLAY_I = 2; + msw_plays("Tic-Tac-Toe"); + var info = CONN.open_db(PLAYS[CUR_PLAY_I][2]); + document.getElementById("game-disp").style.display = "block"; + full_redraw("Tic-Tac-Toe", info); + //document.write(info); +</script> +</body> +</html> Added: trunk/Toss/WebClient/msw.js =================================================================== --- trunk/Toss/WebClient/msw.js (rev 0) +++ trunk/Toss/WebClient/msw.js 2011-06-13 05:51:18 UTC (rev 1480) @@ -0,0 +1,21 @@ +function msw_list_plays_string (game, lst) { + PLAYS = convert_python_list ('#', lst); + //var plist = document.getElementById("plays-list-" + game); + //while (plist.childNodes.length > 0) { plist.removeChild(plist.firstChild); } + var d = game.length + 2; + for (var i = 0; i < PLAYS.length; i++) { + var p = PLAYS[i].substring(PLAYS[i].lastIndexOf('/') + d); + PLAYS[i] = convert_python_list ('_', p); + //plist.appendChild(new_play_item (game, i)); + } + /*if (PLAYS.length == 0) { + document.getElementById("plays-list-" + game).style.display = "none"; + } else { + document.getElementById("plays-list-" + game).style.display = "block"; + }*/ +} + +function msw_plays (game) { + var lst = CONN.list_plays (game, UNAME); + msw_list_plays_string (game, lst); +} This was sent by the SourceForge.net collaborative development platform, the world's largest Open Source development site. |
From: <luk...@us...> - 2011-06-16 17:34:18
|
Revision: 1485 http://toss.svn.sourceforge.net/toss/?rev=1485&view=rev Author: lukaszkaiser Date: 2011-06-16 17:34:11 +0000 (Thu, 16 Jun 2011) Log Message: ----------- Separating plays as a class in WebClient. Modified Paths: -------------- trunk/Toss/WebClient/Main.js trunk/Toss/WebClient/State.js trunk/Toss/WebClient/index.html trunk/Toss/WebClient/profile.html Added Paths: ----------- trunk/Toss/WebClient/Play.js Modified: trunk/Toss/WebClient/Main.js =================================================================== --- trunk/Toss/WebClient/Main.js 2011-06-16 07:21:00 UTC (rev 1484) +++ trunk/Toss/WebClient/Main.js 2011-06-16 17:34:11 UTC (rev 1485) @@ -1,12 +1,7 @@ -// JavaScript Toss Module -- Main (requires Connect.js, DefaultStyle.js) +// JavaScript Toss Module -- Main (requires Connect.js, State.js, Play.js) var UNAME = ""; var GAME_NAME = ""; // name of current game, e.g. "Breakthrough" - -var ELEM_COUNTERS = {}; -var CUR_MOVE = ""; -var CUR_ELEMS = []; - var PLAYS = []; var CUR_PLAY_I = -1; @@ -17,160 +12,57 @@ var FULL_OPNT_LEN = 0; var CUR_OPNT_START = 0; -var LAST_CLICKED_ELEM = ""; - -var SIMPLE_MOVES = true; var SIMPLE_SET = false; -var ST = undefined; -// Clear whole svg box. -function clear_svg () { - LAST_CLICKED_ELEM = ""; - ELEM_COUNTERS = {}; - CUR_MOVE = ""; - CUR_ELEMS = []; - document.getElementById('cur-move').innerHTML = "none"; - var svg_e = document.getElementById("svg"); - if (svg_e != undefined) { svg_e.parentNode.removeChild (svg_e); } +function disp_name (uname) { + if (uname == "guest") { return ("You"); } + if (UNAME_TO_NAME_MAP[uname]) { return (UNAME_TO_NAME_MAP[uname]); } + name = CONN.get_name (uname); + UNAME_TO_NAME_MAP[uname] = name; + return (name); } -function win_s (i) { - var pl = PLAYS[CUR_PLAY_I][i]; - if (pl == UNAME) { return ("You Win!"); } - return (disp_name(pl) + " Wins"); +function handle_elem_click (elem) { + PLAYS[CUR_PLAY_I].handle_click (elem); } -// Substitute players for 0 and 1 in a payoff string. -function subst_pl (str) { - var s = strip (' ', '\n', str); - 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,"); - var s4 = s3.replace (/0.,/g, "0,"); - var s5 = s4.replace (/1.$/g, "1"); - return (s5.replace (/0.$/g, "0")); +function make_move () { + PLAYS[CUR_PLAY_I].move (); } -// Full redraw. -function full_redraw (game, info_s) { - clear_svg (); - ST = new State (game, info_s); - ST.draw_model (game); - if (! SIMPLE_MOVES) { - document.getElementById("working").style.display = "block"; - } - for (var i = 0; i < ST.elems.length; i++) { - ELEM_COUNTERS[ST.elems[i].id] = 0; - } - if (ST.payoff == "") { - document.getElementById('movebt').innerHTML = "Make move:"; - document.getElementById('cur-move').innerHTML = "none"; - } else { - if (SIMPLE_MOVES) { - document.getElementById("board").style.paddingTop = "0em"; - } - document.getElementById("move-info-par").style.display = "none"; - document.getElementById("game-info-par").style.paddingBottom = "0em"; - document.getElementById('payoffs').innerHTML = - "Result: " + subst_pl(ST.payoff); - document.getElementById('payoffs').style.display = "inline"; - document.getElementById('new-play-par').style.display = "block"; - } - document.getElementById("working").style.display = "none"; +function make_move_continue (info) { + var listing_f = function (play) { + var old_li = document.getElementById ("plays-list-" + play.game + + "-elem-" + CUR_PLAY_I); + var li = new_play_item (play.game, CUR_PLAY_I); + old_li.parentNode.replaceChild (li, old_li); + }; + var suggest_f = function (time) { suggest_move_async (time, make_move) }; + PLAYS[CUR_PLAY_I].move_continue (info, listing_f, suggest_f, disp_name); } -// Helper function: highlight move, unhighlight old, save current. -function show_move (m) { - for (var i = 0; i < CUR_ELEMS.length; i++) { - ST.unhighlight_elem (CUR_ELEMS[i]); - } - for (var i = 0; i < m.matched.length; i++) { - ST.highlight_elem (m.matched[i]); - } - if (m.matched_str == "") { - document.getElementById('cur-move').innerHTML = "none"; - } else { - document.getElementById('cur-move').innerHTML = - m.matched_str.replace (/,/g, " — ") + " (" + m.rule + ")" - } - CUR_ELEMS = m.matched; - CUR_MOVE = m.def_str; -} -// Handler for clicks on elements. -function handle_elem_click (elem) { - if (ASYNC_ALL_REQ_PENDING != 0) { return; } - var moves = ST.get_moves (elem, LAST_CLICKED_ELEM); - if (moves.length == 0) { - LAST_CLICKED_ELEM = ""; - moves = ST.get_moves (elem, LAST_CLICKED_ELEM); - }; - if (moves.length == 0) { // still no moves, unhighlight - for (var i = 0; i < CUR_ELEMS.length; i++) { - ST.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) { - 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) { - 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) { - show_move (moves[0]); - ELEM_COUNTERS[elem] = 1; - }; - if (moves.length > 1 && LAST_CLICKED_ELEM == "") { - for (var i = 0; i < CUR_ELEMS.length; i++) { - ST.unhighlight_elem (CUR_ELEMS[i]); - } - document.getElementById('cur-move').innerHTML = elem + " — ?" - ST.highlight_elem (elem); - CUR_ELEMS = [elem]; - CUR_MOVE = ""; - }; - LAST_CLICKED_ELEM = elem; +function play_from_string (game, s) { + var d = game.length + 2; + var p = s.substring(s.lastIndexOf('/') + d); + var lst = convert_python_list ('_', p); + return (new Play (game, [0, 1], [lst[0], lst[1]], + lst[2], lst[3], lst[4], UNAME)); } -function play_py_id (i) { - return (PLAYS[i][2]) -} -function disp_name (uname) { - if (uname == "guest") { return ("You"); } - if (UNAME_TO_NAME_MAP[uname]) { return (UNAME_TO_NAME_MAP[uname]); } - name = CONN.get_name (uname); - UNAME_TO_NAME_MAP[uname] = name; - return (name); -} +// Play lists on display. function new_play_item (game, i) { var li = document.createElement('li'); li.setAttribute ("class", "plays-list-elem"); li.setAttribute ("id", "plays-list-" + game + "-elem-" + i); - var p = PLAYS[i][2]; - var pname = disp_name(PLAYS[i][0]) +" vs " + disp_name(PLAYS[i][1]) + - " (game " + PLAYS[i][2] + ')'; - var bs = '<button class="obt" title="Open game ' + PLAYS[i][2] + - '" onclick="'+ "play_click('" + game + "', " + p + ", " + i + ')">' + - pname + '</button> '; + var pname = disp_name(PLAYS[i].players[0]) +" vs " + + disp_name(PLAYS[i].players[1]) + " (game " + PLAYS[i].pid + ')'; + var bs = '<button class="obt" title="Open game ' + PLAYS[i].pid + + '" onclick="'+ "play_click('" + game + "', " + PLAYS[i].pid + ", " + + i + ')">' + pname + '</button> '; li.innerHTML = bs // +'<a href="#" onclick="'+ "del_play('"+ fn + "')" + '">Delete</a>'; return (li); @@ -180,10 +72,8 @@ PLAYS = convert_python_list ('#', lst); var plist = document.getElementById("plays-list-" + game); while (plist.childNodes.length > 0) { plist.removeChild(plist.firstChild); } - var d = game.length + 2; for (var i = 0; i < PLAYS.length; i++) { - var p = PLAYS[i].substring(PLAYS[i].lastIndexOf('/') + d); - PLAYS[i] = convert_python_list ('_', p); + PLAYS[i] = play_from_string (game, PLAYS[i]); plist.appendChild(new_play_item (game, i)); } if (PLAYS.length == 0) { @@ -212,45 +102,12 @@ document.getElementById ("game-title").innerHTML = game; document.getElementById("game-disp").style.display = "block"; document.getElementById("play-number").innerHTML = "" + play_id; - CUR_PLAY_I = pi; - if (game == "Connect4") { VIEW_MIRROR = 0; } else { - VIEW_MIRROR = (PLAYS[CUR_PLAY_I][0] == UNAME) ? 0 : 1; - } - var info = CONN.open_db (play_py_id (pi)); document.getElementById("suggestions-toggle").style.display = "inline"; - full_redraw (GAME_NAME, info); + CUR_PLAY_I = pi; + PLAYS[CUR_PLAY_I].redraw (disp_name); } -// Apply current move. -function make_move () { - if (ASYNC_ALL_REQ_PENDING != 0) { alert ("async"); return; } - if (CUR_MOVE == "") return; - var m = parseInt(CUR_MOVE.substring (0, 1)) - 1; - if (!isNaN(m) && PLAYS[CUR_PLAY_I][m] != UNAME && PLAYS[CUR_PLAY_I][m] != "computer" && PLAYS[CUR_PLAY_I][m] != UNAME.replace("_", "-")) { - alert ("It is your Opponent's move"); - return; - } - if (! SIMPLE_MOVES) { - document.getElementById("working").style.display = "block"; - } - CONN.make_move (CUR_MOVE, play_py_id (CUR_PLAY_I), make_move_continue); -} - -function make_move_continue (info) { - document.getElementById("working").style.display = "none"; - full_redraw (GAME_NAME, info); - var old_li = document.getElementById ("plays-list-" + GAME_NAME + - "-elem-" + CUR_PLAY_I); - var li = new_play_item (GAME_NAME, CUR_PLAY_I); - old_li.parentNode.replaceChild (li, old_li); - if (ST.players.length==1 && PLAYS[CUR_PLAY_I][ST.players[0]]=="computer") { - var mv_time = document.getElementById("speed").value; - suggest_move_async (mv_time, make_move); - } -} - - function del_play (play) { alert ("Deleting " + play); } @@ -260,7 +117,7 @@ li.setAttribute ("class", "opponents-list-elem"); li.setAttribute ("id", "opponent-" + uid); // + "-" + index li.innerHTML = - '<button class="dbt" onclick="new_play_do('+ "'" + uid + "', 0"+ ')">'+ + '<button class="dbt" onclick="new_play_do(' + "'" + uid + "'" + ')">'+ disp_name(uid) + ' (' + uid + ') </button>'; return (li); } @@ -282,7 +139,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, 0)">' + + zeroli.innerHTML = '<button class="dbt" onclick="new_play_do(-1)">' + 'Play against Yourself</button>'; o.appendChild (zeroli); for (var i = 0; i < FRIENDS.length; i++) { @@ -333,13 +190,6 @@ } } -function svg_string () { - var svg_el = document.getElementById ("svg"); - var svg_s = (new XMLSerializer()).serializeToString(svg_el); - svg_s = svg_s.replace(/onclick="[^\"]*"/g, ""); - return ("'''" + svg_s + "'''"); -} - function show_chess_warning () { document.getElementById("chess-level-warning").style.display = "block"; } @@ -371,10 +221,10 @@ show_chess_warning (); setTimeout("hide_chess_warning ()", 3000); } - new_play_do ("computer", 0); + new_play_do ("computer"); } -function new_play_do (opp_uid, vm) { +function new_play_do (opp_uid) { list_plays (GAME_NAME); document.getElementById("welcome").style.display = "none"; document.getElementById("game-disp").style.display = "none"; @@ -397,12 +247,12 @@ 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 = vm; document.getElementById("game-disp").style.display = "block"; document.getElementById("plays").style.left = "30em"; - var p = [UNAME, opp_uid, FREE_PLAY_NO]; + var p = new Play (GAME_NAME, [0,1], [UNAME, opp_uid], FREE_PLAY_NO, 0, + info_nbr.substring(info_idx+1), UNAME); PLAYS.push(p); - full_redraw (GAME_NAME, info_nbr.substring(info_idx+1)); + p.redraw (disp_name); li = new_play_item (GAME_NAME, CUR_PLAY_I); document.getElementById("plays-list-" + GAME_NAME).appendChild(li); } @@ -421,19 +271,24 @@ }; toggle_suggestions (); toggle_suggestions (); - clear_svg (); + PLAYS[CUR_PLAY_I].clear (); + document.getElementById('cur-move').innerHTML = "none"; 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); + var opp = PLAYS[CUR_PLAY_I].players[1]; + if (PLAYS[CUR_PLAY_I].players[0] != UNAME) { + opp = PLAYS[CUR_PLAY_I].players[0]; + } + new_play_do (opp); } else { - var opp = PLAYS[CUR_PLAY_I][1]; - if (PLAYS[CUR_PLAY_I][0] != UNAME) { opp = PLAYS[CUR_PLAY_I][0]; } + var opp = PLAYS[CUR_PLAY_I].players[1]; + if (PLAYS[CUR_PLAY_I].players[0] != UNAME) { + opp = PLAYS[CUR_PLAY_I].players[0]; + } var me = UNAME; UNAME = opp; - var vm = (GAME_NAME == "Connect4") ? 0 : 1; - new_play_do (me, vm); + new_play_do (me); UNAME = me; + PLAYS[CUR_PLAY_I].cur_player_uid = UNAME; if (opp == "computer") { var mv_time = document.getElementById("speed").value; suggest_move_async (mv_time, make_move); @@ -461,9 +316,10 @@ var fm = function (m) { document.getElementById("working").style.display = "none"; document.getElementById("working").innerHTML = "Working..."; - if (m != "") { show_move (new Move (m)); f() } + if (m != "") { PLAYS[CUR_PLAY_I].show_move (new Move (m)); f() } }; - CONN.suggest (ST.players[0]+1, time, play_py_id (CUR_PLAY_I), fm); + CONN.suggest (PLAYS[CUR_PLAY_I].cur_state.players[0]+1, time, + PLAYS[CUR_PLAY_I].pid, fm); } function suggest_move_click () { Added: trunk/Toss/WebClient/Play.js =================================================================== --- trunk/Toss/WebClient/Play.js (rev 0) +++ trunk/Toss/WebClient/Play.js 2011-06-16 17:34:11 UTC (rev 1485) @@ -0,0 +1,197 @@ +// JavaScript Toss Module -- Play (requires Connect.js, State.js) + +var SIMPLE_MOVES = true; + + +// --------- Play Object with Methods -------------- + +// Create a new play, set player names, pid, move and state. +function Play (game, game_players, player_names, pid, move, state_str, uid) { + this.cur_player_uid = uid; + this.game = game; + this.players = {}; + for (var i = 0; i < game_players.length; i++) { + this.players[game_players[i]] = player_names[i]; + } + this.pid = pid; + this.move_nbr = move; + var mirror = 0; + if (game == "Connect4") { mirror = 0; } else { + mirror = (player_names[0] == this.cur_player_uid) ? 0 : 1; + } + this.cur_state = new State (game, state_str, mirror); + + this.ELEM_COUNTERS = {}; + this.CUR_MOVE = ""; + this.CUR_ELEMS = []; + this.LAST_CLICKED_ELEM = ""; + + return (this); +} + +function play_new_state (state_str) { + this.cur_state = new State (this.game, state_str, this.cur_state.mirror); + this.move_nbr = this.move_nbr + 1; +} +Play.prototype.new_state = play_new_state; + +function play_clear () { + this.LAST_CLICKED_ELEM = ""; + this.ELEM_COUNTERS = {}; + this.CUR_MOVE = ""; + this.CUR_ELEMS = []; +} +Play.prototype.clear = play_clear; + +// Full redraw. +function play_redraw (f_disp_name) { + this.clear (); + document.getElementById('cur-move').innerHTML = "none"; + this.cur_state.draw_model (this.game); + + // Functions to substitute players for 0 and 1 in a payoff string. + var win_s = function (pl, un) { + if (pl == un) { return ("You Win!"); } + return (f_disp_name(pl) + " Wins"); + } + var subst_pl = function (pl, str) { + var un = pl.cur_player_uid; + var s = strip (' ', '\n', str); + if (s == "0: 1., 1: -1.") { return (win_s (pl.players[0], un)); } + if (s == "0: -1., 1: 1.") { return (win_s (pl.players[1], un)); } + if (s == "0: 0., 1: 0.") { return ("Tie"); } + var s1 = s.replace (/0:/g, f_disp_name(pl.players[0]) + ":"); + var s2 = s1.replace (/1:/g, f_disp_name(pl.players[1]) + ":"); + var s3 = s2.replace (/1.,/g, "1,"); + var s4 = s3.replace (/0.,/g, "0,"); + var s5 = s4.replace (/1.$/g, "1"); + return (s5.replace (/0.$/g, "0")); + } + + if (! SIMPLE_MOVES) { + document.getElementById("working").style.display = "block"; + } + for (var i = 0; i < this.cur_state.elems.length; i++) { + this.ELEM_COUNTERS[this.cur_state.elems[i].id] = 0; + } + if (this.cur_state.payoff == "") { + document.getElementById('movebt').innerHTML = "Make move:"; + document.getElementById('cur-move').innerHTML = "none"; + } else { + if (SIMPLE_MOVES) { + document.getElementById("board").style.paddingTop = "0em"; + } + document.getElementById("move-info-par").style.display = "none"; + document.getElementById("game-info-par").style.paddingBottom = "0em"; + document.getElementById('payoffs').innerHTML = + "Result: " + subst_pl(this, this.cur_state.payoff); + document.getElementById('payoffs').style.display = "inline"; + document.getElementById('new-play-par').style.display = "block"; + } + document.getElementById("working").style.display = "none"; +} +Play.prototype.redraw = play_redraw; + + +// Helper function: highlight move, unhighlight old, save current. +function play_show_move (m) { + for (var i = 0; i < this.CUR_ELEMS.length; i++) { + this.cur_state.unhighlight_elem (this.CUR_ELEMS[i]); + } + for (var i = 0; i < m.matched.length; i++) { + this.cur_state.highlight_elem (m.matched[i]); + } + if (m.matched_str == "") { + document.getElementById('cur-move').innerHTML = "none"; + } else { + document.getElementById('cur-move').innerHTML = + m.matched_str.replace (/,/g, " — ") + " (" + m.rule + ")" + } + this.CUR_ELEMS = m.matched; + this.CUR_MOVE = m.def_str; +} +Play.prototype.show_move = play_show_move; + + +// Handler for clicks on elements in a play. +function play_handle_click (elem) { + if (ASYNC_ALL_REQ_PENDING != 0) { return; } + var moves = this.cur_state.get_moves (elem, this.LAST_CLICKED_ELEM); + if (moves.length == 0) { + this.LAST_CLICKED_ELEM = ""; + moves = this.cur_state.get_moves (elem, this.LAST_CLICKED_ELEM); + }; + if (moves.length == 0) { // still no moves, unhighlight + for (var i = 0; i < this.CUR_ELEMS.length; i++) { + this.cur_state.unhighlight_elem (this.CUR_ELEMS[i]); + } + this.CUR_ELEMS = []; + this.CUR_MOVE = ""; + this.LAST_CLICKED_ELEM = ""; + } else if (moves.length == 1) { + this.show_move (moves[0]); + this.ELEM_COUNTERS[elem] = 1; + if (SIMPLE_MOVES) { this.move (); }; + } else if (this.LAST_CLICKED_ELEM != "" && this.LAST_CLICKED_ELEM != elem + && moves.length == 2 && moves[0].length > moves[1].length) { + //move fast + this.show_move (moves[1]); + this.ELEM_COUNTERS[elem] = 2; + if (SIMPLE_MOVES) { this.move (); }; + } else if (this.LAST_CLICKED_ELEM != "" && this.LAST_CLICKED_ELEM != elem + && moves.length == 2 && moves[1].length > moves[0].length) { + //move fast + this.show_move (moves[0]); + this.ELEM_COUNTERS[elem] = 1; + if (SIMPLE_MOVES) { this.move (); }; + } else if (moves.length > this.ELEM_COUNTERS[elem]) { + this.show_move (moves[this.ELEM_COUNTERS[elem]]); + this.ELEM_COUNTERS[elem] += 1; + } else if (moves.length > 0) { + this.show_move (moves[0]); + this.ELEM_COUNTERS[elem] = 1; + }; + if (moves.length > 1 && this.LAST_CLICKED_ELEM == "") { + for (var i = 0; i < this.CUR_ELEMS.length; i++) { + this.cur_state.unhighlight_elem (this.CUR_ELEMS[i]); + } + document.getElementById('cur-move').innerHTML = elem + " — ?" + this.cur_state.highlight_elem (elem); + this.CUR_ELEMS = [elem]; + this.CUR_MOVE = ""; + }; + this.LAST_CLICKED_ELEM = elem; +} +Play.prototype.handle_click = play_handle_click; + + +// Apply the current move in a play. +function play_move () { + if (ASYNC_ALL_REQ_PENDING != 0) { alert ("async"); return; } + if (this.CUR_MOVE == "") return; + var m = parseInt(this.CUR_MOVE.substring (0, 1)) - 1; + if (!isNaN(m) && this.players[m] != this.cur_player_uid && + this.players[m] != "computer" && + this.players[m] != this.cur_player_uid.replace("_", "-")) { + alert ("It is your Opponent's move"); + return; + } + if (! SIMPLE_MOVES) { + document.getElementById("working").style.display = "block"; + } + CONN.make_move (this.CUR_MOVE, this.pid, make_move_continue); +} +Play.prototype.move = play_move; + +function play_move_continue (info, listing_redraw_f, suggest_f, name_f) { + document.getElementById("working").style.display = "none"; + this.new_state (info); + this.redraw (name_f); + listing_redraw_f (this); + if (this.cur_state.players.length == 1 && + this.players[this.cur_state.players[0]] == "computer") { + var mv_time = document.getElementById("speed").value; + suggest_f (mv_time); + } +} +Play.prototype.move_continue = play_move_continue; Modified: trunk/Toss/WebClient/State.js =================================================================== --- trunk/Toss/WebClient/State.js 2011-06-16 07:21:00 UTC (rev 1484) +++ trunk/Toss/WebClient/State.js 2011-06-16 17:34:11 UTC (rev 1485) @@ -4,7 +4,6 @@ var SVG_HEIGHT = 500; var SVG_MARGINX = 50; var SVG_MARGINY = 50; -var VIEW_MIRROR = 0; // ------ Move Object ----- @@ -57,19 +56,22 @@ // Object representing a state of the system (game). -function State (game, info_string) { +function State (game, info_string, mirror) { // We create an SVG box with margins depending on the game. this.game = game; + this.mirror = mirror; var create_svg_box = function (margx, margy, parent_id) { + var svg_e = document.getElementById("svg"); + if (svg_e != null) { svg_e.parentNode.removeChild (svg_e); } + var svg = document.createElementNS('http://www.w3.org/2000/svg','svg'); + svg.setAttribute('id', 'svg'); + document.getElementById(parent_id).appendChild(svg); SVG_MARGINX = margx; 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 + 20; var wy = SVG_HEIGHT + 2*SVG_MARGINY + 20; svg.setAttribute('viewBox', '-10 -10 ' + wx + " " + wy); - document.getElementById(parent_id).appendChild(svg); } if (game == "Tic-Tac-Toe" || game == "Concurrent-Tic-Tac-Toe") { @@ -79,9 +81,9 @@ } // Private: Translate position from Model coordinates to SVG coordinates. - var translate_pos = function (pos, minx, miny, width, height) { + var translate_pos = function (pos, minx, miny, width, height, mirror_a) { var x = ((pos[0] - minx) * SVG_WIDTH) / width; - if (VIEW_MIRROR == 0) { + if (mirror_a == 0) { var y = ((pos[1] - miny) * SVG_HEIGHT) / height; } else { var y = ((height - (pos[1] - miny))*SVG_WIDTH) / height; @@ -109,7 +111,8 @@ for (var i = 0; i < l.length; i++) { var e = convert_python_list (';', l[i]); var pos = translate_pos ([parseFloat(e[1]), parseFloat(e[2])], - this.minx, this.miny, this.width, this.height); + this.minx, this.miny, + this.width, this.height, this.mirror); this.elems.push (new Elem (e[0], pos[0], pos[1])); } @@ -132,7 +135,8 @@ args[j] = find_elem (args[j], this.elems); if (args[j] == undefined) { is_undefined = true }; } - if (rel_name[0] != "_" && args_s != "''" && is_undefined == false) { + if (rel_name[0] != "_" && rel_name[0] != "-" && + args_s != "''" && is_undefined == false) { rels.push (new Rel (rel_name, args)); } } Modified: trunk/Toss/WebClient/index.html =================================================================== --- trunk/Toss/WebClient/index.html 2011-06-16 07:21:00 UTC (rev 1484) +++ trunk/Toss/WebClient/index.html 2011-06-16 17:34:11 UTC (rev 1485) @@ -12,6 +12,7 @@ <script type="text/javascript" src="crypto-sha256.js"> </script> <script type="text/javascript" src="Connect.js"> </script> <script type="text/javascript" src="State.js"> </script> + <script type="text/javascript" src="Play.js"> </script> <script type="text/javascript" src="Main.js"> </script> <script type="text/javascript" src="Login.js"> </script> </head> Modified: trunk/Toss/WebClient/profile.html =================================================================== --- trunk/Toss/WebClient/profile.html 2011-06-16 07:21:00 UTC (rev 1484) +++ trunk/Toss/WebClient/profile.html 2011-06-16 17:34:11 UTC (rev 1485) @@ -10,6 +10,7 @@ <script type="text/javascript" src="crypto-sha256.js"> </script> <script type="text/javascript" src="Connect.js"> </script> <script type="text/javascript" src="State.js"> </script> + <script type="text/javascript" src="Play.js"> </script> <script type="text/javascript" src="Main.js"> </script> <script type="text/javascript" src="Login.js"> </script> </head> This was sent by the SourceForge.net collaborative development platform, the world's largest Open Source development site. |
From: <ch...@us...> - 2011-06-17 07:26:22
|
Revision: 1486 http://toss.svn.sourceforge.net/toss/?rev=1486&view=rev Author: chalmi Date: 2011-06-17 07:26:16 +0000 (Fri, 17 Jun 2011) Log Message: ----------- split plays into 2 lists: beta. Modified Paths: -------------- trunk/Toss/WebClient/Main.js trunk/Toss/WebClient/Play.js trunk/Toss/WebClient/Style.css trunk/Toss/WebClient/index.html Modified: trunk/Toss/WebClient/Main.js =================================================================== --- trunk/Toss/WebClient/Main.js 2011-06-16 17:34:11 UTC (rev 1485) +++ trunk/Toss/WebClient/Main.js 2011-06-17 07:26:16 UTC (rev 1486) @@ -32,12 +32,12 @@ } function make_move_continue (info) { - var listing_f = function (play) { + var listing_f = function (play) {/* var old_li = document.getElementById ("plays-list-" + play.game + "-elem-" + CUR_PLAY_I); var li = new_play_item (play.game, CUR_PLAY_I); old_li.parentNode.replaceChild (li, old_li); - }; + */}; var suggest_f = function (time) { suggest_move_async (time, make_move) }; PLAYS[CUR_PLAY_I].move_continue (info, listing_f, suggest_f, disp_name); } @@ -55,6 +55,25 @@ // Play lists on display. function new_play_item (game, i) { + + var win_s = function (pl, un) { + //if (pl == un) { return ("You Win!"); } + return (disp_name(pl) + " won"); + } + var subst_pl = function (pl, str) { + var un = pl.cur_player_uid; + var s = strip (' ', '\n', str); + if (s == "0: 1., 1: -1.") { return (win_s (pl.players[0], un)); } + if (s == "0: -1., 1: 1.") { return (win_s (pl.players[1], un)); } + if (s == "0: 0., 1: 0.") { return ("Tie"); } + var s1 = s.replace (/0:/g, disp_name(pl.players[0]) + ":"); + var s2 = s1.replace (/1:/g, disp_name(pl.players[1]) + ":"); + var s3 = s2.replace (/1.,/g, "1,"); + var s4 = s3.replace (/0.,/g, "0,"); + var s5 = s4.replace (/1.$/g, "1"); + return (s5.replace (/0.$/g, "0")); + } + var li = document.createElement('li'); li.setAttribute ("class", "plays-list-elem"); li.setAttribute ("id", "plays-list-" + game + "-elem-" + i); @@ -63,23 +82,31 @@ var bs = '<button class="obt" title="Open game ' + PLAYS[i].pid + '" onclick="'+ "play_click('" + game + "', " + PLAYS[i].pid + ", " + i + ')">' + pname + '</button> '; - li.innerHTML = bs + li.innerHTML = bs; + if (PLAYS[i].cur_state.payoff != "") li.innerHTML += '<span class="list_result">' + subst_pl(PLAYS[i], PLAYS[i].cur_state.payoff) + '</span>'; // +'<a href="#" onclick="'+ "del_play('"+ fn + "')" + '">Delete</a>'; return (li); } + function list_plays_string (game, lst) { PLAYS = convert_python_list ('#', lst); - var plist = document.getElementById("plays-list-" + game); - while (plist.childNodes.length > 0) { plist.removeChild(plist.firstChild); } + var a_plist = document.getElementById("a-plays-list-" + game); + var d_plist = document.getElementById("d-plays-list-" + game); + while (a_plist.childNodes.length > 0) { a_plist.removeChild(a_plist.firstChild); } + while (d_plist.childNodes.length > 0) { d_plist.removeChild(d_plist.firstChild); } for (var i = 0; i < PLAYS.length; i++) { PLAYS[i] = play_from_string (game, PLAYS[i]); - plist.appendChild(new_play_item (game, i)); + if (PLAYS[i].cur_state.payoff == "") a_plist.appendChild(new_play_item (game, i)); + else + { + d_plist.appendChild(new_play_item (game, i)); + } } if (PLAYS.length == 0) { - document.getElementById("plays-list-" + game).style.display = "none"; + document.getElementById("a-plays-list-" + game).style.display = "none"; } else { - document.getElementById("plays-list-" + game).style.display = "block"; + document.getElementById("a-plays-list-" + game).style.display = "block"; } } @@ -238,7 +265,7 @@ while (olist.childNodes.length > 0) { olist.removeChild(olist.firstChild); } if (opp_uid == -1) { opp_uid = UNAME; } if (opp_uid == 0 || UNAME == "") { return; } - document.getElementById("plays-list-" + GAME_NAME).style.display = "block"; + //document.getElementById("plays-list-" + GAME_NAME).style.display = "block"; document.getElementById("working").style.display = "block"; info_nbr = CONN.new_play (GAME_NAME, UNAME, opp_uid); document.getElementById("working").style.display = "none"; @@ -253,8 +280,8 @@ info_nbr.substring(info_idx+1), UNAME); PLAYS.push(p); p.redraw (disp_name); - li = new_play_item (GAME_NAME, CUR_PLAY_I); - document.getElementById("plays-list-" + GAME_NAME).appendChild(li); + //li = new_play_item (GAME_NAME, CUR_PLAY_I); + //document.getElementById("plays-list-" + GAME_NAME).appendChild(li); } function get_opponents () { Modified: trunk/Toss/WebClient/Play.js =================================================================== --- trunk/Toss/WebClient/Play.js 2011-06-16 17:34:11 UTC (rev 1485) +++ trunk/Toss/WebClient/Play.js 2011-06-17 07:26:16 UTC (rev 1486) @@ -68,6 +68,7 @@ return (s5.replace (/0.$/g, "0")); } + if (! SIMPLE_MOVES) { document.getElementById("working").style.display = "block"; } Modified: trunk/Toss/WebClient/Style.css =================================================================== --- trunk/Toss/WebClient/Style.css 2011-06-16 17:34:11 UTC (rev 1485) +++ trunk/Toss/WebClient/Style.css 2011-06-17 07:26:16 UTC (rev 1486) @@ -221,6 +221,11 @@ top: 2px; } +.list_result +{ + font-size: 0.9em +} + #remember { margin: 0px; padding: 0px; Modified: trunk/Toss/WebClient/index.html =================================================================== --- trunk/Toss/WebClient/index.html 2011-06-16 17:34:11 UTC (rev 1485) +++ trunk/Toss/WebClient/index.html 2011-06-17 07:26:16 UTC (rev 1486) @@ -197,69 +197,96 @@ <button onclick="new_play('Breakthrough')" class="boldobt">Breakthrough</button> </p> - <ul class="plays-list" id="plays-list-Breakthrough"> +<ul class="plays-list" id="a-plays-list-Breakthrough"> <li style="display: none;"/> </ul> + <ul class="plays-list" id="d-plays-list-Breakthrough"> + <li style="display: none;"/> + </ul> <p class="game-par"> <button onclick="new_play('Checkers')" class="boldobt">Checkers</button> </p> - <ul class="plays-list" id="plays-list-Checkers"> + <ul class="plays-list" id="a-plays-list-Checkers"> <li style="display: none;"/> </ul> + <ul class="plays-list" id="d-plays-list-Checkers"> + <li style="display: none;"/> + </ul> <p class="game-par"> <button onclick="new_play('Chess')" class="boldobt">Chess</button> </p> - <ul class="plays-list" id="plays-list-Chess"> + <ul class="plays-list" id="a-plays-list-Chess"> <li style="display: none;"/> </ul> + <ul class="plays-list" id="d-plays-list-Chess"> + <li style="display: none;"/> + </ul> <p class="game-par"> <button onclick="new_play('Connect4')" class="boldobt">Connect4</button> </p> - <ul class="plays-list" id="plays-list-Connect4"> + <ul class="plays-list" id="a-plays-list-Connect4"> <li style="display: none;"/> </ul> + <ul class="plays-list" id="d-plays-list-Connect4"> + <li style="display: none;"/> + </ul> <p class="game-par"> <button onclick="new_play('Entanglement')" class="boldobt">Entanglement</button> </p> - <ul class="plays-list" id="plays-list-Entanglement"> + <ul class="plays-list" id="a-plays-list-Entanglement"> <li style="display: none;"/> </ul> + <ul class="plays-list" id="d-plays-list-Entanglement"> + <li style="display: none;"/> + </ul> <p class="game-par"> <button onclick="new_play('Gomoku')" class="boldobt">Gomoku</button> </p> - <ul class="plays-list" id="plays-list-Gomoku"> + <ul class="plays-list" id="a-plays-list-Gomoku"> <li style="display: none;"/> </ul> + <ul class="plays-list" id="d-plays-list-Gomoku"> + <li style="display: none;"/> + </ul> <p class="game-par"> <button onclick="new_play('Pawn-Whopping')" class="boldobt">Pawn-Whopping</button> </p> - <ul class="plays-list" id="plays-list-Pawn-Whopping"> + <ul class="plays-list" id="a-plays-list-Pawn-Whopping"> <li style="display: none;"/> </ul> + <ul class="plays-list" id="d-plays-list-Pawn-Whopping"> + <li style="display: none;"/> + </ul> <p class="game-par"> <button onclick="new_play('Tic-Tac-Toe')" class="boldobt">Tic-Tac-Toe</button> </p> - <ul class="plays-list" id="plays-list-Tic-Tac-Toe"> + <ul class="plays-list" id="a-plays-list-Tic-Tac-Toe"> <li style="display: none;"/> </ul> - <p class="game-par" style="display: none;"> + <ul class="plays-list" id="d-plays-list-Tic-Tac-Toe"> + <li style="display: none;"/> + </ul> + <p class="game-par"> <button onclick="new_play('Concurrent-Tic-Tac-Toe')" class="boldobt">Concurrent-Tic-Tac-Toe</button> </p> - <ul class="plays-list" style="display: none;" - id="plays-list-Concurrent-Tic-Tac-Toe"> + <ul class="plays-list" id="a-plays-list-Concurrent-Tic-Tac-Toe"> <li style="display: none;"/> </ul> + <ul class="plays-list" id="d-plays-list-Concurrent-Tic-Tac-Toe"> + <li style="display: none;"/> + </ul> </div> + <div id="game-disp"> <p id="game-info-par"> <span id="game-title"></span> This was sent by the SourceForge.net collaborative development platform, the world's largest Open Source development site. |