tcp_state_machine.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TCP State Diagram</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f9;
        }

        .container {
            position: relative;
            width: 100%;
            height: 100vh;
        }

        .state {
            position: absolute;
            width: 100px;
            height: 40px;
            background-color: white;
            border: 2px solid #333;
            border-radius: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #333;
            font-size: 14px;
            text-align: center;
            cursor: pointer;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            transition: background-color 0.3s ease;
        }

        .state.active {
            background-color: #4CAF50;
            color: white;
        }

        svg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }

        .arrow {
            stroke: #333;
            stroke-width: 2;
            marker-end: url(#arrowhead);
        }
        
        .common_line {
            stroke: #333;
            stroke-width: 2;
        }

        .condition-text {
            font-family: Arial;
            font-size: 12px;
            fill: black;
        }

        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }

        .state.animated {
            animation: pulse 0.5s ease-in-out;
        }
        
        .rst-notification {
            position: fixed;
            bottom: 100px;
            left: 40%;
            transform: translateX(-50%);
            background-color: #fff3cd;
            color: #856404;
            padding: 15px;
            border: 1px solid #ffeeba;
            border-radius: 5px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            max-width: 80%;
            text-align: center;
            font-size: 14px;
            z-index: 1000;
        }

        .rst-notification strong {
            font-weight: bold;
        }

        .rst-notification code {
            font-family: monospace;
            background-color: #f8f9fa;
            padding: 2px 4px;
            border-radius: 3px;
            border: 1px solid #ddd;
        }
        
        #open-page-reset-button {
            position: fixed;
            left: 20%;
            bottom: 300px;
        }
        
        #open-page-reset-button:hover {
            background-color: green;
        }
        
        #open-page-lost-button {
            position: fixed;
            left: 20%;
            bottom: 300px;
        }
        
        #open-page-lost-button:hover {
            background-color: green;
        }

    </style>
