diff --git a/cmd/main.go b/cmd/main.go index c1974ff4..dd3e0dd6 100644 --- a/cmd/main.go +++ b/cmd/main.go @@ -16,8 +16,8 @@ import ( ) const ( - gameboyIndex = "./static/gameboy.html" - debugIndex = "./static/index_ws.html" + gameboyIndex = "./static/gameboy2.html" + debugIndex = "./static/gameboy2.html" gamePath = "games" ) diff --git a/handler/handlers.go b/handler/handlers.go index 70424ddb..0e70cbae 100644 --- a/handler/handlers.go +++ b/handler/handlers.go @@ -16,8 +16,8 @@ import ( ) const ( - gameboyIndex = "./static/gameboy.html" - debugIndex = "./static/index_ws.html" + gameboyIndex = "./static/gameboy2.html" + debugIndex = "./static/gameboy2.html" ) // Flag to determine if the server is overlord or not diff --git a/static/gameboy2.html b/static/gameboy2.html new file mode 100644 index 00000000..bab93a9e --- /dev/null +++ b/static/gameboy2.html @@ -0,0 +1,470 @@ + + + + + + + + + + + + + + + +
+ +
+
+
+
+
+
+
+ +
+
+ +
load
+
save
+ +
start
+ + +
+
Y
+
X
+
A
+
B
+
+ +
+
+
+
+
+ + + +
+ + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/js/gameboy_controller.js b/static/js/gameboy_controller.js index 2da273bb..1ed575a9 100644 --- a/static/js/gameboy_controller.js +++ b/static/js/gameboy_controller.js @@ -346,9 +346,11 @@ window.addEventListener("gamepaddisconnected", (event) => { // VIRTUAL JOYSTICK // Ref: https://jsfiddle.net/aa0et7tr/5/ -createJoystick($('.dpad')); + var dpadState = {}; var touchIdx = null; +const maxDiff = 20; + function resetDPad() { dpadState = { @@ -357,8 +359,7 @@ function resetDPad() { left: false, right: false, }; - - $(".dpad .face").removeClass("pressed"); + $(".dpad").removeClass("pressed"); } function checkDPadAxis(bo, axis) { @@ -366,110 +367,112 @@ function checkDPadAxis(bo, axis) { dpadState[axis] = bo; if (dpadState[axis]) { - $(`.dpad .${axis}`).addClass("pressed"); + $(`#dpad-${axis}`).addClass("pressed"); } else { - $(`.dpad .${axis}`).removeClass("pressed"); + $(`#dpad-${axis}`).removeClass("pressed"); } - doButton(bo, axis); + // doButton(bo, axis); } } -function createJoystick(parent) { - const maxDiff = 50; - stick = document.createElement('div'); - stick.classList.add('joystick'); +parent = $("#circle-pad-holder"); +stick = document.getElementById("circle-pad"); - // TODO: REMOVE MOUSE - // parent.on('mousedown', handleMouseDown); - // $(document).on('mousemove', handleMouseMove); - // $(document).on('mouseup', handleMouseUp); +// 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); +parent.on('touchstart', handleMouseDown); +parent.on('touchmove', handleMouseMove); +parent.on('touchend', handleMouseUp); - let dragStart = null; - let currentPos = { x: 0, y: 0 }; +let dragStart = null; +let currentPos = { x: 0, y: 0 }; - function handleMouseDown(event) { - event.preventDefault(); - stick.style.transition = '0s'; - if (event.changedTouches) { - touchIdx = event.changedTouches[0].identifier; - dragStart = { - x: event.changedTouches[0].clientX, - y: event.changedTouches[0].clientY, - }; - resetDPad(); - return; - } +function handleMouseDown(event) { + // event.preventDefault(); + stick.style.transition = '0s'; + if (event.changedTouches) { + touchIdx = event.changedTouches[0].identifier; dragStart = { - x: event.clientX, - y: event.clientY, + x: event.changedTouches[0].clientX, + y: event.changedTouches[0].clientY, }; - - } - - function handleMouseMove(event) { - event.preventDefault(); - if (dragStart === null) return; - if (event.changedTouches) { - event.clientX = event.changedTouches[touchIdx].clientX; - event.clientY = event.changedTouches[touchIdx].clientY; - } - 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 = `translate3d(${xNew}px, ${yNew}px, 0px)`; - currentPos = { x: xNew, y: yNew }; - - const xRatio = xNew / maxDiff; - const yRatio = yNew / maxDiff; - checkDPadAxis(xRatio <= -0.5, "left"); - checkDPadAxis(xRatio >= 0.5, "right"); - checkDPadAxis(yRatio <= -0.5, "up"); - 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)`; - dragStart = null; - currentPos = { x: 0, y: 0 }; resetDPad(); - - $(".abxy .button").removeClass("pressed"); + return; } - - parent.append(stick); - return { - getPosition: () => currentPos, + dragStart = { + x: event.clientX, + y: event.clientY, }; } +function handleMouseMove(event) { + // event.preventDefault(); + if (dragStart === null) return; + if (event.changedTouches) { + event.clientX = event.changedTouches[touchIdx].clientX; + event.clientY = event.changedTouches[touchIdx].clientY; + } + 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)`; + currentPos = { x: xNew, y: yNew }; + + const xRatio = xNew / maxDiff; + const yRatio = yNew / maxDiff; + checkDPadAxis(xRatio <= -0.5, "left"); + checkDPadAxis(xRatio >= 0.5, "right"); + checkDPadAxis(yRatio <= -0.5, "up"); + 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)`; + dragStart = null; + currentPos = { x: 0, y: 0 }; + resetDPad(); + + // $(".abxy .button").removeClass("pressed"); +} + + + + + + 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); -$(".abxy .button").on("touchstart", handleButtonDown); -$(".abxy .button").on("touchend", handleButtonUp); \ No newline at end of file +$(".btn-big").on("mousedown", handleButtonDown); +$(".btn-big").on("mouseup", handleButtonUp); +$(".btn-big").on("touchstart", handleButtonDown); +$(".btn-big").on("touchend", handleButtonUp);