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

css improvements

master
Lurkars 8 years ago
parent
d57d531e53
commit
18cf7293e7
4 changed files with 498 additions and 482 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 24
      index.html
  2. 38
      js/interface.js
  3. 6
      style/main.css

24
index.html
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>
<button class="dice"></button>
<button class="dice"></button>
<button class="dice"></button>
<button class="dice"></button>
<button class="dice"></button>
<div class="dice"></div>
<div class="dice"></div>
<div class="dice"></div>
<div class="dice"></div>
<div class="dice"></div>
<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>

38
js/interface.js
View File

@ -22,22 +22,24 @@ function Interface() {
self.message = document.querySelector('#message'); self.message = document.querySelector('#message');
self.dicesButton.disabled = true;
self.pointsButton.disabled = true;
self.dicesButton.classList.add("disabled");
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.pointsButton.disabled = true;
this.dicesButton.classList.add("disabled");
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) {

6
style/main.css
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);
} }

Write Preview
Loading…
Cancel
Save