From ac9e02233e21e3b15174f6dea56298c9b00ad351 Mon Sep 17 00:00:00 2001
From: Alexander Craggs <popey@debenclipper.com>
Date: Wed, 19 Aug 2020 10:57:49 +0100
Subject: [PATCH 1/9] Enforce that the debug menu is always on the top of the
 screen

---
 src/client/debug/Debug.svelte | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/client/debug/Debug.svelte b/src/client/debug/Debug.svelte
index 16cd28277..57721c7c3 100644
--- a/src/client/debug/Debug.svelte
+++ b/src/client/debug/Debug.svelte
@@ -59,6 +59,8 @@
     font-size: 14px;
     box-sizing: border-box;
     opacity: 0.9;
+    /* we want the debug panel to be above any other elements */
+    z-index: 99999;
   }
 
   .pane {

From 78df8d49e25de3d03c5c977da4afb0e6dad7b4bd Mon Sep 17 00:00:00 2001
From: Alexander Craggs <popey@debenclipper.com>
Date: Wed, 19 Aug 2020 12:11:05 +0100
Subject: [PATCH 2/9] use a json-tree instead of a JSON.stirngify string.

---
 package-lock.json                 |  5 +++++
 package.json                      |  1 +
 src/client/debug/main/Main.svelte | 16 ++++++++++++----
 3 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 707dd9754..17e6fe874 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14582,6 +14582,11 @@
       "integrity": "sha512-i43a3nPJufH3M+LQn71Li1f6PoA4Vx+8pV6fGnoFczwA6v8OT5o7B0LBf7LKViG9BVJNvFxGube4t/KQBN7rzg==",
       "dev": true
     },
+    "svelte-json-tree-auto": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/svelte-json-tree-auto/-/svelte-json-tree-auto-0.1.0.tgz",
+      "integrity": "sha512-XDUBTV/BNStd/9WJDndzxQ9KqhoNoZBxkOo1H1d29qKW+YxG6eRrt2Yp0Cv/6KLKDtFLhJ9huJpqpOSe4yMG0Q=="
+    },
     "svgo": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.0.tgz",
diff --git a/package.json b/package.json
index 0490b45e6..26d8c6f44 100644
--- a/package.json
+++ b/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"
   },
diff --git a/src/client/debug/main/Main.svelte b/src/client/debug/main/Main.svelte
index 760194b44..8d6e07388 100644
--- a/src/client/debug/main/Main.svelte
+++ b/src/client/debug/main/Main.svelte
@@ -1,6 +1,7 @@
 <script>
   export let client;
 
+  import JSONTree from 'svelte-json-tree-auto';
   import Move from './Move.svelte';
   import Controls from './Controls.svelte';
   import PlayerInfo from './PlayerInfo.svelte';
@@ -36,6 +37,11 @@
     color: #888;
   }
 
+  .tree {
+    --json-tree-font-family: monospace;
+    --json-tree-font-size: 14px;
+  }
+
   label {
     font-weight: bold;
     font-size: 1.1em;
@@ -107,12 +113,14 @@
 
 <section>
   <label>G</label>
-  <pre class="json">{JSON.stringify(G, null, 2)}</pre>
+  <div class="json tree">
+    <JSONTree value={G} />
+  </div>
 </section>
 
 <section>
   <label>ctx</label>
-  <pre class="json">
-    {JSON.stringify(SanitizeCtx(ctx), null, 2)}
-  </pre>
+  <div class="json tree">
+    <JSONTree value={SanitizeCtx(ctx)} />
+  </div>
 </section>

From 06c87d97209fd78f379dcfbd1dd5fb19fb3b3b38 Mon Sep 17 00:00:00 2001
From: Alexander Craggs <popey456963@users.noreply.github.com>
Date: Wed, 19 Aug 2020 14:59:56 +0100
Subject: [PATCH 3/9] Update Debug.svelte

---
 src/client/debug/Debug.svelte | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/client/debug/Debug.svelte b/src/client/debug/Debug.svelte
index 57721c7c3..16cd28277 100644
--- a/src/client/debug/Debug.svelte
+++ b/src/client/debug/Debug.svelte
@@ -59,8 +59,6 @@
     font-size: 14px;
     box-sizing: border-box;
     opacity: 0.9;
-    /* we want the debug panel to be above any other elements */
-    z-index: 99999;
   }
 
   .pane {

From 69093dc67a993bca413f71862cfe5b7c87b9a2c6 Mon Sep 17 00:00:00 2001
From: Alexander Craggs <popey@debenclipper.com>
Date: Wed, 19 Aug 2020 16:11:00 +0100
Subject: [PATCH 4/9] add svelte-json-tree-auto to transform ignore patterns

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 26d8c6f44..830209fee 100644
--- a/package.json
+++ b/package.json
@@ -191,7 +191,7 @@
       "^.+\\.svelte$": "jest-transform-svelte"
     },
     "transformIgnorePatterns": [
-      "node_modules/(?!(boardgame.io|flatted|svelte-icons)/)"
+      "node_modules/(?!(boardgame.io|flatted|svelte-icons|svelte-json-tree-auto)/)"
     ],
     "testPathIgnorePatterns": [
       "examples/",

From ef9ca94ca87c73ef0612209256e83f958702e99c Mon Sep 17 00:00:00 2001
From: Alexander Craggs <popey@debenclipper.com>
Date: Wed, 19 Aug 2020 16:17:51 +0100
Subject: [PATCH 5/9] add svelte-json-tree

---
 package-lock.json                 | 5 +++++
 package.json                      | 1 +
 src/client/debug/main/Main.svelte | 3 ++-
 3 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index 17e6fe874..d06d3df98 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14582,6 +14582,11 @@
       "integrity": "sha512-i43a3nPJufH3M+LQn71Li1f6PoA4Vx+8pV6fGnoFczwA6v8OT5o7B0LBf7LKViG9BVJNvFxGube4t/KQBN7rzg==",
       "dev": true
     },
