My homework in a course about computer network, coded in javascript in order to put it on my blog and give it a HTML UI to show the detailed process.

Just a simple version of selective repeat ARQ, but maybe helpful for you to understand the algorithm further.

Selective Repeat ARQ Simulation

First of all, you may wanna check the final result of the simulation: Portal to the final result

Theory

To understand how selective repeat ARQ algorithm was implemented in my program, I recommend you understand the algorithm itself first, so that the following content can be much easier to understand.

I'll show this algorithm in the following example of two host communicating

Host A and Host B are connected with each other, and A has some data that needs to send to B

Framing

Because the data is too long to be sent at one time (just assume so), A slice the data into several pieces, and give those data sequence numbers in order to tell the proper order to combine the data, in case that the datum are not received in original order
Because the message could be corrupted when transferring, the message should contain some verification code related to the message content like CRC (Cyclic Redundancy Check)
Because B only have information in binary, B needs to know where is the start of the message and so does the end. There should be flags wrapping the whole message and the flag never appear in the middle of the message
Because B would like to know the sender of the message in order to do some further communication, the sender information should be contained in the message
Because B maybe not the receiver of the message but only the router to transmit the message, the true receiver information should be contained in the message

So far, the message should be something like this:

After such process, the message should be called as frame, which is a unit of communication in data link layer.

As for how to make flags only appear in the start and the end of a frame:

In my case, flag is 01111110 that occupies one byte of the frame. To deal with such type of flag, since there are six successive '1's in the flag, we can append a '0' every time the content of the frame appears five successive '1's. And in the decoding part, when five successive '1's was found, remove the '0' behind them, so makes the flag only appears in the start and the end of a frame

Window & Control Frame

But the sequence number could increase to infinite if A keeps sending messages, so sequence number should be limited in a specific range (usually in the range of 2^n, which makes best use of all bits).

However, when sequence numbers are in a specific range, imagine such situation:

A send a frame with sequence X to B
frame corrupted when transmitting
B found it corrupted by doing CRC and dropped it
A keeps sending following frames, and comes with another frame with sequence X
Under such situation, B could take this frame and think it the frame that B found corrupted

In order to make the algorithm work properly, control frame and window are introduced. Here's how these things make A stop sending frames when frames are corrupted:

With window and ACK (Acknowledge character) frame implemented, pretend sequence number takes 3 bits, and windows size is 3. The following text indicates sequence of sender(L) and receiver(R), contents in brackets indicates frames that are in current window:
- At the beginning:
  
  { |0|1|2| } |3|4|5|6|7|0|1|2|3|... => { |?|?|?| }
- A sends frame 0 and starts a timer for frame 0
- B received it properly
  
  { |0|1|2| } |3|4|5|6|7|0|1|2|3|... => { |0|?|?| }
- Because frame 0 is in the correct order, B transmits frame 0 to upper layer to do further process and removes frame 0 from its buffer (in order to make the process clearer, the frame 0 is still texted in the buffer), at the same time, B shifts its window forward and sends ACK frame 0 to A
  
  { |0|1|2| } |3|4|5|6|7|0|1|2|3|... => |0| { |?|?|?| }
- A received ACK frame 0, so A removes frame 0 from its buffer, stops timer for frame 0, and shifts the window forward
  
  |0| { |1|2|3| } |4|5|6|7|0|1|2|3|... => |0| { |?|?|?| }
- A sends frame 1 and starts a timer for frame 1
- frame 1 corrupted when transmitting
- B received corrupted frame and drops it
- A sent frame 2, frame3, and B received them properly and sent ACK frame 2, 3 to A. But due to the first element in the window is not received, B could not shift the window
  
  |0| { |1|2|3| } |4|5|6|7|0|1|2|3|... => |0| { |?|2|3| }
- Also, because the first element in the window didn't receive an ACK frame, A cannot move the window neither. Because A finished sending mission in the window, A stops sending the next frame, which is frame 4, and waits for B to send ACK frame 1
- Timer for frame 1 found frame 1 overtime, so A sends frame 1 again
- B received it properly
  
  |0| { |1|2|3| } |4|5|6|7|0|1|2|3|... => |0| { |1|2|3| }
- B shifts the window, transmits frame 1, 2, 3 to upper layer, and sends ACK frame 1 to A
  
  |0| { |1|2|3| } |4|5|6|7|0|1|2|3|... => |0|1|2|3| { |?|?|?| }
- A removes frame 1, 2, 3 from buffer and shifts the window
  
  |0|1|2|3| { |4|5|6| } |7|0|1|2|3|... => |0|1|2|3| { |?|?|?| }
Under such implementation, there is nearly no problems for A and B can communicate with each other. But the overtime machinic seems too time consuming if ever time a frame is corrupted A will wait for a certain period. So we can make B send a NAK (Negative Acknowledgment) frame to make A resend faster (if B can recognize the sender and sequence number of the corrupted frame)

We call ACK frames and NAK frames as control frames, and normal frames that sending data are called data frames

I think you may have a brief knowledge to selective repeat ARQ after my explanation, now I propose following principles to enhance your knowledge:

Sender will not shift window until the first frames in the window receives ACK frame
Receiver will not transmit data to upper layer nor shift the window until the frames in the window are received in the right order
Control frames are dropped once confirmed
Every frame has its timer, they are started once the frame is sent or resent

Details

Notice that the control frames should be sent with the highest priority. Imaging the frame sending buffer has a lot of data frames queuing to be sent. If let the control frames queue behind them, they will never get sent due to the window limit.
In order to tell the frame type, it's better to add a segment in frame. In my program, the frame is coded as following:

| flag | type | destination | source | sequence | data | CRC | flag |

| 1 byte | 1 bit | 2 bits | 2 bits | 4 bits | at least 1 byte | 1 byte | 1 byte |

So the minimal length of the frame is 41 bits. And in order to make timeout a short time to wait, the maximal length shouldn't be too long. In my program, I set max length to 65 bits, which means the data has max length of 4 bytes. When the data size is bigger than max length, the data is sliced into pieces.
When corruption rate of the channel is rather a big number, the max length of the frame should be shorter in order to avoid resending.

Error Control

In order to deal with flipping bit that may occur in any part of the frame, discuss every possible situation is necessary for robustness of the program

How receiver's binary buffer deal with flags

If everything goes right, the binary buffer should receive: 01111110 ... 01111110, then receiver will take it out from the buffer as a frame and delete those bits in buffer

