Focus replay on player when zoomed in

[apazzolini]

This should pan the map around keeping the focused player in the center of the screen.

Can also consider a toggle to zoom into the center of the bluezone instead of a player.

[eko24ive]

Hey @apazzolini may I try to make a PR for this feature?

[apazzolini]

Sure!

I'd say start with the simple version of just keeping the focused player on the center. If you get that working, we can look at what other follow options we should provide.

My initial thoughts are that you'll need to:

• 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 (Either t or f)
• 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 and recenter the map on the player if msSinceEpoch has changed since the previous render
• 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);})()

[eko24ive]

Thanks for the greenlight - I'd be glad to help you! Really love the "mini-roadmap" you've described above.

I've actually tried to run client locally passing https://api.pubg.sh as a REACT_APP_API unfortunately it resulted with a '400' response from server with following body when I tried to find "myself":

{"errors":[{"message":"Cannot query field \"teamSize\" on type \"PlayerMatch\".","locations":[{"line":15,"column":7}]}]}

So I thought that I have to set up local api as well. Having that done. I've run into the exact same error. (FYI: I've used my own PUBG_API_KEY and all I assume that every other .env variable was ok, since I got no errors when I launched API)

I decided to try one thing. Having a link to one of my matches on pubg.sh (https://pubg.sh/eko24/pc-eu/5ec8428f-edec-4e46-a235-8039e6507541) I decided to copy paste it into my local server, like this http://localhost:3001/eko24/pc-eu/5ec8428f-edec-4e46-a235-8039e6507541 and it throws at me another error: screenshot. Here is content of that error:

Uncaught (in promise) TypeError: Cannot read property 'name' of null
    at Telemetry.js:101
    at Map.withMutations (immutable.es.js:2245)
    at Telemetry.js:89
    at Array.forEach (<anonymous>)
    at Telemetry (Telemetry.js:36)
    at Match._callee$ (index.js:148)
    at tryCatch (runtime.js:62)
    at Generator.invoke [as _invoke] (runtime.js:296)
    at Generator.prototype.(anonymous function) [as next] (http://localhost:3001/static/js/bundle.js:121505:21)
    at step (TimeSlider.js:39)
    at TimeSlider.js:39

I'd like to mention that I've been using develop branch since I saw it in some PR here and decided that this branch was made exclusively for development. I'd be really thankful if you'd help me figure out how I can get client up and running locally!

[apazzolini]

Ah, develop is out of date. You should merge master into develop (there shouldn't be any conflicts) and then branch from develop for your feature.

Also make sure that you followed step 2 under configuration in API to get the latest database schema set up.

[apazzolini]

@eko24ive Hey dude, sorry if you went down a rabbit hole here. I was busy during the day and couldn't get to this until now. develop hadn't been touched in a long time and was definitely out of date. I've merged master into it, so it should be identical now.

Let me know if you have any other issues.

[eko24ive]

No problem at all! I'll try to get it running once again and let you know about results.

[eko24ive]

@apazzolini After I synced my forked repo with yours - everything just went smooth. But it looks like I've run into another issue.

On the map no matter which match I would pick to spectate (mine or some other player) it would always open and start at 05:24.6, zoomed in at some specific location and I'm unable to pan around the map until I put replay on pause. As soon as I hit "play" map is being scaled and moved to the position it was before and I'm again unable to navigate across the map: GIF with issue

Also I saw this error in the console output. Not sure if it helps:

The same issue reproduces even if I switch to the local API. Do you have any thoughts why I'm facing this issue? Thanks in advance and sorry for making this hard for you.

[apazzolini]

@eko24ive No worries mate, these issues have been my fault.

The answer to your question is to disable the dev tools in Match/Options.js.

[eko24ive]

Ok, let me try

[eko24ive]

Yeah, it worked! Honestly, I feel so stupid about it - I should've searched that timestamp or map parameters across the project 😂

Anyway since it works, I'll begin with the todo-list you've come up with (I think you might want to move it to the first issue-comment so we can get a nice progress bar on the issues page) and we'll see how it works out. Again, thank you so much for helping me get it right!

[apazzolini]

Tracked at #29.