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

add mobile css; initical game improvements; improved message timing

Browse Source
This commit is contained in:
Lurkars
2017-04-14 20:48:06 +02:00
parent 562b9c2108
commit 3ff112057d
5 changed files with 144 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+2 -1
View File
@@ -5,7 +5,8 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>openzilch.js</title> <title>openzilch.js</title>
<link href="style/main.css" rel="stylesheet" type="text/css" /> <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> </head>
<body> <body>
js/game.js
+25 -13
View File
@@ -32,6 +32,13 @@ Game.prototype.setup = function() {
}; };
self.dices = [] 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.history = [];
self.cpuStarts = self.random(2); self.cpuStarts = self.random(2);
@@ -44,14 +51,19 @@ Game.prototype.setup = function() {
self.Interface.setPoints(self.points); self.Interface.setPoints(self.points);
self.Interface.setPlayer(self.player); self.Interface.setPlayer(self.player);
self.Interface.setCpu(self.cpu); self.Interface.setCpu(self.cpu);
self.Interface.setDices(self.dices);
if (self.cpuStarts) { if (self.cpuStarts) {
self.Interface.showMessage("CPU starts!", 1000) self.Interface.showMessage("CPU starts!", 1000, function() {
self.roleDices();
});
} else { } 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) { Game.prototype.random = function(int) {
@@ -85,6 +97,8 @@ Game.prototype.roleDices = function(all) {
if (rollCount == 0) { if (rollCount == 0) {
self.roleDices(true); self.roleDices(true);
} else if (self.checkZilch(rollCount == 6)) { } else if (self.checkZilch(rollCount == 6)) {
self.Interface.animateDices(self.dices, function() {
if (self.playing) { if (self.playing) {
self.player.zilch++; self.player.zilch++;
@@ -107,7 +121,6 @@ Game.prototype.roleDices = function(all) {
} else { } else {
self.cpu.zilch++; self.cpu.zilch++;
var history = {}; var history = {};
history['cpu'] = 'Zilch'; history['cpu'] = 'Zilch';
self.history.push(history); self.history.push(history);
@@ -126,16 +139,15 @@ Game.prototype.roleDices = function(all) {
} }
self.Interface.animateDices(self.dices, function() { self.Interface.showMessage("Zilch!", 1000, function() {
self.Interface.showMessage("Zilch!", 1000);
});
self.endRound(); self.endRound();
});
});
} else { } else {
self.Interface.animateDices(self.dices); self.Interface.animateDices(self.dices);
self.Interface.disableTakePoints(true); self.Interface.disableTakePoints(true);
self.Interface.disabledRoleDices(true); self.Interface.disableRoleDices(true);
self.Interface.setDices(self.dices); self.Interface.setDices(self.dices);
if (!self.playing) { if (!self.playing) {
@@ -195,9 +207,9 @@ Game.prototype.toggleDice = function(diceIndex) {
} }
if (valid && points > 0 && self.playing) { if (valid && points > 0 && self.playing) {
self.Interface.disabledRoleDices(false); self.Interface.disableRoleDices(false);
} else { } else {
self.Interface.disabledRoleDices(true); self.Interface.disableRoleDices(true);
} }
if (valid && self.points + points >= 300 && self.playing) { if (valid && self.points + points >= 300 && self.playing) {
@@ -327,7 +339,7 @@ Game.prototype.endRound = function() {
} }
self.Interface.disableTakePoints(true); self.Interface.disableTakePoints(true);
self.Interface.disabledRoleDices(true); self.Interface.disableRoleDices(true);
self.Interface.setDices(self.dices); self.Interface.setDices(self.dices);
self.Interface.setPoints(self.points); self.Interface.setPoints(self.points);
self.Interface.setPlaying(self.playing); self.Interface.setPlaying(self.playing);
@@ -336,7 +348,7 @@ Game.prototype.endRound = function() {
self.Interface.disableTakePoints(true); self.Interface.disableTakePoints(true);
if (self.playing) { if (self.playing) {
self.Interface.disabledRoleDices(false); self.Interface.disableRoleDices(false);
} }
if (!self.playing) { if (!self.playing) {
js/interface.js
+9 -4
View File
@@ -134,7 +134,7 @@ Interface.prototype.disableTakePoints = function(disabled) {
this.pointsButton.disabled = disabled; this.pointsButton.disabled = disabled;
}; };
Interface.prototype.disabledRoleDices = function(disabled) { Interface.prototype.disableRoleDices = function(disabled) {
this.dicesButton.disabled = disabled; this.dicesButton.disabled = disabled;
}; };
@@ -173,7 +173,7 @@ Interface.prototype.setCpu = function(cpu) {
this.cpuScoreContainer.classList.add('zilch-' + cpu.zilch); this.cpuScoreContainer.classList.add('zilch-' + cpu.zilch);
}; };
Interface.prototype.showMessage = function(message, fade) { Interface.prototype.showMessage = function(message, fade, callback) {
var self = this; var self = this;
self.message.innerHTML = '<p>' + message + '</p>'; self.message.innerHTML = '<p>' + message + '</p>';
@@ -182,11 +182,16 @@ Interface.prototype.showMessage = function(message, fade) {
if (fade) { if (fade) {
setTimeout(function() { setTimeout(function() {
self.clearMessage(); self.clearMessage(callback);
}, fade); }, fade);
} else if (callback) {
callback();
} }
}; };
Interface.prototype.clearMessage = function() { Interface.prototype.clearMessage = function(callback) {
this.message.classList.remove('visible'); this.message.classList.remove('visible');
if (callback) {
callback();
}
}; };
style/main.css
+6 -4
View File
@@ -71,6 +71,8 @@ hr {
} }
.top .button { .top .button {
position: relative;
top: -18px;
margin: 0 88px; margin: 0 88px;
} }
@@ -299,10 +301,6 @@ hr {
text-align: center; text-align: center;
} }
.action .button {
margin-top: 15px;
}
.pointsContainer { .pointsContainer {
position: relative; position: relative;
display: inline-block; display: inline-block;
@@ -327,3 +325,7 @@ hr {
line-height: 25px; line-height: 25px;
font-weight: bold; font-weight: bold;
} }
.footer {
text-align: center;
}
style/mobile.css
+63
View File
@@ -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;
}
}