align canvas in page. more support for touch

shooshx · Aug 2, 2015 · 5184937 · 5184937
1 parent 9858e85
commit 5184937
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 8 deletions.
diff --git a/page.html b/page.html
@@ -123,7 +123,7 @@
 <body onload="webGLStart();">
     <iframe id="shadersFrame" src="shaders.html" style="display:none"></iframe>
 
-    <div id="canvas-container" style="position:relative; height:650px; width:80%;"> 
+    <div id="canvas-container" style="position:relative; height:650px; width:80%; margin:auto;"> 
         <canvas id="game-canvas" width="900" height="650" style="background-color: transparent; position: absolute; left: 0px; top: 0px; z-index: 0;"></canvas>
         <canvas id="ctrl-canvas" width="900" height="650" style="background-color: transparent; position: absolute; left: 0px; top: 0px; z-index: 1;"></canvas>
         <noscript class="no-script">

diff --git a/src/build_number.js b/src/build_number.js
@@ -1,2 +1,2 @@
  // this file is created by the build script
-var BUILD_NUMBER=213
+var BUILD_NUMBER=217
diff --git a/src/main.js b/src/main.js
@@ -539,6 +539,7 @@ function containterResize(event, bforce) {
     gl.viewportWidth = canvas.width = canvas2d.width = newWidth;
     var vpw = newWidth * 0.7;
     drawDiv.style.height = vpw + "px";
+    drawDiv.style.width = newWidth + "px";
     gl.viewportHeight = canvas.height = canvas2d.height = vpw;
 
     c2d.resizeAdjust(canvas2d.width, canvas2d.height);

diff --git a/src/userInput.js b/src/userInput.js
@@ -253,15 +253,17 @@ function sampleKeys(player)
 var touchX = null, touchY = null
 
 function handleTouchStart(evt) {
-    writeDebug("TOUCH U " + userInput.touchX)
+    evt.preventDefault();
+   // writeDebug("TOUCH U " + userInput.touchX)
     //writeDebug("TOUCH STARTI " + evt.touches[0].clientX + " " + evt.touches[0].clientY)
     touchX = evt.touches[0].clientX;                                      
     touchY = evt.touches[0].clientY;
-    writeDebug("TOUCH STARTX " + touchX + " " +  touchY)
+  //  writeDebug("TOUCH STARTX " + touchX + " " +  touchY)
     return false
 };                                                
 
 function handleTouchMove(evt) {
+    evt.preventDefault();
     //writeDebug("TOUCH MOVE")
     if (!touchX || !touchY) {
         return false;
@@ -309,7 +311,8 @@ function handleTouchMove(evt) {
 };
 
 function handleTouchEnd(evt) {
-    writeDebug("TOUCH END")
+    evt.preventDefault();
+    //writeDebug("TOUCH END")
     touchX = null;
     touchX = null;
     return false
@@ -328,13 +331,12 @@ function setupGameInput(canvas, canvas2d)
     document.onkeydown = handleKeyDown;
     document.onkeyup = handleKeyUp;
 
-    writeDebug("TOUCH INIT")
+
     document.body.addEventListener("touchstart", handleTouchStart, false);
     document.body.addEventListener("touchmove", handleTouchMove, false);
     document.body.addEventListener("touchend", handleTouchEnd, false);
     document.body.addEventListener("touchcancel", handleTouchEnd, false);
-    writeDebug("TOUCH INITDONE")
-
+
     userInput.handlersSet = userInput.HANDLERS_3D;
 }
 

diff --git a/src/widgets2d.js b/src/widgets2d.js
@@ -121,6 +121,20 @@ function menuKeyDown(e) {
 
 function menuKeyUp(e) {}
 
+function menuHandleTouchStart(evt) {
+    evt.preventDefault();
+
+    touchX = evt.touches[0].clientX - drawDiv.offsetLeft;                                      
+    touchY = evt.touches[0].clientY - drawDiv.offsetTop;
+    e = { layerX: touchX, layerY: touchY }
+    menuMouseDown(e)    
+}
+function menuHandleTouchMove(evt) {
+    evt.preventDefault();
+}
+function menuHandleTouchEnd(evt) {
+    evt.preventDefault();
+}
 
 //////////////////////////////////////////////// screens and widgets /////////////////////////
 
@@ -154,6 +168,11 @@ C2d.prototype.setup2dInputs = function()
     document.onmousewheel = menuMouseWheel;
 
     userInput.handlersSet = userInput.HANDLERS_MENU;
+
+    document.body.addEventListener("touchstart", menuHandleTouchStart, false);
+    document.body.addEventListener("touchmove", menuHandleTouchMove, false);
+    document.body.addEventListener("touchend", menuHandleTouchEnd, false);
+    document.body.addEventListener("touchcancel", menuHandleTouchEnd, false);    
 }