8de3f594f9
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>
43 lines
1.3 KiB
HTML
43 lines
1.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<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;
|
|
background-color: #1a1a2e;
|
|
display: flex;
|
|
justify-content: center;
|
|
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>
|
|
<body>
|
|
<div id="game-container"></div>
|
|
<script type="module" src="/src/main.js"></script>
|
|
</body>
|
|
</html>
|