Initial commit

src/examples.js

@@ -0,0 +1,14 @@
+/**
+ * @typedef State
+ * @property {Object.<string, number>} transitions
+ * @property {boolean} [accepting]
+ */
+
+/**
+ * @type {State[]}
+ */
+export const ENDS_WITH_TWO_B = [
+  { transitions: { a: 0, b: 1 } },
+  { transitions: { a: 0, b: 2 } },
+  { transitions: { a: 0, b: 2 }, accepting: true },
+];

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();

src/style.css

@@ -0,0 +1,93 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.input {
+  display: flex;
+  align-items: center;
+}
+input {
+  padding: 0.3em 0.5em;
+  margin-bottom: 0.5em;
+  font-size: 1.1em;
+  width: 6em;
+  background-color: transparent;
+  transition: border-color 0.25s;
+}
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+#light {
+  width: 2.5em;
+  height: 2.5em;
+  border-radius: 50%;
+  background-color: #1a1a1a;
+  margin-left: .75em;
+}
+#light.is-valid {
+  background-color: #46fd46;
+}
+#light.is-invalid {
+  background-color: #fd3838;
+}
+
+.current-node {
+  fill: red !important;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}