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

updated examples

Browse source
This commit is contained in:
mig 2017-04-10 10:17:23 +02:00
parent d54a15c8b0
commit db32ee78eb
2 changed files with 102 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
examples/browser/control.html
View file

@ -27,6 +27,9 @@
<button id="restart">Restart game</button>
<button id="takeback">Take back</button>
<button id="fullscreen" style="display: none;">Full screen</button>
<button id="save">Save</button>
<input type="file" id="fileElem" accept="application/json" style="display:none"/>
<button id="load">Load</button>
<br/><br/>
<select id="mode">
<option value="self-self">Self / Self</option>

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

@ -14,8 +14,15 @@ function NotifyWinner(winner) {
/*
* Run the game
*/
var movePending = null;
function RunMatch(match, progressBar) {
var movePendingResolver;
function NextMove() {
if(movePending)
return;
movePending = new Promise((resolve,reject)=>{
movePendingResolver = resolve;
});
// whose turn is it ?
match.getTurn()
.then((player) => {
@ -61,6 +68,13 @@ function RunMatch(match, progressBar) {
}
})
})
.then((result) => {
return match.getMoveString(result.move)
.then((str)=>{
console.info("Played move:",str);
return result;
})
})
.then((result) => {
// at this point we know the machine move but it has not been played yet
// let's play that move
@ -73,12 +87,16 @@ function RunMatch(match, progressBar) {
return match.getFinished()
})
.then((result) => {
movePending = null;
movePendingResolver();
if (result.finished)
NotifyWinner(result.winner);
else
NextMove();
})
.catch((e)=>{
movePending = null;
movePendingResolver();
console.warn("Turn aborted:",e);
})
.then(() => {
@ -90,8 +108,14 @@ function RunMatch(match, progressBar) {
match.getFinished()
.then( (result) => {
// make sure the game is not finished to request next move
if(!result.finished)
NextMove();
if(!result.finished) {
if(movePending) {
movePending.then(()=>{
NextMove();
})
} else
NextMove();
}
});
}
@ -117,8 +141,12 @@ $(document).ready(function () {
});
$("#options").show();
// get saved view options if any
var viewOptions = window.localStorage && window.localStorage[gameName+".options"] &&
JSON.parse(window.localStorage[gameName+".options"]) || undefined;
// the match need to be attached to a DOM element for displaying the board
match.attachElement(area)
match.attachElement(area, { viewOptions: viewOptions })
.then( () => {
return match.getViewOptions();
})
@ -154,6 +182,8 @@ $(document).ready(function () {
.then( () => {
RunMatch(match,progressBar);
})
if(window.localStorage)
window.localStorage.setItem(gameName+".options",JSON.stringify(opts));
});
$("#anaglyph-input").on("change",function() {
@ -162,37 +192,53 @@ $(document).ready(function () {
else
match.viewControl("exitAnaglyph");
});
if(config.view.switchable) {
$("#view-as").show().on("change",()=>{
var playerMode = $("#view-as").val();
if(window.localStorage)
window.localStorage.setItem(gameName+".view-as",playerMode);
var player;
if(playerMode=="player-a")
player = Jocly.PLAYER_A;
else if(playerMode=="player-b")
player = Jocly.PLAYER_B;
if(player)
match.viewAs(player)
.then( () => {
RunMatch(match,progressBar);
});
});
var viewAs = window.localStorage && window.localStorage[gameName+".view-as"];
if(viewAs)
$("#view-as").val(viewAs).trigger("change");
}
})
.then( () => {
RunMatch(match,progressBar);
});
if(config.view.switchable)
$("#view-as").show().on("change",()=>{
var playerMode = $("#view-as").val();
var player;
if(playerMode=="player-a")
player = Jocly.PLAYER_A;
else if(playerMode=="player-b")
player = Jocly.PLAYER_B;
if(player)
match.viewAs(player)
.then( () => {
RunMatch(match,progressBar);
});
});
// configure computer levels
["a","b"].forEach( (which) => {
$("#level-"+which).hide();
$("#level-"+which).hide().on("change", () => {
if(window.localStorage)
window.localStorage.setItem(gameName+".level-"+which,$("#select-level-"+which).val());
});
$("<option/>").attr("value","-1").text("Random").appendTo($("#select-level-"+which));
config.model.levels.forEach( (level, index) => {
$("<option/>").attr("value",index).text(level.label).appendTo($("#select-level-"+which));
});
$("#select-level-"+which).val(0);
var level = window.localStorage && window.localStorage[gameName+".level-"+which] || 0;
$("#select-level-"+which).val(level);
});
// dropdown to change the players (user/machine)
$("#mode").on("change",()=>{
if(window.localStorage)
window.localStorage.setItem(gameName+".mode",$("#mode").val());
});
$("#mode-panel").on("change", () => {
switch($("#mode").val()) {
case "self-self": $("#level-a,#level-b").hide(); break;
@ -200,9 +246,10 @@ $(document).ready(function () {
case "self-comp": $("#level-a").hide(); $("#level-b").show(); break;
case "comp-self": $("#level-b").hide(); $("#level-a").show(); break;
}
RunMatch(match,progressBar);
//RunMatch(match,progressBar);
});
$("#mode").val("self-comp").trigger("change");
var mode = window.localStorage && window.localStorage[gameName+".mode"] || "self-comp";
$("#mode").val(mode).trigger("change");
$("#restart").on("click",function() {
// restart match from the beginning
@ -212,6 +259,37 @@ $(document).ready(function () {
});
});
$("#save").on("click",function() {
// save match to the file system
match.save()
.then( (data) => {
var json = JSON.stringify(data,null,2);
var a = document.createElement("a");
var uriContent = "data:application/octet-stream," + encodeURIComponent(json);
a.setAttribute("href",uriContent);
a.setAttribute("download",gameName+".json");
a.click();
});
});
// reading file locally
var fileElem = $("#fileElem").on("change",function() {
var fileReader = new FileReader();
fileReader.readAsText(fileElem[0].files[0]);
fileReader.onload = function(event) {
var json = event.target.result;
var data = JSON.parse(json);
// load match
match.load(data)
.catch((e)=>{
console.info("Failed to load",e);
});
}
})
$("#load").on("click",function() {
fileElem[0].click();
});
$("#takeback").on("click",function() {
match.getPlayedMoves()
.then( (playedMoves) => {