diff --git a/index.html b/index.html index 6e49aee..9ab600c 100644 --- a/index.html +++ b/index.html @@ -19,8 +19,10 @@
Deutsch
-
00:00
-
0
+
+
00:00
+
0
+
diff --git a/language.js b/language.js index ed9b417..0e8d3d5 100644 --- a/language.js +++ b/language.js @@ -9,6 +9,7 @@ const en = { "
" + "Space/Esc -> Pause the game", play: "Play!", + time: "Time: ", score: "Score: ", paused: "Paused", resume: "Resume", @@ -27,6 +28,7 @@ const de = { "
" + "Leertaste/Esc -> Pausiere das Spiel", play: "Spielen!", + time: "Zeit: ", score: "Punkte: ", paused: "Pausiert", resume: "Weiterspielen", @@ -58,6 +60,7 @@ function switchLang(lang) { currentLang = lang; const l = new Language(currentLang); 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"); if(firstRun) { document.getElementById("game-title").innerHTML = l.getStr("title"); diff --git a/style.css b/style.css index fbe273a..122a183 100644 --- a/style.css +++ b/style.css @@ -4,7 +4,7 @@ body { overflow: hidden; background: #202028; font-family: Roboto, Helvetica, Arial, sans-serif; - font-size: 40px; + font-size: 2.5em; color: #fff; } @@ -100,24 +100,28 @@ body { z-index: 0; } -#score, #controls { +#game-stats { position: absolute; - font-weight: 900; top: 50%; - right: 75%; - transform: translate(-50%, -50%); + left: 50%; + transform: translate(-50%, -50%) translateX(-30vw); + text-align: right; } -#score:before { +#score { + font-weight: 900; +} + +#time:before, #score:before { content: attr(data-prefix); } #controls { - left: 75%; - right: 0; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%) translateX(30vw); font-size: 20px; - font-weight: 300; - transform: translate(0, -50%); } #footer { @@ -156,23 +160,25 @@ body { color: rgba(255, 255, 255, 1); } -#time { - margin-top: 5px; - margin-left: 10px; -} - @media (max-width: 1400px) { #tetris, #tetris-background { height: 75%; } - #score { + #game-stats { top: 10px; left: 50%; - right: initial; transform: translateX(-50%); } + #game-stats > div { + display: inline; + } + + #time { + margin-right: 50px; + } + #controls { top: initial; bottom: 10px;