From ca7f72dfc04ba881b44a75acdaf945ba30bc3a52 Mon Sep 17 00:00:00 2001 From: Varun Patil Date: Mon, 19 Oct 2020 11:41:49 +0530 Subject: [PATCH] Add touch overlay --- extra/shell.html | 234 +++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 196 insertions(+), 38 deletions(-) diff --git a/extra/shell.html b/extra/shell.html index d8961f3..6876732 100644 --- a/extra/shell.html +++ b/extra/shell.html @@ -3,6 +3,7 @@ + @@ -18,22 +19,25 @@ height: 100%; width: 100%; } - + #canvas { padding: 0; margin: 0 auto; display: block; border: 0px none; background-color: black; - height: 100%; + height: 100%; + max-height: 100vh; + max-width: 100vw; } + #spinner { position: fixed; bottom: 40px; left: 20px; opacity: 0.5; } - .spinner { + .spinner { height: 25px; width: 25px; margin: 0px auto; @@ -47,49 +51,88 @@ border-top: 10px solid transparent; border-radius: 100%; background-color: transparent; - } - - @-webkit-keyframes rotation { + } + + @-webkit-keyframes rotation { from {-webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(360deg);} - } - @-moz-keyframes rotation { + } + @-moz-keyframes rotation { from {-moz-transform: rotate(0deg);} to {-moz-transform: rotate(360deg);} - } - @-o-keyframes rotation { + } + @-o-keyframes rotation { from {-o-transform: rotate(0deg);} to {-o-transform: rotate(360deg);} - } - @keyframes rotation { + } + @keyframes rotation { from {transform: rotate(0deg);} to {transform: rotate(360deg);} - } + } - #fullscreen { + #fullscreen { position: fixed; bottom: 20px; right: 20px; opacity: 0.5; cursor: pointer; - } - #fullscreen:hover { + } + #fullscreen:hover { opacity: 1; - } - #fullscreen > svg { + } + #fullscreen > svg { height: 25px; width: 25px; - } + } - #progress { - background-color: white; - opacity: 0.6; - position: fixed; - bottom: 0; left: 0; - color: black; - padding: 3px 10px; - border-top-right-radius: 5px; - } + #progress { + background-color: white; + opacity: 0.6; + position: fixed; + bottom: 0; left: 0; + color: black; + padding: 3px 10px; + border-top-right-radius: 5px; + } + + #dpad, #apad { + position: fixed; + bottom: 0; left: 0; + height: 30vh; max-height: 30vw; + width: 30vh; max-width: 30vw; + transform: translate(55%, -5%); + } + + #apad { + right: 0; left: unset; + transform: unset; + width: 15vh; max-width: 15vw; + } + + #dpad *, #apad * { + position: absolute; + height: 15vh; max-height: 15vw; + width: 15vh; max-width: 15vw; + background-color: gray; + opacity: 0.3; + } + + #apad * { + border-radius: 50%; + } + + #d-up { transform: translateY(-100%); } + #d-left { transform: translateX(-100%); } + #d-down { transform: translateY(100%); } + #d-right { transform: translateX(100%); } + #ap-b { transform: translate(-130%, 90%); } + #ap-c { transform: translate(-15%, -25%); } + #ap-a { + height: 7vh; max-height: 7vw; + width: 7vh; max-width: 7vw; + top: 50%; + transform: translate(25%, 25%); + } @@ -98,19 +141,33 @@
Loading ...
- + + +
+
+
+
+
+
+
+ +
+
+
+
+
- - - - - - - - + + + + + + + +