Add new screens for game management, team management, and cache handling; implement caching logic and session management

src/components/screens/ManageGameScreen.js

@@ -0,0 +1,168 @@
+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 = () => {
+  const session = getSession();
+  const { getCaches, upsertCache } = useGameHook();
+  const [userLocation, setUserLocation] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+  const [cacheRecords, setCacheRecords] = useState([]);
+
+  const loadCaches = useCallback(() => {
+    if (!session.currentGid) {
+      setCacheRecords([]);
+      return;
+    }
+    setCacheRecords(getCaches(session.currentGid, null));
+  }, [getCaches, 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 = (coordinate) => {
+    if (!session.currentGid) {
+      return;
+    }
+    upsertCache({
+      gid: session.currentGid,
+      latitude: coordinate.latitude,
+      longitude: coordinate.longitude,
+      radius: 20,
+      clue: `Cache ${cacheRecords.length + 1}`,
+      subgroupId: 1,
+    });
+    loadCaches();
+  };
+
+  const handleMoveCache = (cacheId, coordinate) => {
+    if (!session.currentGid) {
+      return;
+    }
+    const current = cacheRecords.find((cache) => cache.id === cacheId);
+    if (!current) {
+      return;
+    }
+    upsertCache({
+      gid: session.currentGid,
+      cacheId,
+      latitude: coordinate.latitude,
+      longitude: coordinate.longitude,
+      radius: current.radius,
+      clue: current.clue,
+      subgroupId: current.subgroupId,
+    });
+    loadCaches();
+  };
+
+  if (!session.currentGid) {
+    return (
+      <Screen style={styles.center}>
+        <Text style={styles.body}>Create or join a game first.</Text>
+      </Screen>
+    );
+  }
+
+  if (!session.isAcceptedAdmin) {
+    return (
+      <Screen style={styles.center}>
+        <Text style={styles.body}>Only admins can edit cache locations.</Text>
+      </Screen>
+    );
+  }
+
+  if (loading) {
+    return (
+      <Screen style={styles.center}>
+        <ActivityIndicator size="large" />
+      </Screen>
+    );
+  }
+
+  if (error) {
+    return (
+      <Screen style={styles.center}>
+        <Text style={styles.error}>{error}</Text>
+      </Screen>
+    );
+  }
+
+  return (
+    <Screen 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;