diff --git a/App.js b/App.js index 2b4ae5c..939a95f 100644 --- a/App.js +++ b/App.js @@ -15,7 +15,7 @@ import { import RunInfo from './components/run-info'; import RunInfoNumeric from './components/run-info-num'; - +import {updateAreas} from './update-map' import MapView from 'react-native-maps'; import WalkButton from "./components/new-button"; import JoinButton from "./components/join-button"; @@ -35,10 +35,8 @@ export default class App extends Component { super(props); setInterval(() => { - // this.distanceInfo.setState({value: Math.random() * 100}); - // this.speedInfo.setState({value: Math.random() * 15}); - // this.directionInfo.setState({value: this.directionInfo.state === 'N' ? 'NW' : 'N'}); - }, 1000); + this.updateCaptures(); + }, 5000); let watchID = navigator.geolocation.watchPosition((position) => { this.setState({ @@ -49,19 +47,20 @@ export default class App extends Component { } ] }); - }, null, {enableHighAccuracy: true, timeout: 20000, distanceFilter: 10}); + }, null, {enableHighAccuracy: true, timeout: 20000, distanceFilter: 15}); this.state = { + activeWalk: false, username: "", gameNumber: "", walkMarkers: [], captures: [ - new CapturedArea("fanded", [ - {latitude: -43.5623, longitude:172.5655}, - {latitude: -43.5623, longitude:172.5650}, - {latitude: -43.5628, longitude:172.5650}, - {latitude: -43.5628, longitude:172.5655} - ], 'rgba(255,0,255, 1)', 'rgba(255,0,255, 0.2)', 53), + // new CapturedArea("fanded", [ + // {latitude: -43.5623, longitude:172.5655}, + // {latitude: -43.5623, longitude:172.5650}, + // {latitude: -43.5628, longitude:172.5650}, + // {latitude: -43.5628, longitude:172.5655} + // ], 'rgba(255,0,255, 1)', 'rgba(255,0,255, 0.2)', 53), new CapturedArea("samded", [ {latitude: -43.5663, longitude:172.5615}, @@ -73,9 +72,24 @@ export default class App extends Component { watchID }; } + updateCaptures(){ + updateAreas(this.state.gameNumber, (polygons) => { + this.setState({ + captures: polygons + }) + }) + } setGameNumber(user, number){ this.setState({username: user, gameNumber: number}) } + + startWalk(){ + this.setState({walkMarkers: [], activeWalk: true}) + } + + stopWalk(){ + this.setState({activeWalk: false}) + } componentWillUnmount() { navigator.geolocation.stopWatch(this.state.watchID); @@ -124,7 +138,10 @@ export default class App extends Component { - {this.setState({walkMarkers: []})}}/> + {this.startWalk()}} + stop={() => {this.stopWalk()}} + /> diff --git a/api/config/db.js b/api/config/db.js index e6227b0..7c2e3a7 100644 --- a/api/config/db.js +++ b/api/config/db.js @@ -9,7 +9,7 @@ exports.connect = function(done){ state.pool = mysql.createPool({ host: 'localhost', user: 'root', - password: 'root', + password: '', port: 3306, database: "territory-walker", //multipleStatements: true diff --git a/components/new-button.js b/components/new-button.js index f071a85..35212c4 100644 --- a/components/new-button.js +++ b/components/new-button.js @@ -11,10 +11,16 @@ import { export default class WalkButton extends Component { constructor(props) { super(props); - this.erase = this.props.erase; - this.state = { value: this.props.value}; + this.start = this.props.start; + this.stop = this.props.stop; + this.state = { + value: this.props.value, + activeWalk: false, + buttonText: "Start Capture", + buttonColour: 'rgba(0,255,0,0.5)' + }; } - + formatValue() { return this.state.value; } @@ -23,14 +29,31 @@ export default class WalkButton extends Component { return ( this.erase()} + onPress= {() => { + if (this.state.activeWalk){ + console.log("state true to false") + this.setState({ + activeWalk: false, + buttonText: "Start Capture", + buttonColour: 'rgba(0,255,0,0.5)' + }) + this.start(); + }else{ + console.log("state false to true") + this.setState({ + activeWalk: true, + buttonText: "Stop Capture", + buttonColour: 'rgba(255,0,0,0.5)' + }) + this.stop() + }}} // style={sharedStyles.new} > Start Capture + backgroundColor: this.state.buttonColour, + textAlign: 'center'}}>{this.state.buttonText} diff --git a/config.json b/config.json new file mode 100644 index 0000000..36482e1 --- /dev/null +++ b/config.json @@ -0,0 +1,4 @@ +{ + "host" : "192.168.178.74", + "port" : "8080" +} \ No newline at end of file diff --git a/update-map.js b/update-map.js new file mode 100644 index 0000000..a24f69e --- /dev/null +++ b/update-map.js @@ -0,0 +1,45 @@ +const config = require("./config.json"); +import CapturedArea from "./components/captured-area"; + +export const updateAreas = (gameID, update) => { + getPolygons(gameID).then((responseJson) => { + let polygons = [] + responseJson.map((polygon) => { + let userID = polygon.userID + let strokeColor = "#"+polygon.colour + let fillColor = "#"+polygon.colour + let coordinates = [] + polygon.coords.map((point) => { + coordinates.push({ + "latitude" : point.lat, + "longitude" : point.lng + }) + }); + polygons.push(new CapturedArea(userID, coordinates, strokeColor, hexToRgbA(fillColor,0.2), 1)); + }); + update(polygons); + }) +} + +function getPolygons(gameID) { + console.log("http://"+config.host + ":" + config.port + "/v1/polygons?gameID=" + gameID) + return fetch("http://"+config.host + ":" + config.port + "/v1/polygons?gameID=" + gameID, {method: 'GET', + headers: {'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8'},}) + .then((response) => response.json()) + .catch((error) => { + console.error(error); + }); +} + +function hexToRgbA(hex, a){ + var c; + if(/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)){ + c= hex.substring(1).split(''); + if(c.length== 3){ + c= [c[0], c[0], c[1], c[1], c[2], c[2]]; + } + c= '0x'+c.join(''); + return 'rgba('+[(c>>16)&255, (c>>8)&255, c&255].join(',')+',' + a + ')'; + } + throw new Error('Bad Hex'); +}