feat: allow switching between TCP Reno and Tahoe versions (#237)

Closes #222

Depends on #236

This PR allows switching between TCP Reno and Tahoe versions.

Author: MegaRedHand

src/config.ts

@@ -12,10 +12,15 @@ export class ConfigModal {
   private colorPicker: HTMLInputElement | null;
   private selectedColor: number; // Stores the actual selected color as a number
   private tempColor: number; // Temporary color for selection
+
   private enableTooltipsSwitch: HTMLInputElement | null;
   private enableTooltips: boolean;
   private tempEnableTooltips: boolean;
 
+  private useTcpRenoSwitch: HTMLInputElement | null;
+  private useTcpReno: boolean;
+  private tempUseTcpReno: boolean;
+
   constructor(ctx: GlobalContext) {
     this.ctx = ctx;
     this.modalOverlay = null;
@@ -27,6 +32,8 @@ export class ConfigModal {
     this.tempColor = this.selectedColor; // Temporary color for selection
     this.enableTooltips = true; // Default saved value
     this.tempEnableTooltips = this.enableTooltips; // Temporary value for selection
+    this.useTcpReno = true; // Default saved value
+    this.tempUseTcpReno = this.useTcpReno; // Temporary value for selection
 
     this.createModal();
     this.setupEventListeners();
@@ -83,6 +90,13 @@ export class ConfigModal {
                     <span class="switch-slider"></span>
                   </label>
                 </li>
+                <li class="setting-item">
+                  <label for="useTcpReno">Use TCP Reno</label>
+                  <label class="switch">
+                    <input type="checkbox" id="useTcpReno" class="switch-input" checked>
+                    <span class="switch-slider"></span>
+                  </label>
+                </li>
               </ul>
             </div>
           </div>
@@ -111,6 +125,9 @@ export class ConfigModal {
     this.enableTooltipsSwitch = document.getElementById(
       "enableTooltips",
     ) as HTMLInputElement;
+    this.useTcpRenoSwitch = document.getElementById(
+      "useTcpReno",
+    ) as HTMLInputElement;
   }
 
   private setupEventListeners() {
@@ -120,7 +137,8 @@ export class ConfigModal {
       !this.closeBtn ||
       !this.saveSettingsButton ||
       !this.colorPicker ||
-      !this.enableTooltipsSwitch
+      !this.enableTooltipsSwitch ||
+      !this.useTcpRenoSwitch
     ) {
       console.error("Some modal elements were not found.");
       return;
@@ -152,6 +170,12 @@ export class ConfigModal {
       this.tempEnableTooltips = isEnabled; // Update the local variable only
       console.log("Tooltips setting changed (not saved yet):", isEnabled);
     };
+
+    this.useTcpRenoSwitch.onchange = () => {
+      const isEnabled = this.useTcpRenoSwitch?.checked || false;
+      this.tempUseTcpReno = isEnabled; // Update the local variable only
+      console.log("TCP Reno setting changed (not saved yet):", isEnabled);
+    };
   }
 
   private setUpShortCuts() {
@@ -192,6 +216,11 @@ export class ConfigModal {
         this.enableTooltipsSwitch.checked = this.tempEnableTooltips; // Reflect the saved value in the UI
       }
 
+      if (this.useTcpRenoSwitch) {
+        this.tempUseTcpReno = this.useTcpReno;
+        this.useTcpRenoSwitch.checked = this.tempUseTcpReno; // Reflect the saved value in the UI
+      }
+
       this.modalOverlay.style.display = "flex"; // Make it visible first
       setTimeout(() => {
         this.modalOverlay?.classList.add("show");
@@ -223,27 +252,45 @@ export class ConfigModal {
       this.tempEnableTooltips = this.enableTooltips; // Reset temp value
       this.enableTooltipsSwitch.checked = this.enableTooltips; // Reflect saved value in UI
     }
+
+    if (this.useTcpRenoSwitch) {
+      this.tempUseTcpReno = this.useTcpReno; // Reset temp value
+      this.useTcpRenoSwitch.checked = this.useTcpReno; // Reflect saved value in UI
+    }
   }
 
   private saveSettings() {
     // Save the temp color as the actual selected color
     if (this.tempColor != this.selectedColor) {
       this.selectedColor = this.tempColor;
-      this.ctx.change_select_color(this.selectedColor);
+      this.ctx.setSelectColor(this.selectedColor);
     }
 
+    let updateTooltips = false;
+
     // Save the tooltips setting
     if (this.enableTooltipsSwitch) {
       this.enableTooltips = this.tempEnableTooltips; // Save the temporary value
-      this.ctx.change_enable_tooltips(this.enableTooltips); // Update the GlobalContext
-      updateTooltipsState(); // Update tooltips state in the app
+      this.ctx.setEnableTooltips(this.enableTooltips); // Update the GlobalContext
+      updateTooltips = true;
+    }
+
+    if (this.useTcpRenoSwitch) {
+      this.useTcpReno = this.tempUseTcpReno; // Save the temporary value
+      this.ctx.setUseTcpReno(this.useTcpReno); // Update the GlobalContext
+      updateTooltips = true;
     }
 
+    if (updateTooltips) {
+      updateTooltipsState(); // Update tooltips state in the app
+    }
     console.log(
       "Settings saved. Applied color:",
       this.selectedColor,
       "Tooltips enabled:",
       this.enableTooltips,
+      "TCP Reno enabled:",
+      this.useTcpReno,
     );
   }
 

src/context.ts

@@ -25,8 +25,11 @@ export class GlobalContext {
   private saveIntervalId: NodeJS.Timeout | null = null;
   private ipGenerator: IpAddressGenerator;
   private macGenerator: MacAddressGenerator;
+
+  // Settings
   private selectColor: number;
   private tooltipsEnabled: boolean;
+  private useTcpReno: boolean;
 
   constructor(viewport: Viewport) {
     this.selectColor = Colors.Violet;
@@ -203,19 +206,27 @@ export class GlobalContext {
     console.log(this.datagraph);
   }
 
-  public change_select_color(color: number) {
+  setSelectColor(color: number) {
     this.selectColor = color;
   }
 
-  public get_select_color() {
+  getSelectColor() {
     return this.selectColor;
   }
 
-  public change_enable_tooltips(enabled: boolean) {
+  setEnableTooltips(enabled: boolean) {
     this.tooltipsEnabled = enabled;
   }
 
-  public get_enable_tooltips() {
+  getEnableTooltips() {
     return this.tooltipsEnabled;
   }
+
+  setUseTcpReno(enabled: boolean) {
+    this.useTcpReno = enabled;
+  }
+
+  getUseTcpReno() {
+    return this.useTcpReno;
+  }
 }

src/graphics/renderables/tooltip_manager.ts

@@ -23,7 +23,7 @@ export function attachTooltip(
   key: string,
   hideDelay = false,
 ): void {
-  const tooltipsEnabled = globalContext?.get_enable_tooltips() ?? true;
+  const tooltipsEnabled = globalContext?.getEnableTooltips() ?? true;
 
   if (key in TOOLTIP_CONTENT) {
     if (tooltipsEnabled) {
@@ -66,7 +66,7 @@ export function attachTooltip(
  * @param key - The key for the tooltip content.
  */
 export function showTooltip(key: string): void {
-  const tooltipsEnabled = globalContext?.get_enable_tooltips() ?? true;
+  const tooltipsEnabled = globalContext?.getEnableTooltips() ?? true;
   if (!tooltipsEnabled) return;
 
   const text = TOOLTIP_CONTENT[key as keyof typeof TOOLTIP_CONTENT];
@@ -107,7 +107,7 @@ export function hideTooltip(): void {
  * Updates the state of tooltips (enabled/disabled).
  */
 export function updateTooltipsState(): void {
-  const tooltipsEnabled = globalContext?.get_enable_tooltips() ?? true;
+  const tooltipsEnabled = globalContext?.getEnableTooltips() ?? true;
 
   // Select all elements with the "has-tooltip" class
   const tooltipElements = document.querySelectorAll(".has-tooltip");

src/types/network-modules/tcp/tcpState.ts

@@ -125,7 +125,7 @@ export class TcpState {
   private initialRecvSeqNum: number;
 
   private rttEstimator: RTTEstimator;
-  private congestionControl = new CongestionControl();
+  private congestionControl: CongestionControl;
 
   constructor(
     srcHost: ViewHost,
@@ -148,6 +148,10 @@ export class TcpState {
       this.rttEstimator,
     );
 
+    this.congestionControl = new CongestionControl(
+      this.srcHost.ctx.getUseTcpReno(),
+    );
+
     this.mainLoop();
   }
 
@@ -383,6 +387,8 @@ export class TcpState {
       ? (segment.sequenceNumber + 1) % u32_MODULUS
       : segment.sequenceNumber;
     if (seqNum > this.recvNext) {
+      // Send a possibly duplicate ACK
+      this.notifySendPackets();
       // Postpone the segment
       return ProcessingResult.POSTPONE;
     } else if (seqNum < this.recvNext) {
@@ -838,21 +844,31 @@ type CongestionControlStateBehavior =
 class CongestionControl {
   private state: CongestionControlState;
   private stateBehavior: CongestionControlStateBehavior;
+  private useFastRecovery: boolean;
 
-  constructor() {
+  constructor(useFastRecovery: boolean) {
     this.state = {
       cwnd: 1 * MAX_SEGMENT_SIZE,
       ssthresh: Infinity,
       dupAckCount: 0,
     };
     this.stateBehavior = new SlowStart();
+    this.useFastRecovery = useFastRecovery;
   }
 
   getCwnd(): number {
     return this.state.cwnd;
   }
 
   notifyDupAck(): boolean {
+    if (!this.useFastRecovery) {
+      this.state.dupAckCount++;
+      const isThreeDupAcks = this.state.dupAckCount === 3;
+      if (isThreeDupAcks) {
+        this.notifyTimeout();
+      }
+      return isThreeDupAcks;
+    }
     this.stateBehavior.handleAck(this.state, 0);
     return this.state.dupAckCount === 3;
   }

src/types/view-devices/vDevice.ts

@@ -260,11 +260,11 @@ export abstract class ViewDevice extends Container {
     this.highlightMarker.roundRect(-width / 2, -height / 2, width, height, 5);
     this.highlightMarker.stroke({
       width: 3,
-      color: this.ctx.get_select_color(),
+      color: this.ctx.getSelectColor(),
       alpha: 0.6,
     });
     this.highlightMarker.fill({
-      color: this.ctx.get_select_color(),
+      color: this.ctx.getSelectColor(),
       alpha: 0.1,
     });
     this.highlightMarker.zIndex = ZIndexLevels.Device;