cursor adventure: ending done, weird order ik
This commit is contained in:
parent
cd939b56d9
commit
a0d5deed75
6 changed files with 153 additions and 53 deletions
22
html/cursor-adventure.tsx
Normal file
22
html/cursor-adventure.tsx
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
import { JSX } from "preact/jsx-runtime";
|
||||||
|
import { Main, render_and_copy } from "./common.tsx";
|
||||||
|
import { ComponentChild, ComponentChildren, toChildArray } from "preact";
|
||||||
|
|
||||||
|
// i could also have the circle spin and the cursor stay in place :O
|
||||||
|
// but that would lose the interactive aspect D:
|
||||||
|
// one-time ease-in could be a nice effect
|
||||||
|
// maze thing with cursors
|
||||||
|
// something like loz statue pointing
|
||||||
|
|
||||||
|
// gonna need to plan this out for it to be fun
|
||||||
|
// (no real order)
|
||||||
|
// 1. grid layout (will pay dividends)
|
||||||
|
// 2. obvious start location
|
||||||
|
// 3. say sorry to mobile users in title (switching to a different device is so good for engagement this will be great for quarterly metrics)
|
||||||
|
// 4. choices!
|
||||||
|
// 5. maybe generate a decent-sized set of arrows (like box-drawing characters)
|
||||||
|
// 6. easter eggs with stuff you couldn't get to on the main path
|
||||||
|
// 7. LINK AS THE FINAL DESTINATION
|
||||||
|
// 8. RESIST (FAIL?) THE TEMPTATION TO MAKE THAT LINK A RICK ROLL
|
||||||
|
// 9. this exists? https://www.cursor.cc/?action=icon&file_id=54078
|
||||||
|
render_and_copy(<Main style={{ width: "100%", aspectRatio: "1" }}></Main>);
|
||||||
|
|
@ -1,53 +0,0 @@
|
||||||
import { JSX } from "preact/jsx-runtime";
|
|
||||||
import { Main, render_and_copy } from "./common.tsx";
|
|
||||||
import { ComponentChild, ComponentChildren, toChildArray } from "preact";
|
|
||||||
|
|
||||||
const Circle = ({
|
|
||||||
style,
|
|
||||||
children,
|
|
||||||
}: {
|
|
||||||
style?: JSX.CSSProperties;
|
|
||||||
children?: ComponentChildren;
|
|
||||||
}) => {
|
|
||||||
let children_: ComponentChild[] = toChildArray(children);
|
|
||||||
if (children_.length > 0) {
|
|
||||||
const turn_per_child = 1 / children_.length;
|
|
||||||
children_ = children_.map((c, i) => (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
transform: `translate(50%, 50%) rotate(${
|
|
||||||
turn_per_child * i
|
|
||||||
}turn)`,
|
|
||||||
width: "fit-content",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{c}
|
|
||||||
</div>
|
|
||||||
));
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
aspectRatio: "1",
|
|
||||||
borderRadius: "413413px",
|
|
||||||
marginLeft: "auto",
|
|
||||||
marginRight: "auto",
|
|
||||||
...style,
|
|
||||||
}}
|
|
||||||
children={children_}
|
|
||||||
></div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
render_and_copy(
|
|
||||||
<Main style={{ width: "100%", aspectRatio: "1" }}>
|
|
||||||
<Circle style={{ backgroundColor: "red" }}>
|
|
||||||
<div>hello</div>
|
|
||||||
<div>hello</div>
|
|
||||||
<div>hello</div>
|
|
||||||
<div>hello</div>
|
|
||||||
<div>hello</div>
|
|
||||||
</Circle>
|
|
||||||
</Main>
|
|
||||||
);
|
|
||||||
131
static/cursor-fun-end/index.html
Normal file
131
static/cursor-fun-end/index.html
Normal file
|
|
@ -0,0 +1,131 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>RICK ROLL OF COURSE</title>
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
background-color: #a4a3ae;
|
||||||
|
transition: 1s background-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.absolute-center {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.initially-hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#lemonsnout {
|
||||||
|
animation: explode 3s ease-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes explode {
|
||||||
|
0% {
|
||||||
|
transform: scale(0%);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: scale(100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script>
|
||||||
|
function sleep(ms) {
|
||||||
|
return new Promise(resolve => setTimeout(resolve, ms));
|
||||||
|
}
|
||||||
|
|
||||||
|
function hide(id) {
|
||||||
|
document.getElementById(id).style.display = "none";
|
||||||
|
}
|
||||||
|
|
||||||
|
function show(id) {
|
||||||
|
document.getElementById(id).style.display = "block";
|
||||||
|
}
|
||||||
|
|
||||||
|
function set_bg(color) {
|
||||||
|
document.body.style.backgroundColor = color;
|
||||||
|
}
|
||||||
|
function set_title(title) {
|
||||||
|
document.title = title;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function main() {
|
||||||
|
await sleep(3500);
|
||||||
|
hide("rickroll");
|
||||||
|
show("psyche");
|
||||||
|
set_title("PSYCHE");
|
||||||
|
set_bg("#136602");
|
||||||
|
|
||||||
|
await sleep(3000);
|
||||||
|
hide("psyche");
|
||||||
|
show("shill");
|
||||||
|
set_title("i like it a lot :]");
|
||||||
|
set_bg("#5ae93d");
|
||||||
|
|
||||||
|
await sleep(10000);
|
||||||
|
hide("shill");
|
||||||
|
show("2x-psyche");
|
||||||
|
set_title("OHHHHHHH YOU JUST GOT GOT");
|
||||||
|
set_bg("#b57fc4");
|
||||||
|
|
||||||
|
await sleep(1000);
|
||||||
|
show("lemonsnout-container");
|
||||||
|
set_title("oh hi lemonsnout :D");
|
||||||
|
|
||||||
|
await sleep(3200);
|
||||||
|
window.location.replace(
|
||||||
|
"https://www.youtube.com/watch?v=dQw4w9WgXcQ"
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
window.onload = main;
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<img
|
||||||
|
id="rickroll"
|
||||||
|
class="absolute-center"
|
||||||
|
src="https://media.tenor.com/x8v1oNUOmg4AAAAd/rickroll-roll.gif"
|
||||||
|
alt="young rick astley from the famous rick roll dancing"
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
id="psyche"
|
||||||
|
class="absolute-center initially-hidden"
|
||||||
|
src="./psyche.png"
|
||||||
|
alt="large, green, pixelated text that says PSYCHE"
|
||||||
|
/>
|
||||||
|
<div id="shill" class="absolute-center initially-hidden">
|
||||||
|
<p>i just want you to read homestuck :]</p>
|
||||||
|
<a href="https://bambosh.dev/unofficial-homestuck-collection"
|
||||||
|
>offline (best)</a
|
||||||
|
>
|
||||||
|
<a href="https://homestuck.giovanh.com"
|
||||||
|
>online (easier, also really cool)</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<img
|
||||||
|
id="2x-psyche"
|
||||||
|
class="absolute-center initially-hidden"
|
||||||
|
src="./x2-double-psycheout-combo.png"
|
||||||
|
alt="large, yellow and purple, pixelated text that says x2 DOUBLE PSYCHEOUT COMBO!!"
|
||||||
|
/>
|
||||||
|
<div class="absolute-center initially-hidden" id="lemonsnout-container">
|
||||||
|
<img
|
||||||
|
id="lemonsnout"
|
||||||
|
src="./large-lemonsnout.png"
|
||||||
|
alt="a very close pic of lemonsnout's head"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
static/cursor-fun-end/large-lemonsnout.png
Normal file
BIN
static/cursor-fun-end/large-lemonsnout.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
BIN
static/cursor-fun-end/psyche.png
Normal file
BIN
static/cursor-fun-end/psyche.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 968 B |
BIN
static/cursor-fun-end/x2-double-psycheout-combo.png
Normal file
BIN
static/cursor-fun-end/x2-double-psycheout-combo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Loading…
Reference in a new issue