add mobile css; initical game improvements; improved message timing

8 years ago · 3ff112057d
5 changed files with 132 additions and 49 deletions
--- a/index.html
+++ b/index.html
@ -5,7 +5,8 @@
    <meta charset="utf-8" />
    <title>openzilch.js</title>
    <link href="style/main.css" rel="stylesheet" type="text/css" />
-    <meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=0.5, maximum-scale=1, user-scalable=no, minimal-ui">
+    <link href="style/mobile.css" rel="stylesheet" type="text/css" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.5, maximum-scale=1, user-scalable=no">
 </head>

 <body>
--- 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) {
--- 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 = '<p>' + message + '</p>';
@ -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();
+    }
 };
--- 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;
+}
--- a/style/mobile.css
+++ 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;
+    }
+}