|
@ -3,7 +3,7 @@ |
|
|
*/ |
|
|
*/ |
|
|
function Interface() { |
|
|
function Interface() { |
|
|
|
|
|
|
|
|
var self = this; |
|
|
|
|
|
|
|
|
let self = this; |
|
|
|
|
|
|
|
|
// Event Objects for callbacks
|
|
|
// Event Objects for callbacks
|
|
|
self.events = {}; |
|
|
self.events = {}; |
|
@ -28,20 +28,20 @@ function Interface() { |
|
|
self.message = document.querySelector('#message'); |
|
|
self.message = document.querySelector('#message'); |
|
|
|
|
|
|
|
|
// add click events
|
|
|
// add click events
|
|
|
self.restartButton.addEventListener("click", function() { |
|
|
|
|
|
|
|
|
self.restartButton.addEventListener("click", function () { |
|
|
if (!this.classList.contains('disabled')) { |
|
|
if (!this.classList.contains('disabled')) { |
|
|
self.fireEvent("restart"); |
|
|
self.fireEvent("restart"); |
|
|
} |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
self.pointsButton.addEventListener("click", function() { |
|
|
|
|
|
|
|
|
self.pointsButton.addEventListener("click", function () { |
|
|
if (self.playing && !this.classList.contains('disabled')) { |
|
|
if (self.playing && !this.classList.contains('disabled')) { |
|
|
self.fireEvent("takePoints"); |
|
|
self.fireEvent("takePoints"); |
|
|
} |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
self.dicesButton.addEventListener("click", function() { |
|
|
|
|
|
|
|
|
self.dicesButton.addEventListener("click", function () { |
|
|
if (self.playing && !this.classList.contains('disabled')) { |
|
|
if (self.playing && !this.classList.contains('disabled')) { |
|
|
self.fireEvent("addPoints"); |
|
|
self.fireEvent("addPoints"); |
|
|
self.fireEvent("rollDices"); |
|
|
self.fireEvent("rollDices"); |
|
@ -49,10 +49,10 @@ function Interface() { |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
// add click events for dices
|
|
|
// add click events for dices
|
|
|
for (var diceIndex = 0; diceIndex < 6; diceIndex++) { |
|
|
|
|
|
var diceContainer = self.dices[diceIndex]; |
|
|
|
|
|
|
|
|
for (let diceIndex = 0; diceIndex < 6; diceIndex++) { |
|
|
|
|
|
let diceContainer = self.dices[diceIndex]; |
|
|
diceContainer.diceIndex = diceIndex; |
|
|
diceContainer.diceIndex = diceIndex; |
|
|
diceContainer.addEventListener("click", function() { |
|
|
|
|
|
|
|
|
diceContainer.addEventListener("click", function () { |
|
|
if (self.playing && !this.classList.contains('disabled')) { |
|
|
if (self.playing && !this.classList.contains('disabled')) { |
|
|
self.fireEvent("toggleDice", this.diceIndex); |
|
|
self.fireEvent("toggleDice", this.diceIndex); |
|
|
} |
|
|
} |
|
@ -65,7 +65,7 @@ function Interface() { |
|
|
/** |
|
|
/** |
|
|
* setup init state |
|
|
* setup init state |
|
|
*/ |
|
|
*/ |
|
|
Interface.prototype.setup = function() { |
|
|
|
|
|
|
|
|
Interface.prototype.setup = function () { |
|
|
this.dicesButton.classList.add("disabled"); |
|
|
this.dicesButton.classList.add("disabled"); |
|
|
this.pointsButton.classList.add("disabled"); |
|
|
this.pointsButton.classList.add("disabled"); |
|
|
this.message.classList.remove('visible'); |
|
|
this.message.classList.remove('visible'); |
|
@ -75,7 +75,7 @@ Interface.prototype.setup = function() { |
|
|
/** |
|
|
/** |
|
|
* register callbacks for events |
|
|
* register callbacks for events |
|
|
*/ |
|
|
*/ |
|
|
Interface.prototype.on = function(event, callback) { |
|
|
|
|
|
|
|
|
Interface.prototype.on = function (event, callback) { |
|
|
if (!this.events[event]) { |
|
|
if (!this.events[event]) { |
|
|
this.events[event] = []; |
|
|
this.events[event] = []; |
|
|
} |
|
|
} |
|
@ -85,10 +85,10 @@ Interface.prototype.on = function(event, callback) { |
|
|
/** |
|
|
/** |
|
|
* fire events and execute callbacks |
|
|
* fire events and execute callbacks |
|
|
*/ |
|
|
*/ |
|
|
Interface.prototype.fireEvent = function(event, data) { |
|
|
|
|
|
var callbacks = this.events[event]; |
|
|
|
|
|
|
|
|
Interface.prototype.fireEvent = function (event, data) { |
|
|
|
|
|
let callbacks = this.events[event]; |
|
|
if (callbacks) { |
|
|
if (callbacks) { |
|
|
callbacks.forEach(function(callback) { |
|
|
|
|
|
|
|
|
callbacks.forEach(function (callback) { |
|
|
callback(data); |
|
|
callback(data); |
|
|
}); |
|
|
}); |
|
|
} |
|
|
} |
|
@ -97,12 +97,12 @@ Interface.prototype.fireEvent = function(event, data) { |
|
|
/** |
|
|
/** |
|
|
* Set dices |
|
|
* Set dices |
|
|
*/ |
|
|
*/ |
|
|
Interface.prototype.setDices = function(dices) { |
|
|
|
|
|
var self = this; |
|
|
|
|
|
|
|
|
Interface.prototype.setDices = function (dices) { |
|
|
|
|
|
let self = this; |
|
|
|
|
|
|
|
|
for (var diceIndex = 0; diceIndex < 6; diceIndex++) { |
|
|
|
|
|
var dice = dices[diceIndex]; |
|
|
|
|
|
var diceContainer = self.dices[diceIndex]; |
|
|
|
|
|
|
|
|
for (let diceIndex = 0; diceIndex < 6; diceIndex++) { |
|
|
|
|
|
let dice = dices[diceIndex]; |
|
|
|
|
|
let diceContainer = self.dices[diceIndex]; |
|
|
diceContainer.innerHTML = dice.value + 1; |
|
|
diceContainer.innerHTML = dice.value + 1; |
|
|
|
|
|
|
|
|
if (dice.disabled) { |
|
|
if (dice.disabled) { |
|
@ -129,18 +129,18 @@ Interface.prototype.setDices = function(dices) { |
|
|
/** |
|
|
/** |
|
|
* fire dices animation |
|
|
* fire dices animation |
|
|
*/ |
|
|
*/ |
|
|
Interface.prototype.animateDices = function(dices, timeout, callback) { |
|
|
|
|
|
var self = this; |
|
|
|
|
|
for (var diceIndex = 0; diceIndex < 6; diceIndex++) { |
|
|
|
|
|
var dice = dices[diceIndex]; |
|
|
|
|
|
|
|
|
Interface.prototype.animateDices = function (dices, timeout, callback) { |
|
|
|
|
|
let self = this; |
|
|
|
|
|
for (let diceIndex = 0; diceIndex < 6; diceIndex++) { |
|
|
|
|
|
let dice = dices[diceIndex]; |
|
|
if (!dice.disabled && !dice.selected) { |
|
|
if (!dice.disabled && !dice.selected) { |
|
|
self.dices[diceIndex].classList.add("animate"); |
|
|
self.dices[diceIndex].classList.add("animate"); |
|
|
self.dices[diceIndex].classList.add("duration" + diceIndex); |
|
|
self.dices[diceIndex].classList.add("duration" + diceIndex); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
setTimeout(function() { |
|
|
|
|
|
for (var diceIndex = 0; diceIndex < 6; diceIndex++) { |
|
|
|
|
|
|
|
|
setTimeout(function () { |
|
|
|
|
|
for (let diceIndex = 0; diceIndex < 6; diceIndex++) { |
|
|
self.dices[diceIndex].classList.remove("animate"); |
|
|
self.dices[diceIndex].classList.remove("animate"); |
|
|
} |
|
|
} |
|
|
if (callback) { |
|
|
if (callback) { |
|
@ -152,7 +152,7 @@ Interface.prototype.animateDices = function(dices, timeout, callback) { |
|
|
/** |
|
|
/** |
|
|
* set disabled state of 'restart' button |
|
|
* set disabled state of 'restart' button |
|
|
*/ |
|
|
*/ |
|
|
Interface.prototype.disableRestart = function(disabled) { |
|
|
|
|
|
|
|
|
Interface.prototype.disableRestart = function (disabled) { |
|
|
if (disabled) { |
|
|
if (disabled) { |
|
|
this.restartButton.classList.add("disabled") |
|
|
this.restartButton.classList.add("disabled") |
|
|
} else { |
|
|
} else { |
|
@ -163,7 +163,7 @@ Interface.prototype.disableRestart = function(disabled) { |
|
|
/** |
|
|
/** |
|
|
* set disabled state of 'take points' button |
|
|
* set disabled state of 'take points' button |
|
|
*/ |
|
|
*/ |
|
|
Interface.prototype.disableTakePoints = function(disabled) { |
|
|
|
|
|
|
|
|
Interface.prototype.disableTakePoints = function (disabled) { |
|
|
if (disabled) { |
|
|
if (disabled) { |
|
|
this.pointsButton.classList.add("disabled") |
|
|
this.pointsButton.classList.add("disabled") |
|
|
} else { |
|
|
} else { |
|
@ -174,7 +174,7 @@ Interface.prototype.disableTakePoints = function(disabled) { |
|
|
/** |
|
|
/** |
|
|
* set disabled state of 'roll dices' button |
|
|
* set disabled state of 'roll dices' button |
|
|
*/ |
|
|
*/ |
|
|
Interface.prototype.disableRollDices = function(disabled) { |
|
|
|
|
|
|
|
|
Interface.prototype.disableRollDices = function (disabled) { |
|
|
if (disabled) { |
|
|
if (disabled) { |
|
|
this.dicesButton.classList.add("disabled") |
|
|
this.dicesButton.classList.add("disabled") |
|
|
} else { |
|
|
} else { |
|
@ -185,14 +185,14 @@ Interface.prototype.disableRollDices = function(disabled) { |
|
|
/** |
|
|
/** |
|
|
* set points |
|
|
* set points |
|
|
*/ |
|
|
*/ |
|
|
Interface.prototype.setPoints = function(points) { |
|
|
|
|
|
|
|
|
Interface.prototype.setPoints = function (points) { |
|
|
this.points.innerHTML = points; |
|
|
this.points.innerHTML = points; |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
/** |
|
|
/** |
|
|
* set playing status (Player or CPU) |
|
|
* set playing status (Player or CPU) |
|
|
*/ |
|
|
*/ |
|
|
Interface.prototype.setPlaying = function(playing) { |
|
|
|
|
|
|
|
|
Interface.prototype.setPlaying = function (playing) { |
|
|
if (playing) { |
|
|
if (playing) { |
|
|
this.playing = true; |
|
|
this.playing = true; |
|
|
this.playerScoreContainer.classList.add('active'); |
|
|
this.playerScoreContainer.classList.add('active'); |
|
@ -207,10 +207,10 @@ Interface.prototype.setPlaying = function(playing) { |
|
|
/** |
|
|
/** |
|
|
* set player data |
|
|
* set player data |
|
|
*/ |
|
|
*/ |
|
|
Interface.prototype.setPlayer = function(player) { |
|
|
|
|
|
|
|
|
Interface.prototype.setPlayer = function (player) { |
|
|
this.playerScore.innerHTML = player.score; |
|
|
this.playerScore.innerHTML = player.score; |
|
|
var zilchs = ''; |
|
|
|
|
|
for (var i = 0; i < player.zilch; i++) { |
|
|
|
|
|
|
|
|
let zilchs = ''; |
|
|
|
|
|
for (let i = 0; i < player.zilch; i++) { |
|
|
zilchs += '<div class="point"></div>'; |
|
|
zilchs += '<div class="point"></div>'; |
|
|
} |
|
|
} |
|
|
this.playerZilch.innerHTML = zilchs; |
|
|
this.playerZilch.innerHTML = zilchs; |
|
@ -220,10 +220,10 @@ Interface.prototype.setPlayer = function(player) { |
|
|
/** |
|
|
/** |
|
|
* set cpu data |
|
|
* set cpu data |
|
|
*/ |
|
|
*/ |
|
|
Interface.prototype.setCpu = function(cpu) { |
|
|
|
|
|
|
|
|
Interface.prototype.setCpu = function (cpu) { |
|
|
this.cpuScore.innerHTML = cpu.score; |
|
|
this.cpuScore.innerHTML = cpu.score; |
|
|
var zilchs = ''; |
|
|
|
|
|
for (var i = 0; i < cpu.zilch; i++) { |
|
|
|
|
|
|
|
|
let zilchs = ''; |
|
|
|
|
|
for (let i = 0; i < cpu.zilch; i++) { |
|
|
zilchs += '<div class="point"></div>'; |
|
|
zilchs += '<div class="point"></div>'; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
@ -233,15 +233,15 @@ Interface.prototype.setCpu = function(cpu) { |
|
|
/** |
|
|
/** |
|
|
* show message with timeout and callback |
|
|
* show message with timeout and callback |
|
|
*/ |
|
|
*/ |
|
|
Interface.prototype.showMessage = function(message, timeout, callback) { |
|
|
|
|
|
var self = this; |
|
|
|
|
|
|
|
|
Interface.prototype.showMessage = function (message, timeout, callback) { |
|
|
|
|
|
let self = this; |
|
|
|
|
|
|
|
|
self.message.innerHTML = '<p>' + message + '</p>'; |
|
|
self.message.innerHTML = '<p>' + message + '</p>'; |
|
|
|
|
|
|
|
|
self.message.classList.add('visible'); |
|
|
self.message.classList.add('visible'); |
|
|
|
|
|
|
|
|
if (timeout) { |
|
|
if (timeout) { |
|
|
setTimeout(function() { |
|
|
|
|
|
|
|
|
setTimeout(function () { |
|
|
self.clearMessage(callback); |
|
|
self.clearMessage(callback); |
|
|
}, timeout); |
|
|
}, timeout); |
|
|
} else if (callback) { |
|
|
} else if (callback) { |
|
@ -252,9 +252,9 @@ Interface.prototype.showMessage = function(message, timeout, callback) { |
|
|
/** |
|
|
/** |
|
|
* hide current message |
|
|
* hide current message |
|
|
*/ |
|
|
*/ |
|
|
Interface.prototype.clearMessage = function(callback) { |
|
|
|
|
|
|
|
|
Interface.prototype.clearMessage = function (callback) { |
|
|
this.message.classList.remove('visible'); |
|
|
this.message.classList.remove('visible'); |
|
|
if (callback) { |
|
|
if (callback) { |
|
|
callback(); |
|
|
callback(); |
|
|
} |
|
|
} |
|
|
}; |
|
|
|
|
|
|
|
|
}; |