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

Improve layout for mobile screens

Browse Source
This commit is contained in:
Marcel
2018-01-17 16:25:00 +01:00
parent 45447adf99
commit 821c17bd80
4 changed files with 38 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@@ -21,7 +21,9 @@
<div id="time">00:00</div> <div id="time">00:00</div>
<div id="score" data-prefix="Score: ">0</div> <div id="score" data-prefix="Score: ">0</div>
<canvas id="tetris" width="240" height="400"></canvas> <canvas id="tetris" width="240" height="400"></canvas>
<div id="controls"></div> <div id="controls">
<div id="control-text"></div>
</div>
</div> </div>
<div id="container"> <div id="container">
<h1 id="game-title">Tetris.js</h1> <h1 id="game-title">Tetris.js</h1>

2
language.js
View File

@@ -58,7 +58,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("controls").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");
document.getElementById("game-play").innerHTML = l.getStr("play"); document.getElementById("game-play").innerHTML = l.getStr("play");

5
menu.js
View File

@@ -87,10 +87,9 @@ function fadeBlurOut() {
} }
} }
const scoreEl = document.getElementById("score");
const nativeTransform = getComputedStyle(scoreEl).transform;
function scoreUpdateAni() { function scoreUpdateAni() {
const scoreEl = document.getElementById("score");
const nativeTransform = "translate(-50%, -50%)";
const scale = 1.5; const scale = 1.5;
const finalScale = 1; const finalScale = 1;
let currentScale = 1; let currentScale = 1;

34
style.css
View File

@@ -10,8 +10,8 @@ body {
#language-selector { #language-selector {
position: absolute; position: absolute;
right: 10px; right: 15px;
top: 10px; top: 20px;
font-size: 14px; font-size: 14px;
font-weight: 300; font-weight: 300;
z-index: 1; z-index: 1;
@@ -153,3 +153,33 @@ body {
margin-top: 5px; margin-top: 5px;
margin-left: 10px; margin-left: 10px;
} }
@media (max-width: 1400px) {
#tetris {
height: 75%;
}
#score {
top: 10px;
left: 50%;
right: initial;
transform: translateX(-50%);
}
#controls {
top: initial;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
height: 10%;
overflow: auto;
}
#control-text {
height: 100%;
}
#language-selector {
font-size: 20px;
}
}