Add pause button

Based on @tckmn's code

src-ui/css/ui.css

@@ -75,6 +75,10 @@ h2#title {
   background: linear-gradient(to bottom, #99334f, #993366);
 }
 
+.btn-warn {
+  background: yellow;
+  background: linear-gradient(to bottom, yellow, #cccc00);
+}
 .btn-warn:active {
   background: #999900;
   background: linear-gradient(to bottom, #999900, #cccc00);
@@ -216,6 +220,7 @@ div#auxeditorpanel div.childsel {
 
 /* パズル表示部 */
 div#quesboard {
+  position: relative;
   margin: 16pt auto 16pt auto;
   text-align: center;
 }
@@ -608,3 +613,57 @@ form#fileform2 {
   color: black;
   content: "+";
 }
+
+div#timertext {
+  display: inline-block;
+  padding: 2pt 0;
+}
+body.paused div#timertext {
+  animation: pulse 2s ease-in-out infinite;
+}
+body.paused div#divques {
+  filter: brightness(0);
+  opacity: 0.15;
+  pointer-events: none;
+}
+body.paused div#btnarea {
+  opacity: 0.15;
+  pointer-events: none;
+}
+button#pausebtn,
+button#resumebtn {
+  float: right;
+  margin: 0;
+}
+body.paused button#pausebtn {
+  display: none;
+}
+body:not(.paused) button#resumebtn {
+  display: none;
+}
+body:not(.paused) div#pauseoverlay {
+  display: none;
+}
+div#pauseoverlay {
+  position: absolute;
+  top: 20%;
+  left: 0;
+  right: 0;
+  text-align: center;
+  user-select: none;
+}
+div#pauseoverlay div.header {
+  color: blue;
+  font-size: 2em;
+  padding-bottom: 0.8em;
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.25;
+  }
+}

src-ui/js/ui/Timer.js

@@ -26,7 +26,7 @@
 		//---------------------------------------------------------------------------
 		init: function() {
 			this.worstACtime = 0;
-			this.timerEL = document.getElementById("timerpanel");
+			this.timerEL = document.getElementById("timertext");
 			this.showtime(0);
 		},
 		start: function() {

src-ui/js/ui/ToolArea.js

@@ -16,6 +16,8 @@ ui.toolarea = {
 			this.walkElement(getEL("usepanel"));
 			this.walkElement(getEL("checkpanel"));
 			this.walkElement(getEL("variantpanel"));
+			this.walkElement(getEL("timerpanel"));
+			this.walkElement(getEL("pauseoverlay"));
 			this.walkElement(getEL("btnarea"));
 		}
 		ui.misc.displayByPid(getEL("checkpanel"));
@@ -125,6 +127,9 @@ ui.toolarea = {
 		getEL("separator2").style.display =
 			hasTimer && ui.menuconfig.get("toolarea") ? "" : "none";
 		getEL("timerpanel").style.display = hasTimer ? "block" : "none";
+		getEL("pausedesc").innerText = ui.i18n(
+			pzpr.env.OS.mobile ? "pause.desc.mobile" : "pause.desc"
+		);
 		this.displayVariantPanel();
 
 		for (var idname in this.items) {
@@ -377,5 +382,9 @@ ui.toolarea = {
 	},
 	rejectTrial: function() {
 		ui.puzzle.rejectCurrentTrial();
+	},
+
+	togglePause: function() {
+		ui.puzzle.togglePause();
 	}
 };

src-ui/p.html

@@ -442,11 +442,19 @@ <h2 id="title2">読み込み中です...</h2>
     </div>
   </div>
   <hr class="separator" id="separator2">
-  <div id="timerpanel">経過時間：00:00</div>
+  <div id="timerpanel" style="display:none;">
+    <div id="timertext">経過時間：00:00</div>
+    <button type="button" class="btn" id="pausebtn" data-button-exec="togglePause">__pause__</button>
+    <button type="button" class="btn btn-warn" id="resumebtn" data-button-exec="togglePause">__resume__</button>
+  </div>
 </div>
 
 <div id="quesboard">
   <div id="divques"></div> <!-- Canvas用 -->
+  <div id="pauseoverlay">
+    <div class="header">__pause.header__</div>
+    <div id="pausedesc">__pause.desc__</div>
+  </div>
 </div>
 
 <div id="btnarea" class="outofboard" style="display:none;"> <!-- Buttons below board下部のボタン -->

src-ui/res/p.en.json

@@ -203,6 +203,11 @@
     "variant": "This puzzle uses variant rules",
     "time": "Time:",
     "timer.menu": "Show timer",
+    "pause": "Pause",
+    "pause.header": "Game Paused",
+    "pause.desc": "Click 'Resume' or press F4",
+    "pause.desc.mobile": "Press 'Resume' to continue",
+    "resume": "Resume",
     "check": "Check",
     "check.variant": "Check base type",
     "undo": "<-",

src-ui/res/p.ja.json

@@ -194,6 +194,8 @@
     "variant": "変種ルール",
     "time": "経過時間：",
     "timer.menu": "タイマーを表示",
+    "pause": "ポーズ",
+    "resume": "スタート",
     "check": "チェック",
     "check.variant": "本家ルールでチェック",
     "undo": "戻",

src/puzzle/KeyInput.js

@@ -221,6 +221,14 @@ pzpr.classmgr.makeCommon({
 				puzzle.opemgr.updateStarts();
 			}
 
+			if (this.keydown && c === "F4" && puzzle.playeronly) {
+				puzzle.togglePause();
+				return;
+			}
+			if (puzzle.pausetime !== null) {
+				return;
+			}
+
 			puzzle.emit("key", c);
 			if (this.cancelEvent) {
 				return;

src/puzzle/Puzzle.js

@@ -63,6 +63,7 @@
 		instancetype: "", // editpr/player/viewerのいずれか
 
 		starttime: 0,
+		pausetime: null,
 
 		canvas: null, // 描画canvas本体
 		subcanvas: null, // 補助canvas
@@ -235,7 +236,19 @@
 			this.starttime = pzpr.util.currentTime();
 		},
 		getTime: function() {
-			return pzpr.util.currentTime() - this.starttime;
+			return this.pausetime === null
+				? pzpr.util.currentTime() - this.starttime
+				: this.pausetime - this.starttime;
+		},
+		togglePause: function() {
+			if (this.pausetime === null) {
+				document.body.classList.add("paused");
+				this.pausetime = pzpr.util.currentTime();
+			} else {
+				document.body.classList.remove("paused");
+				this.starttime += pzpr.util.currentTime() - this.pausetime;
+				this.pausetime = null;
+			}
 		},
 
 		//---------------------------------------------------------------------------