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

css improvements

Browse Source
This commit is contained in:
Lurkars
2017-04-22 16:37:33 +02:00
parent d57d531e53
commit 18cf7293e7
4 changed files with 499 additions and 483 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+13 -11
View File
@@ -3,6 +3,8 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="author" content="Lukas Haubaum">
<meta name="description" content="Simple javascript implementation of the Zilch game, also known as Dice 10000.">
<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" />
<link href="style/mobile.css" rel="stylesheet" type="text/css" /> <link href="style/mobile.css" rel="stylesheet" type="text/css" />
@@ -22,7 +24,7 @@
<div class="score" id="player-score"></div> <div class="score" id="player-score"></div>
<div class="zilch" id="player-zilch"></div> <div class="zilch" id="player-zilch"></div>
</div> </div>
<button class="button" id="restart-button">New Game</button> <div class="button" id="restart-button">New Game</div>
<div class="score-container cpu" id="cpu-score-container"> <div class="score-container cpu" id="cpu-score-container">
<label class="label" for="cpu-score">CPU</label> <label class="label" for="cpu-score">CPU</label>
<div class="score" id="cpu-score"></div> <div class="score" id="cpu-score"></div>
@@ -32,27 +34,27 @@
<div class="dices-container"> <div class="dices-container">
<div class="message" id="message"></div> <div class="message" id="message"></div>
<div class="dices" id="dices"> <div class="dices" id="dices">
<button class="dice"></button> <div class="dice"></div>
<button class="dice"></button> <div class="dice"></div>
<button class="dice"></button> <div class="dice"></div>
<button class="dice"></button> <div class="dice"></div>
<button class="dice"></button> <div class="dice"></div>
<button class="dice"></button> <div class="dice"></div>
</div> </div>
</div> </div>
<div class="action"> <div class="action">
<button class="button" id="points-button">Take Points</button> <div class="button" id="points-button">Take Points</div>
<div class="pointsContainer"> <div class="pointsContainer">
<label class="label" for="points">Points</label> <label class="label" for="points">Points</label>
<div class="points" id="points"></div> <div class="points" id="points"></div>
</div> </div>
<button class="button" id="dices-button">Roll Dice/s</button> <div class="button" id="dices-button">Roll Dice/s</div>
</div> </div>
</div> </div>
<hr /> <hr />
<p> <p>
<strong class="uppercase">How to play:</strong> The goal is to make over <strong>10000</strong> points. You roll six dices and take points. If you score 300 points and above, you can end the round and score the points. This is the score table: <strong class="uppercase">How to play:</strong> The goal is to make over <strong>10000</strong> points. You roll six dices and take points. If you score 300 points and above, you can end the round and take the points. This is the score table:
<ul> <ul>
<li>Single <i>fives</i> <strong>50</strong> each</li> <li>Single <i>fives</i> <strong>50</strong> each</li>
<li>Single <i>ones</i> <strong>100</strong> each</li> <li>Single <i>ones</i> <strong>100</strong> each</li>
@@ -61,7 +63,7 @@
<li>Straight <strong>1500</strong></li> <li>Straight <strong>1500</strong></li>
<li>Three pairs <strong>1500</strong></li> <li>Three pairs <strong>1500</strong></li>
</ul> </ul>
If you cannot take any points, you get a <strong>Zilch</strong> and end the round. After three <strong>Zilchs</strong> in a row, you get a <strong>-500</strong> points penalty. If you scored with all six dices, you cann roll again. If you cannot score any points, you get a <strong>Zilch</strong> and end the round. After three <strong>Zilchs</strong> in a row, you get a <strong>-500</strong> points penalty. If you scored with all six dices, you cann roll again.
</p> </p>
<p>For more information see <a href="https://en.wikipedia.org/wiki/Dice_10000" target="_blank">Dice 10000 - Wikipedia</a>.</p> <p>For more information see <a href="https://en.wikipedia.org/wiki/Dice_10000" target="_blank">Dice 10000 - Wikipedia</a>.</p>
js/interface.js
+26 -12
View File
@@ -22,22 +22,24 @@ function Interface() {
self.message = document.querySelector('#message'); self.message = document.querySelector('#message');
self.dicesButton.disabled = true; self.dicesButton.classList.add("disabled");
self.pointsButton.disabled = true; self.pointsButton.classList.add("disabled");
self.restartButton.addEventListener("click", function() { self.restartButton.addEventListener("click", function() {
if (!this.classList.contains('disabled')) {
self.fireEvent("restart"); self.fireEvent("restart");
}
}); });
self.pointsButton.addEventListener("click", function() { self.pointsButton.addEventListener("click", function() {
if (self.playing) { if (self.playing && !this.classList.contains('disabled')) {
self.fireEvent("takePoints"); self.fireEvent("takePoints");
} }
}); });
self.dicesButton.addEventListener("click", function() { self.dicesButton.addEventListener("click", function() {
if (self.playing) { if (self.playing && !this.classList.contains('disabled')) {
self.fireEvent("addPoints"); self.fireEvent("addPoints");
self.fireEvent("rollDices"); self.fireEvent("rollDices");
} }
@@ -47,7 +49,7 @@ function Interface() {
var diceContainer = self.dices[diceIndex]; var diceContainer = self.dices[diceIndex];
diceContainer.diceIndex = diceIndex; diceContainer.diceIndex = diceIndex;
diceContainer.addEventListener("click", function() { diceContainer.addEventListener("click", function() {
if (self.playing) { if (self.playing && !this.classList.contains('disabled')) {
self.fireEvent("toggleDice", this.diceIndex); self.fireEvent("toggleDice", this.diceIndex);
} }
}); });
@@ -57,8 +59,8 @@ function Interface() {
}; };
Interface.prototype.setup = function() { Interface.prototype.setup = function() {
this.dicesButton.disabled = true; this.dicesButton.classList.add("disabled");
this.pointsButton.disabled = true; this.pointsButton.classList.add("disabled");
this.message.classList.remove('visible'); this.message.classList.remove('visible');
}; };
@@ -88,9 +90,9 @@ Interface.prototype.setDices = function(dices) {
diceContainer.innerHTML = dice.value + 1; diceContainer.innerHTML = dice.value + 1;
if (dice.disabled) { if (dice.disabled) {
diceContainer.disabled = true; diceContainer.classList.add('disabled');
} else { } else {
diceContainer.disabled = false; diceContainer.classList.remove('disabled');
} }
if (dice.selected) { if (dice.selected) {
@@ -133,15 +135,27 @@ Interface.prototype.animateDices = function(dices, timeout, callback) {
}; };
Interface.prototype.disableRestart = function(disabled) { Interface.prototype.disableRestart = function(disabled) {
this.restartButton.disabled = disabled; if (disabled) {
this.restartButton.classList.add("disabled")
} else {
this.restartButton.classList.remove("disabled")
}
}; };
Interface.prototype.disableTakePoints = function(disabled) { Interface.prototype.disableTakePoints = function(disabled) {
this.pointsButton.disabled = disabled; if (disabled) {
this.pointsButton.classList.add("disabled")
} else {
this.pointsButton.classList.remove("disabled")
}
}; };
Interface.prototype.disableRollDices = function(disabled) { Interface.prototype.disableRollDices = function(disabled) {
this.dicesButton.disabled = disabled; if (disabled) {
this.dicesButton.classList.add("disabled")
} else {
this.dicesButton.classList.remove("disabled")
}
}; };
Interface.prototype.setPoints = function(points) { Interface.prototype.setPoints = function(points) {
style/main.css
+3 -3
View File
@@ -62,7 +62,7 @@ hr {
font-weight: bold; font-weight: bold;
} }
.button:disabled { .button.disabled {
cursor: auto; cursor: auto;
background: #ede0c8; background: #ede0c8;
color: #776e65; color: #776e65;
@@ -163,7 +163,7 @@ hr {
border: 0; border: 0;
background: #eee4da; background: #eee4da;
border-radius: 3px; border-radius: 3px;
padding: 0 20px; text-align: center;
font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif; font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif;
font-size: 55px; font-size: 55px;
line-height: 100px; line-height: 100px;
@@ -177,7 +177,7 @@ hr {
outline: none; outline: none;
} }
.dice:disabled { .dice.disabled {
cursor: auto; cursor: auto;
background: rgba(238, 228, 218, 0.35); background: rgba(238, 228, 218, 0.35);
} }