Inital attempt and Commit

js/app.js

@@ -0,0 +1,97 @@
+import Dialer from "./dialer.js";
+
+
+document.addEventListener("DOMContentLoaded",function ready(){
+	var enterHopsEl = document.getElementById("enter-hop-count");
+	var dialpadEl = document.getElementById("dialpad");
+	var dialpadKeyEls = dialpadEl.querySelectorAll("button");
+	var resultsEl = document.getElementById("results");
+	var startingKey1El = document.getElementById("starting-key-1");
+	var startingKey2El = document.getElementById("starting-key-2");
+	var hopCountEl = document.getElementById("hop-count");
+	var pathCountEl = document.getElementById("path-count");
+	var countTimingEl = document.getElementById("count-timing");
+	var acyclicPathsEl = document.getElementById("acyclic-paths");
+	var pathsTimingEl = document.getElementById("paths-timing");
+
+	dialpadEl.addEventListener("mouseover",onHoverKey,false);
+	dialpadEl.addEventListener("mouseout",onHoverKey,false);
+	dialpadEl.addEventListener("click",onClickKey,false);
+
+
+	// ********************************
+
+	function onHoverKey(evt) {
+		var el = evt.target;
+
+		// discover which keys (if any) can be reached from
+		// a hovered key
+		var reachable = (
+			el.matches("button:hover") ?
+				Dialer.reachableKeys(Number(el.value)) :
+				[]
+		);
+
+		for (let keyEl of dialpadKeyEls) {
+			if (reachable.includes(Number(keyEl.value))) {
+				keyEl.classList.add("highlighted");
+			}
+			else {
+				keyEl.classList.remove("highlighted");
+			}
+		}
+	}
+
+	function onClickKey(evt) {
+		var clickedEl = evt.target;
+
+		// clicked on a dialpad key?
+		if (clickedEl.matches("#dialpad > button")) {
+			let startingKey = Number(clickedEl.value);
+			startingKey1El.innerText = startingKey;
+			startingKey2El.innerText = startingKey;
+
+			let hopCount = Number(enterHopsEl.value) || 1;
+			enterHopsEl.value = hopCount;
+			hopCountEl.innerText = hopCount;
+
+
+			let startTiming = performance.now();
+			// count the distinct paths (including cyclic paths)
+			let pathCount = Dialer.countPaths(startingKey,hopCount);
+			let endTiming = performance.now();
+			printTiming(countTimingEl,Number(endTiming - startTiming) || 0);
+			pathCountEl.innerText = pathCount;
+
+			startTiming = performance.now();
+			let acyclicPaths = Dialer.listAcyclicPaths(startingKey);
+			endTiming = performance.now();
+			printTiming(pathsTimingEl,Number(endTiming - startTiming) || 0);
+			if (acyclicPaths.length > 0) {
+				acyclicPathsEl.innerHTML = "";
+				for (let path of acyclicPaths) {
+					let pathEl = document.createElement("div");
+					pathEl.innerHTML = path.join(" ➡ ");
+					acyclicPathsEl.appendChild(pathEl);
+				}
+			}
+			else {
+				acyclicPathsEl.innerHTML = "-- none --";
+			}
+
+			resultsEl.classList.remove("hidden");
+		}
+	}
+
+	function printTiming(timingEl,ms) {
+		ms = Number(ms.toFixed(1));
+
+		if (ms >= 50) {
+			timingEl.innerHTML = `(<strong>${(ms / 1000).toFixed(2)}</strong> sec)`;
+		}
+		else {
+			timingEl.innerHTML = `(<strong>${ms.toFixed(1)}</strong> ms)`
+		}
+	}
+
+});