When the binary buffer receives following stuff: ... 01111110, which means flag appears after some data. In such situation. The bin buffer should drop all the data before the flag and wait for following data

When the binary buffer receives following stuff:01111110 ...(only a few bits)... 01111110, which means the second flag appears before the frame reaches it's minimal length. The bin buffer should drop all bits before the second flag and wait for following data
Start Flag

When a bit was flipped in the start flag, receiver cannot recognize a frame anymore, the related frame drops, only waiting for timeout
End Flag

When a bit was flipped in the end flag, receiver will take the start flag of the next frame as the end flag of the former one, which will break the current frame and the next frame

However, the receiver can still get the sender address and the sequence of the first frame, so receiver will send NAK frame about the first frame to sender, but directly drop the next frame without sending NAK frame, only waiting for timeout
Destination

When a bit was flipped in the destination, the receiver could not receive the frame at all, only waiting for timeout
Source

When a bit was flipped in the source, the receiver will find CRC doesn't match and may send a NAK frame to a wrong host. If the wrong host happen to have connection to the receiver, it's also not a big deal since the worst situation is that the wrong host will send a frame to the receiver
Sequence

When a bit was flipped in the sequence, the receiver will find CRC doesn't match and send a NAK frame about a wrong frame to the sender. Not a big deal since the worst situation is that the sender will repeat a frame and wait for the flipped frame until timeout
Data

When a bit was flipped in the sequence, the receiver will find CRC doesn't match and send a NAK frame to the sender
CRC

When a bit was flipped in the sequence, the receiver will find CRC doesn't match and send a NAK frame to the sender

Source

For ARQ_Simulator.js

Utilities

const START_TIME = Date.now();

const FrameSenderStatus = {
    Queuing: 0,
    Sending: 1,
    WaitingAck: 2,
    Timeout: 3,
    Acked: 4,
}

const FrameType = {
    Data: 0,
    Control: 1,
}

function bin2bytes(bin) {
    if (bin.length % 8 != 0) // Padding 0 to the first byte
        bin = Array(8 - bin.length % 8).fill(0).concat(bin);
    var bytes = [];
    for (var i = 0; i < bin.length; i += 8) {
        var byte = 0;
        for (var j = 0; j < 8; j++) {
            byte = byte << 1;
            if (i + j < bin.length)
                byte += bin[i + j];
        }
        bytes.push(byte);
    }
    return bytes;
}

function bytes2bin(bytes) {
    if (typeof (bytes) == "number")
        bytes = [bytes];
    var bin = [];
    for (var i = 0; i < bytes.length; i++) {
        if (bytes[i] > 255 || bytes[i] < 0)
            throw "Byte out of range";
        for (var j = 0; j < 8; j++)
            bin.push((bytes[i] >> (7 - j % 8)) & 1);
    }
    return bin;
}

function str2bytes(str) {
    // Convert a string to an array of bytes
    // UTF-8 Supported
    var bytes = [];
    for (var i = 0; i < str.length; i++) {
        var charCode = str.charCodeAt(i);
        if (charCode > 0xFFFF) {
            throw "Character out of range";
        }
        if (charCode < 0x80) {
            bytes.push(charCode);
        } else if (charCode < 0x800) {
            bytes.push(0xC0 | (charCode >> 6), 0x80 | (charCode & 0x3F));
        } else {
            bytes.push(0xE0 | (charCode >> 12), 0x80 | ((charCode >> 6) & 0x3F), 0x80 | (charCode & 0x3F));
        }
    }
    return bytes;
}

function bytes2str(bytes) {
    // Convert an array of bytes to a string
    // UTF-8 Supported
    var str = "";
    for (var i = 0; i < bytes.length; i++) {
        if (bytes[i] < 0x80) {
            str += String.fromCharCode(bytes[i]);
        } else if (bytes[i] < 0xE0) {
            str += String.fromCharCode(((bytes[i] & 0x1F) << 6) | (bytes[i + 1] & 0x3F));
            i++;
        } else {
            str += String.fromCharCode(((bytes[i] & 0x0F) << 12) | ((bytes[i + 1] & 0x3F) << 6) | (bytes[i + 2] & 0x3F));
            i += 2;
        }
    }
    return str;
}

function binArray2CubeText(bin) {
    var str = bin.join("");
    // replace 0 with ▢ and 1 with ▩
    str = str.replace(/0/g, "▢").replace(/1/g, "▩");
    return str;
}

function CubeText2binArray(str) {
    // replace ▢ with 0 and ▩ with 1 and make it bin array
    str = str.replace(/▢/g, "0").replace(/▩/g, "1").replace(/ /g, "");
    var bin = [];
    for (var i = 0; i < str.length; i++) {
        bin.push(parseInt(str[i]));
    }
    return bin;
}

function crc8(data) {
    // CRC-8-CCITT
    // data: array of bytes
    var POLY = 0x07,
        INIT = 0,
        XOROUT = 0x55;
    for (var crc = INIT, i = 0; i < data.length; i++) {
        crc = crc ^ data[i];
        for (var j = 0; j < 8; j++) {
            crc = crc & 0x80 ? crc << 1 ^ POLY : crc << 1;
        }
    }
    return (crc ^ XOROUT) & 0xFF;
}

function BitStuffing(binArr) {
    var stuffed = [];
    var count = 0;
    for (var i = 0; i < binArr.length; i++) {
        if (binArr[i] == 1) {
            count++;
        } else {
            count = 0;
        }
        stuffed.push(binArr[i]);
        if (count == 5) {
            stuffed.push(0);
            count = 0;
        }
    }
    return stuffed;
}

function BitDestuffing(binArr) {
    var destuffed = [];
    var count = 0;
    for (var i = 0; i < binArr.length; i++) {
        if (binArr[i] == 1) {
            count++;
        } else {
            count = 0;
        }
        destuffed.push(binArr[i]);
        if (count == 5) {
            i++;
            count = 0;
        }
    }
    return destuffed;
}

class FrameHelper {
    static CheckFrame(frame) {
        // Check if the frame is valid
        // frame: binary array
        // return: boolean
        if (frame.slice(0, 8).join("") != "01111110" || frame.slice(-8).join("") != "01111110")
            return false

        var payload = BitDestuffing(frame.slice(8, -8));

        var crc = payload.slice(-8);
        var crcCal = crc8(bin2bytes(payload.slice(0, -8)));

        if (crcCal != bin2bytes(crc)[0]) {
            return false
        }
        return true;
    }

