Focus replay on player

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,
         })
     }
 

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,

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)

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 && <Message key="message">Loading telemetry...</Message>,
                         <MatchContainer key="match" id="MatchContainer" telemetryLoaded={!!currentTelemetry}>
                             <MapContainer id="MapContainer" isDotHovered={!!this.marks.hoveredPlayer()}>