1 files changed, 90 insertions, 0 deletions
diff --git a/src/Components/MapObjects.tsx b/src/Components/MapObjects.tsx
new file mode 100644
index 0000000..1d2fb12
--- /dev/null
+++ b/src/Components/MapObjects.tsx
@@ -0,0 +1,90 @@
+import React, { ReactChild } from 'react';
+import { View, StyleSheet, Text } from 'react-native';
+import { Polyline, Polygon, Marker, Region } from 'react-native-maps';
+import Icon from 'react-native-vector-icons/FontAwesome';
+import { Link, Portal, Field } from '../Api/types';
+import { connect } from 'react-redux';
+import { COLORS, COLORS_LVL } from '../colors';
+
+const fillPortalColor = { "R": "rgba(2, 140, 227, 0.5)", "E": "rgba(38, 205, 30, 0.5)", "N": "rgba(139, 0, 255, 0.5)" }
+// const fillPortalColor = { "R": COLORS[1], "E": COLORS[2], "N": COLORS[0] }
+const fractColor = { "R": "#028ce3", "E": "#26cd1e", "N": "#8b00ff" }
+// const fractColor = { "R": COLORS[1], "E": COLORS[2], "N": COLORS[0] }
+const fieldColor = { "R": "rgba(2, 140, 227, 0.1)", "E": "rgba(38, 205, 30, 0.1)", "N": "rgba(139, 0, 255, 0.1)" }
+
+type Props = {
+    portals: { [guid: string]: Portal }
+    links: { [guid: string]: Link }
+    fields: { [guid: string]: Field }
+    onPortalClick: Function
+    zoom: number
+}
+
+const MapObjects = (props: Props) => {
+    const renderPortal = Object.keys(props.portals).map(guid => drawPortal(guid, props.portals[guid], props.zoom, props.onPortalClick))
+    const renderField = Object.keys(props.fields).map(guid => drawField(guid, props.fields[guid]))
+    const renderLink = Object.keys(props.links).map(guid => drawLink(guid, props.links[guid]))
+
+    if (props.zoom <= 14) {
+        return [...renderField, ...renderLink]
+    } else {
+        return [...renderField, ...renderLink, ...renderPortal]
+    }
+}
+const drawPortal = (guid: string, entity: Portal, zoom: number, onPortalClick: Function) => {
+    const size = (zoom) * 1.5
+    return (<Marker
+        key={guid}
+        coordinate={entity.coords}
+        onPress={() => onPortalClick(guid, entity.coords)}
+    >
+        {/* <Icon name={entity.fraction == "N" ? "circle-o" : "circle"} color={fillPortalColor[entity.fraction]} size={size} /> */}
+        <View style={{
+            borderWidth: 2,
+            height: size,
+            width: size,
+            borderRadius: size / 2,
+            borderColor: COLORS_LVL[entity.level],
+            backgroundColor: fillPortalColor[entity.fraction],
+            justifyContent: 'center',
+            alignItems: 'center',
+        }}>
+            <Text style={{ fontWeight: 'bold' }}>{entity.level}</Text>
+        </View>
+    </Marker>);
+}
+const drawField = (guid: string, entity: Field) => {
+    return <Polygon
+        key={guid}
+        coordinates={entity.coords}
+        fillColor={fieldColor[entity.fraction]}
+        strokeColor={fieldColor[entity.fraction]}
+        strokeWidth={StyleSheet.hairlineWidth}
+    />
+}
+const drawLink = (guid: string, entity: Link) => {
+    return <Polyline
+        key={guid}
+        coordinates={entity.coords}
+        strokeColor={fractColor[entity.fraction]}
+        strokeWidth={1}
+    />
+}
+
+
+const styles = StyleSheet.create({
+
+});
+
+export default connect((store) => {
+    const display = store.entities.display
+    const portals = {}
+    const fields = {}
+    const links = {}
+    display.portals.forEach(guid => { portals[guid] = store.entities.portals[guid] })
+    display.fields.forEach(guid => { fields[guid] = store.entities.fields[guid] })
+    display.links.forEach(guid => { links[guid] = store.entities.links[guid] })
+    return {
+        portals, fields, links
+    }
+}, {})(MapObjects)
+\ No newline at end of file