    static MakeFrame(destination, source, seq, byteData, type = FrameType.Data) {
        // return: binary array

        if (destination > 3 || destination < 0 || source > 3 || source < 0 || seq > 15 || seq < 0)
            throw "Invalid destination, source or sequence";
        if (byteData.length == 0)
            throw "Data cannot be empty";
        if (type > FrameType.MAX || type < 0)
            throw "Invalid frame type";

        var frame = [];
        var flag = bytes2bin(0x7E)
        var control = [type, (destination << 6) | (source << 4) | seq];
        var binData = bytes2bin(byteData);
        if (binData.length < 8)
            binData = Array(8 - binData.length).fill(0).concat(binData);
        var crc = crc8(control.concat(byteData));

        var payload = bytes2bin(control).slice(7).concat(binData).concat(bytes2bin(crc));
        payload = BitStuffing(payload);

        frame = frame.concat(flag);
        frame = frame.concat(payload);
        frame = frame.concat(flag);

        return frame;
    }

    static MakeFrameFromeText(destination, source, startSeq, text, maxFrameSize) {
        // return: 2D array, each element is a binary array frame
        var frames = [];
        var data = str2bytes(text);
        var seq = startSeq;
        var maxDataSize = maxFrameSize - 33;
        for (var i = 0; i < data.length; i += maxDataSize) {
            var frameData = data.slice(i, i + maxDataSize);
            frames.push(FrameHelper.MakeFrame(destination, source, seq, frameData));
            seq = (seq + 1) % 16;
        }
        return frames;
    }

    static ExtractFrame(frame, checkFrame = true) {
        // Extract the frame into destination, source, sequence and data
        // frame: binary array
        // return: object {destination, source, sequence, data}
        if (checkFrame && !FrameHelper.CheckFrame(frame))
            return null;

        var payload = BitDestuffing(frame.slice(8, -8));

        var type = payload[0];
        var destination = bin2bytes(payload.slice(1, 3))[0];
        var source = bin2bytes(payload.slice(3, 5))[0];
        var sequence = bin2bytes(payload.slice(5, 9))[0];
        var data = bin2bytes(payload.slice(9, -8));

        return {
            type: type,
            destination: destination,
            source: source,
            sequence: sequence,
            data: data
        }
    }

    static DisplayFrameInText(frame, split = "<br>", end = "<br><br>") {
        // Display the frame in text
        // frame: binary array
        // return: string
        var frameObj = FrameHelper.ExtractFrame(frame);
        if (frameObj == null)
            return null;
        if (frameObj.type == FrameType.Control) {
            if (frameObj.data[0] == 0x01)
                return " x Sequence: " + frameObj.sequence + split + "ACK Frame" + end;
            else if (frameObj.data[0] == 0x00)
                return " x Sequence: " + frameObj.sequence + split + "NAK Frame" + end;
        }
        return " @ Sequence: " + frameObj.sequence + split + " + Data: " + bytes2str(frameObj.data).slice(0, 25) + (bytes2str(frameObj.data).length > 25 ? " ... " : "") + end;
    }

    static FrameFinder(buffer, minFrLen) {
        // Find the first frame in the buffer by searching for the flags
        // buffer: binary array
        // return: {first frame in the buffer, start, end} or null
        if (buffer.length < minFrLen)
            return null;

        // Find the start of the frame
        var start = 0;
        while (
            buffer.slice(start, start + 8).join("") != "01111110" &&
            start + minFrLen < buffer.length
        )
            start++;
        if (start + minFrLen > buffer.length || buffer.slice(start, start + 8).join("") != "01111110")
            return null;

        // Find the end of the frame
        var end = buffer.length;
        while (
            buffer.slice(end - 8, end).join("") != "01111110" &&
            end - minFrLen > start
        )
            end--;
        if (end - minFrLen < start || buffer.slice(end - 8, end).join("") != "01111110")
            return null;

        return {
            frame: buffer.slice(start, end),
            start: start,
            end: end
        };
    }
}

Host Class

class Host {
    constructor(simulator, id, UpperLayerFunc = () => { return; }) {
        this.sim = simulator;
        this.id = id;
        this.UpperLayerFunc = UpperLayerFunc;
        this.tickFlag = false;
        this.ui = null;
        this.sendingFrame = false;
        this.tickCnt = 0;

        this.sentBitCnt = 0;
        this.processedBitCnt = 0;

        this.receiveBinBuffer = []; // binary array

        this.sendWinSeq = 0;
        this.frameSender = [];
        // array of {frame, receiverID, binIndex, sequence, feedback, controlFrame, timeout, status}

        this.receiveFrameBuffer = Array(this.sim.para.winLen).fill(null);
        this.receiveWinSeq = 0; // sequence number of the first frame in the receive window

        this.sim.hostList.push(this);

        this.Ticker = setInterval(() => {
            if (!this.tickFlag)
                this.Tick();
            else
                console.log("Host " + this.id + " is still ticking")
        }, this.sim.para.tick);
    }

    Tick() {
        this.tickFlag = true;
        this.SendListener();
        this.ReceiveListener();
        this.tickCnt++;
        this.tickFlag = false;
    }

    PushToReceiveFrameBuffer(extractedFrame) {
        // push the extracted frame to the receive frame buffer
        var sequence = extractedFrame.sequence;

        var distance = Math.min((this.receiveWinSeq - sequence + this.sim.para.seq) % this.sim.para.seq, (sequence - this.receiveWinSeq + this.sim.para.seq) % this.sim.para.seq);
        if (distance == 0) {
            this.receiveFrameBuffer[0] = extractedFrame;
        } else {
            var expected = []
            for (var i = 1; i < this.sim.para.winLen; i++)
                expected.push((this.receiveWinSeq + i) % this.sim.para.seq);
            if (expected.indexOf(sequence) == -1) {
                console.log("Host " + this.id + " repeated frame " + sequence + " as now is already to frame " + this.receiveWinSeq);
                return;
            }
            this.receiveFrameBuffer[expected.indexOf(sequence) + 1] = extractedFrame;
            console.log("👉Host " + this.id + " Added frame " + sequence + " to receive buffer " + "as " + expected.indexOf(sequence) + 1);
            console.log(this.receiveFrameBuffer);
        }

        while (this.receiveFrameBuffer[0] != null) {
            this.UpperLayerFunc(this.receiveFrameBuffer[0].data);

            console.log("▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁")
            console.log("👇Host " + this.id + " Removed frame " + this.receiveWinSeq + " from receive buffer");
            console.log("ASCII: " + bytes2str(this.receiveFrameBuffer[0].data));
            console.log("▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔")
            this.receiveFrameBuffer.shift();
            this.receiveFrameBuffer.push(null);
            this.receiveWinSeq = (this.receiveWinSeq + 1) % this.sim.para.seq;
            console.log("👀 Host " + this.id + " Now receive window is at " + this.receiveWinSeq);
        }
    }

