# blockly_crumbforest_bridge.md

## 🧩 Ziel

Eine funktionsfähige Brücke zwischen Blockly (Browser) und dem Crumbforest-Terminal (CakePHP API), um generierten Code per POST an `/crumbapi/blockly-terminal` zu senden.

---

## ✅ Erfolgreiche Endkonfiguration (HTML)

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Blockly to Crumbforest Terminal Bridge</title>
  <script src="https://unpkg.com/blockly/blockly.min.js"></script>
  <style>
    html, body { height: 100%; margin: 0; display: flex; flex-direction: column; }
    #blocklyDiv { height: 60vh; width: 100%; }
    #output { height: 30vh; width: 100%; background: #111; color: #0f0; font-family: monospace; padding: 10px; overflow: auto; }
    button { padding: 1em; background: #222; color: white; border: none; cursor: pointer; }
  </style>
</head>
<body>
  <h2 style="margin: 0.5em">🧁 Blockly Crumbforest Bridge</h2>
  <div id="blocklyDiv"></div>
  <xml id="toolbox" style="display: none">
    <block type="text"></block>
    <block type="text_print"></block>
    <block type="controls_if"></block>
    <block type="logic_compare"></block>
    <block type="math_number"></block>
    <block type="math_arithmetic"></block>
    <block type="variables_set"></block>
    <block type="variables_get"></block>
    <block type="procedures_defnoreturn"></block>
    <block type="procedures_callnoreturn"></block>
  </xml>

  <button onclick="runCode()">🧠 Sende an Crumbforest Terminal</button>
  <pre id="output">🌲 Terminal wartet ...</pre>

  <script>
    const workspace = Blockly.inject('blocklyDiv', { toolbox: document.getElementById('toolbox') });

    function runCode() {
      const generatedCode = Blockly.JavaScript.workspaceToCode(workspace);
      document.getElementById('output').textContent = `📤 Sende an Terminal...\n\n${generatedCode}`;

      fetch("/crumbapi/blockly-terminal", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ blockcode: generatedCode })
      })
      .then(response => response.json())
      .then(data => {
        document.getElementById('output').textContent += `\n\n✅ Antwort:\n${JSON.stringify(data, null, 2)}`;
      })
      .catch(error => {
        document.getElementById('output').textContent += `\n\n❌ Fehler:\n${error}`;
      });
    }
  </script>
</body>
</html>
```

---

## 🐛 Fehlerchronik & Lösungen

### ❌ Problem: `Method Not Allowed`
- **Ursache**: Route `/crumbapi/blockly-terminal` nicht korrekt auf POST beschränkt.
- **Lösung**: Routen richtig konfigurieren via `connect(..., ['_method' => ['POST']])`.

### ❌ Problem: `Missing or incorrect CSRF cookie type`
- **Ursache**: CSRF-Middleware blockte `fetch` ohne Cookie.
- **Lösung**: `skipCheckCallback` in `CsrfProtectionMiddleware`.

### ❌ Problem: `The request object does not contain the required authentication attribute`
- **Ursache**: AuthenticationMiddleware griff auf `/crumbapi`.
- **Lösung**: Manuelles Einfügen eines leeren AuthenticationService in Middleware.

---

## ✅ Erfolgreicher Test

```bash
curl -X POST http://localhost:8080/crumbapi/blockly-terminal \
  -H "Content-Type: application/json" \
  -d '{"blockcode": "window.alert(42);"}'

# Antwort:
{
  "status": "success",
  "message": "Blockcode received.",
  "received": "window.alert(42);"
}
```

🕒 Stand: 2025-06-05T19:57:16.383399
