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

fixed animation on zilch

master
Lurkars 8 years ago
parent
18cf7293e7
commit
97347dcdae
3 changed files with 461 additions and 389 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 48
      js/game.js
  2. 56
      js/interface.js
  3. 42
      style/main.css

48
js/game.js
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);

56
js/interface.js
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) {

42
style/main.css
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 {

Write Preview
Loading…
Cancel
Save