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>
2025-12-18 05:17:09 +01:00
parent 1e5f4f35cd
commit 8de3f594f9
6 changed files with 105 additions and 27 deletions
--- a/index.html
+++ b/index.html
@@ -2,9 +2,19 @@
 <html lang="en">
 <head>
    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-fullscreen">
+    <meta name="mobile-web-app-capable" content="yes">
    <title>Whale Hunting - A Point & Click Adventure</title>
    <style>
+        * {
+            -webkit-touch-callout: none;
+            -webkit-user-select: none;
+            -webkit-tap-highlight-color: transparent;
+            user-select: none;
+        }
+
        body {
            margin: 0;
            padding: 0;
@@ -14,9 +24,14 @@
            align-items: center;
            min-height: 100vh;
            font-family: 'Courier New', monospace;
+            overscroll-behavior: none;
+            touch-action: none;
        }
        #game-container {
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
+            touch-action: none;
+            max-width: 100vw;
+            max-height: 100vh;
        }
    </style>
 </head>
--- a/src/main.js
+++ b/src/main.js
@@ -21,7 +21,19 @@ const config = {
    },
    scale: {
        mode: Phaser.Scale.FIT,
-        autoCenter: Phaser.Scale.CENTER_BOTH
+        autoCenter: Phaser.Scale.CENTER_BOTH,
+        width: 800,
+        height: 600,
+        min: {
+            width: 320,
+            height: 240
+        },
+        max: {
+            width: 1920,
+            height: 1080
+        },
+        fullscreenTarget: 'game-container',
+        expandParent: false
    }
 };

--- a/src/scenes/HuntingScene.js
+++ b/src/scenes/HuntingScene.js
@@ -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);
--- a/src/scenes/IntroScene.js
+++ b/src/scenes/IntroScene.js
@@ -48,7 +48,7 @@ export default class IntroScene extends Phaser.Scene {
            fontStyle: 'bold'
        }).setOrigin(0.5);

-        // Button hover effects
+        // Button hover effects (desktop)
        buttonBg.on('pointerover', () => {
            buttonBg.setFillStyle(0x4a90c4);
        });
@@ -57,8 +57,17 @@ export default class IntroScene extends Phaser.Scene {
            buttonBg.setFillStyle(0x2d5f8e);
        });

-        // Button click handler
+        // Touch feedback (works on both touch and mouse)
        buttonBg.on('pointerdown', () => {
+            buttonBg.setFillStyle(0x4a90c4);
+            buttonBg.setScale(0.95);
+            buttonText.setScale(0.95);
+        });
+
+        buttonBg.on('pointerup', () => {
+            buttonBg.setFillStyle(0x2d5f8e);
+            buttonBg.setScale(1.0);
+            buttonText.setScale(1.0);
            this.startGame();
        });

--- a/src/scenes/MapScene.js
+++ b/src/scenes/MapScene.js
@@ -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() {
--- a/src/scenes/TransitionScene.js
+++ b/src/scenes/TransitionScene.js
@@ -70,7 +70,7 @@ export default class TransitionScene extends Phaser.Scene {
            fontStyle: 'bold'
        }).setOrigin(0.5);

-        // Hover effect
+        // Hover effect (desktop)
        continueBtn.on('pointerover', () => {
            continueBtn.setFillStyle(0x4a90c4);
        });
@@ -79,7 +79,18 @@ export default class TransitionScene extends Phaser.Scene {
            continueBtn.setFillStyle(0x2d5f8e);
        });

+        // Touch feedback (works on both touch and mouse)
        continueBtn.on('pointerdown', () => {
+            continueBtn.setFillStyle(0x4a90c4);
+            continueBtn.setScale(0.95);
+            btnText.setScale(0.95);
+        });
+
+        continueBtn.on('pointerup', () => {
+            continueBtn.setFillStyle(0x2d5f8e);
+            continueBtn.setScale(1.0);
+            btnText.setScale(1.0);
+
            // Deduct fuel (if any cost)
            if (this.fuelCost > 0) {
                this.inventory.fuel -= this.fuelCost;