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

mobile improvement for zilch status

master
Lurkars 8 years ago
parent
34e53c4835
commit
cdec08cce3
4 changed files with 31 additions and 32 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      index.html
  2. 25
      js/interface.js
  3. 30
      style/main.css
  4. 2
      style/mobile.css

6
index.html
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>

25
js/interface.js
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');
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) { Interface.prototype.setCpu = function(cpu) {
this.cpuScore.innerHTML = cpu.score; 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) { Interface.prototype.showMessage = function(message, fade, callback) {

30
style/main.css
View File

@ -102,31 +102,23 @@ hr {
color: white; 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; 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 {
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 { .dices-container {

2
style/mobile.css
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;

Write Preview
Loading…
Cancel
Save