feat(debug): Display live object view in debug panel (#781)

* Enforce that the debug menu is always on the top of the screen

* use a json-tree instead of a JSON.stirngify string.

* Update Debug.svelte

* add svelte-json-tree-auto to transform ignore patterns

* add svelte-json-tree

* add svelte-json-tree to transform ignore patterns

* fix(debug): require `svelte-json-tree` instead of importing it

Context: #781 (comment)

* chore(debug): Use `svelte-json-tree-auto`

* refactor(debug): Clean up JSON tree styles

Co-authored-by: Chris Swithinbank <[email protected]>

package.json

@@ -165,6 +165,7 @@
     "socket.io": "^2.1.1",
     "socket.io-client": "^2.3.0",
     "svelte": "^3.24.0",
+    "svelte-json-tree-auto": "^0.1.0",
     "ts-toolbelt": "^6.3.6",
     "uuid": "3.2.1"
   },

src/client/debug/main/Main.svelte

@@ -1,6 +1,7 @@
 <script>
   export let client;
 
+  const JSONTree = require('svelte-json-tree-auto');
   import Move from './Move.svelte';
   import Controls from './Controls.svelte';
   import PlayerInfo from './PlayerInfo.svelte';
@@ -31,9 +32,9 @@
 </script>
 
 <style>
-  .json {
-    font-family: monospace;
-    color: #888;
+  .tree {
+    --json-tree-font-family: monospace;
+    --json-tree-font-size: 14px;
   }
 
   label {
@@ -105,14 +106,12 @@
   </div>
 </section>
 
-<section>
+<section class="tree">
   <label>G</label>
-  <pre class="json">{JSON.stringify(G, null, 2)}</pre>
+  <JSONTree value={G} />
 </section>
 
-<section>
+<section class="tree">
   <label>ctx</label>
-  <pre class="json">
-    {JSON.stringify(SanitizeCtx(ctx), null, 2)}
-  </pre>
+  <JSONTree value={SanitizeCtx(ctx)} />
 </section>