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>
