import { Main, render_and_copy } from "./common.tsx";
import { ComponentChildren, JSX, toChildArray } from "preact";

const Pulse = ({ children }: { children: ComponentChildren }): JSX.Element => (
    <div class="pulse">
        <div class="pulse-top">{...toChildArray(children)}</div>
        <div class="pulse-bottom-bg" />
        <div class="pulse-bottom">{...toChildArray(children)}</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
// but those might depend more on font
// dialogue is also consistent
// but i'm kind of sick of dialogue
// can also recreate the portrait background
// trying to only change the text color may be a dead end :(
// i'll probably go for a different ui element
render_and_copy(
    <Main>
        <Pulse>homestuck</Pulse>
        <Pulse>fortnite</Pulse>
    </Main>
);