hot take first skeleton done

This commit is contained in:
mehbark 2023-07-10 14:52:20 -04:00
parent 619818774e
commit 787a07a9a2
4 changed files with 79 additions and 4 deletions

7
html/common.tsx Normal file
View file

@ -0,0 +1,7 @@
import { Component } from "./jsx/jsx-runtime.ts";
export const Main: Component = (attributes, children) => (
<div {...attributes} id="main">
{...children}
</div>
);

View file

@ -1,3 +1,4 @@
import { Main } from "./common.tsx";
import { reify_dialogue } from "./dialogue.tsx"; import { reify_dialogue } from "./dialogue.tsx";
import { debug_render } from "./html.ts"; import { debug_render } from "./html.ts";
import { Component } from "./jsx/jsx-runtime.ts"; import { Component } from "./jsx/jsx-runtime.ts";
@ -250,8 +251,8 @@ const dialogue = reify_dialogue([
]); ]);
debug_render( debug_render(
<div class="main"> <Main>
<div class="gradient">{dialogue}</div> <div class="gradient">{dialogue}</div>
<div class="scanlines"></div> <div class="scanlines"></div>
</div> </Main>
); );

View file

@ -1,5 +1,4 @@
import { Html, debug_render } from "./html.ts"; import { Html } from "./html.ts";
import { Component } from "./jsx/jsx-runtime.ts";
type DOption = [Html, Dialogue]; type DOption = [Html, Dialogue];
type Dialogue = Html | [Html, ...DOption[]]; type Dialogue = Html | [Html, ...DOption[]];

View file

@ -0,0 +1,68 @@
import { Html, debug_render } from "./html.ts";
import { Component } from "./jsx/jsx-runtime.ts";
const wheel = (...items: Html[]): Html => (
<div class="wheel">
{...items.map(i => <div class="wheel-item">{i} people</div>)}
</div>
);
const Take: Component = ({ subjects, objects, adjectives }, _) => (
<div class="take">
{wheel(...subjects)} who eat {wheel(...objects)} are{" "}
{wheel(...adjectives)}
</div>
);
// might want to have the final item be seperate
debug_render(
<Take
subjects={[
"poor",
"fat",
"dumb",
"tall",
"short",
"poor",
"fat",
"dumb",
"tall",
"hot",
]}
objects={[
"apples",
"bread",
"pasta",
"candy",
"rice",
"beans",
"apples",
"bread",
"candy",
"rice",
"beans",
"apples",
"bread",
"pasta",
"candy",
"rice",
"croissants",
]}
adjectives={[
"vibes",
"mean",
"dumb",
"cool",
"hot",
"stupid",
"funny",
"vibes",
"mean",
"dumb",
"cool",
"hot",
"stupid",
"dangerous",
]}
/>
);