47 lines
1.5 KiB
TypeScript
47 lines
1.5 KiB
TypeScript
import { EggbugImg, 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-bottom">{...toChildArray(children)}</div>
|
|
<div class="pulse-top">{...toChildArray(children)}</div>
|
|
</div>
|
|
);
|
|
|
|
const Portrait = ({ href, alt }: { href: string; alt: string }) => (
|
|
<img class="portrait" href={href} alt={alt} />
|
|
);
|
|
|
|
const PortraitFrame = ({ children }: { children: ComponentChildren }) => (
|
|
<div class="portrait-frame">
|
|
<div class="portrait-frame-inner">{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>
|
|
<div class="top">press [rmb] to AWESOMESAUCE</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>
|
|
</Main>
|
|
);
|