Skip to content

Commit 6e3121d

Browse files
AndndreAndndre
committed
add orientation alert
1 parent e467245 commit 6e3121d

File tree

4 files changed

+101
-39
lines changed

4 files changed

+101
-39
lines changed

‎assets/45792-rotate-phone.gif

331 KB
Loading

‎index.html

+28-16
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,28 @@
1-
<!DOCTYPE html><html lang="en"><head>
2-
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
3-
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>
4-
<link rel="stylesheet" type="text/css" href="style.css">
5-
<meta charset="utf-8">
6-
</head>
7-
<body>
8-
<audio id="music" src="assets/tetris.mp3" loop></audio>
9-
<script src="constants.js"></script>
10-
<script src="cell.js"></script>
11-
<script src="tetris.js"></script>
12-
<script src="button.js"></script>
13-
<script src="imgButton.js"></script>
14-
<script src="tetrisScreen.js"></script>
15-
<script src="sketch.js"></script>
16-
</body></html>
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
5+
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>
6+
<link rel="stylesheet" type="text/css" href="style.css" />
7+
<meta charset="utf-8" />
8+
</head>
9+
<body>
10+
<audio id="music" src="assets/tetris.mp3" loop></audio>
11+
<script src="constants.js"></script>
12+
<script src="cell.js"></script>
13+
<script src="tetris.js"></script>
14+
<script src="button.js"></script>
15+
<script src="imgButton.js"></script>
16+
<script src="tetrisScreen.js"></script>
17+
<script src="sketch.js"></script>
18+
<div class="orientation-alert">
19+
<div class="orientation-alert-content">
20+
<img src="assets/45792-rotate-phone.gif" alt="rotate-your-phone" />
21+
<p>
22+
Please rotate your device (or resize to lanscape if you are on
23+
desktop)
24+
</p>
25+
</div>
26+
</div>
27+
</body>
28+
</html>

‎sketch.js

+29-15
Original file line numberDiff line numberDiff line change
@@ -46,23 +46,23 @@ function toggleFullscreen(elem) {
4646
}
4747

4848
function preload() {
49-
playArrImg = loadImage("assets/play.png");
49+
playArrImg = loadImage('assets/play.png');
5050

51-
leftArrImg = loadImage("assets/arrow_left_15601.png");
52-
rightArrImg = loadImage("assets/arrow_right_15600.png");
53-
downArrImg = loadImage("assets/arrowdown_flech_1539.png");
54-
rotateImg = loadImage("assets/refresh_arrow_1546.png");
55-
hardDropImg = loadImage("assets/28_Drop_Box_24258.png");
51+
leftArrImg = loadImage('assets/arrow_left_15601.png');
52+
rightArrImg = loadImage('assets/arrow_right_15600.png');
53+
downArrImg = loadImage('assets/arrowdown_flech_1539.png');
54+
rotateImg = loadImage('assets/refresh_arrow_1546.png');
55+
hardDropImg = loadImage('assets/28_Drop_Box_24258.png');
5656
fullScreenImg = loadImage(
57-
"assets/full-full-screen-layout-orientation-expand-screen_81433.png"
57+
'assets/full-full-screen-layout-orientation-expand-screen_81433.png'
5858
);
5959

60-
blockyFont = loadFont("assets/clacon2.ttf");
60+
blockyFont = loadFont('assets/clacon2.ttf');
6161
}
6262

6363
function setup() {
6464
createCanvas(windowWidth, windowHeight);
65-
music = document.getElementById("music");
65+
music = document.getElementById('music');
6666
tetris = new Tetris(10, 24);
6767
tetrisScreen = new TetrisScreen();
6868
autoMoveDown = true;
@@ -72,6 +72,7 @@ function setup() {
7272
stroke(0);
7373
loaded = true;
7474
background(0);
75+
checkOrientation();
7576
tetrisScreen.render();
7677
}
7778

@@ -93,17 +94,17 @@ function keyTyped() {
9394
tetrisScreen.currentScreen != STATE_IN_GAME
9495
)
9596
return;
96-
if (key == "q") {
97+
if (key == 'q') {
9798
tetris.rotate(LEFT);
98-
} else if (key == "e") {
99+
} else if (key == 'e') {
99100
tetris.rotate(RIGHT);
100-
} else if (key == "w") {
101+
} else if (key == 'w') {
101102
tetris.rotate(LEFT);
102-
} else if (key == "a") {
103+
} else if (key == 'a') {
103104
tetris.move(LEFT);
104-
} else if (key == "d") {
105+
} else if (key == 'd') {
105106
tetris.move(RIGHT);
106-
} else if (key == "s") {
107+
} else if (key == 's') {
107108
tetris.move(DOWN);
108109
}
109110
autoMoveDown = false;
@@ -133,10 +134,23 @@ function keyPressed() {
133134
redraw();
134135
}
135136

137+
function checkOrientation() {
138+
const orientationAlert = document.querySelector('.orientation-alert');
139+
console.log(orientationAlert);
140+
if (window.innerHeight > window.innerWidth) {
141+
orientationAlert.classList.remove('hidden');
142+
orientationAlert.classList.add('visible');
143+
} else {
144+
orientationAlert.classList.remove('visible');
145+
orientationAlert.classList.add('hidden');
146+
}
147+
}
148+
136149
function windowResized() {
137150
autoMoveDown = false;
138151
tetris.onResized();
139152
autoMoveDown = false;
140153
tetrisScreen.onResized();
154+
checkOrientation();
141155
redraw();
142156
}

‎style.css

+44-8
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,51 @@
1-
*{
2-
margin: 0;
3-
padding: 0;
1+
* {
2+
margin: 0;
3+
padding: 0;
44
}
55

66
canvas {
7-
margin-left: auto;
8-
margin-right: auto;
9-
display: block;
10-
touch-action: manipulation;
7+
margin-left: auto;
8+
margin-right: auto;
9+
display: block;
10+
touch-action: manipulation;
1111
}
1212

1313
audio {
14-
display: none;
14+
display: none;
15+
}
16+
17+
.visible {
18+
display: block;
19+
}
20+
21+
.hidden {
22+
display: none;
23+
}
24+
25+
.orientation-alert {
26+
height: 100%;
27+
width: 100%;
28+
background: black;
29+
position: fixed; /* Stay in place */
30+
z-index: 1; /* Sit on top */
31+
left: 0;
32+
top: 0;
33+
overflow-x: hidden; /* Disable horizontal scroll */
34+
}
35+
36+
.orientation-alert-content {
37+
text-align: center;
38+
position: relative;
39+
left: 50%;
40+
transform: translateX(-50%);
41+
}
42+
43+
.orientation-alert-content > p {
44+
padding: 2em;
45+
text-align: center;
46+
color: white;
47+
}
48+
49+
.orientation-alert-content > img {
50+
width: 70%;
1551
}

0 commit comments

Comments
 (0)