Register values now displayed in the recipe

src/core/ChefWorker.js

@@ -176,3 +176,20 @@ self.setOption = function(option, value) {
         }
     });
 };
+
+
+/**
+ * Send register values back to the app.
+ *
+ * @param {number} opIndex
+ * @param {string[]} registers
+ */
+self.setRegisters = function(opIndex, registers) {
+    self.postMessage({
+        action: "setRegisters",
+        data: {
+            opIndex: opIndex,
+            registers: registers
+        }
+    });
+};

src/core/FlowControl.js

@@ -113,6 +113,12 @@ const FlowControl = {
             input = state.dish.get(Dish.STRING),
             registers = input.match(extractor);
 
+        if (!registers) return state;
+
+        if (ENVIRONMENT_IS_WORKER()) {
+            self.setRegisters(state.progress, registers.slice(1));
+        }
+
         /**
          * Replaces references to registers (e.g. $R0) with the contents of those registers.
          *

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;