hot take first skeleton done
This commit is contained in:
parent
619818774e
commit
787a07a9a2
4 changed files with 79 additions and 4 deletions
7
html/common.tsx
Normal file
7
html/common.tsx
Normal file
|
@ -0,0 +1,7 @@
|
||||||
|
import { Component } from "./jsx/jsx-runtime.ts";
|
||||||
|
|
||||||
|
export const Main: Component = (attributes, children) => (
|
||||||
|
<div {...attributes} id="main">
|
||||||
|
{...children}
|
||||||
|
</div>
|
||||||
|
);
|
|
@ -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>
|
||||||
);
|
);
|
||||||
|
|
|
@ -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[]];
|
||||||
|
|
68
html/hot_people_who_eat_croissants_are_dangerous.tsx
Normal file
68
html/hot_people_who_eat_croissants_are_dangerous.tsx
Normal 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",
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
);
|
Loading…
Reference in a new issue