From 7c131c41f39204b6bec5db955d194ac78eca7ebc Mon Sep 17 00:00:00 2001
From: mig <michel.gutierrez@gmail.com>
Date: Thu, 6 Apr 2017 18:45:24 +0200
Subject: [PATCH] better control UI

---
 examples/browser/control.html           | 11 ++++++-----
 examples/browser/css/control-styles.css |  9 +++++++++
 examples/browser/js/control.js          | 24 ++++++++++++++++++++----
 3 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/examples/browser/control.html b/examples/browser/control.html
index b6823b9..fbd8fc4 100644
--- a/examples/browser/control.html
+++ b/examples/browser/control.html
@@ -24,21 +24,22 @@
             <div id="game-status" style="display: none;" class="box">Status</div>
 	       	<div id="mode-panel" style="display: none;" class="box">
 	       		<h3>Controls</h3>
-	       		<button id="restart">Restart game</button><br/><br/>
-	       		<button id="takeback">Take back</button><br/><br/>
+	       		<button id="restart">Restart game</button>
+	       		<button id="takeback">Take back</button>
+	       		<button id="fullscreen" style="display: none;">Full screen</button>
+                <br/><br/>
 	       		<select id="mode">
 	       			<option value="self-self">Self / Self</option>
 	       			<option value="self-comp">Self / Computer</option>
 	       			<option value="comp-self">Computer / Self</option>
 	       			<option value="comp-comp">Computer / Computer</option>
 	       		</select><br/><br/>
-	       		<label id="level-a" for="select-level-PLAYER_A">Computer(A) level<br/>
+	       		<label id="level-a" for="select-level-PLAYER_A">Computer(A) level
 	        		<select id="select-level-a"></select><br/><br/>
 	       		</label>
-	       		<label id="level-b" for="select-level-b">Computer(B) level<br/>
+	       		<label id="level-b" for="select-level-b">Computer(B) level
 	        		<select id="select-level-b"></select><br/><br/>
 	       		</label>
-	       		<button id="fullscreen" style="display: none;">Full screen</button><br/><br/>
 	       	</div>
 	       	<div id="options" style="display: none;"  class="box">
 	       		<h3>Options</h3>
diff --git a/examples/browser/css/control-styles.css b/examples/browser/css/control-styles.css
index 9bce31e..0bd8a77 100644
--- a/examples/browser/css/control-styles.css
+++ b/examples/browser/css/control-styles.css
@@ -23,6 +23,15 @@ html,body {
 	vertical-align: top;
 	padding: 0 .5em 0 .5em;
 }
+#controls h3 {
+    margin: .0 0 1em 0;
+}
+#controls button {
+    margin-right: 1em;
+}
+#controls label select {
+    margin-left: 1em;
+}
 .box {
 	background-color: #f0f0f0;
 	border: 2px solid #e0e0e0;
diff --git a/examples/browser/js/control.js b/examples/browser/js/control.js
index 288684a..57bbb1f 100644
--- a/examples/browser/js/control.js
+++ b/examples/browser/js/control.js
@@ -87,7 +87,12 @@ function RunMatch(match, progressBar) {
                     });
             })
     }
-    NextMove();
+    match.getFinished()
+        .then( (result) => {
+            // make sure the game is not finished to request next move
+            if(!result.finished)
+                NextMove();
+        });
 }
 
 $(document).ready(function () {
@@ -209,10 +214,21 @@ $(document).ready(function () {
                         });
                 });
 
-                if(area.requestFullscreen)
-                    $("#fullscreen").show().on("click",function() {
-                        area.requestFullscreen();
+                // yeah, using the fullscreen API is not as easy as it should be
+                var requestFullscreen = area.requestFullscreen || area.webkitRequestFullscreen;
+                if(requestFullscreen) {
+                    
+                    $(document).on("webkitfullscreenchange fullscreenchange",()=>{
+                        var isFullscreen = document.webkitFullscreenElement || document.fullscreenElement;
+                        if(isFullscreen)
+                            area.style.display = "block";
+                        else
+                            area.style.display = "table-cell";
                     });
+                    $("#fullscreen").show().on("click",function() {
+                        requestFullscreen.call(area);
+                    });
+                }
 
                 $("#links").on("click",()=>{
                     $("#controls").hide();