change navBar heading font case, add fallback url to owner button, add initial node filter, fix chat message timestamp

frontend/src/components/ChatMessage.tsx

@@ -20,7 +20,10 @@ export default function ChatMessage({message}: Props) {
     return <StyledMessage isuser={`${isUser}`} isadmin={`${isAdmin}`}>
         <StyledUsername color={usernameColor(isUser, isAdmin)}>{message.username}</StyledUsername>
         <p>{message.message}</p>
-        <StyledTimestamp>{new Date(message.timestamp).toLocaleTimeString("en-US")}</StyledTimestamp>
+        <StyledTimestamp>{new Date(message.timestamp * 1000).toLocaleTimeString("en-US", {
+            hour: "2-digit",
+            minute: "2-digit",
+        })}</StyledTimestamp>
     </StyledMessage>
 }
 

frontend/src/components/MapView.tsx

@@ -31,6 +31,7 @@ export default function MapView({player}: Props) {
     const gps = useStore(state => state.gps)
     const nodes = useStore(state => state.nodes)
     const isScanning = useStore(state => state.isScanning)
+    const initialNodeFilter = useStore(state => state.initialNodeFilter)
 
     const range = 0.05;
 
@@ -39,8 +40,14 @@ export default function MapView({player}: Props) {
 
     // reload markers when scanning is done
     useEffect(() => {
-        setMarkers(nodes)
-    }, [nodes]);
+        if (player && nodes) {
+            const initialFilteredNodes = initialNodeFilter({
+                latitude: player.coordinates.latitude,
+                longitude: player.coordinates.longitude
+            }, nodes);
+            setMarkers(initialFilteredNodes)
+        }
+    }, [initialNodeFilter, nodes, player]);
 
     function getBounds(player: Player) {
         return L.latLngBounds(L.latLng(player.coordinates.latitude - range, player.coordinates.longitude - range),

frontend/src/components/NavBar.tsx

@@ -39,7 +39,7 @@ export default function NavBar({user}: Props) {
         } else if(page === "chat") {
             return "Chat"
         } else {
-            return subPage.charAt(0).toUpperCase() + subPage.slice(1)
+            return subPage.charAt(0) + subPage.slice(1)
         }
     }
     function handleOpenUserMenu(event: React.MouseEvent<HTMLElement>) {

frontend/src/components/NodeItem.tsx

@@ -151,7 +151,7 @@ export default function NodeItem({node, player, distance, type}: Props) {
                 <StyledOwnerArea>
                     <StyledOwnerButton
                         isplayerowned={`${isPlayerOwned}`}
-                        onClick={() => !ownerButtonDisabled && handleNavigate(`/player/${owner}`)}
+                        onClick={() => !ownerButtonDisabled && handleNavigate(owner !== "" && owner !== null ? `/player/${owner}` : "/map")}
                     >{owner !== "" ? owner : <UnlockIcon/>}</StyledOwnerButton>
                 </StyledOwnerArea>
                 <StyledDistanceInfo
@@ -197,7 +197,7 @@ export default function NodeItem({node, player, distance, type}: Props) {
                     <StyledPopupOwnerArea>
                         <StyledPopupOwnerButton
                             isplayerowned={`${isPlayerOwned}`}
-                            onClick={() => !ownerButtonDisabled && handleNavigate(`/player/${owner}`)}
+                            onClick={() => !ownerButtonDisabled && handleNavigate(owner !== "" && owner !== null ? `/player/${owner}` : "/map")}
                         >{owner !== "" ? owner : <UnlockIcon/>}</StyledPopupOwnerButton>
                     </StyledPopupOwnerArea>
                     <StyledPopupDistanceInfo

frontend/src/components/NodeList.tsx

@@ -19,17 +19,19 @@ export default function NodeList({ player, nodes }: Props) {
     const ownerNodesFilter = useStore(state => state.ownerNodesFilter);
     const filterNodesByOwner = useStore(state => state.filterNodesByOwner);
     const rangeFilter = useStore(state => state.rangeFilter);
+    const initialNodeFilter = useStore(state => state.initialNodeFilter);
     const filterNodesByRange = useStore(state => state.filterNodesByRange);
 
     useEffect(() => {
         if (user !== "" && user !== "anonymousUser") {
             if (nodes && player) {
-                const filteredNodesbyOwner = filterNodesByOwner(player.id, nodes);
-                const filteredNodesByRange = filterNodesByRange({latitude: player.coordinates.latitude, longitude: player.coordinates.longitude}, filteredNodesbyOwner);
+                const initialFilteredNodes = initialNodeFilter({latitude: player.coordinates.latitude, longitude: player.coordinates.longitude}, nodes);
+                const filteredNodesbyOwner = filterNodesByOwner(player.id, initialFilteredNodes);
+                const filteredNodesByRange = filterNodesByRange({latitude: player.coordinates.latitude, longitude: player.coordinates.longitude}, filteredNodesbyOwner, 250);
                 setSortedNodes(sortNodesByDistance({latitude: player.coordinates.latitude, longitude: player.coordinates.longitude}, filteredNodesByRange));
             }
         }
-    }, [getNodes, nodes, player, user, sortDirection, ownerNodesFilter, rangeFilter]);
+    }, [getNodes, nodes, player, user, sortDirection, ownerNodesFilter, rangeFilter, initialNodeFilter, filterNodesByOwner, filterNodesByRange, sortNodesByDistance]);
 
     if (player) {
         return (

frontend/src/hooks/useStore.ts

@@ -31,7 +31,8 @@ type State = {
     filterNodesByOwner: (ownerId: string, nodes: Node[]) => Node[]
     rangeFilter: boolean
     toggleRangeFilter: () => void
-    filterNodesByRange: (position: { latitude: number, longitude: number }, nodes: Node[]) => Node[]
+    initialNodeFilter: (position: { latitude: number, longitude: number }, nodes: Node[]) => Node[]
+    filterNodesByRange: (position: { latitude: number, longitude: number }, nodes: Node[], range: number) => Node[]
     volume: number
     setVolume: (volume: number) => void
     enemies: Player[]
@@ -264,15 +265,25 @@ export const useStore = create<State>(set => ({
         set((state) => ({rangeFilter: !state.rangeFilter}));
     },
 
-    filterNodesByRange: (position: { latitude: number, longitude: number }, nodes: Node[]) => {
+    initialNodeFilter: (position: { latitude: number, longitude: number }, nodes: Node[]) => {
+            return nodes.filter((node) => {
+                const distance = getDistanceBetweenCoordinates(position, {
+                    latitude: node.coordinates.latitude,
+                    longitude: node.coordinates.longitude
+                });
+                return distance <= 25000;
+            });
+    },
+
+    filterNodesByRange: (position: { latitude: number, longitude: number }, nodes: Node[], range: number) => {
         const filter = useStore.getState().rangeFilter;
         if (filter) {
             return nodes.filter((node) => {
                 const distance = getDistanceBetweenCoordinates(position, {
                     latitude: node.coordinates.latitude,
                     longitude: node.coordinates.longitude
                 });
-                return distance <= 50;
+                return distance <= range;
             });
         } else {
             return nodes.slice();