From 3ff112057ddf32466929a0bd5b2e0d94ee9a393d Mon Sep 17 00:00:00 2001 From: Lurkars Date: Fri, 14 Apr 2017 20:48:06 +0200 Subject: [PATCH] add mobile css; initical game improvements; improved message timing --- index.html | 3 +- js/game.js | 92 +++++++++++++++++++++++++++--------------------- js/interface.js | 13 ++++--- style/main.css | 10 +++--- style/mobile.css | 63 +++++++++++++++++++++++++++++++++ 5 files changed, 132 insertions(+), 49 deletions(-) create mode 100644 style/mobile.css 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; + } +}