View: Add touch controls

2018-10-05 20:03:59 +03:00
parent 724c82814e
commit c8acfc3188
12 changed files with 362 additions and 33 deletions
--- a/public/src/css/game.css
+++ b/public/src/css/game.css
@@ -51,3 +51,62 @@
 	pointer-events: none;
 	z-index: 1;
 }
+#touch-bg{
+	display: none;
+	position: absolute;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	height: 50%;
+	background: url(/assets/img/touch_bg.png) center bottom;
+	background-size: cover;
+	overflow: hidden;
+}
+#touch-bg-blue{
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	background: url(/assets/img/touch_bg_blue.png) center bottom;
+	background-size: cover;
+	opacity: 0;
+}
+#touch-drum{
+	position: absolute;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	text-align: center;
+	margin: auto;
+}
+#touch-drum img{
+	width: 100%;
+}
+#touch-buttons{
+	display: none;
+	position: absolute;
+	top: 7vh;
+	right: 2vh;
+	opacity: 0.5;
+	z-index: 5;
+}
+#touch-buttons img{
+	width: 12vh;
+}
+.touch-visible #touch-bg,
+.touch-visible #touch-buttons{
+	display: block;
+}
+.touch-visible .window{
+	width: 80vmin;
+	height: 53vmin;
+}
+.touch-visible #pause-menu .window button{
+	font-size: 5vmin;
+}
+.touch-visible #pause-menu .window button.selected{
+	color: #000;
+	background: #fff;
+	border-color: #ae7a26;
+}