Develop

App.tsx

@@ -4,9 +4,13 @@ import MapScreen from './screens/MapScreen';
 import { NavigationContainer } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
 import { FormProvider } from './context/FormContext';
+import { MarkerProvider } from './context/MarkerContext';
+import { RegionProvider } from './context/RegionContext';
+import BboxCreateScreen from './screens/BboxCreateScreen';
 
 export type RootStackParamList = {
   Home: undefined,
+  Bbox: undefined,
   Map: undefined
 }
 
@@ -16,10 +20,15 @@ export default function App() {
   return (
     <NavigationContainer>
       <FormProvider>
-        <Stack.Navigator initialRouteName='Home'>
-          <Stack.Screen name='Home' component={HomeScreen}/>
-          <Stack.Screen name='Map' component={MapScreen}/>
-        </Stack.Navigator>
+        <MarkerProvider>
+          <RegionProvider>
+            <Stack.Navigator initialRouteName='Home'>
+              <Stack.Screen name='Home' component={HomeScreen}/>
+              <Stack.Screen options={{headerShown: false}} name='Bbox' component={BboxCreateScreen}/>
+              <Stack.Screen options={{headerShown: false}} name='Map' component={MapScreen}/>
+            </Stack.Navigator>
+          </RegionProvider>
+        </MarkerProvider>
       </FormProvider>
     </NavigationContainer>
   );

components/Instructions.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+
+type InstructionsProps = {
+    coordsLen: number
+}
+
+export default function Instructions({ coordsLen }: InstructionsProps) {
+    let instructions =  coordsLen < 1 ? 'Click on the map to start drawing a game Boundary' :
+                        coordsLen < 2 ? 'Now keep clicking to create a box' : 'When finished, press the button at the bottom of the screen'
+    return (
+        <View style={styles.container}>
+            <Text style={styles.text}>{instructions}</Text>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        position: 'absolute',
+        top: 35,
+        left: 0,
+        width: '100%'
+    },
+    text: {
+        fontSize: 30,
+        textAlign: 'center',
+        color: '#fff'
+    }
+})

components/MarkerList.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Marker, LatLng } from 'react-native-maps';
+import { Text } from 'react-native';
+import { Marker } from 'react-native-maps';
 import Svg, { Path } from 'react-native-svg';
 import { Feature, Point } from '@turf/turf';
 

components/PointsTally.tsx

@@ -1,19 +1,19 @@
 import React from 'react';
 import { View, Text, StyleSheet } from 'react-native';
 import { Card } from 'react-native-material-ui';
+import { useMarkerContext } from '../context/MarkerContext';
 