</head>
<body>
    <div class="container">
        <div id="closed" class="state" style="left: 50%; top: 2%;">CLOSED</div>
        <div id="listen" class="state" style="left: 50%; top: 13%;">LISTEN</div>
        <div id="synRcvd" class="state" style="left: 25%; top: 25%;">SYN_RCVD</div>
        <div id="synSent" class="state" style="left: 75%; top: 25%;">SYN_SENT</div>
        <div id="established" class="state" style="left: 50%; top: 40%;">ESTABLISHED</div>    
            
        <div id="finWait1" class="state" style="left: 25%; top: 55%;">FIN_WAIT_1</div>
        <div id="closeWait" class="state" style="left: 75%; top: 55%;">CLOSE_WAIT</div>
        <div id="closing" class="state" style="left: 50%; top: 55%;">CLOSING</div>
        <div id="finWait2" class="state" style="left: 25%; top: 70%;">FIN_WAIT_2</div>
        <div id="timeWait" class="state" style="left: 50%; top: 70%;">TIME_WAIT</div>
        <div id="lastAck" class="state" style="left: 75%; top: 65%;">LAST_ACK</div>
        
        <svg>
            <defs>
                <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
                    <polygon points="0 0, 10 3.5, 0 7" fill="#333"></polygon>
                </marker>
            </defs>

            <line id="closedToListen" class="arrow"></line>
            <text id="closedToListenText_recv" class="condition-text"></text>
            <text id="closedToListenText_send" class="condition-text"></text>

            <line id="closedToSynSent" class="arrow"></line>
            <text id="closedToSynSentText_recv" class="condition-text"></text>
            <text id="closedToSynSentText_send" class="condition-text"></text>

            <line id="listenToSynRcvd" class="arrow"></line>
            <text id="listenToSynRcvdText_recv" class="condition-text"></text>
            <text id="listenToSynRcvdText_send" class="condition-text"></text>

            <line id="synSentToSynRcvd" class="arrow"></line>
            <text id="synSentToSynRcvdText_recv" class="condition-text"></text>
            <text id="synSentToSynRcvdText_send" class="condition-text"></text>

            <line id="synSentToEstablished" class="arrow"></line>
            <text id="synSentToEstablishedText_recv" class="condition-text"></text>
            <text id="synSentToEstablishedText_send" class="condition-text"></text>

            <line id="synRcvdToEstablished" class="arrow"></line>
            <text id="synRcvdToEstablishedText_recv" class="condition-text"></text>
            <text id="synRcvdToEstablishedText_send" class="condition-text"></text>

            <line id="synRcvdToFinWait1" class="arrow"></line>
            <text id="synRcvdToFinWait1Text_recv" class="condition-text"></text>
            <text id="synRcvdToFinWait1Text_send" class="condition-text"></text>

            <line id="establishedToFinWait1" class="arrow"></line>
            <text id="establishedToFinWait1Text_recv" class="condition-text"></text>
            <text id="establishedToFinWait1Text_send" class="condition-text"></text>

            <line id="finWait1ToFinWait2" class="arrow"></line>
            <text id="finWait1ToFinWait2Text_recv" class="condition-text"></text>
            <text id="finWait1ToFinWait2Text_send" class="condition-text"></text>

            <line id="finWait1ToClosing" class="arrow"></line>
            <text id="finWait1ToClosingText_recv" class="condition-text"></text>
            <text id="finWait1ToClosingText_send" class="condition-text"></text>

            <line id="finWait1ToTimeWait" class="arrow"></line>
            <text id="finWait1ToTimeWaitText_recv" class="condition-text"></text>
            <text id="finWait1ToTimeWaitText_send" class="condition-text"></text>

            <line id="finWait2ToTimeWait" class="arrow"></line>
            <text id="finWait2ToTimeWaitText_recv" class="condition-text"></text>
            <text id="finWait2ToTimeWaitText_send" class="condition-text"></text>

            <line id="closingToTimeWait" class="arrow"></line>
            <text id="closingToTimeWaitText_recv" class="condition-text"></text>
            <text id="closingToTimeWaitText_send" class="condition-text"></text>

            <line id="establishedToCloseWait" class="arrow"></line>
            <text id="establishedToCloseWaitText_recv" class="condition-text"></text>
            <text id="establishedToCloseWaitText_send" class="condition-text"></text>

            <line id="closeWaitToLastAck" class="arrow"></line>
            <text id="closeWaitToLastAckText_recv" class="condition-text"></text>
            <text id="closeWaitToLastAckText_send" class="condition-text"></text>

            <line id="synSentToClosed" class="arrow"></line>
            <text id="synSentToClosedText_recv" class="condition-text"></text>
            <text id="synSentToClosedText_send" class="condition-text"></text>

            <line id="lastAckToClosed" class="arrow"></line>
            <text id="lastAckToClosedText_recv" class="condition-text"></text>
            <text id="lastAckToClosedText_send" class="condition-text"></text>

            <line id="timeWaitToClosed" class="arrow"></line>
            <text id="timeWaitToClosedText_recv" class="condition-text"></text>
            <text id="timeWaitToClosedText_send" class="condition-text"></text>

            <line id="vertical_common_line" class="common_line"></line>
            <line id="commonToClosed" class="arrow"></line>
        </svg>
    </div>
    
    <div class="rst-notification">
        <strong>Note:</strong> The TCP state diagram must consider the impact of <code>RST</code> packets. Any TCP connection in a state other than <code>CLOSED</code> or <code>LISTEN</code> or <code>TIMEWAIT</code> will immediately transition to the <code>CLOSED</code> state upon receiving an <code>RST</code> packet.
    </div>
    <div id="open-page-reset" class="state" style="left: 10%; top: 60%;">RST Case</div>
    <div id="open-page-lost" class="state" style="left: 10%; top: 70%;">Packet Loss Case</div>
    

    <script>
        const states = {
            closed: {
                element: document.getElementById('closed'),
                callback: () => {
                    console.log('CLOSED state clicked');
                    animateState(states.closed.element);
                    window.open('handshake.html', '_blank');
                }
            },
            listen: {
                element: document.getElementById('listen'),
                callback: () => {
                    console.log('LISTEN state clicked');
                    animateState(states.listen.element);
                    window.open('handshake.html', '_blank');
                }
            },
            synSent: {
                element: document.getElementById('synSent'),
                callback: () => {
                    console.log('SYN_SENT state clicked');
                    animateState(states.synSent.element);
                    window.open('handshake.html', '_blank');
                }
            },
            synRcvd: {
                element: document.getElementById('synRcvd'),
                callback: () => {
                    console.log('SYN_RCVD state clicked');
                    animateState(states.synRcvd.element);
                    window.open('handshake_with_lost.html', '_blank');
                }
            },
            established: {
                element: document.getElementById('established'),
                callback: () => {
                    console.log('ESTABLISHED state clicked');
                    animateState(states.established.element);
                    window.open('handshake.html', '_blank');
                }
            },
            finWait1: {
                element: document.getElementById('finWait1'),
                callback: () => {
                    console.log('FIN_WAIT_1 state clicked');
                    animateState(states.finWait1.element);
                    window.open('tcp_normal_close.html', '_blank');
                }
            },
            closing: {
                element: document.getElementById('closing'),
                callback: () => {
                    console.log('CLOSING state clicked');
                    animateState(states.closing.element);
                    window.open('tcp_simultaneous_close.html', '_blank');
                }
            },
            finWait2: {
                element: document.getElementById('finWait2'),
                callback: () => {
                    console.log('FIN_WAIT_2 state clicked');
                    animateState(states.finWait2.element);
                    window.open('tcp_normal_close.html', '_blank');
                }
            },
            closeWait: {
                element: document.getElementById('closeWait'),
                callback: () => {
                    console.log('CLOSE_WAIT state clicked');
                    animateState(states.closeWait.element);
                    window.open('tcp_abnormal_close.html', '_blank');
                }
            },
            lastAck: {
                element: document.getElementById('lastAck'),
                callback: () => {
                    console.log('LAST_ACK state clicked');
                    animateState(states.lastAck.element);
                    window.open('tcp_normal_close.html', '_blank');
                }
            },
            timeWait: {
                element: document.getElementById('timeWait'),
                callback: () => {
                    console.log('TIME_WAIT state clicked');
                    animateState(states.timeWait.element);
                    window.open('tcp_timeWait.html', '_blank');
                }
            }
        };

        const cases = {
            reset: {
                element: document.getElementById('open-page-reset'),
                callback: () => {
                    animateState(cases.reset.element);
                    window.open('elb_timeout.html', '_blank');
                }
            },
            lost: {
                element: document.getElementById('open-page-lost'),
                callback: () => {
                    animateState(cases.lost.element);
                    window.open('handshake_with_lost.html', '_blank');
                }
            }            
        }

        function animateState(element) {
            element.classList.add('animated');
            setTimeout(() => {
                element.classList.remove('animated');
            }, 500);
        }

        Object.values(states).forEach(state => {
            state.element.addEventListener('click', () => {
                Object.values(states).forEach(s => s.element.classList.remove('active'));
                state.element.classList.add('active');
                if (state.callback) {
                    state.callback();
                }
            });
        });

        Object.values(cases).forEach(tcpcase => {
            tcpcase.element.addEventListener('click', () => {
                Object.values(cases).forEach(s => s.element.classList.remove('active'));
                tcpcase.element.classList.add('active');
                if (tcpcase.callback) {
                    tcpcase.callback();
                }
            });
        });

        // Get all arrows
        const arrows = {
            closedToListen: document.getElementById('closedToListen'),
            closedToSynSent: document.getElementById('closedToSynSent'),
            listenToSynRcvd: document.getElementById('listenToSynRcvd'),
            synSentToSynRcvd: document.getElementById('synSentToSynRcvd'),
            synSentToEstablished: document.getElementById('synSentToEstablished'),
            synRcvdToEstablished: document.getElementById('synRcvdToEstablished'),
            synRcvdToFinWait1: document.getElementById('synRcvdToFinWait1'),
            establishedToFinWait1: document.getElementById('establishedToFinWait1'),
            finWait1ToFinWait2: document.getElementById('finWait1ToFinWait2'),
            finWait1ToClosing: document.getElementById('finWait1ToClosing'),
            finWait1ToTimeWait: document.getElementById('finWait1ToTimeWait'),
            finWait2ToTimeWait: document.getElementById('finWait2ToTimeWait'),
            closingToTimeWait: document.getElementById('closingToTimeWait'),
            establishedToCloseWait: document.getElementById('establishedToCloseWait'),
            closeWaitToLastAck: document.getElementById('closeWaitToLastAck'),
            synSentToClosed: document.getElementById('synSentToClosed'),
            lastAckToClosed: document.getElementById('lastAckToClosed'),
            timeWaitToClosed: document.getElementById('timeWaitToClosed'),
            vertical_common_line: document.getElementById('vertical_common_line'),
            commonToClosed: document.getElementById('commonToClosed')
        };

        // Get all arrow text elements
        const arrows_text = {
            closedToListen_recv: document.getElementById('closedToListenText_recv'),
            closedToListen_send: document.getElementById('closedToListenText_send'),
            closedToSynSent_recv: document.getElementById('closedToSynSentText_recv'),
            closedToSynSent_send: document.getElementById('closedToSynSentText_send'),
            listenToSynRcvd_recv: document.getElementById('listenToSynRcvdText_recv'),
            listenToSynRcvd_send: document.getElementById('listenToSynRcvdText_send'),
            synSentToSynRcvd_recv: document.getElementById('synSentToSynRcvdText_recv'),
            synSentToSynRcvd_send: document.getElementById('synSentToSynRcvdText_send'),
            synSentToEstablished_recv: document.getElementById('synSentToEstablishedText_recv'),
            synSentToEstablished_send: document.getElementById('synSentToEstablishedText_send'),
            synRcvdToEstablished_recv: document.getElementById('synRcvdToEstablishedText_recv'),
            synRcvdToEstablished_send: document.getElementById('synRcvdToEstablishedText_send'),
            synRcvdToFinWait1_recv: document.getElementById('synRcvdToFinWait1Text_recv'),
            synRcvdToFinWait1_send: document.getElementById('synRcvdToFinWait1Text_send'),
            establishedToFinWait1_recv: document.getElementById('establishedToFinWait1Text_recv'),
            establishedToFinWait1_send: document.getElementById('establishedToFinWait1Text_send'),
            finWait1ToFinWait2_recv: document.getElementById('finWait1ToFinWait2Text_recv'),
            finWait1ToFinWait2_send: document.getElementById('finWait1ToFinWait2Text_send'),
            finWait1ToClosing_recv: document.getElementById('finWait1ToClosingText_recv'),
            finWait1ToClosing_send: document.getElementById('finWait1ToClosingText_send'),
            finWait1ToTimeWait_recv: document.getElementById('finWait1ToTimeWaitText_recv'),
            finWait1ToTimeWait_send: document.getElementById('finWait1ToTimeWaitText_send'),
            finWait2ToTimeWait_recv: document.getElementById('finWait2ToTimeWaitText_recv'),
            finWait2ToTimeWait_send: document.getElementById('finWait2ToTimeWaitText_send'),
            closingToTimeWait_recv: document.getElementById('closingToTimeWaitText_recv'),
            closingToTimeWait_send: document.getElementById('closingToTimeWaitText_send'),
            establishedToCloseWait_recv: document.getElementById('establishedToCloseWaitText_recv'),
            establishedToCloseWait_send: document.getElementById('establishedToCloseWaitText_send'),
            closeWaitToLastAck_recv: document.getElementById('closeWaitToLastAckText_recv'),
            closeWaitToLastAck_send: document.getElementById('closeWaitToLastAckText_send'),
            synSentToClosed_recv: document.getElementById('synSentToClosedText_recv'),
            synSentToClosed_send: document.getElementById('synSentToClosedText_send'),
            lastAckToClosed_recv: document.getElementById('lastAckToClosedText_recv'),
            lastAckToClosed_send: document.getElementById('lastAckToClosedText_send'),
            timeWaitToClosed_recv: document.getElementById('timeWaitToClosedText_recv'),
            timeWaitToClosed_send: document.getElementById('timeWaitToClosedText_send')
        };
        

        // Calculate the bottom center of a state node
        function getBottomCenter(element) {
            const rect = element.getBoundingClientRect();
            return {
                x: rect.left + rect.width / 2,
                y: rect.bottom
            };
        }

        // Calculate the top center of a state node
        function getTopCenter(element) {
            const rect = element.getBoundingClientRect();
            return {
                x: rect.left + rect.width / 2,
                y: rect.top
            };
        }

        // Calculate the right center of a state node
        function getRightCenter(element) {
            const rect = element.getBoundingClientRect();
            return {
                x: rect.right,
                y: rect.top + rect.height / 2
            };
        }

        // Calculate the left center of a state node
        function getLeftCenter(element) {
            const rect = element.getBoundingClientRect();
            return {
                x: rect.left,
                y: rect.top + rect.height / 2
            };
        }

        // Function to get top-left corner
        function getTopLeft(element) {
            const rect = element.getBoundingClientRect();
            return {
                x: rect.left,
                y: rect.top
            };
        }

        // Function to get top-right corner
        function getTopRight(element) {
            const rect = element.getBoundingClientRect();
            return {
                x: rect.right,
                y: rect.top
            };
        }

        // Function to get bottom-left corner
        function getBottomLeft(element) {
            const rect = element.getBoundingClientRect();
            return {
                x: rect.left,
                y: rect.bottom
            };
        }

        // Function to get bottom-right corner
        function getBottomRight(element) {
            const rect = element.getBoundingClientRect();
            return {
                x: rect.right,
                y: rect.bottom
            };
        }

        // Update arrow positions and text
        function updateArrows() {
            // CLOSED -> LISTEN
            arrows.closedToListen.setAttribute('x1', getBottomCenter(states.closed.element).x);
            arrows.closedToListen.setAttribute('y1', getBottomCenter(states.closed.element).y);
            arrows.closedToListen.setAttribute('x2', getTopCenter(states.listen.element).x);
            arrows.closedToListen.setAttribute('y2', getTopCenter(states.listen.element).y);

            const closedToListenX = (parseFloat(arrows.closedToListen.getAttribute('x1')) + parseFloat(arrows.closedToListen.getAttribute('x2'))) / 2;
            const closedToListenY = (parseFloat(arrows.closedToListen.getAttribute('y1')) + parseFloat(arrows.closedToListen.getAttribute('y2'))) / 2;

            arrows_text.closedToListen_recv.setAttribute('x', closedToListenX - 100);
            arrows_text.closedToListen_recv.setAttribute('y', closedToListenY - 8);
            arrows_text.closedToListen_recv.textContent = "app:passive open";
            arrows_text.closedToListen_send.setAttribute('x', closedToListenX - 100);
            arrows_text.closedToListen_send.setAttribute('y', closedToListenY + 12);
            arrows_text.closedToListen_send.textContent = "send:nothing";

            // CLOSED -> SYN_SENT
            arrows.closedToSynSent.setAttribute('x1', getBottomRight(states.closed.element).x);
            arrows.closedToSynSent.setAttribute('y1', getBottomRight(states.closed.element).y);
            arrows.closedToSynSent.setAttribute('x2', getTopCenter(states.synSent.element).x);
            arrows.closedToSynSent.setAttribute('y2', getTopCenter(states.synSent.element).y);

            const closedToSynSentX = (parseFloat(arrows.closedToSynSent.getAttribute('x1')) + parseFloat(arrows.closedToSynSent.getAttribute('x2'))) / 2;
            const closedToSynSentY = (parseFloat(arrows.closedToSynSent.getAttribute('y1')) + parseFloat(arrows.closedToSynSent.getAttribute('y2'))) / 2;

            arrows_text.closedToSynSent_recv.setAttribute('x', closedToSynSentX + 50);
            arrows_text.closedToSynSent_recv.setAttribute('y', closedToSynSentY - 8);
            arrows_text.closedToSynSent_recv.textContent = "app:active open";
            arrows_text.closedToSynSent_send.setAttribute('x', closedToSynSentX + 50);
            arrows_text.closedToSynSent_send.setAttribute('y', closedToSynSentY + 12);
            arrows_text.closedToSynSent_send.textContent = "send:SYN";

            // LISTEN -> SYN_RCVD
            arrows.listenToSynRcvd.setAttribute('x1', getLeftCenter(states.listen.element).x);
            arrows.listenToSynRcvd.setAttribute('y1', getLeftCenter(states.listen.element).y);
            arrows.listenToSynRcvd.setAttribute('x2', getTopRight(states.synRcvd.element).x);
            arrows.listenToSynRcvd.setAttribute('y2', getTopRight(states.synRcvd.element).y);

            const listenToSynRcvdX = (parseFloat(arrows.listenToSynRcvd.getAttribute('x1')) + parseFloat(arrows.listenToSynRcvd.getAttribute('x2'))) / 2;
            const listenToSynRcvdY = (parseFloat(arrows.listenToSynRcvd.getAttribute('y1')) + parseFloat(arrows.listenToSynRcvd.getAttribute('y2'))) / 2;

            arrows_text.listenToSynRcvd_recv.setAttribute('x', listenToSynRcvdX - 30);
            arrows_text.listenToSynRcvd_recv.setAttribute('y', listenToSynRcvdY - 50);
            arrows_text.listenToSynRcvd_recv.textContent = "recv:SYN";
            arrows_text.listenToSynRcvd_send.setAttribute('x', listenToSynRcvdX- 30);
            arrows_text.listenToSynRcvd_send.setAttribute('y', listenToSynRcvdY - 30);
            arrows_text.listenToSynRcvd_send.textContent = "send:SYN,ACK";

            // SYN_SENT -> SYN_RCVD
            arrows.synSentToSynRcvd.setAttribute('x1', getLeftCenter(states.synSent.element).x);
            arrows.synSentToSynRcvd.setAttribute('y1', getLeftCenter(states.synSent.element).y);
            arrows.synSentToSynRcvd.setAttribute('x2', getRightCenter(states.synRcvd.element).x);
            arrows.synSentToSynRcvd.setAttribute('y2', getRightCenter(states.synRcvd.element).y);

            const synSentToSynRcvdX = (parseFloat(arrows.synSentToSynRcvd.getAttribute('x1')) + parseFloat(arrows.synSentToSynRcvd.getAttribute('x2'))) / 2;
            const synSentToSynRcvdY = (parseFloat(arrows.synSentToSynRcvd.getAttribute('y1')) + parseFloat(arrows.synSentToSynRcvd.getAttribute('y2'))) / 2;

            arrows_text.synSentToSynRcvd_recv.setAttribute('x', synSentToSynRcvdX);
            arrows_text.synSentToSynRcvd_recv.setAttribute('y', synSentToSynRcvdY - 8);
            arrows_text.synSentToSynRcvd_recv.textContent = "recv:SYN";
            arrows_text.synSentToSynRcvd_send.setAttribute('x', synSentToSynRcvdX);
            arrows_text.synSentToSynRcvd_send.setAttribute('y', synSentToSynRcvdY + 12);
            arrows_text.synSentToSynRcvd_send.textContent = "send:SYN,ACK";

            // SYN_SENT -> ESTABLISHED
            arrows.synSentToEstablished.setAttribute('x1', getBottomLeft(states.synSent.element).x);
            arrows.synSentToEstablished.setAttribute('y1', getBottomLeft(states.synSent.element).y);
            arrows.synSentToEstablished.setAttribute('x2', getTopRight(states.established.element).x);
            arrows.synSentToEstablished.setAttribute('y2', getTopRight(states.established.element).y);

            const synSentToEstablishedX = (parseFloat(arrows.synSentToEstablished.getAttribute('x1')) + parseFloat(arrows.synSentToEstablished.getAttribute('x2'))) / 2;
            const synSentToEstablishedY = (parseFloat(arrows.synSentToEstablished.getAttribute('y1')) + parseFloat(arrows.synSentToEstablished.getAttribute('y2'))) / 2;

            arrows_text.synSentToEstablished_recv.setAttribute('x', synSentToEstablishedX);
            arrows_text.synSentToEstablished_recv.setAttribute('y', synSentToEstablishedY + 10);
            arrows_text.synSentToEstablished_recv.textContent = "recv:SYN,ACK";
            arrows_text.synSentToEstablished_send.setAttribute('x', synSentToEstablishedX);
            arrows_text.synSentToEstablished_send.setAttribute('y', synSentToEstablishedY + 25);
            arrows_text.synSentToEstablished_send.textContent = "send:ACK";

            // SYN_RCVD -> ESTABLISHED
            arrows.synRcvdToEstablished.setAttribute('x1', getBottomRight(states.synRcvd.element).x);
            arrows.synRcvdToEstablished.setAttribute('y1', getBottomRight(states.synRcvd.element).y);
            arrows.synRcvdToEstablished.setAttribute('x2', getTopLeft(states.established.element).x);
            arrows.synRcvdToEstablished.setAttribute('y2', getTopLeft(states.established.element).y);

            const synRcvdToEstablishedX = (parseFloat(arrows.synRcvdToEstablished.getAttribute('x1')) + parseFloat(arrows.synRcvdToEstablished.getAttribute('x2'))) / 2;
            const synRcvdToEstablishedY = (parseFloat(arrows.synRcvdToEstablished.getAttribute('y1')) + parseFloat(arrows.synRcvdToEstablished.getAttribute('y2'))) / 2;

            arrows_text.synRcvdToEstablished_recv.setAttribute('x', synRcvdToEstablishedX - 20);
            arrows_text.synRcvdToEstablished_recv.setAttribute('y', synRcvdToEstablishedY + 30);
            arrows_text.synRcvdToEstablished_recv.textContent = "recv:ACK";
            arrows_text.synRcvdToEstablished_send.setAttribute('x', synRcvdToEstablishedX - 20);
            arrows_text.synRcvdToEstablished_send.setAttribute('y', synRcvdToEstablishedY + 45);
            arrows_text.synRcvdToEstablished_send.textContent = "send:nothing";

            // SYN_RCVD -> FIN_WAIT_1
            arrows.synRcvdToFinWait1.setAttribute('x1', getBottomCenter(states.synRcvd.element).x);
            arrows.synRcvdToFinWait1.setAttribute('y1', getBottomCenter(states.synRcvd.element).y);
            arrows.synRcvdToFinWait1.setAttribute('x2', getTopCenter(states.finWait1.element).x);
            arrows.synRcvdToFinWait1.setAttribute('y2', getTopCenter(states.finWait1.element).y);

            const synRcvdToFinWait1X = (parseFloat(arrows.synRcvdToFinWait1.getAttribute('x1')) + parseFloat(arrows.synRcvdToFinWait1.getAttribute('x2'))) / 2;
            const synRcvdToFinWait1Y = (parseFloat(arrows.synRcvdToFinWait1.getAttribute('y1')) + parseFloat(arrows.synRcvdToFinWait1.getAttribute('y2'))) / 2;

            arrows_text.synRcvdToFinWait1_recv.setAttribute('x', synRcvdToFinWait1X + 5);
            arrows_text.synRcvdToFinWait1_recv.setAttribute('y', synRcvdToFinWait1Y - 8);
            arrows_text.synRcvdToFinWait1_recv.textContent = "appl:close";
            arrows_text.synRcvdToFinWait1_send.setAttribute('x', synRcvdToFinWait1X + 5);
            arrows_text.synRcvdToFinWait1_send.setAttribute('y', synRcvdToFinWait1Y + 12);
            arrows_text.synRcvdToFinWait1_send.textContent = "send:FIN";

            // ESTABLISHED -> FIN_WAIT_1
            arrows.establishedToFinWait1.setAttribute('x1', getBottomLeft(states.established.element).x);
            arrows.establishedToFinWait1.setAttribute('y1', getBottomLeft(states.established.element).y);
            arrows.establishedToFinWait1.setAttribute('x2', getTopRight(states.finWait1.element).x);
            arrows.establishedToFinWait1.setAttribute('y2', getTopRight(states.finWait1.element).y);

            const establishedToFinWait1X = (parseFloat(arrows.establishedToFinWait1.getAttribute('x1')) + parseFloat(arrows.establishedToFinWait1.getAttribute('x2'))) / 2;
            const establishedToFinWait1Y = (parseFloat(arrows.establishedToFinWait1.getAttribute('y1')) + parseFloat(arrows.establishedToFinWait1.getAttribute('y2'))) / 2;

            arrows_text.establishedToFinWait1_recv.setAttribute('x', establishedToFinWait1X - 80);
            arrows_text.establishedToFinWait1_recv.setAttribute('y', establishedToFinWait1Y - 8);
            arrows_text.establishedToFinWait1_recv.textContent = "app:close";
            arrows_text.establishedToFinWait1_send.setAttribute('x', establishedToFinWait1X - 80);
            arrows_text.establishedToFinWait1_send.setAttribute('y', establishedToFinWait1Y + 12);
            arrows_text.establishedToFinWait1_send.textContent = "send:FIN";

            // FIN_WAIT_1 -> FIN_WAIT_2
            arrows.finWait1ToFinWait2.setAttribute('x1', getBottomCenter(states.finWait1.element).x);
            arrows.finWait1ToFinWait2.setAttribute('y1', getBottomCenter(states.finWait1.element).y);
            arrows.finWait1ToFinWait2.setAttribute('x2', getTopCenter(states.finWait2.element).x);
            arrows.finWait1ToFinWait2.setAttribute('y2', getTopCenter(states.finWait2.element).y);

            const finWait1ToFinWait2X = (parseFloat(arrows.finWait1ToFinWait2.getAttribute('x1')) + parseFloat(arrows.finWait1ToFinWait2.getAttribute('x2'))) / 2;
            const finWait1ToFinWait2Y = (parseFloat(arrows.finWait1ToFinWait2.getAttribute('y1')) + parseFloat(arrows.finWait1ToFinWait2.getAttribute('y2'))) / 2;

            arrows_text.finWait1ToFinWait2_recv.setAttribute('x', finWait1ToFinWait2X - 80);
            arrows_text.finWait1ToFinWait2_recv.setAttribute('y', finWait1ToFinWait2Y - 8);
            arrows_text.finWait1ToFinWait2_recv.textContent = "recv:ACK";
            arrows_text.finWait1ToFinWait2_send.setAttribute('x', finWait1ToFinWait2X - 80);
            arrows_text.finWait1ToFinWait2_send.setAttribute('y', finWait1ToFinWait2Y + 12);
            arrows_text.finWait1ToFinWait2_send.textContent = "send:nothing";

            // FIN_WAIT_1 -> CLOSING
            arrows.finWait1ToClosing.setAttribute('x1', getRightCenter(states.finWait1.element).x);
            arrows.finWait1ToClosing.setAttribute('y1', getRightCenter(states.finWait1.element).y);
            arrows.finWait1ToClosing.setAttribute('x2', getLeftCenter(states.closing.element).x);
            arrows.finWait1ToClosing.setAttribute('y2', getLeftCenter(states.closing.element).y);

            const finWait1ToClosingX = (parseFloat(arrows.finWait1ToClosing.getAttribute('x1')) + parseFloat(arrows.finWait1ToClosing.getAttribute('x2'))) / 2;
            const finWait1ToClosingY = (parseFloat(arrows.finWait1ToClosing.getAttribute('y1')) + parseFloat(arrows.finWait1ToClosing.getAttribute('y2'))) / 2;

            arrows_text.finWait1ToClosing_recv.setAttribute('x', finWait1ToClosingX);
            arrows_text.finWait1ToClosing_recv.setAttribute('y', finWait1ToClosingY - 8);
            arrows_text.finWait1ToClosing_recv.textContent = "recv:FIN";
            arrows_text.finWait1ToClosing_send.setAttribute('x', finWait1ToClosingX);
            arrows_text.finWait1ToClosing_send.setAttribute('y', finWait1ToClosingY + 12);
            arrows_text.finWait1ToClosing_send.textContent = "send:ACK";

            // FIN_WAIT_1 -> TIME_WAIT
            arrows.finWait1ToTimeWait.setAttribute('x1', getBottomRight(states.finWait1.element).x);
            arrows.finWait1ToTimeWait.setAttribute('y1', getBottomRight(states.finWait1.element).y);
            arrows.finWait1ToTimeWait.setAttribute('x2', getTopLeft(states.timeWait.element).x);
            arrows.finWait1ToTimeWait.setAttribute('y2', getTopLeft(states.timeWait.element).y);

            const finWait1ToTimeWaitX = (parseFloat(arrows.finWait1ToTimeWait.getAttribute('x1')) + parseFloat(arrows.finWait1ToTimeWait.getAttribute('x2'))) / 2;
            const finWait1ToTimeWaitY = (parseFloat(arrows.finWait1ToTimeWait.getAttribute('y1')) + parseFloat(arrows.finWait1ToTimeWait.getAttribute('y2'))) / 2;

            arrows_text.finWait1ToTimeWait_recv.setAttribute('x', finWait1ToTimeWaitX - 110);
            arrows_text.finWait1ToTimeWait_recv.setAttribute('y', finWait1ToTimeWaitY);
            arrows_text.finWait1ToTimeWait_recv.textContent = "recv:FIN,ACK";
            arrows_text.finWait1ToTimeWait_send.setAttribute('x', finWait1ToTimeWaitX - 110);
            arrows_text.finWait1ToTimeWait_send.setAttribute('y', finWait1ToTimeWaitY + 20);
            arrows_text.finWait1ToTimeWait_send.textContent = "send:ACK";

            // FIN_WAIT_2 -> TIME_WAIT
            arrows.finWait2ToTimeWait.setAttribute('x1', getRightCenter(states.finWait2.element).x);
            arrows.finWait2ToTimeWait.setAttribute('y1', getRightCenter(states.finWait2.element).y);
            arrows.finWait2ToTimeWait.setAttribute('x2', getLeftCenter(states.timeWait.element).x);
            arrows.finWait2ToTimeWait.setAttribute('y2', getLeftCenter(states.timeWait.element).y);

            const finWait2ToTimeWaitX = (parseFloat(arrows.finWait2ToTimeWait.getAttribute('x1')) + parseFloat(arrows.finWait2ToTimeWait.getAttribute('x2'))) / 2;
            const finWait2ToTimeWaitY = (parseFloat(arrows.finWait2ToTimeWait.getAttribute('y1')) + parseFloat(arrows.finWait2ToTimeWait.getAttribute('y2'))) / 2;

            arrows_text.finWait2ToTimeWait_recv.setAttribute('x', finWait2ToTimeWaitX - 20);
            arrows_text.finWait2ToTimeWait_recv.setAttribute('y', finWait2ToTimeWaitY - 8);
            arrows_text.finWait2ToTimeWait_recv.textContent = "recv:FIN";
            arrows_text.finWait2ToTimeWait_send.setAttribute('x', finWait2ToTimeWaitX - 20);
            arrows_text.finWait2ToTimeWait_send.setAttribute('y', finWait2ToTimeWaitY + 12);
            arrows_text.finWait2ToTimeWait_send.textContent = "send:ACK";

            // CLOSING -> TIME_WAIT
            arrows.closingToTimeWait.setAttribute('x1', getBottomCenter(states.closing.element).x);
            arrows.closingToTimeWait.setAttribute('y1', getBottomCenter(states.closing.element).y);
            arrows.closingToTimeWait.setAttribute('x2', getTopCenter(states.timeWait.element).x);
            arrows.closingToTimeWait.setAttribute('y2', getTopCenter(states.timeWait.element).y);

            const closingToTimeWaitX = (parseFloat(arrows.closingToTimeWait.getAttribute('x1')) + parseFloat(arrows.closingToTimeWait.getAttribute('x2'))) / 2;
            const closingToTimeWaitY = (parseFloat(arrows.closingToTimeWait.getAttribute('y1')) + parseFloat(arrows.closingToTimeWait.getAttribute('y2'))) / 2;

            arrows_text.closingToTimeWait_recv.setAttribute('x', closingToTimeWaitX + 20);
            arrows_text.closingToTimeWait_recv.setAttribute('y', closingToTimeWaitY - 8);
            arrows_text.closingToTimeWait_recv.textContent = "recv:ACK";
            arrows_text.closingToTimeWait_send.setAttribute('x', closingToTimeWaitX + 20);
            arrows_text.closingToTimeWait_send.setAttribute('y', closingToTimeWaitY + 12);
            arrows_text.closingToTimeWait_send.textContent = "send:nothing";

            // ESTABLISHED -> CLOSE_WAIT
            arrows.establishedToCloseWait.setAttribute('x1', getBottomRight(states.established.element).x);
            arrows.establishedToCloseWait.setAttribute('y1', getBottomRight(states.established.element).y);
            arrows.establishedToCloseWait.setAttribute('x2', getTopLeft(states.closeWait.element).x);
            arrows.establishedToCloseWait.setAttribute('y2', getTopLeft(states.closeWait.element).y);

            const establishedToCloseWaitX = (parseFloat(arrows.establishedToCloseWait.getAttribute('x1')) + parseFloat(arrows.establishedToCloseWait.getAttribute('x2'))) / 2;
            const establishedToCloseWaitY = (parseFloat(arrows.establishedToCloseWait.getAttribute('y1')) + parseFloat(arrows.establishedToCloseWait.getAttribute('y2'))) / 2;

            arrows_text.establishedToCloseWait_recv.setAttribute('x', establishedToCloseWaitX - 20);
            arrows_text.establishedToCloseWait_recv.setAttribute('y', establishedToCloseWaitY - 35);
            arrows_text.establishedToCloseWait_recv.textContent = "recv:FIN";
            arrows_text.establishedToCloseWait_send.setAttribute('x', establishedToCloseWaitX - 20);
            arrows_text.establishedToCloseWait_send.setAttribute('y', establishedToCloseWaitY -20);
            arrows_text.establishedToCloseWait_send.textContent = "send:ACK";

            // CLOSE_WAIT -> LAST_ACK
            arrows.closeWaitToLastAck.setAttribute('x1', getBottomCenter(states.closeWait.element).x);
            arrows.closeWaitToLastAck.setAttribute('y1', getBottomCenter(states.closeWait.element).y);
            arrows.closeWaitToLastAck.setAttribute('x2', getTopCenter(states.lastAck.element).x);
            arrows.closeWaitToLastAck.setAttribute('y2', getTopCenter(states.lastAck.element).y);

            const closeWaitToLastAckX = (parseFloat(arrows.closeWaitToLastAck.getAttribute('x1')) + parseFloat(arrows.closeWaitToLastAck.getAttribute('x2'))) / 2;
            const closeWaitToLastAckY = (parseFloat(arrows.closeWaitToLastAck.getAttribute('y1')) + parseFloat(arrows.closeWaitToLastAck.getAttribute('y2'))) / 2;

            arrows_text.closeWaitToLastAck_recv.setAttribute('x', closeWaitToLastAckX + 20);
            arrows_text.closeWaitToLastAck_recv.setAttribute('y', closeWaitToLastAckY - 8);
            arrows_text.closeWaitToLastAck_recv.textContent = "app:close";
            arrows_text.closeWaitToLastAck_send.setAttribute('x', closeWaitToLastAckX + 20);
            arrows_text.closeWaitToLastAck_send.setAttribute('y', closeWaitToLastAckY + 12);
            arrows_text.closeWaitToLastAck_send.textContent = "send:FIN";

            // SYN_SENT -> CLOSED
            arrows.synSentToClosed.setAttribute('x1', getRightCenter(states.synSent.element).x);
            arrows.synSentToClosed.setAttribute('y1', getRightCenter(states.synSent.element).y);
            arrows.synSentToClosed.setAttribute('x2', getTopCenter(states.synSent.element).x + 150);
            arrows.synSentToClosed.setAttribute('y2', getRightCenter(states.synSent.element).y);

            const synSentToClosedX = (parseFloat(arrows.synSentToClosed.getAttribute('x1')) + parseFloat(arrows.synSentToClosed.getAttribute('x2'))) / 2;
            const synSentToClosedY = (parseFloat(arrows.synSentToClosed.getAttribute('y1')) + parseFloat(arrows.synSentToClosed.getAttribute('y2'))) / 2;

            arrows_text.synSentToClosed_recv.setAttribute('x', synSentToClosedX - 35);
            arrows_text.synSentToClosed_recv.setAttribute('y', synSentToClosedY - 8);
            arrows_text.synSentToClosed_recv.textContent = "app:close";
            arrows_text.synSentToClosed_send.setAttribute('x', synSentToClosedX - 35);
            arrows_text.synSentToClosed_send.setAttribute('y', synSentToClosedY + 12);
            arrows_text.synSentToClosed_send.textContent = "or timeout";

            // LAST_ACK -> CLOSED
            arrows.lastAckToClosed.setAttribute('x1', getRightCenter(states.lastAck.element).x);
            arrows.lastAckToClosed.setAttribute('y1', getRightCenter(states.lastAck.element).y);
            arrows.lastAckToClosed.setAttribute('x2', getTopCenter(states.synSent.element).x + 150);
            arrows.lastAckToClosed.setAttribute('y2', getRightCenter(states.lastAck.element).y);

            const lastAckToClosedX = (parseFloat(arrows.lastAckToClosed.getAttribute('x1')) + parseFloat(arrows.lastAckToClosed.getAttribute('x2'))) / 2;
            const lastAckToClosedY = (parseFloat(arrows.lastAckToClosed.getAttribute('y1')) + parseFloat(arrows.lastAckToClosed.getAttribute('y2'))) / 2;

            arrows_text.lastAckToClosed_recv.setAttribute('x', lastAckToClosedX -  35);
            arrows_text.lastAckToClosed_recv.setAttribute('y', lastAckToClosedY - 8);
            arrows_text.lastAckToClosed_recv.textContent = "recv:ACK";
            arrows_text.lastAckToClosed_send.setAttribute('x', lastAckToClosedX - 35);
            arrows_text.lastAckToClosed_send.setAttribute('y', lastAckToClosedY + 12);
            arrows_text.lastAckToClosed_send.textContent = "send:nothing";

            // TIME_WAIT -> CLOSED
            arrows.timeWaitToClosed.setAttribute('x1', getRightCenter(states.timeWait.element).x);
            arrows.timeWaitToClosed.setAttribute('y1', getRightCenter(states.timeWait.element).y);
            arrows.timeWaitToClosed.setAttribute('x2', getTopCenter(states.synSent.element).x + 150);
            arrows.timeWaitToClosed.setAttribute('y2', getRightCenter(states.timeWait.element).y);

            const timeWaitToClosedX = (parseFloat(arrows.timeWaitToClosed.getAttribute('x1')) + parseFloat(arrows.timeWaitToClosed.getAttribute('x2'))) / 2;
            const timeWaitToClosedY = (parseFloat(arrows.timeWaitToClosed.getAttribute('y1')) + parseFloat(arrows.timeWaitToClosed.getAttribute('y2'))) / 2;

            arrows_text.timeWaitToClosed_recv.setAttribute('x', timeWaitToClosedX - 120);
            arrows_text.timeWaitToClosed_recv.setAttribute('y', timeWaitToClosedY - 8);
            arrows_text.timeWaitToClosed_recv.textContent = "timeout";
            arrows_text.timeWaitToClosed_send.setAttribute('x', timeWaitToClosedX - 120);
            arrows_text.timeWaitToClosed_send.setAttribute('y', timeWaitToClosedY + 12);
            arrows_text.timeWaitToClosed_send.textContent = "send:nothing";

            // Common lines
            arrows.vertical_common_line.setAttribute('x1', getTopCenter(states.synSent.element).x + 150);
            arrows.vertical_common_line.setAttribute('y1', getRightCenter(states.timeWait.element).y);
            arrows.vertical_common_line.setAttribute('x2', getTopCenter(states.synSent.element).x + 150);
            arrows.vertical_common_line.setAttribute('y2', getRightCenter(states.closed.element).y);

            arrows.commonToClosed.setAttribute('x1', getTopCenter(states.synSent.element).x + 150);
            arrows.commonToClosed.setAttribute('y1', getRightCenter(states.closed.element).y);
            arrows.commonToClosed.setAttribute('x2', getRightCenter(states.closed.element).x);
            arrows.commonToClosed.setAttribute('y2', getRightCenter(states.closed.element).y);
        }

        // Initial update
        updateArrows();

        // Listen for window resize events
        window.addEventListener('resize', updateArrows);
    </script>
</body>
</html>