250 lines
8.6 KiB
HTML
250 lines
8.6 KiB
HTML
<!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>
|