Added joystick functionality for mobile

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "engine/webapp/vendor/JoyStick"]
+	path = engine/webapp/vendor/JoyStick
+	url = https://github.com/bobboteck/JoyStick.git

engine/src/lib.rs

@@ -367,15 +367,9 @@ impl Cluiche {
 			for slice in parameters.iter_mut() {
 				if y < slice.y_min || y > slice.y_max { break; }
 				let tex_y = (slice.tex_pos.clamp(0.0, 63.0) as usize) * 4;
-				
-				(r, g, b, a) = blend_colours(r, g, b, a, slice.texture[tex_y + 0], slice.texture[tex_y + 1], slice.texture[tex_y + 2], slice.texture[tex_y + 3]);
-
-				if a >= 255 { break; }
-			}
-
-			for slice in parameters.iter_mut() {
-				if y < slice.y_min || y > slice.y_max { break; }
 				slice.step();
+				if a >= 255 { continue; }
+				(r, g, b, a) = blend_colours(r, g, b, a, slice.texture[tex_y + 0], slice.texture[tex_y + 1], slice.texture[tex_y + 2], slice.texture[tex_y + 3]);
 			}
 
 			(buf[idx + 0], buf[idx + 1], buf[idx + 2], buf[idx + 3]) = blend_colours(r, g, b, a, buf[idx + 0], buf[idx + 1], buf[idx + 2], buf[idx + 3]);

engine/webapp/index.html

@@ -21,6 +21,18 @@
       	width: 1280px;
       	aspect-ratio: 8/5;
       }
+
+      @media screen and (max-width : 1920px){
+        #joystick {
+          visibility: hidden;
+        }
+      }
+
+      @media screen and (max-width : 906px){
+        #joystick {
+          visibility: visible;
+        }
+      }
 	</style>
   <!-- Google tag (gtag.js) -->
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-RY4PV833S2"></script>
@@ -37,6 +49,8 @@
     <div id="controls">w, s, a, d = forward, back, strafe left, strafe right | &uarr;, &darr;, &larr;, &rarr; = forward, back, turn left, turn right</div>
     <div id="fps"></div>
     <canvas id="canvas" width="320" height="200"></canvas>
+    <div id="joystick" style="width:200px; height:200px; position:fixed; bottom:0px; left:0px; z-index: 99999"></div>
     <script src="./bootstrap.js"></script>
+    <script src="./vendor/JoyStick/joy.min.js"></script>
   </body>
 </html>

engine/webapp/index.js

@@ -11,8 +11,13 @@ let canvas   = document.getElementById("canvas");
 let context  = canvas.getContext("2d", { willReadFrequently: true });
 let keystate = {}
 
-document.addEventListener('keydown', (event) => { keystate[event.key] = true; }, false);
-document.addEventListener('keyup', (event) => { keystate[event.key] = false; }, false);
+document.addEventListener('keydown', (event) => { keystate[event.code] = true; }, false);
+document.addEventListener('keyup', (event) => { keystate[event.code] = false; }, false);
+
+let joystick = new JoyStick('joystick', { "internalFillColor": "#CCCCCC", "internalStrokeColor": "#333333", "externalStrokeColor": "#333333" }, function(stickData) {
+    keystate["joystick"] = stickData.cardinalDirection;    
+    console.log(keystate["joystick"]);
+});
 
 const fps = new class {
 	constructor() {
@@ -66,27 +71,27 @@ function render() {
 }
 
 function events() {
-	if (keystate['w'] || keystate['ArrowUp']) {
+	if (keystate['KeyW'] || keystate['ArrowUp'] || [ "N", "NW", "NE" ].includes(keystate['joystick'])) {
 		cluiche.player_forward();
 	}
 
-	if (keystate['s'] || keystate['ArrowDown']) {
+	if (keystate['KeyS'] || keystate['ArrowDown'] || [ "S", "SW", "SE" ].includes(keystate['joystick'])) {
 		cluiche.player_back();
 	}
 
-	if (keystate['a']) {
+	if (keystate['KeyA']) {
 		cluiche.player_strafe_left();
 	}
 
-	if (keystate['d']) {
+	if (keystate['KeyD']) {
 		cluiche.player_strafe_right();
 	}
 
-	if (keystate['ArrowLeft']) {
+	if (keystate['ArrowLeft'] || [ "W", "SW", "NW" ].includes(keystate['joystick'])) {
 		cluiche.player_turn_left();
 	}
 
-	if (keystate['ArrowRight']) {
+	if (keystate['ArrowRight'] || [ "E", "SE", "NE" ].includes(keystate['joystick'])) {
 		cluiche.player_turn_right();
 	}
 }

engine/webapp/vendor/JoyStick

@@ -0,0 +1 @@
+Subproject commit 87ff98e81d8342d4063368e67ff94c3f5cd5a70a