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" />
<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>
js/game.js
+64 -52
View File
@@ -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;
}
var history = {};
history['player'] = '-500';
self.history.push(history);
}
} else {
self.cpu.zilch++;
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['cpu'] = '-500';
self.history.push(history);
}
}
self.Interface.animateDices(self.dices, function() {
self.Interface.showMessage("Zilch!", 1000);
});
self.endRound();
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;
}
var history = {};
history['player'] = '-500';
self.history.push(history);
}
} else {
self.cpu.zilch++;
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['cpu'] = '-500';
self.history.push(history);
}
}
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) {
js/interface.js
+9 -4
View File
@@ -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();
}
};
style/main.css
+6 -4
View File
@@ -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;
}
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;
}
}