.. title: STP/RSTP Yakınsama Simülatörü
.. sümüklü böcek: stp-yakınsama simülatörü
.. tarih: 26.03.2026 10:00:00 UTC
.. Etiketler: ağ iletişimi, stp, rstp, yayılan ağaç, simülatör, araç
.. kategori: Araçlar
.. bağlantı:
.. açıklama: Etkileşimli STP ve RSTP yakınsama simülatörü - temel köprü seçimini, bağlantı noktası durumlarını ve topoloji değişikliklerini animasyonlu diyagramlarla görselleştirin
.. yazın: metin
<style>
    * {
        box-sizing: border-box;
    }

    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        margin: 0;
        padding: 0;
    }

    .calc-container {
        max-width: 900px;
        margin: 20px auto;
        padding: 20px;
    }

    /* ── Header ── */
    .calc-header {
        margin-bottom: 30px;
        padding: 25px;
        background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
        border-radius: 12px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        color: white;
    }

    .calc-header h2 {
        margin-top: 0;
        color: white;
        font-size: 28px;
        margin-bottom: 10px;
    }

    .calc-header p {
        margin: 10px 0 20px 0;
        opacity: 0.95;
        font-size: 15px;
    }

    /* ── Form controls inside header ── */
    .form-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
        margin-top: 20px;
    }

    .form-group {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .form-group label {
        font-weight: 600;
        font-size: 14px;
        color: white;
    }

    .form-group input,
    .form-group select {
        padding: 12px;
        font-size: 15px;
        border: 2px solid rgba(255,255,255,0.3);
        border-radius: 6px;
        background: rgba(255,255,255,0.95);
        transition: all 0.3s ease;
        font-family: 'Courier New', monospace;
    }

    .form-group input:focus,
    .form-group select:focus {
        outline: none;
        border-color: #4CAF50;
        background: white;
        box-shadow: 0 0 0 3px rgba(76,175,80,0.15);
    }

    .form-group select {
        cursor: pointer;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    /* ── Buttons ── */
    .btn {
        padding: 12px 24px;
        font-size: 15px;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-weight: bold;
        transition: all 0.3s ease;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

    .btn-primary {
        background: #4CAF50;
        color: white;
    }

    .btn-primary:hover {
        background: #45a049;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.25);
    }

    .btn-primary:active {
        background: #3d8b40;
        transform: translateY(0);
    }

    .btn-secondary {
        background: rgba(255,255,255,0.2);
        color: white;
        border: 2px solid rgba(255,255,255,0.4);
    }

    .btn-secondary:hover {
        background: rgba(255,255,255,0.3);
        transform: translateY(-1px);
    }

    .btn-danger {
        background: #f44336;
        color: white;
    }

    .btn-danger:hover {
        background: #d32f2f;
        transform: translateY(-1px);
    }

    .btn-sm {
        padding: 6px 14px;
        font-size: 13px;
    }

    .submit-btn {
        padding: 14px 35px;
        font-size: 16px;
        background: #4CAF50;
        color: white;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-weight: bold;
        transition: all 0.3s ease;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        margin-top: 15px;
        width: 100%;
    }

    .submit-btn:hover {
        background: #45a049;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }

    .submit-btn:active {
        background: #3d8b40;
        transform: translateY(0);
    }

    /* ── Result sections ── */
    .result-section {
        background: white;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        margin-top: 20px;
        overflow: hidden;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        transition: all 0.3s ease;
        display: none;
    }

    .result-section.show {
        display: block;
    }

    .result-section:hover {
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }

    .section-header {
        background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
        color: white;
        padding: 15px 20px;
    }

    .section-header h3 {
        margin: 0;
        font-size: 18px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .section-header.blue {
        background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
    }

    .section-header.orange {
        background: linear-gradient(135deg, #FF9800 0%, #F57C00 100%);
    }

    .section-header.purple {
        background: linear-gradient(135deg, #9C27B0 0%, #7B1FA2 100%);
    }

    .section-content {
        padding: 20px;
        background: #fafafa;
    }

    .data-row {
        display: flex;
        margin: 10px 0;
        padding: 10px;
        background: white;
        border-radius: 4px;
        border-left: 3px solid #4CAF50;
        align-items: flex-start;
    }

    .data-label {
        font-weight: bold;
        color: #555;
        min-width: 200px;
        flex-shrink: 0;
        font-size: 14px;
        padding-top: 1px;
    }

    .data-value {
        color: #333;
        font-family: 'Courier New', monospace;
        word-break: break-word;
        font-size: 15px;
    }

    .data-value.highlight {
        color: #1976D2;
        font-weight: bold;
        font-size: 18px;
    }

    /* ── Help text ── */
    .help-text {
        margin-top: 15px;
        font-size: 14px;
        color: rgba(255,255,255,0.9);
        background: rgba(0,0,0,0.1);
        padding: 10px 15px;
        border-radius: 4px;
    }

    .help-text strong {
        color: white;
    }

    /* ── Topology canvas area ── */
    #cy-container {
        width: 100%;
        height: 380px;
        background: #1a2332;
        border-radius: 8px;
        border: 2px solid #2d3d52;
        position: relative;
        overflow: hidden;
    }

    #cy {
        width: 100%;
        height: 100%;
    }

    /* ── Switch list ── */
    .switch-list,
    .link-list {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .switch-item,
    .link-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 12px;
        background: white;
        border-radius: 5px;
        margin-bottom: 6px;
        border-left: 4px solid #2196F3;
        font-size: 14px;
        flex-wrap: wrap;
    }

    .switch-item .sw-id {
        font-family: 'Courier New', monospace;
        font-weight: bold;
        color: #1976D2;
        min-width: 40px;
    }

    .switch-item .sw-name {
        flex: 1;
        font-weight: 600;
    }

    .switch-item .sw-priority,
    .switch-item .sw-mac {
        font-family: 'Courier New', monospace;
        font-size: 13px;
        color: #666;
    }

    .link-item {
        border-left-color: #FF9800;
    }

    .link-item .lk-label {
        flex: 1;
        font-family: 'Courier New', monospace;
        font-size: 13px;
    }

    .tag {
        display: inline-block;
        padding: 2px 8px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: bold;
    }

    .tag-root    { background: #FFF3CD; color: #856404; }
    .tag-fwd     { background: #D4EDDA; color: #155724; }
    .tag-blk     { background: #F8D7DA; color: #721C24; }
    .tag-disc    { background: #D1ECF1; color: #0C5460; }
    .tag-lrn     { background: #CCE5FF; color: #004085; }
    .tag-edge    { background: #E2D9F3; color: #491F8A; }

    /* ── Port state table ── */
    .port-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 14px;
        margin-top: 8px;
    }

    .port-table th {
        background: #E3F2FD;
        color: #1565C0;
        padding: 8px 12px;
        text-align: left;
        font-weight: 600;
        border-bottom: 2px solid #BBDEFB;
    }

    .port-table td {
        padding: 7px 12px;
        border-bottom: 1px solid #f0f0f0;
        font-family: 'Courier New', monospace;
        font-size: 13px;
    }

    .port-table tr:last-child td {
        border-bottom: none;
    }

    .port-table tr:nth-child(even) td {
        background: #f8f9fa;
    }

    /* ── Timeline ── */
    .timeline {
        position: relative;
        padding-left: 28px;
    }

    .timeline::before {
        content: '';
        position: absolute;
        left: 8px;
        top: 0;
        bottom: 0;
        width: 2px;
        background: #BBDEFB;
    }

    .timeline-event {
        position: relative;
        margin-bottom: 12px;
        background: white;
        border-radius: 6px;
        padding: 10px 14px;
        border: 1px solid #e8e8e8;
        font-size: 13px;
    }

    .timeline-event::before {
        content: '';
        position: absolute;
        left: -24px;
        top: 12px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #2196F3;
        border: 2px solid white;
        box-shadow: 0 0 0 2px #2196F3;
    }

    .timeline-event.root-election::before  { background: #FFC107; box-shadow: 0 0 0 2px #FFC107; }
    .timeline-event.port-change::before    { background: #4CAF50; box-shadow: 0 0 0 2px #4CAF50; }
    .timeline-event.port-blocked::before   { background: #f44336; box-shadow: 0 0 0 2px #f44336; }
    .timeline-event.convergence::before    { background: #9C27B0; box-shadow: 0 0 0 2px #9C27B0; }

    .timeline-event .te-time {
        font-weight: bold;
        color: #1976D2;
        font-family: 'Courier New', monospace;
        margin-right: 8px;
    }

    .timeline-event .te-desc {
        color: #333;
    }

    /* ── BPDU Inspector ── */
    .bpdu-panel {
        background: #0d1117;
        border-radius: 6px;
        padding: 15px;
        font-family: 'Courier New', monospace;
        font-size: 13px;
        color: #79c0ff;
        max-height: 300px;
        overflow-y: auto;
    }

    .bpdu-row {
        display: flex;
        gap: 8px;
        margin-bottom: 3px;
        line-height: 1.5;
    }

    .bpdu-field {
        color: #d2a8ff;
        min-width: 180px;
        flex-shrink: 0;
    }

    .bpdu-val {
        color: #a5f3fc;
    }

    .bpdu-val.root { color: #fbbf24; }
    .bpdu-val.bridge { color: #86efac; }

    /* ── Scenario selector ── */
    .scenario-bar {
        display: flex;
        gap: 10px;
        align-items: center;
        flex-wrap: wrap;
        margin-top: 10px;
    }

    .scenario-bar label {
        font-weight: 600;
        font-size: 14px;
        color: white;
    }

    .scenario-bar select {
        padding: 8px 12px;
        border: 2px solid rgba(255,255,255,0.3);
        border-radius: 6px;
        background: rgba(255,255,255,0.95);
        font-size: 14px;
        cursor: pointer;
        flex: 1;
        min-width: 200px;
    }

    /* ── Legend ── */
    .legend {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 8px;
        font-size: 13px;
    }

    .legend-item {
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .legend-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    /* ── Inline error / info messages ── */
    .msg {
        padding: 10px 14px;
        border-radius: 6px;
        font-size: 14px;
        margin-top: 8px;
    }

    .msg-error {
        background: #FFEBEE;
        color: #C62828;
        border-left: 4px solid #f44336;
    }

    .msg-info {
        background: #E3F2FD;
        color: #1565C0;
        border-left: 4px solid #2196F3;
    }

    .msg-success {
        background: #E8F5E9;
        color: #1B5E20;
        border-left: 4px solid #4CAF50;
    }

    /* ── STP concept panel ── */
    .concept-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .concept-card {
        background: white;
        border-radius: 6px;
        padding: 14px;
        border-top: 3px solid #2196F3;
        font-size: 13px;
    }

    .concept-card h4 {
        margin: 0 0 6px 0;
        color: #1976D2;
        font-size: 14px;
    }

    .concept-card p {
        margin: 0;
        color: #555;
        line-height: 1.5;
    }

    .concept-card.rstp {
        border-top-color: #9C27B0;
    }

    .concept-card.rstp h4 {
        color: #7B1FA2;
    }

    /* ── Mode toggle ── */
    .mode-toggle {
        display: flex;
        gap: 0;
        margin-top: 15px;
        background: rgba(0,0,0,0.15);
        border-radius: 6px;
        padding: 4px;
    }

    .mode-btn {
        flex: 1;
        padding: 8px 16px;
        border: none;
        background: transparent;
        color: rgba(255,255,255,0.7);
        cursor: pointer;
        border-radius: 4px;
        font-size: 14px;
        font-weight: 600;
        transition: all 0.2s ease;
    }

    .mode-btn.active {
        background: white;
        color: #1976D2;
        box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    }

    /* ── Pulse animation for root bridge ── */
    @keyframes rootPulse {
        0%   { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7); }
        70%  { box-shadow: 0 0 0 10px rgba(255, 193, 7, 0); }
        100% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0); }
    }

    @keyframes fadeInUp {
        from { opacity: 0; transform: translateY(12px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    .fade-in-up {
        animation: fadeInUp 0.35s ease both;
    }

    /* ── Responsive ── */
    @media (max-width: 768px) {
        .form-grid {
            grid-template-columns: 1fr;
        }

        .data-row {
            flex-direction: column;
        }

        .data-label {
            margin-bottom: 4px;
            min-width: auto;
        }

        .concept-grid {
            grid-template-columns: 1fr;
        }

        #cy-container {
            height: 280px;
        }

        .port-table {
            font-size: 12px;
        }

        .port-table th,
        .port-table td {
            padding: 6px 8px;
        }

        .mode-btn {
            padding: 8px 8px;
            font-size: 13px;
        }

        .scenario-bar {
            flex-direction: column;
            align-items: stretch;
        }

        .scenario-bar label {
            display: block;
        }
    }

    @media (max-width: 480px) {
        .calc-header {
            padding: 18px;
        }

        .calc-header h2 {
            font-size: 22px;
        }

        .switch-item,
        .link-item {
            flex-wrap: wrap;
        }
    }
</style>
<div class="calc-container">
═════════════════════════════ ══════════════════════════════
         BAŞLIK / YAPILANDIRMA
    ═════════════════════════════ ══════════════════════════════
<div class="calc-header">
<h2>STP / RSTP Yakınsama Simülatörü</h2>
<p>Bir ağ topolojisi oluşturun, STP veya RSTP'yi çalıştırın ve temel köprü seçimini, bağlantı noktası durumlarını ve yakınsama zaman çizelgesini inceleyin.</p>
Protokol modu seçici
<div aria-label="Protocol mode" class="mode-toggle" role="group">
<button class="mode-btn active" id="btnSTP" onclick="setMode('STP')">STP (802.1D)</button>
<button class="mode-btn" id="btnRSTP" onclick="setMode('RSTP')">RSTP (802.1w)</button>
</div>
Anahtar formu ekle
<div style="margin-top: 20px;">
<div style="color: white; font-weight: 600; font-size: 15px; margin-bottom: 10px;">Anahtar Ekle</div>
<div class="form-grid">
<div class="form-group">
<label for="swName">Anahtar Adı</label>
<input id="swName" maxlength="20" placeholder="e.g. SW1" type="text"/>
</div>
<div class="form-group">
<label for="swPriority">Köprü Önceliği</label>
<select id="swPriority">
<option value="4096">4096</option>
<option value="8192">8192</option>
<option value="12288">12288</option>
<option value="16384">16384</option>
<option value="20480">20480</option>
<option value="24576">24576</option>
<option value="28672">28672</option>
<option selected="" value="32768">32768 (varsayılan)</option>
<option value="36864">36864</option>
<option value="40960">40960</option>
<option value="45056">45056</option>
<option value="49152">49152</option>
<option value="53248">53248</option>
<option value="57344">57344</option>
<option value="61440">61440</option>
</select>
</div>
<div class="form-group">
<label for="swMac">MAC Adresi (son 4 onaltılık karakter)</label>
<input id="swMac" maxlength="4" pattern="[0-9a-fA-F]{0,4}" placeholder="auto" type="text"/>
</div>
<div class="form-group" style="justify-content: flex-end;">
<label> </label>
<button class="btn btn-secondary" onclick="addSwitch()">+ Anahtar Ekle</button>
</div>
</div>
</div>
Bağlantı formu ekle
<div style="margin-top: 18px;">
<div style="color: white; font-weight: 600; font-size: 15px; margin-bottom: 10px;">Bağlantı Ekle</div>
<div class="form-grid">
<div class="form-group">
<label for="lkSrc">Kaynak Anahtarı</label>
<select id="lkSrc"></select>
</div>
<div class="form-group">
<label for="lkDst">Hedef Anahtarı</label>
<select id="lkDst"></select>
</div>
<div class="form-group">
<label for="lkCost">Yol Maliyeti</label>
<select id="lkCost">
<option value="2">2 (10 Gb/sn)</option>
<option value="4">4 (1 Gb/sn)</option>
<option selected="" value="19">19 (100 Mb/sn)</option>
<option value="100">100 (10 Mb/sn)</option>
<option value="250">250 (4 Mb/sn)</option>
<option value="1000">1000 (1,5 Mb/sn)</option>
</select>
</div>
<div class="form-group" style="justify-content: flex-end;">
<label> </label>
<button class="btn btn-secondary" onclick="addLink()">+ Bağlantı Ekle</button>
</div>
</div>
</div>
Arıza senaryosu
<div style="margin-top: 18px;">
<div class="scenario-bar">
<label for="scenarioSelect">Arıza Senaryosu:</label>
<select id="scenarioSelect">
<option value="">-- Yok (normal topoloji) --</option>
<option value="link_down">Bağlantının Kapatılması (bağlantıyı kaldırma)</option>
<option value="priority_change">Öncelik Değişikliği (düşük kök öncelik)</option>
<option value="new_switch">Yeni Anahtar Eklendi</option>
</select>
<select id="scenarioTarget" style="display:none; flex:1; min-width:150px; padding:8px 12px; border:2px solid rgba(255,255,255,0.3); border-radius:6px; background:rgba(255,255,255,0.95); font-size:14px;"></select>
<button class="btn btn-secondary" id="scenarioApplyBtn" onclick="applyScenario()" style="display:none;">Uygula</button>
</div>
</div>
<button class="submit-btn" onclick="runSTP()">STP Yakınsamasını Çalıştır</button>
<div class="help-text">
<strong>Uç:</strong>Engellenen bağlantı noktalarını görmek için yedek bağlantılara (üçgen veya halka) sahip en az 3 anahtar ekleyin.
            Aşağıdaki düğmeyi kullanarak bir ön ayar yükleyin veya kendi topolojinizi oluşturun.</div>
Önceden ayarlanmış topolojiler
<div style="display:flex; gap:10px; margin-top:12px; flex-wrap:wrap;">
<button class="btn btn-secondary btn-sm" onclick="loadPreset('triangle')">Yük: Üçgen</button>
<button class="btn btn-secondary btn-sm" onclick="loadPreset('ring4')">Yük: 4-Anahtar Halkası</button>
<button class="btn btn-secondary btn-sm" onclick="loadPreset('star')">Yük: Yıldız</button>
<button class="btn btn-secondary btn-sm" onclick="loadPreset('mesh')">Yük: Mesh (6 SW)</button>
<button class="btn btn-danger btn-sm" onclick="clearTopology()">Tümünü Temizle</button>
</div>
</div>/.calc-başlığı
═════════════════════════════ ══════════════════════════════
         GÜNCEL TOPOLOJİ LİSTESİ
    ═════════════════════════════ ══════════════════════════════
<div class="result-section show" id="topologyListSection">
<div class="section-header blue">
<h3>Mevcut Topoloji</h3>
</div>
<div class="section-content">
<div style="display:grid; grid-template-columns:1fr 1fr; gap:15px;">
<div>
<div style="font-weight:600; margin-bottom:8px; color:#1976D2;">Anahtarlar</div>
<ul class="switch-list" id="switchList">
<li style="color:#888; font-size:13px; padding:6px 0;">Henüz anahtar eklenmedi.</li>
</ul>
</div>
<div>
<div style="font-weight:600; margin-bottom:8px; color:#E65100;">Bağlantılar</div>
<ul class="link-list" id="linkList">
<li style="color:#888; font-size:13px; padding:6px 0;">Henüz bağlantı eklenmedi.</li>
</ul>
</div>
</div>
<div class="msg msg-error" id="topoError" style="display:none;"></div>
</div>
</div>
═════════════════════════════ ══════════════════════════════
         TOPOLOJİ GÖRSELLEŞTİRME
    ═════════════════════════════ ══════════════════════════════
<div class="result-section" id="vizSection">
<div class="section-header blue">
<h3>Topoloji Diyagramı</h3>
</div>
<div class="section-content" style="padding:15px;">
<div id="cy-container">
<div id="cy"></div>
</div>
Efsane
<div class="legend" style="margin-top:12px;">
<div class="legend-item"><div class="legend-dot" style="background:#FFC107;"></div>Kök Köprü</div>
<div class="legend-item"><div class="legend-dot" style="background:#4CAF50;"></div>Yönlendirme Bağlantı Noktası</div>
<div class="legend-item"><div class="legend-dot" style="background:#f44336;"></div>Bağlantı Noktasını Engelleme / Atma</div>
<div class="legend-item"><div class="legend-dot" style="background:#2196F3;"></div>Kök Bağlantı Noktası</div>
<div class="legend-item"><div class="legend-dot" style="background:#9C27B0;"></div>Belirlenmiş Bağlantı Noktası</div>
<div class="legend-item" style="font-size:12px; color:#888;">Kesikli çizgi = engellenen bağlantı</div>
</div>
</div>
</div>
═════════════════════════════ ══════════════════════════════
         KÖPRÜ SEÇİMİ
    ═════════════════════════════ ══════════════════════════════
<div class="result-section" id="rootSection">
<div class="section-header">
<h3>Kök Köprü Seçimi</h3>
</div>
<div class="section-content" id="rootContent"></div>
</div>
═════════════════════════════ ══════════════════════════════
         LİMAN DEVLETLERİ
    ═════════════════════════════ ══════════════════════════════
<div class="result-section" id="portSection">
<div class="section-header">
<h3>Liman Devletleri</h3>
</div>
<div class="section-content" id="portContent"></div>
</div>
═════════════════════════════ ══════════════════════════════
         BPDU MÜFETTİŞİ
    ═════════════════════════════ ══════════════════════════════
<div class="result-section" id="bpduSection">
<div class="section-header orange">
<h3>BPDU Müfettişi</h3>
</div>
<div class="section-content" id="bpduContent"></div>
</div>
═════════════════════════════ ══════════════════════════════
         YAKINSAŞMA ZAMAN ÇİZELGİSİ
    ═════════════════════════════ ══════════════════════════════
<div class="result-section" id="timelineSection">
<div class="section-header purple">
<h3>Yakınsama Zaman Çizelgesi</h3>
</div>
<div class="section-content" id="timelineContent"></div>
</div>
═════════════════════════════ ══════════════════════════════
         STP KAVRAMLARI
    ═════════════════════════════ ══════════════════════════════
<div class="result-section show" id="conceptSection">
<div class="section-header" style="background:linear-gradient(135deg,#546E7A 0%,#37474F 100%);">
<h3>STP / RSTP Kavramları</h3>
</div>
<div class="section-content">
<div class="concept-grid">
<div class="concept-card">
<h4>Kök Köprü Seçimi</h4>
<p>En düşük Köprü Kimliğine sahip anahtar kazanır. Köprü Kimliği = Öncelik (varsayılan 32768) + MAC adresi. Öncelikli bağlar sayısal olarak daha düşük MAC'a gider. VLAN başına yalnızca bir temel köprü.</p>
</div>
<div class="concept-card">
<h4>Kök Bağlantı Noktası</h4>
<p>Kök olmayan her anahtar, temel köprüye giden en düşük kümülatif yol maliyetine sahip bağlantı noktası olan bir Kök Bağlantı Noktasını seçer. Bağlantılar komşu Köprü Kimliği ve ardından bağlantı noktası kimliği ile kopar.</p>
</div>
<div class="concept-card">
<h4>Belirlenmiş Bağlantı Noktası</h4>
<p>Her ağ kesiminin tam olarak bir Atanmış Bağlantı Noktası vardır; bu, köke giden en iyi (en düşük maliyetli) yolu sunan bağlantı noktasıdır. Temel köprüdeki tüm bağlantı noktaları belirlenmiştir.</p>
</div>
<div class="concept-card">
<h4>Engellenen / Atılan Bağlantı Noktaları</h4>
<p>Kök Bağlantı Noktası veya Atanmış Bağlantı Noktası olmayan herhangi bir bağlantı noktası engellenir (STP) veya atılır (RSTP). Bunlar, döngü içermeyen bir topolojiyi korurken Katman-2 döngülerini kırar.</p>
</div>
<div class="concept-card rstp">
<h4>RSTP (802.1w) Kenar Bağlantı Noktaları</h4>
<p>RSTP uç bağlantı noktaları diğer anahtarlara değil uç ana bilgisayarlara bağlanır. STP'nin PortFast özelliğine eşdeğer olan Yönlendirme'ye (dinleme/öğrenme gecikmesi yok) anında geçiş yaparlar.</p>
</div>
<div class="concept-card rstp">
<h4>RSTP Yakınsama Hızı</h4>
<p>STP yakınsaması 30-50 saniye sürer (bağlantı noktası başına Dinleme 15 saniye + Öğrenme 15 saniye). RSTP, atlama başına 2 saniyenin altında birleşen bir Teklif/Anlaşma anlaşması kullanır.</p>
</div>
<div class="concept-card">
<h4>Yol Maliyeti (IEEE 802.1D)</h4>
<p>10 Gbps = 2, 1 Gbps = 4, 100 Mbps = 19, 10 Mbps = 100, 1,5 Mbps = 1000. Daha düşük maliyet = tercih edilen yol. Kök köprünün maliyeti 0'dır; her atlama kendi liman maliyetini ekler.</p>
</div>
<div class="concept-card">
<h4>BPDU (Köprü Protokolü Veri Birimi)</h4>
<p>BPDU'lar şunları taşır: Kök Köprü Kimliği, Kök Yol Maliyeti, Gönderici Köprüsü Kimliği, Bağlantı Noktası Kimliği ve zamanlayıcılar. Kök köprü, her Merhaba Zamanında (2s) BPDU'ları oluşturur. Diğer köprüler bunları Belirlenmiş Bağlantı Noktalarına aktarır.</p>
</div>
</div>
</div>
</div>
</div>/.calc-konteyner
Cytoscape.js CDN'si
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.29.2/cytoscape.min.js"></script>
<script>
/* ================================================================
   STP / RSTP CONVERGENCE SIMULATOR
   Implements:
     - Root bridge election (priority + MAC)
     - Root port selection (lowest cost to root)
     - Designated port selection per link segment
     - Blocking / Discarding port identification
     - Convergence timeline with STP vs RSTP timing
     - Cytoscape.js visualization
     - Preset topologies and failure scenarios
   ================================================================ */

'use strict';

/* ── Global State ─────────────────────────────────────────────── */
let stpMode = 'STP';  // 'STP' | 'RSTP'

/** @type {{ id: string, name: string, priority: number, mac: string }[]} */
let switches = [];

/** @type {{ id: string, source: string, target: string, cost: number, disabled: boolean }[]} */
let links = [];

let lastResult = null;   // STP computation result
let cyInstance = null;   // Cytoscape instance
let swCounter = 0;       // Auto-increment for switch IDs

/* ── Utility ──────────────────────────────────────────────────── */

/**
 * Parse a hex MAC string (4-12 chars) to a comparable integer.
 * We only need relative ordering, so we use the last 48 bits.
 * @param {string} mac
 * @returns {number}
 */
function macToInt(mac) {
    // Pad to 12 hex chars
    const padded = mac.toLowerCase().padStart(12, '0');
    // Use Number() on the full hex; for 12 hex digits this fits in a JS float safely up to 2^53
    return parseInt(padded, 16);
}

/**
 * Format a MAC address from a compact 12-char hex string.
 * @param {string} mac
 * @returns {string}
 */
function formatMac(mac) {
    const padded = mac.toLowerCase().padStart(12, '0');
    return padded.match(/.{2}/g).join(':');
}

/**
 * Generate a random 4-hex-char suffix for a switch MAC.
 * @returns {string}
 */
function randomMacSuffix() {
    return Math.floor(Math.random() * 0x10000).toString(16).padStart(4, '0');
}

/**
 * Build a full 12-char MAC from a 4-char suffix.
 * Prefix is deterministic (aa:bb:cc) so that root bridge election is predictable
 * for preset topologies.
 * @param {string} suffix  4 hex chars
 * @returns {string}
 */
function buildMac(suffix) {
    return 'aabbcc' + suffix.toLowerCase().padStart(4, '0');
}

/**
 * Bridge ID for comparison: [priority, macInt].
 * Lower Bridge ID wins the election.
 * @param {{ priority: number, mac: string }} sw
 * @returns {[number, number]}
 */
function bridgeId(sw) {
    return [sw.priority, macToInt(sw.mac)];
}

/**
 * Compare two Bridge IDs.
 * @returns {-1|0|1}
 */
function compareBridgeId(a, b) {
    if (a[0] !== b[0]) return a[0] < b[0] ? -1 : 1;
    if (a[1] !== b[1]) return a[1] < b[1] ? -1 : 1;
    return 0;
}

/* ── Mode toggle ──────────────────────────────────────────────── */
function setMode(mode) {
    stpMode = mode;
    document.getElementById('btnSTP').classList.toggle('active',  mode === 'STP');
    document.getElementById('btnRSTP').classList.toggle('active', mode === 'RSTP');
}

/* ── Switch management ────────────────────────────────────────── */
function addSwitch() {
    const nameInput = document.getElementById('swName');
    const priorityInput = document.getElementById('swPriority');
    const macInput = document.getElementById('swMac');

    const name = nameInput.value.trim() || `SW${swCounter + 1}`;
    const priority = parseInt(priorityInput.value, 10);
    const macSuffix = macInput.value.trim() || randomMacSuffix();

    // Validate MAC suffix (0–4 hex chars)
    if (!/^[0-9a-fA-F]{0,4}$/.test(macInput.value.trim()) && macInput.value.trim() !== '') {
        showTopoError('MAC suffix must be 0–4 hex characters (e.g. "00a1").');
        return;
    }

    // Detect duplicate name
    if (switches.find(s => s.name.toLowerCase() === name.toLowerCase())) {
        showTopoError(`A switch named "${name}" already exists. Choose a different name.`);
        return;
    }

    swCounter++;
    const id = `sw${swCounter}`;
    const mac = buildMac(macSuffix);

    switches.push({ id, name, priority, mac });

    // Reset fields
    nameInput.value = '';
    macInput.value = '';
    priorityInput.value = '32768';

    clearTopoError();
    renderTopologyList();
    updateLinkSelectors();
}

function removeSwitch(id) {
    switches = switches.filter(s => s.id !== id);
    // Remove all links that referenced this switch
    links = links.filter(l => l.source !== id && l.target !== id);
    renderTopologyList();
    updateLinkSelectors();
    hideResults();
}

/* ── Link management ──────────────────────────────────────────── */
function addLink() {
    const src = document.getElementById('lkSrc').value;
    const dst = document.getElementById('lkDst').value;
    const cost = parseInt(document.getElementById('lkCost').value, 10);

    if (!src || !dst) {
        showTopoError('Add at least 2 switches before adding a link.');
        return;
    }
    if (src === dst) {
        showTopoError('Source and destination must be different switches.');
        return;
    }

    // Prevent duplicate links
    const dupLink = links.find(l =>
        (l.source === src && l.target === dst) ||
        (l.source === dst && l.target === src)
    );
    if (dupLink) {
        showTopoError('A link between these two switches already exists.');
        return;
    }

    const id = `lk${links.length + 1}_${src}_${dst}`;
    links.push({ id, source: src, target: dst, cost, disabled: false });

    clearTopoError();
    renderTopologyList();
    hideResults();
}

function removeLink(id) {
    links = links.filter(l => l.id !== id);
    renderTopologyList();
    hideResults();
}

/* ── Render topology list ─────────────────────────────────────── */
function renderTopologyList() {
    const swListEl  = document.getElementById('switchList');
    const lkListEl  = document.getElementById('linkList');

    // Switches
    if (switches.length === 0) {
        swListEl.innerHTML = '<li style="color:#888; font-size:13px; padding:6px 0;">No switches added yet.</li>';
    } else {
        swListEl.innerHTML = switches.map(sw => `
            <li class="switch-item">
                <span class="sw-id">${sw.id}</span>
                <span class="sw-name">${escHtml(sw.name)}</span>
                <span class="sw-priority">P:${sw.priority}</span>
                <span class="sw-mac">${formatMac(sw.mac)}</span>
                <button class="btn btn-danger btn-sm" onclick="removeSwitch('${sw.id}')" aria-label="Remove ${escHtml(sw.name)}">x</button>
            </li>
        `).join('');
    }

    // Links
    if (links.length === 0) {
        lkListEl.innerHTML = '<li style="color:#888; font-size:13px; padding:6px 0;">No links added yet.</li>';
    } else {
        lkListEl.innerHTML = links.map(lk => {
            const srcSw = switches.find(s => s.id === lk.source);
            const dstSw = switches.find(s => s.id === lk.target);
            const srcName = srcSw ? srcSw.name : lk.source;
            const dstName = dstSw ? dstSw.name : lk.target;
            return `
                <li class="link-item${lk.disabled ? ' disabled-link' : ''}">
                    <span class="lk-label">${escHtml(srcName)} &harr; ${escHtml(dstName)} (cost ${lk.cost}${lk.disabled ? ', DISABLED' : ''})</span>
                    <button class="btn btn-danger btn-sm" onclick="removeLink('${lk.id}')" aria-label="Remove link">x</button>
                </li>
            `;
        }).join('');
    }
}

function updateLinkSelectors() {
    const srcEl = document.getElementById('lkSrc');
    const dstEl = document.getElementById('lkDst');
    const opts = switches.map(sw => `<option value="${sw.id}">${escHtml(sw.name)}</option>`).join('');
    srcEl.innerHTML = opts || '<option value="">-- no switches --</option>';
    dstEl.innerHTML = opts || '<option value="">-- no switches --</option>';

    // Default dst to second switch to reduce friction
    if (switches.length >= 2) {
        dstEl.value = switches[1].id;
    }
}

/* ── Scenario handling ────────────────────────────────────────── */
document.getElementById('scenarioSelect').addEventListener('change', function () {
    const val = this.value;
    const targetEl = document.getElementById('scenarioTarget');
    const applyBtn = document.getElementById('scenarioApplyBtn');

    if (!val) {
        targetEl.style.display = 'none';
        applyBtn.style.display = 'none';
        return;
    }

    targetEl.style.display = 'block';
    applyBtn.style.display = 'block';

    if (val === 'link_down') {
        targetEl.innerHTML = links.filter(l => !l.disabled).map(lk => {
            const src = switches.find(s => s.id === lk.source);
            const dst = switches.find(s => s.id === lk.target);
            return `<option value="${lk.id}">${src ? src.name : lk.source} ↔ ${dst ? dst.name : lk.target}</option>`;
        }).join('') || '<option value="">No links available</option>';
    } else if (val === 'priority_change') {
        targetEl.innerHTML = switches.map(sw =>
            `<option value="${sw.id}">${escHtml(sw.name)} (currently ${sw.priority})</option>`
        ).join('') || '<option value="">No switches available</option>';
    } else if (val === 'new_switch') {
        targetEl.innerHTML = '<option value="auto">Auto-generate new switch</option>';
    }
});

function applyScenario() {
    const scenario = document.getElementById('scenarioSelect').value;
    const targetId  = document.getElementById('scenarioTarget').value;

    if (scenario === 'link_down') {
        const lk = links.find(l => l.id === targetId);
        if (lk) {
            lk.disabled = true;
            renderTopologyList();
            hideResults();
        }
    } else if (scenario === 'priority_change') {
        const sw = switches.find(s => s.id === targetId);
        if (sw) {
            sw.priority = 4096; // Give this switch the lowest priority → becomes root
            renderTopologyList();
            hideResults();
        }
    } else if (scenario === 'new_switch') {
        swCounter++;
        const id = `sw${swCounter}`;
        const mac = buildMac(randomMacSuffix());
        switches.push({ id, name: `SW${swCounter}`, priority: 32768, mac });

        // Auto-connect to last existing switch
        if (switches.length >= 2) {
            const prev = switches[switches.length - 2];
            links.push({ id: `lk${links.length + 1}_${prev.id}_${id}`, source: prev.id, target: id, cost: 19, disabled: false });
        }

        renderTopologyList();
        updateLinkSelectors();
        hideResults();
    }

    // Refresh scenario target options after applying
    document.getElementById('scenarioSelect').dispatchEvent(new Event('change'));
}

/* ── Preset topologies ────────────────────────────────────────── */
function clearTopology() {
    switches = [];
    links = [];
    swCounter = 0;
    lastResult = null;

    renderTopologyList();
    updateLinkSelectors();
    hideResults();

    if (cyInstance) {
        cyInstance.destroy();
        cyInstance = null;
    }
}

function loadPreset(name) {
    clearTopology();

    const presets = {
        // Classic 3-switch ring with one blocked port
        triangle: {
            switches: [
                { name: 'SW1', priority: 32768, mac: '0001' },
                { name: 'SW2', priority: 32768, mac: '0002' },
                { name: 'SW3', priority: 32768, mac: '0003' },
            ],
            links: [
                { src: 0, dst: 1, cost: 19 },
                { src: 1, dst: 2, cost: 19 },
                { src: 0, dst: 2, cost: 19 },
            ]
        },
        // 4-switch ring — two redundant paths exist
        ring4: {
            switches: [
                { name: 'Core1',  priority: 4096,  mac: '0001' },
                { name: 'Dist1',  priority: 32768, mac: '0002' },
                { name: 'Access1',priority: 32768, mac: '0003' },
                { name: 'Access2',priority: 32768, mac: '0004' },
            ],
            links: [
                { src: 0, dst: 1, cost: 4  },
                { src: 1, dst: 2, cost: 19 },
                { src: 2, dst: 3, cost: 19 },
                { src: 3, dst: 0, cost: 4  },
                { src: 1, dst: 3, cost: 19 },
            ]
        },
        // Star — root in the center, no loops
        star: {
            switches: [
                { name: 'Core',  priority: 4096,  mac: '0001' },
                { name: 'SW-A',  priority: 32768, mac: '00a0' },
                { name: 'SW-B',  priority: 32768, mac: '00b0' },
                { name: 'SW-C',  priority: 32768, mac: '00c0' },
                { name: 'SW-D',  priority: 32768, mac: '00d0' },
            ],
            links: [
                { src: 0, dst: 1, cost: 4  },
                { src: 0, dst: 2, cost: 4  },
                { src: 0, dst: 3, cost: 19 },
                { src: 0, dst: 4, cost: 19 },
            ]
        },
        // Full mesh of 6 switches — multiple blocked ports
        mesh: {
            switches: [
                { name: 'SW1', priority: 4096,  mac: '0001' },
                { name: 'SW2', priority: 32768, mac: '0002' },
                { name: 'SW3', priority: 32768, mac: '0003' },
                { name: 'SW4', priority: 32768, mac: '0004' },
                { name: 'SW5', priority: 32768, mac: '0005' },
                { name: 'SW6', priority: 32768, mac: '0006' },
            ],
            links: [
                { src: 0, dst: 1, cost: 4  },
                { src: 0, dst: 2, cost: 4  },
                { src: 0, dst: 3, cost: 19 },
                { src: 1, dst: 2, cost: 19 },
                { src: 1, dst: 4, cost: 19 },
                { src: 2, dst: 5, cost: 19 },
                { src: 3, dst: 4, cost: 19 },
                { src: 4, dst: 5, cost: 19 },
                { src: 3, dst: 5, cost: 19 },
            ]
        }
    };

    const preset = presets[name];
    if (!preset) return;

    preset.switches.forEach(sw => {
        swCounter++;
        const id = `sw${swCounter}`;
        switches.push({ id, name: sw.name, priority: sw.priority, mac: buildMac(sw.mac) });
    });

    preset.links.forEach((lk, i) => {
        const srcSw = switches[lk.src];
        const dstSw = switches[lk.dst];
        links.push({
            id: `lk${i + 1}_${srcSw.id}_${dstSw.id}`,
            source: srcSw.id,
            target: dstSw.id,
            cost: lk.cost,
            disabled: false
        });
    });

    clearTopoError();
    renderTopologyList();
    updateLinkSelectors();
}

/* ── STP Algorithm ────────────────────────────────────────────── */

/**
 * Run the full STP/RSTP algorithm on the current topology.
 * Returns a result object with root, portStates, convergenceTimeline, bpdus.
 */
function computeSTP() {
    const activeSwitches = switches;
    const activeLinks = links.filter(l => !l.disabled);

    if (activeSwitches.length < 2) {
        return { error: 'Add at least 2 switches to run STP.' };
    }

    // Step 1: Root bridge election — lowest Bridge ID wins
    let root = activeSwitches[0];
    for (let i = 1; i < activeSwitches.length; i++) {
        if (compareBridgeId(bridgeId(activeSwitches[i]), bridgeId(root)) < 0) {
            root = activeSwitches[i];
        }
    }

    // Step 2: Dijkstra — compute lowest cost path from every switch to root
    //   costToRoot[switchId] = { cost: number, via: linkId | null }
    const costToRoot = {};
    activeSwitches.forEach(sw => costToRoot[sw.id] = { cost: Infinity, via: null, nextHop: null });
    costToRoot[root.id] = { cost: 0, via: null, nextHop: null };

    // Simple Dijkstra over adjacency list
    const visited = new Set();
    const queue = [{ id: root.id, cost: 0 }];

    while (queue.length > 0) {
        // Pop lowest cost
        queue.sort((a, b) => a.cost - b.cost);
        const { id: current, cost: currentCost } = queue.shift();

        if (visited.has(current)) continue;
        visited.add(current);

        // Expand neighbors through active links
        for (const lk of activeLinks) {
            let neighbor = null;
            if (lk.source === current) neighbor = lk.target;
            else if (lk.target === current) neighbor = lk.source;
            if (!neighbor) continue;

            const newCost = currentCost + lk.cost;
            if (newCost < costToRoot[neighbor].cost) {
                costToRoot[neighbor].cost = newCost;
                costToRoot[neighbor].via = lk.id;
                costToRoot[neighbor].nextHop = current;
                queue.push({ id: neighbor, cost: newCost });
            }
        }
    }

    // Step 3: Assign port roles
    // portRoles: Map of { portKey → role }
    //   portKey = `${linkId}:${switchId}` (each end of a link is a separate "port")
    //   roles: 'root' | 'designated' | 'blocking' | 'discarding' (RSTP) | 'edge'
    const portRoles  = {};   // portKey → role
    const portStates = {};   // portKey → state (STP state machine)

    // Helper: portKey for one end of a link
    const portKey = (linkId, switchId) => `${linkId}:${switchId}`;

    // Mark root bridge's ports — all are designated
    for (const lk of activeLinks) {
        if (lk.source === root.id) {
            portRoles[portKey(lk.id, root.id)] = 'designated';
        }
        if (lk.target === root.id) {
            portRoles[portKey(lk.id, root.id)] = 'designated';
        }
    }

    // For every non-root switch, mark its Root Port
    for (const sw of activeSwitches) {
        if (sw.id === root.id) continue;

        const viaLink = costToRoot[sw.id].via;
        if (viaLink) {
            portRoles[portKey(viaLink, sw.id)] = 'root';
        }
    }

    // For each link that doesn't already have both ends assigned,
    // determine Designated Port on each segment:
    //   The Designated Port is the end whose switch has the lowest cost to root.
    //   Ties broken by sender Bridge ID.
    for (const lk of activeLinks) {
        const srcKey = portKey(lk.id, lk.source);
        const dstKey = portKey(lk.id, lk.target);

        const srcSw = activeSwitches.find(s => s.id === lk.source);
        const dstSw = activeSwitches.find(s => s.id === lk.target);

        if (!srcSw || !dstSw) continue;

        const srcRole = portRoles[srcKey];
        const dstRole = portRoles[dstKey];

        // If one end is root port, the other end must be designated
        if (srcRole === 'root' && !dstRole) {
            portRoles[dstKey] = 'designated';
        } else if (dstRole === 'root' && !srcRole) {
            portRoles[srcKey] = 'designated';
        } else if (!srcRole && !dstRole) {
            // Neither end is root — pick designated by lowest cost to root
            const srcCost = costToRoot[lk.source].cost;
            const dstCost = costToRoot[lk.target].cost;

            let designatedOnSrc;
            if (srcCost < dstCost) {
                designatedOnSrc = true;
            } else if (dstCost < srcCost) {
                designatedOnSrc = false;
            } else {
                // Tie on cost — use Bridge ID to break
                designatedOnSrc = compareBridgeId(bridgeId(srcSw), bridgeId(dstSw)) < 0;
            }

            if (designatedOnSrc) {
                portRoles[srcKey] = 'designated';
                portRoles[dstKey] = 'blocking';
            } else {
                portRoles[dstKey] = 'designated';
                portRoles[srcKey] = 'blocking';
            }
        }

        // Fallback: both ends assigned (e.g., both designated from previous pass) — block the higher-cost one
        if (portRoles[srcKey] === 'designated' && portRoles[dstKey] === 'designated') {
            const srcCost = costToRoot[lk.source].cost;
            const dstCost = costToRoot[lk.target].cost;
            if (srcCost < dstCost) {
                portRoles[dstKey] = 'blocking';
            } else if (dstCost < srcCost) {
                portRoles[srcKey] = 'blocking';
            } else {
                // Tie — block higher Bridge ID
                if (compareBridgeId(bridgeId(srcSw), bridgeId(dstSw)) > 0) {
                    portRoles[srcKey] = 'blocking';
                } else {
                    portRoles[dstKey] = 'blocking';
                }
            }
        }
    }

    // Step 4: Map port roles to STP/RSTP states
    for (const [key, role] of Object.entries(portRoles)) {
        if (stpMode === 'RSTP') {
            // RSTP: discarding | learning | forwarding
            switch (role) {
                case 'root':        portStates[key] = 'forwarding';  break;
                case 'designated':  portStates[key] = 'forwarding';  break;
                case 'blocking':    portStates[key] = 'discarding';  break;
                default:            portStates[key] = 'discarding';
            }
        } else {
            // STP: blocking | listening | learning | forwarding
            switch (role) {
                case 'root':        portStates[key] = 'forwarding';  break;
                case 'designated':  portStates[key] = 'forwarding';  break;
                case 'blocking':    portStates[key] = 'blocking';    break;
                default:            portStates[key] = 'blocking';
            }
        }
    }

    // Step 5: Build BPDU details (what root's BPDU looks like, and what each switch relays)
    const bpdus = activeSwitches.map(sw => {
        const isRoot = sw.id === root.id;
        return {
            sender: sw,
            isRoot,
            rootBridgeId: { priority: root.priority, mac: root.mac },
            rootPathCost: costToRoot[sw.id].cost,
            senderBridgeId: { priority: sw.priority, mac: sw.mac },
            helloTime: 2,
            maxAge: 20,
            forwardDelay: stpMode === 'RSTP' ? 0 : 15,
        };
    });

    // Step 6: Build convergence timeline
    const timeline = buildConvergenceTimeline(root, activeSwitches, activeLinks, portRoles, costToRoot);

    return {
        root,
        costToRoot,
        portRoles,
        portStates,
        bpdus,
        timeline,
        activeLinks,
    };
}

/**
 * Generate a convergence timeline for STP or RSTP.
 * Returns an array of { time, type, description } events.
 */
function buildConvergenceTimeline(root, activeSwitches, activeLinks, portRoles, costToRoot) {
    const events = [];
    const isRSTP = stpMode === 'RSTP';

    // T=0: Topology discovered — all ports start in blocking/discarding
    events.push({ time: 0,    type: 'init',         description: 'Topology discovered. All ports initialized to ' + (isRSTP ? 'Discarding' : 'Blocking') + '.' });

    // T=0: Root bridge election
    events.push({ time: 0,    type: 'root-election', description: `Root bridge elected: ${root.name} (Priority ${root.priority}, MAC ${formatMac(root.mac)}).` });

    if (isRSTP) {
        // RSTP: Proposal/Agreement handshake — 1–3 seconds per hop
        const maxHops = Math.max(...activeSwitches.map(sw => {
            // Estimate hop count from root based on cost
            if (sw.id === root.id) return 0;
            const lk = activeLinks.find(l => l.id === costToRoot[sw.id].via);
            return lk ? 1 : 0; // simplified: each switch is at most 1–N hops
        }), 0);

        events.push({ time: 0,    type: 'port-change',  description: `Root bridge ${root.name}: All ports transition to Forwarding (Designated).` });
        events.push({ time: 1,    type: 'port-change',  description: 'RSTP Proposal/Agreement handshake begins on all point-to-point links.' });
        events.push({ time: 1,    type: 'port-change',  description: 'Root Ports on non-root switches transition to Forwarding (Agreement received).' });

        // Show each blocked port
        const blockingPorts = Object.entries(portRoles).filter(([,role]) => role === 'blocking');
        if (blockingPorts.length > 0) {
            events.push({ time: 1, type: 'port-blocked', description: `${blockingPorts.length} port(s) remain Discarding (alternate/backup ports).` });
        }

        events.push({ time: 2,    type: 'convergence',  description: `RSTP convergence COMPLETE. Total time: ~2 seconds (vs ~${activeSwitches.length * 15 + 15}s for STP).` });

    } else {
        // STP: Classic 50-second convergence
        events.push({ time: 0,    type: 'port-change',  description: `Root bridge ${root.name}: All ports immediately enter Forwarding state.` });
        events.push({ time: 2,    type: 'port-change',  description: 'Root bridge begins sending Hello BPDUs every 2 seconds.' });
        events.push({ time: 2,    type: 'port-change',  description: 'Non-root switches receive BPDUs, elect Root Ports, begin Listening state.' });

        // Mark blocked ports
        const blockingPorts = Object.entries(portRoles).filter(([,role]) => role === 'blocking');
        events.push({ time: 2,    type: 'port-blocked',  description: `${blockingPorts.length} port(s) identified as redundant, transition to Blocking state.` });

        // Listening → Learning (15 seconds)
        events.push({ time: 2,    type: 'port-change',  description: 'Designated Ports enter Listening state (15-second Forward Delay starts).' });
        events.push({ time: 17,   type: 'port-change',  description: 'Listening → Learning: ports now populate MAC address tables (another 15-second delay).' });

        // Learning → Forwarding (another 15 seconds)
        events.push({ time: 32,   type: 'port-change',  description: 'Learning → Forwarding: Designated and Root Ports begin forwarding frames.' });
        events.push({ time: 32,   type: 'convergence',  description: `STP convergence COMPLETE. Total time: ~32 seconds (compare: RSTP ~2 seconds).` });
    }

    return events.sort((a, b) => a.time - b.time);
}

/* ── Run and display ──────────────────────────────────────────── */
function runSTP() {
    clearTopoError();

    if (switches.length < 2) {
        showTopoError('Add at least 2 switches before running STP.');
        return;
    }
    if (links.filter(l => !l.disabled).length < 1) {
        showTopoError('Add at least 1 active link between switches.');
        return;
    }

    const result = computeSTP();
    if (result.error) {
        showTopoError(result.error);
        return;
    }

    lastResult = result;

    renderVisualization(result);
    renderRootSection(result);
    renderPortSection(result);
    renderBpduSection(result);
    renderTimelineSection(result);

    // Scroll to visualization
    document.getElementById('vizSection').scrollIntoView({ behavior: 'smooth', block: 'start' });
}

/* ── Visualization (Cytoscape.js) ────────────────────────────── */
function renderVisualization(result) {
    const { root, portRoles, activeLinks } = result;

    const cyNodes = switches.map(sw => {
        const isRoot = sw.id === root.id;
        return {
            data: {
                id: sw.id,
                label: sw.name + (isRoot ? '\n[ROOT]' : ''),
                isRoot,
                priority: sw.priority,
                mac: formatMac(sw.mac),
            }
        };
    });

    // Build edges, annotating each with the port roles of both ends
    const cyEdges = links.map(lk => {
        const srcKey = `${lk.id}:${lk.source}`;
        const dstKey = `${lk.id}:${lk.target}`;
        const srcRole = portRoles[srcKey] || 'unknown';
        const dstRole = portRoles[dstKey] || 'unknown';
        const isBlocked = lk.disabled || srcRole === 'blocking' || dstRole === 'blocking' ||
                          srcRole === 'discarding' || dstRole === 'discarding';
        return {
            data: {
                id: lk.id,
                source: lk.source,
                target: lk.target,
                label: `cost ${lk.cost}`,
                srcRole,
                dstRole,
                isBlocked,
                disabled: lk.disabled,
            }
        };
    });

    // Destroy previous instance
    if (cyInstance) {
        cyInstance.destroy();
        cyInstance = null;
    }

    // Build Cytoscape stylesheet
    const cyStyle = [
        {
            selector: 'node',
            style: {
                'background-color':   '#1565C0',
                'label':              'data(label)',
                'color':              '#ffffff',
                'text-valign':        'center',
                'text-halign':        'center',
                'font-size':          '11px',
                'font-family':        'Segoe UI, Tahoma, sans-serif',
                'width':              '70px',
                'height':             '70px',
                'shape':              'rectangle',
                'border-width':       '2px',
                'border-color':       '#90CAF9',
                'text-wrap':          'wrap',
                'text-max-width':     '65px',
                'padding':            '10px',
            }
        },
        {
            selector: 'node[?isRoot]',
            style: {
                'background-color': '#F57F17',
                'border-color':     '#FFD600',
                'border-width':     '3px',
                'font-weight':      'bold',
            }
        },
        {
            selector: 'edge',
            style: {
                'line-color':         '#4FC3F7',
                'target-arrow-color': '#4FC3F7',
                'width':              '2px',
                'label':              'data(label)',
                'font-size':          '10px',
                'color':              '#B0BEC5',
                'text-background-color': '#1a2332',
                'text-background-opacity': 0.8,
                'text-background-padding': '2px',
                'curve-style':        'bezier',
            }
        },
        {
            selector: 'edge[?isBlocked]',
            style: {
                'line-style':    'dashed',
                'line-color':    '#ef5350',
                'opacity':       '0.6',
                'width':         '1.5px',
            }
        },
        {
            selector: 'edge[?disabled]',
            style: {
                'line-style':    'dotted',
                'line-color':    '#555',
                'opacity':       '0.35',
            }
        }
    ];

    // Pick layout based on switch count
    const layoutName = switches.length <= 6 ? 'circle' : 'cose';

    try {
        cyInstance = window.cytoscape({
            container: document.getElementById('cy'),
            elements: { nodes: cyNodes, edges: cyEdges },
            style: cyStyle,
            layout: {
                name: layoutName,
                padding: 40,
                animate: false,
            },
            userZoomingEnabled: true,
            userPanningEnabled: true,
            boxSelectionEnabled: false,
            autoungrabify: false,
        });

        // Show tooltip on node click
        cyInstance.on('tap', 'node', function (evt) {
            const sw = evt.target.data();
            const swData = switches.find(s => s.id === sw.id);
            if (!swData || !lastResult) return;

            const myLinks = links.filter(l => l.source === sw.id || l.target === sw.id);
            const portInfo = myLinks.map(lk => {
                const key = `${lk.id}:${sw.id}`;
                const role  = lastResult.portRoles[key]  || 'n/a';
                const state = lastResult.portStates[key] || 'n/a';
                const peer  = switches.find(s => s.id === (lk.source === sw.id ? lk.target : lk.source));
                return `Port to ${peer ? peer.name : '?'}: ${role} / ${state}`;
            }).join('\n');

            alert(`${swData.name}\nPriority: ${swData.priority}\nMAC: ${formatMac(swData.mac)}\n\n${portInfo}`);
        });

    } catch (e) {
        console.error('Cytoscape render error:', e);
    }

    showSection('vizSection');
}

/* ── Root bridge section ──────────────────────────────────────── */
function renderRootSection(result) {
    const { root, costToRoot, activeLinks } = result;

    // Sort candidates by Bridge ID for the election table
    const candidates = [...switches].sort((a, b) => compareBridgeId(bridgeId(a), bridgeId(b)));

    const rows = candidates.map((sw, idx) => {
        const isRoot = sw.id === root.id;
        const cost   = costToRoot[sw.id] ? costToRoot[sw.id].cost : '?';
        return `
        <tr>
            <td>${escHtml(sw.name)}</td>
            <td>${sw.priority}</td>
            <td>${formatMac(sw.mac)}</td>
            <td>${sw.priority + ' + ' + formatMac(sw.mac)}</td>
            <td>${cost === 0 ? '0 (root)' : cost}</td>
            <td>${isRoot ? '<span class="tag tag-root">ROOT BRIDGE</span>' : (idx === 0 ? '' : '')}</td>
        </tr>`;
    }).join('');

    const html = `
        <div class="data-row">
            <div class="data-label">Root Bridge</div>
            <div class="data-value highlight">${escHtml(root.name)}</div>
        </div>
        <div class="data-row">
            <div class="data-label">Bridge Priority</div>
            <div class="data-value">${root.priority}</div>
        </div>
        <div class="data-row">
            <div class="data-label">MAC Address</div>
            <div class="data-value">${formatMac(root.mac)}</div>
        </div>
        <div class="data-row">
            <div class="data-label">Bridge ID</div>
            <div class="data-value">${root.priority}.${formatMac(root.mac)}</div>
        </div>
        <div class="data-row">
            <div class="data-label">Active Links</div>
            <div class="data-value">${activeLinks.length} (${links.filter(l => l.disabled).length} disabled)</div>
        </div>
        <div style="margin-top:16px; font-weight:600; color:#1B5E20; font-size:14px; margin-bottom:8px;">Election Ranking (all candidates)</div>
        <div style="overflow-x:auto;">
            <table class="port-table">
                <thead>
                    <tr>
                        <th>Switch</th>
                        <th>Priority</th>
                        <th>MAC</th>
                        <th>Bridge ID</th>
                        <th>Cost to Root</th>
                        <th>Result</th>
                    </tr>
                </thead>
                <tbody>${rows}</tbody>
            </table>
        </div>
        <div class="msg msg-info" style="margin-top:12px;">
            <strong>Why ${escHtml(root.name)} won:</strong> It has the lowest Bridge ID (Priority ${root.priority} + MAC ${formatMac(root.mac)}).
            Ties on priority are broken by numerically lower MAC address.
        </div>
    `;

    document.getElementById('rootContent').innerHTML = html;
    showSection('rootSection');
}

/* ── Port states section ──────────────────────────────────────── */
function renderPortSection(result) {
    const { portRoles, portStates, activeLinks } = result;

    const rows = [];

    for (const sw of switches) {
        const myLinks = activeLinks.filter(l => l.source === sw.id || l.target === sw.id);
        if (myLinks.length === 0) {
            rows.push(`
            <tr>
                <td>${escHtml(sw.name)}</td>
                <td>—</td>
                <td><span class="tag tag-disc">no active links</span></td>
                <td><span class="tag tag-disc">discarding</span></td>
            </tr>`);
            continue;
        }

        for (const lk of myLinks) {
            const peer = switches.find(s => s.id === (lk.source === sw.id ? lk.target : lk.source));
            const key   = `${lk.id}:${sw.id}`;
            const role  = portRoles[key]  || 'unknown';
            const state = portStates[key] || 'unknown';

            const roleTag  = tagForRole(role);
            const stateTag = tagForState(state);

            rows.push(`
            <tr>
                <td>${escHtml(sw.name)}</td>
                <td>to ${escHtml(peer ? peer.name : '?')} (cost ${lk.cost})</td>
                <td>${roleTag}</td>
                <td>${stateTag}</td>
            </tr>`);
        }
    }

    // Also show disabled links
    const disabledLinks = links.filter(l => l.disabled);
    for (const lk of disabledLinks) {
        const srcSw = switches.find(s => s.id === lk.source);
        const dstSw = switches.find(s => s.id === lk.target);
        rows.push(`
        <tr>
            <td>${escHtml(srcSw ? srcSw.name : lk.source)}</td>
            <td>to ${escHtml(dstSw ? dstSw.name : lk.target)} [LINK DOWN]</td>
            <td><span class="tag tag-disc">disabled</span></td>
            <td><span class="tag tag-disc">disabled</span></td>
        </tr>`);
    }

    const blockCount = Object.values(portRoles).filter(r => r === 'blocking').length;
    const fwdCount   = Object.values(portRoles).filter(r => r === 'designated' || r === 'root').length;

    const html = `
        <div style="display:flex; gap:15px; flex-wrap:wrap; margin-bottom:16px;">
            <div class="msg msg-success" style="flex:1; min-width:150px; margin:0;">
                <strong>${fwdCount}</strong> ports forwarding
            </div>
            <div class="msg msg-error" style="flex:1; min-width:150px; margin:0;">
                <strong>${blockCount}</strong> port(s) ${stpMode === 'RSTP' ? 'discarding (alternate)' : 'blocking (redundant)'}
            </div>
        </div>
        <div style="overflow-x:auto;">
            <table class="port-table">
                <thead>
                    <tr>
                        <th>Switch</th>
                        <th>Port (Link)</th>
                        <th>Role</th>
                        <th>State (${stpMode})</th>
                    </tr>
                </thead>
                <tbody>${rows.join('')}</tbody>
            </table>
        </div>
    `;

    document.getElementById('portContent').innerHTML = html;
    showSection('portSection');
}

function tagForRole(role) {
    switch (role) {
        case 'root':        return '<span class="tag tag-fwd">Root</span>';
        case 'designated':  return '<span class="tag" style="background:#E8EAF6;color:#283593;">Designated</span>';
        case 'blocking':    return '<span class="tag tag-blk">Blocking</span>';
        case 'discarding':  return '<span class="tag tag-disc">Discarding</span>';
        default:            return `<span class="tag">${escHtml(role)}</span>`;
    }
}

function tagForState(state) {
    switch (state) {
        case 'forwarding':  return '<span class="tag tag-fwd">Forwarding</span>';
        case 'blocking':    return '<span class="tag tag-blk">Blocking</span>';
        case 'discarding':  return '<span class="tag tag-disc">Discarding</span>';
        case 'listening':   return '<span class="tag tag-lrn">Listening</span>';
        case 'learning':    return '<span class="tag tag-lrn">Learning</span>';
        case 'disabled':    return '<span class="tag" style="background:#eee;color:#666;">Disabled</span>';
        default:            return `<span class="tag">${escHtml(state)}</span>`;
    }
}

/* ── BPDU Inspector ───────────────────────────────────────────── */
function renderBpduSection(result) {
    const { bpdus } = result;

    // Show the root's BPDU first, then one sample from each non-root switch
    const rootBpdu = bpdus.find(b => b.isRoot);
    const nonRootBpdus = bpdus.filter(b => !b.isRoot);

    let html = '';

    if (rootBpdu) {
        html += `<div style="font-weight:600; color:#E65100; margin-bottom:8px; font-size:14px;">Root Bridge BPDU (${escHtml(rootBpdu.sender.name)} → all Designated Ports)</div>`;
        html += renderBpduBlock(rootBpdu, true);
    }

    if (nonRootBpdus.length > 0) {
        html += `<div style="font-weight:600; color:#37474F; margin-top:16px; margin-bottom:8px; font-size:14px;">Non-Root Switch BPDUs (relayed on Designated Ports)</div>`;
        html += nonRootBpdus.map(b => renderBpduBlock(b, false)).join('');
    }

    document.getElementById('bpduContent').innerHTML = html;
    showSection('bpduSection');
}

function renderBpduBlock(bpdu, isRoot) {
    const rootId  = `${bpdu.rootBridgeId.priority}.${formatMac(bpdu.rootBridgeId.mac)}`;
    const sendId  = `${bpdu.senderBridgeId.priority}.${formatMac(bpdu.senderBridgeId.mac)}`;
    const flagByte = isRoot ? '0x3C (TC+TCA)' : '0x00';
    const msgAge  = isRoot ? '0' : '(increments per hop)';

    return `
    <div class="bpdu-panel" style="margin-bottom:12px;">
        <div class="bpdu-row"><span class="bpdu-field">Sender:</span>          <span class="bpdu-val bridge">${escHtml(bpdu.sender.name)}</span></div>
        <div class="bpdu-row"><span class="bpdu-field">Protocol ID:</span>     <span class="bpdu-val">0x0000 (802.1D)</span></div>
        <div class="bpdu-row"><span class="bpdu-field">Version:</span>         <span class="bpdu-val">${stpMode === 'RSTP' ? '0x02 (RSTP)' : '0x00 (STP)'}</span></div>
        <div class="bpdu-row"><span class="bpdu-field">Type:</span>            <span class="bpdu-val">${stpMode === 'RSTP' ? '0x02 (RST BPDU)' : '0x00 (Config BPDU)'}</span></div>
        <div class="bpdu-row"><span class="bpdu-field">Flags:</span>           <span class="bpdu-val">${flagByte}</span></div>
        <div class="bpdu-row"><span class="bpdu-field">Root Bridge ID:</span>  <span class="bpdu-val root">${rootId}</span></div>
        <div class="bpdu-row"><span class="bpdu-field">Root Path Cost:</span>  <span class="bpdu-val root">${bpdu.rootPathCost}</span></div>
        <div class="bpdu-row"><span class="bpdu-field">Sender Bridge ID:</span><span class="bpdu-val bridge">${sendId}</span></div>
        <div class="bpdu-row"><span class="bpdu-field">Port ID:</span>         <span class="bpdu-val">0x8001</span></div>
        <div class="bpdu-row"><span class="bpdu-field">Message Age:</span>     <span class="bpdu-val">${msgAge}</span></div>
        <div class="bpdu-row"><span class="bpdu-field">Max Age:</span>         <span class="bpdu-val">${bpdu.maxAge}s</span></div>
        <div class="bpdu-row"><span class="bpdu-field">Hello Time:</span>      <span class="bpdu-val">${bpdu.helloTime}s</span></div>
        <div class="bpdu-row"><span class="bpdu-field">Forward Delay:</span>   <span class="bpdu-val">${bpdu.forwardDelay}s${bpdu.forwardDelay === 0 ? ' (RSTP skips Listening/Learning)' : ''}</span></div>
    </div>`;
}

/* ── Timeline section ─────────────────────────────────────────── */
function renderTimelineSection(result) {
    const { timeline } = result;

    const timeUnit = stpMode === 'RSTP' ? 's' : 's';

    const events = timeline.map(ev => {
        let cssClass = '';
        if (ev.type === 'root-election') cssClass = 'root-election';
        else if (ev.type === 'port-change') cssClass = 'port-change';
        else if (ev.type === 'port-blocked') cssClass = 'port-blocked';
        else if (ev.type === 'convergence') cssClass = 'convergence';

        return `
        <div class="timeline-event ${cssClass} fade-in-up">
            <span class="te-time">T+${ev.time}${timeUnit}</span>
            <span class="te-desc">${escHtml(ev.description)}</span>
        </div>`;
    }).join('');

    const convergenceTime = stpMode === 'RSTP' ? '~2 seconds' : '~32 seconds';
    const comparison      = stpMode === 'RSTP'
        ? 'RSTP is ~16x faster than STP for this topology.'
        : 'RSTP (802.1w) would converge this same topology in ~2 seconds.';

    const html = `
        <div class="msg msg-info" style="margin-bottom:16px;">
            <strong>${stpMode} convergence time:</strong> ${convergenceTime}. ${comparison}
        </div>
        <div class="timeline">${events}</div>
    `;

    document.getElementById('timelineContent').innerHTML = html;
    showSection('timelineSection');
}

/* ── Helpers ──────────────────────────────────────────────────── */
function showSection(id) {
    const el = document.getElementById(id);
    if (el) el.classList.add('show', 'fade-in-up');
}

function hideResults() {
    ['vizSection', 'rootSection', 'portSection', 'bpduSection', 'timelineSection'].forEach(id => {
        const el = document.getElementById(id);
        if (el) el.classList.remove('show', 'fade-in-up');
    });
    if (cyInstance) {
        cyInstance.destroy();
        cyInstance = null;
    }
}

function showTopoError(msg) {
    const el = document.getElementById('topoError');
    el.textContent = msg;
    el.style.display = 'block';
}

function clearTopoError() {
    const el = document.getElementById('topoError');
    el.style.display = 'none';
    el.textContent = '';
}

/**
 * Safe HTML escaping for user-supplied strings.
 * @param {string} str
 * @returns {string}
 */
function escHtml(str) {
    const d = document.createElement('div');
    d.appendChild(document.createTextNode(String(str)));
    return d.innerHTML;
}

/* ── Initialise with a default topology ──────────────────────── */
(function init() {
    loadPreset('triangle');
    // Automatically run STP so users see results immediately
    // (deferred until DOM is ready)
    setTimeout(() => {
        runSTP();
    }, 200);
}());
</script>