Initial commit

src/fsm.js

@@ -0,0 +1,94 @@
+import mermaid from 'mermaid';
+import { ENDS_WITH_TWO_B } from './examples.js';
+
+const IS_VALID = 'is-valid';
+const IS_INVALID = 'is-invalid';
+
+const wordInput = /** @type {HTMLInputElement} */ (document.getElementById('word-input'));
+const buttons = /** @type {HTMLDivElement} */ (document.getElementById('input-buttons'));
+const light = /** @type {HTMLDivElement} */ (document.getElementById('light'));
+
+mermaid.initialize({
+  theme: window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'default',
+  startOnLoad: false,
+});
+
+const states = ENDS_WITH_TWO_B;
+let state = 0;
+let builder = '';
+
+// Build the mermaid graph definition
+let graphDefinition = 'stateDiagram-v2';
+for (let i = 0; i < states.length; ++i) {
+  graphDefinition += `\n    s${i} : ${i}`;
+  for (const [transition, destination] of Object.entries(states[i].transitions)) {
+    graphDefinition += `\n    s${i} --> s${destination}: ${transition}`;
+  }
+}
+const graph = /** @type {HTMLDivElement} */ (document.getElementById('pen'));
+const { svg } = await mermaid.render('state-graph', graphDefinition);
+graph.innerHTML = svg;
+const nodes = graph.querySelectorAll('.label-container');
+
+/**
+ * Updates the UI to reflect the current state.
+ */
+function updateUIState() {
+  wordInput.value = builder;
+  if (state === -1 || !states[state].accepting) {
+    light.classList.remove(IS_VALID);
+    light.classList.add(IS_INVALID);
+  } else {
+    light.classList.remove(IS_INVALID);
+    light.classList.add(IS_VALID);
+  }
+  nodes.forEach((node) => node.classList.remove('current-node'));
+  if (state in nodes) {
+    nodes[state].classList.add('current-node');
+  }
+}
+
+/**
+ * Steps the FSM with the given letter.
+ *
+ * @param {string} letter
+ */
+function step(letter) {
+  if (state === -1) {
+    return;
+  }
+  builder += letter;
+  state = states[state].transitions[letter] ?? -1;
+  updateUIState();
+}
+
+// Dynamically create buttons for each letter in the alphabet
+/**
+ * @type {string[]}
+ */
+const alphabet = Array.from(states.reduce((acc, current) => {
+  Object.keys(current.transitions).forEach(current => acc.add(current));
+  return acc;
+}, new Set())).sort();
+for (const letter of alphabet) {
+  const button = document.createElement('button');
+  button.innerText = letter;
+  button.addEventListener('click', () => step(letter));
+  buttons.appendChild(button);
+}
+
+// Reacts to input in the text box
+wordInput.addEventListener('input', () => {
+  const value = wordInput.value;
+  console.log(value);
+  builder = '';
+  state = 0;
+  for (const letter of value) {
+    step(letter);
+  }
+  if (!value.length) {
+    updateUIState();
+  }
+});
+
+updateUIState();