Skip to content

Fix buttons for skyjump #416

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

Merged
RolandoDrRobot merged 1 commit into from
Jun 24, 2025
Merged

Fix buttons for skyjump #416

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion client/dev-dist/sw.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ define(['./workbox-20a2f87f'], (function (workbox) { 'use strict';
"revision": "3ca0b8505b4bec776b69afdba2768812"
}, {
"url": "index.html",
"revision": "0.tvrddraj1fg"
"revision": "0.5vrb7bvaaug"
}], {});
workbox.cleanupOutdatedCaches();
workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {
Expand Down
67 changes: 67 additions & 0 deletions client/src/components/SkyJumpMiniGame/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import {
PLATFORM_IMG_PATH,
RESET_GAME_DELAY,
ENERGY_TOAST_DURATION,
PLAYER_HORIZONTAL_SPEED,
} from './gameConfig';

import { GameEngine } from './gameEngine';
Expand Down Expand Up @@ -284,6 +285,33 @@ const CanvasSkyJumpGame = forwardRef<SkyJumpGameRefHandle, CanvasSkyJumpGameProp
isGameOver: () => gameEngineRef.current?.isGameOver() ?? true,
}));

// Direct button handlers as backup
const handleLeftButtonPress = useCallback(() => {
console.log('Left button pressed directly!');
if (gameEngineRef.current && !gameEngineRef.current.isGameOver()) {
gameEngineRef.current.setPlayerVelocityX(-PLAYER_HORIZONTAL_SPEED);
gameEngineRef.current.setPlayerFacingDirection(false);
gameEngineRef.current.setTouchControlsPressed(true, -1);
}
}, []);

const handleRightButtonPress = useCallback(() => {
console.log('Right button pressed directly!');
if (gameEngineRef.current && !gameEngineRef.current.isGameOver()) {
gameEngineRef.current.setPlayerVelocityX(PLAYER_HORIZONTAL_SPEED);
gameEngineRef.current.setPlayerFacingDirection(true);
gameEngineRef.current.setTouchControlsPressed(true, 1);
}
}, []);

const handleButtonRelease = useCallback(() => {
console.log('Button released directly!');
if (gameEngineRef.current && !gameEngineRef.current.isGameOver()) {
gameEngineRef.current.setPlayerVelocityX(0);
gameEngineRef.current.setTouchControlsPressed(false, 0);
}
}, []);

