diff --git a/index.html b/index.html
index 2d09295..cb5b882 100644
--- a/index.html
+++ b/index.html
@@ -5,7 +5,8 @@
openzilch.js
-
+
+
diff --git a/js/game.js b/js/game.js
index 62a3365..c42ffc7 100644
--- a/js/game.js
+++ b/js/game.js
@@ -32,6 +32,13 @@ Game.prototype.setup = function() {
};
self.dices = []
+ for (var i = 0; i < 6; i++) {
+ var dice = {};
+ dice.value = this.random(6);
+ dice.disabled = true;
+ self.dices[i] = dice;
+ }
+
self.history = [];
self.cpuStarts = self.random(2);
@@ -44,14 +51,19 @@ Game.prototype.setup = function() {
self.Interface.setPoints(self.points);
self.Interface.setPlayer(self.player);
self.Interface.setCpu(self.cpu);
+ self.Interface.setDices(self.dices);
if (self.cpuStarts) {
- self.Interface.showMessage("CPU starts!", 1000)
+ self.Interface.showMessage("CPU starts!", 1000, function() {
+ self.roleDices();
+ });
} else {
- self.Interface.showMessage("Player starts!", 1000)
+ self.Interface.showMessage("Player starts!", 0, function() {
+ self.Interface.disableRoleDices(false);
+ });
}
- self.roleDices();
+
};
Game.prototype.random = function(int) {
@@ -85,57 +97,57 @@ Game.prototype.roleDices = function(all) {
if (rollCount == 0) {
self.roleDices(true);
} else if (self.checkZilch(rollCount == 6)) {
- if (self.playing) {
- self.player.zilch++;
-
- var history = {};
- history['player'] = 'Zilch';
- self.history.push(history);
-
- if (self.player.zilch > 2) {
- if (self.player.score < 500) {
- self.player.score = 0;
- } else {
- self.player.score -= 500;
- }
+ self.Interface.animateDices(self.dices, function() {
+ if (self.playing) {
+ self.player.zilch++;
var history = {};
- history['player'] = '-500';
+ history['player'] = 'Zilch';
self.history.push(history);
- }
- } else {
- self.cpu.zilch++;
+ if (self.player.zilch > 2) {
+ if (self.player.score < 500) {
+ self.player.score = 0;
+ } else {
+ self.player.score -= 500;
+ }
- var history = {};
- history['cpu'] = 'Zilch';
- self.history.push(history);
- if (self.cpu.zilch > 2) {
- if (self.cpu.score < 500) {
- self.cpu.score = 0;
- } else {
- self.cpu.score -= 500;
+ var history = {};
+ history['player'] = '-500';
+ self.history.push(history);
}
+ } else {
+ self.cpu.zilch++;
var history = {};
- history['cpu'] = '-500';
+ history['cpu'] = 'Zilch';
self.history.push(history);
- }
- }
+ if (self.cpu.zilch > 2) {
+ if (self.cpu.score < 500) {
+ self.cpu.score = 0;
+ } else {
+ self.cpu.score -= 500;
+ }
- self.Interface.animateDices(self.dices, function() {
- self.Interface.showMessage("Zilch!", 1000);
- });
+ var history = {};
+ history['cpu'] = '-500';
+ self.history.push(history);
+ }
- self.endRound();
+ }
+
+ self.Interface.showMessage("Zilch!", 1000, function() {
+ self.endRound();
+ });
+ });
} else {
self.Interface.animateDices(self.dices);
self.Interface.disableTakePoints(true);
- self.Interface.disabledRoleDices(true);
+ self.Interface.disableRoleDices(true);
self.Interface.setDices(self.dices);
if (!self.playing) {
@@ -195,9 +207,9 @@ Game.prototype.toggleDice = function(diceIndex) {
}
if (valid && points > 0 && self.playing) {
- self.Interface.disabledRoleDices(false);
+ self.Interface.disableRoleDices(false);
} else {
- self.Interface.disabledRoleDices(true);
+ self.Interface.disableRoleDices(true);
}
if (valid && self.points + points >= 300 && self.playing) {
@@ -327,7 +339,7 @@ Game.prototype.endRound = function() {
}
self.Interface.disableTakePoints(true);
- self.Interface.disabledRoleDices(true);
+ self.Interface.disableRoleDices(true);
self.Interface.setDices(self.dices);
self.Interface.setPoints(self.points);
self.Interface.setPlaying(self.playing);
@@ -336,7 +348,7 @@ Game.prototype.endRound = function() {
self.Interface.disableTakePoints(true);
if (self.playing) {
- self.Interface.disabledRoleDices(false);
+ self.Interface.disableRoleDices(false);
}
if (!self.playing) {
diff --git a/js/interface.js b/js/interface.js
index 61f04ed..4ba794c 100644
--- a/js/interface.js
+++ b/js/interface.js
@@ -134,7 +134,7 @@ Interface.prototype.disableTakePoints = function(disabled) {
this.pointsButton.disabled = disabled;
};
-Interface.prototype.disabledRoleDices = function(disabled) {
+Interface.prototype.disableRoleDices = function(disabled) {
this.dicesButton.disabled = disabled;
};
@@ -173,7 +173,7 @@ Interface.prototype.setCpu = function(cpu) {
this.cpuScoreContainer.classList.add('zilch-' + cpu.zilch);
};
-Interface.prototype.showMessage = function(message, fade) {
+Interface.prototype.showMessage = function(message, fade, callback) {
var self = this;
self.message.innerHTML = '' + message + '
';
@@ -182,11 +182,16 @@ Interface.prototype.showMessage = function(message, fade) {
if (fade) {
setTimeout(function() {
- self.clearMessage();
+ self.clearMessage(callback);
}, fade);
+ } else if (callback) {
+ callback();
}
};
-Interface.prototype.clearMessage = function() {
+Interface.prototype.clearMessage = function(callback) {
this.message.classList.remove('visible');
+ if (callback) {
+ callback();
+ }
};
diff --git a/style/main.css b/style/main.css
index e3b8940..0e9f857 100644
--- a/style/main.css
+++ b/style/main.css
@@ -71,6 +71,8 @@ hr {
}
.top .button {
+ position: relative;
+ top: -18px;
margin: 0 88px;
}
@@ -299,10 +301,6 @@ hr {
text-align: center;
}
-.action .button {
- margin-top: 15px;
-}
-
.pointsContainer {
position: relative;
display: inline-block;
@@ -327,3 +325,7 @@ hr {
line-height: 25px;
font-weight: bold;
}
+
+.footer {
+ text-align: center;
+}
diff --git a/style/mobile.css b/style/mobile.css
new file mode 100644
index 0000000..93dd42a
--- /dev/null
+++ b/style/mobile.css
@@ -0,0 +1,63 @@
+@media screen and (max-width: 520px) {
+ body {
+ font-size: 15px;
+ }
+ .container {
+ width: 280px;
+ }
+ .button {
+ display: inline-block;
+ height: 40px;
+ font-size: 15px;
+ color: #f9f6f2;
+ text-decoration: none;
+ line-height: 42px;
+ padding: 0 5px;
+ }
+ .top .button {
+ margin: 0 5px;
+ }
+ .score-container {
+ width: 75px;
+ height: 60px;
+ }
+ .score-container .score {
+ font-size: 20px;
+ line-height: 20px;
+ }
+ .dices-container {
+ width: 280px;
+ height: 185px;
+ }
+ .dice {
+ width: 70px;
+ height: 70px;
+ font-size: 35px;
+ line-height: 70px;
+ margin-top: 15px;
+ margin-left: 15px;
+ }
+ .message p {
+ font-size: 35px;
+ height: 35px;
+ line-height: 35px;
+ margin-top: 75px;
+ }
+ .action {
+ margin-top: 25px;
+ height: 75px;
+ text-align: center;
+ }
+ .action .button {
+ margin-top: 15px;
+ }
+ .pointsContainer {
+ width: 75px;
+ height: 60px;
+ margin: 0 5px;
+ }
+ .pointsContainer .points {
+ font-size: 20px;
+ line-height: 20px;
+ }
+}