Add new words to cSpell dictionary, update button transitions, fix ty… (

#161)

.vscode/settings.json

@@ -1,4 +1,4 @@
 {
-  "cSpell.words": ["LFIB", "MPLS", "visibilitychanged"],
+  "cSpell.words": ["LFIB", "MPLS", "visibilitychanged", "offroad"],
   "eslint.validate": ["svelte"]
 }

src/lib/classes/Loader/NetworkLoader.ts

@@ -1,17 +1,23 @@
-import { validateDefaultNetwork } from "$lib/classes/Loader/NetworkSchemas";
+import { NetworkSchema } from "$lib/classes/Loader/NetworkSchemas";
 import network from "$lib/stores/network";
 import LER from "$lib/classes/MPLS/LER";
 import LSR from "$lib/classes/MPLS/LSR";
 import CE from "$lib/classes/MPLS/CE";
 
-export default function loadDefaultNetwork() {
-  if (!validateDefaultNetwork.success) {
-    throw validateDefaultNetwork.error;
+export default function loadNetwork(unparsedNetwork: unknown): boolean {
+  network.clear();
+
+  const parsedNetwork = NetworkSchema.safeParse(unparsedNetwork);
+
+  if (!parsedNetwork.success) {
+    // eslint-disable-next-line no-console
+    console.warn("Failed to load network data", parsedNetwork.error);
+    return false;
   }
 
   let maxId = 0;
 
-  for (const routerData of validateDefaultNetwork.data.routers) {
+  for (const routerData of parsedNetwork.data.routers) {
     maxId = Math.max(maxId, routerData.id);
     switch (routerData.type) {
       case "LER": {
@@ -53,7 +59,7 @@ export default function loadDefaultNetwork() {
 
   network.setRouterCount(maxId + 1);
 
-  for (const linkData of validateDefaultNetwork.data.links) {
+  for (const linkData of parsedNetwork.data.links) {
     const sourceRouter = network.getRouter(linkData.source);
     const targetRouter = network.getRouter(linkData.target);
 
@@ -65,4 +71,6 @@ export default function loadDefaultNetwork() {
       });
     }
   }
+
+  return true;
 }

src/lib/classes/Loader/NetworkSchemas.ts

@@ -1,5 +1,4 @@
 import { z } from "zod";
-import defaultNetworkJson from "$lib/data/DefaultNetwork.json";
 
 const NodeSchema = z.object({
   label: z.string(),
@@ -56,9 +55,7 @@ const LinkSchema = z.object({
   bandwidth: z.number(),
 });
 
-const DefaultNetworkSchema = z.object({
+export const NetworkSchema = z.object({
   routers: z.array(RouterSchema),
   links: z.array(LinkSchema),
 });
-
-export const validateDefaultNetwork = DefaultNetworkSchema.safeParse(defaultNetworkJson);

src/lib/components/ControlPanel.svelte

@@ -10,7 +10,7 @@
 
   $: buttons = [
     {
-      text: $config.running ? "Pause" : "Resume",
+      text: $config.running ? "⏸ Pause" : "⏵ Play",
       callback: () => {
         $config.running = !$config.running;
       },
@@ -34,7 +34,7 @@
   ];
 
   let resizeBar: HTMLElement;
-  let transition = "width 250ms";
+  let transition = "width 200ms";
 
   $: panelWidth = $locked ? 350 : 0;
 
@@ -67,7 +67,7 @@
 
     resizeBar.releasePointerCapture(event.pointerId);
 
-    transition = "width 250ms";
+    transition = "width 200ms";
   }
 </script>
 

src/lib/components/CreditsButton.svelte

@@ -31,7 +31,7 @@
   <p>A copy of the license is included in the section entitled GNU Free Documentation License.</p>
   <br />
   <p>
-    The Icon used for CE routers is almost identical to the on on Wikimedia (aspect ratio changed)
+    The Icon used for CE routers is almost identical to the one on Wikimedia (aspect ratio changed)
   </p>
   <br />
   <p>

src/lib/components/HelpButton.svelte

@@ -27,15 +27,21 @@
     to insert routers.
   </p>
   <br />
-  <p>Hold the shift key and drag routers to make links.</p>
+  <p>Pressing Space will pause/resume the packet animations.</p>
   <br />
-  <p>Hold the ctrl key and drag CE's to add destinations.</p>
+  <p>Pressing Tab will open the packet control panel.</p>
+  <br />
+  <p>Hold Shift and drag routers to make links.</p>
+  <br />
+  <p>Hold Ctrl and drag CE's to add destinations.</p>
   <br />
   <p>Double click a router or link to configure it.</p>
   <br />
   <p>The clear button will delete the entire network.</p>
   <br />
   <p>The export button will download your network as a .json file</p>
   <br />
+  <p>If you are experiencing packets going offroad, please lower the max packets count.</p>
+  <br />
   <p>Press Esc to close this popup.</p>
 </Dialog>

src/lib/components/Network.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import { onMount } from "svelte";
-  import loadDefaultNetwork from "$lib/classes/Loader/NetworkLoader";
   import network from "$lib/stores/network";
   import config from "$lib/stores/config";
+  import StartupDialog from "$lib/components/StartupDialog.svelte";
   import ViewBox from "$lib/components/ViewBox.svelte";
   import ControlPanel from "$lib/components/ControlPanel.svelte";
   import Packet from "$lib/components/Packet.svelte";
@@ -20,10 +20,10 @@
       $config.running = !document.hidden;
     });
   });
-  loadDefaultNetwork();
 </script>
 
 <div id="mpls">
+  <StartupDialog />
   <div id="network">
     <ViewBox bind:zoom>
       {#each $network.links as link (link.id)}

src/lib/components/Packet.svelte

@@ -8,7 +8,17 @@
   let animation: Animation | undefined;
   let packetElement: SVGElement | undefined;
 
-  $: if (animation) $config.running ? animation.play() : animation.pause();
+  $: {
+    if (animation) {
+      requestAnimationFrame(() => {
+        if ($config.running) {
+          animation.play();
+        } else {
+          animation.pause();
+        }
+      });
+    }
+  }
   $: if (animation) animation.playbackRate = $config.speedMultiplier;
 
   function calculateTransitionDuration() {

src/lib/components/RouterTables/SmallButton.svelte

@@ -15,7 +15,7 @@
     min-width: 30px;
     padding: 0 10px;
     user-select: none;
-    transition: background-color 250ms ease;
+    transition: background-color 200ms ease;
   }
 
   button:hover {

src/lib/components/StartupDialog.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+  import loadNetwork from "$lib/classes/Loader/NetworkLoader";
+  import ToolboxButton from "$lib/components/ToolboxButton.svelte";
+  import Dialog from "$lib/components/Dialog.svelte";
+  import SmallNetworkJson from "$lib/data/SmallNetwork.json";
+  import LargeNetworkJson from "$lib/data/LargeNetwork.json";
+  import { onMount } from "svelte";
+
+  let dialog: HTMLDialogElement;
+
+  $: startupButtons = [
+    {
+      text: "Blank",
+      callback: () => {
+        dialog.close();
+      },
+    },
+    {
+      text: "Small",
+      callback: () => {
+        loadNetwork(SmallNetworkJson);
+        dialog.close();
+      },
+    },
+    {
+      text: "Large",
+      callback: () => {
+        loadNetwork(LargeNetworkJson);
+        dialog.close();
+      },
+    },
+    {
+      text: "Import",
+      callback: () => {
+        const hiddenInput = document.createElement("input");
+        hiddenInput.type = "file";
+        hiddenInput.accept = ".json";
+
+        hiddenInput.onchange = (event: InputEvent) => {
+          if (!(event.target instanceof HTMLInputElement)) return;
+          if (event.target.files.length === 0) return;
+
+          const file = event.target.files[0];
+
+          const reader = new FileReader();
+
+          reader.addEventListener("load", (event) => {
+            if (!event.target || typeof event.target.result !== "string") return;
+
+            const success = loadNetwork(JSON.parse(event.target.result));
+            if (success) dialog.close();
+          });
+
+          reader.readAsText(file);
+        };
+
+        hiddenInput.click();
+      },
+    },
+  ];
+
+  onMount(() => {
+    dialog.inert = true;
+    dialog.showModal();
+    dialog.inert = false;
+  });
+</script>
+
+<Dialog bind:dialog>
+  <h1>Welcome</h1>
+  <p>This tool is designed to mimic the basics of MPLS</p>
+  <p>Choose a network:</p>
+  <div class="buttons">
+    {#each startupButtons as button}
+      <ToolboxButton {...button} />
+    {/each}
+  </div>
+</Dialog>
+
+<style>
+  h1,
+  p {
+    text-align: center;
+  }
+
+  p:first-of-type {
+    margin-bottom: 10px;
+  }
+
+  div {
+    display: flex;
+    gap: 10px;
+    justify-content: center;
+  }
+</style>

src/lib/components/ToolboxButton.svelte

@@ -18,14 +18,21 @@
     margin: 2.5px;
     font-size: 16px;
     user-select: none;
-    transition: background-color 250ms ease;
     min-width: 35px;
+    transition:
+      background-color 200ms,
+      transform 200ms;
   }
 
   button:hover {
     background-color: #888888;
   }
 
+  button:focus {
+    transform: scale(1.1);
+    background-color: #6495ed;
+  }
+
   @media (prefers-color-scheme: dark) {
     button {
       border: 2px solid white;

src/lib/components/ViewBox.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { onMount } from "svelte";
   import network from "$lib/stores/network";
+  import config from "$lib/stores/config";
   import editorState from "$lib/stores/editorState";
   import findShortestPath from "$lib/functions/findShortestPath";
   import locked from "$lib/stores/locked";
@@ -103,7 +104,8 @@
       case "Escape":
         $editorState.placing = null;
         break;
-      case "Space":
+      case "Tab":
+        if (routerSettingsDialog.open || linkSettingsDialog.open) return;
         event.preventDefault();
         $locked = !$locked;
         $editorState.placing = null;
@@ -118,6 +120,9 @@
       case "Digit3":
         $editorState.placing = "LSR";
         break;
+      case "Space":
+        event.preventDefault();
+        $config.running = !$config.running;
     }
   }