diff --git a/index.html b/index.html index 121fad1..647950f 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,7 @@ openzilch.js - + @@ -20,11 +20,13 @@
+
+
@@ -68,7 +70,7 @@

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

-

Github

+

GitHub

diff --git a/js/interface.js b/js/interface.js index fa86444..51420f6 100644 --- 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 = " "; + for (var i = 0; i < player.zilch; i++) { + zilchs += "◾" + } + zilchs += " "; + 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 = " "; + for (var i = 0; i < cpu.zilch; i++) { + zilchs += "◾" + } + zilchs += " "; + + this.cpuZilch.innerHTML = zilchs; }; Interface.prototype.showMessage = function(message, fade, callback) { diff --git a/style/main.css b/style/main.css index 0bbf6ca..4f68bd0 100644 --- 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 { diff --git a/style/mobile.css b/style/mobile.css index 93dd42a..21b7d77 100644 --- 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;