Add wiki.vg view (buggy, only works well on latest Java)

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>

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)
+  }
+}

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%;
+}

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",