-
-
-
-
+
+
+
+
-
+
-
-
-
+
@@ -35,17 +35,17 @@
What the game ?!?
load
- save
- join
- quit
+ load
+ save
+ join
+ quit
@@ -79,7 +79,7 @@
diff --git a/static/js/controller.js b/static/js/controller.js
index f4f55b3a..fd8da8ba 100644
--- a/static/js/controller.js
+++ b/static/js/controller.js
@@ -85,14 +85,6 @@ function setState(name, bo) {
}
}
-function doButton(bo, name) {
- if (bo == true) {
- doButtonDown(name);
- } else if (bo == false) {
- doButtonUp(name);
- }
-}
-
function doButtonDown(name) {
$(`#btn-${name}`).addClass("pressed");
diff --git a/static/js/gesture_touch.js b/static/js/gesture_touch.js
index 88294044..8a434f4f 100644
--- a/static/js/gesture_touch.js
+++ b/static/js/gesture_touch.js
@@ -1,19 +1,25 @@
// VIRTUAL JOYSTICK
// Ref: https://jsfiddle.net/aa0et7tr/5/
-
var dpadState = {};
var touchIdx = null;
-const maxDiff = 20;
+const maxDiff = 20; // pixel
+var dragStart = null;
+var currentPos = { x: 0, y: 0 };
+var padHolder = $("#circle-pad-holder");
+var padCircle = $("#circle-pad");
-function resetDPad() {
- dpadState = {
- up: false,
- down: false,
- left: false,
- right: false,
- };
+function imAlive() {
+ $("#room-txt").val(Math.random());
+}
+
+function resetTouchState() {
+ checkDPadAxis(false, "up");
+ checkDPadAxis(false, "down");
+ checkDPadAxis(false, "left");
+ checkDPadAxis(false, "right");
+
$(".dpad").removeClass("pressed");
}
@@ -22,41 +28,28 @@ function checkDPadAxis(bo, axis) {
dpadState[axis] = bo;
if (dpadState[axis]) {
- $(`#dpad-${axis}`).addClass("pressed");
+ doButtonDown(axis);
} else {
- $(`#dpad-${axis}`).removeClass("pressed");
+ doButtonUp(axis);
}
-
- // doButton(bo, axis);
}
}
-parent = $("#circle-pad-holder");
-stick = document.getElementById("circle-pad");
-
-// TODO: REMOVE MOUSE
-parent.on('mousedown', handleMouseDown);
-$(document).on('mousemove', handleMouseMove);
-$(document).on('mouseup', handleMouseUp);
-
-parent.on('touchstart', handleMouseDown);
-parent.on('touchmove', handleMouseMove);
-parent.on('touchend', handleMouseUp);
-
-let dragStart = null;
-let currentPos = { x: 0, y: 0 };
-
function handleMouseDown(event) {
// event.preventDefault();
- stick.style.transition = '0s';
+
+ padCircle.css("transition", "0s");
+ padCircle.css("-moz-transition", "0s");
+ padCircle.css("-webkit-transition", "0s");
if (event.changedTouches) {
touchIdx = event.changedTouches[0].identifier;
+
dragStart = {
- x: event.changedTouches[0].clientX,
- y: event.changedTouches[0].clientY,
+ x: event.changedTouches[0].screenX,
+ y: event.changedTouches[0].screenY,
};
- resetDPad();
+ resetTouchState();
return;
}
dragStart = {
@@ -70,16 +63,23 @@ function handleMouseMove(event) {
// event.preventDefault();
if (dragStart === null) return;
if (event.changedTouches) {
- event.clientX = event.changedTouches[touchIdx].clientX;
- event.clientY = event.changedTouches[touchIdx].clientY;
+ // check if move source is from other touch?
+ event.clientX = event.changedTouches[touchIdx].screenX;
+ event.clientY = event.changedTouches[touchIdx].screenY;
+ imAlive();
}
+
const xDiff = event.clientX - dragStart.x;
const yDiff = event.clientY - dragStart.y;
const angle = Math.atan2(yDiff, xDiff);
const distance = Math.min(maxDiff, Math.hypot(xDiff, yDiff));
const xNew = distance * Math.cos(angle);
const yNew = distance * Math.sin(angle);
- stick.style.transform = `translate(${xNew}px, ${yNew}px)`;
+ style = `translate(${xNew}px, ${yNew}px)`;
+ // $("#room-txt").val(style);
+ padCircle.css("transform", style);
+ padCircle.css("-webkit-transform", style);
+ padCircle.css("-moz-transform", style);
currentPos = { x: xNew, y: yNew };
const xRatio = xNew / maxDiff;
@@ -90,44 +90,45 @@ function handleMouseMove(event) {
checkDPadAxis(yRatio >= 0.5, "down");
}
+
function handleMouseUp(event) {
event.preventDefault();
if (dragStart === null) return;
- stick.style.transition = '.2s';
- stick.style.transform = `translate3d(0px, 0px, 0px)`;
+ padCircle.css("transition", ".2s");
+ padCircle.css("-moz-transition", ".2s");
+ padCircle.css("-webkit-transition", ".2s");
+ padCircle.css("transform", "translate3d(0px, 0px, 0px)");
+ padCircle.css("-moz-transform", "translate3d(0px, 0px, 0px)");
+ padCircle.css("-webkit-transform", "translate3d(0px, 0px, 0px)");
+
dragStart = null;
currentPos = { x: 0, y: 0 };
- resetDPad();
-
- // $(".abxy .button").removeClass("pressed");
+ resetTouchState();
}
-
-
-
-
-
function handleButtonDown(event) {
- $(this).addClass("pressed");
- // doButtonDown($(this).attr("value"));
+ doButtonDown($(this).attr("value"));
}
function handleButtonUp(event) {
- $(this).removeClass("pressed");
- // doButtonUp($(this).attr("value"));
+ doButtonUp($(this).attr("value"));
}
-// TODO: REMOVE MOUSE
-// $(".abxy .button").on("mousedown", handleButtonDown);
-// $(".abxy .button").on("mouseup", handleButtonUp);
-$(".btn").on("mousedown", handleButtonDown);
-$(".btn").on("mouseup", handleButtonUp);
-$(".btn").on("touchstart", handleButtonDown);
-$(".btn").on("touchend", handleButtonUp);
+// $(".btn").on("mousedown", handleButtonDown);
+// $(".btn").on("mouseup", handleButtonUp);
+// $(".btn-big").on("mousedown", handleButtonDown);
+// $(".btn-big").on("mouseup", handleButtonUp);
+// $(".btn").on("touchstart", handleButtonDown);
+// $(".btn").on("touchend", handleButtonUp);
+// $(".btn-big").on("touchstart", handleButtonDown);
+// $(".btn-big").on("touchend", handleButtonUp);
-$(".btn-big").on("mousedown", handleButtonDown);
-$(".btn-big").on("mouseup", handleButtonUp);
-$(".btn-big").on("touchstart", handleButtonDown);
-$(".btn-big").on("touchend", handleButtonUp);
+
+// padHolder.on('mousedown', handleMouseDown);
+// $(document).on('mousemove', handleMouseMove);
+// $(document).on('mouseup', handleMouseUp);
+padHolder.on('touchstart', handleMouseDown);
+$(window).on('touchmove', handleMouseMove);
+padHolder.on('touchend', handleMouseUp);
\ No newline at end of file