mbk/cohost
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

cursor adventure: ending done, weird order ik

Browse source
This commit is contained in:
mehbark 2023-08-19 23:49:19 -04:00
parent cd939b56d9
commit a0d5deed75
6 changed files with 153 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
html/cursor-adventure.tsx Normal file
View 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>);

53
html/slice-circle-spinny-cursor.tsx
View file

@ -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
View 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
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 6.6 KiB

BIN
static/cursor-fun-end/psyche.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 968 B

BIN
static/cursor-fun-end/x2-double-psycheout-combo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.9 KiB