bobbert/MAD-Treasure-Hunt
1
0 Fork 0
mirror of https://github.com/mudabbir-ahmad/MAD-Treasure-Hunt.git synced 2026-10-08 03:00:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor map components: streamline player cache marker rendering and update claim logic to use selected cache ID for triggering countdown.

Browse Source
This commit is contained in:
bobbert committed 2026-04-09 09:09:08 +01:00
1 parent e60c6181f1
commit fc378ae016
4 files changed
+47 -51
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/components/gameplay/PlayerMapView.js
+16 -22
View File
@@ -1,9 +1,9 @@
import React from 'react';
import {Platform, StyleSheet, View} from 'react-native';
import MapView, {Circle, Marker, Polygon} from 'react-native-maps';
import MapView, {Marker, Polygon} from 'react-native-maps';
import {getFovCone} from '../../utils/geoMath';
const PlayerMapView = ({userLocation, visibleCaches, heading, claimDistance}) => {
const PlayerMapView = ({userLocation, visibleCaches, heading}) => {
// Initialisation -------------
// State ----------------------
// Handlers -------------------
@@ -26,27 +26,21 @@ const PlayerMapView = ({userLocation, visibleCaches, heading, claimDistance}) =>
pitchEnabled={false}
showsUserLocation
>
{/* Cache markers — uses a custom View instead of pinColor so the
marker renders identically on Apple Maps (iOS) and Google Maps */}
{/* Cache pin markers — appear temporarily when the cache is in the FOV
cone AND within claim distance. Uses a custom View so the pin
renders identically on iOS (Google Maps) and Android */}
{(visibleCaches || []).map((cache) => (
<React.Fragment key={cache.id}>
<Marker
coordinate={cache.coordinates}
title={cache.clue}
anchor={{x: 0.5, y: 0.5}}
tracksViewChanges={Platform.OS === 'ios'}
>
<View style={styles.markerOuter}>
<View style={styles.markerInner} />
</View>
</Marker>
<Circle
center={cache.coordinates}
radius={claimDistance}
fillColor="rgba(250, 204, 21, 0.20)"
strokeColor="rgba(250, 204, 21, 0.90)"
/>
</React.Fragment>
<Marker
key={cache.id}
coordinate={cache.coordinates}
title={cache.clue}
anchor={{x: 0.5, y: 0.5}}
tracksViewChanges={Platform.OS === 'ios'}
>
<View style={styles.markerOuter}>
<View style={styles.markerInner} />
</View>
</Marker>
))}
{/* FOV heading cone */}
{coneCoords && (
src/components/screens/ExpandedMapScreen.js
+12 -19
View File
@@ -107,26 +107,19 @@ const ExpandedMapScreen = ({route}) => {
/>
</React.Fragment>
))}
{/* Players — custom View markers for Apple Maps compatibility */}
{/* Players — pin markers appear when cache is in FOV cone + within range */}
{!isAdmin && visiblePlayerCaches.map((cache) => (
<React.Fragment key={cache.id}>
<Marker
coordinate={cache.coordinates}
title={cache.clue}
anchor={{x: 0.5, y: 0.5}}
tracksViewChanges={Platform.OS === 'ios'}
>
<View style={styles.cacheMarkerOuter}>
<View style={styles.cacheMarkerInner} />
</View>
</Marker>
<Circle
center={cache.coordinates}
radius={claimDistance}
fillColor="rgba(250, 204, 21, 0.20)"
strokeColor="rgba(250, 204, 21, 0.90)"
/>
</React.Fragment>
<Marker
key={cache.id}
coordinate={cache.coordinates}
title={cache.clue}
anchor={{x: 0.5, y: 0.5}}
tracksViewChanges={Platform.OS === 'ios'}
>
<View style={styles.cacheMarkerOuter}>
<View style={styles.cacheMarkerInner} />
</View>
</Marker>
))}
{/* Heading FOV cone */}
{coneCoords && (
src/components/screens/MapScreen.js
+5 -4
View File
@@ -73,12 +73,14 @@ const MapScreen = ({navigation}) => {
});
}, [cacheRecords, isPlayer, session.currentTid, session.currentUid, EMPTY_CACHES]);
// When requiresTeam is true pass null/empty so usePlayerGame is inert
// When requiresTeam is true pass null/empty so usePlayerGame is inert.
// selectedCacheId is the 5th param — only that cache can trigger the claim countdown.
const {visibleCaches, isClaiming, setIsClaiming} = usePlayerGame(
(isPlayer && !requiresTeam) ? userLocation : null,
(isPlayer && !requiresTeam) ? heading : null,
requiresTeam ? EMPTY_CACHES : activeCachesForPlayer,
claimDistance,
selectedCacheId,
);
const mapRegion = userLocation
@@ -521,8 +523,8 @@ const MapScreen = ({navigation}) => {
);
}
// Player in game — use the first visible cache for the claim timer
const claimTarget = visibleCaches.length > 0 ? visibleCaches[0] : null;
// Player in game — the claim target is the selected cache (only it can trigger the countdown)
const claimTarget = visibleCaches.find((c) => c.id === selectedCacheId) || null;
return (
<Screen style={styles.containerMap}>
@@ -534,7 +536,6 @@ const MapScreen = ({navigation}) => {
userLocation={userLocation}
visibleCaches={visibleCaches}
heading={heading}
claimDistance={claimDistance}
/>
<Pressable style={styles.expandButton} onPress={handleExpandMap}>
<Text style={styles.expandIcon}>⛶</Text>