    HandleControlFrame(extractedFrame) {
        for (var i = 0; i < this.sim.para.winLen; i++) {
            var fs = this.frameSender[i];
            if (fs == null || fs.sequence != extractedFrame.sequence)
                continue;
            fs.timeout = null;
            fs.feedback = true;
            if (extractedFrame.data[0] == 0x01) {
                console.log("    👮🟢Host " + this.id + " received ACK frame " + extractedFrame.sequence + " from host " + extractedFrame.source);
                if (this.ui) {
                    this.ui.LogInfo("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;👮‍🟢 Received ACK frame" + extractedFrame.sequence, "frameSenderBufferLog");
                }
                fs.status = FrameSenderStatus.Acked;
                break;
            }
            console.log("    👮🔴Host " + this.id + " received NAK frame " + extractedFrame.sequence + " from host " + extractedFrame.source);
            if (this.ui) {
                this.ui.LogInfo("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;👮🔴 Received NAK frame " + extractedFrame.sequence, "frameSenderBufferLog");
            }
            fs.binIndex = 0;
            break;
        }
    }

    HandleDataFrame(extractedFrame) {
        // Check if the frame is in the receive window
        var distance = Math.min((this.receiveWinSeq - extractedFrame.sequence + this.sim.para.seq) % this.sim.para.seq, (extractedFrame.sequence - this.receiveWinSeq + this.sim.para.seq) % this.sim.para.seq);
        if (distance >= this.sim.para.winLen + 1) {
            console.log("❌Host " + this.id + " received frame " + extractedFrame.sequence + " from host " + extractedFrame.source + " out of window");
            return;
        }

        // Send ACK frame to the source
        var fbFrame = FrameHelper.MakeFrame(
            extractedFrame.source,
            this.id,
            extractedFrame.sequence,
            [0x01],
            FrameType.Control,
        );
        this.LoadFrameToSender(fbFrame);

        // Save the frame to the receive buffer
        this.PushToReceiveFrameBuffer(extractedFrame);
    }

    HandleCorruptedFrame(extractedFrame) {
        // check if the sender id is in the host list, if so, send NAK frame to the source
        if (this.sim.FindHostById(extractedFrame.source) != null) {
            var fbFrame = FrameHelper.MakeFrame(
                extractedFrame.source,
                this.id,
                extractedFrame.sequence,
                [0x00],
                FrameType.Control,
            );
            this.LoadFrameToSender(fbFrame);
            if (this.ui) {
                this.ui.LogInfo("&nbsp;&nbsp;✋🏻 Sent NAK to " + extractedFrame.source + " about frame " + extractedFrame.sequence, "receiveBinBufferLog");
            }
        } else if (this.ui) {
            this.ui.LogInfo("&nbsp;&nbsp;❌ Source info corrupted, dropped", "receiveBinBufferLog");
        }
    }

    ReceiveListener() {
        // Listen to the receive bin buffer, extract frame and push to receive frame buffer

        // Check if the first 8 bytes are a valid flag
        if (
            this.receiveBinBuffer.length >= 8 &&
            this.receiveBinBuffer.slice(0, 8).join("") != "01111110"
        ) {
            // If not, remove the first byte
            this.receiveBinBuffer.shift();
            this.processedBitCnt++;
            return;
        }

        if (this.receiveBinBuffer.length < this.sim.para.minFrLen)
            return

        // Check if there is valid flag at the middle of the buffer
        if (
            this.receiveBinBuffer.length >= 40 &&
            this.receiveBinBuffer.slice(1, this.receiveBinBuffer.length - 1).join("").indexOf("01111110") != -1
        ) {
            // If yes, remove the bytes before the flag
            if (this.ui) {
                this.ui.LogInfo("♊ Two or more flag in first " + this.sim.para.minFrLen + " bits", "receiveBinBufferLog");
            }
            var flagIndex = this.receiveBinBuffer.slice(1, this.receiveBinBuffer.length - 1).join("").indexOf("01111110");
            this.receiveBinBuffer = this.receiveBinBuffer.slice(flagIndex);
            this.processedBitCnt += flagIndex;
            return;
        }

        // if there is enough data to extract a frame
        var fFinder = FrameHelper.FrameFinder(this.receiveBinBuffer, this.sim.para.minFrLen);
        if (!fFinder)
            return;

        var frame = fFinder.frame;
        this.receiveBinBuffer = this.receiveBinBuffer.slice(fFinder.end);
        this.processedBitCnt += fFinder.end;

        // Extract the frame
        if (FrameHelper.CheckFrame(frame)) { // if the frame is valid
            var extractedFrame = FrameHelper.ExtractFrame(frame);

            if (extractedFrame.destination != this.id) {
                console.warn("[DESTINATION] Host " + this.id + " received frame for host " + extractedFrame.destination);
                console.warn("[DESTINATION] frame: ", frame);
                if (this.ui) {
                    this.ui.LogInfo("🤷‍♂️ Not frame for this host, dropped", "receiveBinBufferLog");
                }
                return;
            }

            if (extractedFrame.type == FrameType.Control) {
                // If it's a ACK or NAK frame, check frame sender and update the buffer
                // This also shows the host is the sender in this conversation
                this.HandleControlFrame(extractedFrame);
            } else {
                this.HandleDataFrame(extractedFrame);
                if (this.ui) {
                    this.ui.LogInfo("📧 Valid data frame " + extractedFrame.sequence + " found, sent it to Frame Receive Buffer", "receiveBinBufferLog");
                }
            }
        } else { // if the frame is corrupted, try to extract and send NAK
            console.warn("[CORRUPTED] Host " + this.id + " received corrupted frame");
            console.warn("[CORRUPTED] frame: ", frame);

            if (this.ui) {
                this.ui.LogInfo("❓ Corrupted frame received, trying to handle", "receiveBinBufferLog");
            }

            var extractedFrame = FrameHelper.ExtractFrame(frame, false);

            if (extractedFrame.destination != this.id) {
                console.warn("[DESTINATION] Host " + this.id + " received frame for host " + extractedFrame.destination);
                console.warn("[DESTINATION] frame: ", frame);
                if (this.ui) {
                    this.ui.LogInfo("🤷‍♂️ Not frame for this host, dropped", "receiveBinBufferLog");
                }
                return;
            }

            this.HandleCorruptedFrame(extractedFrame);
        }
    }

