From: Adrian Iain Lam <adrianiainlam@users.noreply.github.com>
Date: Sun, 1 May 2022 18:09:08 +0000 (+0100)
Subject: Add support for Fischer increment
X-Git-Url: https://adrianiainlam.tk/git/?a=commitdiff_plain;ds=inline;p=jschessclock.git

Add support for Fischer increment
---

diff --git a/index.html b/index.html
index c9f70d7..2a55cac 100644
--- a/index.html
+++ b/index.html
@@ -36,11 +36,15 @@
       <div class="timers">
         <div class="timer" id="timer-left">15:00</div>
         <div class="indicators">
-          <div id="pause">❚❚</div>
-          <div id="play">◀</div>
+          <div id="pause">⏸</div>
+          <div id="play">⏴</div>
         </div>
         <div class="timer" id="timer-right">15:00</div>
       </div>
+      <div class="increments">
+        <div class="increment" id="increment-left">+0</div>
+        <div class="increment" id="increment-right">+0</div>
+      </div>
       <h1>JSChessClock</h1>
       <div class="commands">
         <div class="cmd" onclick="setTime();">[S]et time</div>
diff --git a/script.js b/script.js
index 408046b..840b6c1 100644
--- a/script.js
+++ b/script.js
@@ -6,11 +6,18 @@ function Timer(id) {
   var time = defaultTime;
   var intervalID;
   this.isTicking = false;
+  var increment = 0;
+  var defaultIncrement = 0;
+
   var outputTime = function() {
     document.getElementById(id).innerHTML = timeToTimeStr(time);
     var flagid = "flag-" + id.split('-')[1];
     var flagelem = document.getElementById(flagid);
     flagelem.style.visibility = time <= 0 ? "visible" : "hidden";
+    var incid = "increment-" + id.split('-')[1];
+    var incelem = document.getElementById(incid);
+    incelem.innerHTML = "+" + (increment / 1000).toString();
+    incelem.style.visibility = increment > 0 ? "visible" : "hidden";
   };
 
   var startTickingUnixTime = null;
@@ -34,13 +41,20 @@ function Timer(id) {
     intervalID = setInterval(this.tick, precision);
     this.isTicking = true;
   };
-  this.stop = function() {
+  this.stop = function(toggle = false) {
     clearInterval(intervalID);
     this.isTicking = false;
+    if (toggle && this.getTime() > 0) {
+      this.setTime(this.getTime() + increment, increment, true);
+    }
   };
-  this.setTime = function(t) {
+  this.setTime = function(t, inc = 0, toggle = false) {
     time = t;
-    defaultTime = t;
+    increment = inc;
+    if (!toggle) {
+      defaultTime = t;
+      defaultIncrement = inc;
+    }
     outputTime();
   };
   this.getTime = function() {
@@ -50,7 +64,7 @@ function Timer(id) {
     if(this.isTicking) {
       this.stop();
     }
-    this.setTime(defaultTime);
+    this.setTime(defaultTime, defaultIncrement);
   };
   this.getDefaultTime = function() {
     return defaultTime;
@@ -68,7 +82,7 @@ var currentTimers = new (function() {
     this.passive   = this.active;
     this.active    = tmp;
     var icon       = document.getElementById("play");
-    icon.innerHTML = (icon.innerHTML == "◀" ? "▶" : "◀");
+    icon.innerHTML = (icon.innerHTML == "⏴" ? "⏵" : "⏴");
   };
   this.pause = function() {
     this.active.stop();
@@ -127,7 +141,7 @@ document.onkeydown = function(e) {
 
 function toggle() {
   if(!currentTimers.isPaused) {
-    currentTimers.active.stop();
+    currentTimers.active.stop(true);
     currentTimers.passive.start();
   }
   currentTimers.swap();
@@ -180,23 +194,38 @@ function pauseResume() {
 function setTime() {
   var leftstart, rightstart;
   var def = timeToTimeStr(currentTimers.leftTimer.getDefaultTime());
-  var regex = /[0-9][0-9]:[0-5][0-9]/;
+  var regex = /[0-9][0-9]:[0-5][0-9](\+[0-9]+)?/;
 
-  leftstart = prompt("Time for LEFT player in MM:SS", def);
+  leftstart = prompt("Time for LEFT player in MM:SS or MM:SS+S", def);
   if(leftstart === null) return; // Cancel
   while(!leftstart.match(regex)) {
-    leftstart = prompt("Invalid value\nTime for LEFT player in MM:SS", def);
+    leftstart = prompt("Invalid value\nTime for LEFT player in MM:SS or MM:SS+S", def);
     if(leftstart === null) return; // Cancel
   }
   def = leftstart;
-  rightstart = prompt("Time for RIGHT player in MM:SS", def);
+  rightstart = prompt("Time for RIGHT player in MM:SS or MM:SS+S", def);
   if(rightstart === null) return; // Cancel
   while(!rightstart.match(regex)) {
-    rightstart = prompt("Invalid value\nTime for RIGHT player in MM:SS", def);
+    rightstart = prompt("Invalid value\nTime for RIGHT player in MM:SS or MM:SS+S", def);
     if(rightstart === null) return; // Cancel
   }
-  currentTimers.leftTimer.setTime(timeStrToTime(leftstart));
-  currentTimers.rightTimer.setTime(timeStrToTime(rightstart));
+
+  if(leftstart.indexOf('+') > 0) {
+    var baseTime = leftstart.split('+')[0];
+    var inc = leftstart.split('+')[1];
+    currentTimers.leftTimer.setTime(timeStrToTime(baseTime), parseInt(inc) * 1000);
+  }
+  else {
+    currentTimers.leftTimer.setTime(timeStrToTime(leftstart));
+  }
+  if(rightstart.indexOf('+') > 0) {
+    var baseTime = rightstart.split('+')[0];
+    var inc = rightstart.split('+')[1];
+    currentTimers.rightTimer.setTime(timeStrToTime(baseTime), parseInt(inc) * 1000);
+  }
+  else {
+    currentTimers.rightTimer.setTime(timeStrToTime(leftstart));
+  }
 }
 
 function reset() {
diff --git a/style.css b/style.css
index 1efc149..32f92df 100644
--- a/style.css
+++ b/style.css
@@ -65,9 +65,41 @@ h1 {
   font-size: 48pt;
 }
 
+.increments {
+  width: 650px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  /*margin-bottom: 96pt;*/
+  position: absolute;
+  top: 50%;
+  z-index: 9999;
+  left: 0;
+  right: 0;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.increment {
+  width: 300pt;
+  font-size: 12pt;
+  text-align: right;
+}
+
+#increment-left {
+  margin-right: 48pt;
+  visibility: hidden;
+}
+
+#increment-right {
+  margin-right: 32pt;
+  visibility: hidden;
+}
+
 .indicators {
   width: 20pt;
   font-size: 20pt;
+  transform: scaleX(2);
 }
 
 .commands {