diff --git a/www.eng/js/porting/css/controls.css b/www.eng/js/porting/css/controls.css deleted file mode 100644 index 1debe9a..0000000 --- a/www.eng/js/porting/css/controls.css +++ /dev/null @@ -1,186 +0,0 @@ -#joyDiv { - position: absolute; - bottom: 0; - left: 0; - color: whitesmoke; - width: 50vh; - height: 50vh; - - z-index: 1488; - opacity: 0.6; -} - -.show-gamepad-button { - z-index: 1489; - position: absolute; - right: 3vh; - bottom: 3vh; - background-size: cover; - background-position: center; - justify-content: center; - align-items: center; - background-image: url('../assets/omori_show_button.png'); - min-width: 6vh; - min-height: 6vh; - opacity: 0.6; - image-rendering: pixelated; -} - -.switch-button { - z-index: 1489; - position: absolute; - left: 3vh; - bottom: 3vh; - background-size: cover; - background-position: center; - justify-content: center; - align-items: center; - background-image: url('../assets/omori_switch_button.png'); - min-width: 6vh; - min-height: 6vh; - opacity: 0.6; - image-rendering: pixelated; -} - -.fps-button { - position: absolute; - left: 5px; - top: 5px; - width: 90px; - height: 40px; - z-index: 1489; -} - -.gamepad-buttons { - opacity: 0.6; - z-index: 1488; - position: absolute; - bottom: 16px; - right: 32px; - - justify-content: center; - align-items: center; - - display: flex; - flex-flow: column nowrap; -} - -.gamepad-buttons-row { - display: flex; - flex-flow: row nowrap; - gap: 9vh; -} - -.gamepad-button { - min-width: 18vh; - min-height: 18vh; - display: flex; - position: relative; - background-size: cover; - background-position: center; - width: 100%; - height: 100%; - image-rendering: pixelated; -} - -.gamepad-bumper { - z-index: 1488; - position: absolute; - background-size: cover; - background-position: center; - justify-content: center; - align-items: center; - min-width: 18.8vh; - min-height: 12vh; - image-rendering: pixelated; -} - -.A { - background-image: url('../assets/omori_a_button.png'); -} - -.B { - background-image: url('../assets/omori_b_button.png'); - top: 4.5vh; -} - -.X { - background-image: url('../assets/omori_x_button.png'); - top: 4.5vh; -} - -.Y { - background-image: url('../assets/omori_y_button.png'); - top: 9vh; -} - -.LB { - background-image: url('../assets/omori_lb_button.png'); - opacity: 0.6; - left: 16px; - bottom: 56vh; -} - -.RB { - background-image: url('../assets/omori_rb_button.png'); - opacity: 0.6; - right: 16px; - bottom: 56vh; -} - -.dpad-buttons { - opacity: 0.6; - z-index: 1488; - position: absolute; - bottom: 16px; - left: 32px; - background-size: cover; - background-position: center; - justify-content: center; - align-items: center; - background-image: url('../assets/omori_dpad.png'); - display: flex; - flex-flow: column nowrap; - min-width: 42vh; - min-height: 42vh; - image-rendering: pixelated; -} - -.dpad-buttons-row { - display: flex; - flex-flow: row nowrap; -} - -.dpad-button { - min-width: 12vh; - min-height: 12vh; - display: flex; - position: relative; - width: 100%; - height: 100%; - opacity: 0.6; -} - -.up { - /* background-color: blue; */ - bottom: 7.5vh; - right: 6vh; -} - -.left { - /* background-color: red; */ - right: 7.5vh; - top: 6vh; -} - -.right { - /* background-color: green; */ - left: 7.5vh; - bottom: 6vh; -} - -.down { - /* background-color: yellow; */ - top: 7.5vh; - left: 6vh; -} diff --git a/www.eng/js/porting/joy.js b/www.eng/js/porting/joy.js deleted file mode 100644 index 810702d..0000000 --- a/www.eng/js/porting/joy.js +++ /dev/null @@ -1,421 +0,0 @@ -/* - * Name : joy.js - * @author : Roberto D'Amico (Bobboteck) - * Last modified : 30.06.2022 - * Revision : 2.0.0 - * - * Modification History: - * Date Version Modified By Description - * 2021-12-21 2.0.0 Roberto D'Amico New version of the project that integrates the callback functions, while - * maintaining compatibility with previous versions. Fixed Issue #27 too, - * thanks to @artisticfox8 for the suggestion. - * 2020-06-09 1.1.6 Roberto D'Amico Fixed Issue #10 and #11 - * 2020-04-20 1.1.5 Roberto D'Amico Correct: Two sticks in a row, thanks to @liamw9534 for the suggestion - * 2020-04-03 Roberto D'Amico Correct: InternalRadius when change the size of canvas, thanks to - * @vanslipon for the suggestion - * 2020-01-07 1.1.4 Roberto D'Amico Close #6 by implementing a new parameter to set the functionality of - * auto-return to 0 position - * 2019-11-18 1.1.3 Roberto D'Amico Close #5 correct indication of East direction - * 2019-11-12 1.1.2 Roberto D'Amico Removed Fix #4 incorrectly introduced and restored operation with touch - * devices - * 2019-11-12 1.1.1 Roberto D'Amico Fixed Issue #4 - Now JoyStick work in any position in the page, not only - * at 0,0 - * - * The MIT License (MIT) - * - * This file is part of the JoyStick Project (https://github.com/bobboteck/JoyStick). - * Copyright (c) 2015 Roberto D'Amico (Bobboteck). - * - * Permission is hereby granted, free of charge, to any person obtaining a copy - * of this software and associated documentation files (the "Software"), to deal - * in the Software without restriction, including without limitation the rights - * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell - * copies of the Software, and to permit persons to whom the Software is - * furnished to do so, subject to the following conditions: - * - * The above copyright notice and this permission notice shall be included in all - * copies or substantial portions of the Software. - * - * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, - * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE - * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER - * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, - * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE - * SOFTWARE. - */ - -let StickStatus = -{ - xPosition: 0, - yPosition: 0, - x: 0, - y: 0, - cardinalDirection: "C" -}; - -/** - * @desc Principal object that draw a joystick, you only need to initialize the object and suggest the HTML container - * @costructor - * @param container {String} - HTML object that contains the Joystick - * @param parameters (optional) - object with following keys: - * title {String} (optional) - The ID of canvas (Default value is 'joystick') - * width {Int} (optional) - The width of canvas, if not specified is setted at width of container object (Default value is the width of container object) - * height {Int} (optional) - The height of canvas, if not specified is setted at height of container object (Default value is the height of container object) - * internalFillColor {String} (optional) - Internal color of Stick (Default value is '#00AA00') - * internalLineWidth {Int} (optional) - Border width of Stick (Default value is 2) - * internalStrokeColor {String}(optional) - Border color of Stick (Default value is '#003300') - * externalLineWidth {Int} (optional) - External reference circonference width (Default value is 2) - * externalStrokeColor {String} (optional) - External reference circonference color (Default value is '#008000') - * autoReturnToCenter {Bool} (optional) - Sets the behavior of the stick, whether or not, it should return to zero position when released (Default value is True and return to zero) - * @param callback {StickStatus} - - */ -var JoyStick = (function(container, parameters, callback) -{ - parameters = parameters || {}; - var title = (typeof parameters.title === "undefined" ? "joystick" : parameters.title), - width = (typeof parameters.width === "undefined" ? 0 : parameters.width), - height = (typeof parameters.height === "undefined" ? 0 : parameters.height), - internalFillColor = (typeof parameters.internalFillColor === "undefined" ? "#00AA00" : parameters.internalFillColor), - internalLineWidth = (typeof parameters.internalLineWidth === "undefined" ? 2 : parameters.internalLineWidth), - internalStrokeColor = (typeof parameters.internalStrokeColor === "undefined" ? "#003300" : parameters.internalStrokeColor), - externalLineWidth = (typeof parameters.externalLineWidth === "undefined" ? 2 : parameters.externalLineWidth), - externalStrokeColor = (typeof parameters.externalStrokeColor === "undefined" ? "#008000" : parameters.externalStrokeColor), - autoReturnToCenter = (typeof parameters.autoReturnToCenter === "undefined" ? true : parameters.autoReturnToCenter); - - callback = callback || function(StickStatus) {}; - - // Create Canvas element and add it in the Container object - var objContainer = document.getElementById(container); - - // Fixing Unable to preventDefault inside passive event listener due to target being treated as passive in Chrome [Thanks to https://github.com/artisticfox8 for this suggestion] - objContainer.style.touchAction = "none"; - - var canvas = document.createElement("canvas"); - canvas.id = title; - if(width === 0) { width = objContainer.clientWidth; } - if(height === 0) { height = objContainer.clientHeight; } - canvas.width = width; - canvas.height = height; - objContainer.appendChild(canvas); - var context=canvas.getContext("2d"); - - var pressed = 0; // Bool - 1=Yes - 0=No - var circumference = 2 * Math.PI; - var internalRadius = (canvas.width-((canvas.width/2)+10))/2; - var maxMoveStick = internalRadius + 5; - var externalRadius = internalRadius + 30; - var centerX = canvas.width / 2; - var centerY = canvas.height / 2; - var directionHorizontalLimitPos = canvas.width / 10; - var directionHorizontalLimitNeg = directionHorizontalLimitPos * -1; - var directionVerticalLimitPos = canvas.height / 10; - var directionVerticalLimitNeg = directionVerticalLimitPos * -1; - // Used to save current position of stick - var movedX=centerX; - var movedY=centerY; - - // Check if the device support the touch or not - if("ontouchstart" in document.documentElement) - { - canvas.addEventListener("touchstart", onTouchStart, false); - document.addEventListener("touchmove", onTouchMove, false); - document.addEventListener("touchend", onTouchEnd, false); - } - else - { - canvas.addEventListener("mousedown", onMouseDown, false); - document.addEventListener("mousemove", onMouseMove, false); - document.addEventListener("mouseup", onMouseUp, false); - } - // Draw the object - drawExternal(); - drawInternal(); - - /****************************************************** - * Private methods - *****************************************************/ - - /** - * @desc Draw the external circle used as reference position - */ - function drawExternal() - { - context.beginPath(); - context.arc(centerX, centerY, externalRadius, 0, circumference, false); - context.lineWidth = externalLineWidth; - context.strokeStyle = externalStrokeColor; - context.stroke(); - } - - /** - * @desc Draw the internal stick in the current position the user have moved it - */ - function drawInternal() - { - context.beginPath(); - if(movedX canvas.width) { movedX = canvas.width-(maxMoveStick); } - if(movedY canvas.height) { movedY = canvas.height-(maxMoveStick); } - context.arc(movedX, movedY, internalRadius, 0, circumference, false); - // create radial gradient - var grd = context.createRadialGradient(centerX, centerY, 5, centerX, centerY, 200); - // Light color - grd.addColorStop(0, internalFillColor); - // Dark color - grd.addColorStop(1, internalStrokeColor); - context.fillStyle = grd; - context.fill(); - context.lineWidth = internalLineWidth; - context.strokeStyle = internalStrokeColor; - context.stroke(); - } - - /** - * @desc Events for manage touch - */ - let touchId = null; - function onTouchStart(event) - { - pressed = 1; - touchId = event.targetTouches[0].identifier; - } - - function onTouchMove(event) - { - if(pressed === 1 && event.targetTouches[0].target === canvas) - { - movedX = event.targetTouches[0].pageX; - movedY = event.targetTouches[0].pageY; - // Manage offset - if(canvas.offsetParent.tagName.toUpperCase() === "BODY") - { - movedX -= canvas.offsetLeft; - movedY -= canvas.offsetTop; - } - else - { - movedX -= canvas.offsetParent.offsetLeft; - movedY -= canvas.offsetParent.offsetTop; - } - // Delete canvas - context.clearRect(0, 0, canvas.width, canvas.height); - // Redraw object - drawExternal(); - drawInternal(); - - // Set attribute of callback - StickStatus.xPosition = movedX; - StickStatus.yPosition = movedY; - StickStatus.x = (100*((movedX - centerX)/maxMoveStick)).toFixed(); - StickStatus.y = ((100*((movedY - centerY)/maxMoveStick))*-1).toFixed(); - StickStatus.cardinalDirection = getCardinalDirection(); - callback(StickStatus); - } - } - - function onTouchEnd(event) - { - if (event.changedTouches[0].identifier !== touchId) return; - - pressed = 0; - // If required reset position store variable - if(autoReturnToCenter) - { - movedX = centerX; - movedY = centerY; - } - // Delete canvas - context.clearRect(0, 0, canvas.width, canvas.height); - // Redraw object - drawExternal(); - drawInternal(); - - // Set attribute of callback - StickStatus.xPosition = movedX; - StickStatus.yPosition = movedY; - StickStatus.x = (100*((movedX - centerX)/maxMoveStick)).toFixed(); - StickStatus.y = ((100*((movedY - centerY)/maxMoveStick))*-1).toFixed(); - StickStatus.cardinalDirection = getCardinalDirection(); - callback(StickStatus); - } - - /** - * @desc Events for manage mouse - */ - function onMouseDown(event) - { - pressed = 1; - } - - /* To simplify this code there was a new experimental feature here: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/offsetX , but it present only in Mouse case not metod presents in Touch case :-( */ - function onMouseMove(event) - { - if(pressed === 1) - { - movedX = event.pageX; - movedY = event.pageY; - // Manage offset - if(canvas.offsetParent.tagName.toUpperCase() === "BODY") - { - movedX -= canvas.offsetLeft; - movedY -= canvas.offsetTop; - } - else - { - movedX -= canvas.offsetParent.offsetLeft; - movedY -= canvas.offsetParent.offsetTop; - } - // Delete canvas - context.clearRect(0, 0, canvas.width, canvas.height); - // Redraw object - drawExternal(); - drawInternal(); - - // Set attribute of callback - StickStatus.xPosition = movedX; - StickStatus.yPosition = movedY; - StickStatus.x = (100*((movedX - centerX)/maxMoveStick)).toFixed(); - StickStatus.y = ((100*((movedY - centerY)/maxMoveStick))*-1).toFixed(); - StickStatus.cardinalDirection = getCardinalDirection(); - callback(StickStatus); - } - } - - function onMouseUp(event) - { - pressed = 0; - // If required reset position store variable - if(autoReturnToCenter) - { - movedX = centerX; - movedY = centerY; - } - // Delete canvas - context.clearRect(0, 0, canvas.width, canvas.height); - // Redraw object - drawExternal(); - drawInternal(); - - // Set attribute of callback - StickStatus.xPosition = movedX; - StickStatus.yPosition = movedY; - StickStatus.x = (100*((movedX - centerX)/maxMoveStick)).toFixed(); - StickStatus.y = ((100*((movedY - centerY)/maxMoveStick))*-1).toFixed(); - StickStatus.cardinalDirection = getCardinalDirection(); - callback(StickStatus); - } - - function getCardinalDirection() - { - let result = ""; - let orizontal = movedX - centerX; - let vertical = movedY - centerY; - - if(vertical >= directionVerticalLimitNeg && vertical <= directionVerticalLimitPos) - { - result = "C"; - } - if(vertical < directionVerticalLimitNeg) - { - result = "N"; - } - if(vertical > directionVerticalLimitPos) - { - result = "S"; - } - - if(orizontal < directionHorizontalLimitNeg) - { - if(result === "C") - { - result = "W"; - } - else - { - result += "W"; - } - } - if(orizontal > directionHorizontalLimitPos) - { - if(result === "C") - { - result = "E"; - } - else - { - result += "E"; - } - } - - return result; - } - - /****************************************************** - * Public methods - *****************************************************/ - - /** - * @desc The width of canvas - * @return Number of pixel width - */ - this.GetWidth = function () - { - return canvas.width; - }; - - /** - * @desc The height of canvas - * @return Number of pixel height - */ - this.GetHeight = function () - { - return canvas.height; - }; - - /** - * @desc The X position of the cursor relative to the canvas that contains it and to its dimensions - * @return Number that indicate relative position - */ - this.GetPosX = function () - { - return movedX; - }; - - /** - * @desc The Y position of the cursor relative to the canvas that contains it and to its dimensions - * @return Number that indicate relative position - */ - this.GetPosY = function () - { - return movedY; - }; - - /** - * @desc Normalizzed value of X move of stick - * @return Integer from -100 to +100 - */ - this.GetX = function () - { - return (100*((movedX - centerX)/maxMoveStick)).toFixed(); - }; - - /** - * @desc Normalizzed value of Y move of stick - * @return Integer from -100 to +100 - */ - this.GetY = function () - { - return ((100*((movedY - centerY)/maxMoveStick))*-1).toFixed(); - }; - - /** - * @desc Get the direction of the cursor as a string that indicates the cardinal points where this is oriented - * @return String of cardinal point N, NE, E, SE, S, SW, W, NW and C when it is placed in the center - */ - this.GetDir = function() - { - return getCardinalDirection(); - }; -}); diff --git a/www.eng/js/porting/jscontrols.js b/www.eng/js/porting/jscontrols.js index e8f989e..b57417c 100644 --- a/www.eng/js/porting/jscontrols.js +++ b/www.eng/js/porting/jscontrols.js @@ -1,55 +1,5 @@ // by VienDesu! Poring Team 2023 -function create_control_buttons() { - - // A-Y Buttons - const DivBMain = document.createElement("div"); - DivBMain.className = "gamepad-buttons"; - DivBMain.id = "gamepad-div"; - const DivBRow1 = document.createElement("div"); - DivBRow1.className = "gamepad-buttons-row"; - const DivBRow2 = document.createElement("div"); - DivBRow2.className = "gamepad-buttons-row"; - const DivBRow3 = document.createElement("div"); - DivBRow3.className = "gamepad-buttons-row"; - - const DivB_Y = document.createElement("div"); - DivB_Y.className = "gamepad-button Y"; - DivB_Y.id = "buttonA"; - const DivB_X = document.createElement("div"); - DivB_X.className = "gamepad-button X"; - DivB_X.id = "buttonShift"; - const DivB_B = document.createElement("div"); - DivB_B.className = "gamepad-button B"; - DivB_B.id = "buttonX"; - const DivB_A = document.createElement("div"); - DivB_A.className = "gamepad-button A"; - DivB_A.id = "buttonZ"; - - // LB-RB Buttons - const DivB_LB = document.createElement("div"); - DivB_LB.className = "gamepad-bumper LB"; - DivB_LB.id = "buttonQ"; - const DivB_RB = document.createElement("div"); - DivB_RB.className = "gamepad-bumper RB"; - DivB_RB.id = "buttonW"; - - // Adding - document.body.appendChild(DivB_LB); - document.body.appendChild(DivB_RB); - - DivBMain.appendChild(DivBRow1); - DivBMain.appendChild(DivBRow2); - DivBMain.appendChild(DivBRow3); - - DivBRow1.appendChild(DivB_Y); - DivBRow2.appendChild(DivB_X); - DivBRow2.appendChild(DivB_B); - DivBRow3.appendChild(DivB_A); - - document.body.appendChild(DivBMain); -} - function create_fps_button() { // Remove in release const keys = [{ key: 'F2', keyCode: 113 }]; @@ -66,225 +16,11 @@ function create_fps_button() { } } -function create_new_controls() { - // Remove in release - const NewBtn = document.createElement("div"); - NewBtn.className = "new-button"; - document.body.appendChild(NewBtn); - - NewBtn.addEventListener("pointerdown", () => { - var controls_canvas = document.getElementById("ControlsCanvas"); - if (controls_canvas === null) { - document.getElementById("show-gamepad").remove(); - ONSControls.initialize(); - } else { - controls_canvas.remove(); - create_show_button(); - } - }); -} - -function create_dpad_buttons() { - // Скуфting elements - const DivDMain = document.createElement("div"); - DivDMain.className = "dpad-buttons"; - DivDMain.id = "dpad-div"; - const DivDRow1 = document.createElement("div"); - DivDRow1.className = "dpad-buttons-row"; - const DivDRow2 = document.createElement("div"); - DivDRow2.className = "dpad-buttons-row"; - - const DivD_L = document.createElement("div"); - DivD_L.className = "dpad-button left"; - DivD_L.id = "buttonLeft"; - const DivD_U = document.createElement("div"); - DivD_U.className = "dpad-button up"; - DivD_U.id = "buttonUp"; - const DivD_D = document.createElement("div"); - DivD_D.className = "dpad-button down"; - DivD_D.id = "buttonDown"; - const DivD_R = document.createElement("div"); - DivD_R.className = "dpad-button right"; - DivD_R.id = "buttonRight"; - - // Adding - DivDMain.appendChild(DivDRow1); - DivDMain.appendChild(DivDRow2); - - DivDRow1.appendChild(DivD_L); - DivDRow1.appendChild(DivD_U); - DivDRow2.appendChild(DivD_D); - DivDRow2.appendChild(DivD_R); - - document.body.appendChild(DivDMain); - - currentControlElement = "dpad"; -} - -function create_joystick() { - const JoyDiv = document.createElement("div"); - JoyDiv.id = "joyDiv"; - document.body.appendChild(JoyDiv); - const kbd = joyStates; - const joy = new JoyStick('joyDiv', {internalFillColor: "#373737", internalStrokeColor: "#FFFFFF", externalStrokeColor: "#FFFFFF"}, (stickData) => { - disableActive(); - switch (stickData.cardinalDirection) { - case 'NE': - case 'NW': - case 'N': - kbd.up.status = true; - sendEvent(false, kbd.up.code); - break; - case 'E': - kbd.right.status = true; - sendEvent(false, kbd.right.code); - break; - case 'W': - kbd.left.status = true; - sendEvent(false, kbd.left.code); - break; - case 'SE': - case 'SW': - case 'S': - kbd.down.status = true; - sendEvent(false, kbd.down.code); - break; - case 'C': - disableActive(); - break; - } - }); - currentControlElement = "joystick"; -} - -function create_switch_button() { - const newDiv = document.createElement("div"); - newDiv.className = "switch-button"; - newDiv.id = "switch"; - - document.body.appendChild(newDiv); - - newDiv.addEventListener("pointerdown", (event) => { - if (document.getElementById("joyDiv") === null) { - document.getElementById("dpad-div").remove(); - create_joystick(); - } else { - document.getElementById("joyDiv").remove(); - create_dpad_buttons(); - setupDpad(); - } - }); -} - -function create_show_button() { - const newDiv = document.createElement("div"); - newDiv.className = "show-gamepad-button"; - newDiv.id = "show-gamepad"; - - document.body.appendChild(newDiv); - - newDiv.addEventListener("pointerdown", (event) => { - event.stopImmediatePropagation(); - event.preventDefault(); - var DivBMain = document.getElementById("gamepad-div"); - var DivB_LB = document.getElementById("buttonW"); - var DivB_RB = document.getElementById("buttonQ"); - var DivDMain = document.getElementById("dpad-div"); - var DivJoy = document.getElementById("joyDiv"); - var ShowB = document.getElementById("switch"); - - if (DivBMain !== null) { - DivBMain.remove(); - DivB_LB.remove(); - DivB_RB.remove(); - ShowB.remove(); - switch (currentControlElement) { - case "dpad": - DivDMain.remove(); - break; - case "joystick": - DivJoy.remove(); - break; - } - } else { - create_control_buttons(); - switch (currentControlElement) { - case "dpad": - create_dpad_buttons(); - setupDpad(); - break; - case "joystick": - create_joystick(); - break; - } - setupButtons(); - create_switch_button(); - } - }); -} - -var currentControlElement = null; - -const keys = [ - { key: 'Z', keyCode: 90 }, - { key: 'X', keyCode: 88 }, - { key: 'Shift', keyCode: 16 }, - { key: 'A', keyCode: 65 }, - - { key: 'Q', keyCode: 81 }, - { key: 'W', keyCode: 87 } -]; - -const dpadkeys = [ - { key: "Left", keyCode: 37 }, - { key: "Up", keyCode: 38 }, - { key: "Right", keyCode: 39 }, - { key: "Down", keyCode: 40 } -]; - -const joyStates = { - left: { status: false, code: 37 }, - right: { status: false, code: 39 }, - - up: { status: false, code: 38 }, - down: { status: false, code: 40 } -}; - -function createButton(key, keyCode) { - return { key: key, keyCode: keyCode }; -} - function sendEvent(isUp, keycode) { document.getElementById("GameCanvas").focus(); document.dispatchEvent(new KeyboardEvent(isUp ? 'keyup' : 'keydown', { 'key': '', keyCode: keycode })) } -function disableActive() { - for (const kbdKey in joyStates) { - const kbd = joyStates[kbdKey]; - if (kbd.status) { - sendEvent(true, kbd.code); - kbd.status = false; - } - } -} - -function setupButtons() { - for (const key of keys) { - const elementId = key.id === undefined ? `button${key.key}` : key.id; - console.log(`Setting up the ${elementId} key...`); //Remove in release - setupKey(elementId, key.key, key.keyCode); - } -} - -function setupDpad() { - for (const key of dpadkeys) { - const elementId = key.id === undefined ? `button${key.key}` : key.id; - console.log(`Setting up the ${elementId} key...`); //Remove in release - setupKey(elementId, key.key, key.keyCode); - } -} - function setupKey(id, key, keyCode) { const element = document.getElementById(id); element.addEventListener("pointerdown", (event) => { @@ -301,37 +37,4 @@ function setupKey(id, key, keyCode) { window.addEventListener('load', () => { create_fps_button(); // Remove in release - // create_new_controls(); // Remove in release - // if (navigator.getGamepads().length == 0) { - // create_control_buttons(); - // create_dpad_buttons(); - // create_show_button(); - // create_switch_button(); - // setupButtons(); - // setupDpad(); - // } -}); - -// window.addEventListener('gamepadconnected', () => { -// var DivBMain = document.getElementById("gamepad-div"); -// var DivB_LB = document.getElementById("buttonW"); -// var DivB_RB = document.getElementById("buttonQ"); -// var DivDMain = document.getElementById("dpad-div"); -// var DivJoy = document.getElementById("joyDiv"); -// var ShowB = document.getElementById("switch"); - -// if (DivBMain !== null) { -// DivBMain.remove(); -// DivB_LB.remove(); -// DivB_RB.remove(); -// ShowB.remove(); -// switch (currentControlElement) { -// case "dpad": -// DivDMain.remove(); -// break; -// case "joystick": -// DivJoy.remove(); -// break; -// } -// } -// }); \ No newline at end of file +}); \ No newline at end of file diff --git a/www.rus/js/porting/css/controls.css b/www.rus/js/porting/css/controls.css deleted file mode 100644 index 42845d3..0000000 --- a/www.rus/js/porting/css/controls.css +++ /dev/null @@ -1,195 +0,0 @@ -#joyDiv { - position: absolute; - bottom: 0; - left: 0; - color: whitesmoke; - width: 50vh; - height: 50vh; - - z-index: 1488; - opacity: 0.6; -} - -.show-gamepad-button { - z-index: 1489; - position: absolute; - right: 3vh; - bottom: 3vh; - background-size: cover; - background-position: center; - justify-content: center; - align-items: center; - background-image: url('../assets/omori_show_button.png'); - min-width: 6vh; - min-height: 6vh; - opacity: 0.6; - image-rendering: pixelated; -} - -.switch-button { - z-index: 1489; - position: absolute; - left: 3vh; - bottom: 3vh; - background-size: cover; - background-position: center; - justify-content: center; - align-items: center; - background-image: url('../assets/omori_switch_button.png'); - min-width: 6vh; - min-height: 6vh; - opacity: 0.6; - image-rendering: pixelated; -} - -.fps-button { - position: absolute; - left: 5px; - top: 5px; - width: 90px; - height: 40px; - z-index: 1489; -} - -.new-button { - position: absolute; - right: 5px; - top: 5px; - width: 90px; - height: 40px; - z-index: 1489; -} - -.gamepad-buttons { - opacity: 0.6; - z-index: 1488; - position: absolute; - bottom: 16px; - right: 32px; - - justify-content: center; - align-items: center; - - display: flex; - flex-flow: column nowrap; -} - -.gamepad-buttons-row { - display: flex; - flex-flow: row nowrap; - gap: 9vh; -} - -.gamepad-button { - min-width: 18vh; - min-height: 18vh; - display: flex; - position: relative; - background-size: cover; - background-position: center; - width: 100%; - height: 100%; - image-rendering: pixelated; -} - -.gamepad-bumper { - z-index: 1488; - position: absolute; - background-size: cover; - background-position: center; - justify-content: center; - align-items: center; - min-width: 18.8vh; - min-height: 12vh; - image-rendering: pixelated; -} - -.A { - background-image: url('../assets/omori_a_button.png'); -} - -.B { - background-image: url('../assets/omori_b_button.png'); - top: 4.5vh; -} - -.X { - background-image: url('../assets/omori_x_button.png'); - top: 4.5vh; -} - -.Y { - background-image: url('../assets/omori_y_button.png'); - top: 9vh; -} - -.LB { - background-image: url('../assets/omori_lb_button.png'); - opacity: 0.6; - left: 16px; - bottom: 56vh; -} - -.RB { - background-image: url('../assets/omori_rb_button.png'); - opacity: 0.6; - right: 16px; - bottom: 56vh; -} - -.dpad-buttons { - opacity: 0.6; - z-index: 1488; - position: absolute; - bottom: 16px; - left: 32px; - background-size: cover; - background-position: center; - justify-content: center; - align-items: center; - background-image: url('../assets/omori_dpad.png'); - display: flex; - flex-flow: column nowrap; - min-width: 42vh; - min-height: 42vh; - image-rendering: pixelated; -} - -.dpad-buttons-row { - display: flex; - flex-flow: row nowrap; -} - -.dpad-button { - min-width: 12vh; - min-height: 12vh; - display: flex; - position: relative; - width: 100%; - height: 100%; - opacity: 0.6; -} - -.up { - /* background-color: blue; */ - bottom: 7.5vh; - right: 6vh; -} - -.left { - /* background-color: red; */ - right: 7.5vh; - top: 6vh; -} - -.right { - /* background-color: green; */ - left: 7.5vh; - bottom: 6vh; -} - -.down { - /* background-color: yellow; */ - top: 7.5vh; - left: 6vh; -} diff --git a/www.rus/js/porting/joy.js b/www.rus/js/porting/joy.js deleted file mode 100644 index 810702d..0000000 --- a/www.rus/js/porting/joy.js +++ /dev/null @@ -1,421 +0,0 @@ -/* - * Name : joy.js - * @author : Roberto D'Amico (Bobboteck) - * Last modified : 30.06.2022 - * Revision : 2.0.0 - * - * Modification History: - * Date Version Modified By Description - * 2021-12-21 2.0.0 Roberto D'Amico New version of the project that integrates the callback functions, while - * maintaining compatibility with previous versions. Fixed Issue #27 too, - * thanks to @artisticfox8 for the suggestion. - * 2020-06-09 1.1.6 Roberto D'Amico Fixed Issue #10 and #11 - * 2020-04-20 1.1.5 Roberto D'Amico Correct: Two sticks in a row, thanks to @liamw9534 for the suggestion - * 2020-04-03 Roberto D'Amico Correct: InternalRadius when change the size of canvas, thanks to - * @vanslipon for the suggestion - * 2020-01-07 1.1.4 Roberto D'Amico Close #6 by implementing a new parameter to set the functionality of - * auto-return to 0 position - * 2019-11-18 1.1.3 Roberto D'Amico Close #5 correct indication of East direction - * 2019-11-12 1.1.2 Roberto D'Amico Removed Fix #4 incorrectly introduced and restored operation with touch - * devices - * 2019-11-12 1.1.1 Roberto D'Amico Fixed Issue #4 - Now JoyStick work in any position in the page, not only - * at 0,0 - * - * The MIT License (MIT) - * - * This file is part of the JoyStick Project (https://github.com/bobboteck/JoyStick). - * Copyright (c) 2015 Roberto D'Amico (Bobboteck). - * - * Permission is hereby granted, free of charge, to any person obtaining a copy - * of this software and associated documentation files (the "Software"), to deal - * in the Software without restriction, including without limitation the rights - * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell - * copies of the Software, and to permit persons to whom the Software is - * furnished to do so, subject to the following conditions: - * - * The above copyright notice and this permission notice shall be included in all - * copies or substantial portions of the Software. - * - * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, - * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE - * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER - * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, - * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE - * SOFTWARE. - */ - -let StickStatus = -{ - xPosition: 0, - yPosition: 0, - x: 0, - y: 0, - cardinalDirection: "C" -}; - -/** - * @desc Principal object that draw a joystick, you only need to initialize the object and suggest the HTML container - * @costructor - * @param container {String} - HTML object that contains the Joystick - * @param parameters (optional) - object with following keys: - * title {String} (optional) - The ID of canvas (Default value is 'joystick') - * width {Int} (optional) - The width of canvas, if not specified is setted at width of container object (Default value is the width of container object) - * height {Int} (optional) - The height of canvas, if not specified is setted at height of container object (Default value is the height of container object) - * internalFillColor {String} (optional) - Internal color of Stick (Default value is '#00AA00') - * internalLineWidth {Int} (optional) - Border width of Stick (Default value is 2) - * internalStrokeColor {String}(optional) - Border color of Stick (Default value is '#003300') - * externalLineWidth {Int} (optional) - External reference circonference width (Default value is 2) - * externalStrokeColor {String} (optional) - External reference circonference color (Default value is '#008000') - * autoReturnToCenter {Bool} (optional) - Sets the behavior of the stick, whether or not, it should return to zero position when released (Default value is True and return to zero) - * @param callback {StickStatus} - - */ -var JoyStick = (function(container, parameters, callback) -{ - parameters = parameters || {}; - var title = (typeof parameters.title === "undefined" ? "joystick" : parameters.title), - width = (typeof parameters.width === "undefined" ? 0 : parameters.width), - height = (typeof parameters.height === "undefined" ? 0 : parameters.height), - internalFillColor = (typeof parameters.internalFillColor === "undefined" ? "#00AA00" : parameters.internalFillColor), - internalLineWidth = (typeof parameters.internalLineWidth === "undefined" ? 2 : parameters.internalLineWidth), - internalStrokeColor = (typeof parameters.internalStrokeColor === "undefined" ? "#003300" : parameters.internalStrokeColor), - externalLineWidth = (typeof parameters.externalLineWidth === "undefined" ? 2 : parameters.externalLineWidth), - externalStrokeColor = (typeof parameters.externalStrokeColor === "undefined" ? "#008000" : parameters.externalStrokeColor), - autoReturnToCenter = (typeof parameters.autoReturnToCenter === "undefined" ? true : parameters.autoReturnToCenter); - - callback = callback || function(StickStatus) {}; - - // Create Canvas element and add it in the Container object - var objContainer = document.getElementById(container); - - // Fixing Unable to preventDefault inside passive event listener due to target being treated as passive in Chrome [Thanks to https://github.com/artisticfox8 for this suggestion] - objContainer.style.touchAction = "none"; - - var canvas = document.createElement("canvas"); - canvas.id = title; - if(width === 0) { width = objContainer.clientWidth; } - if(height === 0) { height = objContainer.clientHeight; } - canvas.width = width; - canvas.height = height; - objContainer.appendChild(canvas); - var context=canvas.getContext("2d"); - - var pressed = 0; // Bool - 1=Yes - 0=No - var circumference = 2 * Math.PI; - var internalRadius = (canvas.width-((canvas.width/2)+10))/2; - var maxMoveStick = internalRadius + 5; - var externalRadius = internalRadius + 30; - var centerX = canvas.width / 2; - var centerY = canvas.height / 2; - var directionHorizontalLimitPos = canvas.width / 10; - var directionHorizontalLimitNeg = directionHorizontalLimitPos * -1; - var directionVerticalLimitPos = canvas.height / 10; - var directionVerticalLimitNeg = directionVerticalLimitPos * -1; - // Used to save current position of stick - var movedX=centerX; - var movedY=centerY; - - // Check if the device support the touch or not - if("ontouchstart" in document.documentElement) - { - canvas.addEventListener("touchstart", onTouchStart, false); - document.addEventListener("touchmove", onTouchMove, false); - document.addEventListener("touchend", onTouchEnd, false); - } - else - { - canvas.addEventListener("mousedown", onMouseDown, false); - document.addEventListener("mousemove", onMouseMove, false); - document.addEventListener("mouseup", onMouseUp, false); - } - // Draw the object - drawExternal(); - drawInternal(); - - /****************************************************** - * Private methods - *****************************************************/ - - /** - * @desc Draw the external circle used as reference position - */ - function drawExternal() - { - context.beginPath(); - context.arc(centerX, centerY, externalRadius, 0, circumference, false); - context.lineWidth = externalLineWidth; - context.strokeStyle = externalStrokeColor; - context.stroke(); - } - - /** - * @desc Draw the internal stick in the current position the user have moved it - */ - function drawInternal() - { - context.beginPath(); - if(movedX canvas.width) { movedX = canvas.width-(maxMoveStick); } - if(movedY canvas.height) { movedY = canvas.height-(maxMoveStick); } - context.arc(movedX, movedY, internalRadius, 0, circumference, false); - // create radial gradient - var grd = context.createRadialGradient(centerX, centerY, 5, centerX, centerY, 200); - // Light color - grd.addColorStop(0, internalFillColor); - // Dark color - grd.addColorStop(1, internalStrokeColor); - context.fillStyle = grd; - context.fill(); - context.lineWidth = internalLineWidth; - context.strokeStyle = internalStrokeColor; - context.stroke(); - } - - /** - * @desc Events for manage touch - */ - let touchId = null; - function onTouchStart(event) - { - pressed = 1; - touchId = event.targetTouches[0].identifier; - } - - function onTouchMove(event) - { - if(pressed === 1 && event.targetTouches[0].target === canvas) - { - movedX = event.targetTouches[0].pageX; - movedY = event.targetTouches[0].pageY; - // Manage offset - if(canvas.offsetParent.tagName.toUpperCase() === "BODY") - { - movedX -= canvas.offsetLeft; - movedY -= canvas.offsetTop; - } - else - { - movedX -= canvas.offsetParent.offsetLeft; - movedY -= canvas.offsetParent.offsetTop; - } - // Delete canvas - context.clearRect(0, 0, canvas.width, canvas.height); - // Redraw object - drawExternal(); - drawInternal(); - - // Set attribute of callback - StickStatus.xPosition = movedX; - StickStatus.yPosition = movedY; - StickStatus.x = (100*((movedX - centerX)/maxMoveStick)).toFixed(); - StickStatus.y = ((100*((movedY - centerY)/maxMoveStick))*-1).toFixed(); - StickStatus.cardinalDirection = getCardinalDirection(); - callback(StickStatus); - } - } - - function onTouchEnd(event) - { - if (event.changedTouches[0].identifier !== touchId) return; - - pressed = 0; - // If required reset position store variable - if(autoReturnToCenter) - { - movedX = centerX; - movedY = centerY; - } - // Delete canvas - context.clearRect(0, 0, canvas.width, canvas.height); - // Redraw object - drawExternal(); - drawInternal(); - - // Set attribute of callback - StickStatus.xPosition = movedX; - StickStatus.yPosition = movedY; - StickStatus.x = (100*((movedX - centerX)/maxMoveStick)).toFixed(); - StickStatus.y = ((100*((movedY - centerY)/maxMoveStick))*-1).toFixed(); - StickStatus.cardinalDirection = getCardinalDirection(); - callback(StickStatus); - } - - /** - * @desc Events for manage mouse - */ - function onMouseDown(event) - { - pressed = 1; - } - - /* To simplify this code there was a new experimental feature here: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/offsetX , but it present only in Mouse case not metod presents in Touch case :-( */ - function onMouseMove(event) - { - if(pressed === 1) - { - movedX = event.pageX; - movedY = event.pageY; - // Manage offset - if(canvas.offsetParent.tagName.toUpperCase() === "BODY") - { - movedX -= canvas.offsetLeft; - movedY -= canvas.offsetTop; - } - else - { - movedX -= canvas.offsetParent.offsetLeft; - movedY -= canvas.offsetParent.offsetTop; - } - // Delete canvas - context.clearRect(0, 0, canvas.width, canvas.height); - // Redraw object - drawExternal(); - drawInternal(); - - // Set attribute of callback - StickStatus.xPosition = movedX; - StickStatus.yPosition = movedY; - StickStatus.x = (100*((movedX - centerX)/maxMoveStick)).toFixed(); - StickStatus.y = ((100*((movedY - centerY)/maxMoveStick))*-1).toFixed(); - StickStatus.cardinalDirection = getCardinalDirection(); - callback(StickStatus); - } - } - - function onMouseUp(event) - { - pressed = 0; - // If required reset position store variable - if(autoReturnToCenter) - { - movedX = centerX; - movedY = centerY; - } - // Delete canvas - context.clearRect(0, 0, canvas.width, canvas.height); - // Redraw object - drawExternal(); - drawInternal(); - - // Set attribute of callback - StickStatus.xPosition = movedX; - StickStatus.yPosition = movedY; - StickStatus.x = (100*((movedX - centerX)/maxMoveStick)).toFixed(); - StickStatus.y = ((100*((movedY - centerY)/maxMoveStick))*-1).toFixed(); - StickStatus.cardinalDirection = getCardinalDirection(); - callback(StickStatus); - } - - function getCardinalDirection() - { - let result = ""; - let orizontal = movedX - centerX; - let vertical = movedY - centerY; - - if(vertical >= directionVerticalLimitNeg && vertical <= directionVerticalLimitPos) - { - result = "C"; - } - if(vertical < directionVerticalLimitNeg) - { - result = "N"; - } - if(vertical > directionVerticalLimitPos) - { - result = "S"; - } - - if(orizontal < directionHorizontalLimitNeg) - { - if(result === "C") - { - result = "W"; - } - else - { - result += "W"; - } - } - if(orizontal > directionHorizontalLimitPos) - { - if(result === "C") - { - result = "E"; - } - else - { - result += "E"; - } - } - - return result; - } - - /****************************************************** - * Public methods - *****************************************************/ - - /** - * @desc The width of canvas - * @return Number of pixel width - */ - this.GetWidth = function () - { - return canvas.width; - }; - - /** - * @desc The height of canvas - * @return Number of pixel height - */ - this.GetHeight = function () - { - return canvas.height; - }; - - /** - * @desc The X position of the cursor relative to the canvas that contains it and to its dimensions - * @return Number that indicate relative position - */ - this.GetPosX = function () - { - return movedX; - }; - - /** - * @desc The Y position of the cursor relative to the canvas that contains it and to its dimensions - * @return Number that indicate relative position - */ - this.GetPosY = function () - { - return movedY; - }; - - /** - * @desc Normalizzed value of X move of stick - * @return Integer from -100 to +100 - */ - this.GetX = function () - { - return (100*((movedX - centerX)/maxMoveStick)).toFixed(); - }; - - /** - * @desc Normalizzed value of Y move of stick - * @return Integer from -100 to +100 - */ - this.GetY = function () - { - return ((100*((movedY - centerY)/maxMoveStick))*-1).toFixed(); - }; - - /** - * @desc Get the direction of the cursor as a string that indicates the cardinal points where this is oriented - * @return String of cardinal point N, NE, E, SE, S, SW, W, NW and C when it is placed in the center - */ - this.GetDir = function() - { - return getCardinalDirection(); - }; -}); diff --git a/www.rus/js/porting/jscontrols.js b/www.rus/js/porting/jscontrols.js index e8f989e..b57417c 100644 --- a/www.rus/js/porting/jscontrols.js +++ b/www.rus/js/porting/jscontrols.js @@ -1,55 +1,5 @@ // by VienDesu! Poring Team 2023 -function create_control_buttons() { - - // A-Y Buttons - const DivBMain = document.createElement("div"); - DivBMain.className = "gamepad-buttons"; - DivBMain.id = "gamepad-div"; - const DivBRow1 = document.createElement("div"); - DivBRow1.className = "gamepad-buttons-row"; - const DivBRow2 = document.createElement("div"); - DivBRow2.className = "gamepad-buttons-row"; - const DivBRow3 = document.createElement("div"); - DivBRow3.className = "gamepad-buttons-row"; - - const DivB_Y = document.createElement("div"); - DivB_Y.className = "gamepad-button Y"; - DivB_Y.id = "buttonA"; - const DivB_X = document.createElement("div"); - DivB_X.className = "gamepad-button X"; - DivB_X.id = "buttonShift"; - const DivB_B = document.createElement("div"); - DivB_B.className = "gamepad-button B"; - DivB_B.id = "buttonX"; - const DivB_A = document.createElement("div"); - DivB_A.className = "gamepad-button A"; - DivB_A.id = "buttonZ"; - - // LB-RB Buttons - const DivB_LB = document.createElement("div"); - DivB_LB.className = "gamepad-bumper LB"; - DivB_LB.id = "buttonQ"; - const DivB_RB = document.createElement("div"); - DivB_RB.className = "gamepad-bumper RB"; - DivB_RB.id = "buttonW"; - - // Adding - document.body.appendChild(DivB_LB); - document.body.appendChild(DivB_RB); - - DivBMain.appendChild(DivBRow1); - DivBMain.appendChild(DivBRow2); - DivBMain.appendChild(DivBRow3); - - DivBRow1.appendChild(DivB_Y); - DivBRow2.appendChild(DivB_X); - DivBRow2.appendChild(DivB_B); - DivBRow3.appendChild(DivB_A); - - document.body.appendChild(DivBMain); -} - function create_fps_button() { // Remove in release const keys = [{ key: 'F2', keyCode: 113 }]; @@ -66,225 +16,11 @@ function create_fps_button() { } } -function create_new_controls() { - // Remove in release - const NewBtn = document.createElement("div"); - NewBtn.className = "new-button"; - document.body.appendChild(NewBtn); - - NewBtn.addEventListener("pointerdown", () => { - var controls_canvas = document.getElementById("ControlsCanvas"); - if (controls_canvas === null) { - document.getElementById("show-gamepad").remove(); - ONSControls.initialize(); - } else { - controls_canvas.remove(); - create_show_button(); - } - }); -} - -function create_dpad_buttons() { - // Скуфting elements - const DivDMain = document.createElement("div"); - DivDMain.className = "dpad-buttons"; - DivDMain.id = "dpad-div"; - const DivDRow1 = document.createElement("div"); - DivDRow1.className = "dpad-buttons-row"; - const DivDRow2 = document.createElement("div"); - DivDRow2.className = "dpad-buttons-row"; - - const DivD_L = document.createElement("div"); - DivD_L.className = "dpad-button left"; - DivD_L.id = "buttonLeft"; - const DivD_U = document.createElement("div"); - DivD_U.className = "dpad-button up"; - DivD_U.id = "buttonUp"; - const DivD_D = document.createElement("div"); - DivD_D.className = "dpad-button down"; - DivD_D.id = "buttonDown"; - const DivD_R = document.createElement("div"); - DivD_R.className = "dpad-button right"; - DivD_R.id = "buttonRight"; - - // Adding - DivDMain.appendChild(DivDRow1); - DivDMain.appendChild(DivDRow2); - - DivDRow1.appendChild(DivD_L); - DivDRow1.appendChild(DivD_U); - DivDRow2.appendChild(DivD_D); - DivDRow2.appendChild(DivD_R); - - document.body.appendChild(DivDMain); - - currentControlElement = "dpad"; -} - -function create_joystick() { - const JoyDiv = document.createElement("div"); - JoyDiv.id = "joyDiv"; - document.body.appendChild(JoyDiv); - const kbd = joyStates; - const joy = new JoyStick('joyDiv', {internalFillColor: "#373737", internalStrokeColor: "#FFFFFF", externalStrokeColor: "#FFFFFF"}, (stickData) => { - disableActive(); - switch (stickData.cardinalDirection) { - case 'NE': - case 'NW': - case 'N': - kbd.up.status = true; - sendEvent(false, kbd.up.code); - break; - case 'E': - kbd.right.status = true; - sendEvent(false, kbd.right.code); - break; - case 'W': - kbd.left.status = true; - sendEvent(false, kbd.left.code); - break; - case 'SE': - case 'SW': - case 'S': - kbd.down.status = true; - sendEvent(false, kbd.down.code); - break; - case 'C': - disableActive(); - break; - } - }); - currentControlElement = "joystick"; -} - -function create_switch_button() { - const newDiv = document.createElement("div"); - newDiv.className = "switch-button"; - newDiv.id = "switch"; - - document.body.appendChild(newDiv); - - newDiv.addEventListener("pointerdown", (event) => { - if (document.getElementById("joyDiv") === null) { - document.getElementById("dpad-div").remove(); - create_joystick(); - } else { - document.getElementById("joyDiv").remove(); - create_dpad_buttons(); - setupDpad(); - } - }); -} - -function create_show_button() { - const newDiv = document.createElement("div"); - newDiv.className = "show-gamepad-button"; - newDiv.id = "show-gamepad"; - - document.body.appendChild(newDiv); - - newDiv.addEventListener("pointerdown", (event) => { - event.stopImmediatePropagation(); - event.preventDefault(); - var DivBMain = document.getElementById("gamepad-div"); - var DivB_LB = document.getElementById("buttonW"); - var DivB_RB = document.getElementById("buttonQ"); - var DivDMain = document.getElementById("dpad-div"); - var DivJoy = document.getElementById("joyDiv"); - var ShowB = document.getElementById("switch"); - - if (DivBMain !== null) { - DivBMain.remove(); - DivB_LB.remove(); - DivB_RB.remove(); - ShowB.remove(); - switch (currentControlElement) { - case "dpad": - DivDMain.remove(); - break; - case "joystick": - DivJoy.remove(); - break; - } - } else { - create_control_buttons(); - switch (currentControlElement) { - case "dpad": - create_dpad_buttons(); - setupDpad(); - break; - case "joystick": - create_joystick(); - break; - } - setupButtons(); - create_switch_button(); - } - }); -} - -var currentControlElement = null; - -const keys = [ - { key: 'Z', keyCode: 90 }, - { key: 'X', keyCode: 88 }, - { key: 'Shift', keyCode: 16 }, - { key: 'A', keyCode: 65 }, - - { key: 'Q', keyCode: 81 }, - { key: 'W', keyCode: 87 } -]; - -const dpadkeys = [ - { key: "Left", keyCode: 37 }, - { key: "Up", keyCode: 38 }, - { key: "Right", keyCode: 39 }, - { key: "Down", keyCode: 40 } -]; - -const joyStates = { - left: { status: false, code: 37 }, - right: { status: false, code: 39 }, - - up: { status: false, code: 38 }, - down: { status: false, code: 40 } -}; - -function createButton(key, keyCode) { - return { key: key, keyCode: keyCode }; -} - function sendEvent(isUp, keycode) { document.getElementById("GameCanvas").focus(); document.dispatchEvent(new KeyboardEvent(isUp ? 'keyup' : 'keydown', { 'key': '', keyCode: keycode })) } -function disableActive() { - for (const kbdKey in joyStates) { - const kbd = joyStates[kbdKey]; - if (kbd.status) { - sendEvent(true, kbd.code); - kbd.status = false; - } - } -} - -function setupButtons() { - for (const key of keys) { - const elementId = key.id === undefined ? `button${key.key}` : key.id; - console.log(`Setting up the ${elementId} key...`); //Remove in release - setupKey(elementId, key.key, key.keyCode); - } -} - -function setupDpad() { - for (const key of dpadkeys) { - const elementId = key.id === undefined ? `button${key.key}` : key.id; - console.log(`Setting up the ${elementId} key...`); //Remove in release - setupKey(elementId, key.key, key.keyCode); - } -} - function setupKey(id, key, keyCode) { const element = document.getElementById(id); element.addEventListener("pointerdown", (event) => { @@ -301,37 +37,4 @@ function setupKey(id, key, keyCode) { window.addEventListener('load', () => { create_fps_button(); // Remove in release - // create_new_controls(); // Remove in release - // if (navigator.getGamepads().length == 0) { - // create_control_buttons(); - // create_dpad_buttons(); - // create_show_button(); - // create_switch_button(); - // setupButtons(); - // setupDpad(); - // } -}); - -// window.addEventListener('gamepadconnected', () => { -// var DivBMain = document.getElementById("gamepad-div"); -// var DivB_LB = document.getElementById("buttonW"); -// var DivB_RB = document.getElementById("buttonQ"); -// var DivDMain = document.getElementById("dpad-div"); -// var DivJoy = document.getElementById("joyDiv"); -// var ShowB = document.getElementById("switch"); - -// if (DivBMain !== null) { -// DivBMain.remove(); -// DivB_LB.remove(); -// DivB_RB.remove(); -// ShowB.remove(); -// switch (currentControlElement) { -// case "dpad": -// DivDMain.remove(); -// break; -// case "joystick": -// DivJoy.remove(); -// break; -// } -// } -// }); \ No newline at end of file +}); \ No newline at end of file