Lurkars/openzilch.js
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fixed animation on zilch

Browse Source
This commit is contained in:
Lurkars
2017-04-27 20:49:29 +02:00
parent 18cf7293e7
commit 97347dcdae
3 changed files with 525 additions and 453 deletions
Download Patch File Download Diff File Expand all files Collapse all files
js/game.js
+39 -9
View File
@@ -1,25 +1,33 @@
/**
* Game (Model + Controller)
*/
function Game(Interface) {
var self = this;
// get interface
self.Interface = new Interface;
// register event callbacks
self.Interface.on("restart", self.restart.bind(this));
self.Interface.on("takePoints", self.takePoints.bind(this));
self.Interface.on("addPoints", self.addPoints.bind(this));
self.Interface.on("rollDices", self.rollDices.bind(this));
self.Interface.on("toggleDice", self.toggleDice.bind(this));
self.Interface.on("toggleCpu", self.toggleCpu.bind(this));
self.setup();
}
/**
* Restart game (reset)
*/
Game.prototype.restart = function() {
this.Interface.setup();
this.setup();
};
/**
* Setup new game
*/
Game.prototype.setup = function() {
var self = this;
self.player = {
@@ -74,10 +82,16 @@ Game.prototype.setup = function() {
};
/**
* Random helper for integer numbers
*/
Game.prototype.random = function(int) {
return Math.floor((Math.random() * int));
};
/**
* Roll dices
*/
Game.prototype.rollDices = function(all) {
var self = this;
self.Interface.clearMessage();
@@ -102,6 +116,9 @@ Game.prototype.rollDices = function(all) {
}
}
self.Interface.setDices(self.dices);
if (rollCount == 0) {
self.rollDices(true);
} else if (self.calculatePoints(true) == 0) {
@@ -184,7 +201,6 @@ Game.prototype.rollDices = function(all) {
self.Interface.animateDices(self.dices, self.animationTime);
self.Interface.disableTakePoints(true);
self.Interface.disableRollDices(true);
self.Interface.setDices(self.dices);
if (!self.playing) {
self.cpuPlay();
@@ -192,6 +208,9 @@ Game.prototype.rollDices = function(all) {
}
};
/**
* Toggle dice selection
*/
Game.prototype.toggleDice = function(diceIndex) {
var self = this;
var dice = self.dices[diceIndex];
@@ -243,6 +262,9 @@ Game.prototype.toggleDice = function(diceIndex) {
self.Interface.setPoints(self.points + points);
};
/**
* Calculate points on selected dices or all dices
*/
Game.prototype.calculatePoints = function(all) {
var self = this;
var result = [0, 0, 0, 0, 0, 0];
@@ -299,7 +321,9 @@ Game.prototype.calculatePoints = function(all) {
return points;
}
/**
* Add points for current player
*/
Game.prototype.addPoints = function() {
var self = this;
@@ -318,6 +342,9 @@ Game.prototype.addPoints = function() {
self.Interface.setPoints(self.points);
};
/**
* Take points and end round
*/
Game.prototype.takePoints = function() {
var self = this;
@@ -348,6 +375,9 @@ Game.prototype.takePoints = function() {
self.endRound();
};
/**
* End round for current player
*/
Game.prototype.endRound = function() {
var self = this;
@@ -403,6 +433,9 @@ Game.prototype.endRound = function() {
}
/**
* CPU playing logic
*/
Game.prototype.cpuPlay = function() {
var self = this;
self.Interface.disableRestart(true);
@@ -451,8 +484,5 @@ Game.prototype.cpuPlay = function() {
}
Game.prototype.toggleCpu = function() {
}
// create new game
var game = new Game(Interface);
js/interface.js
+49 -7
View File
@@ -1,9 +1,14 @@
/**
* UI
*/
function Interface() {
var self = this;
// Event Objects for callbacks
self.events = {};
// get DOM elements
self.restartButton = document.querySelector('#restart-button');
self.playerScoreContainer = document.querySelector('#player-score-container');
@@ -22,9 +27,7 @@ function Interface() {
self.message = document.querySelector('#message');
self.dicesButton.classList.add("disabled");
self.pointsButton.classList.add("disabled");
// add click events
self.restartButton.addEventListener("click", function() {
if (!this.classList.contains('disabled')) {
self.fireEvent("restart");
@@ -45,6 +48,7 @@ function Interface() {
}
});
// add click events for dices
for (var diceIndex = 0; diceIndex < 6; diceIndex++) {
var diceContainer = self.dices[diceIndex];
diceContainer.diceIndex = diceIndex;
@@ -58,6 +62,9 @@ function Interface() {
this.setup();
};
/**
* setup init state
*/
Interface.prototype.setup = function() {
this.dicesButton.classList.add("disabled");
this.pointsButton.classList.add("disabled");
@@ -65,6 +72,9 @@ Interface.prototype.setup = function() {
};
/**
* register callbacks for events
*/
Interface.prototype.on = function(event, callback) {
if (!this.events[event]) {
this.events[event] = [];
@@ -72,6 +82,9 @@ Interface.prototype.on = function(event, callback) {
this.events[event].push(callback);
};
/**
* fire events and execute callbacks
*/
Interface.prototype.fireEvent = function(event, data) {
var callbacks = this.events[event];
if (callbacks) {
@@ -81,6 +94,9 @@ Interface.prototype.fireEvent = function(event, data) {
}
};
/**
* Set dices
*/
Interface.prototype.setDices = function(dices) {
var self = this;
@@ -108,12 +124,11 @@ Interface.prototype.setDices = function(dices) {
diceContainer.classList.remove('invalid');
}
}
};
/**
* fire dices animation
*/
Interface.prototype.animateDices = function(dices, timeout, callback) {
var self = this;
for (var diceIndex = 0; diceIndex < 6; diceIndex++) {
@@ -134,6 +149,9 @@ Interface.prototype.animateDices = function(dices, timeout, callback) {
}, timeout ? timeout : 0);
};
/**
* set disabled state of 'restart' button
*/
Interface.prototype.disableRestart = function(disabled) {
if (disabled) {
this.restartButton.classList.add("disabled")
@@ -142,6 +160,9 @@ Interface.prototype.disableRestart = function(disabled) {
}
};
/**
* set disabled state of 'take points' button
*/
Interface.prototype.disableTakePoints = function(disabled) {
if (disabled) {
this.pointsButton.classList.add("disabled")
@@ -150,6 +171,9 @@ Interface.prototype.disableTakePoints = function(disabled) {
}
};
/**
* set disabled state of 'roll dices' button
*/
Interface.prototype.disableRollDices = function(disabled) {
if (disabled) {
this.dicesButton.classList.add("disabled")
@@ -158,10 +182,16 @@ Interface.prototype.disableRollDices = function(disabled) {
}
};
/**
* set points
*/
Interface.prototype.setPoints = function(points) {
this.points.innerHTML = points;
};
/**
* set playing status (Player or CPU)
*/
Interface.prototype.setPlaying = function(playing) {
if (playing) {
this.playing = true;
@@ -174,6 +204,9 @@ Interface.prototype.setPlaying = function(playing) {
}
};
/**
* set player data
*/
Interface.prototype.setPlayer = function(player) {
this.playerScore.innerHTML = player.score;
var zilchs = '';
@@ -184,6 +217,9 @@ Interface.prototype.setPlayer = function(player) {
};
/**
* set cpu data
*/
Interface.prototype.setCpu = function(cpu) {
this.cpuScore.innerHTML = cpu.score;
var zilchs = '';
@@ -194,6 +230,9 @@ Interface.prototype.setCpu = function(cpu) {
this.cpuZilch.innerHTML = zilchs;
};
/**
* show message with timeout and callback
*/
Interface.prototype.showMessage = function(message, timeout, callback) {
var self = this;
@@ -210,6 +249,9 @@ Interface.prototype.showMessage = function(message, timeout, callback) {
}
};
/**
* hide current message
*/
Interface.prototype.clearMessage = function(callback) {
this.message.classList.remove('visible');
if (callback) {
style/main.css
+21 -21
View File
@@ -236,23 +236,23 @@ hr {
}
.dice.duration1.animate:after {
animation-delay: 0.3s;
-webkit-animation-delay: 0.1s;
-moz-animation-delay: 0.1s;
-o-animation-delay: 0.1s;
-ms-animation-delay: 0.1s;
animation-delay: 0.2s;
-webkit-animation-delay: 0.2s;
-moz-animation-delay: 0.2s;
-o-animation-delay: 0.2s;
-ms-animation-delay: 0.2s;
}
.dice.duration1.animate:after {
animation-delay: 0.6s;
-webkit-animation-delay: 0.1s;
-moz-animation-delay: 0.1s;
-o-animation-delay: 0.1s;
-ms-animation-delay: 0.1s;
animation-delay: 0.3s;
-webkit-animation-delay: 0.3s;
-moz-animation-delay: 0.3s;
-o-animation-delay: 0.3s;
-ms-animation-delay: 0.3s;
}
.dice.duration3.animate:after {
animation-delay: 0.7s;
animation-delay: 0.1s;
-webkit-animation-delay: 0.1s;
-moz-animation-delay: 0.1s;
-o-animation-delay: 0.1s;
@@ -260,19 +260,19 @@ hr {
}
.dice.duration4.animate:after {
animation-delay: 1.2s;
-webkit-animation-delay: 0.1s;
-moz-animation-delay: 0.1s;
-o-animation-delay: 0.1s;
-ms-animation-delay: 0.1s;
animation-delay: 0.3s;
-webkit-animation-delay: 0.3s;
-moz-animation-delay: 0.3s;
-o-animation-delay: 0.3s;
-ms-animation-delay: 0.3s;
}
.dice.duration5.animate:after {
animation-delay: 1.5s;
-webkit-animation-delay: 0.1s;
-moz-animation-delay: 0.1s;
-o-animation-delay: 0.1s;
-ms-animation-delay: 0.1s;
animation-delay: 0.2s;
-webkit-animation-delay: 0.2s;
-moz-animation-delay: 0.2s;
-o-animation-delay: 0.2s;
-ms-animation-delay: 0.2s;
}
.message {