<!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>