<!DOCTYPE html>

CodeChat_client.html - The web page containing the CodeChat Client

This fairly simple web page contains IDs and classes to allow CSS/JS to style and manipulate the contents.

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>CodeChat Client</title>

Provide a splitter between the output and build panes.

Note that all URLs are relative, not absolute (static/splitter.js instead of /static/spliter.js). This allows CoCalc to run, since CoCalc prepends several elements to the pathname of the url, breaking absolute URLs. See the CoCalc docs.

        <script src="static/splitter.js?v=1"></script>
        <link rel="stylesheet" type="text/css" href="static/splitter.css?v=1" />

Use the ReconnectingWebsocket to automatically reconnect a websocket when the network connection drops – for example, a laptop goes to sleep then wakes back up.

        <script src="static/ReconnectingWebsocket.js?v=1"></script>

The CodeChat_client.js - Core code for the CodeChat Client.

        <script src="static/CodeChat_client.js?v=9"></script>

Styling in CodeChat_client.css - Style sheet for the CodeChat Client.

        <link
            rel="stylesheet"
            type="text/css"
            href="static/CodeChat_client.css?v=1"
        />
    </head>
    <body>
        <div class="horizontally_divided" id="splitter">
            <div>

The children of the splitter div must be divs, which the splitter JS will assign styles to. So, wrap the iframe in a div.

                <iframe
                    id="output"
                    srcdoc="
                    <html>
                      <body style='background-color:#f0f0ff'>
                        <div style='display:flex;justify-content:center;align-items:center;height:95vh;'>
                          <div style='text-align:center;font-family:Trebuchet MS;'>
                            <h1>CodeChat 👩‍💻🗨️</h1>
                            <p>Waiting for initial render. Switch the active source code window to begin.</p>
                          </div>
                        </div>
                      </body>
                    </html>"
                >
                </iframe>
            </div>
            <div>

Likewise, wrap the build_contents in a plain div, allowing us to assign styles via the stylesheet; the parent div’s styles will be overridden by splitter JS assignments.

                <div id="build_contents">
                    <h2 id="build_heading">Build messages</h2>
                    <div id="build"></div>
                    <div id="errors"></div>
                </div>
            </div>
        </div>
        <div id="status_div">
            <span id="status_left">
                <span id="status_message">Waiting...</span>
            </span>
            <span id="status_right">
                <span id="status_errors"></span>
                <progress id="build_progress" max="100"></progress>
            </span>
        </div>

        <script>
            run_client({{client_id}}, {{WEBSOCKET_PORT}});
        </script>
    </body>
</html>