return (
<div
className={`skyjump-game-container ${className} ${
Expand All @@ -310,14 +338,52 @@ const CanvasSkyJumpGame = forwardRef<SkyJumpGameRefHandle, CanvasSkyJumpGameProp
<div
ref={touchLeftButtonRef}
className="skyjump-control-button skyjump-left-button"
role="button"
tabIndex={0}
aria-label="Mover izquierda"
onTouchStart={(e) => {
e.preventDefault();
handleLeftButtonPress();
}}
onTouchEnd={(e) => {
e.preventDefault();
handleButtonRelease();
}}
onMouseDown={(e) => {
e.preventDefault();
handleLeftButtonPress();
}}
onMouseUp={(e) => {
e.preventDefault();
handleButtonRelease();
}}
onContextMenu={(e) => e.preventDefault()}
>
←
</div>
<div
ref={touchRightButtonRef}
className="skyjump-control-button skyjump-right-button"
role="button"
tabIndex={0}
aria-label="Mover derecha"
onTouchStart={(e) => {
e.preventDefault();
handleRightButtonPress();
}}
onTouchEnd={(e) => {
e.preventDefault();
handleButtonRelease();
}}
onMouseDown={(e) => {
e.preventDefault();
handleRightButtonPress();
}}
onMouseUp={(e) => {
e.preventDefault();
handleButtonRelease();
}}
onContextMenu={(e) => e.preventDefault()}
>
→
</div>
Expand Down Expand Up @@ -359,6 +425,7 @@ const CanvasSkyJumpGame = forwardRef<SkyJumpGameRefHandle, CanvasSkyJumpGameProp
selectedFood={selectedFoodReward?.food}
handlePlayAgain={handlePlayAgain}
restartIcon={RestartIcon}
onExitGame={onExitGame}
/>
)}

Expand Down
56 changes: 55 additions & 1 deletion client/src/components/SkyJumpMiniGame/inputHandler.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,9 @@ export class InputHandler {
private isMobileDevice: boolean = false;
private usingGyroscope: boolean = false;
private gyroscopePermission: PermissionState | null = null;
private onToggleGyroscope?: (isUsing: boolean) => void;
private onToggleGyroscope?: (isUsing: boolean) => void;
private touchLeftButton?: HTMLElement | null;
private touchRightButton?: HTMLElement | null;

constructor(gameEngine: GameEngine, onToggleGyroscope?: (isUsing: boolean) => void) {
this.gameEngine = gameEngine;
Expand All @@ -23,18 +25,31 @@ export class InputHandler {
): void {
this.isMobileDevice = isMobile;
this.usingGyroscope = initialUsingGyro && this.isMobileDevice;
this.touchLeftButton = touchLeftButton;
this.touchRightButton = touchRightButton;

document.addEventListener('keydown', this.handleKeyDown);
document.addEventListener('keyup', this.handleKeyUp);

if (this.isMobileDevice) {
if (touchLeftButton && touchRightButton) {
// Touch events
touchLeftButton.addEventListener('touchstart', (e) => this.handleTouchStart(-1, e as TouchEvent), { passive: false });
touchLeftButton.addEventListener('touchend', (e) => this.handleTouchEnd(e as TouchEvent), { passive: false });
touchRightButton.addEventListener('touchstart', (e) => this.handleTouchStart(1, e as TouchEvent), { passive: false });
touchRightButton.addEventListener('touchend', (e) => this.handleTouchEnd(e as TouchEvent), { passive: false });

// Mouse events as fallback (for devices that translate touch to mouse)
touchLeftButton.addEventListener('mousedown', (e) => this.handleMouseDown(-1, e), { passive: false });
touchLeftButton.addEventListener('mouseup', (e) => this.handleMouseUp(e), { passive: false });
touchRightButton.addEventListener('mousedown', (e) => this.handleMouseDown(1, e), { passive: false });
touchRightButton.addEventListener('mouseup', (e) => this.handleMouseUp(e), { passive: false });

// Prevent context menu and text selection
touchLeftButton.addEventListener('contextmenu', e => e.preventDefault());
touchRightButton.addEventListener('contextmenu', e => e.preventDefault());
touchLeftButton.addEventListener('selectstart', e => e.preventDefault());
touchRightButton.addEventListener('selectstart', e => e.preventDefault());
}

if (this.usingGyroscope) this.requestOrientationPermissionInternal();
Expand Down Expand Up @@ -89,6 +104,26 @@ export class InputHandler {
this.gameEngine.setPlayerVelocityX(0);
};

private handleMouseDown = (direction: number, e: MouseEvent): void => {
e.preventDefault();
if (this.gameEngine.isGameOver() || this.usingGyroscope) return;
this.gameEngine.setTouchControlsPressed(true, direction);
if (direction === 1) {
this.gameEngine.setPlayerVelocityX(PLAYER_HORIZONTAL_SPEED);
this.gameEngine.setPlayerFacingDirection(true);
} else if (direction === -1) {
this.gameEngine.setPlayerVelocityX(-PLAYER_HORIZONTAL_SPEED);
this.gameEngine.setPlayerFacingDirection(false);
}
};

private handleMouseUp = (e: MouseEvent): void => {
e.preventDefault();
if (this.gameEngine.isGameOver() || this.usingGyroscope) return;
this.gameEngine.setTouchControlsPressed(false, 0);
this.gameEngine.setPlayerVelocityX(0);
};

private requestOrientationPermissionInternal = async (): Promise<void> => {
try {
if (typeof (DeviceOrientationEvent as any).requestPermission === 'function') {
Expand Down Expand Up @@ -165,6 +200,25 @@ export class InputHandler {
document.removeEventListener('keyup', this.handleKeyUp);

if (this.isMobileDevice) {
// Remove touch and mouse event listeners
if (this.touchLeftButton) {
this.touchLeftButton.removeEventListener('touchstart', (e) => this.handleTouchStart(-1, e as TouchEvent));
this.touchLeftButton.removeEventListener('touchend', (e) => this.handleTouchEnd(e as TouchEvent));
this.touchLeftButton.removeEventListener('mousedown', (e) => this.handleMouseDown(-1, e));
this.touchLeftButton.removeEventListener('mouseup', (e) => this.handleMouseUp(e));
this.touchLeftButton.removeEventListener('contextmenu', e => e.preventDefault());
this.touchLeftButton.removeEventListener('selectstart', e => e.preventDefault());
}

if (this.touchRightButton) {
this.touchRightButton.removeEventListener('touchstart', (e) => this.handleTouchStart(1, e as TouchEvent));
this.touchRightButton.removeEventListener('touchend', (e) => this.handleTouchEnd(e as TouchEvent));
this.touchRightButton.removeEventListener('mousedown', (e) => this.handleMouseDown(1, e));
this.touchRightButton.removeEventListener('mouseup', (e) => this.handleMouseUp(e));
this.touchRightButton.removeEventListener('contextmenu', e => e.preventDefault());
this.touchRightButton.removeEventListener('selectstart', e => e.preventDefault());
}

if (this.gameEngine.isGyroControlsEnabled()) {
window.removeEventListener('deviceorientation', this.handleDeviceOrientation);
window.removeEventListener('deviceorientation', this.calibrateGyroscope);
Expand Down
13 changes: 12 additions & 1 deletion client/src/components/SkyJumpMiniGame/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,8 +76,10 @@
font-size: 24px;
user-select: none;
touch-action: manipulation;
z-index: 100;
z-index: 10010;
pointer-events: auto;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}

.skyjump-left-button {
Expand All @@ -94,6 +96,15 @@
font-size: 32px;
}

.skyjump-control-button:active {
background-color: #D5D5C1;
transform: scale(0.95);
}

.skyjump-control-button:hover {
background-color: #F0F0E0;
}

/* Return (exit) button */
.skyjump-return-button {
background-color: #ECECDA;
Expand Down