Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

canvas sizing and controls outside of the canvas #85

Open
hchiam opened this issue May 24, 2024 · 5 comments
Open

canvas sizing and controls outside of the canvas #85

hchiam opened this issue May 24, 2024 · 5 comments

Comments

@hchiam
Copy link

hchiam commented May 24, 2024 •
edited
Loading

i'd like to create a page with netplayjs displaying its canvas, but with buttons and text outside of the canvas that i can control with regular html and js - 2 questions:

  1. is there a suggested way to size netplayjs's canvas so it doesn't keep trying to resize and cover other elements on the page?
  2. is there a way to make html buttons on the page trigger (keyboard) events in netplayjs's canvas?
@hchiam
Copy link
Author

hchiam commented May 24, 2024 •
edited
Loading

  1. is there a way to make html buttons on the page trigger (keyboard) events in netplayjs's canvas?

I think I might've (albeit hackily) solved part 2 of my own questions:

i noticed that i need both keydown and keyup on the <body> for keypresses to work, so triggering them with js works with this:

function triggerKeypress(key) {
  const body = document.body;
   body.dispatchEvent(new KeyboardEvent("keydown", { key }));
  setTimeout(() => {
    body.dispatchEvent(new KeyboardEvent("keyup", { key }));
  }, 25); // need this so host can trigger properly
}

const button = document.querySelector("button");

button.addEventListener("click", () => {
  triggerKeypress("ArrowRight");
});

of course, feel free to suggest something cleaner

@hchiam
Copy link
Author

hchiam commented Aug 9, 2024 •
edited
Loading

It'd be nice if we could extend tick(playerINputs) to include external buttons, but maybe this might work:

let holdingButton = false;
$("#button").addEventListener("touchstart", () => {
    holdingButton = true;
});
$("#button").addEventListener("touchend", () => {
    holdingButton = false;
});
//do similar things for mousedown/mouseup and Enter/spacebar with keydown/keyup

// ...
tick(playerInputs) {
  if (holdingButton) {
    // trigger action that the button is firing
  }
}

@hchiam hchiam mentioned this issue Aug 9, 2024
Open
@hchiam
Copy link
Author

hchiam commented Aug 9, 2024

any help? i'm not sure why clicking the buttons works for player 1 but not for player 2 in my demo: https://github.com/hchiam/learning-webrtc/tree/08e760cb8e0d36fb2a4073437800178558f1208a/netplay-demo

@hchiam
Copy link
Author

hchiam commented Aug 15, 2024 •
edited
Loading

https://hchiam-netplay-demo-browser-buttons.surge.sh/
It seems only player 1 (A, red) is able to use browser buttons, and player 2 (B, blue) can't.
https://github.com/hchiam/learning-webrtc/tree/main/netplay-demo-browser-buttons
similar thing for tapping

@operatorequals
Copy link

Do we have any info on the first part of your question?
I'd like the canvas to not resize more than the given canvasSize, like:

Game.canvasSize = { width: 600, height: 400 };

and console:

Calculating new layout:  
Object { width: 944, height: 629.3333333333333, left: 0, top: 59.33333333333337 }
height: 629.3333333333333
left: 0
top: 59.33333333333337
width: 944

@operatorequals operatorequals mentioned this issue Oct 11, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@operatorequals @hchiam