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>
<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>
js/interface.js
+15 -10
View File
@@ -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) {
style/main.css
+11 -19
View File
@@ -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 {
style/mobile.css
+1 -1
View File
@@ -12,7 +12,7 @@
color: #f9f6f2;
text-decoration: none;
line-height: 42px;
padding: 0 5px;
padding: 0 3px;
}
.top .button {
margin: 0 5px;