-
Notifications
You must be signed in to change notification settings - Fork 3
Expand file tree
/
Copy pathtest.html
More file actions
151 lines (147 loc) · 5.01 KB
/
Copy pathtest.html
File metadata and controls
151 lines (147 loc) · 5.01 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Spare Pieces Example</title>
<base href="" />
<link rel="stylesheet" href="css/foundation.css" />
<script src="js/vendor/modernizr.js"></script>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<link rel="stylesheet" href="css/chessboard.css" />
</head>
<body>
<p><a href="examples#2006">← Back</a></p>
<p>Set <a href="docs#config:sparePieces"><code class="js plain">sparePieces</code></a> to <code class="js keyword">true</code> to show spare pieces that can be dropped onto the board.
</p>
<!-- start example HTML --->
<div id="board" style="width: 400px"></div>
<p>FEN: <span id="fen"></span></p>
<p>Suggested Move: <span id="calc"></span></p>
<!-- end example HTML --->
<script src="js/json3.min.js"></script>
<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/chessboard.js"></script>
<script>
var init = function() {
//--- start example JS ---
var Colour = "";
var moveHistory = [];
var moveRedo = [];
var onHistory = false;
var onChange = function(oldPos, newPos) {
if(onHistory == false) { // if not undo/redo command
console.log("onChange added to undo array" + ChessBoard.objToFen(oldPos) + ChessBoard.objToFen(newPos) + board.fen());
moveHistory.push(ChessBoard.objToFen(oldPos)); // add new position to undo array
}
onHistory = false; //reset onHistory
console.log("onChange fired.");
updateFen();
};
document.getElementById("undoBtn").onclick =
function() {
if(moveHistory.length > 0) // if undo array isn't empty
{
moveRedo.unshift(board.fen()); // add current FEN to start of redo array
console.log("Undo to: " + moveHistory[moveHistory.length-1]);
onHistory = true;
board.position(moveHistory[moveHistory.length-1] + ' ' + Colour + ' - - 0 1'); // print end of undo array
moveHistory.pop(); // remove end of undo array
updateFen(); // reprint FEN
}
else
{
alert("Can't undo any further.");
}
};
document.getElementById("redoBtn").onclick =
function() {
if(moveRedo.length > 0) // if redo array isn't empty
{
moveHistory.push(board.fen()); // add start of redo array to end of undo array
console.log("Redo to: " + moveRedo[0]);
onHistory = true;
board.position(moveRedo[0] + ' ' + Colour + ' - - 0 1'); // print start of redo array
moveRedo.shift(); // remove start of redo array
updateFen(); // reprting FEN
}
else
{
alert("Can't redo any further.");
}
};
var updateFen = function() {
document.getElementById("fen").innerHTML = board.fen() + ' ' + Colour + ' - - 0 1';
}
setColour = function(radio) {
Colour = radio.value;
updateFen();
}
initColour = function() {
var x = document.getElementsByName("colourRBtn");
for (var i = 0; i < x.length; i ++)
{
if (x[i].checked)
{
Colour = x[i].value;
updateFen();
}
}
}
document.getElementById("flipBtn").onclick =
function() {
board.orientation('flip');
};
document.getElementById("resetBtn").onclick =
function() {
board.position('start');
updateFen();
};
document.getElementById("captureBtn").onclick =
function() {
board.position('4k3/8/8/8/8/8/8/4K3 w - - 0 1');
updateFen();
};
document.getElementById("calculateBtn").onclick =
function() {
if((document.getElementById("sfDepth").value < 20) &&
(document.getElementById("sfDepth").value > 0))
{
stockfish.postMessage('position fen ' + board.fen() + ' ' + Colour);
stockfish.postMessage('go depth ' + document.getElementById("sfDepth").value);
}
}
document.getElementById("fenBtn").onclick =
function() {
updateFen();
}
var board = ChessBoard('board', {
draggable: true,
dropOffBoard: 'trash',
sparePieces: true,
position: 'start',
orientation: 'white',
onChange: onChange
});
var stockfish = new Worker('js/stockfish.js');
stockfish.onmessage = function(event) {
document.getElementById("calc").innerHTML = event.data;
};
updateFen();
initColour();
}; // end init()
$(document).ready(init);
</script>
<a class="small radius button" type="button" id="flipBtn" value="Flip">Flip</a>
<a class="small radius button" type="button" id="resetBtn" value="Reset">Reset</a>
<a class="small radius button" type="button" id="captureBtn" value="Capture All">Capture All</a>
<a class="small radius button" type="button" id="calculateBtn" value="Calculate Next Move">Calculate Next Move</a>
<a class="small radius button" type="button" id="fenBtn" value="Update Fen (Dev. only)">Update Fen (Dev. only)</a>
<a class="small radius button" type="button" id="undoBtn" value="Undo">← Undo move</a>
<a class="small radius button" type="button" id="redoBtn" value="Undo">Redo move →</a>
<label>Stockfish Depth (1-20)<input type="number" value="15" min="1" max="20" id="sfDepth"></label>
<label><input type="radio" value="w" name="colourRBtn" checked onClick="setColour(this)" >White to move</label>
<label><input type="radio" value="b" name="colourRBtn" onClick="setColour(this)" >Black to move</label>
</body>
</html>