Add basic hex view

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "html/hex-viewer"]
+	path = html/hex-viewer
+	url = https://github.com/Heath123/hex-viewer

html/mainPage/index.html

@@ -128,6 +128,7 @@ <h3>Scripting (beta)</h3>
         <div class="toolbar tab">
             <button class="tab-button tablinks-rightpanel active" onclick="openMenu(event, 'tree', '-rightpanel')">Data</button>
             <button class="tab-button tablinks-rightpanel" onclick="openMenu(event, 'wikivg', '-rightpanel'); scrollWikiToCurrentPacket()">wiki.vg</button>
+            <button class="tab-button tablinks-rightpanel" onclick="openMenu(event, 'hex', '-rightpanel'); scrollWikiToCurrentPacket()">Hex view</button>
         </div>
         <div class="box" id="sidebar-box">
             <div class="tabcontent tabcontent-rightpanel" id="tree" style="display: block;">
@@ -136,6 +137,9 @@ <h3>Scripting (beta)</h3>
             <div class="tabcontent tabcontent-rightpanel" id="wikivg" style="height: 100%; padding: 0px; overflow: hidden;">
                 <iframe id="iframe"></iframe>
             </div>
+            <div class="tabcontent tabcontent-rightpanel" id="hex" style="height: 100%; padding: 0px; overflow: hidden;">
+                <iframe id="hex-viewer" src="../hex-viewer/hex-viewer.html" style="display: none;"></iframe>
+            </div>
         </div>
     </div>
 </div>

html/mainPage/js/main.js

@@ -264,6 +264,7 @@ function deselectPacket () {
   currentPacketType = undefined
   sharedVars.packetDom.getTreeElement().firstElementChild.innerHTML = 'No packet selected!'
   document.body.className = 'noPacketSelected'
+  hexViewer.style.display = 'none'
 }
 
 window.clearPackets = function () { // window. stops standardjs from complaining
@@ -279,6 +280,8 @@ window.showAllPackets = function () { // window. stops standardjs from complaini
   sharedVars.hiddenPackets = []
 }
 
+const hexViewer = document.getElementById('hex-viewer')
+
 window.packetClick = function (id) { // window. stops standardjs from complaining
   currentPacket = id
   currentPacketType = document.getElementById('packet' + id).children[1].innerText
@@ -296,6 +299,11 @@ window.packetClick = function (id) { // window. stops standardjs from complainin
     display: block;`
   }
 
+  if (sharedVars.proxyCapabilities.rawData) {
+    hexViewer.style.display = 'block'
+    hexViewer.contentWindow.postMessage(Buffer.from(sharedVars.allPackets[id].raw))
+  }
+
   scrollWikiToCurrentPacket()
 }
 
@@ -308,6 +316,7 @@ function hideAll (id) {
   checkbox.checked = false
   checkbox.readOnly = false
   checkbox.indeterminate = false
+  deselectPacket()
   updateFiltering()
   updateFilteringStorage()
 }

html/mainPage/style.css

@@ -240,7 +240,7 @@ input.filter {
   width: 100%;
 }
 
-#iframe {
+#iframe, #hex-viewer {
   border: 0;
   width: 100%;
   height: 100%;

src/packetHandler.js

@@ -41,9 +41,10 @@ exports.init = function (window, passedIpcMain, passedProxy) {
   })
 }
 
-exports.packetHandler = function (direction, meta, data, id) {
+exports.packetHandler = function (direction, meta, data, id, raw) {
   try {
-    mainWindow.send('packet', JSON.stringify({ meta: meta, data: data, direction: direction, hexIdString: id }))
+    mainWindow.send('packet', JSON.stringify({ meta: meta, data: data, direction: direction, hexIdString: id, raw: raw }))
+    // TODO: Maybe write raw data?
     if (direction === 'clientbound') {
       if (scriptingEnabled) {
         currentScriptModule.downstreamHandler(meta, data, server, client)

src/proxy/bedrock/proxy.js

@@ -55,7 +55,8 @@ function processPacket (text) {
 
 exports.capabilities = {
   modifyPackets: false,
-  jsonData: false
+  jsonData: false,
+  rawData: false
 }
 
 exports.startProxy = function (host, port, listenPort, version, authConsent, callback, dataFolder) {

src/proxy/java/proxy.js

@@ -14,6 +14,7 @@ let storedCallback
 exports.capabilities = {
   modifyPackets: true,
   jsonData: true,
+  rawData: true,
   clientboundPackets: [],
   serverboundPackets: []
 }
@@ -70,35 +71,37 @@ exports.startProxy = function (host, port, listenPort, version, authConsent, cal
       profilesFolder: authConsent ? minecraftFolder : undefined
     })
     realServer = targetClient
-    client.on('packet', function (data, meta) {
+    function handleServerboundPacket (data, meta, raw) {
+      // console.log('serverbound packet', meta, data)
       if (targetClient.state === states.PLAY && meta.state === states.PLAY) {
         const id = Object.keys(toServerMappings).find(key => toServerMappings[key] === meta.name)
         const direction = 'serverbound' // Stops standardjs complaining (no-callback-literal)
         // callback(direction, meta, data, id)
         if (!endedTargetClient) {
           // targetClient.write(meta.name, data)
-          callback(direction, meta, data, id)
+          callback(direction, meta, data, id, raw)
         }
       }
-    })
-    targetClient.on('packet', function (data, meta) {
+    }
+    function handleClientboundPacket (data, meta, raw) {
       if (meta.state === states.PLAY && client.state === states.PLAY) {
         const id = Object.keys(toClientMappings).find(key => toClientMappings[key] === meta.name)
         const direction = 'clientbound' // Stops standardjs complaining (no-callback-literal)
         // callback(direction, meta, data, id)
         if (!endedClient) {
           // client.write(meta.name, data)
-          callback(direction, meta, data, id)
+          callback(direction, meta, data, id, raw)
           if (meta.name === 'set_compression') {
             client.compressionThreshold = data.threshold
           } // Set compression
         }
       }
-    })
+    }
     const bufferEqual = require('buffer-equal')
     targetClient.on('raw', function (buffer, meta) {
       if (client.state !== states.PLAY || meta.state !== states.PLAY) { return }
       const packetData = targetClient.deserializer.parsePacketBuffer(buffer).data.params
+      handleClientboundPacket(packetData, meta, [...buffer])
       const packetBuff = client.serializer.createPacketBuffer({ name: meta.name, params: packetData })
       if (!bufferEqual(buffer, packetBuff)) {
         console.log('client<-server: Error in packet ' + meta.state + '.' + meta.name)
@@ -118,6 +121,7 @@ exports.startProxy = function (host, port, listenPort, version, authConsent, cal
     client.on('raw', function (buffer, meta) {
       if (meta.state !== states.PLAY || targetClient.state !== states.PLAY) { return }
       const packetData = client.deserializer.parsePacketBuffer(buffer).data.params
+      handleServerboundPacket(packetData, meta, [...buffer])
       const packetBuff = targetClient.serializer.createPacketBuffer({ name: meta.name, params: packetData })
       if (!bufferEqual(buffer, packetBuff)) {
         console.log('client->server: Error in packet ' + meta.state + '.' + meta.name)