projects / jschessclock.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 72b294b)
More accurate timing; styling fixes
authorAdrian Iain Lam <adrianiainlam@users.noreply.github.com>
Sat, 11 Aug 2018 10:29:04 +0000 (18:29 +0800)
committerAdrian Iain Lam <adrianiainlam@users.noreply.github.com>
Sat, 11 Aug 2018 10:29:04 +0000 (18:29 +0800)
index.html patch | blob | blame | history
noflex.css patch | blob | blame | history
script.js patch | blob | blame | history
style.css patch | blob | blame | history

diff --git a/index.html b/index.html
index 6785a3a..c9f70d7 100644 (file)
--- a/index.html
+++ b/index.html
@@ -4,15 +4,13 @@
     <meta charset="utf-8">
     <title>JSChessClock</title>
     <script src="script.js"></script>
-    <!--<link rel="stylesheet" type="text/css" href="style.css" />-->
+    <link rel="stylesheet" type="text/css" href="style.css" id="style" />
   </head>
   <body onload="init()" onresize="fitscreen()">
-    <h1>JSChessClock</h1>
-    
     <div class="clock-container">
       <svg version="1.1" width="650" height="500"
            xmlns="http://www.w3.org/2000/svg">
-        <path id="left-button-top" class="button-long" fill="#c0c0c0" 
+        <path id="left-button-top" class="button-long" fill="#c0c0c0"
               d="M 210 70 A 140 140 0 0 0 30 70 Z" stroke="#c0c0c0"
               onclick="toggle()" cursor="pointer" />
         <rect id="left-button-body" class="button-long" x="60" y="70"
@@ -43,6 +41,7 @@
         </div>
         <div class="timer" id="timer-right">15:00</div>
       </div>
+      <h1>JSChessClock</h1>
       <div class="commands">
         <div class="cmd" onclick="setTime();">[S]et time</div>
         <div class="cmd" onclick="reset();">[R]eset to previous</div>
diff --git a/noflex.css b/noflex.css
index b57e0ea..d908267 100644 (file)
--- a/noflex.css
+++ b/noflex.css
@@ -71,7 +71,15 @@ body {
 }
 
 h1 {
+  width: 20ch;
   text-align: center;
+  position: absolute;
+  top: 70%;
+  z-index: 9999;
+  left: 0;
+  right: 0;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 .commands {
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 startTickingUnixTime = null;
+  var remainingTimeAtTickingStart = null;
+
   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) {
+      time = 0;
       // time's up
       clearInterval(intervalID);
       thisTimer.isTicking = false;
@@ -23,6 +29,8 @@ function Timer(id) {
     outputTime();
   };
   this.start = function() {
+    startTickingUnixTime = new Date();
+    remainingTimeAtTickingStart = time;
     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 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(' '));
-  
+
   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]/;
-  
+
   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();
-  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() {
@@ -208,19 +216,14 @@ function fitscreen() {
    */
   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 */
-  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");
   }
-  document.head.appendChild(cssfile);
 }
diff --git a/style.css b/style.css
index 5a8c6e6..1efc149 100644 (file)
--- a/style.css
+++ b/style.css
@@ -21,6 +21,18 @@ body {
   margin-right: auto;
 }
 
+h1 {
+  width: 20ch;
+  text-align: center;
+  position: absolute;
+  top: 70%;
+  z-index: 9999;
+  left: 0;
+  right: 0;
+  margin-left: auto;
+  margin-right: auto;
+}
+
 .flags > div {
   visibility: hidden;
   animation: blinker 1s linear infinite;
@@ -58,10 +70,6 @@ body {
   font-size: 20pt;
 }
 
-h1 {
-  text-align: center;
-}
-
 .commands {
   margin: 0 auto;
   width: 650px;
Chess clock for web browsers (desktop and mobile)