nested cws: done!
This commit is contained in:
parent
eb7770d5a9
commit
00e1291c18
7 changed files with 465 additions and 13 deletions
BIN
LastGame.broguesave
Normal file
BIN
LastGame.broguesave
Normal file
Binary file not shown.
24
html/flipped-why-am-i-always-like-this.html
Normal file
24
html/flipped-why-am-i-always-like-this.html
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
<div style="display: flex; width: 100%; align-items: center; justify-content: center; margin: 2rem 0">
|
||||||
|
<div style="outline: 2px solid black; flex: 2; aspect-ratio: 16/9; transform: perspective(500px) rotateY(20deg) skewY(-10deg) scale(0.8);">
|
||||||
|
<details>
|
||||||
|
<summary style="list-style: none; padding: 0.25rem">
|
||||||
|
<div style="display: flex; flex-direction: column; align-items: center; gap: 0.75rem; margin: 0.75rem;">
|
||||||
|
<div style="background-color: rgb(var(--color-notWhite)); border: 1px solid rgb(var(--color-cherry)); border-radius: 0.5rem; box-sizing: border-box; padding: 0.75rem; gap: 0.75rem; align-self: stretch; display: flex; flex-direction: row; align-items: center;">
|
||||||
|
<img src="https://static.pyrope.net/warning-shield.png" aria-hidden="true" style="margin: 0; display: block">
|
||||||
|
<p style="color: rgb(var(--color-cherry)); margin: 0; line-height: 24px">This post has content warnings for: <b>major spoilers for things. very major. i mean it!</b></p>
|
||||||
|
</div>
|
||||||
|
<div style="cursor: pointer; background-color: rgb(var(--color-cherry)); border-radius: 0.5rem; color: rgb(var(--color-notWhite)); padding: 0.75rem; line-height: 1; letter-spacing: 0.05em; whitespace: nowrap;">
|
||||||
|
show post
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</summary>
|
||||||
|
<div style="position: absolute; inset: 0; background-color: white; overflow-y: auto">
|
||||||
|
<p style="text-align: center; color: black">these guys die :(</p>
|
||||||
|
<img src="https://static.wikia.nocookie.net/seuss/images/d/d3/Thing1-and-thing2.jpg" alt="things 1 and 2 from dr. seuss" style="width: 100%">
|
||||||
|
<a style="width: fit-content; margin: 0 auto; display: block; color: #ccc" href="https://pyrope.net/randirect#cohost.org/mehbark/post/2555916-cursor-adventure-so::pyrope.net/mcai::irc.pyrope.net::413.gay::pyrope.net/tnb::pyrope.net/concat::pyrope.net/davehash::twitter.com/mehbark::pl.pyrope.net/terezi">random fun 4 u</a>
|
||||||
|
<p style="color: #eee; text-align: center;">yes i flipped it</p>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
<div style="flex: 1.2"><h1 style="text-align: center; font-size: 3rem">👀</h1> <p style="text-align: center">i should click on this and open it</p></div>
|
||||||
|
</div>
|
||||||
214
html/nested-cws.tsx
Normal file
214
html/nested-cws.tsx
Normal file
|
|
@ -0,0 +1,214 @@
|
||||||
|
import { JSX } from "preact/jsx-runtime";
|
||||||
|
import { render_and_copy } from "./common.tsx";
|
||||||
|
|
||||||
|
// TODO: make more generally usable
|
||||||
|
export const CW = ({ cws, end }: { cws: string[][]; end: JSX.Element }) =>
|
||||||
|
cws.length == 0 ? (
|
||||||
|
<div style="position:absolute;inset:0;background:white">{end}</div>
|
||||||
|
) : (
|
||||||
|
<details style="position:absolute;inset:0;background:white">
|
||||||
|
<summary style="list-style:none;padding:0.25rem">
|
||||||
|
<div style="display:flex;flex-direction:column;align-items:center;gap:0.75rem;margin:0.75rem;">
|
||||||
|
<div style="background-color:rgb(var(--color-notWhite));border:1px solid rgb(var(--color-cherry));border-radius:0.5rem;box-sizing:border-box;padding:0.75rem;gap:0.75rem;align-self:stretch;display:flex;flex-direction:row;align-items:center">
|
||||||
|
<img
|
||||||
|
src="https://static.pyrope.net/warning-shield.png"
|
||||||
|
aria-hidden="true"
|
||||||
|
style="margin:0;display:block"
|
||||||
|
/>
|
||||||
|
{/* color is omitted here and done elsewhere. note above TODO! */}
|
||||||
|
<p style="margin:0;line-height:24px">
|
||||||
|
This post has content warnings for:{" "}
|
||||||
|
<b>
|
||||||
|
{cws[0].join(", ") +
|
||||||
|
(cws[0].length == 0 ? "" : ".")}
|
||||||
|
</b>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div style="cursor:pointer;background-color:rgb(var(--color-cherry));border-radius:0.5rem;color:rgb(var(--color-notWhite));padding:0.75rem;line-height:1;letter-spacing:0.05em;whitespace:nowrap">
|
||||||
|
show post
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</summary>
|
||||||
|
<CW cws={cws.slice(1)} end={end} />
|
||||||
|
</details>
|
||||||
|
);
|
||||||
|
|
||||||
|
export const ALL_STAR_LYRICS = `
|
||||||
|
Somebody once told me the world is gonna roll me
|
||||||
|
I ain't the sharpest tool in the shed
|
||||||
|
She was looking kind of dumb with her finger and her thumb
|
||||||
|
In the shape of an "L" on her forehead
|
||||||
|
Well, the years start comin' and they don't stop comin'
|
||||||
|
Fed to the rules and I hit the ground runnin'
|
||||||
|
Didn't make sense not to live for fun
|
||||||
|
Your brain gets smart but your head gets dumb
|
||||||
|
So much to do, so much to see
|
||||||
|
So what's wrong with taking the backstreets?
|
||||||
|
You'll never know if you don't go (W-w-wacko)
|
||||||
|
You'll never shine if you don't glow
|
||||||
|
Hey now, you're an all star
|
||||||
|
Get your game on, go play
|
||||||
|
Hey now, you're a rock star
|
||||||
|
Get the show on, get paid
|
||||||
|
(And all that glitters is gold)
|
||||||
|
Only shootin' stars break the mold
|
||||||
|
It's a cool place, and they say it gets colder
|
||||||
|
You're bundled up now, wait 'til you get older
|
||||||
|
But the meteor men beg to differ
|
||||||
|
Judging by the hole in the satellite picture
|
||||||
|
The ice we skate is gettin' pretty thin
|
||||||
|
The water's gettin' warm so you might as well swim
|
||||||
|
My world's on fire, how 'bout yours?
|
||||||
|
That's the way I like it and I'll never get bored
|
||||||
|
Hey now, you're an all star
|
||||||
|
Get your game on, go play
|
||||||
|
Hey now, you're a rock star
|
||||||
|
Get the show on, get paid
|
||||||
|
(All that glitters is gold)
|
||||||
|
Only shootin' stars break the mold
|
||||||
|
Go for the moon (W-w-wacko, w-w-wacko)
|
||||||
|
Go for the moon (W-w-wacko, w-w-wacko)
|
||||||
|
Go for the moon
|
||||||
|
Go for the moon
|
||||||
|
Hey now, you're an all star
|
||||||
|
Get your game on, go play
|
||||||
|
Hey now, you're a rock star
|
||||||
|
Get the show on, get paid
|
||||||
|
(And all that glitters is gold)
|
||||||
|
Only shooting stars…
|
||||||
|
Somebody once asked, "Could I spare some change for gas?
|
||||||
|
I need to get myself away from this place"
|
||||||
|
I said, "Yep, what a concept
|
||||||
|
I could use a little fuel myself and we could all use a little change"
|
||||||
|
Well, the years start comin' and they don't stop comin'
|
||||||
|
Fed to the rules and I hit the ground runnin'
|
||||||
|
Didn't make sense not to live for fun
|
||||||
|
Your brain gets smart but your head gets dumb
|
||||||
|
So much to do, so much to see
|
||||||
|
So what's wrong with taking the backstreets?
|
||||||
|
You'll never know if you don't go (Go!)
|
||||||
|
You'll never shine if you don't glow
|
||||||
|
Hey now, you're an all star
|
||||||
|
Get your game on, go play
|
||||||
|
Hey now, you're a rock star
|
||||||
|
Get the show on, get paid
|
||||||
|
(And all that glitters is gold)
|
||||||
|
Only shootin' stars break the mold
|
||||||
|
(And all that glitters is gold)
|
||||||
|
Only shootin' stars break the mold
|
||||||
|
`.trim();
|
||||||
|
|
||||||
|
render_and_copy(
|
||||||
|
<div style="width:100%;height:15rem;color:rgb(var(--color-cherry))">
|
||||||
|
<CW
|
||||||
|
cws={[
|
||||||
|
"long post",
|
||||||
|
"deep post",
|
||||||
|
"broad post",
|
||||||
|
"content",
|
||||||
|
"warnings",
|
||||||
|
"content warnings",
|
||||||
|
"content&warnings",
|
||||||
|
"warnings&content",
|
||||||
|
"content&content warnings",
|
||||||
|
"warnings&content warnings",
|
||||||
|
"content&warnings&content warnings",
|
||||||
|
"the first 100 or so words of smash mouth's all star",
|
||||||
|
...ALL_STAR_LYRICS.split(/\s+/).slice(0, 100),
|
||||||
|
"i wasn't kidding",
|
||||||
|
"but i'll spare you the rest",
|
||||||
|
"opinion",
|
||||||
|
"i do like the song though it's solid and fun",
|
||||||
|
"further developing opinion",
|
||||||
|
"mainly fun",
|
||||||
|
"slightly tmi&showering",
|
||||||
|
"i sang it like every time i showered for months and months",
|
||||||
|
"eh what the heck i'll just",
|
||||||
|
"opinion&reiterated opinion&on homestuck&beyond canon",
|
||||||
|
"today has been so awesome",
|
||||||
|
"i didn't make a great homestuck post&or really any homestuck post&but the homestuck^2 (is it even that still???) upd8 was fantastic",
|
||||||
|
"i see it as a microcosm as my attitude to the new team as a whole",
|
||||||
|
'at first: "holy crap! new and scary" (hussie really is fantastic). speaking of,',
|
||||||
|
"shill&being annoying for a joke",
|
||||||
|
"read psycholonials it's free come on do it do it do it",
|
||||||
|
"but more and more i've been warming up to them as they figure things out",
|
||||||
|
"and&after catching most of the three hour 413 stream",
|
||||||
|
"yeah! they're fantastic. i'm so happy for them&and i'm just happy in general",
|
||||||
|
"it's great to know that the future of homestuck is in good hands",
|
||||||
|
"quote"e that i already posted&edited quote&portion of quote",
|
||||||
|
"I can’t imagine it’s going to take us less than three years of regular updates, but it could end up stretching longer",
|
||||||
|
"keyspam",
|
||||||
|
"aslkfjlk;asdjkdslkjflk;asd lk;fsdjl fjalksd lk alsdk f laksf lkjsdlfk lasdkf lkjsdlkjflkjdljk",
|
||||||
|
"it makes me so so happy",
|
||||||
|
"bodily fluids&tearducts",
|
||||||
|
"i keep almost getting watery eyes! it's ridiculous!",
|
||||||
|
"keyspam",
|
||||||
|
"i'm so happy aslkfj",
|
||||||
|
"anyway&back to nonsense",
|
||||||
|
"watch how elegantly and fluidly i mix actual content warning type things with just word typing",
|
||||||
|
"truly, i am a master of my craft",
|
||||||
|
"okay how big is this now (kb-wise)",
|
||||||
|
"133.82",
|
||||||
|
"very reasonable",
|
||||||
|
"i'll have to yap much more...",
|
||||||
|
"nothing",
|
||||||
|
"",
|
||||||
|
"i'm on page 4819 of my reread btw",
|
||||||
|
"was originally planning to finish it by 413 but i was so slow",
|
||||||
|
"so i'm deciding to just savor it",
|
||||||
|
"it's been very, very bursty progress",
|
||||||
|
"but i really do thoroughly enjoy it",
|
||||||
|
"i'm a homestuck! i don't know why i feel the need to re-",
|
||||||
|
"oh right it's homestuck day i spent three hours in an official homestuck stream this is kind of what's on mind",
|
||||||
|
"that's understandable i guess",
|
||||||
|
"happy 413&btw&i don't think i said that yet",
|
||||||
|
"i really need to finish this up",
|
||||||
|
"i know this is one of those Bad Posts where quantity (fails to) make quality",
|
||||||
|
"but i am getting dry eyes",
|
||||||
|
"too much homestuck and other stuff!",
|
||||||
|
"also i need to get this out by the end of 413 in my timezone",
|
||||||
|
"which is in like 14 minutes",
|
||||||
|
"don't question the logic this matters!",
|
||||||
|
"btw, the kbs went down because i factored out the cherry text color",
|
||||||
|
"HOLY CRAP THAT IS SUCH A TEREZI THING",
|
||||||
|
"FJLKSDLKFJSLDKJFLKJDFLKJSDFLKJ",
|
||||||
|
"well&they went up&but they went down measuring from that point",
|
||||||
|
"well&i didn't actually measure from that point",
|
||||||
|
"okay whatever uhhh",
|
||||||
|
"i'm running out of time",
|
||||||
|
"and i have to admit that the ending is pretty lame",
|
||||||
|
"so i'm trying to (quickly) think of a way to make these last few more fun",
|
||||||
|
"opinion",
|
||||||
|
"terezi is great!",
|
||||||
|
"realization",
|
||||||
|
"aw crap, you probably already knew i thought that",
|
||||||
|
"curse my plentiful past public praise!",
|
||||||
|
"i'm glad being funny is something the new team wants to do and can do",
|
||||||
|
"homestuck was chock-full of great jokes",
|
||||||
|
"homestuck^2 is great i'm happy bla bla new team bla bla",
|
||||||
|
"okay uh",
|
||||||
|
"eggbug",
|
||||||
|
].map(s => s.split("&"))}
|
||||||
|
end={
|
||||||
|
<div>
|
||||||
|
<p>
|
||||||
|
HAPPY 413! i barely made it in time IT COUNTS it COUNTE
|
||||||
|
! <a href="https://413.gay">homestuck</a>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
uh, you want more? fine, take{" "}
|
||||||
|
<a href="https://pyrope.net/mcai">
|
||||||
|
discord server that i made so i could continue
|
||||||
|
saying "man, computers are incredible" every day
|
||||||
|
</a>
|
||||||
|
, you're clearly, eh, dedicated
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
(if it wasn't obvious, this is kinda lame because i was
|
||||||
|
hoping you'd give up by now)
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
22
html/old-why-am-i-always-like-this.html
Normal file
22
html/old-why-am-i-always-like-this.html
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
<div style="display: flex; width: 100%; align-items: center; justify-content: center; margin: 2rem 0">
|
||||||
|
<div style="flex: 1.2"><h1 style="transform: rotateY(180deg); text-align: center; font-size: 3rem">👀</h1> <p style="text-align: center">i should click on this and open it</p></div>
|
||||||
|
<div style="outline: 2px solid black; flex: 2; aspect-ratio: 16/9; transform: perspective(500px) rotateY(-20deg) skewY(10deg) scale(0.8);">
|
||||||
|
<details>
|
||||||
|
<summary style="list-style: none; padding: 0.25rem">
|
||||||
|
<div style="display: flex; flex-direction: column; align-items: center; gap: 0.75rem; margin: 0.75rem;">
|
||||||
|
<div style="background-color: rgb(var(--color-notWhite)); border: 1px solid rgb(var(--color-cherry)); border-radius: 0.5rem; box-sizing: border-box; padding: 0.75rem; gap: 0.75rem; align-self: stretch; display: flex; flex-direction: row; align-items: center;">
|
||||||
|
<img src="https://static.pyrope.net/warning-shield.png" aria-hidden="true" style="margin: 0; display: block">
|
||||||
|
<p style="color: rgb(var(--color-cherry)); margin: 0; line-height: 24px">This post has content warnings for: <b>major spoilers for things. very major. i mean it!</b></p>
|
||||||
|
</div>
|
||||||
|
<div style="cursor: pointer; background-color: rgb(var(--color-cherry)); border-radius: 0.5rem; color: rgb(var(--color-notWhite)); padding: 0.75rem; line-height: 1; letter-spacing: 0.05em; whitespace: nowrap;">
|
||||||
|
show post
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</summary>
|
||||||
|
<div style="position: absolute; inset: 0; background-color: white; overflow-y: auto">
|
||||||
|
<p style="text-align: center; color: black">these guys die :(</p>
|
||||||
|
<img src="https://static.wikia.nocookie.net/seuss/images/d/d3/Thing1-and-thing2.jpg" alt="things 1 and 2 from dr. seuss" style="width: 100%">
|
||||||
|
<a style="width: fit-content; margin: 0 auto; display: block; color: #ccc" href="https://pyrope.net/randirect#cohost.org/mehbark/post/2555916-cursor-adventure-so::pyrope.net/mcai::irc.pyrope.net::413.gay::pyrope.net/tnb::pyrope.net/concat::pyrope.net/davehash::twitter.com/mehbark::pl.pyrope.net/terezi">random fun 4 u</a>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
</div></div>
|
||||||
|
|
@ -27,32 +27,223 @@
|
||||||
<style>
|
<style>
|
||||||
:root {
|
:root {
|
||||||
--accent: #eedd33;
|
--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>
|
</style>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
const render = text => {
|
// regices are hilarious sometimes
|
||||||
return text;
|
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 = () => {
|
window.onload = () => {
|
||||||
const words = document.getElementById("words");
|
const input = document.getElementById("input");
|
||||||
const output = document.getElementById("output");
|
const output = document.getElementById("output");
|
||||||
|
const preview = document.getElementById("preview");
|
||||||
|
|
||||||
words.addEventListener(
|
const rerender = () => {
|
||||||
"change",
|
const rendered = render(input.value);
|
||||||
() => (output.value = render(words.value))
|
output.value = rendered;
|
||||||
);
|
preview.innerHTML = rendered;
|
||||||
|
};
|
||||||
|
|
||||||
words.addEventListener(
|
input.addEventListener("change", rerender);
|
||||||
"keyup",
|
|
||||||
() => (output.value = render(words.value))
|
input.addEventListener("keyup", rerender);
|
||||||
);
|
|
||||||
|
document.addEventListener("keyup", e => {
|
||||||
|
if (e.altKey && e.key == "r") {
|
||||||
|
input.value += "∈";
|
||||||
|
}
|
||||||
|
rerender();
|
||||||
|
});
|
||||||
|
|
||||||
|
rerender();
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<textarea id="words"></textarea>
|
<div id="ui">
|
||||||
<textarea readonly id="output"></textarea>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,4 @@
|
||||||
|
// TODO: randomly pick color
|
||||||
import { contentType } from "https://deno.land/std@0.202.0/media_types/mod.ts";
|
import { contentType } from "https://deno.land/std@0.202.0/media_types/mod.ts";
|
||||||
import {
|
import {
|
||||||
Image,
|
Image,
|
||||||
|
|
|
||||||
BIN
static/warning-shield.png
Normal file
BIN
static/warning-shield.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 752 B |
Loading…
Reference in a new issue