From c1bcb7d507331cffdf4f5eabacc234baa4b699f3 Mon Sep 17 00:00:00 2001
From: Heath123 <heath.mitchell27@gmail.com>
Date: Wed, 9 Dec 2020 20:36:31 +0000
Subject: [PATCH] Add wiki.vg view (buggy, only works well on latest Java)

---
 html/mainPage/index.html |  6 +--
 html/mainPage/js/main.js | 98 ++++++++++++++++++++++++++++++++++++++++
 html/mainPage/style.css  |  8 +++-
 package-lock.json        | 13 ++++++
 package.json             |  1 +
 5 files changed, 122 insertions(+), 4 deletions(-)

diff --git a/html/mainPage/index.html b/html/mainPage/index.html
index 24f1a05..8c0d19d 100644
--- a/html/mainPage/index.html
+++ b/html/mainPage/index.html
@@ -127,14 +127,14 @@ <h3>Scripting (beta)</h3>
     <div class="split" id="sidebar">
         <div class="toolbar tab">
             <button class="tab-button tablinks-rightpanel active" onclick="openMenu(event, 'tree', '-rightpanel')">Data</button>
-            <!-- <button class="tablinks-rightpanel" onclick="openMenu(event, 'test', '-rightpanel')">Tab 2</button> !-->
+            <button class="tab-button tablinks-rightpanel" onclick="openMenu(event, 'wikivg', '-rightpanel'); scrollWikiToCurrentPacket()">wiki.vg</button>
         </div>
         <div class="box" id="sidebar-box">
             <div class="tabcontent tabcontent-rightpanel" id="tree" style="display: block;">
 
             </div>
-            <div class="tabcontent tabcontent-rightpanel" id="test">
-
+            <div class="tabcontent tabcontent-rightpanel" id="wikivg" style="height: 100%; padding: 0px; overflow: hidden;">
+                <iframe id="iframe"></iframe>
             </div>
         </div>
     </div>
diff --git a/html/mainPage/js/main.js b/html/mainPage/js/main.js
index ad4b4cc..90e19b6 100644
--- a/html/mainPage/js/main.js
+++ b/html/mainPage/js/main.js
@@ -15,6 +15,8 @@ box.onclick = function() {
 }
 */
 
+const axios = require('axios')
+
 const Clusterize = require('clusterize.js')
 const filteringLogic = require('./js/filteringLogic.js')
 
