css fixes for score containers

js/interface.js

@@ -162,22 +162,20 @@ Interface.prototype.setPlaying = function(playing) {
 
 Interface.prototype.setPlayer = function(player) {
     this.playerScore.innerHTML = player.score;
-    var zilchs = " ";
+    var zilchs = '';
     for (var i = 0; i < player.zilch; i++) {
-        zilchs += "&#x25FE;"
+        zilchs += '<div class="point"></div>';
     }
-    zilchs += "&nbsp;";
     this.playerZilch.innerHTML = zilchs;
 
 };
 
 Interface.prototype.setCpu = function(cpu) {
     this.cpuScore.innerHTML = cpu.score;
-    var zilchs = "&nbsp;";
+    var zilchs = '';
     for (var i = 0; i < cpu.zilch; i++) {
-        zilchs += "&#x25FE;"
+        zilchs += '<div class="point"></div>';
     }
-    zilchs += "&nbsp;";
 
     this.cpuZilch.innerHTML = zilchs;
 };

style/main.css

@@ -69,20 +69,18 @@ hr {
 }
 
 .top {
+    position: relative;
     text-align: center;
     height: 75px;
     margin-bottom: 25px;
 }
 
 .top .button {
-    position: relative;
-    top: -18px;
-    margin: 0 88px;
+    margin-top: 18px;
 }
 
 .score-container {
     color: gray;
-    position: relative;
     display: inline-block;
     width: 85px;
     height: 75px;
@@ -91,6 +89,18 @@ hr {
     text-align: center;
 }
 
+#player-score-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+#cpu-score-container {
+    position: absolute;
+    top: 0;
+    right: 0;
+}
+
 .score-container .label {
     font-size: 13px;
     line-height: 13px;
@@ -109,13 +119,22 @@ hr {
 }
 
 .score-container .zilch {
-    color: gray;
-    font-size: 18px;
-    line-height: 25px;
+    display: block;
+    width: 100%;
+    height: 25px;
+    text-align: center;
 }
 
-.score-container.active .zilch {
-    color: #f9f6f2;
+.score-container .zilch .point {
+    background-color: gray;
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    margin: 0px 3px;
+}
+
+.score-container.active .zilch .point {
+    background-color: #f9f6f2;
 }
 
 .dices-container {
@@ -289,11 +308,24 @@ hr {
 }
 
 .action {
+    position: relative;
     margin-top: 25px;
     height: 75px;
     text-align: center;
 }
 
+#points-button {
+    position: absolute;
+    top: 18px;
+    left: 0px;
+}
+
+#dices-button {
+    position: absolute;
+    top: 18px;
+    right: 0px;
+}
+
 .pointsContainer {
     position: relative;
     display: inline-block;
@@ -303,7 +335,6 @@ hr {
     color: #776e65;
     border-radius: 3px;
     text-align: center;
-    margin: 0 48px;
 }
 
 .pointsContainer .label {

style/mobile.css

@@ -15,7 +15,7 @@
         padding: 0 3px;
     }
     .top .button {
-        margin: 0 5px;
+        margin-top: 10px;
     }
     .score-container {
         width: 75px;
@@ -48,13 +48,15 @@
         height: 75px;
         text-align: center;
     }
-    .action .button {
-        margin-top: 15px;
+    #points-button {
+        top: 10px;
+    }
+    #dices-button {
+        top: 10px;
     }
     .pointsContainer {
         width: 75px;
         height: 60px;
-        margin: 0 5px;
     }
     .pointsContainer .points {
         font-size: 20px;