    LoadFrameToSender(frame) {
        var extractedFrame = FrameHelper.ExtractFrame(frame);
        this.frameSender.push({
            frame: frame.slice(),
            receiverID: extractedFrame.destination,
            binIndex: 0,
            sequence: extractedFrame.sequence,
            feedback: false,
            controlFrame: extractedFrame.type == FrameType.Control,
            timeout: null, // timeout = null means the frame is not sent yet
            status: FrameSenderStatus.Queuing,
        });
    }

    SendListener() {
        // Listen to the send frame buffer, send the frame to the destination using Selective Repeat ARQ protocol
        if (this.frameSender.length == 0) {
            return;
        }

        // when not sending frame, check if there is any control frame, if so, make the first control frame found the top of the buffer
        for (var i = 0; i < this.frameSender.length && !this.sendingFrame; i++) {
            if (this.frameSender[i].controlFrame == true) {
                console.log("👆👆👆Contorl frame has moved to the top of the buffer")
                if (this.ui) {
                    this.ui.LogInfo("👆👆👆 Contorl frame has moved to the top of the buffer", "frameSenderBufferLog");
                }
                this.frameSender.unshift(this.frameSender.splice(i, 1)[0]);
                break;
            }
        }

        while (
            this.frameSender.length > 0 &&
            this.frameSender[0].status == FrameSenderStatus.Acked
        ) {
            console.log("      🚮 Host " + this.id + " Removed frame " + this.frameSender[0].sequence + " from sender buffer");
            console.log("👀 Host " + this.id + " Now the send window is at " + this.frameSender[0].sequence)
            if (this.ui) {
                this.ui.LogInfo("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;🚮 Removed frame " + this.frameSender[0].sequence, "frameSenderBufferLog");
            }
            this.frameSender.shift();
        }

        // Find the frame that is being sending or frist frame waiting to be sent
        var currentFrameIndex = -1;
        for (var i = 0; i < this.sim.para.winLen && i < this.frameSender.length; i++) {
            var currentFS = this.frameSender[i];
            if (
                currentFS.timeout == null &&
                (currentFS.feedback == false || currentFS.binIndex != currentFS.frame.length)
            ) {
                if (!currentFS.feedback) {
                    currentFrameIndex = i;
                    break;
                }
                if (!this.sendingFrame) {
                    currentFrameIndex = i;
                    break;
                }
            }
        }

        if (currentFrameIndex == -1) {
            // When all frames in the window are sent
            // Check time out in the window range
            for (var i = 0; i < this.sim.para.winLen && i < this.frameSender.length; i++) {
                var currentFS = this.frameSender[i];
                if (currentFS.timeout != null && (this.tickCnt > currentFS.timeout)) {
                    // If time out, reset the frame and send it again

                    console.log("⏰Host " + this.id + " time out frame " + currentFS.sequence + " to host " + currentFS.receiverID);
                    console.log(currentFS.timeout)
                    console.log(this.tickCnt)
                    if (this.ui) {
                        this.ui.LogInfo("⏰ Time out frame " + currentFS.sequence, "frameSenderBufferLog");
                    }

                    currentFS.status = FrameSenderStatus.Timeout;
                    currentFS.binIndex = 0;
                    currentFS.timeout = null;
                    currentFrameIndex = i;
                    break;
                }
            }
        }

        if (currentFrameIndex == -1) {
            this.sendingFrame = false;
            return;
        }

        // Send a bit of the frame to the destination
        var destination = this.sim.FindHostById(this.frameSender[currentFrameIndex].receiverID);
        var currentFS = this.frameSender[currentFrameIndex];

        // Update the frameSenderInfo
        if (currentFS.binIndex != currentFS.frame.length) {

            if (currentFS.binIndex == 0) {
                this.sendingFrame = true;
                var frameContent = bytes2str(FrameHelper.ExtractFrame(currentFS.frame).data);
                console.log("📡Host " + this.id + " sending frame:  \"" + frameContent + "\"  to host " + currentFS.receiverID + " (sequence: " + currentFS.sequence);
                if (this.ui) {
                    this.ui.LogInfo("📡 Sending frame " + currentFS.sequence + (currentFS.controlFrame ? " (control frame)" : ""), "frameSenderBufferLog");
                }
                currentFS.status = FrameSenderStatus.Sending;
                currentFS.feedback = false;
            }

            destination.receiveBinBuffer.push(currentFS.frame[currentFS.binIndex])

            var destHost = this.sim.hostList[this.id == 0 ? 1 : 0];
            this.sentBitCnt++;

            // ================================================================================
            // Mannually corrupting the bit randomly
            // ================================================================================
            if (Math.random() < this.sim.para.corRate) {
                destination.receiveBinBuffer[destination.receiveBinBuffer.length - 1] = 1 - destination.receiveBinBuffer[destination.receiveBinBuffer.length - 1];

                // Judge which part of the frame is corrupted
                if (currentFS.binIndex < 8) {
                    console.warn("🔴Host " + this.id + " corrupted the header of frame " + currentFS.sequence + " to host " + currentFS.receiverID);
                } else if (currentFS.binIndex < 9) {
                    console.warn("🔴Host " + this.id + " corrupted the type of frame " + currentFS.sequence + " to host " + currentFS.receiverID);
                } else if (currentFS.binIndex < 11) {
                    console.warn("🔴Host " + this.id + " corrupted the destination of frame " + currentFS.sequence + " to host " + currentFS.receiverID);
                } else if (currentFS.binIndex < 13) {
                    console.warn("🔴Host " + this.id + " corrupted the source of frame " + currentFS.sequence + " to host " + currentFS.receiverID);
                } else if (currentFS.binIndex < 17) {
                    console.warn("🔴Host " + this.id + " corrupted the sequence of frame " + currentFS.sequence + " to host " + currentFS.receiverID);
                } else if (currentFS.binIndex < currentFS.frame.length - 16) {
                    console.warn("🔴Host " + this.id + " corrupted the data of frame " + currentFS.sequence + " to host " + currentFS.receiverID);
                } else if (currentFS.binIndex < currentFS.frame.length - 8) {
                    console.warn("🔴Host " + this.id + " corrupted the checksum of frame " + currentFS.sequence + " to host " + currentFS.receiverID);
                } else {
                    console.warn("🔴Host " + this.id + " corrupted the end of frame " + currentFS.sequence + " to host " + currentFS.receiverID);
                }

                var anotherUI = this.sim.hostList[this.id == 0 ? 1 : 0].ui;
                if (anotherUI) {
                    if (currentFS.binIndex < 8) {
                        anotherUI.LogInfo("🔴 Manually corrupted a bit { header } of frame " + currentFS.sequence + (currentFS.controlFrame ? " (control frame)" : ""), "receiveBinBufferLog");
                    } else if (currentFS.binIndex < 9) {
                        anotherUI.LogInfo("🔴 Manually corrupted a bit { type } of frame " + currentFS.sequence + (currentFS.controlFrame ? " (control frame)" : ""), "receiveBinBufferLog");
                    } else if (currentFS.binIndex < 11) {
                        anotherUI.LogInfo("🔴 Manually corrupted a bit { destination } of frame " + currentFS.sequence + (currentFS.controlFrame ? " (control frame)" : ""), "receiveBinBufferLog");
                    } else if (currentFS.binIndex < 13) {
                        anotherUI.LogInfo("🔴 Manually corrupted a bit { source } of frame " + currentFS.sequence + (currentFS.controlFrame ? " (control frame)" : ""), "receiveBinBufferLog");
                    } else if (currentFS.binIndex < 17) {
                        anotherUI.LogInfo("🔴 Manually corrupted a bit { sequence } of frame " + currentFS.sequence + (currentFS.controlFrame ? " (control frame)" : ""), "receiveBinBufferLog");
                    } else if (currentFS.binIndex < currentFS.frame.length - 16) {
                        anotherUI.LogInfo("🔴 Manually corrupted a bit { data } of frame " + currentFS.sequence + (currentFS.controlFrame ? " (control frame)" : ""), "receiveBinBufferLog");
                    } else if (currentFS.binIndex < currentFS.frame.length - 8) {
                        anotherUI.LogInfo("🔴 Manually corrupted a bit { checksum } of frame " + currentFS.sequence + (currentFS.controlFrame ? " (control frame)" : ""), "receiveBinBufferLog");
                    } else {
                        anotherUI.LogInfo("🔴 Manually corrupted a bit { end } of frame " + currentFS.sequence + (currentFS.controlFrame ? " (control frame)" : ""), "receiveBinBufferLog");
                    }
                }

                if (destHost.ui) {
                    destHost.ui.errorArr.push(this.sentBitCnt - 1)
                }

            }
            // ================================================================================

            currentFS.binIndex++;
            if (currentFS.controlFrame == true && currentFS.binIndex == currentFS.frame.length) {
                console.log("  🔵Host" + this.id + " sent control frame " + currentFS.sequence + " to host " + currentFS.receiverID);
                if (this.ui) {
                    this.ui.LogInfo("&nbsp;&nbsp;🔵 Sent control frame " + currentFS.sequence, "frameSenderBufferLog");
                }
                // remove current frame from the buffer due to it's control frame and has been sent
                this.frameSender.splice(currentFrameIndex, 1);
            }
        } else {

            this.sendingFrame = false;

            if (currentFS.timeout == null && currentFS.feedback == false) {
                currentFS.timeout = this.tickCnt + this.sim.para.timeout;
                // log a message to say that timeout is set
                console.log("  ⌚Host " + this.id + " timer started for frame " + currentFS.sequence + " to host " + currentFS.receiverID);
                if (this.ui) {
                    this.ui.LogInfo("&nbsp;&nbsp;⌚ Timer started for frame " + currentFS.sequence, "frameSenderBufferLog");
                }
                currentFS.status = FrameSenderStatus.WaitingAck;
            }
        }
    }

