aboutsummaryrefslogtreecommitdiffstats
path: root/dotsandboxes/web
diff options
context:
space:
mode:
Diffstat (limited to 'dotsandboxes/web')
-rw-r--r--dotsandboxes/web/dotsandboxes.css10
-rw-r--r--dotsandboxes/web/dotsandboxes.html50
-rw-r--r--dotsandboxes/web/dotsandboxes.js454
3 files changed, 0 insertions, 514 deletions
diff --git a/dotsandboxes/web/dotsandboxes.css b/dotsandboxes/web/dotsandboxes.css
deleted file mode 100644
index 71b1d3b..0000000
--- a/dotsandboxes/web/dotsandboxes.css
+++ /dev/null
@@ -1,10 +0,0 @@
-
-.footer {
- color: #B3B3B3;
- margin-bottom: 1ex;
-}
-
-.footer a {
- color: #87A0B3;
-}
-
diff --git a/dotsandboxes/web/dotsandboxes.html b/dotsandboxes/web/dotsandboxes.html
deleted file mode 100644
index 4e97508..0000000
--- a/dotsandboxes/web/dotsandboxes.html
+++ /dev/null
@@ -1,50 +0,0 @@
-<!DOCTYPE html>
-<html>
-<html lang="en">
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-<title>Dots and Boxes</title>
-<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-<link rel="stylesheet" href="dotsandboxes.css">
-</head>
-<body>
- <div class="container">
- <h1>Dots and Boxes</h1>
- <div class="row">
- <div class="col-md">
- <div id="playing-area"></div>
- </div>
- <div class="col-md">
- <div class="form-group">
- <p>Size of game:</p>
- <div class="input-group">
- <div class="input-group-prepend">
- <span class="input-group-text">Rows and Columns</span>
- </div>
- <input type="number" class="form-control" id="nb-rows" value=6>
- <input type="number" class="form-control" id="nb-cols" value=6>
- </div>
- </div>
- <div class="form-group">
- <p>Players:</p>
- <div class="input-group mb-3">
- <div class="input-group-prepend"><span class="input-group-text" id="basic-addon3">Agent 1</span></div>
- <input type="text" class="form-control" id="agent1" aria-describedby="basic-addon3">
- </div>
- <div class="input-group mb-3">
- <div class="input-group-prepend"><span class="input-group-text" id="basic-addon3">Agent 2</span></div>
- <input type="text" class="form-control" id="agent2" aria-describedby="basic-addon3">
- </div>
- <p>Fill in the address where an agent can be reached using WebSockets (e.g. ws://127.0.0.1:8089).
- If a field is empty a human player is assumed.
- </p>
- <button type="button" class="btn btn-secondary" id="restart-btn">Restart game</button>
- </div>
- </div>
- </div>
- </div>
- <script src="https://d3js.org/d3.v4.min.js"></script>
- <script src="dotsandboxes.js"></script>
-</body>
-</html>
-
diff --git a/dotsandboxes/web/dotsandboxes.js b/dotsandboxes/web/dotsandboxes.js
deleted file mode 100644
index 11e9447..0000000
--- a/dotsandboxes/web/dotsandboxes.js
+++ /dev/null
@@ -1,454 +0,0 @@
-/**
- * dotsandboxes.js
- *
- * Template for the Machine Learning Project course at KU Leuven (2017-2018)
- * of Hendrik Blockeel and Wannes Meert.
- *
- * Copyright (c) 2018 KU Leuven. All rights reserved.
- **/
-
-function generateGuid() {
- var result, i, j;
- result = '';
- for(j=0; j<32; j++) {
- if( j == 8 || j == 12|| j == 16|| j == 20)
- result = result + '-';
- i = Math.floor(Math.random()*16).toString(16).toUpperCase();
- result = result + i;
- }
- return result;
-}
-
-// GAME LOGIC
-
-var cur_game = generateGuid();
-var cur_player = 1;
-var cur_ended = false;
-var points = [0, 0, 0];
-var timelimit = 0.5;
-var nb_cols = 6;
-var nb_rows = 6;
-var data = new Array(0);
-
-function restart_game() {
- //console.log("Restarting game");
- cur_game = generateGuid();
- nb_cols = parseInt(document.getElementById('nb-cols').value);
- if (nb_cols == "" || isNaN(nb_cols)) {
- nb_cols = 6;
- }
- nb_rows = parseInt(document.getElementById('nb-rows').value);
- if (nb_rows == "" || isNaN(nb_rows)) {
- nb_rows = 6;
- }
- cur_ended = false;
- console.log("Starting game", cur_game);
- points = [0, 0, 0];
- cur_player = 1;
- var old_length = 0;
- for (var ri=0; ri<nb_rows + 1; ri++) {
- if (ri >= data.length) {
- data.push(new Array(0));
- }
- var row = data[ri];
- for (var ci=0; ci<nb_cols + 1; ci++) {
- if (ci >= row.length) {
- row.push({l:0, t:0, p:0, r:0, c:0});
- }
- var l = 0;
- var t = 0;
- var p = 0;
- if (ri == nb_rows) {
- l = undefined;
- p = undefined;
- }
- if (ci == nb_cols) {
- t = undefined;
- p = undefined
- }
- var cell = row[ci];
- cell.l = l;
- cell.t = t;
- cell.p = p;
- cell.r = ri;
- cell.c = ci;
- }
- old_length = row.length;
- for (var ci=nb_cols + 1; ci<old_length; ci++) {
- row.pop();
- }
- }
- old_length = data.length;
- for (var ri=nb_rows + 1; ri<old_length; ri++) {
- data.pop();
- }
-}
-
-function user_click(cell, o) {
- if (cur_ended) {
- //console.log('Game ended, ignoring click');
- return;
- }
- console.log('User click', cell, o);
- var won_cell = false;
- var c = cell.c;
- var r = cell.r;
- var msg = {
- type: "action",
- game: cur_game,
- player: cur_player,
- nextplayer: cur_player,
- score: [points[1], points[2]],
- location: [r, c],
- orientation: o
- };
- if (o == "h") {
- if (cell.t != 0) {
- return;
- }
- cell.t = cur_player;
- // Above
- if (r > 0) {
- if (data[r - 1][c].l != 0
- && data[r - 1][c + 1].l != 0
- && data[r - 1][c].t != 0
- && data[r][c].t != 0) {
- won_cell = true;
- points[cur_player] += 1;
- data[r - 1][c].p = cur_player;
- }
- }
- // Below
- if (r < nb_rows) {
- if (data[r][c].l != 0
- && data[r][c + 1].l != 0
- && data[r][c].t != 0
- && data[r + 1][c].t != 0) {
- won_cell = true;
- points[cur_player] += 1;
- data[r][c].p = cur_player;
- }
- }
- }
-
- if (o == "v") {
- if (cell.l != 0) {
- return;
- }
- cell.l = cur_player;
- // Left
- if (c > 0) {
- if (data[r][c - 1].l != 0
- && data[r][c].l != 0
- && data[r][c - 1].t != 0
- && data[r + 1][c - 1].t != 0) {
- won_cell = true;
- points[cur_player] += 1;
- data[r][c - 1].p = cur_player;
- }
- }
- // Right
- if (c < nb_cols) {
- if (data[r][c].l != 0
- && data[r][c + 1].l != 0
- && data[r][c].t != 0
- && data[r + 1][c].t != 0) {
- won_cell = true;
- points[cur_player] += 1;
- data[r][c].p = cur_player;
- }
- }
- }
-
- msg["score"] = [points[1], points[2]];
-
- if (!won_cell) {
- cur_player = 3 - cur_player;
- msg.nextplayer = cur_player;
- }
- update_board();
- if (points[1] + points[2] == nb_cols * nb_rows) {
- // Game over
- var winner = 1
- if (points[2] == points[1]) {
- winner = 0;
- }
- if (points[2] > points[1]) {
- winner = 2;
- }
- cur_ended = true;
- msg.type = "end";
- msg.nextplayer = 0;
- msg.winner = winner;
- }
- send_to_agents(msg);
-}
-
-var field_margin = 10;
-var cell_width = 40;
-var cell_margin = 4;
-var player_height = 40;
-var width = 400;
-var height = 600;
-var line_width = 5;
-
-var player_color = [
- "#E6E6E6",
- "#FC6666",
- "#0F80FF"
-];
-
-var svg = d3.select("#playing-area").append("svg")
- .attr("width", width)
- .attr("height", height)
- .append("g")
- .attr("transform", "translate("+field_margin+","+field_margin+")");
-
-var player = svg.append("g")
- .attr("class", "player")
- .attr("transform", "translate(0,10)");
-
-var field = svg.append("g")
- .attr("class", "field")
- .attr("transform", "translate(0,"+player_height+")");
-
-
-function update_board() {
- // PLAYERS - enter & update
- var player_text = player.selectAll("text")
- .data([cur_player, cur_player]);
-
- player_text = player_text.enter().append("text")
- .attr("x", function(c, i) { return i * 100;})
- .merge(player_text)
- .text(function(c, i) {return "Player " + (i + 1) + ": "+points[i + 1];})
- .attr("fill", function(c, i) {
- if (c == i + 1) {
- return player_color[c];
- } else {
- return player_color[0];
- }
- });
-
- // ROWS - enter & update
- var rows = field.selectAll(".row")
- .data(data)
- .attr("fill", function() {return null;});
-
- rows.exit().remove();
-
- rows = rows.enter().append("g")
- .attr("class", "row")
- .attr("transform", function(row, i) {return "translate(0," + cell_width * i + ")";})
- .merge(rows);
-
- // COLS - enter & update
- var cols = rows.selectAll(".col")
- .data(function(col) {return col;});
-
- cols.exit().remove();
-
- var cols_enter = cols.enter().append("g")
- .attr("class", "col")
- .attr("transform", function(col, ri) {return "translate("+cell_width * ri+",0)";});
-
- // CELL - enter
- cols_enter.append("rect")
- .attr("class", "cell")
- .attr("rx", cell_margin)
- .attr("ry", cell_margin)
- .attr("opacity", 0.25)
- .attr("x", cell_margin)
- .attr("y", cell_margin)
- .attr("width", cell_width - 2*cell_margin)
- .attr("height", cell_width - 2*cell_margin);
-
- // HLINE - enter
- cols_enter.append("line")
- .attr("class", "hline")
- .attr("x1", function(cell, ci) {return cell_margin;})
- .attr("x2", function(cell, ci) {return cell_width - cell_margin;})
- .attr("y1", 0)
- .attr("y2", 0)
- .attr("stroke-linecap", "round")
- .attr("stroke", function(cell) {return player_color[cell.t];});
-
- cols_enter.append("path")
- .attr("d", "M"+cell_margin+",0"+
- "L"+(cell_width/2)+",-"+(cell_width/3)+
- "L"+(cell_width-cell_margin)+",0"+
- "L"+(cell_width/2)+","+(cell_width/3)+"Z")
- .attr("stroke", "black")
- .attr("stroke-width", 2)
- .attr("opacity", "0")
- .on("click", function(cell) {
- if (agents[cur_player].active == true) {
- console.log("Ignoring click, automated agent")
- } else {
- user_click(cell, "h");
- }
- });
-
- // VLINE - enter
- cols_enter.append("line")
- .attr("class", "vline")
- .attr("y1", function(cell, ci) {return cell_margin;})
- .attr("y2", function(cell, ci) {return cell_width - cell_margin;})
- .attr("x1", 0)
- .attr("x2", 0)
- .attr("stroke-linecap", "round")
- .attr("stroke", function(cell) {return player_color[cell.l];});
-
- cols_enter.append("path")
- .attr("d", "M0,"+cell_margin+
- "L-"+(cell_width/3)+","+(cell_width/2)+
- "L0,"+(cell_width-cell_margin)+
- "L"+(cell_width/3)+","+(cell_width/2)+"Z")
- .attr("stroke", "black")
- .attr("stroke-width", 2)
- .attr("opacity", "0")
- .on("click", function(cell) {
- if (agents[cur_player].active == true) {
- console.log("Ignoring click, automated agent");
- } else {
- user_click(cell, "v");
- }
- });
-
- cols = cols_enter
- .merge(cols);
-
- // HLINE - update
- cols.selectAll(".hline")
- .attr("stroke-width", function(cell) {
- if (typeof(cell.t) == "undefined") {
- return 0;
- }
- return line_width;
- })
- .attr("stroke", function(cell) {return player_color[cell.t];});
-
- // VLINE - update
- cols.selectAll(".vline")
- .attr("stroke-width", function(cell, ci) {
- if (typeof(cell.l) == "undefined") {
- return 0;
- }
- return line_width;
- })
- .attr("stroke", function(cell) {return player_color[cell.l];});
-
- // CELL - update
- cols.selectAll(".cell")
- .attr("fill", function(cell) {
- if (cell.p == undefined) {
- return "white";
- }
- return player_color[cell.p];
- });
-}
-
-
-// AGENT CONNECTIONS
-
-var agents = [
- {},
- {address: undefined, active: false, socket: undefined},
- {address: undefined, active: false, socket: undefined}
-];
-
-var msg_queue = [];
-
-
-function start_connections() {
- for (var i=1; i<3; i++) {
- agents[i] = {address:undefined, active: false, socket: undefined};
- var address = document.getElementById('agent'+i).value;
- if (address != "") {
- //console.log("Starting websocket for agent "+i+" on address "+address);
- var agent = agents[i];
- agent.address = address;
- agent.socket = new WebSocket(address);
- agent.socket.onopen = (function (ii, iagent) { return function(event) {
- console.log("Agent "+ii+" connected")
- iagent.active = true;
- iagent.socket.onmessage = function(event) {
- var msg = JSON.parse(event.data);
- //console.log("Get msg from agent "+ii, msg);
- if (msg.type == "action") {
- if (cur_player == ii) {
- console.log("Received action from ACTIVE player "+ii, msg);
- user_click(data[msg.location[0]][msg.location[1]], msg.orientation);
- } else {
- console.log("Received action from NON-ACTIVE player "+ii, msg);
- }
- }
- return false;
- };
- iagent.socket.onclose = function(event) {
- console.log("Closing connection to agent "+ii);
- };
- iagent.socket.onerror = function(event) {
- console.log("Error on connection to agent "+ii, event);
- };
- msg = {
- "type": "start",
- "player": ii,
- "timelimit": timelimit,
- "game": cur_game,
- "grid": [nb_rows, nb_cols]
- };
- iagent.socket.send(JSON.stringify(msg));
- };}(i, agent));
- }
- }
-}
-
-
-function send_to_agents(msg) {
- msg_queue.push(JSON.stringify(msg));
- try_sending_to_agents();
-}
-
-
-function try_sending_to_agents() {
- var all_connected = true;
- for (var i=1; i<3; i++) {
- if (agents[i].address !== undefined && agents[i].active == false) {
- all_connected = false;
- break;
- }
- }
- if (!all_connected) {
- // Wait until all are connected
- setTimeout(try_sending_to_agents, 100);
- } else {
- if (msg_queue.length == 0 ) {
- return;
- }
- var msg = msg_queue.shift();
- console.log("Send msg to agents", msg);
- for (var i=1; i<3; i++) {
- if (agents[i].active == true) {
- agents[i].socket.send(msg);
- }
- }
- }
-}
-
-
-// STARTUP
-
-function restart() {
- restart_game();
- update_board();
- start_connections();
-}
-
-var restartbtn = document.getElementById("restart-btn");
-restartbtn.onclick = function() {
- console.log("Restart game");
- restart();
-};
-
-restart();
generated by cgit v1.2.3 (git 2.51.0) at 2025-11-04 10:21:44 +0000