css improvements

8 years ago · 18cf7293e7
4 changed files with 498 additions and 482 deletions
--- a/index.html
+++ b/index.html
@ -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>
      </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>
        <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 class="button" id="dices-button">Roll Dice/s</div>
      </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 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>
  <script type="text/javascript" src="js/interface.js"></script>
  <script type="text/javascript" src="js/game.js"></script>
 </body>
 </html>
--- 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 += '<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();
  }
 };
--- 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;
 }
--- 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;
  }
 }