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...,