mobile improvement for zilch status

8 years ago · cdec08cce3
4 changed files with 31 additions and 32 deletions
--- a/index.html
+++ b/index.html
@ -6,7 +6,7 @@
    <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.5, maximum-scale=1, user-scalable=no">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 </head>

 <body>
@ -20,11 +20,13 @@
                <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">
@ -68,7 +70,7 @@
        <p>Created by Lukas Haubaum. Design template and code inspiration by <a href="https://gabrielecirulli.github.io/2048/" target="_blank">Gabriele Cirulli's 2048</a>.</p>
        <hr />
        <div class="footer">
-            <p><a href="https://github.com/lurkars/openzilch.js" target="_blank">Github</a></p>
+            <p><a href="https://github.com/lurkars/openzilch.js" target="_blank">GitHub</a></p>
        </div>
    </div>

--- a/js/interface.js
+++ b/js/interface.js
@ -8,9 +8,11 @@ function Interface() {

    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.points = document.querySelector('#points');
    self.pointsButton = document.querySelector('#points-button');
@ -156,21 +158,24 @@ Interface.prototype.setPlaying = function(playing) {

 Interface.prototype.setPlayer = function(player) {
    this.playerScore.innerHTML = player.score;
-    this.playerScoreContainer.classList.remove('zilch-0');
-    this.playerScoreContainer.classList.remove('zilch-1');
-    this.playerScoreContainer.classList.remove('zilch-2');
-    this.playerScoreContainer.classList.remove('zilch-3');
-    this.playerScoreContainer.classList.add('zilch-' + player.zilch);
+    var zilchs = "&nbsp;";
+    for (var i = 0; i < player.zilch; i++) {
+        zilchs += "&#x25FE;"
+    }
+    zilchs += "&nbsp;";
+    this.playerZilch.innerHTML = zilchs;

 };

 Interface.prototype.setCpu = function(cpu) {
    this.cpuScore.innerHTML = cpu.score;
-    this.cpuScoreContainer.classList.remove('zilch-0');
-    this.cpuScoreContainer.classList.remove('zilch-1');
-    this.cpuScoreContainer.classList.remove('zilch-2');
-    this.cpuScoreContainer.classList.remove('zilch-3');
-    this.cpuScoreContainer.classList.add('zilch-' + cpu.zilch);
+    var zilchs = "&nbsp;";
+    for (var i = 0; i < cpu.zilch; i++) {
+        zilchs += "&#x25FE;"
+    }
+    zilchs += "&nbsp;";
+
+    this.cpuZilch.innerHTML = zilchs;
 };

 Interface.prototype.showMessage = function(message, fade, callback) {
--- a/style/main.css
+++ b/style/main.css
@ -102,31 +102,23 @@ hr {
    color: white;
 }

-.score-container:after {
-    content: ' ';
+.score-container .score {
+    font-size: 25px;
+    line-height: 25px;
+    font-weight: bold;
+}
+
+.score-container .zilch {
+    color: gray;
    font-weight: normal;
-    display: inline-block;
+    display: block;
    height: 13px;
    position: relative;
    bottom: 5px;
 }

-.score-container.zilch-1:after {
-    content: '\25FE';
-}
-
-.score-container.zilch-2:after {
-    content: '\25FE \25FE';
-}
-
-.score-container.zilch-3:after {
-    content: '\25FE \25FE \25FE';
-}
-
-.score-container .score {
-    font-size: 25px;
-    line-height: 25px;
-    font-weight: bold;
+.score-container.active .zilch {
+    color: white;
 }

 .dices-container {
--- a/style/mobile.css
+++ b/style/mobile.css
@ -12,7 +12,7 @@
        color: #f9f6f2;
        text-decoration: none;
        line-height: 42px;
-        padding: 0 5px;
+        padding: 0 3px;
    }
    .top .button {
        margin: 0 5px;