diff --git a/.gitignore b/.gitignore index c4fcf5f..9069e79 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,9 @@ # Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files +# Environment variables (contains secrets) +.env +.env.local + # dependencies node_modules/ diff --git a/App.js b/App.js index 9efbd46..fb2944e 100644 --- a/App.js +++ b/App.js @@ -1,8 +1,8 @@ -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 { 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 TeamScreen from "./src/components/screens/TeamScreen"; @@ -12,7 +12,12 @@ import GameSettingsScreen from "./src/components/screens/GameSettingsScreen"; import DepartmentSettingsScreen from "./src/components/screens/DepartmentSettingsScreen"; import PlayersScreen from "./src/components/screens/PlayersScreen"; import ExpandedMapScreen from "./src/components/screens/ExpandedMapScreen"; -import {loadSession} from "./src/hooks/SessionStore"; +import GameSelectionScreen from "./src/components/screens/GameSelectionScreen"; +import GlobalEventsScreen from "./src/components/screens/global/GlobalEventsScreen"; +import GlobalMapScreen from "./src/components/screens/global/GlobalMapScreen"; +import GlobalCacheViewScreen from "./src/components/screens/global/GlobalCacheViewScreen"; +import GlobalLeaderboardScreen from "./src/components/screens/global/GlobalLeaderboardScreen"; +import { loadSession } from "./src/hooks/SessionStore"; const RootStack = createNativeStackNavigator(); const AuthStackNav = createNativeStackNavigator(); @@ -20,28 +25,87 @@ const GameStackNav = createNativeStackNavigator(); const AdminStackNav = createNativeStackNavigator(); const screenOptions = { - headerShown: false, - contentStyle: {backgroundColor: '#ffffff'}, + headerShown: false, + contentStyle: { backgroundColor: "#ffffff" }, }; const AuthStack = () => ( - - - - + + + + ); const GameStack = () => ( - - - - - - - + + + + + + + + + + + + ); const AdminStack = () => ( + + + + + + + + + + + + + @@ -54,38 +118,48 @@ const AdminStack = () => ( ); export const App = () => { - // Load persisted session from AsyncStorage before choosing initial route - const [loading, setLoading] = useState(true); - const [initialRoute, setInitialRoute] = useState('Auth'); + // 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 ( - - - - ); - } + useEffect(() => { + loadSession().then((session) => { + if (session.currentUid) { + setInitialRoute(session.isAcceptedAdmin ? "Admin" : "Game"); + } + setLoading(false); + }); + }, []); + if (loading) { return ( - - - - - - - - - + + + ); + } + + return ( + + + + + + + + + + ); }; export default App; diff --git a/package-lock.json b/package-lock.json index 952e587..5101718 100644 --- a/package-lock.json +++ b/package-lock.json @@ -77,6 +77,7 @@ "version": "7.29.0", "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.0.tgz", "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==", + "peer": true, "dependencies": { "@babel/code-frame": "^7.29.0", "@babel/generator": "^7.29.0", @@ -1364,6 +1365,7 @@ "version": "7.28.6", "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.6.tgz", "integrity": "sha512-05WQkdpL9COIMz4LjTxGpPNCdlpyimKppYNoJ5Di5EUObifl8t4tuLuUBBZEpoLYOmfvIWrsp9fCl0HoPRVTdA==", + "peer": true, "engines": { "node": ">=6.9.0" } @@ -2627,6 +2629,7 @@ "resolved": "https://registry.npmjs.org/@react-navigation/native/-/native-7.2.2.tgz", "integrity": "sha512-kem1Ko2BcbAjmbQIv66dNmr6EtfDut3QU0qjsVhMnLLhktwyXb6FzZYp8gTrUb6AvkAbaJoi+BF5Pl55pAUa5w==", "license": "MIT", + "peer": true, "dependencies": { "@react-navigation/core": "^7.17.2", "escape-string-regexp": "^4.0.0", @@ -2867,6 +2870,7 @@ "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.57.0.tgz", "integrity": "sha512-XZzOmihLIr8AD1b9hL9ccNMzEMWt/dE2u7NyTY9jJG6YNiNthaD5XtUHVF2uCXZ15ng+z2hT3MVuxnUYhq6k1g==", "dev": true, + "peer": true, "dependencies": { "@typescript-eslint/scope-manager": "8.57.0", "@typescript-eslint/types": "8.57.0", @@ -3415,6 +3419,7 @@ "version": "8.16.0", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz", "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==", + "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -4043,6 +4048,7 @@ "url": "https://github.com/sponsors/ai" } ], + "peer": true, "dependencies": { "baseline-browser-mapping": "^2.9.0", "caniuse-lite": "^1.0.30001759", @@ -4927,6 +4933,7 @@ "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.39.4.tgz", "integrity": "sha512-XoMjdBOwe/esVgEvLmNsD3IRHkm7fbKIUGvrleloJXUZgDHig2IPWNniv+GwjyJXzuNqVjlr5+4yVUZjycJwfQ==", "dev": true, + "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.8.0", "@eslint-community/regexpp": "^4.12.1", @@ -5114,6 +5121,7 @@ "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.32.0.tgz", "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==", "dev": true, + "peer": true, "dependencies": { "@rtsao/scc": "^1.1.0", "array-includes": "^3.1.9", @@ -5337,6 +5345,7 @@ "version": "54.0.33", "resolved": "https://registry.npmjs.org/expo/-/expo-54.0.33.tgz", "integrity": "sha512-3yOEfAKqo+gqHcV8vKcnq0uA5zxlohnhA3fu4G43likN8ct5ZZ3LjAh9wDdKteEkoad3tFPvwxmXW711S5OHUw==", + "peer": true, "dependencies": { "@babel/runtime": "^7.20.0", "@expo/cli": "54.0.23", @@ -5424,6 +5433,7 @@ "version": "14.0.11", "resolved": "https://registry.npmjs.org/expo-font/-/expo-font-14.0.11.tgz", "integrity": "sha512-ga0q61ny4s/kr4k8JX9hVH69exVSIfcIc19+qZ7gt71Mqtm7xy2c6kwsPTCyhBW2Ro5yXTT8EaZOpuRi35rHbg==", + "peer": true, "dependencies": { "fontfaceobserver": "^2.1.0" }, @@ -8941,6 +8951,7 @@ "version": "19.1.0", "resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz", "integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==", + "peer": true, "engines": { "node": ">=0.10.0" } @@ -8958,6 +8969,7 @@ "version": "19.1.0", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz", "integrity": "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==", + "peer": true, "dependencies": { "scheduler": "^0.26.0" }, @@ -8986,6 +8998,7 @@ "version": "0.81.5", "resolved": "https://registry.npmjs.org/react-native/-/react-native-0.81.5.tgz", "integrity": "sha512-1w+/oSjEXZjMqsIvmkCRsOc8UBYv163bTWKTI8+1mxztvQPhCRYGTvZ/PL1w16xXHneIj/SLGfxWg2GWN2uexw==", + "peer": true, "dependencies": { "@jest/create-cache-key-function": "^29.7.0", "@react-native/assets-registry": "0.81.5", @@ -9113,6 +9126,7 @@ "version": "5.6.2", "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-5.6.2.tgz", "integrity": "sha512-4XGqMNj5qjUTYywJqpdWZ9IG8jgkS3h06sfVjfw5yZQZfWnRFXczi0GnYyFyCc2EBps/qFmoCH8fez//WumdVg==", + "peer": true, "peerDependencies": { "react": "*", "react-native": "*" @@ -9122,6 +9136,7 @@ "version": "4.16.0", "resolved": "https://registry.npmjs.org/react-native-screens/-/react-native-screens-4.16.0.tgz", "integrity": "sha512-yIAyh7F/9uWkOzCi1/2FqvNvK6Wb9Y1+Kzn16SuGfN9YFJDTbwlzGRvePCNTOX0recpLQF3kc2FmvMUhyTCH1Q==", + "peer": true, "dependencies": { "react-freeze": "^1.0.0", "react-native-is-edge-to-edge": "^1.2.1", @@ -9136,6 +9151,7 @@ "version": "0.21.2", "resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.21.2.tgz", "integrity": "sha512-SO2t9/17zM4iEnFvlu2DA9jqNbzNhoUP+AItkoCOyFmDMOhUnBBznBDCYN92fGdfAkfQlWzPoez6+zLxFNsZEg==", + "peer": true, "dependencies": { "@babel/runtime": "^7.18.6", "@react-native/normalize-colors": "^0.74.1", @@ -9165,6 +9181,7 @@ "version": "0.5.1", "resolved": "https://registry.npmjs.org/react-native-worklets/-/react-native-worklets-0.5.1.tgz", "integrity": "sha512-lJG6Uk9YuojjEX/tQrCbcbmpdLCSFxDK1rJlkDhgqkVi1KZzG7cdcBFQRqyNOOzR9Y0CXNuldmtWTGOyM0k0+w==", + "peer": true, "dependencies": { "@babel/plugin-transform-arrow-functions": "^7.0.0-0", "@babel/plugin-transform-class-properties": "^7.0.0-0", @@ -9268,6 +9285,7 @@ "version": "0.14.2", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz", "integrity": "sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==", + "peer": true, "engines": { "node": ">=0.10.0" } @@ -10385,6 +10403,7 @@ "version": "4.0.3", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", + "peer": true, "engines": { "node": ">=12" }, diff --git a/src/components/API/API.js b/src/components/API/API.js index 1275d4a..177eb7e 100644 --- a/src/components/API/API.js +++ b/src/components/API/API.js @@ -1,34 +1,33 @@ -//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!!! +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'); -API.post = (endpoint, data) => callFetch(endpoint, 'POST', data); -API.put = (endpoint, data) => callFetch(endpoint, 'PUT', data); -API.delete = (endpoint) => callFetch(endpoint, 'DELETE'); +API.get = (endpoint) => callFetch(endpoint, "GET"); +API.post = (endpoint, data) => callFetch(endpoint, "POST", data); +API.put = (endpoint, data) => callFetch(endpoint, "PUT", data); +API.delete = (endpoint) => callFetch(endpoint, "DELETE"); export default API; const callFetch = async (endpoint, method, dataObj = null) => { - // Build request object - let requestObj = {method: method}; // GET, POST, PUT or DELETE - if (dataObj) - requestObj = { - ...requestObj, - headers: {'Content-type': 'application/json'}, - body: JSON.stringify(dataObj), - }; + // Build request object + let requestObj = { method: method }; // GET, POST, PUT or DELETE + if (dataObj) + requestObj = { + ...requestObj, + headers: { "Content-type": "application/json" }, + body: JSON.stringify(dataObj), + }; - // Call the fetch and process the return - try { - let result = null; - const response = await fetch(endpoint, requestObj); - if (response.status !== 204) result = await response.json(); - return response.status >= 200 && response.status < 300 - ? {isSuccess: true, result} - : {isSuccess: false, message: `${result.message}`}; - } catch (error) { - return {isSuccess: false, message: error.message}; - } + // Call the fetch and process the return + try { + let result = null; + const response = await fetch(endpoint, requestObj); + if (response.status !== 204) result = await response.json(); + return response.status >= 200 && response.status < 300 + ? { isSuccess: true, result } + : { isSuccess: false, message: `${result.message}` }; + } catch (error) { + return { isSuccess: false, message: error.message }; + } }; - diff --git a/src/components/layout/BottomNavbar.js b/src/components/layout/BottomNavbar.js index c736d72..3a7ab1a 100644 --- a/src/components/layout/BottomNavbar.js +++ b/src/components/layout/BottomNavbar.js @@ -1,14 +1,80 @@ -import {Alert, Pressable, StyleSheet, Text, View} from 'react-native'; -import {useSafeAreaInsets} from 'react-native-safe-area-context'; -import {clearGameSession, getSession} from '../../hooks/SessionStore'; -import API, {API_BASE_URL} from '../API/API'; +import { Alert, Pressable, StyleSheet, Text, View } from "react-native"; +import { useSafeAreaInsets } from "react-native-safe-area-context"; +import { clearGameSession, getSession } from "../../hooks/SessionStore"; +import API, { API_BASE_URL } from "../API/API"; +const BottomNavbar = ({ navigation, routeName }) => { + // Initialisation ------------ const BottomNavbar = ({navigation, routeName, routeParams}) => { // Initialisation ------------ - const insets = useSafeAreaInsets(); - const session = getSession(); + const insets = useSafeAreaInsets(); + const session = getSession(); + const adminTabs = [ + { + 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"), + }, + { + label: "Games", + route: "GameSelectionScreen", + onPress: () => navigation.navigate("GameSelectionScreen"), + }, + { + label: "Global", + route: "GlobalEventsScreen", + onPress: () => navigation.navigate("GlobalEventsScreen"), + }, + ]; + + const playerTabs = [ + { + 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: "Games", + route: "GameSelectionScreen", + onPress: () => navigation.navigate("GameSelectionScreen"), + }, + { + label: "Global", + route: "GlobalEventsScreen", + onPress: () => navigation.navigate("GlobalEventsScreen"), + }, + + { label: "Leave", route: "__leave__", onPress: () => handleLeaveGame() }, + ]; + + const tabs = session.isAcceptedAdmin ? adminTabs : playerTabs; const selectedDepartment = routeName === 'DepartmentSettingsScreen' && routeParams?.SGid ? {SGid: routeParams.SGid, SubGroupName: routeParams.SubGroupName || routeParams.selectedDepartmentName || 'Department'} : null; @@ -52,9 +118,30 @@ const BottomNavbar = ({navigation, routeName, routeParams}) => { ]; const visibleTabs = (session.isPendingAdmin && !session.isAcceptedAdmin) ? pendingTabs : tabs; -// State ---------------------- -// Handlers ------------------- + // 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" }] }); + }, + }, + ]); + }; const handleLeaveGame = () => { Alert.alert('Leave Game', 'Are you sure you want to leave this game?', [ {text: 'Cancel', style: 'cancel'}, @@ -75,8 +162,76 @@ const BottomNavbar = ({navigation, routeName, routeParams}) => { ]); }; -// View ----------------------- + // View ----------------------- + return ( + + {tabs.map((tab) => { + const isActive = routeName === tab.route; + const isLeave = tab.route === "__leave__"; + return ( + + + {tab.label} + + + ); + })} + + ); +}; + +const styles = StyleSheet.create({ + container: { + minHeight: 64, + borderTopWidth: 1, + borderTopColor: "#555555", + backgroundColor: "#4a4a4a", + flexDirection: "row", + alignItems: "center", + justifyContent: "space-around", + paddingHorizontal: 8, + }, + tab: { + flex: 1, + alignItems: "center", + justifyContent: "center", + paddingVertical: 12, + borderRadius: 8, + marginHorizontal: 4, + }, + tabActive: { + backgroundColor: "#5c5c5c", + }, + tabLeave: { + backgroundColor: "rgba(220,38,38,0.15)", + }, + tabText: { + color: "#d1d5db", + fontSize: 12, + fontWeight: "600", + textAlign: "center", + }, + tabTextActive: { + color: "#ffffff", + }, + tabTextLeave: { + color: "#fca5a5", + }, return ( {visibleTabs.map((tab) => { diff --git a/src/components/layout/Screen.js b/src/components/layout/Screen.js index 988a25a..8311165 100644 --- a/src/components/layout/Screen.js +++ b/src/components/layout/Screen.js @@ -1,7 +1,7 @@ -import {StatusBar} from "expo-status-bar"; -import {StyleSheet, View} from "react-native"; -import {useNavigation, useRoute} from "@react-navigation/native"; -import {useSafeAreaInsets} from "react-native-safe-area-context"; +import { StatusBar } from "expo-status-bar"; +import { StyleSheet, View } from "react-native"; +import { useNavigation, useRoute } from "@react-navigation/native"; +import { useSafeAreaInsets } from "react-native-safe-area-context"; import TopNavbar from "./TopNavbar"; import BottomNavbar from "./BottomNavbar"; @@ -17,24 +17,47 @@ const Screen = ({ children, style, showBack = false }) => { TeamScreen: "Current Team", MapScreen: "Map", GameSettingsScreen: "Game Settings", + GameSelectionScreen: "Games", DepartmentSettingsScreen: "Department Settings", PlayersScreen: "Players", ExpandedMapScreen: "Map View", + GlobalEventsScreen: "Global Events", + GlobalMapScreen: "Global Map", + GlobalCacheViewScreen: "Cache Details", + GlobalLeaderboardScreen: "Global Leaderboard", }; // State ---------------------- const routeName = route.name; - const isAuthScreen = routeName === "LoginScreen" || routeName === "RegisterScreen"; + const isAuthScreen = + routeName === "LoginScreen" || routeName === "RegisterScreen"; const pageTitle = titleMap[routeName] || "Treasure Hunt"; // Handlers ------------------- // View ----------------------- return ( - - {!isAuthScreen && } + + {!isAuthScreen && ( + + )} {children} + {!isAuthScreen && ( + + )} {!isAuthScreen && } @@ -55,4 +78,3 @@ const styles = StyleSheet.create({ }); export default Screen; - diff --git a/src/components/screens/GameSelectionScreen.js b/src/components/screens/GameSelectionScreen.js new file mode 100644 index 0000000..969d70a --- /dev/null +++ b/src/components/screens/GameSelectionScreen.js @@ -0,0 +1,184 @@ +import { ScrollView, StyleSheet, Text, View } from "react-native"; +import Screen from "../layout/Screen"; +import Card from "../UI/Card"; +import { Button, ButtonTray } from "../UI/Button"; +import { getSession } from "../../hooks/SessionStore"; + +const GameSelectionScreen = ({ navigation }) => { + // Initialisations --------------------- + + const session = getSession(); + const isAdmin = Boolean(session.isAcceptedAdmin); + + const privateGames = [ + { + id: "active-game", + name: "Private Game", + players: "4 players", + endsIn: "Ends in 2h 15m", + }, + ]; + + // State ------------------------------- + // Handlers ---------------------------- + + const handleCreateGame = () => { + if (isAdmin) { + navigation.navigate("GameSettingsScreen"); + return; + } + navigation.navigate("TeamScreen"); + }; + + const handleOpenGame = () => { + navigation.navigate("TeamScreen"); + }; + + const handleExplore = () => { + navigation.navigate("GlobalEventsScreen"); + }; + + // View -------------------------------- + + return ( + + + + Your Games + +