Focus replay on player

[eko24ive]

List of thinks copied from #12:

• Add a isTracking flag to the state in Map/index.js
• Add a button somewhere that toggles tracking (I'll style it before merging)
• Add a hotkey that toggles tracking (F key)
• Cancel tracking if a user drags (do not cancel if they change zoom either with wheel or the buttons)
• Add a componentDidUpdate hook in Map/index.js which'll do recenter stuff on the map on the player if msSinceEpoch has changed since the previous render
• Implemented centering logic which would be run inside componentDidUpdate
• Measure performance with the following bookmarklet in production mode (yarn run build && serve -s build) and ensure it maintains 60fps

javascript:(function(){var script=document.createElement('script');script.onload=function(){var stats=new Stats();document.body.appendChild(stats.dom);requestAnimationFrame(function loop(){stats.update();requestAnimationFrame(loop)});};script.src='//rawgit.com/mrdoob/stats.js/master/build/stats.min.js';document.head.appendChild(script);})()

So as you may see I had some basic things done. I've run into trouble with map centering and I'll try my best to explain problems I'm facing.

First of all it is unclear to me how does PUBG player coordinates (those long 6-digit numbers) are converted into ones that is being used to render player on the map. Yet, I'm aware of toScale() method but the values this method outputs seems like completely unrelated to map's offsetX and offsetY and to PUBG players coordinates as well. Anyway since only <Group/> uses toScale() method probably it means that it is only usefull for canvas-related things, I just don't know.

Also there is mapScale variable that affects map's offsetX and offsetY which is pretty obvious and straightforward. At the first glance I thought I could reverse-engineer it to come up with some logic which'd help me to do map centering things, but I have achieved no result at all, so this might be a dead end.

I think I need following things to achieve map centering feature:

• Get player coordinates that will be related to the map offset coordinates;
• Get map "viewport" size so map won't be offseted to the "white void" in case focused player is at the close to the map bounds.

@apazzolini, please, let me know if you can help with this or at least point me in the right direction. Thanks in advance!

[eko24ive]

Oh, and just to be clear - this repo is currently in WIP state

[apazzolini]

You'll want to read the PUBG documentation about the location numbers, but it's basically the position in centimeters from the top left. The rest of the numbers are responsible for scaling and positioning the map based on your zoom level and where you panned to.

Getting the focused player's current coordinates will definitely be a key part. Look at the Group x/y coordinates in PlayerDot to see how to get their current position.

From there, you'll need to do the math required to set offsetX and offsetY such that it's a point that places the player's location in the middle of the map. I can't offer more explicit guidance here because I haven't thought about it myself - I'd need to play around with the code, and at that point I might as well just implement it because it'd probably be easier than describing it.

Look at the clamping logic in handleZoom to see how to avoid the white void. Do this after picking the center point so that the clamp will adjust only if necessary.

This is a tricky feature, especially since it's the first thing you're investigating, so no worries if you want to bail or work on something else :) I can take the work you've done already and expand on it

[eko24ive]

Sorry for the long reply - I was on a tiny vacation.

Thank you for the response to my questions! I'd like to keep trying to get centering work if this is not any kind of ASAP feature because I really love this challenge, yet, I'm not sure how much time it'll take.

[apazzolini]

Yeah, go for it. If I get antsy about this feature and want to do it I'll let you know, but have no plans for that.

[eko24ive]

Hey @apazzolini, it looks like I don't have enough time to work on this PR due to primary job project. So I'd like to notify you about that. Though, I'll be looking to contributing on some other features for pubg.sh when I get some free time - I really love the stuff you did!
Sorry :c

[apazzolini]

No worries mate!