+    "svelte-json-tree": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/svelte-json-tree/-/svelte-json-tree-0.1.0.tgz",
+      "integrity": "sha512-ufKWvS94z5m6Je9Hu0yosvdALy0mOPcaexbTcQQ/jW+3Rzi4oaHkOeg4RQ3cNpOlOQlIs0lfsF9FBlyquZ7XuQ=="
+    },
     "svelte-json-tree-auto": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/svelte-json-tree-auto/-/svelte-json-tree-auto-0.1.0.tgz",
diff --git a/package.json b/package.json
index 830209fee..e738ab072 100644
--- a/package.json
+++ b/package.json
@@ -165,6 +165,7 @@
     "socket.io": "^2.1.1",
     "socket.io-client": "^2.3.0",
     "svelte": "^3.24.0",
+    "svelte-json-tree": "^0.1.0",
     "svelte-json-tree-auto": "^0.1.0",
     "ts-toolbelt": "^6.3.6",
     "uuid": "3.2.1"
diff --git a/src/client/debug/main/Main.svelte b/src/client/debug/main/Main.svelte
index 8d6e07388..f411a0895 100644
--- a/src/client/debug/main/Main.svelte
+++ b/src/client/debug/main/Main.svelte
@@ -1,7 +1,8 @@
 <script>
   export let client;
 
-  import JSONTree from 'svelte-json-tree-auto';
+  import JSONTree from 'svelte-json-tree';
+  // import JSONTree from 'svelte-json-tree-auto';
   import Move from './Move.svelte';
   import Controls from './Controls.svelte';
   import PlayerInfo from './PlayerInfo.svelte';

From 31418c5f94498ecd0bc59444856060427209389f Mon Sep 17 00:00:00 2001
From: Alexander Craggs <popey@debenclipper.com>
Date: Wed, 19 Aug 2020 16:19:56 +0100
Subject: [PATCH 6/9] add svelte-json-tree to transform ignore patterns

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index e738ab072..80e27db7e 100644
--- a/package.json
+++ b/package.json
@@ -192,7 +192,7 @@
       "^.+\\.svelte$": "jest-transform-svelte"
     },
     "transformIgnorePatterns": [
-      "node_modules/(?!(boardgame.io|flatted|svelte-icons|svelte-json-tree-auto)/)"
+      "node_modules/(?!(boardgame.io|flatted|svelte-icons|svelte-json-tree-auto|sveslte-json-tree)/)"
     ],
     "testPathIgnorePatterns": [
       "examples/",

From 5c17a9da13a60da9bd9c01dbbd58918be59b71c7 Mon Sep 17 00:00:00 2001
From: Chris Swithinbank <swithinbank@gmail.com>
Date: Sun, 23 Aug 2020 19:09:17 +0200
Subject: [PATCH 7/9] fix(debug): require `svelte-json-tree` instead of
 importing it

Context: https://github.com/boardgameio/boardgame.io/pull/781#discussion_r473150625
---
 src/client/debug/main/Main.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/client/debug/main/Main.svelte b/src/client/debug/main/Main.svelte
index f411a0895..8a8618120 100644
--- a/src/client/debug/main/Main.svelte
+++ b/src/client/debug/main/Main.svelte
@@ -1,7 +1,7 @@
 <script>
   export let client;
 
-  import JSONTree from 'svelte-json-tree';
+  const JSONTree = require('svelte-json-tree');
   // import JSONTree from 'svelte-json-tree-auto';
   import Move from './Move.svelte';
   import Controls from './Controls.svelte';

From 47e9ebfe5582de5505eb3db696484c395e365384 Mon Sep 17 00:00:00 2001
From: delucis <swithinbank@gmail.com>
Date: Sun, 30 Aug 2020 22:44:29 +0200
Subject: [PATCH 8/9] chore(debug): Use `svelte-json-tree-auto`

---
 package-lock.json                 | 5 -----
 package.json                      | 3 +--
 src/client/debug/main/Main.svelte | 3 +--
 3 files changed, 2 insertions(+), 9 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d06d3df98..17e6fe874 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14582,11 +14582,6 @@
       "integrity": "sha512-i43a3nPJufH3M+LQn71Li1f6PoA4Vx+8pV6fGnoFczwA6v8OT5o7B0LBf7LKViG9BVJNvFxGube4t/KQBN7rzg==",
       "dev": true
     },
