feat: add basic Switch implementation (#116)

Added the initial implementation of the Switch device with basic
functionality. Further development is required to implement
switch-specific features.

src/graphics/left_bar.ts

@@ -1,5 +1,6 @@
 import RouterSvg from "../assets/router.svg";
 import ComputerSvg from "../assets/pc.svg";
+import SwitchSvg from "../assets/switch.svg";
 import { addDevice } from "../types/viewportManager";
 import { GlobalContext } from "../context";
 import { DeviceType } from "../types/devices/device";
@@ -46,6 +47,11 @@ export class LeftBar {
     this.addButton(ComputerSvg, addHost, "Add Host");
   }
 
+  private addSwitchButton() {
+    const addSwitch = () => addDevice(this.ctx, DeviceType.Switch);
+    this.addButton(SwitchSvg, addSwitch, "Add Switch");
+  }
+
   setButtonsByLayer(layerName: string) {
     this.clear();
 
@@ -56,5 +62,9 @@ export class LeftBar {
     if (layer <= Layer.Network) {
       this.addRouterButton();
     }
+
+    if (layer <= Layer.Link) {
+      this.addSwitchButton();
+    }
   }
 }

src/graphics/renderables/device_info.ts

@@ -116,5 +116,7 @@ function getTypeName(device: Device): string {
       return "Router";
     case DeviceType.Host:
       return "Host";
+    case DeviceType.Switch:
+      return "Switch";
   }
 }

src/index.ts

@@ -18,6 +18,7 @@ import { GlobalContext } from "./context";
 // Doing this includes the file in the build
 import "./styles";
 import RouterSvg from "./assets/router.svg";
+import SwitchSvg from "./assets/switch.svg";
 import ComputerSvg from "./assets/pc.svg";
 import PlaySvg from "./assets/play-icon.svg";
 import PauseSvg from "./assets/pause-icon.svg";
@@ -26,7 +27,15 @@ import RedoSvg from "./assets/right-curve-arrow.svg";
 import { layerToName } from "./types/devices/layer";
 import { SpeedMultiplier } from "./types/devices/speedMultiplier";
 
-const assets = [RouterSvg, ComputerSvg, PlaySvg, PauseSvg, UndoSvg, RedoSvg];
+const assets = [
+  RouterSvg,
+  ComputerSvg,
+  PlaySvg,
+  PauseSvg,
+  UndoSvg,
+  RedoSvg,
+  SwitchSvg,
+];
 
 async function loadAssets(otherPromises: Promise<void>[]) {
   await Promise.all([...otherPromises, ...assets.map((as) => Assets.load(as))]);

src/types/devices/device.ts

@@ -32,6 +32,7 @@ export const DEVICE_SIZE = 20;
 export enum DeviceType {
   Router = 0,
   Host = 1,
+  Switch = 2,
 }
 
 export function layerFromType(type: DeviceType) {
@@ -40,6 +41,8 @@ export function layerFromType(type: DeviceType) {
       return Layer.Network;
     case DeviceType.Host:
       return Layer.App;
+    case DeviceType.Switch:
+      return Layer.Link;
   }
 }
 

src/types/devices/switch.ts

@@ -0,0 +1,31 @@
+import { Device, DeviceType, Layer } from "./device";
+import { ViewGraph } from "../graphs/viewgraph";
+import SwitchImage from "../../assets/switch.svg";
+import { Position } from "../common";
+import { DeviceInfo, RightBar } from "../../graphics/right_bar";
+import { DeviceId } from "../graphs/datagraph";
+import { Packet } from "../packet";
+
+export class Switch extends Device {
+  constructor(id: DeviceId, viewgraph: ViewGraph, position: Position) {
+    super(id, SwitchImage, viewgraph, position, null, null);
+  }
+
+  showInfo(): void {
+    const info = new DeviceInfo(this);
+    RightBar.getInstance().renderInfo(info);
+  }
+
+  getLayer(): Layer {
+    return Layer.Link;
+  }
+
+  getType(): DeviceType {
+    return DeviceType.Switch;
+  }
+
+  receivePacket(packet: Packet): DeviceId | null {
+    console.log(packet); // lint
+    throw new Error("Method not implemented.");
+  }
+}

src/types/devices/utils.ts

@@ -5,6 +5,7 @@ import { ViewGraph } from "../graphs/viewgraph";
 import { Device, DeviceType } from "./device";
 import { Host } from "./host";
 import { Router } from "./router";
+import { Switch } from "./switch";
 
 export interface CreateDevice {
   id: DeviceId;
@@ -24,5 +25,7 @@ export function createDevice(
       return new Router(deviceInfo.id, viewgraph, position, ip, mask);
     case DeviceType.Host:
       return new Host(deviceInfo.id, viewgraph, position, ip, mask);
+    case DeviceType.Switch:
+      return new Switch(deviceInfo.id, viewgraph, position);
   }
 }

src/types/graphs/datagraph.ts

@@ -30,6 +30,10 @@ interface HostGraphNode extends CommonGraphNode {
   runningPrograms: RunningProgram[];
 }
 
+interface SwitchGraphNode extends CommonGraphNode {
+  type: DeviceType.Switch;
+}
+
 // Typescript type guard
 export function isRouter(node: GraphNode): node is RouterGraphNode {
   return node.type === DeviceType.Router;
@@ -39,9 +43,21 @@ export function isHost(node: GraphNode): node is HostGraphNode {
   return node.type === DeviceType.Host;
 }
 
-export type GraphNode = CommonGraphNode | RouterGraphNode | HostGraphNode;
+export function isSwitch(node: GraphNode): node is SwitchGraphNode {
+  return node.type === DeviceType.Switch;
+}
+
+export type GraphNode =
+  | CommonGraphNode
+  | RouterGraphNode
+  | HostGraphNode
+  | SwitchGraphNode;
 
-export type GraphDataNode = CommonDataNode | RouterDataNode | HostDataNode;
+export type GraphDataNode =
+  | CommonDataNode
+  | RouterDataNode
+  | HostDataNode
+  | SwitchDataNode;
 
 interface CommonDataNode {
   id: DeviceId;
@@ -63,6 +79,10 @@ interface HostDataNode extends CommonDataNode {
   runningPrograms: RunningProgram[];
 }
 
+interface SwitchDataNode extends CommonDataNode {
+  type: DeviceType.Switch;
+}
+
 export type GraphData = GraphDataNode[];
 
 export interface NewDevice {
@@ -129,6 +149,8 @@ export class DataGraph {
         graphData.push({ ...graphNode, routingTable: info.routingTable });
       } else if (isHost(info)) {
         graphData.push({ ...graphNode, runningPrograms: info.runningPrograms });
+      } else if (isSwitch(info)) {
+        graphData.push({ ...graphNode });
       }
     });
     return graphData;