sokol-luajit/editor/www/index2.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Sokol-LuaJIT Editor</title>
  <link href="https://cdn.jsdelivr.net/npm/jsoneditor@9.10.0/dist/jsoneditor.min.css" rel="stylesheet" />
  <style>
    body {
      font-family: sans-serif;
      margin: 0;
      padding: 0;
    }

    #tabs {
      display: flex;
      background: #333;
      color: white;
      padding: 0.5rem;
    }

    .tab {
      margin-right: 1rem;
      cursor: pointer;
    }

    .tab.active {
      font-weight: bold;
      text-decoration: underline;
    }

    .tab-content {
      display: none;
      padding: 1rem;
    }

    .tab-content.active {
      display: block;
    }

    #editor { height: 400px; border: 1px solid #ccc; }
    #rete { height: 400px; border: 1px solid #ccc; background: #f8f8f8; }
    #jsoneditor { height: 400px; border: 1px solid #ccc; }
  </style>
</head>
<body>

  <div id="tabs">
    <div class="tab active" data-tab="scripts">Scripts</div>
    <div class="tab" data-tab="flow">Flow</div>
    <div class="tab" data-tab="data">Data</div>
  </div>

  <div id="tab-scripts" class="tab-content active">
    <h2>Lua Script Editor</h2>
    <div id="editor"></div>
  </div>

  <div id="tab-flow" class="tab-content">
    <h2>State Flow Editor</h2>
    <div id="rete"></div>
  </div>

  <div id="tab-data" class="tab-content">
    <h2>Data Manager</h2>
    <div id="jsoneditor"></div>
  </div>

  <!-- JS Dependencies -->
  <script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.16/lib/codemirror.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.16/mode/lua/lua.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/codemirror@5.65.16/lib/codemirror.css" />

  <script src="https://cdn.jsdelivr.net/npm/rete@1.4.4/build/rete.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/jsoneditor@9.10.0/dist/jsoneditor.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/cbor-js@0.1.0/cbor.min.js"></script>

  <script>
    // Tabs
    document.querySelectorAll(".tab").forEach(tab => {
      tab.addEventListener("click", () => {
        document.querySelectorAll(".tab").forEach(t => t.classList.remove("active"));
        document.querySelectorAll(".tab-content").forEach(c => c.classList.remove("active"));

        tab.classList.add("active");
        document.getElementById("tab-" + tab.dataset.tab).classList.add("active");
      });
    });

    // CodeMirror - Lua Editor
    const editor = CodeMirror(document.getElementById("editor"), {
      mode: "lua",
      lineNumbers: true,
      value: "-- Write Lua code here\nfunction update()\n  print(\"Hello from Lua!\")\nend",
    });

    // Rete.js - Simple Flow Diagram
    async function setupRete() {
      const container = document.getElementById('rete');
      const components = [];

      const editor = new Rete.NodeEditor('demo@0.1.0', container);
      editor.use(ConnectionPlugin);
      editor.use(VueRenderPlugin); // Only needed if you use Vue-based components

      editor.view.resize();
      editor.trigger('process');
    }

    // Note: In this simple version, we're skipping complex node setup
    document.getElementById("tab-flow").addEventListener("click", () => {
      // Placeholder flow content
      document.getElementById("rete").innerHTML = "<p>(Flow Editor Placeholder)</p>";
    });

    // JSONEditor - CBOR Compatible Editor
    const container = document.getElementById("jsoneditor");
    const editorData = new JSONEditor(container, {
      mode: "tree",
      modes: ["code", "tree"], // allow switching
    });

    // Sample JS object (could be CBOR-decoded)
    const sampleData = {
      name: "Player",
      health: 100,
      inventory: ["sword", "potion"],
      stats: {
        strength: 10,
        agility: 8
      }
    };

    editorData.set(sampleData);

    // Encode/decode CBOR (example usage)
    const encoded = CBOR.encode(sampleData);
    const decoded = CBOR.decode(encoded);
    console.log("CBOR roundtrip:", decoded);
  </script>

</body>
</html>