better control UI
This commit is contained in:
parent
7bacd3555e
commit
7c131c41f3
3 changed files with 35 additions and 9 deletions
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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();
|
||||
|
|
Loading…
Reference in a new issue