okay yeesh, hlm skelly

deno.json

@@ -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",

html/common.tsx

@@ -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>;

html/hotline-miami.tsx

@@ -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 }) => (
+const Wiggle = mk_class_wrapper("wiggle");
-    <div class="wiggle">{...toChildArray(children)}</div>
-);
 
 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>
+        <Frame dialogue="homestuck is a webcomic by andrew hussie">
-        <div class="middle">
+            <Frame dialogue="it features a large cast of characters">
-            <div class="game"></div>
+                <Frame dialogue="rick roll in tooltip" tooltip="rick roll" />
-            <PortraitFrame>
+            </Frame>
-                <EggbugImg type="smiling" />
+        </Frame>
-            </PortraitFrame>
-        </div>
-        <div class="bottom">
-            <Pulse>
-                FORTNITE BATTLE ROYALE PLAY FREE NOW AWESOME FUN GAME PLAY FOR
-                FREE NOW! WIN
-            </Pulse>
-        </div>
     </Main>
 );