Skip to content

Commit b343753

Browse files
glinscottglinscott
committed
Don't redraw entire board
1 parent 5b87387 commit b343753

File tree

1 file changed

+114
-93
lines changed

1 file changed

+114
-93
lines changed

‎js/boardui.js‎

Lines changed: 114 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@ var g_playerWhite = true;
77
var g_changingFen = false;
88
var g_analyzing = false;
99

10+
var g_uiBoard;
11+
var g_cellSize = 45;
12+
1013
function UINewGame() {
1114
moveNumber = 1;
1215

@@ -19,11 +22,10 @@ function UINewGame() {
1922
g_backgroundEngine.postMessage("go");
2023
}
2124
g_lastMove = null;
25+
RedrawBoard();
2226

2327
if (!g_playerWhite) {
2428
SearchAndRedraw();
25-
} else {
26-
RedrawBoard();
2729
}
2830
}
2931

@@ -97,6 +99,8 @@ function UIPlayMove(move, pv) {
9799
MakeMove(move);
98100

99101
UpdatePVDisplay(pv);
102+
103+
UpdateFromMove(move);
100104
}
101105

102106
function UpdatePVDisplay(pv) {
@@ -125,7 +129,6 @@ function SearchAndRedraw() {
125129
g_backgroundEngine.postMessage("search " + g_timeout);
126130
} else {
127131
Search(FinishMove, 99, null);
128-
setTimeout("RedrawBoard()", 100);
129132
}
130133
}
131134

