<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>PRNG sentences</title>
        <meta itemprop="name" content="PRNG Sentences" />
        <meta property="og:title" content="PRNG Sentences" />
        <meta property="twitter:title" content="PRNG Sentences" />

        <meta
            name="description"
            content="helper for prng sentences made with prngnouns"
        />
        <meta
            property="og:description"
            content="helper for prng sentences made with prngnouns"
        />
        <meta
            property="twitter:description"
            content="helper for prng sentences made with prngnouns"
        />

        <meta property="og:site_name" content="PRNG sentences" />

        <meta name="theme-color" content="#eedd33" />
        <style>
            :root {
                --accent: #eedd33;
                --fg: #171d00;
                --bg: #fffeee;
            }

            #ui {
                display: grid;
                grid-template-columns: 1fr 1fr;
                grid-template-rows: 10fr 1fr;
                flex: 4;
                gap: 10px;
                padding: 10px;
            }

            #reference {
                flex: 1;
                flex-direction: column;
            }

            body {
                margin: 0;
                height: 100vh;
                width: 100vw;
                color: var(--fg);
                background-color: var(--bg);
                /* overflow: hidden; */
                display: flex;
                flex-direction: column;
            }

            textarea {
                color: var(--fg);
                background-color: var(--bg);
                border: none;
                outline: 2px dashed var(--accent);
            }

            textarea:focus {
                outline: 2px solid var(--accent);
            }

            button {
                font-size: large;
            }

            #preview {
                grid-column: 1 / span 2;
                font-family: Atkinson Hyperlegible, ui-sans-serif, system-ui,
                    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                    "Helvetica Neue", Arial, "Noto Sans", sans-serif,
                    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
                    "Noto Color Emoji";
                font-size: 1rem;
                line-height: 1.75;
                margin: 0;
                padding: 1rem;
                outline: 2px solid var(--accent);
            }

            kbd {
                background-color: #eee;
                border-radius: 3px;
                border: 1px solid #b4b4b4;
                box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
                    0 2px 0 0 rgba(255, 255, 255, 0.7) inset;
                color: #333;
                display: inline-block;
                font-size: 0.85em;
                font-weight: 700;
                line-height: 1;
                padding: 2px 4px;
                white-space: nowrap;
            }
        </style>

        <script>
            // regices are hilarious sometimes
            const PRNG_REGEX =
                /∈{([^∈∋{}]+)}(?:{(?:([^ ]+))?(?: *on ([^ ]+))?})?/g;

            const regularify = split => {
                if (split.length <= 1) {
                    return split;
                }

                return [
                    split[0],
                    {
                        options: split[1].split(/\s*\|\s*/g),
                        fg: split[2],
                        outline: split[3],
                        is_choice: true,
                    },
                    ...regularify(split.slice(4)),
                ];
            };

            const sentence_id = new Date().toISOString();
            const choice = ({ options, fg, outline }, index) =>
                `<img class="prngsentence-choice" style="display: inline; height: 1lh; margin: 0; vertical-align: bottom;" alt="randomly one of the following: ${options.join(
                    ", "
                )}" src="https://pyrope.net/prngnouns?p=${options
                    .map(encodeURI)
                    .join("&p=")}${
                    fg ? `&fg=${standardize_color(fg).slice(1)}` : ""
                }${
                    outline
                        ? `&outline=${standardize_color(outline).slice(1)}`
                        : ""
                }&sentence_index=${index}&sentence_id=${sentence_id}">`;

            const render = text => {
                const awesome = regularify(text.split(PRNG_REGEX));
                let out = "";
                let idx = 0;

                for (const a of awesome) {
                    if (a.is_choice) {
                        out += choice(a, idx);
                        idx += 1;
                    } else {
                        out += `<span class="prngsentence-bridge">${a}</span>`;
                    }
                }

                return out;
            };

            // https://stackoverflow.com/a/47355187
            function standardize_color(str) {
                var ctx = document.createElement("canvas").getContext("2d");
                ctx.fillStyle = str;
                return ctx.fillStyle;
            }

            window.onload = () => {
                const input = document.getElementById("input");
                const output = document.getElementById("output");
                const preview = document.getElementById("preview");

                const rerender = () => {
                    const rendered = render(input.value);
                    output.value = rendered;
                    preview.innerHTML = rendered;
                };

                input.addEventListener("change", rerender);

                input.addEventListener("keyup", rerender);

                document.addEventListener("keyup", e => {
                    if (e.altKey && e.key == "r") {
                        input.value += "∈";
                    }
                    rerender();
                });

                rerender();
            };
        </script>
    </head>
    <body>
        <div id="ui">
            <textarea id="input">
∈{hello|hi|hey}, and welcome to <b>PRNG sentences</b>! This is a ∈{awesome|cool|pointless|lame|okay} ∈{tool|toy|web page} ∈{made|assembled|written|programmed} by ∈{mehbark|me|some guy}. It's actually ∈{quite|pretty|decently|very|very, very|} easy to use, so you can just look at the reference at the bottom of the page. </textarea
            >
            <textarea readonly id="output"></textarea>
            <button id="open-prng" onclick="input.value += '∈'">∈</button>
            <button
                id="copy"
                onclick="window.navigator.clipboard.writeText(output.value)"
            >
                copy
            </button>
            <p id="preview"></p>
        </div>
        <ul id="reference">
            <li>
                Choices are of the form <code>∈{a|b|c}{fg on outline}</code>
            </li>
            <li>
                You can omit the second bracketed form, or the
                <code>fg</code> or <code>on outline</code> parts
            </li>
            <li>
                If you want to have <code>|</code> be in an option, you can't.
                Sorry!
            </li>
            <li>
                Press the ∈ button to insert an ∈ at the <strong>end</strong> of
                the input
            </li>
            <li>
                You can also press
                <span onclick="this.innerHTML = `<code>M-r</code>`"
                    ><kbd>Alt</kbd> + <kbd>R</kbd></span
                >
            </li>
            <li>
                Due to caching magick things stuff, you might have to reload to
                rerandomize in some circumstances. Your browser should keep the
                input unless you do a hard-reload, but you can copy-paste to be
                sure
            </li>
            <li>
                Some default styles are applied to the images to make them less
                terrible, but you can use
                <a
                    href="https://cloudwithlightning.net/random/chostin/prechoster/"
                    >prechoster</a
                >
                to style them easily.
            </li>
            <li>Feel free to use arbitrary HTML! Nothing is escaped! Sorry?</li>
            <li>
                This was made by
                <a href="https://cohost.org/mehbark">mehbark</a>
            </li>
        </ul>
    </body>
</html>