Lurkars/openzilch.js
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

mobile improvement for zilch status

Browse Source
This commit is contained in:
Lurkars
2017-04-14 22:15:52 +02:00
parent 34e53c4835
commit cdec08cce3
4 changed files with 31 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+4 -2
View File
@@ -6,7 +6,7 @@
<title>openzilch.js</title> <title>openzilch.js</title>
<link href="style/main.css" rel="stylesheet" type="text/css" /> <link href="style/main.css" rel="stylesheet" type="text/css" />
<link href="style/mobile.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> </head>
<body> <body>
@@ -20,11 +20,13 @@
<div class="score-container player" id="player-score-container"> <div class="score-container player" id="player-score-container">
<label class="label" for="player-score">Player</label> <label class="label" for="player-score">Player</label>
<div class="score" id="player-score"></div> <div class="score" id="player-score"></div>
<div class="zilch" id="player-zilch"></div>
</div> </div>
<button class="button" id="restart-button">New Game</button> <button class="button" id="restart-button">New Game</button>
<div class="score-container cpu" id="cpu-score-container"> <div class="score-container cpu" id="cpu-score-container">
<label class="label" for="cpu-score">CPU</label> <label class="label" for="cpu-score">CPU</label>
<div class="score" id="cpu-score"></div> <div class="score" id="cpu-score"></div>
<div class="zilch" id="cpu-zilch"></div>
</div> </div>
</div> </div>
<div class="dices-container"> <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> <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 /> <hr />
<div class="footer"> <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>
</div> </div>
js/interface.js
+15 -10
View File
@@ -8,9 +8,11 @@ function Interface() {
self.playerScoreContainer = document.querySelector('#player-score-container'); self.playerScoreContainer = document.querySelector('#player-score-container');
self.playerScore = document.querySelector('#player-score'); self.playerScore = document.querySelector('#player-score');
self.playerZilch = document.querySelector('#player-zilch');
self.cpuScoreContainer = document.querySelector('#cpu-score-container'); self.cpuScoreContainer = document.querySelector('#cpu-score-container');
self.cpuScore = document.querySelector('#cpu-score'); self.cpuScore = document.querySelector('#cpu-score');
self.cpuZilch = document.querySelector('#cpu-zilch');
self.points = document.querySelector('#points'); self.points = document.querySelector('#points');
self.pointsButton = document.querySelector('#points-button'); self.pointsButton = document.querySelector('#points-button');
@@ -156,21 +158,24 @@ Interface.prototype.setPlaying = function(playing) {
Interface.prototype.setPlayer = function(player) { Interface.prototype.setPlayer = function(player) {
this.playerScore.innerHTML = player.score; this.playerScore.innerHTML = player.score;
this.playerScoreContainer.classList.remove('zilch-0'); var zilchs = "&nbsp;";
this.playerScoreContainer.classList.remove('zilch-1'); for (var i = 0; i < player.zilch; i++) {
this.playerScoreContainer.classList.remove('zilch-2'); zilchs += "&#x25FE;"
this.playerScoreContainer.classList.remove('zilch-3'); }
this.playerScoreContainer.classList.add('zilch-' + player.zilch); zilchs += "&nbsp;";
this.playerZilch.innerHTML = zilchs;
}; };
Interface.prototype.setCpu = function(cpu) { Interface.prototype.setCpu = function(cpu) {
this.cpuScore.innerHTML = cpu.score; this.cpuScore.innerHTML = cpu.score;
this.cpuScoreContainer.classList.remove('zilch-0'); var zilchs = "&nbsp;";
this.cpuScoreContainer.classList.remove('zilch-1'); for (var i = 0; i < cpu.zilch; i++) {
this.cpuScoreContainer.classList.remove('zilch-2'); zilchs += "&#x25FE;"
this.cpuScoreContainer.classList.remove('zilch-3'); }
this.cpuScoreContainer.classList.add('zilch-' + cpu.zilch); zilchs += "&nbsp;";
this.cpuZilch.innerHTML = zilchs;
}; };
Interface.prototype.showMessage = function(message, fade, callback) { Interface.prototype.showMessage = function(message, fade, callback) {
style/main.css
+11 -19
View File
@@ -102,31 +102,23 @@ hr {
color: white; color: white;
} }
.score-container:after { .score-container .score {
content: ' '; font-size: 25px;
line-height: 25px;
font-weight: bold;
}
.score-container .zilch {
color: gray;
font-weight: normal; font-weight: normal;
display: inline-block; display: block;
height: 13px; height: 13px;
position: relative; position: relative;
bottom: 5px; bottom: 5px;
} }
.score-container.zilch-1:after { .score-container.active .zilch {
content: '\25FE'; color: white;
}
.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;
} }
.dices-container { .dices-container {
style/mobile.css
+1 -1
View File
@@ -12,7 +12,7 @@
color: #f9f6f2; color: #f9f6f2;
text-decoration: none; text-decoration: none;
line-height: 42px; line-height: 42px;
padding: 0 5px; padding: 0 3px;
} }
.top .button { .top .button {
margin: 0 5px; margin: 0 5px;