Add comprehensive mobile support with touch controls and responsive design

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

View File

@@ -56,12 +56,20 @@ export default class MapScene extends Phaser.Scene {
closeButton.setInteractive({ useHandCursor: true });
closeButton.setStrokeStyle(2, 0xffffff);
this.add.text(750, 50, 'CLOSE', {
const closeText = this.add.text(750, 50, 'CLOSE', {
fontSize: '16px',
fill: '#fff'
}).setOrigin(0.5);
// Touch feedback (works on both touch and mouse)
closeButton.on('pointerdown', () => {
closeButton.setScale(0.95);
closeText.setScale(0.95);
});
closeButton.on('pointerup', () => {
closeButton.setScale(1.0);
closeText.setScale(1.0);
this.returnToShip();
});
}
@@ -100,7 +108,7 @@ export default class MapScene extends Phaser.Scene {
align: 'center'
}).setOrigin(0.5);
// Hover effect
// Hover effect (desktop)
marker.on('pointerover', () => {
marker.setScale(1.1);
this.showMessage(description);
@@ -110,7 +118,17 @@ export default class MapScene extends Phaser.Scene {
marker.setScale(1);
});
marker.on('pointerdown', onClick);
// Touch feedback (works on both touch and mouse)
marker.on('pointerdown', () => {
marker.setScale(0.9);
text.setScale(0.9);
});
marker.on('pointerup', () => {
marker.setScale(1);
text.setScale(1);
onClick();
});
}
createInventoryDisplay() {