css improvements
This commit is contained in:
Lurkars
+68
-66
@@ -2,80 +2,82 @@
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>openzilch.js</title>
|
||||
<link href="style/main.css" rel="stylesheet" type="text/css" />
|
||||
<link href="style/mobile.css" rel="stylesheet" type="text/css" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<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>
|
||||
<link href="style/main.css" rel="stylesheet" type="text/css" />
|
||||
<link href="style/mobile.css" rel="stylesheet" type="text/css" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1>openzilch.js</h1>
|
||||
<p class="description">Simple javascript implementation of the <strong>Zilch</strong> game, also known as <strong>Dice 10000</strong>.</p>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1>openzilch.js</h1>
|
||||
<p class="description">Simple javascript implementation of the <strong>Zilch</strong> game, also known as <strong>Dice 10000</strong>.</p>
|
||||
</div>
|
||||
<div class="game">
|
||||
<div class="top">
|
||||
<div class="score-container player" id="player-score-container">
|
||||
<label class="label" for="player-score">Player</label>
|
||||
<div class="score" id="player-score"></div>
|
||||
<div class="zilch" id="player-zilch"></div>
|
||||
</div>
|
||||
<div class="game">
|
||||
<div class="top">
|
||||
<div class="score-container player" id="player-score-container">
|
||||
<label class="label" for="player-score">Player</label>
|
||||
<div class="score" id="player-score"></div>
|
||||
<div class="zilch" id="player-zilch"></div>
|
||||
</div>
|
||||
<button class="button" id="restart-button">New Game</button>
|
||||
<div class="score-container cpu" id="cpu-score-container">
|
||||
<label class="label" for="cpu-score">CPU</label>
|
||||
<div class="score" id="cpu-score"></div>
|
||||
<div class="zilch" id="cpu-zilch"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dices-container">
|
||||
<div class="message" id="message"></div>
|
||||
<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>
|
||||
</div>
|
||||
<div class="action">
|
||||
<button class="button" id="points-button">Take Points</button>
|
||||
<div class="pointsContainer">
|
||||
<label class="label" for="points">Points</label>
|
||||
<div class="points" id="points"></div>
|
||||
</div>
|
||||
<button class="button" id="dices-button">Roll Dice/s</button>
|
||||
</div>
|
||||
<div class="button" id="restart-button">New Game</div>
|
||||
<div class="score-container cpu" id="cpu-score-container">
|
||||
<label class="label" for="cpu-score">CPU</label>
|
||||
<div class="score" id="cpu-score"></div>
|
||||
<div class="zilch" id="cpu-zilch"></div>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
<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:
|
||||
<ul>
|
||||
<li>Single <i>fives</i> <strong>50</strong> each</li>
|
||||
<li>Single <i>ones</i> <strong>100</strong> each</li>
|
||||
<li>Three of a kind <strong>100 x [number]</strong> exception three <i>ones</i> scoring <strong>1000</strong></li>
|
||||
<li>Four/Five/Six of a kind doubles the <i>Three/Four/Five of a kind</i> points</li>
|
||||
<li>Straight <strong>1500</strong></li>
|
||||
<li>Three pairs <strong>1500</strong></li>
|
||||
</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.
|
||||
</p>
|
||||
|
||||
<p>For more information see <a href="https://en.wikipedia.org/wiki/Dice_10000" target="_blank">Dice 10000 - Wikipedia</a>.</p>
|
||||
<hr />
|
||||
<div class="footer">
|
||||
<p><a href="https://github.com/lurkars/openzilch.js" target="_blank">GitHub</a></p>
|
||||
</div>
|
||||
<div class="dices-container">
|
||||
<div class="message" id="message"></div>
|
||||
<div class="dices" id="dices">
|
||||
<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>
|
||||
<hr />
|
||||
<p>Created by <a href="https://www.champonthis.de">Lukas Haubaum</a>. Design and code inspiration by <a href="https://gabrielecirulli.github.io/2048/" target="_blank">Gabriele Cirulli's 2048</a>.</p>
|
||||
|
||||
</div>
|
||||
<div class="action">
|
||||
<div class="button" id="points-button">Take Points</div>
|
||||
<div class="pointsContainer">
|
||||
<label class="label" for="points">Points</label>
|
||||
<div class="points" id="points"></div>
|
||||
</div>
|
||||
<div class="button" id="dices-button">Roll Dice/s</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="js/interface.js"></script>
|
||||
<script type="text/javascript" src="js/game.js"></script>
|
||||
<hr />
|
||||
<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 take the points. This is the score table:
|
||||
<ul>
|
||||
<li>Single <i>fives</i> <strong>50</strong> each</li>
|
||||
<li>Single <i>ones</i> <strong>100</strong> each</li>
|
||||
<li>Three of a kind <strong>100 x [number]</strong> exception three <i>ones</i> scoring <strong>1000</strong></li>
|
||||
<li>Four/Five/Six of a kind doubles the <i>Three/Four/Five of a kind</i> points</li>
|
||||
<li>Straight <strong>1500</strong></li>
|
||||
<li>Three pairs <strong>1500</strong></li>
|
||||
</ul>
|
||||
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>For more information see <a href="https://en.wikipedia.org/wiki/Dice_10000" target="_blank">Dice 10000 - Wikipedia</a>.</p>
|
||||
<hr />
|
||||
<div class="footer">
|
||||
<p><a href="https://github.com/lurkars/openzilch.js" target="_blank">GitHub</a></p>
|
||||
</div>
|
||||
<hr />
|
||||
<p>Created by <a href="https://www.champonthis.de">Lukas Haubaum</a>. Design and code inspiration by <a href="https://gabrielecirulli.github.io/2048/" target="_blank">Gabriele Cirulli's 2048</a>.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="js/interface.js"></script>
|
||||
<script type="text/javascript" src="js/game.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
+148
-134
@@ -1,204 +1,218 @@
|
||||
function Interface() {
|
||||
|
||||
var self = this;
|
||||
var self = this;
|
||||
|
||||
self.events = {};
|
||||
self.events = {};
|
||||
|
||||
self.restartButton = document.querySelector('#restart-button');
|
||||
self.restartButton = document.querySelector('#restart-button');
|
||||
|
||||
self.playerScoreContainer = document.querySelector('#player-score-container');
|
||||
self.playerScore = document.querySelector('#player-score');
|
||||
self.playerZilch = document.querySelector('#player-zilch');
|
||||
self.playerScoreContainer = document.querySelector('#player-score-container');
|
||||
self.playerScore = document.querySelector('#player-score');
|
||||
self.playerZilch = document.querySelector('#player-zilch');
|
||||
|
||||
self.cpuScoreContainer = document.querySelector('#cpu-score-container');
|
||||
self.cpuScore = document.querySelector('#cpu-score');
|
||||
self.cpuZilch = document.querySelector('#cpu-zilch');
|
||||
self.cpuScoreContainer = document.querySelector('#cpu-score-container');
|
||||
self.cpuScore = document.querySelector('#cpu-score');
|
||||
self.cpuZilch = document.querySelector('#cpu-zilch');
|
||||
|
||||
self.points = document.querySelector('#points');
|
||||
self.pointsButton = document.querySelector('#points-button');
|
||||
self.dicesButton = document.querySelector('#dices-button');
|
||||
self.diceContainer = document.querySelector('#dices');
|
||||
self.dices = self.diceContainer.children;
|
||||
self.points = document.querySelector('#points');
|
||||
self.pointsButton = document.querySelector('#points-button');
|
||||
self.dicesButton = document.querySelector('#dices-button');
|
||||
self.diceContainer = document.querySelector('#dices');
|
||||
self.dices = self.diceContainer.children;
|
||||
|
||||
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.fireEvent("restart");
|
||||
});
|
||||
|
||||
self.pointsButton.addEventListener("click", function() {
|
||||
if (self.playing) {
|
||||
self.fireEvent("takePoints");
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
self.dicesButton.addEventListener("click", function() {
|
||||
if (self.playing) {
|
||||
self.fireEvent("addPoints");
|
||||
self.fireEvent("rollDices");
|
||||
}
|
||||
});
|
||||
|
||||
for (var diceIndex = 0; diceIndex < 6; diceIndex++) {
|
||||
var diceContainer = self.dices[diceIndex];
|
||||
diceContainer.diceIndex = diceIndex;
|
||||
diceContainer.addEventListener("click", function() {
|
||||
if (self.playing) {
|
||||
self.fireEvent("toggleDice", this.diceIndex);
|
||||
}
|
||||
});
|
||||
self.restartButton.addEventListener("click", function() {
|
||||
if (!this.classList.contains('disabled')) {
|
||||
self.fireEvent("restart");
|
||||
}
|
||||
});
|
||||
|
||||
this.setup();
|
||||
self.pointsButton.addEventListener("click", function() {
|
||||
if (self.playing && !this.classList.contains('disabled')) {
|
||||
self.fireEvent("takePoints");
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
self.dicesButton.addEventListener("click", function() {
|
||||
if (self.playing && !this.classList.contains('disabled')) {
|
||||
self.fireEvent("addPoints");
|
||||
self.fireEvent("rollDices");
|
||||
}
|
||||
});
|
||||
|
||||
for (var diceIndex = 0; diceIndex < 6; diceIndex++) {
|
||||
var diceContainer = self.dices[diceIndex];
|
||||
diceContainer.diceIndex = diceIndex;
|
||||
diceContainer.addEventListener("click", function() {
|
||||
if (self.playing && !this.classList.contains('disabled')) {
|
||||
self.fireEvent("toggleDice", this.diceIndex);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
this.setup();
|
||||
};
|
||||
|
||||
Interface.prototype.setup = function() {
|
||||
this.dicesButton.disabled = true;
|
||||
this.pointsButton.disabled = true;
|
||||
this.message.classList.remove('visible');
|
||||
this.dicesButton.classList.add("disabled");
|
||||
this.pointsButton.classList.add("disabled");
|
||||
this.message.classList.remove('visible');
|
||||
|
||||
};
|
||||
|
||||
Interface.prototype.on = function(event, callback) {
|
||||
if (!this.events[event]) {
|
||||
this.events[event] = [];
|
||||
}
|
||||
this.events[event].push(callback);
|
||||
if (!this.events[event]) {
|
||||
this.events[event] = [];
|
||||
}
|
||||
this.events[event].push(callback);
|
||||
};
|
||||
|
||||
Interface.prototype.fireEvent = function(event, data) {
|
||||
var callbacks = this.events[event];
|
||||
if (callbacks) {
|
||||
callbacks.forEach(function(callback) {
|
||||
callback(data);
|
||||
});
|
||||
}
|
||||
var callbacks = this.events[event];
|
||||
if (callbacks) {
|
||||
callbacks.forEach(function(callback) {
|
||||
callback(data);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
Interface.prototype.setDices = function(dices) {
|
||||
var self = this;
|
||||
var self = this;
|
||||
|
||||
for (var diceIndex = 0; diceIndex < 6; diceIndex++) {
|
||||
var dice = dices[diceIndex];
|
||||
var diceContainer = self.dices[diceIndex];
|
||||
diceContainer.innerHTML = dice.value + 1;
|
||||
for (var diceIndex = 0; diceIndex < 6; diceIndex++) {
|
||||
var dice = dices[diceIndex];
|
||||
var diceContainer = self.dices[diceIndex];
|
||||
diceContainer.innerHTML = dice.value + 1;
|
||||
|
||||
if (dice.disabled) {
|
||||
diceContainer.disabled = true;
|
||||
} else {
|
||||
diceContainer.disabled = false;
|
||||
}
|
||||
|
||||
if (dice.selected) {
|
||||
diceContainer.classList.add('selected');
|
||||
} else {
|
||||
diceContainer.classList.remove('selected');
|
||||
}
|
||||
|
||||
if (dice.invalid) {
|
||||
diceContainer.classList.add('invalid');
|
||||
diceContainer.classList.remove('selected');
|
||||
} else {
|
||||
diceContainer.classList.remove('invalid');
|
||||
}
|
||||
if (dice.disabled) {
|
||||
diceContainer.classList.add('disabled');
|
||||
} else {
|
||||
diceContainer.classList.remove('disabled');
|
||||
}
|
||||
|
||||
if (dice.selected) {
|
||||
diceContainer.classList.add('selected');
|
||||
} else {
|
||||
diceContainer.classList.remove('selected');
|
||||
}
|
||||
|
||||
if (dice.invalid) {
|
||||
diceContainer.classList.add('invalid');
|
||||
diceContainer.classList.remove('selected');
|
||||
} else {
|
||||
diceContainer.classList.remove('invalid');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
};
|
||||
|
||||
Interface.prototype.animateDices = function(dices, timeout, callback) {
|
||||
var self = this;
|
||||
for (var diceIndex = 0; diceIndex < 6; diceIndex++) {
|
||||
var dice = dices[diceIndex];
|
||||
if (!dice.disabled && !dice.selected) {
|
||||
self.dices[diceIndex].classList.add("animate");
|
||||
self.dices[diceIndex].classList.add("duration" + diceIndex);
|
||||
}
|
||||
var self = this;
|
||||
for (var diceIndex = 0; diceIndex < 6; diceIndex++) {
|
||||
var dice = dices[diceIndex];
|
||||
if (!dice.disabled && !dice.selected) {
|
||||
self.dices[diceIndex].classList.add("animate");
|
||||
self.dices[diceIndex].classList.add("duration" + diceIndex);
|
||||
}
|
||||
}
|
||||
|
||||
setTimeout(function() {
|
||||
for (var diceIndex = 0; diceIndex < 6; diceIndex++) {
|
||||
self.dices[diceIndex].classList.remove("animate");
|
||||
}
|
||||
if (callback) {
|
||||
callback();
|
||||
}
|
||||
}, timeout ? timeout : 0);
|
||||
setTimeout(function() {
|
||||
for (var diceIndex = 0; diceIndex < 6; diceIndex++) {
|
||||
self.dices[diceIndex].classList.remove("animate");
|
||||
}
|
||||
if (callback) {
|
||||
callback();
|
||||
}
|
||||
}, timeout ? timeout : 0);
|
||||
};
|
||||
|
||||
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) {
|
||||
this.pointsButton.disabled = disabled;
|
||||
if (disabled) {
|
||||
this.pointsButton.classList.add("disabled")
|
||||
} else {
|
||||
this.pointsButton.classList.remove("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) {
|
||||
this.points.innerHTML = points;
|
||||
this.points.innerHTML = points;
|
||||
};
|
||||
|
||||
Interface.prototype.setPlaying = function(playing) {
|
||||
if (playing) {
|
||||
this.playing = true;
|
||||
this.playerScoreContainer.classList.add('active');
|
||||
this.cpuScoreContainer.classList.remove('active');
|
||||
} else {
|
||||
this.playing = false;
|
||||
this.playerScoreContainer.classList.remove('active');
|
||||
this.cpuScoreContainer.classList.add('active');
|
||||
}
|
||||
if (playing) {
|
||||
this.playing = true;
|
||||
this.playerScoreContainer.classList.add('active');
|
||||
this.cpuScoreContainer.classList.remove('active');
|
||||
} else {
|
||||
this.playing = false;
|
||||
this.playerScoreContainer.classList.remove('active');
|
||||
this.cpuScoreContainer.classList.add('active');
|
||||
}
|
||||
};
|
||||
|
||||
Interface.prototype.setPlayer = function(player) {
|
||||
this.playerScore.innerHTML = player.score;
|
||||
var zilchs = '';
|
||||
for (var i = 0; i < player.zilch; i++) {
|
||||
zilchs += '<div class="point"></div>';
|
||||
}
|
||||
this.playerZilch.innerHTML = zilchs;
|
||||
this.playerScore.innerHTML = player.score;
|
||||
var zilchs = '';
|
||||
for (var i = 0; i < player.zilch; i++) {
|
||||
zilchs += '<div class="point"></div>';
|
||||
}
|
||||
this.playerZilch.innerHTML = zilchs;
|
||||
|
||||
};
|
||||
|
||||
Interface.prototype.setCpu = function(cpu) {
|
||||
this.cpuScore.innerHTML = cpu.score;
|
||||
var zilchs = '';
|
||||
for (var i = 0; i < cpu.zilch; i++) {
|
||||
zilchs += '<div class="point"></div>';
|
||||
}
|
||||
this.cpuScore.innerHTML = cpu.score;
|
||||
var zilchs = '';
|
||||
for (var i = 0; i < cpu.zilch; i++) {
|
||||
zilchs += '<div class="point"></div>';
|
||||
}
|
||||
|
||||
this.cpuZilch.innerHTML = zilchs;
|
||||
this.cpuZilch.innerHTML = zilchs;
|
||||
};
|
||||
|
||||
Interface.prototype.showMessage = function(message, timeout, callback) {
|
||||
var self = this;
|
||||
var self = this;
|
||||
|
||||
self.message.innerHTML = '<p>' + message + '</p>';
|
||||
self.message.innerHTML = '<p>' + message + '</p>';
|
||||
|
||||
self.message.classList.add('visible');
|
||||
self.message.classList.add('visible');
|
||||
|
||||
if (timeout) {
|
||||
setTimeout(function() {
|
||||
self.clearMessage(callback);
|
||||
}, timeout);
|
||||
} else if (callback) {
|
||||
callback();
|
||||
}
|
||||
if (timeout) {
|
||||
setTimeout(function() {
|
||||
self.clearMessage(callback);
|
||||
}, timeout);
|
||||
} else if (callback) {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
|
||||
Interface.prototype.clearMessage = function(callback) {
|
||||
this.message.classList.remove('visible');
|
||||
if (callback) {
|
||||
callback();
|
||||
}
|
||||
this.message.classList.remove('visible');
|
||||
if (callback) {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
|
||||
+220
-220
@@ -1,355 +1,355 @@
|
||||
@font-face {
|
||||
font-family: 'Clear Sans';
|
||||
src: url('fonts/ClearSans-Regular-webfont.eot');
|
||||
src: url('fonts/ClearSans-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/ClearSans-Regular-webfont.woff') format('woff'), url('fonts/ClearSans-Regular-webfont.ttf') format('truetype'), url('fonts/ClearSans-Regular-webfont.svg#clear_sansregular') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-family: 'Clear Sans';
|
||||
src: url('fonts/ClearSans-Regular-webfont.eot');
|
||||
src: url('fonts/ClearSans-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/ClearSans-Regular-webfont.woff') format('woff'), url('fonts/ClearSans-Regular-webfont.ttf') format('truetype'), url('fonts/ClearSans-Regular-webfont.svg#clear_sansregular') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #faf8ef;
|
||||
font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
color: #776e65;
|
||||
background: #faf8ef;
|
||||
font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
color: #776e65;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #776e65;
|
||||
font-weight: bold;
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
color: #776e65;
|
||||
font-weight: bold;
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: none;
|
||||
border-bottom: 1px solid #d8d4d0;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 30px;
|
||||
border: none;
|
||||
border-bottom: 1px solid #d8d4d0;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.uppercase {
|
||||
text-transform: uppercase;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 500px;
|
||||
margin: 0 auto;
|
||||
width: 500px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: inline-block;
|
||||
height: 40px;
|
||||
border: 0;
|
||||
background: #8f7a66;
|
||||
border-radius: 3px;
|
||||
padding: 0 20px;
|
||||
font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
color: #f9f6f2;
|
||||
text-decoration: none;
|
||||
line-height: 42px;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
height: 40px;
|
||||
border: 0;
|
||||
background: #8f7a66;
|
||||
border-radius: 3px;
|
||||
padding: 0 20px;
|
||||
font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
color: #f9f6f2;
|
||||
text-decoration: none;
|
||||
line-height: 42px;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.button:disabled {
|
||||
cursor: auto;
|
||||
background: #ede0c8;
|
||||
color: #776e65;
|
||||
.button.disabled {
|
||||
cursor: auto;
|
||||
background: #ede0c8;
|
||||
color: #776e65;
|
||||
}
|
||||
|
||||
.top {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
height: 75px;
|
||||
margin-bottom: 25px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
height: 75px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.top .button {
|
||||
margin-top: 18px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.score-container {
|
||||
color: gray;
|
||||
display: inline-block;
|
||||
width: 85px;
|
||||
height: 75px;
|
||||
background: #bbada0;
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
color: gray;
|
||||
display: inline-block;
|
||||
width: 85px;
|
||||
height: 75px;
|
||||
background: #bbada0;
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#player-score-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#cpu-score-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.score-container .label {
|
||||
font-size: 13px;
|
||||
line-height: 13px;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
font-size: 13px;
|
||||
line-height: 13px;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.score-container.active {
|
||||
color: #f9f6f2;
|
||||
color: #f9f6f2;
|
||||
}
|
||||
|
||||
.score-container .score {
|
||||
font-size: 25px;
|
||||
line-height: 25px;
|
||||
font-weight: bold;
|
||||
font-size: 25px;
|
||||
line-height: 25px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.score-container .zilch {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 25px;
|
||||
text-align: center;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.score-container .zilch .point {
|
||||
background-color: gray;
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin: 0px 3px;
|
||||
background-color: gray;
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin: 0px 3px;
|
||||
}
|
||||
|
||||
.score-container.active .zilch .point {
|
||||
background-color: #f9f6f2;
|
||||
background-color: #f9f6f2;
|
||||
}
|
||||
|
||||
.dices-container {
|
||||
position: relative;
|
||||
background: #bbada0;
|
||||
border-radius: 6px;
|
||||
width: 500px;
|
||||
height: 341px;
|
||||
position: relative;
|
||||
background: #bbada0;
|
||||
border-radius: 6px;
|
||||
width: 500px;
|
||||
height: 341px;
|
||||
}
|
||||
|
||||
.dices {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.dice {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border: 0;
|
||||
background: #eee4da;
|
||||
border-radius: 3px;
|
||||
padding: 0 20px;
|
||||
font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif;
|
||||
font-size: 55px;
|
||||
line-height: 100px;
|
||||
font-weight: bold;
|
||||
color: #776e65;
|
||||
margin-top: 47px;
|
||||
margin-left: 47px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border: 0;
|
||||
background: #eee4da;
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif;
|
||||
font-size: 55px;
|
||||
line-height: 100px;
|
||||
font-weight: bold;
|
||||
color: #776e65;
|
||||
margin-top: 47px;
|
||||
margin-left: 47px;
|
||||
}
|
||||
|
||||
.dice:focus {
|
||||
outline: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.dice:disabled {
|
||||
cursor: auto;
|
||||
background: rgba(238, 228, 218, 0.35);
|
||||
.dice.disabled {
|
||||
cursor: auto;
|
||||
background: rgba(238, 228, 218, 0.35);
|
||||
}
|
||||
|
||||
.dice.selected {
|
||||
background: #ede0c8;
|
||||
background: #ede0c8;
|
||||
}
|
||||
|
||||
.dice.invalid {
|
||||
background-color: #f2b179;
|
||||
background-color: #f2b179;
|
||||
}
|
||||
|
||||
@keyframes diceAnimation {
|
||||
0% {
|
||||
content: "1";
|
||||
}
|
||||
20% {
|
||||
content: "2";
|
||||
}
|
||||
40% {
|
||||
content: "3";
|
||||
}
|
||||
60% {
|
||||
content: "4";
|
||||
}
|
||||
80% {
|
||||
content: "5";
|
||||
}
|
||||
100% {
|
||||
content: "6";
|
||||
}
|
||||
0% {
|
||||
content: "1";
|
||||
}
|
||||
20% {
|
||||
content: "2";
|
||||
}
|
||||
40% {
|
||||
content: "3";
|
||||
}
|
||||
60% {
|
||||
content: "4";
|
||||
}
|
||||
80% {
|
||||
content: "5";
|
||||
}
|
||||
100% {
|
||||
content: "6";
|
||||
}
|
||||
}
|
||||
|
||||
.dice.animate:after {
|
||||
background: #eee4da;
|
||||
content: "1";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
animation: diceAnimation 0.5s linear infinite reverse;
|
||||
-webkit-animation: diceAnimation 0.5s linear infinite reverse;
|
||||
-moz-animation: diceAnimation 0.5s linear infinite reverse;
|
||||
-o-animation: diceAnimation 0.5s linear infinite reverse;
|
||||
-ms-animation: diceAnimation 0.5s linear infinite reverse;
|
||||
background: #eee4da;
|
||||
content: "1";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
animation: diceAnimation 0.5s linear infinite reverse;
|
||||
-webkit-animation: diceAnimation 0.5s linear infinite reverse;
|
||||
-moz-animation: diceAnimation 0.5s linear infinite reverse;
|
||||
-o-animation: diceAnimation 0.5s linear infinite reverse;
|
||||
-ms-animation: diceAnimation 0.5s linear infinite reverse;
|
||||
}
|
||||
|
||||
.dice.duration0.animate:after {
|
||||
animation-delay: 0.1s;
|
||||
-webkit-animation-delay: 0.1s;
|
||||
-moz-animation-delay: 0.1s;
|
||||
-o-animation-delay: 0.1s;
|
||||
-ms-animation-delay: 0.1s;
|
||||
animation-delay: 0.1s;
|
||||
-webkit-animation-delay: 0.1s;
|
||||
-moz-animation-delay: 0.1s;
|
||||
-o-animation-delay: 0.1s;
|
||||
-ms-animation-delay: 0.1s;
|
||||
}
|
||||
|
||||
.dice.duration1.animate:after {
|
||||
animation-delay: 0.3s;
|
||||
-webkit-animation-delay: 0.1s;
|
||||
-moz-animation-delay: 0.1s;
|
||||
-o-animation-delay: 0.1s;
|
||||
-ms-animation-delay: 0.1s;
|
||||
animation-delay: 0.3s;
|
||||
-webkit-animation-delay: 0.1s;
|
||||
-moz-animation-delay: 0.1s;
|
||||
-o-animation-delay: 0.1s;
|
||||
-ms-animation-delay: 0.1s;
|
||||
}
|
||||
|
||||
.dice.duration1.animate:after {
|
||||
animation-delay: 0.6s;
|
||||
-webkit-animation-delay: 0.1s;
|
||||
-moz-animation-delay: 0.1s;
|
||||
-o-animation-delay: 0.1s;
|
||||
-ms-animation-delay: 0.1s;
|
||||
animation-delay: 0.6s;
|
||||
-webkit-animation-delay: 0.1s;
|
||||
-moz-animation-delay: 0.1s;
|
||||
-o-animation-delay: 0.1s;
|
||||
-ms-animation-delay: 0.1s;
|
||||
}
|
||||
|
||||
.dice.duration3.animate:after {
|
||||
animation-delay: 0.7s;
|
||||
-webkit-animation-delay: 0.1s;
|
||||
-moz-animation-delay: 0.1s;
|
||||
-o-animation-delay: 0.1s;
|
||||
-ms-animation-delay: 0.1s;
|
||||
animation-delay: 0.7s;
|
||||
-webkit-animation-delay: 0.1s;
|
||||
-moz-animation-delay: 0.1s;
|
||||
-o-animation-delay: 0.1s;
|
||||
-ms-animation-delay: 0.1s;
|
||||
}
|
||||
|
||||
.dice.duration4.animate:after {
|
||||
animation-delay: 1.2s;
|
||||
-webkit-animation-delay: 0.1s;
|
||||
-moz-animation-delay: 0.1s;
|
||||
-o-animation-delay: 0.1s;
|
||||
-ms-animation-delay: 0.1s;
|
||||
animation-delay: 1.2s;
|
||||
-webkit-animation-delay: 0.1s;
|
||||
-moz-animation-delay: 0.1s;
|
||||
-o-animation-delay: 0.1s;
|
||||
-ms-animation-delay: 0.1s;
|
||||
}
|
||||
|
||||
.dice.duration5.animate:after {
|
||||
animation-delay: 1.5s;
|
||||
-webkit-animation-delay: 0.1s;
|
||||
-moz-animation-delay: 0.1s;
|
||||
-o-animation-delay: 0.1s;
|
||||
-ms-animation-delay: 0.1s;
|
||||
animation-delay: 1.5s;
|
||||
-webkit-animation-delay: 0.1s;
|
||||
-moz-animation-delay: 0.1s;
|
||||
-o-animation-delay: 0.1s;
|
||||
-ms-animation-delay: 0.1s;
|
||||
}
|
||||
|
||||
.message {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: rgba(238, 228, 218, 0.5);
|
||||
z-index: 100;
|
||||
text-align: center;
|
||||
z-index: 5;
|
||||
transition: all 0.5s ease-out;
|
||||
-webkit-transition: all 0.5s ease-out;
|
||||
-moz-transition: all 0.5s ease-out;
|
||||
-o-transition: all 0.5s ease-out;
|
||||
-ms-transition: all 0.5s ease-out;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: rgba(238, 228, 218, 0.5);
|
||||
z-index: 100;
|
||||
text-align: center;
|
||||
z-index: 5;
|
||||
transition: all 0.5s ease-out;
|
||||
-webkit-transition: all 0.5s ease-out;
|
||||
-moz-transition: all 0.5s ease-out;
|
||||
-o-transition: all 0.5s ease-out;
|
||||
-ms-transition: all 0.5s ease-out;
|
||||
}
|
||||
|
||||
.message.visible {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.message p {
|
||||
font-size: 60px;
|
||||
font-weight: bold;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
margin-top: 150px;
|
||||
font-size: 60px;
|
||||
font-weight: bold;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
margin-top: 150px;
|
||||
}
|
||||
|
||||
.action {
|
||||
position: relative;
|
||||
margin-top: 25px;
|
||||
height: 75px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
margin-top: 25px;
|
||||
height: 75px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#points-button {
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
left: 0px;
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
#dices-button {
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
right: 0px;
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
.pointsContainer {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 85px;
|
||||
height: 75px;
|
||||
background: #ede0c8;
|
||||
color: #776e65;
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 85px;
|
||||
height: 75px;
|
||||
background: #ede0c8;
|
||||
color: #776e65;
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pointsContainer .label {
|
||||
font-size: 13px;
|
||||
line-height: 13px;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
font-size: 13px;
|
||||
line-height: 13px;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.pointsContainer .points {
|
||||
font-size: 25px;
|
||||
line-height: 25px;
|
||||
font-weight: bold;
|
||||
font-size: 25px;
|
||||
line-height: 25px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.footer {
|
||||
text-align: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
+63
-63
@@ -1,65 +1,65 @@
|
||||
@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 3px;
|
||||
}
|
||||
.top .button {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
#points-button {
|
||||
top: 10px;
|
||||
}
|
||||
#dices-button {
|
||||
top: 10px;
|
||||
}
|
||||
.pointsContainer {
|
||||
width: 75px;
|
||||
height: 60px;
|
||||
}
|
||||
.pointsContainer .points {
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
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 3px;
|
||||
}
|
||||
.top .button {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
#points-button {
|
||||
top: 10px;
|
||||
}
|
||||
#dices-button {
|
||||
top: 10px;
|
||||
}
|
||||
.pointsContainer {
|
||||
width: 75px;
|
||||
height: 60px;
|
||||
}
|
||||
.pointsContainer .points {
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user