    SendMessage(message, receiverID) {
        // Generate frames and add it to the frameSender
        var frameList = FrameHelper.MakeFrameFromeText(receiverID, this.id, this.sendWinSeq, message, this.sim.para.maxFrLen);
        this.sendWinSeq = (this.sendWinSeq + frameList.length) % this.sim.para.seq;
        for (var i = 0; i < frameList.length; i++) {
            this.LoadFrameToSender(frameList[i]);
        }
    }
}

Simulator Class

class Simulator {
    constructor(initHostNum, para) {
        // JS grammar trap: even these parameters have default values, you can't use foo(a,c=xxx) to escape parameter b
        // so why don't I use {} to wrap the parameters

        this.hostList = [];
        var timeout = para.timeout;
        console.log("Timeout is: " + timeout + "ms according to the tick and frame length")
        this.para = {
            seq: para.seq, // Squence has 4 bits if SEQ = 16
            winLen: para.windowlen, // Window length
            tick: para.tick, // Tick in milliseconds
            minFrLen: para.minFrameLen, // Minimum frame length
            maxFrLen: para.maxFrameLen, // Maximum frame length
            corRate: para.corruptionRate, // Corruption rate of the channel
            timeout: timeout // Timeout in tick, meaning after how many ticks the sender will resend the frame
        };

        for (var i = 0; i < initHostNum; i++) {
            var _ = new Host(this, i);
        }
    }

    FindHostById(id) {
        for (var i = 0; i < this.hostList.length; i++) {
            if (this.hostList[i].id == id)
                return this.hostList[i];
        }
        return null;
    }
}

HostUI Class

class HostUI {
    constructor(host, simulator) {
        this.host = host;
        this.host.ui = this;
        this.sim = simulator;
        this.messageBuffer = [];
        this.errorArr = [];

        // hostX_userInput, input textare
        this.userInputUI = document.getElementById("host" + host.id + "_userInput");
        // hostX_sendButton, button
        this.sendButtonUI = document.getElementById("host" + host.id + "_sendButton");
        // hostX_frameSenderBuffer, div
        this.frameSenderUI = document.getElementById("host" + host.id + "_frameSenderBuffer");
        // hostX_receiveBinBuffer, div
        this.receiveBinBufferUI = document.getElementById("host" + host.id + "_receiveBinBuffer");
        // hostX_frameReceiverBuffer, div
        this.frameReceiverUI = document.getElementById("host" + host.id + "_frameReceiverBuffer");
        // hostX_message, textarea
        this.messageUI = document.getElementById("host" + host.id + "_message");

        this.sendButtonUI.onclick = () => {
            if (this.userInputUI.value != "") {
                this.host.SendMessage(this.userInputUI.value, this.host.id == 0 ? 1 : 0);
            }
        }

        host.UpperLayerFunc = this.ShowInMessageUI.bind(this);

        // set interval to update the UI
        this.uiTicker = setInterval(() => {
            this.Update();
        }, this.sim.para.tick / 2);
    }

