tilera/jocly
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

better control UI

Browse source
This commit is contained in:
mig 2017-04-06 18:45:24 +02:00
parent 7bacd3555e
commit 7c131c41f3
3 changed files with 35 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
examples/browser/control.html
View file

@ -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>

9
examples/browser/css/control-styles.css
View file

@ -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;

24
examples/browser/js/control.js
View file

@ -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();