2024-03-24 20:34:58 -04:00
<!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;
2024-04-14 00:02:29 -04:00
--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;
2024-03-24 20:34:58 -04:00
}
< / style >
< script >
2024-04-14 00:02:29 -04:00
// 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}">`;
2024-03-24 20:34:58 -04:00
const render = text => {
2024-04-14 00:02:29 -04:00
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;
2024-03-24 20:34:58 -04:00
};
2024-04-14 00:02:29 -04:00
// https://stackoverflow.com/a/47355187
function standardize_color(str) {
var ctx = document.createElement("canvas").getContext("2d");
ctx.fillStyle = str;
return ctx.fillStyle;
}
2024-03-24 20:34:58 -04:00
window.onload = () => {
2024-04-14 00:02:29 -04:00
const input = document.getElementById("input");
2024-03-24 20:34:58 -04:00
const output = document.getElementById("output");
2024-04-14 00:02:29 -04:00
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);
2024-03-24 20:34:58 -04:00
2024-04-14 00:02:29 -04:00
document.addEventListener("keyup", e => {
if (e.altKey & & e.key == "r") {
input.value += "∈";
}
rerender();
});
2024-03-24 20:34:58 -04:00
2024-04-14 00:02:29 -04:00
rerender();
2024-03-24 20:34:58 -04:00
};
< / script >
< / head >
< body >
2024-04-14 00:02:29 -04:00
< 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 >
2024-03-24 20:34:58 -04:00
< / body >
< / html >
