From 31e373e5a0b86ed6096b9e271f7a8358fc21c5eb Mon Sep 17 00:00:00 2001 From: "Erik.Kotsiuba" Date: Wed, 22 Aug 2018 18:01:58 +0300 Subject: [PATCH 1/3] some shittery, explain later --- src/routes/Match/Map/index.js | 16 +++++++++++++++- src/routes/Match/Options.js | 2 +- src/routes/Match/Time/TimeTracker.js | 11 +++++++++++ src/routes/Match/index.js | 2 +- 4 files changed, 28 insertions(+), 3 deletions(-) diff --git a/src/routes/Match/Map/index.js b/src/routes/Match/Map/index.js index 35b6553..0de265e 100644 --- a/src/routes/Match/Map/index.js +++ b/src/routes/Match/Map/index.js @@ -50,7 +50,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 +63,24 @@ class Map extends React.Component { } } + componentDidUpdate(prevProps) { + if (prevProps.msSinceEpoch !== this.props.msSinceEpoch) { + this.setState({ // eslint-disable-line + offsetX: 50, + offsetY: 50, + }) + + console.log('centering') + } + + // console.log(prevProps) + } + 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..4d39b64 100644 --- a/src/routes/Match/Time/TimeTracker.js +++ b/src/routes/Match/Time/TimeTracker.js @@ -52,6 +52,16 @@ class TimeTracker extends React.Component { autoplaySpeed: this.clampAutoplaySpeed(autoplaySpeed + 1), })) } + + if (e.keyCode === 70) { // "F" key + e.preventDefault() + + this.setState(({ isTracking }) => ({ + isTracking: !isTracking, + })) + + console.log('TOGGLED centering') + } } componentDidMount() { @@ -141,6 +151,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..., From 6f0a2087079dc52f3dba81672e26a0b54304b4d0 Mon Sep 17 00:00:00 2001 From: Erik Date: Thu, 23 Aug 2018 01:18:10 +0300 Subject: [PATCH 2/3] moved F-key handler to Map --- src/routes/Match/Time/TimeTracker.js | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/src/routes/Match/Time/TimeTracker.js b/src/routes/Match/Time/TimeTracker.js index 4d39b64..5fb1023 100644 --- a/src/routes/Match/Time/TimeTracker.js +++ b/src/routes/Match/Time/TimeTracker.js @@ -52,16 +52,6 @@ class TimeTracker extends React.Component { autoplaySpeed: this.clampAutoplaySpeed(autoplaySpeed + 1), })) } - - if (e.keyCode === 70) { // "F" key - e.preventDefault() - - this.setState(({ isTracking }) => ({ - isTracking: !isTracking, - })) - - console.log('TOGGLED centering') - } } componentDidMount() { From dad26ad59400bf740d1bff5cbfde0c388f5cfb2d Mon Sep 17 00:00:00 2001 From: Erik Date: Thu, 23 Aug 2018 01:18:43 +0300 Subject: [PATCH 3/3] added key listener; centering map(WIP); --- src/routes/Match/Map/index.js | 47 +++++++++++++++++++++++++++++------ 1 file changed, 40 insertions(+), 7 deletions(-) diff --git a/src/routes/Match/Map/index.js b/src/routes/Match/Map/index.js index 0de265e..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 @@ -63,17 +65,48 @@ 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) { - if (prevProps.msSinceEpoch !== this.props.msSinceEpoch) { + 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: 50, - offsetY: 50, - }) + offsetX: scaledX, + offsetY: scaledY, + }) - console.log('centering') + console.log('centering') + } } - - // console.log(prevProps) } handleDragEnd = e => {