From 10fb9b0e20e49a9312a886ce7f7cdb14d798051a Mon Sep 17 00:00:00 2001
From: Max Brunsfeld <maxbrunsfeld@gmail.com>
Date: Tue, 18 Jun 2019 20:36:24 -0700
Subject: [PATCH] Fix playground HTML, tweak playground colors

---
 docs/assets/js/playground.js   | 19 +++++++++++++++----
 docs/section-6-playground.html |  5 +++++
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/docs/assets/js/playground.js b/docs/assets/js/playground.js
index d7d4ff33..5f337426 100644
--- a/docs/assets/js/playground.js
+++ b/docs/assets/js/playground.js
@@ -3,11 +3,19 @@ let tree;
 (async () => {
   const CAPTURE_REGEX = /@\s*([\w\._-]+)/g;
   const COLORS_BY_INDEX = [
-    'red',
-    'green',
     'blue',
-    'orange',
-    'violet',
+    'chocolate',
+    'darkblue',
+    'darkcyan',
+    'darkgreen',
+    'darkred',
+    'darkslategray',
+    'dimgray',
+    'green',
+    'indigo',
+    'navy',
+    'red',
+    'sienna',
   ];
 
   const scriptURL = document.currentScript.getAttribute('src');
@@ -213,7 +221,10 @@ let tree;
           {row: startRow, column: 0},
           {row: endRow, column: 0},
         );
+        let lastNodeId;
         for (const {name, node} of captures) {
+          if (node.id === lastNodeId) continue;
+          lastNodeId = node.id;
           const {startPosition, endPosition} = node;
           codeEditor.markText(
             {line: startPosition.row, ch: startPosition.column},
diff --git a/docs/section-6-playground.html b/docs/section-6-playground.html
index 60ce566b..ff35cfd5 100644
--- a/docs/section-6-playground.html
+++ b/docs/section-6-playground.html
@@ -37,6 +37,11 @@ permalink: playground
 <textarea id="code-input">
 </textarea>
 
+<div id="query-container" style="visibility: hidden; position: absolute;">
+  <h4>Query</h4>
+  <textarea id="query-input"></textarea>
+</div>
+
 <h4>Tree</h4>
 <span id="update-time"></span>
 <div id="output-container-scroll">