diff --git a/index.html b/index.html
index 6e49aee..9ab600c 100644
--- a/index.html
+++ b/index.html
@@ -19,8 +19,10 @@
-
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;