[Story] Grid Experience

<!-- Title suggestion: [Story] Name of story -->
<!-- Story issues track work to create new features and provide distinct new value to the user -->

# User Story

As a player, I want a way to easily update my player grid size/configuration

## Details

Right now the method to change the player grid configuration is cumbersome and inexact. Also there is no current way to disable the snap-to on the grid completely if needed. The intension to make the process of changing the grid square sizes easier for the user, and to make it possible to disable the grid completely

We plan to make usage of Kevin Cox's library Gridfinder to help in the calculation of grid sizing. https://gitlab.com/kevincox/gridfinder

We can use this as a guide

- https://gridfinder.kevincox.ca/?i=https%3A%2F%2Fedge.mythictable.com%2Fstatic%2Fassets%2Ftutorial%2Fbasic-map-interactions.jpg

## Steps

#### Functionality
  - [x] Add an ability to switch the scene in to "grid finder mode". While in gridfinder mode:
    - [x] clicking on map drops indicator (circles)
    - [x] clicking on indicator removes it
  - [x] Add a new widget to the top left of the screen with other new widgets being created that is "Grid Manipulation Utility" 
    - [x] Button that turns on/off the grid display entirely
    - [x] Button that turns on/off snap to grid
    - ~~The widget should have a button that clears out all custom grid intersections and resets to "default"~~
    - ~~The grid utility will have text boxes that you can "nudge" or adjust the size of the grid boxes (x,y) in the case that using the gridfinder isn't giving the exact result you want~~
      - ~~Arrow keys can change number by 1 and +Shift by 10~~
    - ~~Button to turn on/off gridfinder mode~~
  - [x] Implement functionality to turn on/off grid display (Grid Manipulation Utility will hook in and trigger this)
  - [x] Implement functionality to turn on/off snap to grid (Grid Manipulation Utility will hook in and trigger this)
  - [x] With the datapoints retained in "clicking circles" mode above (gridfinder mode), call into the gridfinder library to derive grid sizing values and update the screen as grid sizing is calculated - The library is https://gitlab.com/kevincox/gridfinder
  - [ ] Update edge deployment to use `edge` environment for the `appName` in VueUnleash
  - [x] Update zoom functionality to be based off grid and image instead of viewport size 
  - [ ] Purge circles on map clear?
  - ~~Add offset to the Map editor window and tie into the collection data~~

#### UI
  - [x] Grid Settings Panel
    - [x] White outline on hover, no other outlining
    - [x] Theme based off of Gridfinder color
    - [x] Visual outline on screen when gridfinder active (think Slack share screen)
  - [x] Grid Finder (button in Header panel)
    - [x] Toggle switch to turn on and off
    - [x] Text and SVG follow color scheme
    - [x] ? icon which will bring up a module with gif of how to use
      - [x] Placeholder paragraph
        - [ ] Proofread by others
    - ~~On/Off display (inspire from Campaign share link UI)~~
  - [x] Snap to grid
    - [x] Toggle switch to turn on and off
    - [x] Text and SVG follow color scheme
    - ~~On/Off display (inspire from Campaign share link UI)~~
    - ~~Follow color usage of GF option On/Off~~
  - [x] Grid Visibility
    - [x] Toggle switch to turn on and off
    - [x] Text and SVG follow color scheme
  - ~~Labels Always Visible~~
    - ~~Appearance [inspired by](https://css-tricks.com/float-labels-css/)~~
    - ~~Offset X and Y~~
    - ~~Size~~
  - ~~Save Settings~~
    - ~~Implement a preview system~~
      - ~~Track both before and after~~
      - ~~Clear changes button~~
      - ~~Save button should match other save buttons UI~~
      - ~~If closed when not saved, will open modal to prompt choice~~

## QA Discoveries
  - [ ] Bugs
    - [x] `Snap to grid` and `Grid visibility` toggles will disconnect/stop working
      - [x] Reproduced In Edge
      - [x] Reproduced Locally
      - [x] Solved
    - [x] `Grid Finder Mode` cause a communication error 
      - [x] Reproduced In Edge
      - [x] Reproduced Locally
      - [x] Solved
  - [ ] Polish
    - [ ] Color of toggle switches (or other colors to match)
    - [x] Change `h6` labels into html `labels`
      - [x] Clicking `label` toggles switch

## Acceptance Criteria (To be checked off **only** during Review)

This should be filled in prior to moving into ~"In Progress", but is not required upon first submitting the ticket.
**This list needs to be reviewed and completed by someone who did not work on the ticket.** Please do not pass Acceptance Criteria on a ticket you contributed code to. Ping #qa in Slack or #mythic-table to let someone know that a ticket is completed and ready for ~Review.

<!-- Some notes on Acceptance Criteria (AC)
If you are having issues creating Acceptance Criteria, please review [Some notes on Acceptance Criteria(AC)](https://gitlab.com/mythicteam/mythictable/-/wikis/qa/acceptace-criteria). Don't hesitate to ask for AC review or assistance in #qa, it's what we're here for.
-->
<!--
- [ ] Given: Samples Criteria exists in template
    - [ ] And: it has not been removed
    - [ ] When: the ticket has been submitted
    - [ ] Then: Someone else should update this
    - [ ] And: include acceptable Acceptance Criteria
    -->
<!-- A note on weights
0 is trivial. Does not involve code
1 is a button, documentation corrections, a quick fix
2 is a simple well known task
3 is for a somewhat simple task
5 is for a complicated story that requires a number of moving parts
8 is for a significant amount of work but should with perhaps some unknowns or external dependencies
Anything higher than 8 should be broken up into smaller more distinct stories.
-->

Story points: 2.0