-    "svelte-json-tree": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/svelte-json-tree/-/svelte-json-tree-0.1.0.tgz",
-      "integrity": "sha512-ufKWvS94z5m6Je9Hu0yosvdALy0mOPcaexbTcQQ/jW+3Rzi4oaHkOeg4RQ3cNpOlOQlIs0lfsF9FBlyquZ7XuQ=="
-    },
     "svelte-json-tree-auto": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/svelte-json-tree-auto/-/svelte-json-tree-auto-0.1.0.tgz",
diff --git a/package.json b/package.json
index 80e27db7e..26d8c6f44 100644
--- a/package.json
+++ b/package.json
@@ -165,7 +165,6 @@
     "socket.io": "^2.1.1",
     "socket.io-client": "^2.3.0",
     "svelte": "^3.24.0",
-    "svelte-json-tree": "^0.1.0",
     "svelte-json-tree-auto": "^0.1.0",
     "ts-toolbelt": "^6.3.6",
     "uuid": "3.2.1"
@@ -192,7 +191,7 @@
       "^.+\\.svelte$": "jest-transform-svelte"
     },
     "transformIgnorePatterns": [
-      "node_modules/(?!(boardgame.io|flatted|svelte-icons|svelte-json-tree-auto|sveslte-json-tree)/)"
+      "node_modules/(?!(boardgame.io|flatted|svelte-icons)/)"
     ],
     "testPathIgnorePatterns": [
       "examples/",
diff --git a/src/client/debug/main/Main.svelte b/src/client/debug/main/Main.svelte
index 8a8618120..61f75755f 100644
--- a/src/client/debug/main/Main.svelte
+++ b/src/client/debug/main/Main.svelte
@@ -1,8 +1,7 @@
 <script>
   export let client;
 
-  const JSONTree = require('svelte-json-tree');
-  // import JSONTree from 'svelte-json-tree-auto';
+  const JSONTree = require('svelte-json-tree-auto');
   import Move from './Move.svelte';
   import Controls from './Controls.svelte';
   import PlayerInfo from './PlayerInfo.svelte';

From 0420a2e507cf05244e6a2e3f817d688671d3bf8f Mon Sep 17 00:00:00 2001
From: delucis <swithinbank@gmail.com>
Date: Sun, 30 Aug 2020 22:45:06 +0200
Subject: [PATCH 9/9] refactor(debug): Clean up JSON tree styles

---
 src/client/debug/main/Main.svelte | 17 ++++-------------
 1 file changed, 4 insertions(+), 13 deletions(-)

diff --git a/src/client/debug/main/Main.svelte b/src/client/debug/main/Main.svelte
index 61f75755f..129c28300 100644
--- a/src/client/debug/main/Main.svelte
+++ b/src/client/debug/main/Main.svelte
@@ -32,11 +32,6 @@
 </script>
 
 <style>
-  .json {
-    font-family: monospace;
-    color: #888;
-  }
-
   .tree {
     --json-tree-font-family: monospace;
     --json-tree-font-size: 14px;
@@ -111,16 +106,12 @@
   </div>
 </section>
 
-<section>
+<section class="tree">
   <label>G</label>
-  <div class="json tree">
-    <JSONTree value={G} />
-  </div>
+  <JSONTree value={G} />
 </section>
 
-<section>
+<section class="tree">
   <label>ctx</label>
-  <div class="json tree">
-    <JSONTree value={SanitizeCtx(ctx)} />
-  </div>
+  <JSONTree value={SanitizeCtx(ctx)} />
 </section>