Start on packet timing, improve start screen and make packets in Filt…

…ering easier to toggle
Heath123 · Dec 27, 2020 · 9a0e23f · 9a0e23f
1 parent ba16b20
commit 9a0e23f
Show file tree

Hide file tree

Showing 14 changed files with 224 additions and 41 deletions.
diff --git a/html/mainPage/index.html b/html/mainPage/index.html
@@ -18,7 +18,7 @@
     <script src="../codemirror/addon/display/autorefresh.js"></script>
     <link href="../codemirror/theme/darcula.css" rel="stylesheet">
 </head>
-<body class="noPacketSelected">
+<body class="noPacketSelected timeNotShown">
 <div class="dialog-overlay" id="dialog-overlay">
     <div class="dialog" id="dialog">
 

diff --git a/html/mainPage/js/main.js b/html/mainPage/js/main.js
@@ -47,6 +47,7 @@ function toggleCheckbox (box, packetName, direction) {
     box.readOnly = true
     box.indeterminate = true
   } */
+  box.checked = !box.checked
 
   // console.log('Toggled visibility of', packetName, 'to', box.checked)
   const index = sharedVars.hiddenPackets[direction].indexOf(packetName)
@@ -221,7 +222,7 @@ function addPacketsToFiltering (packetsObject, direction, appendTo) {
     if (packetsObject.hasOwnProperty(key)) {
       console.log(!sharedVars.hiddenPackets[direction].includes(packetsObject[key]))
       filteringPackets.innerHTML +=
-     `<li id="${packetsObject[key].replace(/"/g, '&#39;') + '-' + direction}" class="packet ${direction}">
+     `<li id="${packetsObject[key].replace(/"/g, '&#39;') + '-' + direction}" class="packet ${direction}" onclick="toggleCheckbox(this.firstElementChild, 'teleport_confirm', 'serverbound')">
         <input type="checkbox" ${!sharedVars.hiddenPackets[direction].includes(packetsObject[key]) ? 'checked' : ''}
             onclick="toggleCheckbox(this, ${JSON.stringify(packetsObject[key]).replace(/"/g, '&#39;')}, '${direction}')"/>
         <span class="id">${escapeHtml(key)}</span>
