[Toss-devel-svn] SF.net SVN: toss:[1465] trunk/Toss
Status: Beta
Brought to you by:
lukaszkaiser
Menu
▾
▴
[Toss-devel-svn] SF.net SVN: toss:[1465] trunk/Toss
|
From: <luk...@us...> - 2011-05-30 01:25:24
|
Revision: 1465
http://toss.svn.sourceforge.net/toss/?rev=1465&view=rev
Author: lukaszkaiser
Date: 2011-05-30 01:25:16 +0000 (Mon, 30 May 2011)
Log Message:
-----------
More JavaScript cleanups.
Modified Paths:
--------------
trunk/Toss/Server/ReqHandler.ml
trunk/Toss/WebClient/Connect.js
trunk/Toss/WebClient/Drawing.js
trunk/Toss/WebClient/Main.js
trunk/Toss/WebClient/Style.css
trunk/Toss/WebClient/index.html
trunk/Toss/WebClient/profile.html
Removed Paths:
-------------
trunk/Toss/WebClient/State.js
Modified: trunk/Toss/Server/ReqHandler.ml
===================================================================
--- trunk/Toss/Server/ReqHandler.ml 2011-05-29 17:55:27 UTC (rev 1464)
+++ trunk/Toss/Server/ReqHandler.ml 2011-05-30 01:25:16 UTC (rev 1465)
@@ -446,7 +446,7 @@
let or_s = "(player1='" ^ pl_id ^ "' or player2='" ^ pl_id ^ "')" in
let plays = dbtable ("game='" ^ game ^ "' and " ^ or_s) "cur_states" in
let play_name p = (* p = (pid, g, p1, p2, move, _, _, _, _) *)
- "/plays/"^ p.(1) ^"_"^ p.(2) ^"_"^ p.(3) ^"_"^ p.(0) ^"_"^ p.(4) in
+ "/" ^ p.(1) ^ "_" ^ p.(2) ^ "_" ^ p.(3) ^ "_" ^ p.(0) ^ "_" ^ p.(4) in
lstr (List.map play_name plays) in
let user_plays uid =
let (name, _, _) = get_user_name_surname_mail uid in
@@ -479,19 +479,14 @@
db_cur_insert game pl1 pl2 pid (string_of_int move_pl) model loc info "";
release_global_lock ();
pid ^ "$" ^ info ^ "$" ^ (string_of_int move_pl) in
- let game_select_s g p1 p2 pid =
- "game='" ^ g ^ "' and player1='" ^ p1 ^ "' and player2='" ^ p2 ^
- "' and playid=" ^ pid in
- let upd_svg g p1 p2 pid m svg_s =
- let select = game_select_s g p1 p2 pid in
- let _ = DB.update_table dbFILE ~select ("svg='"^ svg_s ^"'") "cur_states" in
- "" in
+ let game_select_s pid = "playid=" ^ pid in
let db_escape s = str_replace "'" "''" s in
- let move_play move_tup g p1 p2 pid m =
- let sel_s = game_select_s g p1 p2 pid in
+ let move_play move_tup pid =
+ let sel_s = game_select_s pid in
let old_res= List.hd (dbtable sel_s "cur_states") in
- let (old_toss, old_loc, old_info, old_svg) =
- (old_res.(5), old_res.(6), old_res.(7), old_res.(8)) in
+ let (g, p1, p2, m, old_toss, old_loc, old_info, old_svg) =
+ (old_res.(1), old_res.(2), old_res.(3), old_res.(4),
+ old_res.(5), old_res.(6), old_res.(7), old_res.(8)) in
let game_toss = (List.hd (dbtable ("game='" ^ g ^ "'") "games")).(1) in
client_open_from_str (game_toss ^ "\nMODEL " ^ old_toss);
client_set_cur_loc old_loc;
@@ -511,9 +506,9 @@
"playid, game, player1, player2, move, toss, loc, info, svg"
[pid; g; p1; p2; m; old_toss; old_loc; old_info; old_svg];
new_info ^ "$" ^ (string_of_int new_pl) in
- let suggest time g p1 p2 pid m =
- let res = List.hd (dbtable (game_select_s g p1 p2 pid) "cur_states") in
- let (toss, loc) = (res.(5), res.(6)) in
+ let suggest time pid =
+ let res = List.hd (dbtable (game_select_s pid) "cur_states") in
+ let (g, m, toss, loc) = (res.(1),int_of_string res.(4), res.(5), res.(6)) in
let game_toss = (List.hd (dbtable ("game='" ^ g ^ "'") "games")).(1) in
client_open_from_str (game_toss ^ "\nMODEL " ^ toss);
client_set_cur_loc loc;
@@ -540,8 +535,8 @@
if all then List.map (fun a -> a.(0)) (dbtable "" "users") else
let friends = dbtable ("id='" ^ uid ^ "'") "friends" in
List.map (fun a -> a.(1)) friends in
- let open_db game p1 p2 pid move =
- let res = dbtable (game_select_s game p1 p2 pid) "cur_states" in
+ let open_db pid =
+ let res = dbtable (game_select_s pid) "cur_states" in
let (move, info) = ((List.hd res).(4), (List.hd res).(7)) in
info ^ "$" ^ move in
let add_opponent uid oppid =
@@ -600,15 +595,11 @@
| "LIST_PLAYS" ->
let a = get_args data in list_plays a.(0) a.(1), []
| "OPEN_DB" ->
- let a = get_args data in open_db a.(0) a.(1) a.(2) a.(3) a.(4), []
- | "UPD_SVG" ->
- let a = Array.map (strip_all ["'"]) (split ~bound:(Some 6) ", " data) in
- upd_svg a.(0) a.(1) a.(2) a.(3) a.(4) a.(5), []
+ let a = get_args data in open_db a.(0), []
| "NEW_PLAY" ->
- let a = get_args data in new_play a.(1) a.(2) a.(3), []
+ let a = get_args data in new_play a.(0) a.(1) a.(2), []
| "SUGGEST" ->
- let a = get_args data in
- suggest a.(1) a.(2) a.(3) a.(4) a.(5) (int_of_string a.(6)), []
+ let a = get_args data in suggest a.(0) a.(1), []
| "MOVE_PLAY" ->
let (op_i, cl_i) = (String.index data '(', String.index data ')') in
let tp_s = String.sub data (op_i+1) (cl_i - op_i-1) in
@@ -619,7 +610,7 @@
let tp1 = String.sub tp_s (tp_j+1) (tp_i - tp_j - 1) in
let tp2 = String.sub tp_s (tp_i+1) (tp_l - tp_i - 1) in
let tp, a = (strip_ws tp0, strip_ws tp1, strip_ws tp2), get_args args_s in
- move_play tp a.(0) a.(1) a.(2) a.(3) a.(4), []
+ move_play tp a.(0), []
| _ ->
"MOD_PYTHON ERROR ; Traceback: Unknown Toss Command! \n " ^ tcmd, [] in
http_msg false "200 OK" "text/html; charset=utf-8" new_cookies resp
Modified: trunk/Toss/WebClient/Connect.js
===================================================================
--- trunk/Toss/WebClient/Connect.js 2011-05-29 17:55:27 UTC (rev 1464)
+++ trunk/Toss/WebClient/Connect.js 2011-05-30 01:25:16 UTC (rev 1465)
@@ -1,8 +1,5 @@
// JavaScript Toss Module -- Connect (basic Toss Server connection routines)
-var UNAME = "";
-var GAME_NAME = ""; // name of current game, e.g. "Breakthrough"
-
var ASYNC_ALL_REQ_PENDING = 0;
var ASYNC_CMD_REQ_PENDING = {};
@@ -104,21 +101,18 @@
this.get_name = function (uname) { return (srv ("GET_NAME", uname)); }
this.list_plays = function (game, uname) {
- return (srv ("LIST_PLAYS", "'" + game + "', '" + UNAME + "'"));
+ return (srv ("LIST_PLAYS", game + ", " + uname));
}
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 +"'"));
+ return (srv ("NEW_PLAY", g + ", " + un + ", " + opp));
}
this.make_move = function (move_s, pid, cont) {
- async_srv("MOVE_PLAY", 'c, '+ move_s +', '+ pid, cont);
+ async_srv("MOVE_PLAY", 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);
+ async_srv("SUGGEST", time + ', ' + pid, cont);
}
this.friends = function () { return (srv ("LIST_FRIENDS", "user")); }
Modified: trunk/Toss/WebClient/Drawing.js
===================================================================
--- trunk/Toss/WebClient/Drawing.js 2011-05-29 17:55:27 UTC (rev 1464)
+++ trunk/Toss/WebClient/Drawing.js 2011-05-30 01:25:16 UTC (rev 1465)
@@ -6,55 +6,178 @@
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
+// ------ 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)
+}
-// ------ Drawing functions ----
+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;
-// 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);
+
+// --------- Elem and Rel Objects -----
+
+function Elem (id, x, y) {
+ this.id = id;
+ this.x = x;
+ this.y = y;
}
-// 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));
+function Rel (name, args) {
+ this.name = name;
+ this.args = args;
+}
+
+
+// --------- State Object ------
+
+
+// Object representing a state of the system (game).
+function State (game, info_string) {
+ // We create an SVG box with margins depending on the game.
+ this.game = game;
+
+ var create_svg_box = function (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);
+ }
+
+ if (game == "Tic-Tac-Toe" || game == "Concurrent-Tic-Tac-Toe") {
+ create_svg_box (130, 130, "board"); // bigger margins needed
} else {
- SUGGESTED_ELEM_SIZEX = SVG_WIDTH / 20;
- SUGGESTED_ELEM_SIZEY = SVG_HEIGHT / 20;
+ create_svg_box (40, 40, "board");
}
- draw_background (game);
- for (var i = 0; i < state.elems.length; i++) {
- draw_elem (game, state.elems[i]);
+
+ // 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("$");
+ 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 = [];
+ 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.elems.push (new Elem (e[0], pos[0], pos[1]));
}
- for (var i = 0; i < state.rels.length; i++) {
- draw_rel (game, state.rels[i]);
+
+ 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(']'));
+ 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;
+
+ // 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);
}
-// 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); }
+// 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;
-// To draw chess board we distinguish even/odd placed elements.
+
+// ------ Drawing functions ----
+
+// Helper: 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) };
@@ -65,68 +188,106 @@
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);
+// Draw the model.
+function 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", ("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);
+ }
+ }
+
+
+ // 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], 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", ("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 {
- 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);
+ 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 = state_draw_model;
// Highlight the element [elem].
-function highlight_elem (elemid) {
+function state_highlight_elem (elemid) {
var e = document.getElementById ("elem_" + elemid);
e.setAttribute ("class", "model-elem-highlight");
}
+State.prototype.highlight_elem = state_highlight_elem;
// Unhighlight the element [elem].
-function unhighlight_elem (elemid) {
+function state_unhighlight_elem (elemid) {
var e = document.getElementById ("elem_" + elemid);
e.setAttribute ("class", elem_class(elemid));
}
+State.prototype.unhighlight_elem = state_unhighlight_elem;
-// 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 () {
+ this.elem_size_x = 25; // suggested size of elements
+ this.elem_size_y = 25; // suggested size of elements
+
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 " \
@@ -294,11 +455,11 @@
// Create new svg element [elem], child of svg, set attributes, scale.
- var svg_from_string = function (x, y, sizex, sizey, s, attrs) {
+ var svg_from_string = function (th, 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 scfx = (th.elem_size_x - 10) / sizex;
+ var scfy = (th.elem_size_y - 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");
@@ -321,13 +482,13 @@
}
}
if (svg_s == undefined) { return (undefined) };
- return (svg_from_string (posx, posy, sizex, sizey, svg_s, attrs));
+ return (svg_from_string (this, 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,
+ return (svg_from_string (this, cx, cy,
+ this.elem_size_x - 10, this.elem_size_y - 10,
'<circle cx="0" cy="0" r="' + r + '" />',
attrs));
}
@@ -335,8 +496,8 @@
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));
+ return (svg_from_string (this, x - w/2, y - w/2, this.elem_size_x - 10,
+ this.elem_size_y - 10, rs, attrs));
}
this.rect = shapes_rect;
@@ -346,25 +507,25 @@
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 dx = this.elem_size_x * sign (x1 - x2);
+ var dy = this.elem_size_y * 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));
+ return (svg_from_string (this, 0, 0, this.elem_size_x - 10,
+ this.elem_size_y - 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));
+ var ws = (this.elem_size_x - 10) / (w / 500);
+ var hs = (this.elem_size_y - 10) / (h / 500);
+ return (svg_from_string (this, x, y, ws, hs, bg, attrs));
}
this.background_svg = shapes_background_svg;
Modified: trunk/Toss/WebClient/Main.js
===================================================================
--- trunk/Toss/WebClient/Main.js 2011-05-29 17:55:27 UTC (rev 1464)
+++ trunk/Toss/WebClient/Main.js 2011-05-30 01:25:16 UTC (rev 1465)
@@ -1,5 +1,8 @@
// JavaScript Toss Module -- Main (requires Connect.js, DefaultStyle.js)
+var UNAME = "";
+var GAME_NAME = ""; // name of current game, e.g. "Breakthrough"
+
var ELEM_COUNTERS = {};
var CUR_MOVE = "";
var CUR_ELEMS = [];
@@ -29,7 +32,7 @@
CUR_ELEMS = [];
document.getElementById('cur-move').innerHTML = "none";
var svg_e = document.getElementById("svg");
- svg_e.parentNode.removeChild (svg_e);
+ if (svg_e != undefined) { svg_e.parentNode.removeChild (svg_e); }
}
function win_s (i) {
@@ -52,17 +55,17 @@
}
// Full redraw.
-function 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;
}
- create_svg_box (SVG_MARGINX, SVG_MARGINY, "board");
- draw_model (GAME_NAME, ST);
- if (ST.payoff == "") {
+ if (ST.payoff == "") {
document.getElementById('movebt').innerHTML = "Make move:";
document.getElementById('cur-move').innerHTML = "none";
} else {
@@ -82,10 +85,10 @@
// Helper function: highlight move, unhighlight old, save current.
function show_move (m) {
for (var i = 0; i < CUR_ELEMS.length; i++) {
- unhighlight_elem (CUR_ELEMS[i]);
+ ST.unhighlight_elem (CUR_ELEMS[i]);
}
for (var i = 0; i < m.matched.length; i++) {
- highlight_elem (m.matched[i]);
+ ST.highlight_elem (m.matched[i]);
}
if (m.matched_str == "") {
document.getElementById('cur-move').innerHTML = "none";
@@ -107,7 +110,7 @@
};
if (moves.length == 0) { // still no moves, unhighlight
for (var i = 0; i < CUR_ELEMS.length; i++) {
- unhighlight_elem (CUR_ELEMS[i]);
+ ST.unhighlight_elem (CUR_ELEMS[i]);
}
CUR_ELEMS = [];
CUR_MOVE = "";
@@ -135,10 +138,10 @@
};
if (moves.length > 1 && LAST_CLICKED_ELEM == "") {
for (var i = 0; i < CUR_ELEMS.length; i++) {
- unhighlight_elem (CUR_ELEMS[i]);
+ ST.unhighlight_elem (CUR_ELEMS[i]);
}
document.getElementById('cur-move').innerHTML = elem + " — ?"
- highlight_elem (elem);
+ ST.highlight_elem (elem);
CUR_ELEMS = [elem];
CUR_MOVE = "";
};
@@ -146,8 +149,7 @@
}
function play_py_id (i) {
- return ("'" + GAME_NAME + "', '" + PLAYS[i][0] + "', '" +
- PLAYS[i][1] + "', '" + PLAYS[i][2] + "', '" + PLAYS[i][3] + "'")
+ return (PLAYS[i][2])
}
function disp_name (uname) {
@@ -196,25 +198,16 @@
}
-function game_click (game) {
+function play_click (game, play_id, pi) {
+ document.getElementById("opponents").style.display = "none";
+ list_plays (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" || game == "Concurrent-Tic-Tac-Toe") {
- create_svg_box (130, 130, "board"); // bigger margins needed
- } else {
- create_svg_box (40, 40, "board");
- }
var gd = document.getElementById("game-disp");
gd.style.display = "block";
gd.setAttribute ("class", "Game-" + game);
-}
-
-function play_click (game, play_id, pi) {
- document.getElementById("opponents").style.display = "none";
- 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;
@@ -222,12 +215,9 @@
if (game == "Connect4") { VIEW_MIRROR = 0; } else {
VIEW_MIRROR = (PLAYS[CUR_PLAY_I][0] == UNAME) ? 0 : 1;
}
- document.getElementById("cur-player").innerHTML =
- disp_name(PLAYS[CUR_PLAY_I][PLAYS[CUR_PLAY_I][3]]);
var info = CONN.open_db (play_py_id (pi));
- ST = new State (info);
document.getElementById("suggestions-toggle").style.display = "inline";
- full_redraw ();
+ full_redraw (GAME_NAME, info);
}
@@ -247,16 +237,8 @@
}
function make_move_continue (info) {
- ST = new State (info);
- CUR_MOVE = "";
- CUR_ELEMS = [];
- ELEM_COUNTERS = {};
- PLAYS[CUR_PLAY_I][3] = ST.PLAYER_STR;
- document.getElementById("cur-player").innerHTML =
- disp_name(PLAYS[CUR_PLAY_I][ST.PLAYER_STR]);
document.getElementById("working").style.display = "none";
- full_redraw ();
- CONN.upd_svg (play_py_id(CUR_PLAY_I), svg_string());
+ 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);
@@ -392,8 +374,13 @@
}
function new_play_do (opp_uid, vm) {
- list_plays (GAME_NAME)
- game_click (GAME_NAME)
+ list_plays (GAME_NAME);
+ document.getElementById("welcome").style.display = "none";
+ document.getElementById("game-disp").style.display = "none";
+ document.getElementById("plays").style.display = "none";
+ var gd = document.getElementById("game-disp");
+ gd.style.display = "block";
+ gd.setAttribute ("class", "Game-" + GAME_NAME);
document.getElementById ("game-title").innerHTML = GAME_NAME;
document.getElementById("opponents").style.display = "none";
var olist = document.getElementById("opponents-list");
@@ -405,19 +392,16 @@
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('$');
+ 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 = vm;
- 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];
+ var p = [UNAME, opp_uid, FREE_PLAY_NO];
PLAYS.push(p);
- ST = new State (info_nbr.substring(info_idx+1));
- full_redraw ();
- CONN.upd_svg (play_py_id(CUR_PLAY_I), svg_string());
+ full_redraw (GAME_NAME, info_nbr.substring(info_idx+1));
li = new_play_item (GAME_NAME, CUR_PLAY_I);
document.getElementById("plays-list-" + GAME_NAME).appendChild(li);
}
Deleted: trunk/Toss/WebClient/State.js
===================================================================
--- trunk/Toss/WebClient/State.js 2011-05-29 17:55:27 UTC (rev 1464)
+++ trunk/Toss/WebClient/State.js 2011-05-30 01:25:16 UTC (rev 1465)
@@ -1,148 +0,0 @@
-// 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;
-
-
-// --------- 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 ------
-
-
-// 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("$");
- 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 = [];
- 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.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(']'));
- 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;
-
- // 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/Style.css
===================================================================
--- trunk/Toss/WebClient/Style.css 2011-05-29 17:55:27 UTC (rev 1464)
+++ trunk/Toss/WebClient/Style.css 2011-05-30 01:25:16 UTC (rev 1465)
@@ -651,7 +651,7 @@
padding: 1em;
}
-#cur-move, #cur-player {
+#cur-move {
margin-top: 0em;
margin-bottom: 0em;
}
Modified: trunk/Toss/WebClient/index.html
===================================================================
--- trunk/Toss/WebClient/index.html 2011-05-29 17:55:27 UTC (rev 1464)
+++ trunk/Toss/WebClient/index.html 2011-05-30 01:25:16 UTC (rev 1465)
@@ -11,7 +11,6 @@
<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="Drawing.js"> </script>
<script type="text/javascript" src="Main.js"> </script>
<script type="text/javascript" src="Login.js"> </script>
@@ -289,7 +288,6 @@
</p>
<p id="move-info-par">
- <span style="display: none;">Moves: <span id="cur-player">?</span></span>
<button id="movebt" class="bt" onclick="make_move ()">Make move:</button>
<span id="cur-move">none</span>
<button id="sugbt" class="bt" onclick="suggest_move_click()">
Modified: trunk/Toss/WebClient/profile.html
===================================================================
--- trunk/Toss/WebClient/profile.html 2011-05-29 17:55:27 UTC (rev 1464)
+++ trunk/Toss/WebClient/profile.html 2011-05-30 01:25:16 UTC (rev 1465)
@@ -9,7 +9,6 @@
<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="Drawing.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.
|