@@ -293,6 +295,8 @@ window.packetClick = function (id) { // window. stops standardjs from complainin
     font-size: 14px;
     display: block;`
   }
+
+  scrollWikiToCurrentPacket()
 }
 
 function hideAll (id) {
@@ -357,3 +361,97 @@ var clusterize = new Clusterize({
   contentElem: sharedVars.packetList,
   no_data_text: ''
 })
+
+// TODO: move to own file?
+async function fillWiki () {
+  let data = (await axios.get('https://wiki.vg/Protocol')).data
+// Allow it to load properly
+  data = data
+    .split('/images/')
+    .join('https://wiki.vg/images/')
+    .split('/resources/assets/')
+    .join('https://wiki.vg/resources/assets/')
+    .split('/load.php?')
+    .join('https://wiki.vg/load.php?')
+
+  document.getElementById('iframe').contentWindow.document.write(data)
+
+  var style = document.createElement('style');
+
+  style.innerHTML =
+     `::-webkit-scrollbar {
+          width: 17px;
+      }
+      
+      ::-webkit-scrollbar-thumb {
+          background: rgba(0, 0, 0, 0.3);
+          border-radius: 10px;
+      }
+      ::-webkit-scrollbar-track {
+          background: rgba(0, 0, 0, 0.2);
+          border-radius: 10px;
+      }
+      
+      ::-webkit-scrollbar-thumb:hover {
+        background: rgba(0, 0, 0, 0.5);
+      }
+      
+      ::-webkit-scrollbar-corner {
+        background: #242424;
+      }
+      
+      /* Cut off the left panel */
+      #content, #left-navigation {
+        margin-left: 0;
+      }
+      
+      #mw-panel {
+        display: none;
+      }
+      `
+
+  document.getElementById('iframe').contentDocument.head.appendChild(style)
+}
+
+fillWiki()
+
+// https://gomakethings.com/finding-the-next-and-previous-sibling-elements-that-match-a-selector-with-vanilla-js/
+function getPreviousSibling (elem, selector) {
+
+  // Get the next sibling element
+  var sibling = elem.previousElementSibling;
+
+  // If there's no selector, return the first sibling
+  if (!selector) return sibling;
+
+  // If the sibling matches our selector, use it
+  // If not, jump to the next sibling and continue the loop
+  while (sibling) {
+    if (sibling.matches(selector)) return sibling;
+    sibling = sibling.previousElementSibling;
+  }
+
+};
+
+function scrollIdIntoView (id, bound) {
+  // https://stackoverflow.com/questions/3813294/how-to-get-element-by-innertext
+  var tdTags = document.getElementById('iframe').contentDocument.getElementsByTagName("td");
+  var searchRegex = new RegExp(`^<tr>\n<td( rowspan="[0-9]*")?>${id.toUpperCase().split('0X').join('0x')}\n<\/td>\n<td( rowspan="[0-9]*")?>Play\n<\/td>\n<td( rowspan="[0-9]*")?>${bound === 'serverbound' ? 'Server' : 'Client'}\n<\/td>`, 'm')
+  var found;
+
+  for (var i = 0; i < tdTags.length; i++) {
+    // console.log(tdTags[i].parentElement.outerHTML)
+    if (tdTags[i].parentElement.outerHTML.match(searchRegex)) {
+      found = tdTags[i];
+      break;
+    }
+  }
+  getPreviousSibling(found.closest('table'), 'h4').scrollIntoView()
+}
+
+function scrollWikiToCurrentPacket () {
+  if (currentPacket) {
+    const packet = sharedVars.allPackets[currentPacket]
+    scrollIdIntoView(packet.hexIdString, packet.direction)
+  }
+}
\ No newline at end of file
diff --git a/html/mainPage/style.css b/html/mainPage/style.css
index a1763b1..4b000c2 100644
--- a/html/mainPage/style.css
+++ b/html/mainPage/style.css
@@ -26,7 +26,7 @@ body {
   cursor: ew-resize;
 }
 .box {
-  overflow-y: scroll;
+  overflow-y: auto;
   border: 1px solid #1A1A1A;
   border-radius: 10px;
   height: calc(100% - 24px); /* Take off toolbar height */
@@ -239,3 +239,9 @@ input.filter {
   height: 28px;
   width: 100%;
 }
+
+#iframe {
+  border: 0;
+  width: 100%;
+  height: 100%;
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 3ee87c1..6115593 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1016,6 +1016,14 @@
       "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==",
       "dev": true
     },
+    "axios": {
+      "version": "0.21.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.0.tgz",
+      "integrity": "sha512-fmkJBknJKoZwem3/IKSSLpkdNXZeBu5Q7GA/aRsr2btgrptmSCxi2oFjZHqGdK9DoTil9PIHlPIZw2EcRJXRvw==",
+      "requires": {
+        "follow-redirects": "^1.10.0"
+      }
+    },
     "balanced-match": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
@@ -2756,6 +2764,11 @@
         }
       }
     },
+    "follow-redirects": {
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.0.tgz",
+      "integrity": "sha512-aq6gF1BEKje4a9i9+5jimNFIpq4Q1WiwBToeRK5NvZBd/TRsmW8BsJfOEGkr76TbOyPVD3OVDN910EcUNtRYEA=="
+    },
     "forever-agent": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
diff --git a/package.json b/package.json
index 3aa142a..f05c678 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
     "electron": "^8.5.2"
   },
   "dependencies": {
+    "axios": "^0.21.0",
     "clusterize.js": "^0.18.1",
     "electron-localshortcut": "^3.2.1",
     "electron-squirrel-startup": "^1.0.0",