show progress bar receiving

index.html

@@ -70,6 +70,9 @@
       <h2>Decoded</h2>
       Bytes: <span id="received-packet-original-bytes">N/A</span><br>
       Length CRC-8: <span id="received-packet-original-bytes-crc">N/A</span><br>
+      <div class="progress-container">
+        <div id="received-progress" class="progress-bar"></div>
+      </div>
       Text:
       <div class="raw-data" id="decoded-text"></div><br />
   </div>

index.js

@@ -1169,6 +1169,7 @@ function updateReceivedData() {
     ), CRC_BIT_COUNT
   );
   const trustedLength = transmissionByteCountCrc === transmissionByteCountActualCrc;
+  const totalBitsTransferring = parseTotalBitsTransferring(allDecodedBits);
 
   // reduce all decoded bits based on original data sent
   allDecodedBits = removeDecodedHeadersAndPadding(allDecodedBits);
@@ -1184,6 +1185,10 @@ function updateReceivedData() {
   const correctEncodedBits = allEncodedBits.filter((b, i) => i < encodedBitCount && b === SENT_ENCODED_BITS[i]).length;
   const correctedDecodedBits = allDecodedBits.filter((b, i) => i < decodedBitCount && b === SENT_ORIGINAL_BITS[i]).length;
 
+  const receivedProgess = document.getElementById('received-progress');
+  let percentReceived = allRawBits.length / totalBitsTransferring;
+  receivedProgess.style.width = `${Math.floor(Math.min(1, percentReceived) * 100)}%`;
+
   document.getElementById('received-raw-bits').innerHTML = allRawBits
     .reduce(
       bitExpectorReducer(
@@ -1235,14 +1240,25 @@ function updateReceivedData() {
 function asHex(length) {
   return (number) => number.toString(16).padStart(length, '0').toUpperCase();
 }
-function parseTransmissionByteCountCrc(bits) {
+function parseTotalBitsTransferring(decodedBits) {
-  const offset = MAXIMUM_PACKETIZATION_SIZE_BITS;
+  const dataByteCount = parseTransmissionByteCount(decodedBits);
-  bits = bits.slice(offset, offset+8);
+  const bitCount = getPacketizationBitCount(dataByteCount * 8);
-  return bitsToInt(bits, 8);
+  const segments = getTotalSegmentCount(bitCount);
+  return segments * getChannels().length;
 }
-function parseTransmissionByteCount(bits) {
+function parseTransmissionByteCountCrc(decodedBits) {
-  bits = bits.slice(0, MAXIMUM_PACKETIZATION_SIZE_BITS);
+  const offset = MAXIMUM_PACKETIZATION_SIZE_BITS;
-  return bitsToInt(bits, MAXIMUM_PACKETIZATION_SIZE_BITS);
+  decodedBits = decodedBits.slice(offset, offset + CRC_BIT_COUNT);
+  return bitsToInt(decodedBits, CRC_BIT_COUNT);
+}
+function parseTransmissionByteCount(decodedBits) {
+  decodedBits = decodedBits.slice(0, MAXIMUM_PACKETIZATION_SIZE_BITS);
+  while(decodedBits.length < MAXIMUM_PACKETIZATION_SIZE_BITS) {
+    // assume maximum value possible
+    // until we have enough bits to find the real size
+    decodedBits.push(1);
+  }
+  return bitsToInt(decodedBits, MAXIMUM_PACKETIZATION_SIZE_BITS);
 }
 function removeEncodedPadding(bits) {
   const sizeBits = MAXIMUM_PACKETIZATION_SIZE_BITS;

style.css

@@ -21,6 +21,29 @@ body {
 canvas {
   background-color: black;
 }
+.progress-container {
+  width: 100%;
+  height: 20px;
+  border: 1px solid black;
+  background-color: darkslategray;
+}
+.progress-bar {
+  height: 100%;
+  min-height: 14px;
+  background-color: yellow;
+  position: relative;
+  z-index: 2;
+  left: 0;
+  /* transition: width 0.3s ease; */
+}
+.xprogress-container::after {
+  content: attr(data-percent) '%';
+  position: relative;
+  z-index: 2;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
 .raw-data {
   background-color: rgb(41, 59, 10);
   color: rgb(75, 185, 75);