11import { useEffect , useState } from 'react'
22import { useGameStore } from '../hooks/useGameStore'
3- import { Compass , Map , Coins , ShoppingBag } from 'lucide-react'
3+ import { Map , Coins , ShoppingBag , Zap } from 'lucide-react'
44
55export function GameHUD ( ) {
66 const {
@@ -13,7 +13,7 @@ export function GameHUD() {
1313 cornerIslands,
1414 showcaseUnlocked,
1515 cornersUnlocked,
16- boatRotation ,
16+
1717 coinsCollected,
1818 boatHealth,
1919 shipStats,
@@ -22,6 +22,7 @@ export function GameHUD() {
2222 clearLastUnlockedUpgrade,
2323 openShop,
2424 setPhase,
25+ fireCannon,
2526 } = useGameStore ( )
2627
2728 // Cooldown progress (0-1, 1 = ready)
@@ -116,22 +117,6 @@ export function GameHUD() {
116117
117118 if ( phase !== 'playing' ) return null
118119
119- // Convert rotation to compass direction
120- const getCompassDirection = ( rotation : number ) => {
121- // Normalize to 0-360
122- const degrees = ( ( rotation * 180 ) / Math . PI + 360 ) % 360
123-
124- if ( degrees >= 337.5 || degrees < 22.5 ) return 'N'
125- if ( degrees >= 22.5 && degrees < 67.5 ) return 'NW'
126- if ( degrees >= 67.5 && degrees < 112.5 ) return 'W'
127- if ( degrees >= 112.5 && degrees < 157.5 ) return 'SW'
128- if ( degrees >= 157.5 && degrees < 202.5 ) return 'S'
129- if ( degrees >= 202.5 && degrees < 247.5 ) return 'SE'
130- if ( degrees >= 247.5 && degrees < 292.5 ) return 'E'
131- if ( degrees >= 292.5 && degrees < 337.5 ) return 'NE'
132- return 'N'
133- }
134-
135120 // lastUnlockedUpgrade is now the full Upgrade object
136121 const upgradeInfo = lastUnlockedUpgrade
137122
@@ -140,7 +125,16 @@ export function GameHUD() {
140125 { /* Coin hint */ }
141126 { showCoinHint && (
142127 < div className = "absolute top-16 left-1/2 -translate-x-1/2 animate-in fade-in slide-in-from-top-2 duration-300" >
143- < div className = "bg-black/60 backdrop-blur-sm rounded-xl px-4 py-2 text-center text-white text-sm max-w-xs" >
128+ < div className = "bg-black/60 backdrop-blur-sm rounded-xl px-4 py-2 text-center text-white text-sm max-w-xs relative" >
129+ < button
130+ onClick = { ( ) => {
131+ setShowCoinHint ( false )
132+ setCoinHintDismissed ( true )
133+ } }
134+ className = "absolute -top-1 -right-1 w-5 h-5 bg-white/20 hover:bg-white/30 rounded-full flex items-center justify-center text-white/60 hover:text-white transition-colors pointer-events-auto"
135+ >
136+ ×
137+ </ button >
144138 < span className = "text-yellow-400 font-medium" > Coins</ span > make you
145139 faster and can be spent in the{ ' ' }
146140 < span className = "text-yellow-400 font-medium" > shop</ span > !
@@ -149,15 +143,7 @@ export function GameHUD() {
149143 ) }
150144
151145 { /* Top bar */ }
152- < div className = "flex justify-between items-start p-4" >
153- { /* Compass */ }
154- < div className = "pointer-events-auto bg-black/30 backdrop-blur-sm rounded-xl px-4 py-2 flex items-center gap-2 text-white" >
155- < Compass className = "w-5 h-5" />
156- < span className = "font-mono font-bold text-lg w-8" >
157- { getCompassDirection ( boatRotation ) }
158- </ span >
159- </ div >
160-
146+ < div className = "flex justify-end items-start p-4" >
161147 { /* Coin counter + Shop button */ }
162148 < button
163149 onClick = { openShop }
@@ -169,7 +155,7 @@ export function GameHUD() {
169155 </ button >
170156
171157 { /* Island counter */ }
172- < div className = "pointer-events-auto bg-black/30 backdrop-blur-sm rounded-xl px-4 py-2 flex items-center gap-2 text-white" >
158+ < div className = "pointer-events-auto bg-black/30 backdrop-blur-sm rounded-xl px-4 py-2 flex items-center gap-2 text-white ml-2 " >
173159 < Map className = "w-5 h-5" />
174160 < span className = "font-bold" >
175161 { discoveredIslands . size } / { totalIslands }
@@ -182,31 +168,45 @@ export function GameHUD() {
182168
183169 { /* Bottom bar - Battle stage only */ }
184170 { stage === 'battle' && (
185- < div className = "absolute bottom-4 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2" >
171+ < div
172+ className = { `absolute bottom-4 flex flex-col items-center gap-2 ${ 'max-md:right-4 max-md:left-auto max-md:translate-x-0 left-1/2 -translate-x-1/2' } ` }
173+ >
174+ { /* Touch fire button - only visible on touch devices */ }
175+ < button
176+ onClick = { fireCannon }
177+ className = "md:hidden pointer-events-auto bg-red-500/80 backdrop-blur-sm rounded-full p-4 flex items-center justify-center text-white hover:bg-red-600/80 active:scale-95 transition-all shadow-lg"
178+ aria-label = "Fire cannons"
179+ >
180+ < Zap className = "w-6 h-6" />
181+ </ button >
186182 { /* Health bar */ }
187183 < div
188184 className = { `backdrop-blur-sm rounded-full px-4 py-2 flex items-center gap-3 transition-colors duration-75 ${
189185 damageFlash ? 'bg-red-500/70' : 'bg-black/40'
190- } `}
186+ } max-md:px-3 max-md:py-1.5 `}
191187 >
192- < span className = "text-red-400 text-sm font-medium" > HP</ span >
193- < div className = "w-32 h-3 bg-black/50 rounded-full overflow-hidden" >
188+ < span className = "text-red-400 text-sm font-medium max-md:text-xs" >
189+ HP
190+ </ span >
191+ < div className = "w-32 h-3 bg-black/50 rounded-full overflow-hidden max-md:w-20 max-md:h-2" >
194192 < div
195193 className = "h-full bg-gradient-to-r from-red-600 to-red-400"
196194 style = { {
197195 width : `${ ( boatHealth / shipStats . maxHealth ) * 100 } %` ,
198196 } }
199197 />
200198 </ div >
201- < span className = "text-white text-sm font-mono w-12" >
199+ < span className = "text-white text-sm font-mono w-12 max-md:text-xs max-md:w-10 " >
202200 { Math . round ( boatHealth ) } /{ shipStats . maxHealth }
203201 </ span >
204202 </ div >
205203
206204 { /* Cooldown gauge */ }
207- < div className = "bg-black/40 backdrop-blur-sm rounded-full px-4 py-2 flex items-center gap-3" >
208- < span className = "text-cyan-400 text-sm font-medium" > CANNON</ span >
209- < div className = "w-24 h-2 bg-black/50 rounded-full overflow-hidden" >
205+ < div className = "bg-black/40 backdrop-blur-sm rounded-full px-4 py-2 flex items-center gap-3 max-md:px-3 max-md:py-1.5" >
206+ < span className = "text-cyan-400 text-sm font-medium max-md:text-xs" >
207+ CANNON
208+ </ span >
209+ < div className = "w-24 h-2 bg-black/50 rounded-full overflow-hidden max-md:w-16 max-md:h-1.5" >
210210 < div
211211 className = { `h-full transition-all duration-75 ${
212212 cooldownProgress >= 1
@@ -216,7 +216,7 @@ export function GameHUD() {
216216 style = { { width : `${ cooldownProgress * 100 } %` } }
217217 />
218218 </ div >
219- < span className = "text-white/60 text-xs w-12" >
219+ < span className = "text-white/60 text-xs w-12 max-md:text-[10px] max-md:w-10 " >
220220 { cooldownProgress >= 1 ? 'READY' : 'LOADING' }
221221 </ span >
222222 </ div >
0 commit comments