admin/whalehunting
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add comprehensive mobile support with touch controls and responsive design

Browse Source 
Implemented full mobile optimization to make the game mobile-ready:

**Core Mobile Support:**
- Updated viewport meta tag to prevent zoom and improve touch responsiveness
- Added mobile web app meta tags for iOS/Android standalone mode
- Enhanced CSS to prevent text selection, pull-to-refresh, and tap highlights
- Configured Phaser scale system with min/max bounds (320x240 to 1920x1080)
- Added fullscreen support for game container

**Touch Controls:**
- Added mobile device detection to HuntingScene
- Automatically default to touch controls on mobile devices
- Hide keyboard control instructions on mobile
- Only hide cursor on desktop (preserve default cursor on mobile)
- Adjusted messaging for mobile ("Tap to shoot" vs "Click to shoot")

**Touch Feedback:**
- Added pointerdown/pointerup handlers to all interactive buttons
- Buttons now scale down when pressed (0.95x) for tactile feedback
- Maintained hover effects for desktop compatibility
- Updated IntroScene "SET SAIL" button with touch feedback
- Updated MapScene location markers and close button
- Updated TransitionScene continue button
- All touch feedback works on both touch and mouse inputs

**Backward Compatibility:**
- All desktop functionality preserved
- Hover effects still work on desktop
- Keyboard controls available on desktop
- Touch and mouse inputs work seamlessly together

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
Thomas Richter
2025-12-18 05:17:09 +01:00
parent 1e5f4f35cd
commit 8de3f594f9
6 changed files with 105 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
src/scenes/HuntingScene.js
View File

@@ -19,6 +19,12 @@ export default class HuntingScene extends Phaser.Scene {
}
create() {
// Detect mobile device
this.isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
// Default to touch on mobile, keyboard on desktop
this.useKeyboard = !this.isMobile;
// Ocean background
this.add.rectangle(400, 300, 800, 600, 0x1e5a8e);
this.createOceanWaves();
@@ -38,7 +44,8 @@ export default class HuntingScene extends Phaser.Scene {
this.setupOceanMovement();
// Message display
this.showMessage('Hunt whales! Click or press SPACE to shoot harpoon.');
const shootMessage = this.isMobile ? 'Hunt whales! Tap to shoot harpoon.' : 'Hunt whales! Click or press SPACE to shoot harpoon.';
this.showMessage(shootMessage);
}
update() {
@@ -89,19 +96,23 @@ export default class HuntingScene extends Phaser.Scene {
this.shootHarpoon();
});
// Tab to toggle control mode
this.tabKey.on('down', () => {
this.useKeyboard = !this.useKeyboard;
this.controlModeText.setText(`Controls: ${this.useKeyboard ? 'KEYBOARD' : 'MOUSE'} (TAB to switch)`);
if (this.useKeyboard) {
this.input.setDefaultCursor('default');
} else {
this.input.setDefaultCursor('none');
}
});
// Tab to toggle control mode (desktop only)
if (!this.isMobile) {
this.tabKey.on('down', () => {
this.useKeyboard = !this.useKeyboard;
this.controlModeText.setText(`Controls: ${this.useKeyboard ? 'KEYBOARD' : 'MOUSE'} (TAB to switch)`);
if (this.useKeyboard) {
this.input.setDefaultCursor('default');
} else {
this.input.setDefaultCursor('none');
}
});
}
// Start with mouse control (hide cursor)
this.input.setDefaultCursor('none');
// Start with mouse control (hide cursor on desktop only)
if (!this.isMobile) {
this.input.setDefaultCursor(this.useKeyboard ? 'default' : 'none');
}
}
updateCrosshairMouse() {
@@ -190,12 +201,14 @@ export default class HuntingScene extends Phaser.Scene {
});
this.statsText.setScrollFactor(0);
// Control mode indicator (fixed to screen)
this.controlModeText = this.add.text(400, 15, 'Controls: MOUSE (TAB to switch)', {
fontSize: '16px',
fill: '#ffff00'
}).setOrigin(0.5, 0);
this.controlModeText.setScrollFactor(0);
// Control mode indicator (fixed to screen, desktop only)
if (!this.isMobile) {
this.controlModeText = this.add.text(400, 15, 'Controls: MOUSE (TAB to switch)', {
fontSize: '16px',
fill: '#ffff00'
}).setOrigin(0.5, 0);
this.controlModeText.setScrollFactor(0);
}
// Return button (fixed to screen)
const returnBtn = this.add.rectangle(750, 30, 80, 35, 0x8B0000);