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