KingOfDog/tetris.js
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Improve layout

Browse Source
This commit is contained in:
Marcel
2018-01-21 15:13:55 +01:00
parent 974fa07608
commit dfaf248e19
3 changed files with 30 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
index.html
View File

@@ -19,8 +19,10 @@
<div id="lang-de" class="lang" data-lang="de">Deutsch</div> <div id="lang-de" class="lang" data-lang="de">Deutsch</div>
</div> </div>
<div id="background" class="blurred"> <div id="background" class="blurred">
<div id="time">00:00</div> <div id="game-stats">
<div id="score" data-prefix="Score: ">0</div> <div id="time">00:00</div>
<div id="score" data-prefix="Score: ">0</div>
</div>
<canvas id="tetris-background" width="240" height="400"></canvas> <canvas id="tetris-background" width="240" height="400"></canvas>
<canvas id="tetris" width="240" height="400"></canvas> <canvas id="tetris" width="240" height="400"></canvas>
<div id="controls"> <div id="controls">

3
language.js
View File

@@ -9,6 +9,7 @@ const en = {
"<br>" + "<br>" +
"Space/Esc -> Pause the game", "Space/Esc -> Pause the game",
play: "Play!", play: "Play!",
time: "Time: ",
score: "Score: ", score: "Score: ",
paused: "Paused", paused: "Paused",
resume: "Resume", resume: "Resume",
@@ -27,6 +28,7 @@ const de = {
"<br>" + "<br>" +
"Leertaste/Esc -> Pausiere das Spiel", "Leertaste/Esc -> Pausiere das Spiel",
play: "Spielen!", play: "Spielen!",
time: "Zeit: ",
score: "Punkte: ", score: "Punkte: ",
paused: "Pausiert", paused: "Pausiert",
resume: "Weiterspielen", resume: "Weiterspielen",
@@ -58,6 +60,7 @@ function switchLang(lang) {
currentLang = lang; currentLang = lang;
const l = new Language(currentLang); const l = new Language(currentLang);
document.getElementById("score").setAttribute("data-prefix", l.getStr("score")); document.getElementById("score").setAttribute("data-prefix", l.getStr("score"));
document.getElementById("time").setAttribute("data-prefix", l.getStr("time"));
document.getElementById("control-text").innerHTML = l.getStr("controls"); document.getElementById("control-text").innerHTML = l.getStr("controls");
if(firstRun) { if(firstRun) {
document.getElementById("game-title").innerHTML = l.getStr("title"); document.getElementById("game-title").innerHTML = l.getStr("title");

40
style.css
View File

@@ -4,7 +4,7 @@ body {
overflow: hidden; overflow: hidden;
background: #202028; background: #202028;
font-family: Roboto, Helvetica, Arial, sans-serif; font-family: Roboto, Helvetica, Arial, sans-serif;
font-size: 40px; font-size: 2.5em;
color: #fff; color: #fff;
} }
@@ -100,24 +100,28 @@ body {
z-index: 0; z-index: 0;
} }
#score, #controls { #game-stats {
position: absolute; position: absolute;
font-weight: 900;
top: 50%; top: 50%;
right: 75%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%) translateX(-30vw);
text-align: right;
} }
#score:before { #score {
font-weight: 900;
}
#time:before, #score:before {
content: attr(data-prefix); content: attr(data-prefix);
} }
#controls { #controls {
left: 75%; position: absolute;
right: 0; top: 50%;
left: 50%;
transform: translate(-50%, -50%) translateX(30vw);
font-size: 20px; font-size: 20px;
font-weight: 300;
transform: translate(0, -50%);
} }
#footer { #footer {
@@ -156,23 +160,25 @@ body {
color: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 1);
} }
#time {
margin-top: 5px;
margin-left: 10px;
}
@media (max-width: 1400px) { @media (max-width: 1400px) {
#tetris, #tetris-background { #tetris, #tetris-background {
height: 75%; height: 75%;
} }
#score { #game-stats {
top: 10px; top: 10px;
left: 50%; left: 50%;
right: initial;
transform: translateX(-50%); transform: translateX(-50%);
} }
#game-stats > div {
display: inline;
}
#time {
margin-right: 50px;
}
#controls { #controls {
top: initial; top: initial;
bottom: 10px; bottom: 10px;