diff --git a/index.html b/index.html index 96580d5..d46f24d 100644 --- a/index.html +++ b/index.html @@ -2,80 +2,82 @@ - - openzilch.js - - - + + + + openzilch.js + + + -
-
-

openzilch.js

-

Simple javascript implementation of the Zilch game, also known as Dice 10000.

+
+
+

openzilch.js

+

Simple javascript implementation of the Zilch game, also known as Dice 10000.

+
+
+
+
+ +
+
-
-
-
- -
-
-
- -
- -
-
-
-
-
-
-
- - - - - - -
-
-
- -
- -
-
- -
+
New Game
+
+ +
+
- -
-

- How to play: The goal is to make over 10000 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: -

    -
  • Single fives 50 each
    • -
  • Single ones 100 each
    • -
  • Three of a kind 100 x [number] exception three ones scoring 1000
    • -
  • Four/Five/Six of a kind doubles the Three/Four/Five of a kind points
    • -
  • Straight 1500
    • -
  • Three pairs 1500
    • -
- If you cannot take any points, you get a Zilch and end the round. After three Zilchs in a row, you get a -500 points penalty. If you scored with all six dices, you cann roll again. -

- -

For more information see Dice 10000 - Wikipedia.

-
-
-

GitHub

+
+
+
+
+
+
+
+
+
+
+
+
+
+
Take Points
+
+ +
-
-

Created by Lukas Haubaum. Design and code inspiration by Gabriele Cirulli's 2048.

+
Roll Dice/s
+
+
+ +
+

+ How to play: The goal is to make over 10000 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: +

    +
  • Single fives 50 each
    • +
  • Single ones 100 each
    • +
  • Three of a kind 100 x [number] exception three ones scoring 1000
    • +
  • Four/Five/Six of a kind doubles the Three/Four/Five of a kind points
    • +
  • Straight 1500
    • +
  • Three pairs 1500
    • +
+ If you cannot score any points, you get a Zilch and end the round. After three Zilchs in a row, you get a -500 points penalty. If you scored with all six dices, you cann roll again. +

+

For more information see Dice 10000 - Wikipedia.

+
+
+

GitHub

+
+

Created by Lukas Haubaum. Design and code inspiration by Gabriele Cirulli's 2048.

+ +
- - + + diff --git a/js/interface.js b/js/interface.js index b04cb00..07f1a1a 100644 --- a/js/interface.js +++ b/js/interface.js @@ -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.restartButton.addEventListener("click", function() { + if (!this.classList.contains('disabled')) { + self.fireEvent("restart"); + } + }); - self.pointsButton.addEventListener("click", function() { - if (self.playing) { - self.fireEvent("takePoints"); - } - }); + self.pointsButton.addEventListener("click", function() { + if (self.playing && !this.classList.contains('disabled')) { + 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.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(); + 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; - - 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'); - } + 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.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 += '
'; - } - this.playerZilch.innerHTML = zilchs; + this.playerScore.innerHTML = player.score; + var zilchs = ''; + for (var i = 0; i < player.zilch; i++) { + zilchs += '
'; + } + 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 += '
'; - } + this.cpuScore.innerHTML = cpu.score; + var zilchs = ''; + for (var i = 0; i < cpu.zilch; i++) { + zilchs += '
'; + } - this.cpuZilch.innerHTML = zilchs; + this.cpuZilch.innerHTML = zilchs; }; Interface.prototype.showMessage = function(message, timeout, callback) { - var self = this; + var self = this; - self.message.innerHTML = '

' + message + '

'; + self.message.innerHTML = '

' + message + '

'; - 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(); + } }; diff --git a/style/main.css b/style/main.css index 9c8de7b..af46daa 100644 --- a/style/main.css +++ b/style/main.css @@ -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; -} - -.button:disabled { - cursor: auto; - background: #ede0c8; - color: #776e65; + 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; } .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; } diff --git a/style/mobile.css b/style/mobile.css index bcf7658..c38bd19 100644 --- a/style/mobile.css +++ b/style/mobile.css @@ -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; + } }