Register values now displayed in the recipe

src/web/RecipeWaiter.js

@@ -1,5 +1,6 @@
 import HTMLOperation from "./HTMLOperation.js";
 import Sortable from "sortablejs";
+import Utils from "../core/Utils.js";
 
 
 /**
@@ -435,4 +436,29 @@ RecipeWaiter.prototype.opRemove = function(e) {
     window.dispatchEvent(this.manager.statechange);
 };
 
+
+/**
+ * Sets register values.
+ *
+ * @param {number} opIndex
+ * @param {string[]} registers
+ */
+RecipeWaiter.prototype.setRegisters = function(opIndex, registers) {
+    const op = document.querySelector(`#rec-list .operation:nth-child(${opIndex + 1})`),
+        prevRegList = op.querySelector(".register-list");
+
+    // Remove previous div
+    if (prevRegList) prevRegList.remove();
+
+    let registerList = [];
+    for (let i = 0; i < registers.length; i++) {
+        registerList.push(`$R${i} = ${Utils.truncate(Utils.printable(registers[i]), 100)}`);
+    }
+    const registerListEl = `<div class="register-list">
+            ${registerList.join("<br>")}
+        </div>`;
+
+    op.insertAdjacentHTML("beforeend", registerListEl);
+};
+
 export default RecipeWaiter;

src/web/WorkerWaiter.js

@@ -61,6 +61,9 @@ WorkerWaiter.prototype.handleChefMessage = function(e) {
         case "optionUpdate":
             this.app.options[r.data.option] = r.data.value;
             break;
+        case "setRegisters":
+            this.manager.recipe.setRegisters(r.data.opIndex, r.data.registers);
+            break;
         case "highlightsCalculated":
             this.manager.highlighter.displayHighlights(r.data.pos, r.data.direction);
             break;

src/web/stylesheets/components/_operation.css

@@ -124,6 +124,12 @@ button.dropdown-toggle {
     background-color: var(--secondary-background-colour);
 }
 
+.register-list {
+    background-color: var(--fc-operation-border-colour);
+    font-family: var(--fixed-width-font-family);
+    padding: 10px;
+}
+
 .op-icon {
     float: right;
     margin-left: 10px;