Discussion of anything and everything relating to chess playing software and machines.
Moderators: hgm , Rebel , chrisw
GONeill
Posts: 87Joined: Sun Jun 15, 2014 6:40 amLocation: New ZealandFull name: Graham O'Neill
Post by GONeill Thu Oct 13, 2016 3:07 am
That's much better, thanks! I hadn't realised there was a Webcam.loaded value.
I've made a few more changes, such as showing the colours in red and playing a sound when time is up. And a personal preference for me was that any key should swap the clocks rather than dividing the keyboard in two, so I changed the KeyHit function (as well as tidying it up slightly for editing the time). I also preferred to have a button for taking back moves.
Code: Select all
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Chess Clock</title>
<style type="text/css">
body { font-family: Helvetica, sans-serif; }
h2, h3 { margin-top:0; }
form { margin-top: 15px; }
form > input { margin-right: 15px; }
</style>
</head>
<body>
<div align="center">
<table cellpadding="10"><tr><td>
<h2>Life image:</h2>
<div id="my_camera"></div>
</td><td valign="top">
<h1>Webcam Chess Clock</h1>
<p><b>Start times, in seconds:</b></p>
<ul>
<li>Sudden death: basetime, e.g. 600</li>
<li>Fischer: basetime+inc, e.g. 120+10</li>
<li>Bronstein: basetime-deadtime, e.g. 300-10</li>
<li>Classical: basetime/moves, e.g. 300/40</li>
</ul>
<p>Space bar stops the clocks.</p>
</td><td>
<div id="results"><div style="border:1px;background:#cccccc;padding:20px;">Your captured image will appear here...</div></div>
</td></tr></table>
<!-- First, include the Webcam.js JavaScript Library -->
<script type="text/javascript" src="./webcam2.js"></script>
<!-- Configure a few settings and attach camera -->
<script language="JavaScript">
// =======================================
var FLIP = false;
var LNAME = 'White';
var RNAME = 'Black';
var snd = new Audio("TimeUp.wav");
// =======================================
Webcam.set({
width: 320,
height: 240,
crop_height: 150,
crop_width: 320,
flip_horiz: FLIP,
image_format: 'jpeg',
jpeg_quality: 90
});
Webcam.attach( '#my_camera' );
</script>
<!-- A button for taking snaps -->
<form>
<input type=button value="Take Snapshot" onClick="take_snapshot()">
Start time: <input type=text value="3600" id="starttime">
<input type=button value="Reset Clocks" onClick="SetClock()">
<input type=button value="Swap Players" onClick="Swap()">
<input type=button value="Take Back" onClick="AdjustCount()">
<input type=button value="<<" onClick="GoTo(0)">
<input type=button value="<" onClick="GoTo(-1)">
<input type=button value=">" onClick="GoTo(1)">
<input type=button value=">>" onClick="GoTo(9999)">
</form>
<p id="key" style="background:#8080FF;"></p>
<table cellpadding="10" border="1"><tr>
<td id="player1" style="font-size:75px;" align="center">
<script>document.write(LNAME);</script></td>
<td id="movenr" style="font-size:75px;" align="center" width="15%">0</td>
<td id="player2" style="font-size:75px; "align="center">
<script>document.write(RNAME);</script></td>
</tr><tr>
<td id="clock1" style="font-size:150px;" align="right" width="50%" colspan="2"></td>
<td id="clock2" style="font-size:150px;" align="right" width="50%"></td>
</tr></table>
</div>
<!-- Code to handle taking the snapshot and displaying it locally -->
<script language="JavaScript">
var images = new Array();
var nrOfImages = 0;
var times = new Array();
var active = 0, ticks = 0;
var deadTime = 0, session = 0, nr = 0;
var current = 0;
times[1] = times[2] = 36000;
times[3] = times[4] = times[5] = times[6] = times[9] = 0;
DisplayTime(1, times[1]);
DisplayTime(2, times[2]);
window.addEventListener("keydown", KeyHit, false);
var timer = setTimeout("Clock();", 100);
function Display(n) {
document.getElementById('results').innerHTML =
'<h2>Captured image ' + n + ':</h2>' +
'<img src="'+images[n]+'"/>';
}
function take_snapshot() {
if(Webcam.loaded) {
// take snapshot and get image data
Webcam.snap( function(data_uri) {
// display results in page
document.getElementById('results').innerHTML =
'<h2>Captured image:</h2>' +
'<img src="'+data_uri+'"/>';
current = nrOfImages;
images[nrOfImages++] = data_uri; // save the snapshot
} );
}
}
function SecToTime(t) {
var s = 0; if(t<0) { s = 1; t = -t; }
t = (t - t%10)/10;
var sec = t % 60; t = (t - sec)/60; if(sec < 10) sec = '0' + sec;
var min = t % 60; t = (t - min)/60; if(min < 10) min = '0' + min;
return s ? '-' + min + ':' + sec : t + ':' + min + ':' + sec;
}
function DisplayTime(n, t) {
if(t < 0) document.getElementById("clock" + n).style.background = "red";
if(t == -1) snd.play();
document.getElementById("clock" + n).innerHTML = SecToTime(t);
}
function Clock() {
if(active) {
if(--deadTime < 0) times[active]--;
if((times[active]+1)%10 == 0) DisplayTime(active, times[active]);
}
ticks++; timer = setTimeout("Clock();", 100);
}
var lastActive = 0;
function Switch(side) {
if(side == active) return;
if(active) {
if(times[active] < 0) document.getElementById("clock" + active).style.color = "red"; else
document.getElementById("clock" + active).style.color = "black";
document.getElementById("clock" + active).style.background = "white";
if(Webcam.loaded) take_snapshot(); else
document.getElementById("results").innerHTML =
'<div style="background:#FF0000;border:1px;padding:20px">Webcam not available</div>';
}
active = side;
if(active) {
if(active != lastActive) {
session--; document.getElementById("movenr").innerHTML = 1 + ++nr >> 1;
times[active] += times[active+2]; // Fischer increment
}
if(session == 0) { session = times[9]; times[1] += times[7]; times[2] += times[8]; }
lastActive = active;
document.getElementById("clock" + active).style.color = "white";
document.getElementById("clock" + active).style.background = "black";
deadTime = times[active+4]; // Bronstein delay
DisplayTime(active, times[active]);
}
}
var digit = '1234567890-+/';
var lastKey = 0;
function KeyHit(ev) {
var c = ev.key;
if(!active) {
// for typing start time
if(digit.search(c) >= 0 || c == 'Shift' || c == 'Backspace' || c == 'Delete' || c == 'ArrowLeft' || c == 'ArrowRight') return;
if(c == 'Enter') {
SetClock();
ev.preventDefault();
return;
}
}
lastKey = ticks;
if(c == ' ') Switch(0); else
if(active <= 1) Switch(2); else
if(active == 2) Switch(1);
ev.preventDefault();
}
function GoTo(n) {
if(Webcam.loaded) {
if(!n) current = n; else if(n == 9999) current = nrOfImages - 1; else current += n;
if(current < 0) current = 0; else if (current >= nrOfImages) current = nrOfImages - 1;
Display(current);
}
}
function SetClock() {
var newTime = document.getElementById("starttime").value;
if(active || ticks - lastKey < 2) return;
times[1] = times[2] = times[7] = times[8] = 10*parseInt(newTime);
times[3] = times[4] = times[5] = times[6] = 0; times[9] = -1;
var s = newTime.split('+');
if(s.length > 1) times[3] = times[4] = 10*parseInt(s[1]);
s = newTime.split('-');
if(s.length > 1) times[5] = times[6] = 10*parseInt(s[1]);
s = newTime.split('/');
if(s.length > 1) times[9] = 2*parseInt(s[1]);
nrOfImages = current = nr = 0;
session = times[9] + 1;
document.getElementById("clock" + 1).style.color = "black";
document.getElementById("clock" + 2).style.color = "black";
DisplayTime(1, times[1]); DisplayTime(2, times[2]);
times[1] -= times[3]; times[2] -= times[4];
document.getElementById("movenr").innerHTML = 1;
}
function Swap() {
var h = times[1]; times[1] = times[2]; times[2] = h;
var side = active; Switch(0);
h = document.getElementById("player1").innerHTML;
document.getElementById("player1").innerHTML = document.getElementById("player2").innerHTML;
document.getElementById("player2").innerHTML = h;
DisplayTime(1, times[1]); DisplayTime(2, times[2]);
if(side) { lastActive = 3 -side; Switch(3 - side); } else Switch(side);
}
function AdjustCount() {
if(nr < 2) return;
nr -= 2; session += 2;
document.getElementById("movenr").innerHTML = 1 + nr >> 1;
}
</script>
</body>
</html>
hgm
Posts: 27836Joined: Fri Mar 10, 2006 10:06 amLocation: AmsterdamFull name: H G Muller
Post by hgm Thu Oct 13, 2016 1:22 pm
What still is a bit annoying to me in Bronstein TC mode is that during the dead time there is no feedback at all howmuch time you still have left before the clock starts running down. I am not sure how this could be solved. I can display times[active] + deadTime whenever the latter is > 0. But then an upredictable amount of time will disappear from your clock when you press it while still in dead time.
Jesse Gersenson
Posts: 593Joined: Sat Aug 20, 2011 9:43 am
Post by Jesse Gersenson Thu Oct 13, 2016 11:34 pm
Add a count-down timer and make it 40-60% the size of the main clock.
GONeill
Posts: 87Joined: Sun Jun 15, 2014 6:40 amLocation: New ZealandFull name: Graham O'Neill
Post by GONeill Sat Oct 15, 2016 7:14 am
I wasn't keen on the colour change idea as it causes problems for the colour blind, and the problem with adding another clock is the amount of screen space used (especially if your laptop has a small display). So how about this version? I've added a progress bar type display for the countdown.
In Firefox pressing the spacebar after clicking on a button repeated that button's action so I've added focus() calls to prevent this. And I also found there were problems with the clocks and move counter if sides were swapped so I think I've fixed that too.
Code: Select all
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Chess Clock</title>
<style type="text/css">
body { font-family: Helvetica, sans-serif; }
table {position: relative;}
h2, h3 { margin-top:0; }
form { margin-top: 15px; }
form > input { margin-right: 15px; }
#bronbar {position:absolute; padding:0px; height:6px; bottom:3px; width:0px;}
</style>
</head>
<body>
<div align="center">
<table cellpadding="10"><tr><td>
<h2>Live image:</h2>
<div id="my_camera"></div>
</td><td valign="top">
<h1>Webcam Chess Clock</h1>
<p><b>Start times, in seconds:</b></p>
<ul>
<li>Sudden death: basetime, e.g. 600</li>
<li>Fischer: basetime+inc, e.g. 120+10</li>
<li>Bronstein: basetime-deadtime, e.g. 300-10</li>
<li>Classical: basetime/moves, e.g. 300/40</li>
</ul>
<p>Space bar stops the clocks.</p>
</td><td>
<div id="results"><div style="border:1px;background:#cccccc;padding:20px;">Your captured image will appear here...</div></div>
</td></tr></table>
<!-- First, include the Webcam.js JavaScript Library -->
<script type="text/javascript" src="./webcam2.js"></script>
<!-- Configure a few settings and attach camera -->
<script language="JavaScript">
// =======================================
var FLIP = false;
var LNAME = 'White';
var RNAME = 'Black';
var COLTIME = 'red'; // or 'black';
var COLBRON = 'green'; // or 'black';
var SNDFILE = new Audio("TimeUp.wav"); // or 'none';
// =======================================
Webcam.set({
width: 320,
height: 240,
crop_height: 150,
crop_width: 320,
flip_horiz: FLIP,
image_format: 'jpeg',
jpeg_quality: 90
});
Webcam.attach( '#my_camera' );
</script>
<!-- A button for taking snaps -->
<form>
<input type=button value="Take Snapshot" onClick="take_snapshot()">
Start time: <input type=text value="3600" id="starttime">
<input type=button value="Reset Clocks" onClick="SetClock()">
<input type=button value="Swap Players" onClick="Swap()">
<input type=button value="Take Back" onClick="AdjustCount()">
<input type=button value="<<" onClick="GoTo(0)">
<input type=button value="<" onClick="GoTo(-1)">
<input type=button value=">" onClick="GoTo(1)">
<input type=button value=">>" onClick="GoTo(9999)">
</form>
<p id="key" style="background:#8080FF;"></p>
<table cellpadding="10" border="1"><tr>
<td id="player1" style="font-size:75px;" align="center"></td>
<td id="movenr" style="font-size:75px;" align="center" width="15%">0</td>
<td id="player2" style="font-size:75px; "align="center"></td>
</tr><tr>
<td id="clock1" style="font-size:150px;" align="right" width="50%" colspan="2"></td>
<td id="clock2" style="font-size:150px;" align="right" width="50%"></td>
</tr><tr id="bronstein" style="height:7px; display:none;">
<td style="padding:0px;" colspan="3"><div id="bronbar"></div></td>
</tr></table>
</div>
<!-- Code to handle taking the snapshot and displaying it locally -->
<script language="JavaScript">
document.getElementById('player1').innerHTML = LNAME;
document.getElementById('player2').innerHTML = RNAME;
var images = new Array();
var nrOfImages = 0;
var times = new Array();
var active = 0, ticks = 0;
var deadTime = 0, session = 0, nr = 0;
var current = 0;
times[1] = times[2] = 36000;
times[3] = times[4] = times[5] = times[6] = times[9] = 0;
DisplayTime(1, times[1]);
DisplayTime(2, times[2]);
window.addEventListener("keydown", KeyHit, false);
var timer = setTimeout("Clock();", 100);
function Display(n) {
document.getElementById('results').innerHTML =
'<h2>Captured image ' + n + ':</h2>' +
'<img src="'+images[n]+'"/>';
}
function cursor_pos() {
document.getElementById('starttime').focus();
}
function take_snapshot() {
if(Webcam.loaded) {
// take snapshot and get image data
Webcam.snap( function(data_uri) {
// display results in page
document.getElementById('results').innerHTML =
'<h2>Captured image:</h2>' +
'<img src="'+data_uri+'"/>';
current = nrOfImages;
images[nrOfImages++] = data_uri; // save the snapshot
} );
}
cursor_pos();
}
function SecToTime(t) {
var s = 0; if(t<0) { s = 1; t = -t; }
t = (t - t%10)/10;
var sec = t % 60; t = (t - sec)/60; if(sec < 10) sec = '0' + sec;
var min = t % 60; t = (t - min)/60; if(min < 10) min = '0' + min;
return s ? '-' + min + ':' + sec : t + ':' + min + ':' + sec;
}
function DisplayTime(n, t) {
if(active) {
if(t < 0) document.getElementById("clock" + n).style.background = COLTIME;
if(t == -1 && SNDFILE !== 'none') SNDFILE.play();
}
document.getElementById("clock" + n).innerHTML = SecToTime(t);
}
function Clock() {
if(active) {
if(--deadTime < 0) times[active]--; else
document.getElementById('bronbar').style.width = (deadTime*99/times[active+4])+'%';
if((times[active]+1)%10 == 0) DisplayTime(active, times[active]);
}
ticks++; timer = setTimeout("Clock();", 100);
}
var lastActive = 0;
function Switch(side) {
if(side == active) return;
if(active) {
if(times[active] < 0) document.getElementById("clock" + active).style.color = COLTIME;
else document.getElementById("clock" + active).style.color = "black";
document.getElementById("clock" + active).style.background = "white";
if(Webcam.loaded) take_snapshot(); else
document.getElementById("results").innerHTML =
'<div style="background:#FF0000;border:1px;padding:20px">Webcam not available</div>';
}
active = side;
if(active) {
if(active != lastActive) {
session--;
document.getElementById("movenr").innerHTML = 1 + ++nr >> 1;
times[active] += times[active+2]; // Fischer increment
}
if(session == 0) { session = times[9]; times[1] += times[7]; times[2] += times[8]; }
lastActive = active;
document.getElementById("clock" + active).style.color = "white";
document.getElementById("clock" + active).style.background = "black";
deadTime = times[active+4]; // Bronstein delay
DisplayTime(active, times[active]);
}
}
var digit = '1234567890-+/';
var lastKey = 0;
function KeyHit(ev) {
var c = ev.key;
if(!active) {
// for typing start time
if(digit.search(c) >= 0 || c == 'Shift' || c == 'Home' || c == 'End' || c == 'Backspace' || c == 'Delete' || c == 'ArrowLeft' || c == 'ArrowRight') return;
if(c == 'Enter') {
SetClock();
ev.preventDefault();
return;
}
}
lastKey = ticks;
if(c == ' ') Switch(0); else
if(active == 0 && lastActive > 0) Switch(lastActive); else
if(active <= 1) Switch(2); else
if(active == 2) Switch(1);
ev.preventDefault();
}
function GoTo(n) {
if(Webcam.loaded) {
if(!n) current = n; else if(n == 9999) current = nrOfImages - 1; else current += n;
if(current < 0) current = 0; else if (current >= nrOfImages) current = nrOfImages - 1;
Display(current);
}
cursor_pos();
}
function SetClock() {
if(active || ticks - lastKey < 2) return;
var newTime = document.getElementById("starttime").value;
times[1] = times[2] = times[7] = times[8] = 10*parseInt(newTime);
times[3] = times[4] = times[5] = times[6] = 0;
times[9] = -1;
var s = newTime.split('+');
if(s.length > 1) times[3] = times[4] = 10*parseInt(s[1]);
s = newTime.split('-');
if(s.length > 1) {
times[5] = times[6] = 10*parseInt(s[1]);
document.getElementById('bronstein').style.display = 'table-row';
document.getElementById('bronbar').style.width = '0px';
document.getElementById('bronbar').style.background = COLBRON;
} else
document.getElementById('bronstein').style.display = 'none';
s = newTime.split('/');
if(s.length > 1) times[9] = 2*parseInt(s[1]);
nrOfImages = current = nr = 0;
session = times[9] + 1;
document.getElementById("clock" + 1).style.color = "black";
document.getElementById("clock" + 2).style.color = "black";
DisplayTime(1, times[1]); DisplayTime(2, times[2]);
times[1] -= times[3]; times[2] -= times[4];
document.getElementById("movenr").innerHTML = 0;
lastActive = 0;
cursor_pos();
}
function Swap() {
var h, ob1, ob2, side;
h = times[1]; times[1] = times[2]; times[2] = h;
side = active; Switch(0);
ob1 = document.getElementById('player1'); ob2 = document.getElementById('player2');
h = ob1.innerHTML; ob1.innerHTML = ob2.innerHTML; ob2.innerHTML = h;
ob1 = document.getElementById('clock1'); ob2 = document.getElementById('clock2');
h = ob1.style.color; ob1.style.color = ob2.style.color; ob2.style.color = h;
h = ob1.style.background; ob1.style.background = ob2.style.background; ob2.style.background = h;
DisplayTime(1, times[1]); DisplayTime(2, times[2]);
if(side) {
lastActive = 3 - side;
Switch(3 - side);
} else {
if(lastActive == 1) lastActive=2; else
if(lastActive == 2) lastActive=1;
Switch(side);
}
cursor_pos();
}
function AdjustCount() {
if(nr < 2) return;
nr -= 2; session += 2;
document.getElementById("movenr").innerHTML = 1 + nr >> 1;
cursor_pos();
}
</script>
</body>
</html>
Henk
Posts: 7221Joined: Mon May 27, 2013 10:31 am
Post by Henk Sat Oct 15, 2016 11:06 am
I wonder what they did two hundred years ago when there were no chess clocks and players were thinking too long. Did they get a warning ?
GONeill
Posts: 87Joined: Sun Jun 15, 2014 6:40 amLocation: New ZealandFull name: Graham O'Neill
Post by GONeill Thu Oct 20, 2016 8:15 am
I had another look and did some tidying up. Also it now starts the clock for White first.
I'm not planning on doing any more on this now!
clock.html
Code: Select all
<!doctype html>
<html lang="en">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Chess Clock</title>
<style type="text/css">
body { font-family: Helvetica, sans-serif; }
table {position: relative;}
h2, h3 { margin-top:0; }
form { margin-top: 15px; }
form > input { margin-right: 15px; }
#bronbar {position:absolute; padding:0px; height:10px; bottom:4px; width:0px;}
</style>
</head>
<body>
<div align="center">
<table cellpadding="10">
<tr>
<td>
<h2>Live image:</h2>
<div id="my_camera"></div>
</td>
<td valign="top">
<h1>Webcam Chess Clock</h1>
<p><b>Start times, in seconds:</b></p>
<ul>
<li>Sudden death: basetime, e.g. 600</li>
<li>Fischer: basetime+inc, e.g. 120+10</li>
<li>Bronstein: basetime-deadtime, e.g. 300-10</li>
<li>Classical: basetime/moves, e.g. 300/40</li>
</ul>
<p>Space bar stops the clocks.</p>
</td>
<td>
<div id="results">
<div style="border:1px;background:#cccccc;padding:20px;">Your
captured image will appear here...</div>
</div>
</td>
</tr>
</table>
<!-- First, include the Webcam.js JavaScript Library -->
<script src="./webcam2.js" type="text/javascript"></script>
<!-- Configure a few settings and attach camera -->
<script language="JavaScript">
// =======================================
var FLIP = false; // or true;
var LNAME = 'White';
var RNAME = 'Black';
var COLTIME = 'red'; // or 'black';
var COLBRON = 'green'; // or 'black';
var SNDFILE = new Audio("TimeUp.wav"); // or 'none';
// =======================================
Webcam.set({
width: 320,
height: 240,
crop_width: 320,
crop_height: 0,
flip_horiz: FLIP,
image_format: 'jpeg',
jpeg_quality: 90
});
Webcam.attach( '#my_camera' );
</script>
<form>
<input type=button value="Take Snapshot" onClick="TakeSnapshot()">
Start time:
<input type=text value="3600" id="starttime">
<input type=button value="Reset Clocks" onClick="SetClock()">
<input type=button value="Swap Players" onClick="Swap()">
<input type=button value="Take Back" onClick="AdjustCount()">
<input type=button value="<<" onClick="GoTo(0)">
<input type=button value="<" onClick="GoTo(-1)">
<input type=button value=">" onClick="GoTo(1)">
<input type=button value=">>" onClick="GoTo(9999)">
</form>
<p id="key" style="background:#8080FF;"></p>
<table border="1" cellpadding="10">
<tr>
<td id="player1" align="center" style="font-size:75px;"></td>
<td id="movDisplay" align="center" style="font-size:75px;" width="15%">0</td>
<td id="player2" align="center" style="font-size:75px;"></td>
</tr>
<tr>
<td id="clock1" align="right" colspan="2" style="font-size:150px;" width="50%"></td>
<td id="clock2" align="right" style="font-size:150px;" width="50%"></td>
</tr>
<tr id="bronstein" style="height:11px; display:none;">
<td colspan="3" style="padding:0px;">
<div id="bronbar"></div>
</td>
</tr>
</table>
</div>
<script language="JavaScript">
var active = 0, lastActive = 0, white = 1;
var movSession = 0, movCount = 0;
var deadTime = 0, ticks = 0, lastKey = 0;
var images = new Array();
var nrOfImages = 0, currImage = 0;
var times = new Array();
times[1] = times[2] = 36000; // Clocks
times[3] = times[4] = 0; // Fischer allowances
times[5] = times[6] = 0; // Bronstein allowances
times[7] = 0; // Saved basetime for basetime/moves
times[8] = 0; // Saved moves for basetime/moves
document.getElementById('player1').innerHTML = LNAME;
document.getElementById('player2').innerHTML = RNAME;
DisplayTime(1);
DisplayTime(2);
window.addEventListener("keydown", KeyHit, false);
var timer = setTimeout("Clock();", 100);
function cursor_pos() {
document.getElementById('starttime').focus();
}
<!--------------- WebCam functions --------------->
function GoTo(n) {
if(Webcam.loaded && nrOfImages > 0) {
if(n==0) currImage=1;
else if(n==9999) currImage=nrOfImages;
else {
currImage += n;
if(currImage < 1) currImage = 1; else if(currImage > nrOfImages) currImage = nrOfImages;
}
document.getElementById('results').innerHTML =
'<h2>Captured image ' + currImage + ':</h2>' +
'<img src="'+images[currImage]+'"/>';
}
cursor_pos();
}
function TakeSnapshot() {
if(Webcam.loaded) {
// take snapshot and get image data
Webcam.snap( function(data_uri) {
// display results in page
document.getElementById('results').innerHTML =
'<h2>Captured image:</h2>' +
'<img src="'+data_uri+'"/>';
currImage = ++nrOfImages;
images[nrOfImages] = data_uri; // save the snapshot
} );
}
cursor_pos();
}
<!--------------- System timer functions --------------->
function Clock() {
if(active) {
if(--deadTime < 0) times[active]--; else
document.getElementById('bronbar').style.width = (deadTime*99/times[active+4])+'%';
if((times[active]+1)%10 == 0) DisplayTime(active);
}
ticks++; timer = setTimeout("Clock();", 100);
}
function KeyHit(ev) {
var c = ev.key;
var digit = '1234567890-+/';
if(!active) {
// for typing start time
if(digit.search(c) >= 0 || c == 'Shift' || c == 'Home' || c == 'End' || c == 'Backspace' || c == 'Delete' || c == 'ArrowLeft' || c == 'ArrowRight') return;
if(c == 'Enter') {
SetClock();
ev.preventDefault();
return;
}
}
lastKey = ticks;
if(c == ' ') {
SetPlayer(0);
} else if(!active) {
if(lastActive) SetPlayer(lastActive); else SetPlayer(white);
} else
SetPlayer(3 - active);
ev.preventDefault();
}
<!--------------- Chess clock functions --------------->
function SecToTime(t) {
var s = 0; if(t<0) { s = 1; t = -t; }
t = (t - t%10)/10;
var sec = t % 60; t = (t - sec)/60; if(sec < 10) sec = '0' + sec;
var min = t % 60; t = (t - min)/60; if(min < 10) min = '0' + min;
return s ? '-' + min + ':' + sec : t + ':' + min + ':' + sec;
}
function DisplayTime(n) {
if(active) {
if(times[n] < 0) document.getElementById("clock" + n).style.background = COLTIME;
else document.getElementById("clock" + n).style.background = "black";
if(times[n] == -1 && SNDFILE !== 'none') SNDFILE.play();
}
document.getElementById("clock" + n).innerHTML = SecToTime(times[n]);
}
function SetPlayer(n) {
if(n == active) return;
if(active) {
if(times[active] < 0) document.getElementById("clock" + active).style.color = COLTIME;
else document.getElementById("clock" + active).style.color = "black";
document.getElementById("clock" + active).style.background = "white";
if(n) {
if(Webcam.loaded) TakeSnapshot();
else document.getElementById("results").innerHTML =
'<div style="background:#FF0000;border:1px;padding:20px">Webcam not available</div>';
if(active==white) document.getElementById("movDisplay").innerHTML = ++movCount;
}
}
active = n;
if(active) {
if(active != lastActive) {
movSession--;
times[active] += times[active+2]; // Fischer increment
deadTime = times[active+4]; // Bronstein delay
}
if(movSession == 0) {
movSession = times[8];
if(times[7]) {
times[1] += times[7];
times[2] += times[7];
document.getElementById("clock" + 1).innerHTML = SecToTime(times[1]);
document.getElementById("clock" + 2).innerHTML = SecToTime(times[2]);
}
}
lastActive = active;
document.getElementById("clock" + active).style.color = "white";
DisplayTime(active);
}
}
function Swap() {
var saveAct, h, ob1, ob2;
saveAct = active;
SetPlayer(0);
h = times[1]; times[1] = times[2]; times[2] = h;
ob1 = document.getElementById('player1'); ob2 = document.getElementById('player2');
h = ob1.innerHTML; ob1.innerHTML = ob2.innerHTML; ob2.innerHTML = h;
ob1 = document.getElementById('clock1'); ob2 = document.getElementById('clock2');
h = ob1.style.color; ob1.style.color = ob2.style.color; ob2.style.color = h;
h = ob1.style.background; ob1.style.background = ob2.style.background; ob2.style.background = h;
DisplayTime(1); DisplayTime(2);
white = 3 - white;
if(lastActive) lastActive = 3 - lastActive;
if(saveAct) SetPlayer(3 - saveAct);
cursor_pos();
}
function SetClock() {
if(active || ticks - lastKey < 2) return;
var newTime = document.getElementById("starttime").value;
times[1] = times[2] = times[7] = 10*parseInt(newTime);
times[3] = times[4] = times[5] = times[6] = 0;
times[8] = -1;
nrOfImages = currImage = movCount = lastActive = deadTime = 0;
var s = newTime.split('+');
if(s.length > 1) times[3] = times[4] = 10*parseInt(s[1]);
s = newTime.split('-');
if(s.length > 1) {
deadTime = times[5] = times[6] = 10*parseInt(s[1]);
document.getElementById('bronstein').style.display = 'table-row';
document.getElementById('bronbar').style.width = '0px';
document.getElementById('bronbar').style.background = COLBRON;
} else
document.getElementById('bronstein').style.display = 'none';
s = newTime.split('/');
if(s.length > 1) times[8] = 2*parseInt(s[1]);
movSession = times[8] + 1;
document.getElementById("clock" + 1).style.color = "black";
document.getElementById("clock" + 2).style.color = "black";
DisplayTime(1); DisplayTime(2);
document.getElementById("movDisplay").innerHTML = 0;
document.getElementById("results").innerHTML =
'<div style="border:1px;background:#cccccc;padding:20px;">Your captured image will appear here...</div>';
cursor_pos();
}
function AdjustCount() {
if(movCount < 2) return;
document.getElementById("movDisplay").innerHTML = --movCount;
movSession += 2;
cursor_pos();
}
</script>
</body>
</html>