@@ -146,7 +149,6 @@ function InitializeBackgroundEngine() {
146149
UpdatePVDisplay(e.data.substr(3, e.data.length - 3));
147150
} else {
148151
UIPlayMove(GetMoveFromString(e.data), null);
149-
RedrawBoard();
150152
}
151153
}
152154
g_backgroundEngine.error = function (e) {
@@ -160,6 +162,98 @@ function InitializeBackgroundEngine() {
160162
return g_backgroundEngineValid;
161163
}
162164

165+
function UpdateFromMove(move) {
166+
var fromX = (move & 0xF) - 4;
167+
var fromY = ((move >> 4) & 0xF) - 2;
168+
var toX = ((move >> 8) & 0xF) - 4;
169+
var toY = ((move >> 12) & 0xF) - 2;
170+
171+
if (!g_playerWhite) {
172+
fromY = 7 - fromY;
173+
toY = 7 - toY;
174+
fromX = 7 - fromX;
175+
toX = 7 - toX;
176+
}
177+
178+
if ((move & moveflagCastleKing) ||
179+
(move & moveflagCastleQueen) ||
180+
(move & moveflagEPC) ||
181+
(move & moveflagPromotion)) {
182+
RedrawPieces();
183+
} else {
184+
var fromSquare = g_uiBoard[fromY * 8 + fromX];
185+
$(g_uiBoard[toY * 8 + toX])
186+
.empty()
187+
.append($(fromSquare).children());
188+
}
189+
}
190+
191+
function RedrawPieces() {
192+
for (y = 0; y < 8; ++y) {
193+
for (x = 0; x < 8; ++x) {
194+
var td = g_uiBoard[y * 8 + x];
195+
var pieceY = g_playerWhite ? y : 7 - y;
196+
var piece = g_board[((pieceY + 2) * 0x10) + (g_playerWhite ? x : 7 - x) + 4];
197+
var pieceName = null;
198+
switch (piece & 0x7) {
199+
case piecePawn: pieceName = "pawn"; break;
200+
case pieceKnight: pieceName = "knight"; break;
201+
case pieceBishop: pieceName = "bishop"; break;
202+
case pieceRook: pieceName = "rook"; break;
203+
case pieceQueen: pieceName = "queen"; break;
204+
case pieceKing: pieceName = "king"; break;
205+
}
206+
if (pieceName != null) {
207+
pieceName += "_";
208+
pieceName += (piece & 0x8) ? "white" : "black";
209+
}
210+
211+
if (pieceName != null) {
212+
var img = document.createElement("div");
213+
$(img).addClass('sprite-' + pieceName);
214+
img.style.backgroundImage = "url('img/sprites.png')";
215+
img.width = g_cellSize;
216+
img.height = g_cellSize;
217+
var divimg = document.createElement("div");
218+
divimg.appendChild(img);
219+
220+
$(divimg).draggable({ start: function (e, ui) {
221+
if (g_selectedPiece === null) {
222+
g_selectedPiece = this;
223+
var offset = $(this).closest('table').offset();
224+
g_startOffset = {
225+
left: e.pageX - offset.left,
226+
top: e.pageY - offset.top
227+
};
228+
} else {
229+
return g_selectedPiece == this;
230+
}
231+
}});
232+
233+
$(divimg).mousedown(function(e) {
234+
if (g_selectedPiece === null) {
235+
var offset = $(this).closest('table').offset();
236+
g_startOffset = {
237+
left: e.pageX - offset.left,
238+
top: e.pageY - offset.top
239+
};
240+
e.stopPropagation();
241+
g_selectedPiece = this;
242+
g_selectedPiece.style.backgroundImage = "url('img/transpBlue50.png')";
243+
} else if (g_selectedPiece === this) {
244+
g_selectedPiece.style.backgroundImage = null;
245+
g_selectedPiece = null;
246+
}
247+
});
248+
249+
$(td).empty().append(divimg);
250+
} else {
251+
$(td).empty();
252+
}
253+
}
254+
}
255+
}
256+
163257
function RedrawBoard() {
164258
var div = $("#board")[0];
165259

@@ -169,19 +263,17 @@ function RedrawBoard() {
169263

170264
var tbody = document.createElement("tbody");
171265

172-
var cellSize = 45;
173-
174-
var guiTable = new Array();
266+
g_uiBoard = [];
175267

176268
var dropPiece = function (e, ui) {
177269
var endX = e.pageX - $(table).offset().left;
178270
var endY = e.pageY - $(table).offset().top;
179271

180-
endX = Math.floor(endX / cellSize);
181-
endY = Math.floor(endY / cellSize);
272+
endX = Math.floor(endX / g_cellSize);
273+
endY = Math.floor(endY / g_cellSize);
182274

183-
var startX = Math.floor(g_startOffset.left / cellSize);
184-
var startY = Math.floor(g_startOffset.top / cellSize);
275+
var startX = Math.floor(g_startOffset.left / g_cellSize);
276+
var startY = Math.floor(g_startOffset.top / g_cellSize);
185277

186278
if (!g_playerWhite) {
187279
startY = 7 - startY;
@@ -206,7 +298,6 @@ function RedrawBoard() {
206298
endX = 7 - endX;
207299
}
208300

209-
210301
g_selectedPiece.style.left = 0;
211302
g_selectedPiece.style.top = 0;
212303

@@ -222,25 +313,15 @@ function RedrawBoard() {
222313
g_lastMove = move;
223314
MakeMove(move);
224315

225-
if ((move & moveflagCastleKing) ||
226-
(move & moveflagCastleQueen) ||
227-
(move & moveflagEPC) ||
228-
(move & moveflagPromotion)) {
229-
RedrawBoard();
230-
} else {
231-
g_selectedPiece.parentNode.removeChild(g_selectedPiece);
232-
if (g_board[(move >> 8) & 0xFF] != 0) {
233-
$(guiTable[endY * 8 + endX]).empty();
234-
}
235-
guiTable[endY * 8 + endX].appendChild(g_selectedPiece);
236-
}
316+
UpdateFromMove(move);
317+
318+
g_selectedPiece.style.backgroundImage = null;
319+
g_selectedPiece = null;
237320

238321
var fen = GetFen();
239322
document.getElementById("FenTextBox").value = fen;
240323

241324
setTimeout("SearchAndRedraw()", 0);
242-
243-
g_selectedPiece = null;
244325
}
245326
};
246327

@@ -249,73 +330,11 @@ function RedrawBoard() {
249330

250331
for (x = 0; x < 8; ++x) {
251332
var td = document.createElement("td");
252-
td.style.width = cellSize + "px";
253-
td.style.height = cellSize + "px";
254-
255-
var pieceY = g_playerWhite ? y : 7 - y;
256-
var piece = g_board[((pieceY + 2) * 0x10) + (g_playerWhite ? x : 7 - x) + 4];
257-
var pieceName = null;
258-
switch (piece & 0x7) {
259-
case piecePawn: pieceName = "pawn"; break;
260-
case pieceKnight: pieceName = "knight"; break;
261-
case pieceBishop: pieceName = "bishop"; break;
262-
case pieceRook: pieceName = "rook"; break;
263-
case pieceQueen: pieceName = "queen"; break;
264-
case pieceKing: pieceName = "king"; break;
265-
}
266-
if (pieceName != null) {
267-
pieceName += "_";
268-
pieceName += (piece & 0x8) ? "white" : "black";
269-
}
270-
271-
if (pieceName != null) {
272-
var img = document.createElement("div");
273-
$(img).addClass('sprite-' + pieceName);
274-
img.style.backgroundImage = "url('img/sprites.png')";
275-
img.width = cellSize;
276-
img.height = cellSize;
277-
var divimg = document.createElement("div");
278-
divimg.appendChild(img);
279-
td.appendChild(divimg);
280-
281-
$(divimg).draggable({ start: function (e, ui) {
282-
if (g_selectedPiece === null) {
283-
g_selectedPiece = this;
284-
g_startOffset = {
285-
left: e.pageX - $(table).offset().left,
286-
top: e.pageY - $(table).offset().top
287-
};
288-
} else {
289-
return g_selectedPiece == this;
290-
}
291-
}});
292-
293-
$(divimg).mousedown(function(e) {
294-
if (g_selectedPiece === null) {
295-
g_startOffset = {
296-
left: e.pageX - $(table).offset().left,
297-
top: e.pageY - $(table).offset().top
298-
};
299-
e.stopPropagation();
300-
g_selectedPiece = this;
301-
g_selectedPiece.style.backgroundImage = "url('img/transpBlue50.png')";
302-
} else if (g_selectedPiece === this) {
303-
g_selectedPiece.style.backgroundImage = null;
304-
g_selectedPiece = null;
305-
}
306-
});
307-
}
308-
309-
var bgColor = (y ^ x) & 1;
310-
if (bgColor) {
311-
td.style.backgroundColor = "#D18947";
312-
}
313-
else {
314-
td.style.backgroundColor = "#FFCE9E";
315-
}
316-
333+
td.style.width = g_cellSize + "px";
334+
td.style.height = g_cellSize + "px";
335+
td.style.backgroundColor = ((y ^ x) & 1) ? "#D18947" : "#FFCE9E";
317336
tr.appendChild(td);
318-
guiTable[y * 8 + x] = td;
337+
g_uiBoard[y * 8 + x] = td;
319338
}
320339

321340
tbody.appendChild(tr);
@@ -328,7 +347,9 @@ function RedrawBoard() {
328347
if (g_selectedPiece !== null) {
329348
dropPiece(e);
330349
}
331-
})
350+
});
351+
352+
RedrawPieces();
332353

333354
$(div).empty();
334355
div.appendChild(table);

0 commit comments

Comments
 (0)