Add style to initial and accepting states

src/fsm.js

@@ -30,6 +30,19 @@ const graph = /** @type {HTMLDivElement} */ (document.getElementById('pen'));
 const { svg } = await mermaid.render('state-graph', graphDefinition);
 graph.innerHTML = svg;
 const nodes = graph.querySelectorAll('.label-container');
+for (let i = 0; i < nodes.length; ++i) {
+  if (states[i].accepting) {
+    nodes[i].classList.add('accepting-node');
+  }
+}
+// Create a triangular arrow pointing to the initial state
+const arrow = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+const x = -(getIntAttribute(nodes[0], 'x') - 20);
+const y = -getIntAttribute(nodes[0], 'y');
+arrow.setAttribute('d', 'M 0 0 L 10 5 L 0 10 z');
+arrow.setAttribute('transform', `translate(${x}, ${y})`);
+arrow.setAttribute('fill', 'currentColor');
+(/** @type {Element} */ (graph.querySelector('.edgePaths'))).appendChild(arrow);
 
 /**
  * Updates the UI to reflect the current state.
@@ -63,6 +76,17 @@ function step(letter) {
   updateUIState();
 }
 
+/**
+ * Gets the integer value of the given attribute on the given element.
+ *
+ * @param {Element} element
+ * @param {string} attribute
+ * @returns {number}
+ */
+function getIntAttribute(element, attribute) {
+  return parseInt(/** @type {string} */ (element.getAttribute(attribute)));
+}
+
 // Dynamically create buttons for each letter in the alphabet
 /**
  * @type {string[]}

src/style.css

@@ -81,6 +81,11 @@ button:focus-visible {
 .current-node {
   fill: red !important;
 }
+.accepting-node {
+  outline: 1px solid #81B1DB;
+  outline-offset: 2px;
+  border-radius: 0.1em;
+}
 
 @media (prefers-color-scheme: light) {
   :root {
@@ -90,4 +95,7 @@ button:focus-visible {
   button {
     background-color: #f9f9f9;
   }
+  .accepting-node {
+    outline-color: #9370DB;
+  }
 }