projects
/
jschessclock.git
/ blobdiff
commit
grep
author
committer
pickaxe
?
search:
re
summary
|
shortlog
|
log
|
commit
|
commitdiff
|
tree
raw
|
inline
| side by side
More accurate timing; styling fixes
[jschessclock.git]
/
script.js
diff --git
a/script.js
b/script.js
index
3e524f4
..
408046b
100644
(file)
--- a/
script.js
+++ b/
script.js
@@
-12,10
+12,16
@@
function Timer(id) {
var flagelem = document.getElementById(flagid);
flagelem.style.visibility = time <= 0 ? "visible" : "hidden";
};
var flagelem = document.getElementById(flagid);
flagelem.style.visibility = time <= 0 ? "visible" : "hidden";
};
+
+ var startTickingUnixTime = null;
+ var remainingTimeAtTickingStart = null;
+
var thisTimer = this; // workaround to use this in setInterval
this.tick = function() {
var thisTimer = this; // workaround to use this in setInterval
this.tick = function() {
- time -= (precision <= time ? precision : time);
+ var currentPassedTime = new Date() - startTickingUnixTime;
+ time = remainingTimeAtTickingStart - currentPassedTime;
if(time <= 0) {
if(time <= 0) {
+ time = 0;
// time's up
clearInterval(intervalID);
thisTimer.isTicking = false;
// time's up
clearInterval(intervalID);
thisTimer.isTicking = false;
@@
-23,6
+29,8
@@
function Timer(id) {
outputTime();
};
this.start = function() {
outputTime();
};
this.start = function() {
+ startTickingUnixTime = new Date();
+ remainingTimeAtTickingStart = time;
intervalID = setInterval(this.tick, precision);
this.isTicking = true;
};
intervalID = setInterval(this.tick, precision);
this.isTicking = true;
};
@@
-130,7
+138,7
@@
function toggle() {
var rbt = document.getElementById('right-button-top');
var rbt_d = rbt.getAttribute('d').split(' ');
var rbb = document.getElementById('right-button-body');
var rbt = document.getElementById('right-button-top');
var rbt_d = rbt.getAttribute('d').split(' ');
var rbb = document.getElementById('right-button-body');
-
+
var y_diff = 50 * (leftIsLong ? 1 : -1);
var classes = ['button-short', 'button-long'];
var y_diff = 50 * (leftIsLong ? 1 : -1);
var classes = ['button-short', 'button-long'];
@@
-150,7
+158,7
@@
function toggle() {
rbb.setAttribute('class', classes[(leftIsLong + 1) % 2]);
lbt.setAttribute('d', lbt_d.join(' '));
rbt.setAttribute('d', rbt_d.join(' '));
rbb.setAttribute('class', classes[(leftIsLong + 1) % 2]);
lbt.setAttribute('d', lbt_d.join(' '));
rbt.setAttribute('d', rbt_d.join(' '));
-
+
lbt.setAttribute('onclick', leftIsLong ? '' : 'toggle()');
lbb.setAttribute('onclick', leftIsLong ? '' : 'toggle()');
lbt.setAttribute('cursor', leftIsLong ? 'default' : 'pointer');
lbt.setAttribute('onclick', leftIsLong ? '' : 'toggle()');
lbb.setAttribute('onclick', leftIsLong ? '' : 'toggle()');
lbt.setAttribute('cursor', leftIsLong ? 'default' : 'pointer');
@@
-173,7
+181,7
@@
function setTime() {
var leftstart, rightstart;
var def = timeToTimeStr(currentTimers.leftTimer.getDefaultTime());
var regex = /[0-9][0-9]:[0-5][0-9]/;
var leftstart, rightstart;
var def = timeToTimeStr(currentTimers.leftTimer.getDefaultTime());
var regex = /[0-9][0-9]:[0-5][0-9]/;
-
+
leftstart = prompt("Time for LEFT player in MM:SS", def);
if(leftstart === null) return; // Cancel
while(!leftstart.match(regex)) {
leftstart = prompt("Time for LEFT player in MM:SS", def);
if(leftstart === null) return; // Cancel
while(!leftstart.match(regex)) {
@@
-199,7
+207,7
@@
function reset() {
function init() {
insertcss();
function init() {
insertcss();
- setTimeout(fitscreen,
5
); // hack to allow DOM to be redrawn with new css
+ setTimeout(fitscreen,
2000
); // hack to allow DOM to be redrawn with new css
}
function fitscreen() {
}
function fitscreen() {
@@
-208,19
+216,14
@@
function fitscreen() {
*/
var heightRatio = window.innerHeight / document.body.scrollHeight;
var widthRatio = window.innerWidth / document.body.scrollWidth;
*/
var heightRatio = window.innerHeight / document.body.scrollHeight;
var widthRatio = window.innerWidth / document.body.scrollWidth;
- var scaleRatio = Math.min(heightRatio, widthRatio);
+ var scaleRatio = Math.min(heightRatio, widthRatio
, 1
);
document.body.style.transform = 'scale(' + scaleRatio + ')';
}
function insertcss() {
/* fix positions for browsers that don't support flex */
document.body.style.transform = 'scale(' + scaleRatio + ')';
}
function insertcss() {
/* fix positions for browsers that don't support flex */
- var cssfile = document.createElement("link");
- cssfile.setAttribute("rel", "stylesheet");
- cssfile.setAttribute("type", "text/css");
- if('align-items' in document.body.style) {
- cssfile.setAttribute("href", "style.css");
- } else {
+ var cssfile = document.getElementById("style");
+ if(!('align-items' in document.body.style)) {
cssfile.setAttribute("href", "noflex.css");
}
cssfile.setAttribute("href", "noflex.css");
}
- document.head.appendChild(cssfile);
}
}