Remove old controls code
This commit is contained in:
parent
e0a92867b3
commit
11aefede1d
6 changed files with 2 additions and 1819 deletions
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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<internalRadius) { movedX=maxMoveStick; }
|
||||
if((movedX+internalRadius) > canvas.width) { movedX = canvas.width-(maxMoveStick); }
|
||||
if(movedY<internalRadius) { movedY=maxMoveStick; }
|
||||
if((movedY+internalRadius) > 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();
|
||||
};
|
||||
});
|
||||
|
|
@ -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;
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue