<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        
        <title>rakugaki</title>

        <link rel="stylesheet" href="{{ static 'base.css' }}">

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <script type="importmap">{{{ include_static 'import_map.json' }}}</script>

        <script>
            const HAKU_WASM_PATH = "{{{ static 'wasm/haku.wasm' }}}";
            const HAKU2_WASM_PATH = "{{{ static 'wasm/haku2.wasm' }}}";
        </script>
        
        <script type="module" async>
            import "rkgk/live-reload.js";

            import "rkgk/brush-box.js";
            import "rkgk/brush-cost.js";
            import "rkgk/brush-editor.js";
            import "rkgk/brush-preview.js";
            import "rkgk/canvas-renderer.js";
            import "rkgk/code-editor.js";
            import "rkgk/connection-status.js";
            import "rkgk/context-menu.js";
            import "rkgk/framework.js";
            import "rkgk/haku.js";
            import "rkgk/online-users.js";
            import "rkgk/painter.js";
            import "rkgk/random.js";
            import "rkgk/resize-handle.js";
            import "rkgk/reticle-renderer.js";
            import "rkgk/session.js";
            import "rkgk/throbber.js";
            import "rkgk/viewport.js";
            import "rkgk/wall.js";
            import "rkgk/welcome.js";
            import "rkgk/zoom-indicator.js";
    
            import "rkgk/index.js";
        </script>

        <link rel="icon" sizes="16x16" href="{{ static 'favicon/rkgk@1x.png' }}">
        <link rel="icon" sizes="32x32" href="{{ static 'favicon/rkgk@2x.png' }}">
        <link rel="icon" sizes="64x64" href="{{ static 'favicon/rkgk@4x.png' }}">
        <link rel="icon" sizes="128x128" href="{{ static 'favicon/rkgk@8x.png' }}">
        <link rel="icon" sizes="256x256" href="{{ static 'favicon/rkgk@16x.png' }}">
        <link rel="icon" sizes="512x512" href="{{ static 'favicon/rkgk@32x.png' }}">
        <link rel="apple-touch-icon" sizes="16x16" href="{{ static 'favicon/rkgk@1x.png' }}">
        <link rel="apple-touch-icon" sizes="32x32" href="{{ static 'favicon/rkgk@2x.png' }}">
        <link rel="apple-touch-icon" sizes="64x64" href="{{ static 'favicon/rkgk@4x.png' }}">
        <link rel="apple-touch-icon" sizes="128x128" href="{{ static 'favicon/rkgk@8x.png' }}">
        <link rel="apple-touch-icon" sizes="256x256" href="{{ static 'favicon/rkgk@16x.png' }}">
        <link rel="apple-touch-icon" sizes="512x512" href="{{ static 'favicon/rkgk@32x.png' }}">
    </head>

    <body>
        <!-- We shouldn't consider these stylesheets render-blocking.
             About the only render-blocking thing on the page is the throbber. -->
        <link rel="stylesheet" href="{{ static 'fonts.css' }}">
        <link rel="stylesheet" href="{{ static 'index.css' }}">

        <main>
            <rkgk-canvas-renderer class="fullscreen"></rkgk-canvas-renderer>
            <rkgk-reticle-renderer class="fullscreen"></rkgk-reticle-renderer>
            <div class="panels fullscreen" id="panels-overlay">
                <div class="left">
                    <div class="rkgk-panel menu-bar">
                        <a class="icon icon-rkgk-grayscale" title="I know this menu bar is really ugly. Sorry about that."></a>
                        <hr>
                        <a href="/docs/rkgk.html">Manual</a>
                    </div>

                    <rkgk-zoom-indicator class="rkgk-panel"></rkgk-zoom-indicator>
                </div>

                <div class="right">
                    <div class="floating">
                        <rkgk-brush-preview></rkgk-brush-preview>
                        <rkgk-brush-cost-gauges class="rkgk-panel"></rkgk-brush-cost-gauges>
                    </div>
                    <rkgk-resize-handle
                        data-direction="vertical"
                        data-target="panels-overlay"
                        data-target-property="--right-width"
                        data-init-size="528"
                        data-min-size="384"></rkgk-resize-handle>
                    <div class="docked">
                        <rkgk-brush-box
                            id="brush-box"
                            data-storage-id="brush-box"></rkgk-brush-box>
                        <rkgk-resize-handle
                            data-direction="horizontal"
                            data-target="brush-box"
                            data-target-property="--height"
                            data-init-size="168"
                            data-min-size="96"></rkgk-resize-handle>

                        <rkgk-brush-editor
                            data-storage-id="brush-editor"></rkgk-brush-editor>
                    </div>
                </div>
            </div>

            <rkgk-welcome>
                <dialog name="welcome-dialog" class="rkgk-panel">
                    <form method="dialog">
                        <h3>
                            My name is
                            <input
                                name="nickname"
                                type="text"
                                required minlength="1" maxlength="32"
                                placeholder="... (type here!)"
                                autocomplete="off"
                                autofocus></input>
                        </h3>
                        <p>This name will be visible to any friends drawing along with you, so choose something recognizable!<br>
                        Keep in mind you can always change it later.</p>

                        <div style="display: flex; flex-direction: row; align-items: center; justify-content: end; gap: 8px;">
                            <rkgk-throbber name="register-progress"></rkgk-throbber>
                            <button name="register">Register</button>
                        </div>
                    </form>
                </dialog>
            </rkgk-welcome>

            <rkgk-connection-status>
                <dialog name="logging-in-dialog">
                    <rkgk-throbber class="loading"></rkgk-throbber><p>Logging in…</p>
                </dialog>

                <dialog name="error-dialog" class="rkgk-panel">
                    <h1>owie! >_<</h1>
                    <p><i>Uh oh. Seems like the pipe cracked again… There's water everywhere.<br>The basement's half full already. God dammit.</i></p>

                    <p>Super sorry about this! But rakugaki encountered an error and has to restart.</p>
                    <p><b>Rest assured your drawings are safe and sound.</b></p>
                    <p>Either way… try refreshing the page and see if it helps. If not, please report a bug with the following details.</p>

                    <details>
                        <summary>Show error details</summary>
                        <textarea name="error-text" rows="10" readonly></textarea>
                    </details>

                    <p>Thank you from the mountain!</p>

                    <div style="display: flex; flex-direction: row; align-items: center; justify-content: end;">
                        <button name="refresh">Refresh</button>
                    </div>
                </dialog>

                <dialog name="disconnected-dialog">
                    <rkgk-throbber class="loading"></rkgk-throbber>
                    <p>Connection lost. Attempting to reconnect in <span name="reconnect-duration"></span>…</p>
                </dialog>
            </rkgk-connection-status>

            <rkgk-context-menu-space class="fullscreen"></rkgk-context-menu-space>

            <div class="fullscreen" id="js-loading">
                <rkgk-throbber class="loading"></rkgk-throbber>

                <noscript>
                    <style>
                        #js-loading>rkgk-throbber { display: none; }
                    </style>
                    <p>
                        rakugaki is a web app and does not work without JavaScript :(<br>
                        but I swear it's a very lightweight and delightful web app!
                        You won't regret trying it out.
                    </p>
                </noscript>
            </div>
        </main>
    </body>
</html>