@@ -300,7 +301,7 @@ function editAndResend (id) {
 function errorDialog(header, info, fatal) {
   // dialogOpen = true
   document.getElementById('dialog-overlay').className = 'dialog-overlay active'
-  document.getElementById('dialog').className='dialog dialog-small'
+  document.getElementById('dialog').className='dialog dialog-small error-dialog'
   document.getElementById('dialog').innerHTML =
 
  `<h2>${header}</h2>
@@ -321,7 +322,8 @@ function deselectPacket () {
   currentPacket = undefined
   currentPacketType = undefined
   sharedVars.packetDom.getTreeElement().firstElementChild.innerHTML = 'No packet selected!'
-  document.body.className = 'noPacketSelected'
+  document.body.classList.remove('packetSelected')
+  document.body.classList.add('noPacketSelected')
   hexViewer.style.display = 'none'
 }
 
@@ -364,10 +366,11 @@ window.packetClick = function (id) { // window. stops standardjs from complainin
   }
 
   currentPacket = id
-  const element = document.getElementById('packet' + id)
-  currentPacketType = element.children[1].innerText
+  // const element = document.getElementById('packet' + id)
+  currentPacketType = sharedVars.allPackets[id].name
   removeOrAddSelection(currentPacket, true)
-  document.body.className = 'packetSelected'
+  document.body.classList.remove('noPacketSelected')
+  document.body.classList.add('packetSelected')
   if (sharedVars.proxyCapabilities.jsonData) {
     // sidebar.innerHTML = '<div style="padding: 10px;">Loading packet data...</div>';
     sharedVars.packetDom.getTree().loadData(sharedVars.allPackets[id].data)
@@ -444,7 +447,7 @@ document.body.addEventListener('contextmenu', (event) => {
 
   sharedVars.ipcRenderer.send('contextMenu', JSON.stringify({
     direction: target.className.split(' ')[1],
-    text: target.children[0].innerText + ' ' + target.children[1].innerText,
+    text: target.children[0].children[0].innerText + ' ' + target.children[0].children[1].innerText,
     id: target.id.replace('packet', '')
   }))
 })

diff --git a/html/mainPage/js/packetDom.js b/html/mainPage/js/packetDom.js
@@ -31,13 +31,21 @@ function trimData (data) { // Function to trim the size of stringified data for
   return newData
 }
 
+function formatTime (ms) {
+  // Based on https://stackoverflow.com/a/50409993/4012708
+  return new Date(new Date(ms).getTime() - new Date().getTimezoneOffset() * 60000).toISOString().split("T")[1].replace(/[0-9]Z$/, '');
+}
+
 function addPacketToDOM (packet) {
   const isHidden = filteringLogic.packetFilteredByFilterBox(packet, sharedVars.lastFilter, sharedVars.hiddenPackets)
   sharedVars.allPacketsHTML.push([
     `<li id="packet${packet.uid}" onclick="packetClick(${packet.uid})" class="packet ${packet.direction} ${isHidden ? 'filter-hidden' : 'filter-shown'}">
-        <span class="id">${escapeHtml(packet.hexIdString)}</span>
-        <span class="name">${escapeHtml(packet.meta.name)}</span>
-        <span class="data">${escapeHtml(trimData(packet.data))}</span>
+        <div class="main-data">
+          <span class="id">${escapeHtml(packet.hexIdString)}</span>
+          <span class="name">${escapeHtml(packet.meta.name)}</span>
+          <span class="data">${escapeHtml(trimData(packet.data))}</span>
+        </div>
+        <span class="time">${escapeHtml(formatTime(packet.time))}</span>
       </li>`])
   /* if (!noUpdate) {
     clusterize.append(sharedVars.allPacketsHTML.slice(-1)[0]);

diff --git a/html/mainPage/style.css b/html/mainPage/style.css
@@ -21,23 +21,35 @@ body {
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   height: 100%;
+  /* Default before everything loads */
+  width: calc(50% - 5px);
 }
+
+/* Targets the right panel to add spacing, but only before the gutter loads */
+#packets + #sidebar {
+  margin-left: 10px;
+}
+
 .gutter.gutter-horizontal {
   cursor: ew-resize;
 }
+
 .box {
   overflow-y: auto;
   border: 1px solid #1A1A1A;
   border-radius: 10px;
   height: calc(100% - 24px); /* Take off toolbar height */
 }
+
 div.toolbar {
   height: 24px;
   overflow: hidden;
 }
+
 #packets {
   position: relative; /* Is this needed? TODO: Check */
 }
+
 .packetlist {
   list-style: none;
   padding: 0;
@@ -251,6 +263,7 @@ div.error {
   text-align: right;
   font-size: 90%;
   color: red;
+  user-select: text;
 }
 
 .packet.selected {
@@ -261,7 +274,25 @@ div.error {
   display: contents;
 }
 
+.error-dialog {
+  user-select: text;
+}
+
 .bottom-button {
   position: absolute;
   bottom: 16px;
-}
+  user-select: none;
+}
+
+body.timeShown div.main-data {
+  display: inline-block;
+  width: calc(100% - 120px);
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+  /* Makes up for inline-block causing extra space on the bottom */
+  margin-bottom: -4px;
+}
+
+body.timeNotShown div.main-data {
+  display: inline;
+}
diff --git a/html/scrollbar.css b/html/scrollbar.css
@@ -1,4 +1,5 @@
 ::-webkit-scrollbar {
+    background: #242424;
     width: 17px;
 }
 
@@ -14,3 +15,7 @@
 ::-webkit-scrollbar-thumb:hover {
   background: rgba(0, 0, 0, 0.5);
 }
+
+::-webkit-scrollbar-corner {
+    background: #242424;
+}
diff --git a/html/shared.css b/html/shared.css
@@ -24,3 +24,65 @@ a {
 a:active {
   color: rgba(255, 255, 255, 0.6);
 }
+
+/* Based on https://www.w3schools.com/howto/howto_css_switch.asp */
+
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 42px;
+  height: 24px;
+}
+
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .07s;
+  transition: .07s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 18px;
+  width: 18px;
+  left: 3px;
+  bottom: 3px;
+  background-color: white;
+  -webkit-transition: .07s;
+  transition: .07s;
+}
+
+input:checked + .slider {
+  background-color: #2196F3;
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(18px);
+  -ms-transform: translateX(18px);
+  transform: translateX(18px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 24px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}
diff --git a/html/startPage/index.html b/html/startPage/index.html
@@ -86,10 +86,19 @@ <h1 class='title'>pakkit</h1>
         <input type="text" name="listen-port" id="listen-port" value="25566" placeholder="25566">
       </p>
       <div id="consent-box" style="display: none;">
+        <br>
+        <br>
+        <p>
+          <label for="consent">Consent:</label>
+          <span style="display: table-cell;">Allow pakkit to use my auth token from launcher_profiles.json for logging in to online mode servers</span>
+        </p>
         <br>
         <p>
-          <label for="consent">Consent</label>
-          <input id="consent" type="checkbox" value="consent"> Allow pakkit to use my auth token from launcher_profiles.json for logging in to online mode servers (can be revoked by pressing F12 and typing <code>localStorage.authConsentGiven = false</code>)
+          <div style="display: table-cell;"></div>
+          <label class="switch" style="padding: 0;">
+            <input id="consent" type="checkbox" value="consent">
+            <span class="slider round"></span>
+          </label>
         </p>
       </div>
       <br>

diff --git a/html/startPage/script.js b/html/startPage/script.js
@@ -1,7 +1,7 @@
 const { ipcRenderer } = require('electron')
-const Store = require('electron-store');
+const Store = require('electron-store')
 
-const store = new Store();
+const store = new Store()
 
 /* const customTitlebar = require('custom-electron-titlebar');
 

diff --git a/html/startPage/style.css b/html/startPage/style.css
@@ -1,10 +1,19 @@
+body {
+  max-width: 500px;
+}
+
 h1.title {
   font-family: "Lucida Console", Monaco, monospace;
 }
+
 form { display: table; }
+
 form p { display: table-row; }
+
 form p label { display: table-cell; padding-left: 16px; padding-right: 16px; text-align: center; }
+
 form p input { display: table-cell; }
+
 input#start {
   padding: 10px 78.5px;
 }