fixed animation on zilch

js/game.js

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

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

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