diff --git a/index.html b/index.html index 9ab600c..c88ee78 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,7 @@ Tetris + @@ -14,9 +15,19 @@ -
-
English
-
Deutsch
+ +
@@ -41,9 +52,9 @@
- - - - + + + + \ No newline at end of file diff --git a/language.js b/js/language.js similarity index 100% rename from language.js rename to js/language.js diff --git a/main.js b/js/main.js similarity index 100% rename from main.js rename to js/main.js diff --git a/menu.js b/js/menu.js similarity index 90% rename from menu.js rename to js/menu.js index ef8a9ed..0afd2de 100644 --- a/menu.js +++ b/js/menu.js @@ -52,6 +52,21 @@ document.getElementById("game-reset").addEventListener("click", () => { showMenu(); }); +let isActive = false; +const menuButton = document.getElementById("menu-opener"); + +menuButton.addEventListener("click", () => { + if (isActive) { + menuButton.classList.remove('active'); + document.getElementsByTagName('body')[0].classList.remove('menu-open'); + } else { + menuButton.classList.add('active'); + document.getElementsByTagName('body')[0].classList.add('menu-open'); + } + + isActive = !isActive; +}); + function toggleMenu() { if(!isPaused){ showMenu(); diff --git a/tetris.js b/js/tetris.js similarity index 100% rename from tetris.js rename to js/tetris.js diff --git a/touch-control.js b/js/touch-control.js similarity index 69% rename from touch-control.js rename to js/touch-control.js index f21ac49..30d5d86 100644 --- a/touch-control.js +++ b/js/touch-control.js @@ -1,15 +1,15 @@ const hammertime = new Hammer(document.getElementById("tetris")); -hammertime.on('swipeleft', () => { +hammertime.on('swipeleft', (e) => { keys.left.action(); }); -hammertime.on('swiperight', () => { +hammertime.on('swiperight', (e) => { keys.right.action(); }); -hammertime.on('pandown', (e) => { - console.log(e.direction); +hammertime.on('pandown swipedown', (e) => { + console.log(e); keys.down.action(); }); diff --git a/style.css b/style.css index 122a183..90206e9 100644 --- a/style.css +++ b/style.css @@ -160,6 +160,88 @@ body { color: rgba(255, 255, 255, 1); } +#menu-opener { + display: none; +} + +.menu { + -webkit-transition: 0.1s -webkit-transform linear; + transition: 0.1s -webkit-transform linear; + transition: 0.1s transform linear; + transition: 0.1s transform linear, 0.1s -webkit-transform linear; + position: absolute; + background: 0; + float: left; + height: 2.7rem; + width: 3.5rem; + z-index: 1; + outline: 0; + padding: 0; + border: 0; + -webkit-transform: scale(.5); + -moz-transform: scale(.5); + -ms-transform: scale(.5); + -o-transform: scale(.5); + transform: scale(.5); +} + +.bar, .bar::before, .bar::after { + -webkit-transition: 0.2s background linear 0.1s, 0.2s top linear 0.2s, 0.2s -webkit-transform linear; + transition: 0.2s background linear 0.1s, 0.2s top linear 0.2s, 0.2s -webkit-transform linear; + transition: 0.2s background linear 0.1s, 0.2s top linear 0.2s, 0.2s transform linear; + transition: 0.2s background linear 0.1s, 0.2s top linear 0.2s, 0.2s transform linear, 0.2s -webkit-transform linear; + position: absolute; + background: #fff; + margin: auto; + width: 100%; + height: 0.3rem; + content: ''; + top: 50%; + left: 0; +} + +.bar { + margin-top: -0.2rem; +} + +.bar::before { + top: -1.2rem; +} + +.bar::after { + top: 1.2rem; +} + +.bar::before, .bar::after { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); +} + +.active .bar { + background: 0; +} + +.active .bar::before { + -webkit-transform: rotate(45deg); + transform: rotate(45deg); +} + +.active .bar::after { + -webkit-transform: rotate(-45deg); + transform: rotate(-45deg); +} + +.active .bar::before, .active .bar::after { + top: 0; +} + +.active .bar, .active .bar::before, .active .bar::after { + -webkit-transition: 0.2s background linear 0.1s, 0.2s top linear, 0.2s -webkit-transform linear 0.2s; + transition: 0.2s background linear 0.1s, 0.2s top linear, 0.2s -webkit-transform linear 0.2s; + transition: 0.2s background linear 0.1s, 0.2s top linear, 0.2s transform linear 0.2s; + transition: 0.2s background linear 0.1s, 0.2s top linear, 0.2s transform linear 0.2s, 0.2s -webkit-transform linear 0.2s; +} + @media (max-width: 1400px) { #tetris, #tetris-background { height: 75%; @@ -195,4 +277,47 @@ body { #language-selector { font-size: 20px; } +} + +@media (max-width: 840px) { + #game-stats { + font-size: 20px; + text-align: center; + } + + #game-stats > div { + margin-right: 0; + display: block; + } + + #control-text { + font-size: 14px; + } + + #menu { + position: fixed; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, .75); + transform: translateX(-100%); + -webkit-transition: transform .5s; + -moz-transition: transform .5s; + -ms-transition: transform .5s; + -o-transition: transform .5s; + transition: transform .5s; + z-index: 100; + top: 0; + } + + .menu-open #menu { + transform: none; + } + + #menu-opener { + position: absolute; + display: block; + left: 10px; + top: 10px; + z-index: 101; + } } \ No newline at end of file