-type PointsTallyProps = {
-    markerListLen: number,
-    initialLen: number
-}
+export default function PointsTally() {
+
+    const [markerState] = useMarkerContext();
 
-export default function PointsTally({ markerListLen, initialLen }) {
+    const { markerListlen, numHit } = markerState;
     return (
         <View style={styles.container}>
             <Card >
                 <View>
-                    <Text style={styles.text}>Points: {(initialLen - markerListLen) * 10}</Text>
-                    <Text style={styles.text}>Markers: {markerListLen}</Text>
+                    <Text style={styles.text}>Points: {numHit * 10}</Text>
+                    <Text style={styles.text}>Markers: {markerListlen}</Text>
                 </View>
             </Card>
         </View>

components/PolyBoundary.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Polygon, MapEvent, LatLng, Point, Polyline, Circle,  } from 'react-native-maps';
+
+// hook to emit polygon / editing state
+export const usePolygonCreator: () => [LatLng[], (e: any) => void] = () => {
+
+    const [coords, setCoords] = React.useState<LatLng[]>([]);
+
+    const addToPolygon: (e: any) => void = e => {
+        e.persist();
+        setCoords(prevState => [...prevState, e.nativeEvent.coordinate])
+    }
+
+    return [coords, addToPolygon]
+}
+
+// PolyBoundary Component
+type PolyProps = {
+    coords: LatLng[],
+}
+
+export function PolyBoundary({ coords }: PolyProps) {
+
+    return (
+        <>
+            {coords.length < 2 && <Circle center={coords[0]} radius={5} strokeWidth={5} strokeColor='green'/>}
+            {coords.length < 3 && <Polyline coordinates={coords} strokeWidth={5} strokeColor='green'/>}
+            <Polygon
+                coordinates={coords}
+                strokeColor='green'
+                strokeWidth={5}
+            />
+        </>
+    );
+}

components/PolyButton.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import {LatLng} from 'react-native-maps';
+
+type ButtonProps = {
+    coordsLen: number,
+    setBoundary: React.Dispatch<React.SetStateAction<LatLng[]>>
+}
+
+export default function PolyButton({ coordsLen, coords, setBoundary }) {
+
+    const handlePress: () => void = () => {
+        if (coordsLen < 3) return;
+        setBoundary(coords);
+    }
+
+    return (
+        <TouchableOpacity onPress={handlePress} style={styles.button}>
+            <Text style={styles.text}>Set Boundary</Text>
+        </TouchableOpacity>
+    );
+}
+
+const styles = StyleSheet.create({
+    button: {
+        position: 'absolute',
+        backgroundColor: '#fff',
+        bottom: 50,
+        left: '50%',
+        marginLeft: -50,
+        padding: 10,
+        borderRadius: 5,
+        shadowColor: '#000',
+        shadowOpacity: 0.6,
+        shadowRadius: 3,
+        shadowOffset: {
+            width: 2,
+            height: 2
+        },
+        zIndex: 500
+    },
+    text: {
+        fontSize: 15,
+        textAlign: 'center'
+    }
+})

components/StartModal.tsx

@@ -29,7 +29,7 @@ const styles = StyleSheet.create({
         width: '100%'
     },
     wrapper: {
-        backgroundColor: 'rgba(0, 0, 0, 0.2)',
+        backgroundColor: 'rgba(255, 255, 255, 0.4)',
         height: '70%',
         width: '70%',
         borderRadius: 10,

context/MarkerContext.tsx

@@ -0,0 +1,57 @@
+import React, { createContext, useContext, useReducer } from 'react';
+import { Feature, Point } from '@turf/turf';
+
+type ProviderProps = {
+    children: any
+}
+
+type MarkerState = {
+    markers: Feature<Point>[],
+    markerListlen: number,
+    numHit: number
+}
+
+type MarkerActions =
+    | { type: 'SET_LIST', payload: Feature<Point>[] }
+    | { type: 'DELETE_MARKER', payload: Feature<Point> }
+    | { type: 'RESET_STATE' }
+
+const initialState = {
+    markers: [],
+    markerListlen: 0,
+    numHit: 0
+}
+
+const reducer = (state: MarkerState, action: MarkerActions) => {
+    switch (action.type) {
+        case 'SET_LIST':
+            return { markers: action.payload, markerListlen: action.payload.length, numHit: 0 };
+        case 'DELETE_MARKER':
+            let updatedMarkers = state.markers.filter(marker => marker.id !== action.payload.id);
+            let updatedNum = state.numHit + 1;
+            return { ...state, markers: updatedMarkers, numHit: updatedNum };
+        case 'RESET_STATE':
+            return initialState;
+        default:
+            return state;
+    }
+}
+
+export const MarkerContext = createContext(null);
+
+export const MarkerProvider = ({ children }: ProviderProps) => {
+
+    const [markerState, markerDispatch] = useReducer(reducer, initialState);
+
+    React.useEffect(() => {
+        console.log('marker state:', markerState)
+    }, [markerState]);
+
+    return (
+        <MarkerContext.Provider value={[markerState, markerDispatch]}>
+            {children}
+        </MarkerContext.Provider>
+    );
+}
+
+export const useMarkerContext: () => [MarkerState, React.Dispatch<MarkerActions>] = () => useContext(MarkerContext);

context/RegionContext.tsx

@@ -0,0 +1,14 @@
+import React, {createContext, useContext, useState} from 'react';
+import { Region } from 'react-native-maps';
+
+export const RegionContext = createContext(null);
+
+export function RegionProvider({ children }) {
+    return (
+        <RegionContext.Provider value={useState<Region>(null)}>
+            {children}
+        </RegionContext.Provider>
+    );
+}
+
+export const useRegionContext: () => [Region, React.Dispatch<React.SetStateAction<Region>>] = () => useContext(RegionContext);

package.json

@@ -15,6 +15,7 @@
     "@types/react-native-material-ui": "^1.32.0",
     "expo": "~36.0.0",
     "expo-location": "~8.0.0",
+    "random-points-on-polygon": "^0.0.4",
     "react": "~16.9.0",
     "react-dom": "~16.9.0",
     "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",

screens/BboxCreateScreen.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import { StyleSheet, View, Dimensions } from 'react-native';
+import { RootStackParamList } from '../App';
+import { StackNavigationProp } from '@react-navigation/stack';
+import { LocationData, Accuracy } from 'expo-location';
+// utilties
+import { useFormContext } from '../context/FormContext';
+import { useMarkerContext } from '../context/MarkerContext';
+import { initMarkerList, initSnappedMarkerList } from '../utils/markers';
+//comonents
+import { usePolygonCreator, PolyBoundary } from '../components/PolyBoundary';
+import PolyButton from '../components/PolyButton';
+import MapView, { Region, LatLng } from 'react-native-maps';
+import Instructions from '../components/Instructions';
+import { StackActions } from '@react-navigation/native';
+import { useRegionContext } from '../context/RegionContext';
+
+type ProfileScreenNavigationProp = StackNavigationProp<
+    RootStackParamList,
+    'Bbox'
+>;
+
+type BboxCreateProps = {
+    navigation: ProfileScreenNavigationProp
+}
+
+export default function BboxCreateScreen({ navigation }: BboxCreateProps) {
+
+    const initialRegion = {
+        latitude: 39.8333333,
+        longitude: -98.585522,
+        latitudeDelta: 50,
+        longitudeDelta: 50
+    }
+
+    const [boundary, setBoundary] = React.useState<LatLng[]>([]);
+    const [formState] = useFormContext();
+    const [coords, addToPolygon] = usePolygonCreator();
+    const [markerState, markerDispatch] = useMarkerContext();
+    const [isFollowingUser, setFollowing] = React.useState<boolean>(true);
+    const [finalRegion, setRegion] = useRegionContext();
+
+    React.useEffect(() => {
+        if (boundary.length) {
+            // init markers
+            if (formState.activity === 'on-road') {
+                initSnappedMarkerList(boundary, 10)
+                    .then(list => {
+                        markerDispatch({type: 'SET_LIST', payload: list})
+                    })
+                    .catch(e => {
+                        console.log(e);
+                    })
+            } else {
+                let list = initMarkerList(boundary, 10);
+                console.log('list is', list)
+                markerDispatch({type: 'SET_LIST', payload: list})
+            }
+        }
+    }, [boundary])
+
+    React.useEffect(() => {
+        if (markerState.markers.length) {
+            navigation.navigate('Map');
+        }
+    }, [markerState.markers])
+
+
+    return (
+        <View style={styles.container}>
+            <MapView
+                style={styles.mapStyle}
+                mapType='hybrid'
+                initialRegion={initialRegion}
+                onPress={addToPolygon}
+                onPanDrag={() => setFollowing(false)}
+                onRegionChange={e => {setRegion(e)}}
+                showsUserLocation
+                followsUserLocation={isFollowingUser}
+                onUserLocationChange={e => console.log(e.nativeEvent)}
+            >
+                <PolyBoundary coords={coords}/>
+            </MapView>
+            <Instructions coordsLen={coords.length}/>
+            <PolyButton coordsLen={coords.length} coords={coords} setBoundary={setBoundary}/>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#fff',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    mapStyle: {
+        width: Dimensions.get('window').width,
+        height: Dimensions.get('window').height,
+    },
+});

screens/HomeScreen.tsx

@@ -26,7 +26,7 @@ export default function HomeScreen({ navigation }: HomeScreenProps) {
 
         if (!formState.activity || !formState.distance) return;
 
-        navigation.navigate('Map');
+        navigation.navigate('Bbox');
 
     }