okay yeesh, hlm skelly
This commit is contained in:
parent
d3c337fae2
commit
2f5446f433
3 changed files with 55 additions and 19 deletions
|
@ -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",
|
||||
|
|
|
@ -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>;
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
Loading…
Reference in a new issue