okay yeesh, hlm skelly

This commit is contained in:
mehbark 2023-07-16 00:36:39 -04:00
parent d3c337fae2
commit 2f5446f433
3 changed files with 55 additions and 19 deletions

View file

@ -1,7 +1,8 @@
{
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "preact"
"jsxImportSource": "preact",
"exclude": ["typings/browser.d.ts", "typings/browser", "node_modules"]
},
"imports": {
"copy-paste": "https://deno.land/x/copy_paste@v1.1.3/mod.ts",

View file

@ -54,4 +54,4 @@ export const render_and_copy = (elem: VNode) => {
export const mk_class_wrapper =
(klass: string) =>
({ children }: { children: ComponentChildren }) =>
<div class="klass">{...toChildArray(children)}</div>;
<div class={klass}>{...toChildArray(children)}</div>;

View file

@ -1,4 +1,9 @@
import { EggbugImg, Main, render_and_copy } from "./common.tsx";
import {
EggbugImg,
Main,
mk_class_wrapper,
render_and_copy,
} from "./common.tsx";
import { ComponentChildren, JSX, toChildArray } from "preact";
const Pulse = ({ children }: { children: ComponentChildren }) => (
@ -12,9 +17,7 @@ const Portrait = ({ href, alt }: { href: string; alt: string }) => (
<img class="portrait" href={href} alt={alt} />
);
const Wiggle = ({ children }: { children: ComponentChildren }) => (
<div class="wiggle">{...toChildArray(children)}</div>
);
const Wiggle = mk_class_wrapper("wiggle");
const PortraitFrame = ({ children }: { children: ComponentChildren }) => (
<div class="portrait-frame">
@ -23,6 +26,46 @@ const PortraitFrame = ({ children }: { children: ComponentChildren }) => (
</div>
);
const Frame = ({
tooltip = "PRESS [RMB] TO OPEN BROWSER CONTEXT MENU",
game = <></>,
portrait = <EggbugImg type="smiling" />,
dialogue = "",
children,
}: {
tooltip?: string;
game?: JSX.Element;
portrait?: JSX.Element;
dialogue?: string;
children?: ComponentChildren;
}) =>
children ? (
<details class="frame">
<summary class="frame">
<div class="top">{tooltip}</div>
<div class="middle">
<div class="game">{game}</div>
<PortraitFrame>{portrait}</PortraitFrame>
</div>
<div class="bottom">
<Pulse>{dialogue}</Pulse>
</div>
</summary>
<div class="next-frame">{...toChildArray(children)}</div>
</details>
) : (
<div class="frame">
<div class="top">{tooltip}</div>
<div class="middle">
<div class="game">{game}</div>
<PortraitFrame>{portrait}</PortraitFrame>
</div>
<div class="bottom">
<Pulse>{dialogue}</Pulse>
</div>
</div>
);
// score wiggles faster the more points you get but resets
// there is a canonicl speed for like "go to car"
// could also do bigger ui elements
@ -34,18 +77,10 @@ const PortraitFrame = ({ children }: { children: ComponentChildren }) => (
// i'll probably go for a different ui element
render_and_copy(
<Main>
<div class="top">press [rmb] to open browser context menu</div>
<div class="middle">
<div class="game"></div>
<PortraitFrame>
<EggbugImg type="smiling" />
</PortraitFrame>
</div>
<div class="bottom">
<Pulse>
FORTNITE BATTLE ROYALE PLAY FREE NOW AWESOME FUN GAME PLAY FOR
FREE NOW! WIN
</Pulse>
</div>
<Frame dialogue="homestuck is a webcomic by andrew hussie">
<Frame dialogue="it features a large cast of characters">
<Frame dialogue="rick roll in tooltip" tooltip="rick roll" />
</Frame>
</Frame>
</Main>
);