mirror of
https://github.com/mudabbir-ahmad/MAD-Treasure-Hunt.git
synced 2026-10-07 19:00:20 +00:00
33 files changed
+1040
-924
No files matched your search
@@ -1,90 +1,82 @@
|
||||
import {useEffect, useState} from "react";
|
||||
import {ActivityIndicator, View} from "react-native";
|
||||
import {NavigationContainer} from "@react-navigation/native";
|
||||
import {createNativeStackNavigator} from "@react-navigation/native-stack";
|
||||
import {SafeAreaProvider} from "react-native-safe-area-context";
|
||||
import LoginScreen from "./src/components/screens/LoginScreen";
|
||||
import RegisterScreen from "./src/components/screens/RegisterScreen";
|
||||
import GameTypeScreen from "./src/components/screens/GameTypeScreen";
|
||||
import JoinPrivateGameScreen from "./src/components/screens/JoinPrivateGameScreen";
|
||||
import ManagePrivateGameScreen from "./src/components/screens/ManagePrivateGameScreen";
|
||||
import CreateGameScreen from "./src/components/screens/CreateGameScreen";
|
||||
import ManageGameScreen from "./src/components/screens/ManageGameScreen";
|
||||
import GameLobbyScreen from "./src/components/screens/GameLobbyScreen";
|
||||
import TeamScreen from "./src/components/screens/TeamScreen";
|
||||
import MapScreen from "./src/components/screens/MapScreen";
|
||||
import LeaderboardScreen from "./src/components/screens/LeaderboardScreen";
|
||||
import AdminHubScreen from "./src/components/screens/AdminHubScreen";
|
||||
import ManageSubgroupsScreen from "./src/components/screens/ManageSubgroupsScreen";
|
||||
import GameSettingsScreen from "./src/components/screens/GameSettingsScreen";
|
||||
import PlayersScreen from "./src/components/screens/PlayersScreen";
|
||||
import ExpandedMapScreen from "./src/components/screens/ExpandedMapScreen";
|
||||
import {loadSession} from "./src/hooks/SessionStore";
|
||||
|
||||
const RootStack = createNativeStackNavigator();
|
||||
const AuthStackNav = createNativeStackNavigator();
|
||||
const GameStackNav = createNativeStackNavigator();
|
||||
const AdminStackNav = createNativeStackNavigator();
|
||||
|
||||
const screenOptions = {
|
||||
headerShown: false,
|
||||
contentStyle: {backgroundColor: '#ffffff'},
|
||||
};
|
||||
|
||||
const AuthStack = () => (
|
||||
<AuthStackNav.Navigator
|
||||
screenOptions={{
|
||||
headerShown: false,
|
||||
contentStyle: { backgroundColor: '#ffffff' },
|
||||
keyboardHandlingEnabled: false,
|
||||
}}
|
||||
>
|
||||
<AuthStackNav.Navigator screenOptions={{...screenOptions, keyboardHandlingEnabled: false}}>
|
||||
<AuthStackNav.Screen name="LoginScreen" component={LoginScreen}/>
|
||||
<AuthStackNav.Screen name="RegisterScreen" component={RegisterScreen}/>
|
||||
</AuthStackNav.Navigator>
|
||||
);
|
||||
|
||||
const GameStack = () => (
|
||||
<GameStackNav.Navigator
|
||||
screenOptions={{
|
||||
headerShown: false,
|
||||
contentStyle: { backgroundColor: '#ffffff' },
|
||||
}}
|
||||
>
|
||||
<GameStackNav.Navigator screenOptions={screenOptions}>
|
||||
<GameStackNav.Screen name="MapScreen" component={MapScreen}/>
|
||||
<GameStackNav.Screen name="TeamScreen" component={TeamScreen}/>
|
||||
<GameStackNav.Screen name="LeaderboardScreen" component={LeaderboardScreen}/>
|
||||
<GameStackNav.Screen name="GameSettingsScreen" component={GameSettingsScreen}/>
|
||||
<GameStackNav.Screen name="PlayersScreen" component={PlayersScreen}/>
|
||||
<GameStackNav.Screen name="GameTypeScreen" component={GameTypeScreen}/>
|
||||
<GameStackNav.Screen name="JoinPrivateGameScreen" component={JoinPrivateGameScreen}/>
|
||||
<GameStackNav.Screen name="ManagePrivateGameScreen" component={ManagePrivateGameScreen}/>
|
||||
<GameStackNav.Screen name="CreateGameScreen" component={CreateGameScreen}/>
|
||||
<GameStackNav.Screen name="ManageGameScreen" component={ManageGameScreen}/>
|
||||
<GameStackNav.Screen name="GameLobbyScreen" component={GameLobbyScreen}/>
|
||||
<GameStackNav.Screen name="ExpandedMapScreen" component={ExpandedMapScreen}/>
|
||||
</GameStackNav.Navigator>
|
||||
);
|
||||
|
||||
const AdminStack = () => (
|
||||
<AdminStackNav.Navigator
|
||||
screenOptions={{
|
||||
headerShown: false,
|
||||
contentStyle: { backgroundColor: '#ffffff' },
|
||||
}}
|
||||
>
|
||||
<AdminStackNav.Navigator screenOptions={screenOptions}>
|
||||
<AdminStackNav.Screen name="GameSettingsScreen" component={GameSettingsScreen}/>
|
||||
<AdminStackNav.Screen name="MapScreen" component={MapScreen}/>
|
||||
<AdminStackNav.Screen name="LeaderboardScreen" component={LeaderboardScreen}/>
|
||||
<AdminStackNav.Screen name="PlayersScreen" component={PlayersScreen}/>
|
||||
<AdminStackNav.Screen name="AdminHubScreen" component={AdminHubScreen}/>
|
||||
<AdminStackNav.Screen name="ManageSubgroupsScreen" component={ManageSubgroupsScreen}/>
|
||||
<AdminStackNav.Screen name="ExpandedMapScreen" component={ExpandedMapScreen}/>
|
||||
<AdminStackNav.Screen name="TeamScreen" component={TeamScreen}/>
|
||||
<AdminStackNav.Screen name="CreateGameScreen" component={CreateGameScreen}/>
|
||||
<AdminStackNav.Screen name="ManageGameScreen" component={ManageGameScreen}/>
|
||||
</AdminStackNav.Navigator>
|
||||
);
|
||||
|
||||
export const App = () => {
|
||||
// Load persisted session from AsyncStorage before choosing initial route
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [initialRoute, setInitialRoute] = useState('Auth');
|
||||
|
||||
useEffect(() => {
|
||||
loadSession().then((session) => {
|
||||
if (session.currentUid) {
|
||||
setInitialRoute(session.isAcceptedAdmin ? 'Admin' : 'Game');
|
||||
}
|
||||
setLoading(false);
|
||||
});
|
||||
}, []);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#fff'}}>
|
||||
<ActivityIndicator size="large" />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<SafeAreaProvider>
|
||||
<NavigationContainer>
|
||||
<RootStack.Navigator
|
||||
screenOptions={{
|
||||
headerShown: false,
|
||||
contentStyle: { backgroundColor: '#ffffff' },
|
||||
}}
|
||||
>
|
||||
<RootStack.Navigator initialRouteName={initialRoute} screenOptions={screenOptions}>
|
||||
<RootStack.Screen name="Auth" component={AuthStack}/>
|
||||
<RootStack.Screen name="Game" component={GameStack}/>
|
||||
<RootStack.Screen name="Admin" component={AdminStack}/>
|
||||
|
||||
@@ -29,8 +29,6 @@
|
||||
}
|
||||
},
|
||||
"permissions": [
|
||||
"ACCESS_FINE_LOCATION",
|
||||
"ACCESS_COARSE_LOCATION",
|
||||
"ACCESS_FINE_LOCATION",
|
||||
"ACCESS_COARSE_LOCATION"
|
||||
],
|
||||
@@ -38,6 +36,11 @@
|
||||
},
|
||||
"web": {
|
||||
"favicon": "./assets/favicon.png"
|
||||
},
|
||||
"extra": {
|
||||
"eas": {
|
||||
"projectId": "c65a2849-f05d-48ef-9e36-950caa214a7d"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
{
|
||||
"cli": {
|
||||
"version": ">= 18.0.5",
|
||||
"appVersionSource": "remote"
|
||||
},
|
||||
"build": {
|
||||
"development": {
|
||||
"developmentClient": true,
|
||||
"distribution": "internal"
|
||||
},
|
||||
"preview": {
|
||||
"distribution": "internal"
|
||||
},
|
||||
"production": {
|
||||
"autoIncrement": true
|
||||
}
|
||||
},
|
||||
"submit": {
|
||||
"production": {}
|
||||
}
|
||||
}
|
||||
Generated
+35
-15
@@ -8,6 +8,7 @@
|
||||
"name": "mad_treasure_hunt_app",
|
||||
"version": "1.0.0",
|
||||
"dependencies": {
|
||||
"@react-native-async-storage/async-storage": "2.2.0",
|
||||
"@react-navigation/native": "^7.1.18",
|
||||
"@react-navigation/native-stack": "^7.3.28",
|
||||
"expo": "~54.0.33",
|
||||
@@ -16,7 +17,6 @@
|
||||
"expo-haptics": "~15.0.8",
|
||||
"expo-image": "~3.0.11",
|
||||
"expo-location": "~19.0.7",
|
||||
"expo-sensors": "~15.0.7",
|
||||
"expo-splash-screen": "~31.0.13",
|
||||
"expo-status-bar": "~3.0.9",
|
||||
"expo-symbols": "~1.0.8",
|
||||
@@ -27,7 +27,7 @@
|
||||
"react-dom": "19.1.0",
|
||||
"react-native": "0.81.5",
|
||||
"react-native-gesture-handler": "~2.28.0",
|
||||
"react-native-maps": "1.20.1",
|
||||
"react-native-maps": "^1.20.1",
|
||||
"react-native-reanimated": "~4.1.1",
|
||||
"react-native-safe-area-context": "~5.6.0",
|
||||
"react-native-screens": "~4.16.0",
|
||||
@@ -2352,6 +2352,18 @@
|
||||
"node": ">=12.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@react-native-async-storage/async-storage": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@react-native-async-storage/async-storage/-/async-storage-2.2.0.tgz",
|
||||
"integrity": "sha512-gvRvjR5JAaUZF8tv2Kcq/Gbt3JHwbKFYfmb445rhOj6NUMx3qPLixmDx5pZAyb9at1bYvJ4/eTUipU5aki45xw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"merge-options": "^3.0.4"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react-native": "^0.0.0-0 || >=0.65 <1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@react-native/assets-registry": {
|
||||
"version": "0.81.5",
|
||||
"resolved": "https://registry.npmjs.org/@react-native/assets-registry/-/assets-registry-0.81.5.tgz",
|
||||
@@ -5490,19 +5502,6 @@
|
||||
"react-native": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/expo-sensors": {
|
||||
"version": "15.0.8",
|
||||
"resolved": "https://registry.npmjs.org/expo-sensors/-/expo-sensors-15.0.8.tgz",
|
||||
"integrity": "sha512-ttibOSCYjFAMIfjV+vVukO1v7GKlbcPRfxcRqbTaSMGneewDwVSXbGFImY530fj1BR3mWq4n9jHnuDp8tAEY9g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"invariant": "^2.2.4"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"expo": "*",
|
||||
"react-native": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/expo-server": {
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npmjs.org/expo-server/-/expo-server-1.0.5.tgz",
|
||||
@@ -6779,6 +6778,15 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/is-plain-obj": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-2.1.0.tgz",
|
||||
"integrity": "sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/is-regex": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
|
||||
@@ -7682,6 +7690,18 @@
|
||||
"resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
|
||||
"integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
|
||||
},
|
||||
"node_modules/merge-options": {
|
||||
"version": "3.0.4",
|
||||
"resolved": "https://registry.npmjs.org/merge-options/-/merge-options-3.0.4.tgz",
|
||||
"integrity": "sha512-2Sug1+knBjkaMsMgf1ctR1Ujx+Ayku4EdJN4Z+C2+JzoeF7A3OZ9KM2GY0CpQS51NR61LTurMJrRKPhSs3ZRTQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"is-plain-obj": "^2.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/merge-stream": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
|
||||
|
||||
+5
-5
@@ -10,6 +10,7 @@
|
||||
"lint": "expo lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@react-native-async-storage/async-storage": "2.2.0",
|
||||
"@react-navigation/native": "^7.1.18",
|
||||
"@react-navigation/native-stack": "^7.3.28",
|
||||
"expo": "~54.0.33",
|
||||
@@ -17,24 +18,23 @@
|
||||
"expo-font": "~14.0.11",
|
||||
"expo-haptics": "~15.0.8",
|
||||
"expo-image": "~3.0.11",
|
||||
"expo-location": "~19.0.7",
|
||||
"expo-splash-screen": "~31.0.13",
|
||||
"expo-status-bar": "~3.0.9",
|
||||
"expo-symbols": "~1.0.8",
|
||||
"expo-system-ui": "~6.0.9",
|
||||
"expo-location": "~19.0.7",
|
||||
"expo-web-browser": "~15.0.10",
|
||||
"geolib": "^3.3.4",
|
||||
"react": "19.1.0",
|
||||
"react-dom": "19.1.0",
|
||||
"react-native": "0.81.5",
|
||||
"react-native-gesture-handler": "~2.28.0",
|
||||
"react-native-maps": "1.20.1",
|
||||
"react-native-worklets": "0.5.1",
|
||||
"expo-sensors": "~15.0.7",
|
||||
"react-native-maps": "^1.20.1",
|
||||
"react-native-reanimated": "~4.1.1",
|
||||
"react-native-safe-area-context": "~5.6.0",
|
||||
"react-native-screens": "~4.16.0",
|
||||
"react-native-web": "~0.21.0"
|
||||
"react-native-web": "~0.21.0",
|
||||
"react-native-worklets": "0.5.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"eslint": "^9.25.0",
|
||||
|
||||
+60
-3
@@ -4,7 +4,7 @@ const path = require('path');
|
||||
|
||||
// --- Configuration ---
|
||||
|
||||
const PORT = process.env.PORT || 80;
|
||||
const PORT = process.env.PORT || 3000;
|
||||
const DATA_DIR = path.join(__dirname, 'data');
|
||||
|
||||
// --- Data Helpers ---
|
||||
@@ -209,6 +209,7 @@ addRoute('POST', '/groups', async (req, res) => {
|
||||
CreatedByUid: payload.CreatedByUid,
|
||||
MaxMemberSubgroups: payload.MaxMemberSubgroups || 1,
|
||||
TeamsEnabled: payload.TeamsEnabled !== undefined ? payload.TeamsEnabled : true,
|
||||
CacheTriggerMeters: payload.CacheTriggerMeters || 20,
|
||||
ApprovedAdmins: [payload.CreatedByUid],
|
||||
CreatedAt: new Date().toISOString(),
|
||||
};
|
||||
@@ -358,7 +359,7 @@ addRoute('POST', '/subgroup-memberships', async (req, res) => {
|
||||
// If a JoinCode was supplied, look up the matching subgroup
|
||||
if (payload.JoinCode) {
|
||||
const subgroups = readJson('subgroups.json');
|
||||
const sg = subgroups.find((s) => s.JoinCode === payload.JoinCode);
|
||||
const sg = subgroups.find((s) => s.JoinCode === String(payload.JoinCode).toUpperCase());
|
||||
if (!sg) return sendJson(res, 400, { message: 'Invalid join code' });
|
||||
payload.Gid = sg.Gid;
|
||||
payload.SGid = sg.SGid;
|
||||
@@ -395,8 +396,39 @@ addRoute('DELETE', '/subgroup-memberships/:id', (req, res, params) => {
|
||||
const rows = readJson('subgroup-memberships.json');
|
||||
const idx = rows.findIndex((r) => String(r.id) === params.id);
|
||||
if (idx === -1) return sendJson(res, 404, { message: 'Membership not found' });
|
||||
|
||||
const removed = rows[idx];
|
||||
rows.splice(idx, 1);
|
||||
writeJson('subgroup-memberships.json', rows);
|
||||
|
||||
// Cascade: remove from team if in one
|
||||
const teamMembers = readJson('team-members.json');
|
||||
const tmIdx = teamMembers.findIndex((r) => r.Uid === removed.Uid);
|
||||
if (tmIdx !== -1) {
|
||||
const tmRemoved = teamMembers[tmIdx];
|
||||
teamMembers.splice(tmIdx, 1);
|
||||
// Transfer leadership to longest-serving member if leader left
|
||||
if (tmRemoved.IsLeader) {
|
||||
const remaining = teamMembers.filter((r) => r.Tid === tmRemoved.Tid);
|
||||
if (remaining.length > 0) {
|
||||
remaining.sort((a, b) => new Date(a.JoinedAt || 0) - new Date(b.JoinedAt || 0));
|
||||
remaining[0].IsLeader = true;
|
||||
}
|
||||
}
|
||||
writeJson('team-members.json', teamMembers);
|
||||
}
|
||||
|
||||
// Clear user game data
|
||||
const users = readJson('users.json');
|
||||
const uIdx = users.findIndex((u) => u.Uid === removed.Uid);
|
||||
if (uIdx !== -1) {
|
||||
users[uIdx].Gid = null;
|
||||
users[uIdx].SGid = null;
|
||||
users[uIdx].TGid = null;
|
||||
users[uIdx].IsAcceptedAdmin = false;
|
||||
writeJson('users.json', users);
|
||||
}
|
||||
|
||||
sendJson(res, 204, null);
|
||||
});
|
||||
|
||||
@@ -471,12 +503,16 @@ addRoute('POST', '/team-members', async (req, res) => {
|
||||
// If a JoinCode was supplied, look up the matching team
|
||||
if (payload.JoinCode) {
|
||||
const teams = readJson('teams.json');
|
||||
const team = teams.find((t) => t.JoinCode === payload.JoinCode);
|
||||
const team = teams.find((t) => t.JoinCode === String(payload.JoinCode).toUpperCase());
|
||||
if (!team) return sendJson(res, 400, { message: 'Invalid team join code' });
|
||||
payload.Tid = team.Tid;
|
||||
}
|
||||
|
||||
// Auto-set leader if first member in team
|
||||
const existing = rows.filter((r) => r.Tid === payload.Tid);
|
||||
payload.id = nextId(rows, 'id');
|
||||
payload.JoinedAt = new Date().toISOString();
|
||||
payload.IsLeader = existing.length === 0;
|
||||
rows.push(payload);
|
||||
writeJson('team-members.json', rows);
|
||||
|
||||
@@ -505,8 +541,29 @@ addRoute('DELETE', '/team-members/:id', (req, res, params) => {
|
||||
const rows = readJson('team-members.json');
|
||||
const idx = rows.findIndex((r) => String(r.id) === params.id);
|
||||
if (idx === -1) return sendJson(res, 404, { message: 'Team member not found' });
|
||||
|
||||
const removed = rows[idx];
|
||||
rows.splice(idx, 1);
|
||||
|
||||
// Transfer leadership to longest-serving member if leader left
|
||||
if (removed.IsLeader) {
|
||||
const remaining = rows.filter((r) => r.Tid === removed.Tid);
|
||||
if (remaining.length > 0) {
|
||||
remaining.sort((a, b) => new Date(a.JoinedAt || 0) - new Date(b.JoinedAt || 0));
|
||||
remaining[0].IsLeader = true;
|
||||
}
|
||||
}
|
||||
|
||||
writeJson('team-members.json', rows);
|
||||
|
||||
// Clear user TGid
|
||||
const users = readJson('users.json');
|
||||
const uIdx = users.findIndex((u) => u.Uid === removed.Uid);
|
||||
if (uIdx !== -1) {
|
||||
users[uIdx].TGid = null;
|
||||
writeJson('users.json', users);
|
||||
}
|
||||
|
||||
sendJson(res, 204, null);
|
||||
});
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
//export const API_BASE_URL = 'http://api.bobby.ip-ddns.com'; //For outside Home network
|
||||
export const API_BASE_URL = 'http://192.168.8.100:3000'; //For when im home (API Endpoint is on my home server...)
|
||||
//export const API_BASE_URL = 'http://api.bobby.ip-ddns.com'; // For actual use
|
||||
export const API_BASE_URL = 'http://192.168.8.100:3000'; // Home network for mudabbir since, server is on my home network and router dont do loopback!!!
|
||||
const API = {};
|
||||
|
||||
API.get = (endpoint) => callFetch(endpoint, 'GET');
|
||||
|
||||
@@ -1,48 +0,0 @@
|
||||
import React from 'react';
|
||||
import MapView, {Circle, Marker} from 'react-native-maps';
|
||||
|
||||
const AdminCacheEditorView = ({ userLocation, caches, onAddCache, onMoveCache }) => {
|
||||
// Initialisation -------------
|
||||
// State ----------------------
|
||||
// Handlers -------------------
|
||||
// View -----------------------
|
||||
|
||||
if (!userLocation) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<MapView
|
||||
style={{ flex: 1 }}
|
||||
initialRegion={{
|
||||
...userLocation,
|
||||
latitudeDelta: 0.01,
|
||||
longitudeDelta: 0.01,
|
||||
}}
|
||||
onLongPress={(event) => onAddCache(event.nativeEvent.coordinate)}
|
||||
scrollEnabled={true}
|
||||
zoomEnabled={true}
|
||||
showsUserLocation
|
||||
>
|
||||
{(caches || []).map((cache) => (
|
||||
<React.Fragment key={cache.id}>
|
||||
<Marker
|
||||
coordinate={cache.coordinates}
|
||||
draggable
|
||||
onDragEnd={(event) => onMoveCache(cache.id, event.nativeEvent.coordinate)}
|
||||
title={`Cache ${cache.id}`}
|
||||
/>
|
||||
<Circle
|
||||
center={cache.coordinates}
|
||||
radius={cache.radius}
|
||||
fillColor="rgba(59, 130, 246, 0.15)"
|
||||
strokeColor="rgba(59, 130, 246, 0.85)"
|
||||
/>
|
||||
</React.Fragment>
|
||||
))}
|
||||
</MapView>
|
||||
);
|
||||
};
|
||||
|
||||
export default AdminCacheEditorView;
|
||||
|
||||
@@ -8,6 +8,7 @@ const CacheCardItem = ({cache, isAdmin, onEdit, onDelete, onSelect}) => {
|
||||
const isClaimed = Boolean(cache.ClaimedByUid);
|
||||
const statusText = isClaimed ? 'Claimed' : 'Available';
|
||||
const statusColor = isClaimed ? '#9ca3af' : '#16a34a';
|
||||
const displayName = cache.name || cache.clue || 'Unnamed Cache';
|
||||
|
||||
// State ----------------------
|
||||
// Handlers -------------------
|
||||
@@ -16,7 +17,12 @@ const CacheCardItem = ({cache, isAdmin, onEdit, onDelete, onSelect}) => {
|
||||
return (
|
||||
<Card>
|
||||
<View style={styles.topRow}>
|
||||
<Text style={styles.clue} numberOfLines={1}>{cache.clue}</Text>
|
||||
<View style={styles.nameWrap}>
|
||||
<Text style={styles.name} numberOfLines={1}>{displayName}</Text>
|
||||
{cache.name ? (
|
||||
<Text style={styles.clue} numberOfLines={1}>{cache.clue}</Text>
|
||||
) : null}
|
||||
</View>
|
||||
<Text style={[styles.status, {color: statusColor}]}>{statusText}</Text>
|
||||
</View>
|
||||
<View style={styles.actions}>
|
||||
@@ -55,7 +61,9 @@ const styles = StyleSheet.create({
|
||||
alignItems: 'center',
|
||||
marginBottom: 8,
|
||||
},
|
||||
clue: {fontSize: 15, fontWeight: '600', color: '#1f2937', flex: 1, marginRight: 8},
|
||||
clue: {fontSize: 13, color: '#6b7280', marginTop: 2},
|
||||
nameWrap: {flex: 1, marginRight: 8},
|
||||
name: {fontSize: 15, fontWeight: '600', color: '#1f2937'},
|
||||
status: {fontSize: 13, fontWeight: '600'},
|
||||
actions: {flexDirection: 'row', gap: 8},
|
||||
editBtn: {
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
import React, {useEffect, useState} from 'react';
|
||||
import {StyleSheet, Text, View} from 'react-native';
|
||||
import {CACHE_CLAIM_TIMER} from '../../utils/geoMath';
|
||||
|
||||
const ClaimTimerView = ({ cache, onClaimSuccess, isClaiming }) => {
|
||||
// Initialisation -------------
|
||||
// State ----------------------
|
||||
|
||||
const [timeLeft, setTimeLeft] = useState(5);
|
||||
const [timeLeft, setTimeLeft] = useState(CACHE_CLAIM_TIMER);
|
||||
|
||||
// Handlers -------------------
|
||||
|
||||
@@ -16,7 +17,7 @@ const ClaimTimerView = ({ cache, onClaimSuccess, isClaiming }) => {
|
||||
} else if (isClaiming && timeLeft === 0 && cache) {
|
||||
onClaimSuccess(cache.id);
|
||||
} else {
|
||||
setTimeLeft(5);
|
||||
setTimeLeft(CACHE_CLAIM_TIMER);
|
||||
}
|
||||
return () => clearTimeout(timer);
|
||||
}, [isClaiming, timeLeft, cache, onClaimSuccess]);
|
||||
@@ -36,13 +37,12 @@ const ClaimTimerView = ({ cache, onClaimSuccess, isClaiming }) => {
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
overlay: {
|
||||
position: 'absolute',
|
||||
bottom: 24,
|
||||
alignSelf: 'center',
|
||||
backgroundColor: 'rgba(0,0,0,0.75)',
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 12,
|
||||
borderRadius: 10,
|
||||
marginTop: 8,
|
||||
},
|
||||
text: {
|
||||
color: '#ffffff',
|
||||
|
||||
@@ -1,44 +1,46 @@
|
||||
import React from 'react';
|
||||
import MapView, {Circle} from 'react-native-maps';
|
||||
import ClaimTimerView from './ClaimTimerView';
|
||||
import MapView, {Circle, Polygon} from 'react-native-maps';
|
||||
import {getFovCone} from '../../utils/geoMath';
|
||||
|
||||
const PlayerMapView = ({ userLocation, visibleCache, isClaiming, onClaimSuccess }) => {
|
||||
const PlayerMapView = ({userLocation, visibleCache, heading, claimDistance}) => {
|
||||
// Initialisation -------------
|
||||
// State ----------------------
|
||||
// Handlers -------------------
|
||||
// View -----------------------
|
||||
|
||||
if (!userLocation) return null;
|
||||
if (!userLocation) return null;
|
||||
|
||||
return (
|
||||
<>
|
||||
<MapView
|
||||
style={{flex: 1}}
|
||||
initialRegion={{
|
||||
...userLocation,
|
||||
latitudeDelta: 0.01,
|
||||
longitudeDelta: 0.01,
|
||||
}}
|
||||
showsUserLocation
|
||||
>
|
||||
{visibleCache ? (
|
||||
<Circle
|
||||
center={visibleCache.coordinates}
|
||||
radius={visibleCache.radius}
|
||||
fillColor="rgba(250, 204, 21, 0.20)"
|
||||
strokeColor="rgba(250, 204, 21, 0.90)"
|
||||
/>
|
||||
) : null}
|
||||
</MapView>
|
||||
const coneCoords = (heading !== null && heading !== undefined)
|
||||
? getFovCone(userLocation, heading)
|
||||
: null;
|
||||
|
||||
<ClaimTimerView
|
||||
cache={visibleCache}
|
||||
isClaiming={isClaiming}
|
||||
onClaimSuccess={onClaimSuccess}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
return (
|
||||
<MapView
|
||||
style={{flex: 1}}
|
||||
region={{...userLocation, latitudeDelta: 0.01, longitudeDelta: 0.01}}
|
||||
scrollEnabled={false}
|
||||
zoomEnabled={true}
|
||||
rotateEnabled={false}
|
||||
pitchEnabled={false}
|
||||
showsUserLocation
|
||||
>
|
||||
{visibleCache && (
|
||||
<Circle
|
||||
center={visibleCache.coordinates}
|
||||
radius={claimDistance}
|
||||
fillColor="rgba(250, 204, 21, 0.20)"
|
||||
strokeColor="rgba(250, 204, 21, 0.90)"
|
||||
/>
|
||||
)}
|
||||
{coneCoords && (
|
||||
<Polygon
|
||||
coordinates={coneCoords}
|
||||
fillColor="rgba(66,133,244,0.28)"
|
||||
strokeColor="rgba(66,133,244,0.50)"
|
||||
strokeWidth={1}
|
||||
/>
|
||||
)}
|
||||
</MapView>
|
||||
);
|
||||
};
|
||||
|
||||
export default PlayerMapView;
|
||||
|
||||
@@ -1,71 +1,69 @@
|
||||
import {Pressable, StyleSheet, Text, View} from 'react-native';
|
||||
import {Alert, Pressable, StyleSheet, Text, View} from 'react-native';
|
||||
import {useSafeAreaInsets} from 'react-native-safe-area-context';
|
||||
import {getSession} from '../../hooks/SessionStore';
|
||||
import {clearGameSession, getSession} from '../../hooks/SessionStore';
|
||||
import API, {API_BASE_URL} from '../API/API';
|
||||
|
||||
const BottomNavbar = ({ navigation, routeName }) => {
|
||||
const BottomNavbar = ({navigation, routeName}) => {
|
||||
// Initialisation ------------
|
||||
|
||||
const insets = useSafeAreaInsets();
|
||||
const session = getSession();
|
||||
|
||||
const adminTabs = [
|
||||
{
|
||||
label: 'Game Settings',
|
||||
route: 'GameSettingsScreen',
|
||||
onPress: () => navigation.navigate('GameSettingsScreen'),
|
||||
},
|
||||
{
|
||||
label: 'Map',
|
||||
route: 'MapScreen',
|
||||
onPress: () => navigation.navigate('MapScreen'),
|
||||
},
|
||||
{
|
||||
label: 'Players',
|
||||
route: 'PlayersScreen',
|
||||
onPress: () => navigation.navigate('PlayersScreen'),
|
||||
},
|
||||
{
|
||||
label: 'Leaderboard',
|
||||
route: 'LeaderboardScreen',
|
||||
onPress: () => navigation.navigate('LeaderboardScreen'),
|
||||
},
|
||||
{label: 'Settings', route: 'GameSettingsScreen', onPress: () => navigation.navigate('GameSettingsScreen')},
|
||||
{label: 'Map', route: 'MapScreen', onPress: () => navigation.navigate('MapScreen')},
|
||||
{label: 'Players', route: 'PlayersScreen', onPress: () => navigation.navigate('PlayersScreen')},
|
||||
{label: 'Leaderboard', route: 'LeaderboardScreen', onPress: () => navigation.navigate('LeaderboardScreen')},
|
||||
];
|
||||
|
||||
const playerTabs = [
|
||||
{
|
||||
label: 'Map',
|
||||
route: 'MapScreen',
|
||||
onPress: () => navigation.navigate('MapScreen'),
|
||||
},
|
||||
{
|
||||
label: 'Leaderboard',
|
||||
route: 'LeaderboardScreen',
|
||||
onPress: () => navigation.navigate('LeaderboardScreen'),
|
||||
},
|
||||
{
|
||||
label: 'Current Team',
|
||||
route: 'TeamScreen',
|
||||
onPress: () => navigation.navigate('TeamScreen'),
|
||||
},
|
||||
{label: 'Team', route: 'TeamScreen', onPress: () => navigation.navigate('TeamScreen')},
|
||||
{label: 'Map', route: 'MapScreen', onPress: () => navigation.navigate('MapScreen')},
|
||||
{label: 'Leaderboard', route: 'LeaderboardScreen', onPress: () => navigation.navigate('LeaderboardScreen')},
|
||||
{label: 'Leave', route: '__leave__', onPress: () => handleLeaveGame()},
|
||||
];
|
||||
|
||||
const tabs = session.isAcceptedAdmin ? adminTabs : playerTabs;
|
||||
|
||||
// State ----------------------
|
||||
// Handlers -------------------
|
||||
|
||||
const handleLeaveGame = () => {
|
||||
Alert.alert('Leave Game', 'Are you sure you want to leave this game?', [
|
||||
{text: 'Cancel', style: 'cancel'},
|
||||
{
|
||||
text: 'Leave',
|
||||
style: 'destructive',
|
||||
onPress: async () => {
|
||||
const s = getSession();
|
||||
const endpoint = `${API_BASE_URL}/subgroup-memberships?Uid=${s.currentUid}&Gid=${s.currentGid}`;
|
||||
const res = await API.get(endpoint);
|
||||
if (res.isSuccess && res.result.length > 0) {
|
||||
await API.delete(`${API_BASE_URL}/subgroup-memberships/${res.result[0].id}`);
|
||||
}
|
||||
clearGameSession();
|
||||
navigation.reset({index: 0, routes: [{name: 'Game'}]});
|
||||
},
|
||||
},
|
||||
]);
|
||||
};
|
||||
|
||||
// View -----------------------
|
||||
|
||||
return (
|
||||
<View style={[styles.container, {paddingBottom: insets.bottom}]}>
|
||||
{tabs.map((tab) => {
|
||||
const isActive = routeName === tab.route;
|
||||
const isLeave = tab.route === '__leave__';
|
||||
return (
|
||||
<Pressable
|
||||
key={tab.route}
|
||||
key={tab.label}
|
||||
onPress={tab.onPress}
|
||||
style={[styles.tab, isActive && styles.tabActive]}
|
||||
style={[styles.tab, isActive && styles.tabActive, isLeave && styles.tabLeave]}
|
||||
>
|
||||
<Text style={[styles.tabText, isActive && styles.tabTextActive]}>{tab.label}</Text>
|
||||
<Text style={[styles.tabText, isActive && styles.tabTextActive, isLeave && styles.tabTextLeave]}>
|
||||
{tab.label}
|
||||
</Text>
|
||||
</Pressable>
|
||||
);
|
||||
})}
|
||||
@@ -95,6 +93,9 @@ const styles = StyleSheet.create({
|
||||
tabActive: {
|
||||
backgroundColor: '#5c5c5c',
|
||||
},
|
||||
tabLeave: {
|
||||
backgroundColor: 'rgba(220,38,38,0.15)',
|
||||
},
|
||||
tabText: {
|
||||
color: '#d1d5db',
|
||||
fontSize: 12,
|
||||
@@ -104,6 +105,9 @@ const styles = StyleSheet.create({
|
||||
tabTextActive: {
|
||||
color: '#ffffff',
|
||||
},
|
||||
tabTextLeave: {
|
||||
color: '#fca5a5',
|
||||
},
|
||||
});
|
||||
|
||||
export default BottomNavbar;
|
||||
@@ -13,19 +13,12 @@ const Screen = ({ children, style, showBack = false }) => {
|
||||
const insets = useSafeAreaInsets();
|
||||
|
||||
const titleMap = {
|
||||
GameTypeScreen: "Game Type",
|
||||
JoinPrivateGameScreen: "Join Private Game",
|
||||
ManagePrivateGameScreen: "Manage Private Game",
|
||||
CreateGameScreen: "Create Game",
|
||||
ManageGameScreen: "Manage Game",
|
||||
GameLobbyScreen: "Game Lobby",
|
||||
LeaderboardScreen: "Leaderboard",
|
||||
TeamScreen: "Current Team",
|
||||
MapScreen: "Map",
|
||||
AdminHubScreen: "Admin Hub",
|
||||
ManageSubgroupsScreen: "Manage Subgroups",
|
||||
GameSettingsScreen: "Game Settings",
|
||||
PlayersScreen: "Players",
|
||||
ExpandedMapScreen: "Map View",
|
||||
};
|
||||
|
||||
// State ----------------------
|
||||
|
||||
@@ -1,25 +0,0 @@
|
||||
import React from 'react';
|
||||
import {StyleSheet, Text} from 'react-native';
|
||||
import Screen from '../layout/Screen';
|
||||
|
||||
const AdminHubScreen = () => {
|
||||
// Initialisation -------------
|
||||
// State ----------------------
|
||||
// Handlers -------------------
|
||||
// View -----------------------
|
||||
|
||||
return (
|
||||
<Screen showBack={true} style={styles.container}>
|
||||
<Text style={styles.title}>Admin Hub</Text>
|
||||
<Text style={styles.body}>Admin hub setup goes here.</Text>
|
||||
</Screen>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {justifyContent: 'center', alignItems: 'center'},
|
||||
title: {fontSize: 24, fontWeight: 'bold'},
|
||||
body: {color: '#4b5563', fontSize: 15, marginTop: 10},
|
||||
});
|
||||
|
||||
export default AdminHubScreen;
|
||||
@@ -1,25 +0,0 @@
|
||||
import React from 'react';
|
||||
import {StyleSheet, Text} from 'react-native';
|
||||
import Screen from '../layout/Screen';
|
||||
|
||||
const CreateGameScreen = () => {
|
||||
// Initialisation -------------
|
||||
// State ----------------------
|
||||
// Handlers -------------------
|
||||
// View -----------------------
|
||||
|
||||
return (
|
||||
<Screen showBack={true} style={styles.container}>
|
||||
<Text style={styles.title}>Create Game</Text>
|
||||
<Text style={styles.body}>Create game setup goes here.</Text>
|
||||
</Screen>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {justifyContent: 'center', alignItems: 'center'},
|
||||
title: {fontSize: 24, fontWeight: 'bold'},
|
||||
body: {color: '#4b5563', fontSize: 15, marginTop: 10},
|
||||
});
|
||||
|
||||
export default CreateGameScreen;
|
||||
@@ -0,0 +1,117 @@
|
||||
import React, {useEffect, useState} from 'react';
|
||||
import {StyleSheet, View} from 'react-native';
|
||||
import MapView, {Circle, Marker, Polygon} from 'react-native-maps';
|
||||
import * as Location from 'expo-location';
|
||||
import Screen from '../layout/Screen';
|
||||
import {getFovCone} from '../../utils/geoMath';
|
||||
|
||||
const DEFAULT_REGION = {latitude: 51.5074, longitude: -0.1278, latitudeDelta: 0.01, longitudeDelta: 0.01};
|
||||
|
||||
const ExpandedMapScreen = ({route}) => {
|
||||
// Initialisation ------------
|
||||
|
||||
const {isAdmin, cacheRecords: cacheStr, claimDistance: routeClaimDistance, userLocation: routeLocation} = route.params || {};
|
||||
const caches = cacheStr ? JSON.parse(cacheStr) : [];
|
||||
const claimDistance = routeClaimDistance || 20;
|
||||
|
||||
// State ----------------------
|
||||
|
||||
// Seed with the location passed from MapScreen so the map opens centred on the user immediately
|
||||
const [userLocation, setUserLocation] = useState(routeLocation || null);
|
||||
const [heading, setHeading] = useState(null);
|
||||
|
||||
// Handlers -------------------
|
||||
|
||||
useEffect(() => {
|
||||
let locationSub;
|
||||
let headingSub;
|
||||
|
||||
const start = async () => {
|
||||
const {status} = await Location.requestForegroundPermissionsAsync();
|
||||
if (status !== 'granted') return;
|
||||
|
||||
// Only do a fresh one-shot fix if MapScreen didn't supply a location
|
||||
if (!routeLocation) {
|
||||
const last = await Location.getLastKnownPositionAsync();
|
||||
if (last) {
|
||||
setUserLocation({latitude: last.coords.latitude, longitude: last.coords.longitude});
|
||||
} else {
|
||||
const pos = await Location.getCurrentPositionAsync({accuracy: Location.Accuracy.Low});
|
||||
setUserLocation({latitude: pos.coords.latitude, longitude: pos.coords.longitude});
|
||||
}
|
||||
}
|
||||
|
||||
locationSub = await Location.watchPositionAsync(
|
||||
{accuracy: Location.Accuracy.Balanced, distanceInterval: 2, timeInterval: 1000},
|
||||
(next) => setUserLocation({latitude: next.coords.latitude, longitude: next.coords.longitude}),
|
||||
);
|
||||
|
||||
// Use OS-fused heading from expo-location
|
||||
headingSub = await Location.watchHeadingAsync((headingData) => {
|
||||
const raw = headingData.trueHeading >= 0 ? headingData.trueHeading : headingData.magHeading;
|
||||
setHeading(raw);
|
||||
});
|
||||
};
|
||||
|
||||
start();
|
||||
return () => {
|
||||
if (locationSub) locationSub.remove();
|
||||
if (headingSub) headingSub.remove();
|
||||
};
|
||||
}, []);
|
||||
|
||||
const region = userLocation
|
||||
? {...userLocation, latitudeDelta: 0.01, longitudeDelta: 0.01}
|
||||
: DEFAULT_REGION;
|
||||
|
||||
// View -----------------------
|
||||
|
||||
const coneCoords = (userLocation && heading !== null)
|
||||
? getFovCone(userLocation, heading)
|
||||
: null;
|
||||
|
||||
return (
|
||||
<Screen showBack={true} style={styles.container}>
|
||||
<View style={styles.mapWrap}>
|
||||
<MapView
|
||||
style={{flex: 1}}
|
||||
initialRegion={region}
|
||||
showsUserLocation
|
||||
>
|
||||
{/* Only admins see cache pin locations */}
|
||||
{isAdmin && caches.map((cache) => (
|
||||
<React.Fragment key={cache.id}>
|
||||
<Marker
|
||||
coordinate={cache.coordinates}
|
||||
title={cache.name || cache.clue}
|
||||
pinColor="#2563eb"
|
||||
/>
|
||||
<Circle
|
||||
center={cache.coordinates}
|
||||
radius={claimDistance}
|
||||
fillColor="rgba(59,130,246,0.15)"
|
||||
strokeColor="rgba(59,130,246,0.85)"
|
||||
/>
|
||||
</React.Fragment>
|
||||
))}
|
||||
{/* Heading FOV cone */}
|
||||
{coneCoords && (
|
||||
<Polygon
|
||||
coordinates={coneCoords}
|
||||
fillColor="rgba(66,133,244,0.28)"
|
||||
strokeColor="rgba(66,133,244,0.50)"
|
||||
strokeWidth={1}
|
||||
/>
|
||||
)}
|
||||
</MapView>
|
||||
</View>
|
||||
</Screen>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {padding: 0},
|
||||
mapWrap: {flex: 1},
|
||||
});
|
||||
|
||||
export default ExpandedMapScreen;
|
||||
@@ -1,25 +0,0 @@
|
||||
import React from 'react';
|
||||
import {StyleSheet, Text} from 'react-native';
|
||||
import Screen from '../layout/Screen';
|
||||
|
||||
const GameLobbyScreen = () => {
|
||||
// Initialisation -------------
|
||||
// State ----------------------
|
||||
// Handlers -------------------
|
||||
// View -----------------------
|
||||
|
||||
return (
|
||||
<Screen showBack={true} style={styles.container}>
|
||||
<Text style={styles.title}>Game Lobby</Text>
|
||||
<Text style={styles.body}>Game lobby setup goes here.</Text>
|
||||
</Screen>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {justifyContent: 'center', alignItems: 'center'},
|
||||
title: {fontSize: 24, fontWeight: 'bold'},
|
||||
body: {color: '#4b5563', fontSize: 15, marginTop: 10},
|
||||
});
|
||||
|
||||
export default GameLobbyScreen;
|
||||
@@ -1,9 +1,9 @@
|
||||
import React, {useEffect, useState} from 'react';
|
||||
import {ActivityIndicator, StyleSheet, Switch, Text, TextInput, View} from 'react-native';
|
||||
import {ActivityIndicator, ScrollView, StyleSheet, Switch, Text, TextInput, View} from 'react-native';
|
||||
import Screen from '../layout/Screen';
|
||||
import {Button, ButtonTray} from '../UI/Button';
|
||||
import useGameHook from '../../hooks/useGameHook';
|
||||
import {getSession} from '../../hooks/SessionStore';
|
||||
import {getSession, setSessionTeamsEnabled} from '../../hooks/SessionStore';
|
||||
|
||||
const GameSettingsScreen = () => {
|
||||
// Initialisation ------------
|
||||
@@ -17,8 +17,9 @@ const GameSettingsScreen = () => {
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [groupName, setGroupName] = useState('');
|
||||
const [teamsEnabled, setTeamsEnabled] = useState(false);
|
||||
const [teamsEnabled, setTeamsEnabled] = useState(session.teamsEnabled);
|
||||
const [maxSubgroups, setMaxSubgroups] = useState('1');
|
||||
const [cacheTriggerMeters, setCacheTriggerMeters] = useState('20');
|
||||
const [adminJoinCode, setAdminJoinCode] = useState('');
|
||||
const [memberJoinCode, setMemberJoinCode] = useState('');
|
||||
|
||||
@@ -33,8 +34,12 @@ const GameSettingsScreen = () => {
|
||||
const group = await getLobby(session.currentGid);
|
||||
if (group) {
|
||||
setGroupName(group.GroupName || '');
|
||||
setTeamsEnabled(Boolean(group.TeamsEnabled));
|
||||
const serverTeams = Boolean(group.TeamsEnabled);
|
||||
setTeamsEnabled(serverTeams);
|
||||
// Keep session in sync so the toggle survives app reloads
|
||||
setSessionTeamsEnabled(serverTeams);
|
||||
setMaxSubgroups(String(group.MaxMemberSubgroups || 1));
|
||||
setCacheTriggerMeters(String(group.CacheTriggerMeters || 20));
|
||||
setAdminJoinCode(group.AdminJoinCode || '');
|
||||
}
|
||||
const sgs = await getSubgroups(session.currentGid);
|
||||
@@ -48,11 +53,14 @@ const GameSettingsScreen = () => {
|
||||
const handleSave = async () => {
|
||||
if (!session.currentGid) return;
|
||||
setSaving(true);
|
||||
await updateGroup(session.currentGid, {
|
||||
const result = await updateGroup(session.currentGid, {
|
||||
GroupName: groupName.trim(),
|
||||
TeamsEnabled: teamsEnabled,
|
||||
MaxMemberSubgroups: parseInt(maxSubgroups) || 1,
|
||||
CacheTriggerMeters: parseInt(cacheTriggerMeters) || 20,
|
||||
});
|
||||
// Persist the new toggle value so the session reflects it after a reload
|
||||
if (result) setSessionTeamsEnabled(teamsEnabled);
|
||||
setSaving(false);
|
||||
};
|
||||
|
||||
@@ -76,65 +84,82 @@ const GameSettingsScreen = () => {
|
||||
|
||||
return (
|
||||
<Screen>
|
||||
<Text style={styles.sectionTitle}>Game Configuration</Text>
|
||||
<ScrollView contentContainerStyle={styles.formContainer} showsVerticalScrollIndicator={false}>
|
||||
<Text style={styles.sectionTitle}>Game Configuration</Text>
|
||||
|
||||
<Text style={styles.label}>Game Name</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
value={groupName}
|
||||
onChangeText={setGroupName}
|
||||
placeholder="Enter game name"
|
||||
/>
|
||||
|
||||
<View style={styles.toggleRow}>
|
||||
<Text style={styles.label}>Teams Enabled</Text>
|
||||
<Switch
|
||||
value={teamsEnabled}
|
||||
onValueChange={setTeamsEnabled}
|
||||
trackColor={{false: '#d1d5db', true: '#93c5fd'}}
|
||||
thumbColor={teamsEnabled ? '#2563eb' : '#9ca3af'}
|
||||
<Text style={styles.label}>Game Name</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
value={groupName}
|
||||
onChangeText={setGroupName}
|
||||
placeholder="Enter game name"
|
||||
placeholderTextColor="#9ca3af"
|
||||
/>
|
||||
</View>
|
||||
|
||||
{isBusiness && (
|
||||
<>
|
||||
<Text style={styles.label}>Max Member Subgroups</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
value={maxSubgroups}
|
||||
onChangeText={setMaxSubgroups}
|
||||
keyboardType="numeric"
|
||||
placeholder="1"
|
||||
<View style={styles.toggleRow}>
|
||||
<Text style={styles.toggleLabel}>Teams Enabled</Text>
|
||||
<Switch
|
||||
value={teamsEnabled}
|
||||
onValueChange={setTeamsEnabled}
|
||||
trackColor={{false: '#d1d5db', true: '#93c5fd'}}
|
||||
thumbColor={teamsEnabled ? '#2563eb' : '#9ca3af'}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</View>
|
||||
|
||||
<View style={styles.codeSection}>
|
||||
<Text style={styles.codeLabel}>Admin Join Code</Text>
|
||||
<Text style={styles.codeValue}>{adminJoinCode || '—'}</Text>
|
||||
</View>
|
||||
{isBusiness && (
|
||||
<>
|
||||
<Text style={styles.label}>Max Member Subgroups</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
value={maxSubgroups}
|
||||
onChangeText={setMaxSubgroups}
|
||||
keyboardType="numeric"
|
||||
placeholder="1"
|
||||
placeholderTextColor="#9ca3af"
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
<View style={styles.codeSection}>
|
||||
<Text style={styles.codeLabel}>Player Join Code</Text>
|
||||
<Text style={styles.codeValue}>{memberJoinCode || '—'}</Text>
|
||||
</View>
|
||||
|
||||
<ButtonTray>
|
||||
<Button
|
||||
label={saving ? 'Saving...' : 'Save Settings'}
|
||||
onClick={handleSave}
|
||||
styleButton={styles.saveButton}
|
||||
styleLabel={styles.saveLabel}
|
||||
<Text style={styles.label}>Cache Claim Distance (metres)</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
value={cacheTriggerMeters}
|
||||
onChangeText={setCacheTriggerMeters}
|
||||
keyboardType="numeric"
|
||||
placeholder="20"
|
||||
placeholderTextColor="#9ca3af"
|
||||
/>
|
||||
</ButtonTray>
|
||||
|
||||
<View style={styles.codeSection}>
|
||||
<Text style={styles.codeLabel}>Admin Join Code</Text>
|
||||
<Text style={styles.codeValue}>{adminJoinCode || '—'}</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.codeSection}>
|
||||
<Text style={styles.codeLabel}>Player Join Code</Text>
|
||||
<Text style={styles.codeValue}>{memberJoinCode || '—'}</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.saveWrap}>
|
||||
<ButtonTray>
|
||||
<Button
|
||||
label={saving ? 'Saving...' : 'Save Settings'}
|
||||
onClick={handleSave}
|
||||
styleButton={styles.saveButton}
|
||||
styleLabel={styles.saveLabel}
|
||||
/>
|
||||
</ButtonTray>
|
||||
</View>
|
||||
</ScrollView>
|
||||
</Screen>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
center: {justifyContent: 'center', alignItems: 'center'},
|
||||
sectionTitle: {fontSize: 20, fontWeight: '700', color: '#1f2937', marginBottom: 15},
|
||||
label: {fontSize: 14, fontWeight: '600', color: '#374151', marginBottom: 4, marginTop: 10},
|
||||
formContainer: {paddingBottom: 20},
|
||||
sectionTitle: {fontSize: 20, fontWeight: '700', color: '#1f2937', marginBottom: 16},
|
||||
label: {fontSize: 14, fontWeight: '600', color: '#374151', marginBottom: 6, marginTop: 14},
|
||||
body: {color: '#4b5563', fontSize: 15},
|
||||
input: {
|
||||
borderWidth: 1,
|
||||
@@ -143,29 +168,32 @@ const styles = StyleSheet.create({
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 10,
|
||||
fontSize: 16,
|
||||
color: '#1f2937',
|
||||
backgroundColor: '#ffffff',
|
||||
},
|
||||
toggleRow: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginTop: 10,
|
||||
paddingVertical: 8,
|
||||
marginTop: 16,
|
||||
paddingVertical: 10,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#e5e7eb',
|
||||
},
|
||||
toggleLabel: {fontSize: 14, fontWeight: '600', color: '#374151'},
|
||||
codeSection: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginTop: 14,
|
||||
paddingVertical: 10,
|
||||
marginTop: 16,
|
||||
paddingVertical: 12,
|
||||
paddingHorizontal: 12,
|
||||
backgroundColor: '#f3f4f6',
|
||||
borderRadius: 8,
|
||||
},
|
||||
codeLabel: {fontSize: 14, fontWeight: '600', color: '#374151'},
|
||||
codeValue: {fontSize: 16, fontWeight: '700', color: '#2563eb', letterSpacing: 2},
|
||||
saveWrap: {marginTop: 24},
|
||||
saveButton: {backgroundColor: '#16a34a', borderColor: '#16a34a'},
|
||||
saveLabel: {color: '#ffffff', fontWeight: '600'},
|
||||
});
|
||||
|
||||
@@ -1,73 +0,0 @@
|
||||
import React, {useEffect, useState} from 'react';
|
||||
import {Pressable, StyleSheet, Text, View} from 'react-native';
|
||||
import useGameHook from '../../hooks/useGameHook';
|
||||
import Screen from '../layout/Screen';
|
||||
|
||||
const GameTypeScreen = ({navigation}) => {
|
||||
// Initialisation ------------
|
||||
|
||||
const {getGameTypes} = useGameHook();
|
||||
|
||||
// State ----------------------
|
||||
|
||||
const [gameTypes, setGameTypes] = useState([]);
|
||||
|
||||
// Handlers -------------------
|
||||
|
||||
useEffect(() => {
|
||||
let isMounted = true;
|
||||
const load = async () => {
|
||||
const types = await getGameTypes();
|
||||
if (isMounted) setGameTypes(types || []);
|
||||
};
|
||||
load();
|
||||
return () => { isMounted = false; };
|
||||
}, []);
|
||||
|
||||
// View -----------------------
|
||||
|
||||
return (
|
||||
<Screen showBack={true} style={styles.container}>
|
||||
<Text style={styles.title}>Select Game Type</Text>
|
||||
<View style={styles.content}>
|
||||
{gameTypes && gameTypes.map((type) => (
|
||||
<Pressable
|
||||
key={type}
|
||||
style={styles.button}
|
||||
onPress={() => navigation.navigate('GameLobbyScreen')}
|
||||
>
|
||||
<Text style={styles.buttonText}>{type}</Text>
|
||||
</Pressable>
|
||||
))}
|
||||
</View>
|
||||
</Screen>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
justifyContent: 'center',
|
||||
},
|
||||
content: {
|
||||
gap: 12,
|
||||
flex: 1,
|
||||
},
|
||||
title: {
|
||||
fontSize: 24,
|
||||
fontWeight: 'bold',
|
||||
textAlign: 'center',
|
||||
marginBottom: 20,
|
||||
},
|
||||
button: {
|
||||
backgroundColor: '#2563eb',
|
||||
borderRadius: 8,
|
||||
paddingVertical: 12,
|
||||
alignItems: 'center',
|
||||
},
|
||||
buttonText: {
|
||||
color: '#ffffff',
|
||||
fontWeight: '600',
|
||||
},
|
||||
});
|
||||
|
||||
export default GameTypeScreen;
|
||||
@@ -1,35 +0,0 @@
|
||||
import React from 'react';
|
||||
import {StyleSheet, Text} from 'react-native';
|
||||
import Screen from '../layout/Screen';
|
||||
|
||||
const JoinPrivateGameScreen = () => {
|
||||
// Initialisation -------------
|
||||
// State ----------------------
|
||||
// Handlers -------------------
|
||||
// View -----------------------
|
||||
|
||||
return (
|
||||
<Screen showBack={true} style={styles.container}>
|
||||
<Text style={styles.title}>Join Private Game</Text>
|
||||
<Text style={styles.body}>Join private game setup goes here.</Text>
|
||||
</Screen>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
title: {
|
||||
fontSize: 24,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
body: {
|
||||
color: '#4b5563',
|
||||
fontSize: 15,
|
||||
marginTop: 10,
|
||||
},
|
||||
});
|
||||
|
||||
export default JoinPrivateGameScreen;
|
||||
@@ -1,25 +1,241 @@
|
||||
import React from 'react';
|
||||
import {StyleSheet, Text} from 'react-native';
|
||||
import React, {useCallback, useEffect, useState} from 'react';
|
||||
import {ActivityIndicator, Pressable, ScrollView, StyleSheet, Text, View} from 'react-native';
|
||||
import Screen from '../layout/Screen';
|
||||
import Card from '../UI/Card';
|
||||
import useGameHook from '../../hooks/useGameHook';
|
||||
import {getSession} from '../../hooks/SessionStore';
|
||||
|
||||
const LeaderboardScreen = () => {
|
||||
// Initialisation -------------
|
||||
// Initialisation ------------
|
||||
|
||||
const session = getSession();
|
||||
const {getLobby, getTeams, getTeamMembers, getGroupMembers, getCaches, getUser} = useGameHook();
|
||||
|
||||
// State ----------------------
|
||||
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [teamsEnabled, setTeamsEnabled] = useState(false);
|
||||
const [activeTab, setActiveTab] = useState('global');
|
||||
const [globalRanking, setGlobalRanking] = useState([]);
|
||||
const [teamRanking, setTeamRanking] = useState([]);
|
||||
const [expandedTeam, setExpandedTeam] = useState(null);
|
||||
|
||||
// Handlers -------------------
|
||||
|
||||
const loadData = useCallback(async () => {
|
||||
if (!session.currentGid) { setLoading(false); return; }
|
||||
|
||||
const group = await getLobby(session.currentGid);
|
||||
const isTeams = Boolean(group?.TeamsEnabled);
|
||||
setTeamsEnabled(isTeams);
|
||||
|
||||
const caches = await getCaches(session.currentGid, null);
|
||||
const claimedCaches = (caches || []).filter((c) => c.ClaimedByUid);
|
||||
|
||||
if (isTeams) {
|
||||
// Build team rankings
|
||||
const teams = await getTeams(session.currentGid);
|
||||
const teamData = [];
|
||||
|
||||
for (const team of (teams || [])) {
|
||||
const members = await getTeamMembers(team.Tid);
|
||||
const memberData = [];
|
||||
for (const m of (members || [])) {
|
||||
const user = await getUser(m.Uid);
|
||||
const count = claimedCaches.filter((c) => c.ClaimedByUid === m.Uid).length;
|
||||
memberData.push({
|
||||
uid: m.Uid,
|
||||
name: user?.username || `Player ${m.Uid}`,
|
||||
caches: count,
|
||||
isLeader: Boolean(m.IsLeader),
|
||||
});
|
||||
}
|
||||
memberData.sort((a, b) => b.caches - a.caches);
|
||||
const totalCaches = memberData.reduce((sum, m) => sum + m.caches, 0);
|
||||
teamData.push({
|
||||
tid: team.Tid,
|
||||
name: team.TeamName || 'Unnamed Team',
|
||||
code: team.JoinCode,
|
||||
totalCaches,
|
||||
members: memberData,
|
||||
});
|
||||
}
|
||||
|
||||
teamData.sort((a, b) => b.totalCaches - a.totalCaches);
|
||||
setGlobalRanking(teamData);
|
||||
|
||||
// Build current team ranking
|
||||
if (session.currentTid) {
|
||||
const myTeam = teamData.find((t) => t.tid === session.currentTid);
|
||||
setTeamRanking(myTeam ? myTeam.members : []);
|
||||
}
|
||||
} else {
|
||||
// Build player rankings (no teams)
|
||||
const allMembers = await getGroupMembers(session.currentGid);
|
||||
const playerData = [];
|
||||
for (const m of (allMembers || []).filter((m) => !m.IsAcceptedAdmin)) {
|
||||
const user = await getUser(m.Uid);
|
||||
const count = claimedCaches.filter((c) => c.ClaimedByUid === m.Uid).length;
|
||||
playerData.push({
|
||||
uid: m.Uid,
|
||||
name: user?.username || `Player ${m.Uid}`,
|
||||
caches: count,
|
||||
});
|
||||
}
|
||||
playerData.sort((a, b) => b.caches - a.caches);
|
||||
setGlobalRanking(playerData);
|
||||
}
|
||||
|
||||
setLoading(false);
|
||||
}, [session.currentGid, session.currentTid]);
|
||||
|
||||
useEffect(() => { loadData(); }, [loadData]);
|
||||
|
||||
// View -----------------------
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<Screen style={styles.center}>
|
||||
<ActivityIndicator size="large"/>
|
||||
</Screen>
|
||||
);
|
||||
}
|
||||
|
||||
if (!session.currentGid) {
|
||||
return (
|
||||
<Screen style={styles.center}>
|
||||
<Text style={styles.body}>Join a game to view the leaderboard.</Text>
|
||||
</Screen>
|
||||
);
|
||||
}
|
||||
|
||||
// Teams enabled — tabbed view
|
||||
if (teamsEnabled) {
|
||||
return (
|
||||
<Screen style={styles.container}>
|
||||
<View style={styles.tabRow}>
|
||||
<Pressable
|
||||
style={[styles.tabButton, activeTab === 'global' && styles.tabButtonActive]}
|
||||
onPress={() => setActiveTab('global')}
|
||||
>
|
||||
<Text style={[styles.tabLabel, activeTab === 'global' && styles.tabLabelActive]}>Global</Text>
|
||||
</Pressable>
|
||||
<Pressable
|
||||
style={[styles.tabButton, activeTab === 'team' && styles.tabButtonActive]}
|
||||
onPress={() => setActiveTab('team')}
|
||||
>
|
||||
<Text style={[styles.tabLabel, activeTab === 'team' && styles.tabLabelActive]}>Team</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
|
||||
{activeTab === 'global' ? (
|
||||
<ScrollView style={styles.listSection}>
|
||||
{globalRanking.map((team, index) => (
|
||||
<Pressable key={team.tid} onPress={() => setExpandedTeam(expandedTeam === team.tid ? null : team.tid)}>
|
||||
<Card>
|
||||
<View style={styles.rankRow}>
|
||||
<Text style={styles.rank}>#{index + 1}</Text>
|
||||
<Text style={styles.rankName}>{team.name}</Text>
|
||||
<Text style={styles.score}>{team.totalCaches} cache(s)</Text>
|
||||
</View>
|
||||
{expandedTeam === team.tid && team.members.map((m) => (
|
||||
<View key={m.uid} style={styles.subRow}>
|
||||
<Text style={styles.subName}>
|
||||
{m.name}{m.isLeader ? ' (Leader)' : ''}
|
||||
</Text>
|
||||
<Text style={styles.subScore}>{m.caches}</Text>
|
||||
</View>
|
||||
))}
|
||||
</Card>
|
||||
</Pressable>
|
||||
))}
|
||||
{globalRanking.length === 0 && (
|
||||
<Text style={styles.emptyText}>No teams yet.</Text>
|
||||
)}
|
||||
</ScrollView>
|
||||
) : (
|
||||
<ScrollView style={styles.listSection}>
|
||||
{teamRanking.map((m, index) => (
|
||||
<Card key={m.uid}>
|
||||
<View style={styles.rankRow}>
|
||||
<Text style={styles.rank}>#{index + 1}</Text>
|
||||
<Text style={styles.rankName}>
|
||||
{m.name}{m.isLeader ? ' (Leader)' : ''}
|
||||
</Text>
|
||||
<Text style={styles.score}>{m.caches} cache(s)</Text>
|
||||
</View>
|
||||
</Card>
|
||||
))}
|
||||
{teamRanking.length === 0 && (
|
||||
<Text style={styles.emptyText}>Join a team to see your team leaderboard.</Text>
|
||||
)}
|
||||
</ScrollView>
|
||||
)}
|
||||
</Screen>
|
||||
);
|
||||
}
|
||||
|
||||
// No teams — simple player ranking
|
||||
return (
|
||||
<Screen style={styles.container}>
|
||||
<Text style={styles.title}>Leaderboard</Text>
|
||||
<Text style={styles.body}>Leaderboard view goes here.</Text>
|
||||
<ScrollView style={styles.listSection}>
|
||||
{globalRanking.map((player, index) => (
|
||||
<Card key={player.uid}>
|
||||
<View style={styles.rankRow}>
|
||||
<Text style={styles.rank}>#{index + 1}</Text>
|
||||
<Text style={styles.rankName}>{player.name}</Text>
|
||||
<Text style={styles.score}>{player.caches} cache(s)</Text>
|
||||
</View>
|
||||
</Card>
|
||||
))}
|
||||
{globalRanking.length === 0 && (
|
||||
<Text style={styles.emptyText}>No players yet.</Text>
|
||||
)}
|
||||
</ScrollView>
|
||||
</Screen>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {justifyContent: 'center', alignItems: 'center'},
|
||||
title: {fontSize: 24, fontWeight: 'bold'},
|
||||
body: {color: '#4b5563', fontSize: 15, marginTop: 10},
|
||||
center: {justifyContent: 'center', alignItems: 'center'},
|
||||
container: {padding: 0},
|
||||
body: {color: '#4b5563', fontSize: 15},
|
||||
tabRow: {
|
||||
flexDirection: 'row',
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#e5e7eb',
|
||||
},
|
||||
tabButton: {
|
||||
flex: 1,
|
||||
paddingVertical: 12,
|
||||
alignItems: 'center',
|
||||
},
|
||||
tabButtonActive: {
|
||||
borderBottomWidth: 2,
|
||||
borderBottomColor: '#2563eb',
|
||||
},
|
||||
tabLabel: {fontSize: 15, fontWeight: '600', color: '#6b7280'},
|
||||
tabLabelActive: {color: '#2563eb'},
|
||||
listSection: {flex: 1, paddingHorizontal: 15, paddingTop: 10},
|
||||
rankRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 10,
|
||||
},
|
||||
rank: {fontSize: 16, fontWeight: '700', color: '#374151', width: 32},
|
||||
rankName: {flex: 1, fontSize: 15, fontWeight: '600', color: '#1f2937'},
|
||||
score: {fontSize: 14, fontWeight: '600', color: '#16a34a'},
|
||||
subRow: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
paddingLeft: 42,
|
||||
paddingVertical: 6,
|
||||
borderTopWidth: 1,
|
||||
borderTopColor: '#f3f4f6',
|
||||
},
|
||||
subName: {fontSize: 13, color: '#4b5563'},
|
||||
subScore: {fontSize: 13, fontWeight: '600', color: '#16a34a'},
|
||||
emptyText: {color: '#9ca3af', textAlign: 'center', marginTop: 30, fontSize: 14},
|
||||
});
|
||||
|
||||
export default LeaderboardScreen;
|
||||
@@ -39,6 +39,7 @@ const LoginScreen = ({ navigation }) => {
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholder="Email"
|
||||
placeholderTextColor="#9ca3af"
|
||||
autoCapitalize="none"
|
||||
keyboardType="email-address"
|
||||
value={email}
|
||||
@@ -48,6 +49,7 @@ const LoginScreen = ({ navigation }) => {
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholder="Password"
|
||||
placeholderTextColor="#9ca3af"
|
||||
secureTextEntry
|
||||
value={password}
|
||||
onChangeText={setPassword}
|
||||
@@ -93,6 +95,8 @@ const styles = StyleSheet.create({
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 10,
|
||||
fontSize: 16,
|
||||
color: '#1f2937',
|
||||
backgroundColor: '#ffffff',
|
||||
},
|
||||
errorText: {
|
||||
color: '#dc2626',
|
||||
|
||||
@@ -1,144 +0,0 @@
|
||||
import React, {useCallback, useEffect, useState} from 'react';
|
||||
import {ActivityIndicator, StyleSheet, Text, View} from 'react-native';
|
||||
import * as Location from 'expo-location';
|
||||
import Screen from '../layout/Screen';
|
||||
import AdminCacheEditorView from '../gameplay/AdminCacheEditorView';
|
||||
import useGameHook from '../../hooks/useGameHook';
|
||||
import {getSession} from '../../hooks/SessionStore';
|
||||
|
||||
const ManageGameScreen = () => {
|
||||
// Initialisation ------------
|
||||
|
||||
const session = getSession();
|
||||
const {getCaches, upsertCache} = useGameHook();
|
||||
|
||||
// State ----------------------
|
||||
|
||||
const [userLocation, setUserLocation] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState('');
|
||||
const [cacheRecords, setCacheRecords] = useState([]);
|
||||
|
||||
// Handlers -------------------
|
||||
|
||||
const loadCaches = useCallback(async () => {
|
||||
if (!session.currentGid) {
|
||||
setCacheRecords([]);
|
||||
return;
|
||||
}
|
||||
const rows = await getCaches(session.currentGid, null);
|
||||
setCacheRecords(rows || []);
|
||||
}, [session.currentGid]);
|
||||
|
||||
useEffect(() => { loadCaches(); }, [loadCaches]);
|
||||
|
||||
useEffect(() => {
|
||||
let locationSub;
|
||||
const start = async () => {
|
||||
const {status} = await Location.requestForegroundPermissionsAsync();
|
||||
if (status !== 'granted') {
|
||||
setError('Location permission denied');
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
const current = await Location.getCurrentPositionAsync({accuracy: Location.Accuracy.Balanced});
|
||||
setUserLocation({latitude: current.coords.latitude, longitude: current.coords.longitude});
|
||||
|
||||
locationSub = await Location.watchPositionAsync(
|
||||
{accuracy: Location.Accuracy.Balanced, distanceInterval: 1, timeInterval: 1000},
|
||||
(next) => {
|
||||
setUserLocation({latitude: next.coords.latitude, longitude: next.coords.longitude});
|
||||
},
|
||||
);
|
||||
setLoading(false);
|
||||
};
|
||||
start();
|
||||
return () => { if (locationSub) locationSub.remove(); };
|
||||
}, []);
|
||||
|
||||
const handleAddCache = async (coordinate) => {
|
||||
if (!session.currentGid) return;
|
||||
await upsertCache({
|
||||
gid: session.currentGid,
|
||||
latitude: coordinate.latitude,
|
||||
longitude: coordinate.longitude,
|
||||
radius: 20,
|
||||
clue: `Cache ${cacheRecords.length + 1}`,
|
||||
subgroupId: 1,
|
||||
});
|
||||
await loadCaches();
|
||||
};
|
||||
|
||||
const handleMoveCache = async (cacheId, coordinate) => {
|
||||
if (!session.currentGid) return;
|
||||
const current = cacheRecords.find((cache) => cache.id === cacheId);
|
||||
if (!current) return;
|
||||
await upsertCache({
|
||||
gid: session.currentGid,
|
||||
cacheId,
|
||||
latitude: coordinate.latitude,
|
||||
longitude: coordinate.longitude,
|
||||
radius: current.radius,
|
||||
clue: current.clue,
|
||||
subgroupId: current.subgroupId,
|
||||
});
|
||||
await loadCaches();
|
||||
};
|
||||
|
||||
// View -----------------------
|
||||
|
||||
if (!session.currentGid) {
|
||||
return (
|
||||
<Screen showBack={true} style={styles.center}>
|
||||
<Text style={styles.body}>Create or join a game first.</Text>
|
||||
</Screen>
|
||||
);
|
||||
}
|
||||
|
||||
if (!session.isAcceptedAdmin) {
|
||||
return (
|
||||
<Screen showBack={true} style={styles.center}>
|
||||
<Text style={styles.body}>Only admins can edit cache locations.</Text>
|
||||
</Screen>
|
||||
);
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<Screen showBack={true} style={styles.center}>
|
||||
<ActivityIndicator size="large"/>
|
||||
</Screen>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<Screen showBack={true} style={styles.center}>
|
||||
<Text style={styles.error}>{error}</Text>
|
||||
</Screen>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Screen showBack={true} style={styles.container}>
|
||||
<View style={styles.mapWrap}>
|
||||
<AdminCacheEditorView
|
||||
userLocation={userLocation}
|
||||
caches={cacheRecords}
|
||||
onAddCache={handleAddCache}
|
||||
onMoveCache={handleMoveCache}
|
||||
/>
|
||||
</View>
|
||||
</Screen>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {padding: 0},
|
||||
mapWrap: {flex: 1},
|
||||
center: {justifyContent: 'center', alignItems: 'center'},
|
||||
body: {color: '#4b5563', fontSize: 15},
|
||||
error: {color: '#dc2626', fontSize: 15},
|
||||
});
|
||||
|
||||
export default ManageGameScreen;
|
||||
@@ -1,25 +0,0 @@
|
||||
import React from 'react';
|
||||
import {StyleSheet, Text} from 'react-native';
|
||||
import Screen from '../layout/Screen';
|
||||
|
||||
const ManagePrivateGameScreen = () => {
|
||||
// Initialisation -------------
|
||||
// State ----------------------
|
||||
// Handlers -------------------
|
||||
// View -----------------------
|
||||
|
||||
return (
|
||||
<Screen showBack={true} style={styles.container}>
|
||||
<Text style={styles.title}>Manage Private Game</Text>
|
||||
<Text style={styles.body}>Manage private game setup goes here.</Text>
|
||||
</Screen>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {justifyContent: 'center', alignItems: 'center'},
|
||||
title: {fontSize: 24, fontWeight: 'bold'},
|
||||
body: {color: '#4b5563', fontSize: 15, marginTop: 10},
|
||||
});
|
||||
|
||||
export default ManagePrivateGameScreen;
|
||||
@@ -1,25 +0,0 @@
|
||||
import React from 'react';
|
||||
import {StyleSheet, Text} from 'react-native';
|
||||
import Screen from '../layout/Screen';
|
||||
|
||||
const ManageSubgroupsScreen = () => {
|
||||
// Initialisation -------------
|
||||
// State ----------------------
|
||||
// Handlers -------------------
|
||||
// View -----------------------
|
||||
|
||||
return (
|
||||
<Screen showBack={true} style={styles.container}>
|
||||
<Text style={styles.title}>Manage Subgroups</Text>
|
||||
<Text style={styles.body}>Manage subgroups setup goes here.</Text>
|
||||
</Screen>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {justifyContent: 'center', alignItems: 'center'},
|
||||
title: {fontSize: 24, fontWeight: 'bold'},
|
||||
body: {color: '#4b5563', fontSize: 15, marginTop: 10},
|
||||
});
|
||||
|
||||
export default ManageSubgroupsScreen;
|
||||
@@ -1,22 +1,19 @@
|
||||
import React, {useCallback, useEffect, useState} from 'react';
|
||||
import {ActivityIndicator, ScrollView, StyleSheet, Text, TextInput, View} from 'react-native';
|
||||
import MapView, {Circle, Marker} from 'react-native-maps';
|
||||
import {ActivityIndicator, Pressable, ScrollView, StyleSheet, Text, TextInput, View} from 'react-native';
|
||||
import MapView, {Circle, Marker, Polygon} from 'react-native-maps';
|
||||
import * as Location from 'expo-location';
|
||||
import {Magnetometer} from 'expo-sensors';
|
||||
import Screen from '../layout/Screen';
|
||||
import {Button, ButtonTray} from '../UI/Button';
|
||||
import CacheCardItem from '../gameplay/CacheCardItem';
|
||||
import ClaimTimerView from '../gameplay/ClaimTimerView';
|
||||
import PlayerMapView from '../gameplay/PlayerMapView';
|
||||
import useGameHook from '../../hooks/useGameHook';
|
||||
import usePlayerGame from '../../hooks/usePlayerGame';
|
||||
import {getSession, setSessionGroup, setSessionUser} from '../../hooks/SessionStore';
|
||||
import {getFovCone} from '../../utils/geoMath';
|
||||
|
||||
const DEFAULT_REGION = {latitude: 51.5074, longitude: -0.1278, latitudeDelta: 0.05, longitudeDelta: 0.05};
|
||||
|
||||
const toHeading = ({x, y}) => {
|
||||
const angle = Math.atan2(y, x) * (180 / Math.PI);
|
||||
return angle < 0 ? angle + 360 : angle;
|
||||
};
|
||||
|
||||
const MapScreen = ({navigation}) => {
|
||||
// Initialisation ------------
|
||||
@@ -40,14 +37,18 @@ const MapScreen = ({navigation}) => {
|
||||
const [isCreating, setIsCreating] = useState(false);
|
||||
const [editingCacheId, setEditingCacheId] = useState(null);
|
||||
const [newCoord, setNewCoord] = useState(null);
|
||||
const [newName, setNewName] = useState('');
|
||||
const [newClue, setNewClue] = useState('');
|
||||
const [newRadius, setNewRadius] = useState('20');
|
||||
|
||||
// Global claim distance comes from the group's CacheTriggerMeters setting
|
||||
const claimDistance = groupInfo?.CacheTriggerMeters || 20;
|
||||
|
||||
const isPlayer = inGame && !isAdmin;
|
||||
const {visibleCache, isClaiming, setIsClaiming} = usePlayerGame(
|
||||
isPlayer ? userLocation : null,
|
||||
isPlayer ? heading : null,
|
||||
isPlayer ? cacheRecords : [],
|
||||
claimDistance,
|
||||
);
|
||||
|
||||
const mapRegion = userLocation
|
||||
@@ -66,8 +67,7 @@ const MapScreen = ({navigation}) => {
|
||||
setCacheRecords([]);
|
||||
return;
|
||||
}
|
||||
const sgFilter = isAdmin ? null : session.currentSGid;
|
||||
const rows = await getCaches(session.currentGid, sgFilter);
|
||||
const rows = await getCaches(session.currentGid, null);
|
||||
setCacheRecords(rows || []);
|
||||
}, [inGame, isAdmin]);
|
||||
|
||||
@@ -86,19 +86,27 @@ const MapScreen = ({navigation}) => {
|
||||
setPlayerLoading(false);
|
||||
return;
|
||||
}
|
||||
const current = await Location.getCurrentPositionAsync({accuracy: Location.Accuracy.Balanced});
|
||||
setUserLocation({latitude: current.coords.latitude, longitude: current.coords.longitude});
|
||||
|
||||
// Try cached position first for instant load, fall back to fresh fix
|
||||
const last = await Location.getLastKnownPositionAsync();
|
||||
if (last) {
|
||||
setUserLocation({latitude: last.coords.latitude, longitude: last.coords.longitude});
|
||||
} else {
|
||||
const current = await Location.getCurrentPositionAsync({accuracy: Location.Accuracy.Low});
|
||||
setUserLocation({latitude: current.coords.latitude, longitude: current.coords.longitude});
|
||||
}
|
||||
setPlayerLoading(false);
|
||||
|
||||
locationSub = await Location.watchPositionAsync(
|
||||
{accuracy: Location.Accuracy.Balanced, distanceInterval: 1, timeInterval: 1000},
|
||||
(next) => setUserLocation({latitude: next.coords.latitude, longitude: next.coords.longitude}),
|
||||
);
|
||||
|
||||
if (isPlayer) {
|
||||
Magnetometer.setUpdateInterval(500);
|
||||
headingSub = Magnetometer.addListener((data) => setHeading(toHeading(data)));
|
||||
}
|
||||
setPlayerLoading(false);
|
||||
// Use OS-fused heading from expo-location
|
||||
headingSub = await Location.watchHeadingAsync((headingData) => {
|
||||
const raw = headingData.trueHeading >= 0 ? headingData.trueHeading : headingData.magHeading;
|
||||
setHeading(raw);
|
||||
});
|
||||
};
|
||||
|
||||
start();
|
||||
@@ -110,7 +118,7 @@ const MapScreen = ({navigation}) => {
|
||||
|
||||
const handleJoinGame = async () => {
|
||||
if (!gameCode.trim()) return;
|
||||
const result = await joinPrivateGame({JoinCode: gameCode.trim(), Uid: session.currentUid});
|
||||
const result = await joinPrivateGame({JoinCode: gameCode.trim().toUpperCase(), Uid: session.currentUid});
|
||||
if (!result) return;
|
||||
setSessionGroup(result.Gid, result.SGid);
|
||||
setInGame(true);
|
||||
@@ -152,8 +160,8 @@ const MapScreen = ({navigation}) => {
|
||||
const fallback = userLocation || {latitude: mapRegion.latitude, longitude: mapRegion.longitude};
|
||||
setEditingCacheId(null);
|
||||
setNewCoord(fallback);
|
||||
setNewName('');
|
||||
setNewClue('');
|
||||
setNewRadius('20');
|
||||
setIsCreating(true);
|
||||
};
|
||||
|
||||
@@ -161,8 +169,8 @@ const MapScreen = ({navigation}) => {
|
||||
const handleEditCache = (cache) => {
|
||||
setEditingCacheId(cache.id);
|
||||
setNewCoord(cache.coordinates);
|
||||
setNewName(cache.name || '');
|
||||
setNewClue(cache.clue || '');
|
||||
setNewRadius(String(cache.radius || 20));
|
||||
setIsCreating(true);
|
||||
};
|
||||
|
||||
@@ -178,9 +186,9 @@ const MapScreen = ({navigation}) => {
|
||||
if (!newCoord || !newClue.trim() || !session.currentGid) return;
|
||||
const payload = {
|
||||
gid: session.currentGid,
|
||||
name: newName.trim(),
|
||||
latitude: newCoord.latitude,
|
||||
longitude: newCoord.longitude,
|
||||
radius: parseInt(newRadius) || 20,
|
||||
clue: newClue.trim(),
|
||||
subgroupId: 1,
|
||||
};
|
||||
@@ -196,7 +204,18 @@ const MapScreen = ({navigation}) => {
|
||||
setEditingCacheId(null);
|
||||
};
|
||||
|
||||
// Player — select cache (scroll to / highlight)
|
||||
// Navigate to expanded map view, passing the live location so it opens centred on the user
|
||||
const handleExpandMap = () => {
|
||||
navigation.navigate('ExpandedMapScreen', {
|
||||
isAdmin,
|
||||
cacheRecords: JSON.stringify(cacheRecords),
|
||||
heading: heading || 0,
|
||||
claimDistance,
|
||||
userLocation: userLocation || null,
|
||||
});
|
||||
};
|
||||
|
||||
// Player — select cache
|
||||
const handleSelectCache = (cache) => {
|
||||
// Future: scroll map to cache location
|
||||
};
|
||||
@@ -211,6 +230,7 @@ const MapScreen = ({navigation}) => {
|
||||
<TextInput
|
||||
style={styles.codeInput}
|
||||
placeholder="Enter Game Code"
|
||||
placeholderTextColor="#9ca3af"
|
||||
value={gameCode}
|
||||
onChangeText={setGameCode}
|
||||
autoCapitalize="characters"
|
||||
@@ -254,7 +274,7 @@ const MapScreen = ({navigation}) => {
|
||||
<Marker coordinate={cache.coordinates} pinColor="#9ca3af" title={cache.clue}/>
|
||||
<Circle
|
||||
center={cache.coordinates}
|
||||
radius={cache.radius}
|
||||
radius={claimDistance}
|
||||
fillColor="rgba(156,163,175,0.15)"
|
||||
strokeColor="rgba(156,163,175,0.6)"
|
||||
/>
|
||||
@@ -272,7 +292,7 @@ const MapScreen = ({navigation}) => {
|
||||
/>
|
||||
<Circle
|
||||
center={newCoord}
|
||||
radius={parseInt(newRadius) || 20}
|
||||
radius={claimDistance}
|
||||
fillColor="rgba(37,99,235,0.15)"
|
||||
strokeColor="rgba(37,99,235,0.85)"
|
||||
/>
|
||||
@@ -283,7 +303,15 @@ const MapScreen = ({navigation}) => {
|
||||
<ScrollView style={styles.formSection}>
|
||||
<TextInput
|
||||
style={styles.formInput}
|
||||
placeholder="Cache's Clue"
|
||||
placeholder="Cache Name"
|
||||
placeholderTextColor="#9ca3af"
|
||||
value={newName}
|
||||
onChangeText={setNewName}
|
||||
/>
|
||||
<TextInput
|
||||
style={styles.formInput}
|
||||
placeholder="Cache Clue"
|
||||
placeholderTextColor="#9ca3af"
|
||||
value={newClue}
|
||||
onChangeText={setNewClue}
|
||||
/>
|
||||
@@ -293,6 +321,7 @@ const MapScreen = ({navigation}) => {
|
||||
<TextInput
|
||||
style={styles.formInput}
|
||||
placeholder="Latitude"
|
||||
placeholderTextColor="#9ca3af"
|
||||
value={newCoord ? String(newCoord.latitude.toFixed(6)) : ''}
|
||||
editable={false}
|
||||
/>
|
||||
@@ -302,18 +331,12 @@ const MapScreen = ({navigation}) => {
|
||||
<TextInput
|
||||
style={styles.formInput}
|
||||
placeholder="Longitude"
|
||||
placeholderTextColor="#9ca3af"
|
||||
value={newCoord ? String(newCoord.longitude.toFixed(6)) : ''}
|
||||
editable={false}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
<TextInput
|
||||
style={styles.formInput}
|
||||
placeholder="Claim Radius (metres)"
|
||||
value={newRadius}
|
||||
onChangeText={setNewRadius}
|
||||
keyboardType="numeric"
|
||||
/>
|
||||
<ButtonTray>
|
||||
<Button
|
||||
label={editingCacheId ? 'Update Cache' : 'Save Cache'}
|
||||
@@ -337,24 +360,37 @@ const MapScreen = ({navigation}) => {
|
||||
if (isAdmin) {
|
||||
return (
|
||||
<Screen style={styles.containerMap}>
|
||||
<View style={styles.mapWrap}>
|
||||
<View style={styles.mapContainer}>
|
||||
<MapView
|
||||
style={{flex: 1}}
|
||||
initialRegion={mapRegion}
|
||||
region={mapRegion}
|
||||
scrollEnabled={true}
|
||||
zoomEnabled={true}
|
||||
showsUserLocation
|
||||
>
|
||||
{cacheRecords.map((cache) => (
|
||||
<React.Fragment key={cache.id}>
|
||||
<Marker coordinate={cache.coordinates} title={cache.clue}/>
|
||||
<Marker coordinate={cache.coordinates} title={cache.name || cache.clue}/>
|
||||
<Circle
|
||||
center={cache.coordinates}
|
||||
radius={cache.radius}
|
||||
radius={claimDistance}
|
||||
fillColor="rgba(59,130,246,0.15)"
|
||||
strokeColor="rgba(59,130,246,0.85)"
|
||||
/>
|
||||
</React.Fragment>
|
||||
))}
|
||||
{userLocation && heading !== null && (
|
||||
<Polygon
|
||||
coordinates={getFovCone(userLocation, heading)}
|
||||
fillColor="rgba(66,133,244,0.28)"
|
||||
strokeColor="rgba(66,133,244,0.50)"
|
||||
strokeWidth={1}
|
||||
/>
|
||||
)}
|
||||
</MapView>
|
||||
<Pressable style={styles.expandButton} onPress={handleExpandMap}>
|
||||
<Text style={styles.expandIcon}>⛶</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
<View style={styles.createCacheWrap}>
|
||||
<Button
|
||||
@@ -364,8 +400,8 @@ const MapScreen = ({navigation}) => {
|
||||
styleLabel={styles.createCacheLabel}
|
||||
/>
|
||||
</View>
|
||||
<View style={styles.cacheSection}>
|
||||
<ScrollView>
|
||||
<View style={styles.cacheListWrap}>
|
||||
<ScrollView contentContainerStyle={styles.cacheListContent}>
|
||||
{cacheRecords.map((cache) => (
|
||||
<CacheCardItem
|
||||
key={cache.id}
|
||||
@@ -411,14 +447,22 @@ const MapScreen = ({navigation}) => {
|
||||
{teamsWarning && (
|
||||
<Text style={styles.warning}>You are not in a team. Teams are required for this game!</Text>
|
||||
)}
|
||||
<View style={styles.mapWrap}>
|
||||
<View style={styles.mapContainer}>
|
||||
<PlayerMapView
|
||||
userLocation={userLocation}
|
||||
visibleCache={visibleCache}
|
||||
isClaiming={isClaiming}
|
||||
onClaimSuccess={handleClaim}
|
||||
heading={heading}
|
||||
claimDistance={claimDistance}
|
||||
/>
|
||||
<Pressable style={styles.expandButton} onPress={handleExpandMap}>
|
||||
<Text style={styles.expandIcon}>⛶</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
<ClaimTimerView
|
||||
cache={visibleCache}
|
||||
isClaiming={isClaiming}
|
||||
onClaimSuccess={handleClaim}
|
||||
/>
|
||||
<View style={styles.cacheSection}>
|
||||
<ScrollView>
|
||||
{cacheRecords.map((cache) => (
|
||||
@@ -441,7 +485,7 @@ const MapScreen = ({navigation}) => {
|
||||
const styles = StyleSheet.create({
|
||||
center: {justifyContent: 'center', alignItems: 'center'},
|
||||
containerMap: {padding: 0},
|
||||
mapWrap: {flex: 1},
|
||||
mapContainer: {height: 200},
|
||||
error: {color: '#dc2626', fontSize: 15},
|
||||
loadingText: {color: '#6b7280', fontSize: 14, marginTop: 10},
|
||||
inputRow: {flexDirection: 'row', gap: 10, marginBottom: 15, width: '100%', paddingHorizontal: 20},
|
||||
@@ -454,6 +498,8 @@ const styles = StyleSheet.create({
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 10,
|
||||
fontSize: 16,
|
||||
color: '#1f2937',
|
||||
backgroundColor: '#ffffff',
|
||||
},
|
||||
joinButton: {backgroundColor: '#2563eb', borderColor: '#2563eb', flex: 0, paddingHorizontal: 20},
|
||||
joinLabel: {color: '#ffffff', fontWeight: '600'},
|
||||
@@ -466,9 +512,32 @@ const styles = StyleSheet.create({
|
||||
paddingVertical: 8,
|
||||
fontSize: 14,
|
||||
},
|
||||
createCacheWrap: {paddingHorizontal: 12, paddingVertical: 8},
|
||||
createCacheButton: {backgroundColor: '#2563eb', borderColor: '#2563eb'},
|
||||
expandButton: {
|
||||
position: 'absolute',
|
||||
top: 10,
|
||||
left: 10,
|
||||
backgroundColor: 'rgba(0,0,0,0.6)',
|
||||
borderRadius: 6,
|
||||
width: 36,
|
||||
height: 36,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
zIndex: 10,
|
||||
},
|
||||
expandIcon: {color: '#ffffff', fontSize: 18, fontWeight: '700'},
|
||||
// Admin create button + scrollable cache list
|
||||
createCacheWrap: {
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 10,
|
||||
backgroundColor: '#ffffff',
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#e5e7eb',
|
||||
},
|
||||
createCacheButton: {backgroundColor: '#2563eb', borderColor: '#2563eb', flex: 0},
|
||||
createCacheLabel: {color: '#ffffff', fontWeight: '600'},
|
||||
cacheListWrap: {flex: 1, backgroundColor: '#f3f4f6'},
|
||||
cacheListContent: {paddingHorizontal: 12, paddingTop: 10, paddingBottom: 12},
|
||||
// Cache editor form
|
||||
formSection: {flex: 1, paddingHorizontal: 12, paddingVertical: 10},
|
||||
formInput: {
|
||||
borderWidth: 1,
|
||||
@@ -477,6 +546,7 @@ const styles = StyleSheet.create({
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 10,
|
||||
fontSize: 16,
|
||||
color: '#1f2937',
|
||||
backgroundColor: '#ffffff',
|
||||
marginBottom: 10,
|
||||
},
|
||||
@@ -487,13 +557,10 @@ const styles = StyleSheet.create({
|
||||
saveLabel: {color: '#ffffff', fontWeight: '600'},
|
||||
cancelButton: {backgroundColor: '#6b7280', borderColor: '#6b7280'},
|
||||
cancelLabel: {color: '#ffffff', fontWeight: '600'},
|
||||
cacheSection: {
|
||||
maxHeight: 160,
|
||||
backgroundColor: '#f3f4f6',
|
||||
paddingHorizontal: 12,
|
||||
paddingTop: 10,
|
||||
},
|
||||
// Player cache section
|
||||
cacheSection: {flex: 1, backgroundColor: '#f3f4f6', paddingHorizontal: 12, paddingTop: 10},
|
||||
emptyText: {color: '#9ca3af', textAlign: 'center', marginTop: 20, fontSize: 14},
|
||||
mapWrap: {flex: 1},
|
||||
});
|
||||
|
||||
export default MapScreen;
|
||||
@@ -1,5 +1,5 @@
|
||||
import React, {useCallback, useEffect, useState} from 'react';
|
||||
import {ActivityIndicator, Pressable, ScrollView, StyleSheet, Text, View} from 'react-native';
|
||||
import {ActivityIndicator, ScrollView, StyleSheet, Text, View} from 'react-native';
|
||||
import Screen from '../layout/Screen';
|
||||
import Card from '../UI/Card';
|
||||
import {Button} from '../UI/Button';
|
||||
@@ -10,80 +10,57 @@ const PlayersScreen = () => {
|
||||
// Initialisation ------------
|
||||
|
||||
const session = getSession();
|
||||
const {getLobby, getTeams, getTeamMembers, getGroupMembers, getUser, getCaches} = useGameHook();
|
||||
const {getTeams, getTeamMembers, getGroupMembers, removeMember, getUser} = useGameHook();
|
||||
|
||||
// State ----------------------
|
||||
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [groupInfo, setGroupInfo] = useState(null);
|
||||
const [teams, setTeams] = useState([]);
|
||||
const [players, setPlayers] = useState([]);
|
||||
const [selectedTeam, setSelectedTeam] = useState(null);
|
||||
const [teamMembers, setTeamMembers] = useState([]);
|
||||
const [memberNames, setMemberNames] = useState({});
|
||||
const [memberCacheCounts, setMemberCacheCounts] = useState({});
|
||||
const [detailLoading, setDetailLoading] = useState(false);
|
||||
|
||||
// Handlers -------------------
|
||||
|
||||
const loadData = useCallback(async () => {
|
||||
if (!session.currentGid) {
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
const group = await getLobby(session.currentGid);
|
||||
setGroupInfo(group);
|
||||
if (!session.currentGid) { setLoading(false); return; }
|
||||
|
||||
if (group && group.TeamsEnabled) {
|
||||
// Teams enabled — load all teams for this group
|
||||
const teamRows = await getTeams(session.currentGid);
|
||||
setTeams(teamRows || []);
|
||||
} else {
|
||||
// Teams disabled — load all members for this group
|
||||
const memberships = await getGroupMembers(session.currentGid);
|
||||
const nonAdminMembers = (memberships || []).filter((m) => !m.IsAcceptedAdmin);
|
||||
const playerList = [];
|
||||
for (const m of nonAdminMembers) {
|
||||
const user = await getUser(m.Uid);
|
||||
if (user) playerList.push(user);
|
||||
// Get all non-admin players
|
||||
const allMembers = await getGroupMembers(session.currentGid);
|
||||
const nonAdminMembers = (allMembers || []).filter((m) => !m.IsAcceptedAdmin);
|
||||
|
||||
// Build team lookup: { Uid -> { teamCode, teamName, isLeader } }
|
||||
const allTeams = await getTeams(session.currentGid);
|
||||
const teamInfoByUid = {};
|
||||
for (const team of (allTeams || [])) {
|
||||
const tms = await getTeamMembers(team.Tid);
|
||||
for (const tm of (tms || [])) {
|
||||
teamInfoByUid[tm.Uid] = {
|
||||
teamCode: team.JoinCode,
|
||||
teamName: team.TeamName,
|
||||
isLeader: Boolean(tm.IsLeader),
|
||||
};
|
||||
}
|
||||
setPlayers(playerList);
|
||||
}
|
||||
|
||||
// Build player list
|
||||
const playerList = [];
|
||||
for (const m of nonAdminMembers) {
|
||||
const user = await getUser(m.Uid);
|
||||
if (user) {
|
||||
playerList.push({
|
||||
...user,
|
||||
membershipId: m.id,
|
||||
team: teamInfoByUid[m.Uid] || null,
|
||||
});
|
||||
}
|
||||
}
|
||||
setPlayers(playerList);
|
||||
setLoading(false);
|
||||
}, [session.currentGid]);
|
||||
|
||||
useEffect(() => { loadData(); }, [loadData]);
|
||||
|
||||
const handleSelectTeam = async (team) => {
|
||||
setSelectedTeam(team);
|
||||
setDetailLoading(true);
|
||||
|
||||
// Load team members and their usernames
|
||||
const ms = await getTeamMembers(team.Tid);
|
||||
setTeamMembers(ms || []);
|
||||
|
||||
const names = {};
|
||||
for (const m of (ms || [])) {
|
||||
const user = await getUser(m.Uid);
|
||||
if (user) names[m.Uid] = user.username;
|
||||
}
|
||||
setMemberNames(names);
|
||||
|
||||
// Load all caches to count individual contributions
|
||||
const caches = await getCaches(session.currentGid, null);
|
||||
const counts = {};
|
||||
for (const m of (ms || [])) {
|
||||
counts[m.Uid] = (caches || []).filter((c) => c.ClaimedByUid === m.Uid).length;
|
||||
}
|
||||
setMemberCacheCounts(counts);
|
||||
setDetailLoading(false);
|
||||
};
|
||||
|
||||
const handleBackToTeams = () => {
|
||||
setSelectedTeam(null);
|
||||
setTeamMembers([]);
|
||||
setMemberNames({});
|
||||
setMemberCacheCounts({});
|
||||
const handleRemovePlayer = async (membershipId) => {
|
||||
await removeMember(membershipId);
|
||||
await loadData();
|
||||
};
|
||||
|
||||
// View -----------------------
|
||||
@@ -104,88 +81,29 @@ const PlayersScreen = () => {
|
||||
);
|
||||
}
|
||||
|
||||
// Teams enabled — show team detail view
|
||||
if (groupInfo?.TeamsEnabled && selectedTeam) {
|
||||
return (
|
||||
<Screen style={styles.container}>
|
||||
<View style={styles.teamDetailHeader}>
|
||||
<Text style={styles.teamDetailName}>{selectedTeam.TeamName || 'Unnamed Team'}</Text>
|
||||
<Text style={styles.teamDetailCode}>Code: {selectedTeam.JoinCode}</Text>
|
||||
</View>
|
||||
|
||||
{detailLoading ? (
|
||||
<View style={styles.center}>
|
||||
<ActivityIndicator size="large"/>
|
||||
</View>
|
||||
) : (
|
||||
<ScrollView style={styles.listSection}>
|
||||
<Text style={styles.sectionTitle}>Team Members</Text>
|
||||
{teamMembers.map((m) => (
|
||||
<Card key={m.id}>
|
||||
<View style={styles.memberRow}>
|
||||
<Text style={styles.memberName}>
|
||||
{memberNames[m.Uid] || `Player ${m.Uid}`}
|
||||
</Text>
|
||||
<Text style={styles.memberCaches}>
|
||||
{memberCacheCounts[m.Uid] || 0} cache(s) claimed
|
||||
</Text>
|
||||
</View>
|
||||
</Card>
|
||||
))}
|
||||
{teamMembers.length === 0 && (
|
||||
<Text style={styles.emptyText}>No members in this team.</Text>
|
||||
)}
|
||||
</ScrollView>
|
||||
)}
|
||||
|
||||
<View style={styles.backWrap}>
|
||||
<Button
|
||||
label="Back to Teams"
|
||||
onClick={handleBackToTeams}
|
||||
styleButton={styles.backButton}
|
||||
styleLabel={styles.backLabel}
|
||||
/>
|
||||
</View>
|
||||
</Screen>
|
||||
);
|
||||
}
|
||||
|
||||
// Teams enabled — show team cards
|
||||
if (groupInfo?.TeamsEnabled) {
|
||||
return (
|
||||
<Screen style={styles.container}>
|
||||
<Text style={styles.sectionTitle}>Teams</Text>
|
||||
<ScrollView style={styles.listSection}>
|
||||
{teams.map((team) => (
|
||||
<Pressable key={team.Tid} onPress={() => handleSelectTeam(team)}>
|
||||
<Card>
|
||||
<View style={styles.teamCardRow}>
|
||||
<Text style={styles.teamName}>
|
||||
{team.TeamName || 'Unnamed Team'}
|
||||
</Text>
|
||||
<Text style={styles.teamCode}>
|
||||
Code: {team.JoinCode}
|
||||
</Text>
|
||||
</View>
|
||||
</Card>
|
||||
</Pressable>
|
||||
))}
|
||||
{teams.length === 0 && (
|
||||
<Text style={styles.emptyText}>No teams have been created yet.</Text>
|
||||
)}
|
||||
</ScrollView>
|
||||
</Screen>
|
||||
);
|
||||
}
|
||||
|
||||
// Teams disabled — show player list
|
||||
return (
|
||||
<Screen style={styles.container}>
|
||||
<Text style={styles.sectionTitle}>Players</Text>
|
||||
<ScrollView style={styles.listSection}>
|
||||
{players.map((player) => (
|
||||
<Card key={player.Uid}>
|
||||
<Text style={styles.playerName}>{player.username}</Text>
|
||||
<View style={styles.playerRow}>
|
||||
<Text style={styles.playerName} numberOfLines={1}>{player.username}</Text>
|
||||
<View style={styles.playerMeta}>
|
||||
{player.team?.isLeader && (
|
||||
<Text style={styles.leaderBadge}>(Team Leader)</Text>
|
||||
)}
|
||||
{player.team && (
|
||||
<Text style={styles.teamCodeBadge}>{player.team.teamCode}</Text>
|
||||
)}
|
||||
</View>
|
||||
<Button
|
||||
label="Kick"
|
||||
onClick={() => handleRemovePlayer(player.membershipId)}
|
||||
styleButton={styles.removeButton}
|
||||
styleLabel={styles.removeLabel}
|
||||
/>
|
||||
</View>
|
||||
</Card>
|
||||
))}
|
||||
{players.length === 0 && (
|
||||
@@ -204,40 +122,23 @@ const styles = StyleSheet.create({
|
||||
fontSize: 20,
|
||||
fontWeight: '700',
|
||||
color: '#1f2937',
|
||||
marginBottom: 10,
|
||||
marginBottom: 12,
|
||||
paddingHorizontal: 15,
|
||||
paddingTop: 15,
|
||||
},
|
||||
listSection: {flex: 1, paddingHorizontal: 15},
|
||||
emptyText: {color: '#9ca3af', textAlign: 'center', marginTop: 30, fontSize: 14},
|
||||
// Team cards
|
||||
teamCardRow: {
|
||||
playerRow: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
},
|
||||
teamName: {fontSize: 16, fontWeight: '600', color: '#1f2937'},
|
||||
teamCode: {fontSize: 14, fontWeight: '700', color: '#2563eb', letterSpacing: 1},
|
||||
// Team detail
|
||||
teamDetailHeader: {
|
||||
backgroundColor: '#374151',
|
||||
paddingVertical: 14,
|
||||
paddingHorizontal: 16,
|
||||
},
|
||||
teamDetailName: {fontSize: 18, fontWeight: '700', color: '#ffffff', marginBottom: 4},
|
||||
teamDetailCode: {fontSize: 14, fontWeight: '600', color: '#93c5fd', letterSpacing: 1},
|
||||
memberRow: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
},
|
||||
memberName: {fontSize: 16, fontWeight: '600', color: '#1f2937'},
|
||||
memberCaches: {fontSize: 13, fontWeight: '600', color: '#16a34a'},
|
||||
backWrap: {padding: 15},
|
||||
backButton: {backgroundColor: '#6b7280', borderColor: '#6b7280'},
|
||||
backLabel: {color: '#ffffff', fontWeight: '600'},
|
||||
// Player list
|
||||
playerName: {fontSize: 16, fontWeight: '600', color: '#1f2937'},
|
||||
playerName: {fontSize: 15, fontWeight: '600', color: '#1f2937', flex: 1},
|
||||
playerMeta: {flexDirection: 'row', alignItems: 'center', gap: 6},
|
||||
leaderBadge: {fontSize: 11, color: '#2563eb', fontWeight: '700'},
|
||||
teamCodeBadge: {fontSize: 12, fontWeight: '700', color: '#16a34a', letterSpacing: 1},
|
||||
removeButton: {backgroundColor: '#dc2626', borderColor: '#dc2626', minHeight: 36, flex: 0, paddingHorizontal: 12},
|
||||
removeLabel: {color: '#ffffff', fontWeight: '600', fontSize: 13},
|
||||
});
|
||||
|
||||
export default PlayersScreen;
|
||||
|
||||
@@ -42,6 +42,7 @@ const RegisterScreen = ({navigation}) => {
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholder="Username"
|
||||
placeholderTextColor="#9ca3af"
|
||||
value={username}
|
||||
onChangeText={setUsername}
|
||||
editable={!isLoading}
|
||||
@@ -49,6 +50,7 @@ const RegisterScreen = ({navigation}) => {
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholder="Email"
|
||||
placeholderTextColor="#9ca3af"
|
||||
autoCapitalize="none"
|
||||
keyboardType="email-address"
|
||||
value={email}
|
||||
@@ -58,6 +60,7 @@ const RegisterScreen = ({navigation}) => {
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholder="Password"
|
||||
placeholderTextColor="#9ca3af"
|
||||
secureTextEntry
|
||||
value={password}
|
||||
onChangeText={setPassword}
|
||||
@@ -66,6 +69,7 @@ const RegisterScreen = ({navigation}) => {
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholder="Confirm Password"
|
||||
placeholderTextColor="#9ca3af"
|
||||
secureTextEntry
|
||||
value={confirmPassword}
|
||||
onChangeText={setConfirmPassword}
|
||||
@@ -132,6 +136,8 @@ const styles = StyleSheet.create({
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 10,
|
||||
fontSize: 16,
|
||||
color: '#1f2937',
|
||||
backgroundColor: '#ffffff',
|
||||
},
|
||||
typeRow: {
|
||||
flexDirection: 'row',
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import React, {useEffect, useState} from 'react';
|
||||
import {ActivityIndicator, ScrollView, StyleSheet, Text, TextInput, View} from 'react-native';
|
||||
import Screen from '../layout/Screen';
|
||||
import Card from '../UI/Card';
|
||||
import {Button, ButtonTray} from '../UI/Button';
|
||||
import useGameHook from '../../hooks/useGameHook';
|
||||
import {getSession, setSessionTeam} from '../../hooks/SessionStore';
|
||||
@@ -23,20 +24,22 @@ const TeamScreen = () => {
|
||||
|
||||
// Handlers -------------------
|
||||
|
||||
const loadTeamData = async (tid) => {
|
||||
const t = await getTeam(tid);
|
||||
setTeam(t);
|
||||
const ms = await getTeamMembers(tid);
|
||||
setMembers(ms || []);
|
||||
const names = {};
|
||||
for (const m of (ms || [])) {
|
||||
const u = await getUser(m.Uid);
|
||||
if (u) names[m.Uid] = u.username;
|
||||
}
|
||||
setMemberNames(names);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const load = async () => {
|
||||
if (activeTid) {
|
||||
const t = await getTeam(activeTid);
|
||||
setTeam(t);
|
||||
const ms = await getTeamMembers(activeTid);
|
||||
setMembers(ms || []);
|
||||
const names = {};
|
||||
for (const m of (ms || [])) {
|
||||
const u = await getUser(m.Uid);
|
||||
if (u) names[m.Uid] = u.username;
|
||||
}
|
||||
setMemberNames(names);
|
||||
}
|
||||
if (activeTid) await loadTeamData(activeTid);
|
||||
setLoading(false);
|
||||
};
|
||||
load();
|
||||
@@ -44,7 +47,7 @@ const TeamScreen = () => {
|
||||
|
||||
const handleJoinTeam = async () => {
|
||||
if (!teamCode.trim()) return;
|
||||
const result = await joinTeamByCode({JoinCode: teamCode.trim(), Uid: session.currentUid});
|
||||
const result = await joinTeamByCode({JoinCode: teamCode.trim().toUpperCase(), Uid: session.currentUid});
|
||||
if (!result) return;
|
||||
setSessionTeam(result.Tid);
|
||||
setActiveTid(result.Tid);
|
||||
@@ -73,6 +76,15 @@ const TeamScreen = () => {
|
||||
setMemberNames({});
|
||||
};
|
||||
|
||||
const handleKickMember = async (member) => {
|
||||
await leaveTeam(member.id);
|
||||
await loadTeamData(activeTid);
|
||||
};
|
||||
|
||||
// Check if current user is the team leader
|
||||
const myMembership = members.find((m) => m.Uid === session.currentUid);
|
||||
const isCurrentUserLeader = Boolean(myMembership?.IsLeader);
|
||||
|
||||
// View -----------------------
|
||||
|
||||
if (loading) {
|
||||
@@ -91,6 +103,7 @@ const TeamScreen = () => {
|
||||
<TextInput
|
||||
style={styles.codeInput}
|
||||
placeholder="Enter Team Code"
|
||||
placeholderTextColor="#9ca3af"
|
||||
value={teamCode}
|
||||
onChangeText={setTeamCode}
|
||||
autoCapitalize="characters"
|
||||
@@ -127,9 +140,24 @@ const TeamScreen = () => {
|
||||
</View>
|
||||
<ScrollView style={styles.memberList}>
|
||||
{members.map((m) => (
|
||||
<View key={m.id} style={styles.memberItem}>
|
||||
<Text style={styles.memberName}>{memberNames[m.Uid] || `Player ${m.Uid}`}</Text>
|
||||
</View>
|
||||
<Card key={m.id}>
|
||||
<View style={styles.memberRow}>
|
||||
<View style={styles.memberInfo}>
|
||||
<Text style={styles.memberName}>
|
||||
{memberNames[m.Uid] || `Player ${m.Uid}`}
|
||||
</Text>
|
||||
{m.IsLeader && <Text style={styles.leaderBadge}>(Team Leader)</Text>}
|
||||
</View>
|
||||
{isCurrentUserLeader && m.Uid !== session.currentUid && (
|
||||
<Button
|
||||
label="Kick"
|
||||
onClick={() => handleKickMember(m)}
|
||||
styleButton={styles.kickButton}
|
||||
styleLabel={styles.kickLabel}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
</Card>
|
||||
))}
|
||||
{members.length === 0 && (
|
||||
<Text style={styles.emptyText}>No members yet.</Text>
|
||||
@@ -160,6 +188,8 @@ const styles = StyleSheet.create({
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 10,
|
||||
fontSize: 16,
|
||||
color: '#1f2937',
|
||||
backgroundColor: '#ffffff',
|
||||
},
|
||||
joinButton: {backgroundColor: '#2563eb', borderColor: '#2563eb', flex: 0, paddingHorizontal: 20},
|
||||
joinLabel: {color: '#ffffff', fontWeight: '600'},
|
||||
@@ -176,14 +206,18 @@ const styles = StyleSheet.create({
|
||||
teamCodeLabel: {color: '#d1d5db', fontSize: 15, fontWeight: '600'},
|
||||
teamCodeValue: {color: '#ffffff', fontSize: 17, fontWeight: '700', letterSpacing: 2},
|
||||
memberList: {flex: 1, paddingHorizontal: 15, paddingTop: 10},
|
||||
memberItem: {
|
||||
paddingVertical: 14,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#e5e7eb',
|
||||
memberRow: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
},
|
||||
memberName: {fontSize: 16, color: '#1f2937'},
|
||||
memberInfo: {flex: 1, flexDirection: 'row', alignItems: 'center', gap: 6},
|
||||
memberName: {fontSize: 16, color: '#1f2937', fontWeight: '600'},
|
||||
leaderBadge: {fontSize: 12, color: '#2563eb', fontWeight: '700'},
|
||||
kickButton: {backgroundColor: '#dc2626', borderColor: '#dc2626', minHeight: 36, flex: 0, paddingHorizontal: 14},
|
||||
kickLabel: {color: '#ffffff', fontWeight: '600', fontSize: 13},
|
||||
emptyText: {color: '#9ca3af', textAlign: 'center', marginTop: 30, fontSize: 14},
|
||||
leaveWrap: {padding: 15},
|
||||
leaveWrap: {paddingHorizontal: 15, paddingVertical: 10},
|
||||
leaveButton: {backgroundColor: '#dc2626', borderColor: '#dc2626'},
|
||||
leaveLabel: {color: '#ffffff', fontWeight: '600'},
|
||||
});
|
||||
|
||||
@@ -1,4 +1,8 @@
|
||||
// --- Session Store ---
|
||||
// --- Session Store (with AsyncStorage persistence) ---
|
||||
|
||||
import AsyncStorage from '@react-native-async-storage/async-storage';
|
||||
|
||||
const STORAGE_KEY = '@mad_session';
|
||||
|
||||
const session = {
|
||||
currentUid: null,
|
||||
@@ -7,6 +11,7 @@ const session = {
|
||||
currentTid: null,
|
||||
isBusiness: null,
|
||||
isAcceptedAdmin: false,
|
||||
teamsEnabled: false,
|
||||
};
|
||||
|
||||
// --- Handlers ---
|
||||
@@ -18,6 +23,7 @@ const setSessionUser = (user) => {
|
||||
session.currentTid = user?.TGid ?? null;
|
||||
session.isBusiness = user?.isBusiness ?? null;
|
||||
session.isAcceptedAdmin = Boolean(user?.IsAcceptedAdmin);
|
||||
persistSession();
|
||||
};
|
||||
|
||||
const setSessionGroup = (gid, sgid = null) => {
|
||||
@@ -25,10 +31,17 @@ const setSessionGroup = (gid, sgid = null) => {
|
||||
if (sgid !== null && sgid !== undefined) {
|
||||
session.currentSGid = sgid;
|
||||
}
|
||||
persistSession();
|
||||
};
|
||||
|
||||
const setSessionTeam = (tid) => {
|
||||
session.currentTid = tid ?? null;
|
||||
persistSession();
|
||||
};
|
||||
|
||||
const setSessionTeamsEnabled = (val) => {
|
||||
session.teamsEnabled = Boolean(val);
|
||||
persistSession();
|
||||
};
|
||||
|
||||
const getSession = () => ({ ...session });
|
||||
@@ -40,6 +53,36 @@ const clearSession = () => {
|
||||
session.currentTid = null;
|
||||
session.isBusiness = null;
|
||||
session.isAcceptedAdmin = false;
|
||||
AsyncStorage.removeItem(STORAGE_KEY).catch(() => {});
|
||||
};
|
||||
|
||||
export { setSessionUser, setSessionGroup, setSessionTeam, getSession, clearSession };
|
||||
// Clear game data but keep user logged in
|
||||
const clearGameSession = () => {
|
||||
session.currentGid = null;
|
||||
session.currentSGid = null;
|
||||
session.currentTid = null;
|
||||
session.isAcceptedAdmin = false;
|
||||
session.teamsEnabled = false;
|
||||
persistSession();
|
||||
};
|
||||
|
||||
// --- Persistence helpers ---
|
||||
|
||||
const persistSession = () => {
|
||||
AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(session)).catch(() => {});
|
||||
};
|
||||
|
||||
const loadSession = async () => {
|
||||
try {
|
||||
const raw = await AsyncStorage.getItem(STORAGE_KEY);
|
||||
if (raw) {
|
||||
const saved = JSON.parse(raw);
|
||||
Object.assign(session, saved);
|
||||
}
|
||||
} catch (_) {
|
||||
// Ignore read errors — start fresh
|
||||
}
|
||||
return { ...session };
|
||||
};
|
||||
|
||||
export { setSessionUser, setSessionGroup, setSessionTeam, setSessionTeamsEnabled, getSession, clearSession, clearGameSession, loadSession };
|
||||
@@ -4,14 +4,12 @@ const useGameHook = () => {
|
||||
// Initialisation ------------
|
||||
|
||||
const usersEndpoint = `${API_BASE_URL}/users`;
|
||||
const gameTypesEndpoint = `${API_BASE_URL}/game-types`;
|
||||
const groupsEndpoint = `${API_BASE_URL}/groups`;
|
||||
const subgroupsEndpoint = `${API_BASE_URL}/subgroups`;
|
||||
const subgroupMembershipsEndpoint = `${API_BASE_URL}/subgroup-memberships`;
|
||||
const teamsEndpoint = `${API_BASE_URL}/teams`;
|
||||
const teamMembersEndpoint = `${API_BASE_URL}/team-members`;
|
||||
const gameDataEndpoint = `${API_BASE_URL}/game-data`;
|
||||
const adminWaitlistEndpoint = `${API_BASE_URL}/admin-waitlist`;
|
||||
|
||||
// Handlers -------------------
|
||||
|
||||
@@ -26,18 +24,7 @@ const useGameHook = () => {
|
||||
return response.isSuccess ? response.result : null;
|
||||
};
|
||||
|
||||
// Game types
|
||||
const getGameTypes = async () => {
|
||||
const response = await API.get(gameTypesEndpoint);
|
||||
return response.isSuccess ? response.result : [];
|
||||
};
|
||||
|
||||
// Groups
|
||||
const getCreatedPrivateGame = async (userId) => {
|
||||
const response = await API.get(`${groupsEndpoint}?CreatedByUid=${userId}`);
|
||||
return response.isSuccess ? response.result : [];
|
||||
};
|
||||
|
||||
const createPrivateGame = async (payload) => {
|
||||
const response = await API.post(groupsEndpoint, payload);
|
||||
return response.isSuccess ? response.result : null;
|
||||
@@ -69,9 +56,9 @@ const useGameHook = () => {
|
||||
return response.isSuccess ? response.result : [];
|
||||
};
|
||||
|
||||
const joinAsAdmin = async (payload) => {
|
||||
const response = await API.post(adminWaitlistEndpoint, payload);
|
||||
return response.isSuccess ? response.result : null;
|
||||
const removeMember = async (membershipId) => {
|
||||
const response = await API.delete(`${subgroupMembershipsEndpoint}/${membershipId}`);
|
||||
return response.isSuccess;
|
||||
};
|
||||
|
||||
// Teams
|
||||
@@ -147,15 +134,13 @@ const useGameHook = () => {
|
||||
return {
|
||||
getUser,
|
||||
updateUser,
|
||||
getGameTypes,
|
||||
getCreatedPrivateGame,
|
||||
createPrivateGame,
|
||||
getLobby,
|
||||
updateGroup,
|
||||
getSubgroups,
|
||||
joinPrivateGame,
|
||||
joinAsAdmin,
|
||||
getGroupMembers,
|
||||
removeMember,
|
||||
getTeams,
|
||||
getTeam,
|
||||
createTeam,
|
||||
|
||||
+10
-14
@@ -1,7 +1,7 @@
|
||||
import {useEffect, useState} from 'react';
|
||||
import {isLookingAtCache, isWithinRadius} from '../utils/geoMath';
|
||||
import {isInClaimCone} from '../utils/geoMath';
|
||||
|
||||
const usePlayerGame = (playerLocation, playerHeading, activeCaches) => {
|
||||
const usePlayerGame = (playerLocation, playerHeading, activeCaches, claimDistance) => {
|
||||
// State ----------------------
|
||||
|
||||
const [visibleCache, setVisibleCache] = useState(null);
|
||||
@@ -16,19 +16,15 @@ const usePlayerGame = (playerLocation, playerHeading, activeCaches) => {
|
||||
return;
|
||||
}
|
||||
|
||||
const nearbyCache = (activeCaches || []).find((cache) =>
|
||||
isWithinRadius(playerLocation, cache.coordinates, cache.radius));
|
||||
// Find the first cache that falls inside the invisible claim cone
|
||||
// (same FOV angle as the visible cone, but radius = admin-set claimDistance)
|
||||
const cacheInCone = (activeCaches || []).find((cache) =>
|
||||
isInClaimCone(playerHeading, playerLocation, cache.coordinates, claimDistance)
|
||||
);
|
||||
|
||||
if (!nearbyCache) {
|
||||
setVisibleCache(null);
|
||||
setIsClaiming(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const isTargeted = isLookingAtCache(playerHeading, playerLocation, nearbyCache.coordinates);
|
||||
setVisibleCache(nearbyCache);
|
||||
setIsClaiming(isTargeted);
|
||||
}, [playerLocation, playerHeading, activeCaches]);
|
||||
setVisibleCache(cacheInCone || null);
|
||||
setIsClaiming(Boolean(cacheInCone));
|
||||
}, [playerLocation, playerHeading, activeCaches, claimDistance]);
|
||||
|
||||
// Return ---------------------
|
||||
|
||||
|
||||
+54
-10
@@ -1,18 +1,62 @@
|
||||
import * as geolib from 'geolib';
|
||||
|
||||
// --- FOV Configuration ---
|
||||
const FOV_SIZE = 50; // metres — radius of the visible FOV cone drawn on screen
|
||||
const FOV_ANGLE = 60; // degrees — total field of view (halved for each side)
|
||||
const CACHE_CLAIM_TIMER = 5; // seconds — how long the player must hold a cache in the claim cone to claim it
|
||||
|
||||
// Convert raw Magnetometer {x, y} reading to a 0-360° heading (0° = north)
|
||||
const toHeading = ({x, y}) => {
|
||||
const angle = Math.atan2(y, x) * (180 / Math.PI);
|
||||
const heading = 90 - angle;
|
||||
return heading < 0 ? heading + 360 : heading % 360;
|
||||
};
|
||||
|
||||
// Build a pie-shaped FOV sector as polygon coordinates
|
||||
// radiusMeters defaults to FOV_SIZE (the visible cone) — pass a different value to build the invisible claim cone
|
||||
const getFovCone = (location, headingDeg, radiusMeters = FOV_SIZE, halfAngle = FOV_ANGLE / 2, arcSegments = 20) => {
|
||||
const origin = {latitude: location.latitude, longitude: location.longitude};
|
||||
const startBearing = headingDeg - halfAngle;
|
||||
const endBearing = headingDeg + halfAngle;
|
||||
const step = (endBearing - startBearing) / arcSegments;
|
||||
|
||||
// Tip of the sector
|
||||
const points = [location];
|
||||
|
||||
// Arc points at radiusMeters distance from origin
|
||||
for (let i = 0; i <= arcSegments; i++) {
|
||||
const bearing = startBearing + step * i;
|
||||
const dest = geolib.computeDestinationPoint(origin, radiusMeters, bearing);
|
||||
points.push({latitude: dest.latitude, longitude: dest.longitude});
|
||||
}
|
||||
|
||||
return points;
|
||||
};
|
||||
|
||||
const isWithinRadius = (playerCoords, cacheCoords, radius) => {
|
||||
const distance = geolib.getDistance(playerCoords, cacheCoords);
|
||||
return distance <= radius;
|
||||
const distance = geolib.getDistance(playerCoords, cacheCoords);
|
||||
return distance <= radius;
|
||||
};
|
||||
|
||||
const isLookingAtCache = (playerHeading, playerCoords, cacheCoords, tolerance = 20) => {
|
||||
if (playerHeading === null || playerHeading === undefined) {
|
||||
return false;
|
||||
}
|
||||
const bearingToCache = geolib.getRhumbLineBearing(playerCoords, cacheCoords);
|
||||
const diff = Math.abs(bearingToCache - playerHeading);
|
||||
return diff <= tolerance || diff >= 360 - tolerance;
|
||||
const isLookingAtCache = (playerHeading, playerCoords, cacheCoords, tolerance = FOV_ANGLE / 2) => {
|
||||
if (playerHeading === null || playerHeading === undefined) {
|
||||
return false;
|
||||
}
|
||||
const bearingToCache = geolib.getRhumbLineBearing(playerCoords, cacheCoords);
|
||||
const diff = Math.abs(bearingToCache - playerHeading);
|
||||
return diff <= tolerance || diff >= 360 - tolerance;
|
||||
};
|
||||
|
||||
export { isWithinRadius, isLookingAtCache };
|
||||
// Checks whether a cache falls within the invisible claim sector
|
||||
// The claim sector uses the same FOV_ANGLE as the visible cone but extends to the
|
||||
// admin-defined claimDistance rather than the visible FOV_SIZE.
|
||||
// If the cache sits inside this sector the claiming countdown is triggered.
|
||||
const isInClaimCone = (playerHeading, playerCoords, cacheCoords, claimDistance) => {
|
||||
if (playerHeading === null || playerHeading === undefined) return false;
|
||||
// Cache must be within the admin-configured claim distance
|
||||
if (!isWithinRadius(playerCoords, cacheCoords, claimDistance)) return false;
|
||||
// Cache must also fall within the same angular width as the visible cone
|
||||
return isLookingAtCache(playerHeading, playerCoords, cacheCoords);
|
||||
};
|
||||
|
||||
export { toHeading, getFovCone, isWithinRadius, isLookingAtCache, isInClaimCone, FOV_ANGLE, FOV_SIZE, CACHE_CLAIM_TIMER };
|
||||
Reference in new issue
Block a user