    LogInfo(message, logger) {
        // log a message to the host_{logger}
        // logger: frameSenderBufferLog, receiveBinBufferLog
        var logUI = document.getElementById("host" + this.host.id + "_" + logger);
        if (logUI != null) {
            var date = new Date();
            var time = date.toLocaleTimeString() + ": ";
            logUI.innerHTML += message + "<br>";
            logUI.scrollTop = logUI.scrollHeight;
        }
    }

    ShowInMessageUI(message) {
        this.messageUI.value = "";
        var date = new Date();
        var time = date.toLocaleTimeString();
        this.messageBuffer.push({ message: message, time: time });
        for (var i = 0; i < this.messageBuffer.length; i++) {
            this.messageUI.value += this.messageBuffer[i].time + " | " + bytes2str(this.messageBuffer[i].message) + "\n";
        }
        // scroll to the bottom
        this.messageUI.scrollTop = this.messageUI.scrollHeight;
    }

    Update() {
        this.UpdateFrameSenderUI();
        this.UpdateReceiveBinBufferUI();
        this.UpdateFrameReceiveBufferUI();
    }

    UpdateFrameSenderUI() {
        this.frameSenderUI.innerHTML = "";
        // remove all child
        while (this.frameSenderUI.firstChild) {
            this.frameSenderUI.removeChild(this.frameSenderUI.firstChild);
        }
        for (var i = 0; i < this.host.frameSender.length; i++) {
            var frSenderInfo = this.host.frameSender[i];
            var frameUI = document.createElement("div");
            frameUI.className = "frame";
            frameUI.innerHTML = FrameHelper.DisplayFrameInText(frSenderInfo.frame);
            // adjust text size
            frameUI.style.fontSize = 3 + "px";
            // adjust text color
            if (frSenderInfo.status == FrameSenderStatus.Sending) {
                frameUI.style.color = "rgb(51, 204, 255)"; // blue
            } else if (frSenderInfo.status == FrameSenderStatus.Acked) {
                frameUI.style.color = "rgb(51, 255, 0)"; // green
            } else if (frSenderInfo.status == FrameSenderStatus.Queuing) {
                frameUI.style.color = "white";
            } else if (frSenderInfo.status == FrameSenderStatus.Timeout) {
                frameUI.style.color = "rgb(255, 51, 51)"; // red
            } else if (frSenderInfo.status == FrameSenderStatus.WaitingAck) {
                frameUI.style.color = "rgb(255, 236, 139)"; // yellow
            }
            this.frameSenderUI.appendChild(frameUI);
        }
    }

    UpdateReceiveBinBufferUI() {
        // Update errorArr, drop expired errors
        for (var i = 0; i < this.errorArr.length; i++) {
            if (this.errorArr[i] < this.host.processedBitCnt) {
                this.errorArr.splice(i, 1);
                i--;
            }
        }
        var binText = binArray2CubeText(this.host.receiveBinBuffer);
        this.receiveBinBufferUI.innerHTML = "";
        // remove all child
        while (this.receiveBinBufferUI.firstChild) {
            this.receiveBinBufferUI.removeChild(this.receiveBinBufferUI.firstChild);
        }
        for (var i = 0; i < binText.length; i++) {
            if (this.errorArr.indexOf(i + this.host.processedBitCnt) == -1) {
                this.receiveBinBufferUI.innerHTML += binText[i];
            } else {
                // append span child
                var span = document.createElement("span");
                span.className = "error";
                span.innerHTML = binText[i];
                this.receiveBinBufferUI.appendChild(span);
            }
            if (i % 8 == 7) {
                this.receiveBinBufferUI.innerHTML += " ";
            }
        }
        // scroll to bottom
        this.receiveBinBufferUI.scrollTop = this.receiveBinBufferUI.scrollHeight;

        if (this.errorArr.length == 0) {
            this.receiveBinBufferUI.style.border = "3px solid green";
        } else if (this.errorArr.length > 0 && this.errorArr.length < 8) {
            this.receiveBinBufferUI.style.border = "3px solid red";
        }
    }

    UpdateFrameReceiveBufferUI() {
        this.frameReceiverUI.innerHTML = "";
        // remove all child
        while (this.frameReceiverUI.firstChild) {
            this.frameReceiverUI.removeChild(this.frameReceiverUI.firstChild);
        }
        for (var i = 0; i < this.host.receiveFrameBuffer.length; i++) {
            var extractedFrame = this.host.receiveFrameBuffer[i];
            var frameUI = document.createElement("div");
            frameUI.className = "tempFrame";
            if (extractedFrame == null) {
                frameUI.innerHTML = "{ ----------------------------------- }";
            } else {
                var dataStr = bytes2str(extractedFrame.data);
                if (dataStr.length > 25) {
                    dataStr = dataStr.slice(0, 25) + "...";
                }
                frameUI.innerHTML = "{ " + dataStr + " }";
            }
            frameUI.style.textAlign = "center";
            frameUI.style.fontSize = 5 + "px";
            this.frameReceiverUI.appendChild(frameUI);
        }
    }
}

For index.html

index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>Selective Repeat ARQ</title>
</head>

