In this tutorial I try to clarify how to work with WGo.Board. We will make simple board "editor", with ability to add and remove objects like stones, squares and triangles.
Before you go any further you must download WGo.js files and put them into your directory. Then we can start making HTML skelet of our application.
<!DOCTYPE HTML>
<html>
<head>
<title>My page</title>
<script type="text/javascript" src="wgo/wgo.js"></script> <!-- linking WGo javascript -->
</head>
<body>
<!-- Dropdown menu for selecting tool -->
<select id="tool" style="display: block; margin-bottom: 10px;">
<option value="black" selected>Black stone</option>
<option value="white">White stone</option>
<option value="SQ">Square</option>
<option value="TR">Triangle</option>
<option value="CR">Circle</option>
<option value="remove">Remove</option>
</select>
<div id="board">
<!-- board will go here -->
</div>
</body>
</html>
You can see result here
For rendering a board we add javascript to our document which must be executed after target DOM element is loaded. Otherwise it won't work. We can use either onLoad event or put javascript at the end of the file.
var board = new WGo.Board(document.getElementById("board"), {
width: 600,
});
However we would like to see only a part of the board, so we call constructor with parameter section.
var board = new WGo.Board(document.getElementById("board"), {
width: 600,
section: {
top: 12,
left: 6,
right: 0,
bottom: 0
}
});
You can see result here
Now comes a little bit harder part. In this step we make possible adding desired objects on the board by mouse clicking. For that we use board's method addEventListener.
var tool = document.getElementById("tool"); // get the <select> element
board.addEventListener("click", function(x, y) {
if(tool.value == "black") {
board.addObject({
x: x,
y: y,
c: WGo.B
});
}
else if(tool.value == "white") {
board.addObject({
x: x,
y: y,
c: WGo.W
});
}
else if(tool.value == "remove") {
board.removeObjectsAt(x, y);
}
else {
board.addObject({
x: x,
y: y,
type: tool.value
});
}
});
You can see result of this step here
How about we want some special object, let's say an airplane. Firstly we must add an option to the select list.
<option value="plane">Airplane</option>
And then we must create a WGo.Board.DrawHandler which will be able to draw our airplane.
var plane = {
// draw on stone layer
stone: {
// draw function is called in context of CanvasRenderingContext2D, so we can paint immediately using this
draw: function(args, board) {
var xr = board.getX(args.x), // get absolute x coordinate of intersection
yr = board.getY(args.y), // get absolute y coordinate of intersection
sr = board.stoneRadius; // get field radius in px
// if there is a black stone, draw white plane
if(board.obj_arr[args.x][args.y][0].c == WGo.B) this.strokeStyle = "white";
else this.strokeStyle = "black";
this.lineWidth = 3;
this.beginPath();
this.moveTo(xr - sr*0.8, yr);
this.lineTo(xr + sr*0.5, yr);
this.lineTo(xr + sr*0.8, yr - sr*0.25);
this.moveTo(xr - sr*0.4, yr);
this.lineTo(xr + sr*0.3, yr - sr*0.6);
this.moveTo(xr - sr*0.4, yr);
this.lineTo(xr + sr*0.3, yr + sr*0.6);
this.stroke();
}
},
}
In the end we mustn't forget to alter board's click listener.
...
else if(tool.value == "plane") {
board.addObject({
x: x,
y: y,
type: plane
});
}
...
As usual the result is here
Last step of our tutorial is displaying coordinates (labels like A1, A2 ...) around the board. Coordinates are not bind with any single field so we cannot use addObject method. For this kind of drawing there is method addCustomObject. Everything else is similar to adding normal objects - we create WGo.Board.DrawHandler and then we assign it to the board.
var coordinates = {
// draw on grid layer
grid: {
draw: function(args, board) {
var ch, t, xright, xleft, ytop, ybottom;
this.fillStyle = "rgba(0,0,0,0.7)";
this.textBaseline="middle";
this.textAlign="center";
this.font = board.stoneRadius+"px "+(board.font || "");
xright = board.getX(-0.75);
xleft = board.getX(board.size-0.25);
ytop = board.getY(-0.75);
ybottom = board.getY(board.size-0.25);
for(var i = 0; i < board.size; i++) {
ch = i+"A".charCodeAt(0);
if(ch >= "I".charCodeAt(0)) ch++;
t = board.getY(i);
this.fillText(board.size-i, xright, t);
this.fillText(board.size-i, xleft, t);
t = board.getX(i);
this.fillText(String.fromCharCode(ch), t, ytop);
this.fillText(String.fromCharCode(ch), t, ybottom);
}
this.fillStyle = "black";
}
}
}
board.addCustomObject(coordinates);
However this is not enough. As you can see coordinate's labels occupy more space than board's margins offer, so we must extend board's margins. Fortunately we can easily adjust board visible section, so we just modify the constructor.
var board = new WGo.Board(document.getElementById("board"), {
width: 600,
section: {
top: 12,
left: 6,
right: -0.5,
bottom: -0.5
}
});
This will enlarge right and bottom margin of the board by half field. The final result with all source codes is here