zig-playground/index.html at master · zigcc/zig-playground · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Zig Playground</title>
    <!-- No stale-HTML recovery here: retired hashed assets survive in the
         server-side attic (deploy.sh) longer than the shell's max-age, so a
         cached shell never references a deleted file. -->
    <link rel="stylesheet" href="style/style.css">
    <!-- Restore split ratio before first paint (avoids jump after module load). -->
    <script>
    (function () {
      try {
        // Embed skips split restore: `#embed/…` (new) or `?embed` / `#embed=…` (legacy).
        if (/^#embed(?:\/|=|&|$)/i.test(location.hash)) return;
        var p = new URLSearchParams(location.search);
        if (location.hash.length > 1) {
          var h = location.hash.charAt(0) === "#" ? location.hash.slice(1) : location.hash;
          // Path-style `#z/…` is not key=value; only merge legacy hash params.
          if (h.indexOf("=") !== -1 && !/^z\//i.test(h) && !/^embed\//i.test(h)) {
            new URLSearchParams(h).forEach(function (v, k) { p.set(k, v); });
          }
        }
        var emb = p.get("embed");
        if (p.has("embed") && (emb === null || emb === "" || emb === "1" || /^true|yes$/i.test(emb))) return;
        var vertical = window.matchMedia("(max-width: 960px)").matches;
        var raw = localStorage.getItem(vertical ? "zig-playground-split-v" : "zig-playground-split-h");
        if (raw == null) return;
        var n = parseFloat(raw);
        if (!isFinite(n) || n < 10 || n > 90) return;
        document.documentElement.style.setProperty("--editor-size-percent", n + "%");
      } catch (e) {}
    })();
    </script>
</head>
<body>
    <main>
        <div id="split-pane">
            <section id="editor-pane">
                <div class="pane-toolbar">
                    <div class="pane-toolbar-left">
                        <select id="version-select" aria-label="Zig version"></select>
                        <select id="example-select" aria-label="Examples"></select>
                    </div>
                    <div class="pane-toolbar-actions">
                        <div class="share-menu" id="share-menu">
                            <button type="button" id="share-toggle" aria-haspopup="menu" aria-expanded="false" title="Share">Share</button>
                            <div class="share-dropdown" id="share-dropdown" role="menu" hidden>
                                <button type="button" role="menuitem" data-share="link">Link</button>
                                <button type="button" role="menuitem" data-share="iframe">iframe</button>
                            </div>
                        </div>
                        <button type="button" id="reset" title="Reset (Ctrl+R)">Reset</button>
                        <button type="button" id="run">Run</button>
                    </div>
                </div>
                <div id="editor"></div>
            </section>

            <div id="resize-bar" aria-label="Resize panes" role="separator"></div>

            <section id="preview-pane">
                <div class="pane-toolbar">
                    <div class="pane-toolbar-left">
                        <div class="output-tabs" role="tablist" aria-label="Preview">
                            <button type="button" class="output-tab" role="tab" id="tab-output"
                                aria-selected="true" aria-controls="panel-output" tabindex="0">Output</button>
                            <button type="button" class="output-tab" role="tab" id="tab-decompile"
                                aria-selected="false" aria-controls="panel-decompile" tabindex="-1"
                                title="C-like decompile (ReleaseFast)">Decompile</button>
                            <button type="button" class="output-tab" role="tab" id="tab-wat"
                                aria-selected="false" aria-controls="panel-wat" tabindex="-1"
                                title="WAT (ReleaseFast)">WAT</button>
                        </div>
                    </div>
                    <div id="run-status" class="busy" title="status">
                        <span class="status-spinner" aria-hidden="true"></span>
                        <span id="status-text">loading</span>
                    </div>
                </div>
                <div id="panel-output" class="preview-panel" role="tabpanel" aria-labelledby="tab-output">
                    <div id="output-container">
                        <div id="output-pad"></div>
                    </div>
                </div>
                <div id="panel-decompile" class="preview-panel" role="tabpanel" aria-labelledby="tab-decompile" hidden>
                    <div id="decompile-container" class="ir-editor-host"></div>
                </div>
                <div id="panel-wat" class="preview-panel" role="tabpanel" aria-labelledby="tab-wat" hidden>
                    <div id="wat-container" class="ir-editor-host"></div>
                </div>
            </section>
        </div>
    </main>

    <script src="/src/editor.ts" type="module"></script>
</body>
</html>