Feature/fbfw 53 device viewports and more

[bryancodazen]

Changes

1. Added d3.js library which contains a powerful API for visualizations in SVG. https://github.com/d3/d3/blob/main/API.md
2. Added zooming and panning
3. Zoom into cursor location. For example if the user is hovering over a specific territory and they zoom it will zoom into that territory.
4. Constrain panning to be within the SVG limits. This means the user cannot pan outside of the map and will hit a 'boundary' which will keep the user immersed in the game.
5. Added device calculations in WDMain and the web dip theme which calculate what device the viewport is based on the mock choices:

• mobile - 375 x 667
• mobileLandscape - 667 x 375
• mobileLg - 414 x 896
• mobileLgLandscape - 896 x 414
• tablet - 834 x 1194
• tabletLandscape - 1194 x 834
• desktop >= 1500 width

6. Added debounced viewport event listener which will capture screen changes (height or width) and re-adjust the map. For example, if the user switches from portrait view to landscape view this will re-adjust the map scales and center the map to approximate the mocks.
7. Zooming constraints based on device.
8. Added debounce function as a util

Test Plan

1. Run the docker harness and go to localhost/beta
2. Test the zooming and panning. Check to see that zoom is limited, zooms into cursor location, panning is constrained to the map. https://drive.google.com/file/d/1MPlcX0C3O1d4i7IGfa4D15IXhWo0HE6-/view?usp=sharing
3. Test the various device dimensions using the developer console. Simulate screen rotation and verify the correct device type is showing.

https://drive.google.com/file/d/1Q2hVA_yXlM9jrq3RaSRP5EOmjwHY-sE4/view?usp=sharing

4. Check that there are no console errors when zooming and panning.
5. Try to break the functionality, try to trigger errors.
6. Check widths and heights outside of the specified widths and heights of the mocks. E.g user has a device that is 375 x 300, etc.

[nebevets]

LGTM, my only concern is the eslintrc changes.

[nebevets]

cool