<body>
    <!-- make background black -->
    <style>
        body {
            background-color: #23252F;
            color: #AAC5FF;
        }

        span {
            color: rgb(255, 0, 0);
        }
    </style>

    <div id="main" style="width:80%;margin: 0 auto;">

        <center>
            <div style="border: 2px dotted #575757;">Selective Repeat ARQ Simulation</div>
            <a href="https://kyriota.com/2023/01/03/SelectiveRepeatARQ-Simulation/">
                <div style="color: #F378BF;">click here for help and detail</div>
            </a>
        </center>

        <div id="host0" style="width:50%;float:left;">
            <center>
                <div style="height: 0px;color: yellow;">User Input</div><br><textarea id="host0_userInput" cols="60"
                    rows="4"
                    style="background-color: #191b20;color:white;">@kyriota My name is kira yoshikake, 33 years old. Living in the villa area northeast of duwangting, unmarried. I work in Guiyou chain store. Every day I have to work overtime until 8 p.m. to go home. I don't smoke. The wine is only for a taste. Sleep at 11 p.m. for 8 hours a day. Before I go to bed, I must drink a cup of warm milk, then do 20 minutes of soft exercise, get on the bed, and immediately fall asleep. Never leave fatigue and stress until the next day. Doctors say I'm normal. JOJO, people's ability is limited. I learned one thing from my short life... The more scheming I am, the more I will find that human ability is limited... Unless I surpass human. I'm going to give up my human identity! JOJO! "I don't want violent happiness Instead, there is no deep despair To pursue a plant like life and live a peaceful life is my goal... "</textarea><br>
                <button id="host0_sendButton">Send</button><br>
                <div style="height: 0px;color: yellow;">Frame Sender Buffer</div><br>
                <div id="host0_frameSenderBuffer"
                    style="width:90%;height:68px;border:1px solid white;overflow-y:scroll;text-align: left;padding: 2px;">
                </div><br>
                <div id="host0_frameSenderBufferLog"
                    style="width:90%;height:72px;border:1px dotted rgb(63, 63, 63);text-align: left;padding: 2px;overflow-y: auto;font-size: 2px;">
                </div><br>
                <div style="height: 0px;color: yellow;">Receive Bin Buffer</div><br>
                <div id="host0_receiveBinBuffer"
                    style="width:90%;height:72px;border:1px solid white;overflow-y:scroll;text-align: left;padding: 2px;">
                </div><br>
                <div id="host0_receiveBinBufferLog"
                    style="width:90%;height:72px;border:1px dotted rgb(63, 63, 63);text-align: left;padding: 2px;overflow-y: auto;font-size: 2px;">
                </div><br>
                <div style="height: 0px;color: yellow;">Frame Receiver Buffer</div><br>
                <div id="host0_frameReceiverBuffer" style="width:90%;height:40px;text-align: left;padding: 2px;">
                </div><br>
                <div style="height: 0px;color: yellow;">Message</div>
                <br><textarea id="host0_message" cols="60" rows="5" disabled
                    style="background-color: #23252F;color:white;"></textarea><br>
            </center>
        </div>

        <div id="host1" style="width:50%;float:left;">
            <center>
                <div style="height: 0px;color: yellow;">User Input</div><br><textarea id="host1_userInput" cols="60"
                    rows="4"
                    style="background-color: #191b20;color:white;">@kyriota "When I was in primary school, there were dozens of signatures on my classmates' graduation album, but I didn't have them. My mother had them, my father had them, but I didn't. There were tens of thousands of fans of pop stars and movie stars, but I didn't have them." "In my life, it's impossible to meet real friends. It's impossible for me to connect with people who can't see the green emperor." "It's 5:15 in Cairo now. Japan has jet lag. It should be midnight. What are my parents doing? Have you slept? I want you to worry, sorry... " "The last emerald spray... I have... Tried my best... This is me, the last rumor... Mr. josda... Please accept it." ------Hua Jing Yuan Dian Ming Hua Jing Yuan Dian Ming Death. With a regretless smile on his face, he ended his life at the age of 17</textarea><br>
                <button id="host1_sendButton">Send</button><br>
                <div style="height: 0px;color: yellow;">Frame Sender Buffer</div><br>
                <div id="host1_frameSenderBuffer"
                    style="width:90%;height:68px;border:1px solid white;overflow-y:scroll;text-align: left;padding: 2px;">
                </div><br>
                <div id="host1_frameSenderBufferLog"
                    style="width:90%;height:72px;border:1px dotted rgb(63, 63, 63);text-align: left;padding: 2px;overflow-y: auto;font-size: 2px;">
                </div><br>
                <div style="height: 0px;color: yellow;">Receive Bin Buffer</div><br>
                <div id="host1_receiveBinBuffer"
                    style="width:90%;height:72px;border:1px solid white;overflow-y:scroll;text-align: left;padding: 2px;">
                </div><br>
                <div id="host1_receiveBinBufferLog"
                    style="width:90%;height:72px;border:1px dotted rgb(63, 63, 63);text-align: left;padding: 2px;overflow-y: auto;font-size: 2px;">
                </div><br>
                <div style="height: 0px;color: yellow;">Frame Receiver Buffer</div><br>
                <div id="host1_frameReceiverBuffer" style="width:90%;height:40px;text-align: left;padding: 2px;">
                </div><br>
                <div style="height: 0px;color: yellow;">Message</div>
                <br><textarea id="host1_message" cols="60" rows="5" disabled
                    style="background-color: #23252F;color:white;"></textarea><br>
            </center>
        </div>

    </div>


    <script src="ARQ_Simulator.js"></script>
    <script>
        // resize the receive bin buffer divs when the window is resized
        function ResizeUI() {
            var temp = 121;
            var base = window.innerWidth / 3;
            // resize all the divs
            document.getElementById("host0_receiveBinBuffer").style.width = (base - base % temp) + "px";
            document.getElementById("host1_receiveBinBuffer").style.width = (base - base % temp) + "px";
            document.getElementById("host0_frameSenderBuffer").style.width = (base - base % temp) + "px";
            document.getElementById("host1_frameSenderBuffer").style.width = (base - base % temp) + "px";
            document.getElementById("host0_frameReceiverBuffer").style.width = (base - base % temp) + "px";
            document.getElementById("host1_frameReceiverBuffer").style.width = (base - base % temp) + "px";
            document.getElementById("host0_frameSenderBufferLog").style.width = (base - base % temp) + "px";
            document.getElementById("host1_frameSenderBufferLog").style.width = (base - base % temp) + "px";
            document.getElementById("host0_receiveBinBufferLog").style.width = (base - base % temp) + "px";
            document.getElementById("host1_receiveBinBufferLog").style.width = (base - base % temp) + "px";
            document.getElementById("host0_userInput").style.width = (base - base % temp) + "px";
            document.getElementById("host1_userInput").style.width = (base - base % temp) + "px";
            document.getElementById("host0_message").style.width = (base - base % temp) + "px";
            document.getElementById("host1_message").style.width = (base - base % temp) + "px";
        }
        window.addEventListener("resize", ResizeUI);
        ResizeUI();
    </script>
</body>

</html>

Postscript

I highly recommend using emoji or something intuitive in your log text when possible, which can increase your reading speed of log text significantly

Prev Home Next

Selective Repeat ARQ Simulation

Selective Repeat ARQ Simulation

Theory

Framing

Window & Control Frame

Details

Error Control

Source

Postscript

Comments