diff --git a/src/routes/Match/Map/index.js b/src/routes/Match/Map/index.js
index 35b6553..dd9b641 100644
--- a/src/routes/Match/Map/index.js
+++ b/src/routes/Match/Map/index.js
@@ -9,6 +9,8 @@ import CarePackage from './CarePackage.js'
import Tracer from './Tracer.js'
import AliveCount from './AliveCount.js'
import MapButton from '../../../components/MapButton.js'
+import { toScale } from '../../../lib/canvas-math.js'
+
const SCALE_STEP = 1.2
const MIN_SCALE = 1
@@ -50,7 +52,7 @@ const ZoomOutButton = MapButton.extend`
`
class Map extends React.Component {
- state = { mapScale: 1, offsetX: 0, offsetY: 0 }
+ state = { mapScale: 1, offsetX: 0, offsetY: 0, isTracking: false }
static getDerivedStateFromProps(props) {
if (props.options.tools.enabled) {
@@ -63,10 +65,55 @@ class Map extends React.Component {
}
}
+ componentDidMount() {
+ window.addEventListener('keydown', this.onKeydown)
+ }
+
+
+ componentWillUnmount() {
+ window.removeEventListener('keydown', this.onKeydown)
+ }
+
+ onKeydown = e => {
+ if (e.target.tagName.toLowerCase() === 'input') return
+
+ if (e.keyCode === 70) { // "F" key
+ e.preventDefault()
+
+ this.setState(({ isTracking }) => ({
+ isTracking: !isTracking,
+ }))
+
+ console.log('TOGGLED centering')
+ }
+ }
+
+ componentDidUpdate(prevProps) {
+ const { match: { mapName }, msSinceEpoch, telemetry, marks, mapSize } = this.props
+ const { isTracking } = this.state
+
+ if (telemetry) {
+ const pubgMapSize = mapName === 'Savage_Main' ? 408000 : 816000
+ const { x, y } = telemetry.playerLocations[marks.focusedPlayer()]
+ const scaledX = toScale(pubgMapSize, mapSize, x)
+ const scaledY = toScale(pubgMapSize, mapSize, y)
+
+ if (prevProps.msSinceEpoch < msSinceEpoch && isTracking) {
+ this.setState({ // eslint-disable-line
+ offsetX: scaledX,
+ offsetY: scaledY,
+ })
+
+ console.log('centering')
+ }
+ }
+ }
+
handleDragEnd = e => {
this.setState({
offsetX: e.target.x(),
offsetY: e.target.y(),
+ isTracking: false,
})
}
diff --git a/src/routes/Match/Options.js b/src/routes/Match/Options.js
index ead4cca..81f7443 100644
--- a/src/routes/Match/Options.js
+++ b/src/routes/Match/Options.js
@@ -27,7 +27,7 @@ export const DEFAULT_OPTIONS = {
const DEV_OPTIONS = {
tools: {
- enabled: true,
+ enabled: false,
match: {
timestamp: '5:24.6',
autoplay: false,
diff --git a/src/routes/Match/Time/TimeTracker.js b/src/routes/Match/Time/TimeTracker.js
index c97a222..5fb1023 100644
--- a/src/routes/Match/Time/TimeTracker.js
+++ b/src/routes/Match/Time/TimeTracker.js
@@ -141,6 +141,7 @@ class TimeTracker extends React.Component {
setAutoplaySpeed: this.setAutoplaySpeed,
setMsSinceEpoch: this.setMsSinceEpoch,
},
+ isTracking: this.props,
}
return this.props.render(renderProps)
diff --git a/src/routes/Match/index.js b/src/routes/Match/index.js
index cd7be54..84def66 100644
--- a/src/routes/Match/index.js
+++ b/src/routes/Match/index.js
@@ -222,7 +222,7 @@ class Match extends React.Component {
options={options}
durationSeconds={match.durationSeconds + 5}
telemetry={telemetry}
- render={({ msSinceEpoch, timeControls, currentTelemetry }) => [
+ render={({ msSinceEpoch, timeControls, currentTelemetry, isTracking }) => [
!currentTelemetry && Loading telemetry...,