mbk/cohost
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

gonna take a break and work on something else

Browse source
This commit is contained in:
mehbark 2023-07-11 16:35:51 -04:00
parent 3bae650810
commit d9dfb549f6
3 changed files with 22 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

0
html/cohost-plus.tsx Normal file
View file

0
html/eggbug-spamclick-battle.tsx Normal file
View file

36
html/hot_people_who_eat_croissants_are_dangerous.tsx
View file

@ -8,12 +8,12 @@ const peopleify = (...people: string[]): string[] =>
const animation_length = (num_items: number): number => /*num_items / 5*/ 3; const animation_length = (num_items: number): number => /*num_items / 5*/ 3;
const wheel_style = (num_items: number, width?: number): string => const wheel_style = (num_items: number, width?: number, n?: number): string =>
`transform: translateY(calc(2rem * -${num_items})); animation: ${animation_length( `transform: translateY(calc(2rem * -${num_items})); animation: ${animation_length(
num_items num_items
)}s ease-in-out reverse none running spin; ${ )}s ease-in-out reverse none running spin; ${
width ? `width: ${width * 100}%;` : "" width ? `width: ${width * 100}%;` : ""
}`; } ${n ? `margin-left: calc(-${(width ?? 0) * 100}% * ${n})` : ""}`;
const get_delays = (...lengths: number[]): number[] => { const get_delays = (...lengths: number[]): number[] => {
let out = [0]; let out = [0];
@ -23,14 +23,14 @@ const get_delays = (...lengths: number[]): number[] => {
return out; return out;
}; };
const Wheel: Component = ({ items, width, classes }, _) => ( const Wheel: Component = ({ items, width, n, classes }, _) => (
<details class="wheel"> <details class="wheel" style={width ? `width: ${width * 100}%;` : ""}>
<summary> <summary class={classes ? classes.join(" ") : ""}>
{...items.map((i: string) => <div class="wheel-item">{i}</div>)} {...items.map((i: string) => <div class="wheel-item">{i}</div>)}
</summary> </summary>
<div <div
class={`wheel-inner ${classes ? classes.join(" ") : ""}`} class={`wheel-inner ${classes ? classes.join(" ") : ""}`}
style={wheel_style(items.length, width)} style={wheel_style(items.length, width, n)}
> >
{/* <div class="wheel-item empty"></div> */} {/* <div class="wheel-item empty"></div> */}
{...items.map((item: string, i: number) => ( {...items.map((item: string, i: number) => (
@ -49,15 +49,21 @@ function slices<T>(arr: T[]): T[][] {
} }
function weird_slices<T>(arr: T[]): T[][] { function weird_slices<T>(arr: T[]): T[][] {
console.log(arr.map(item => [...arr.filter(t => t != item), item]));
return arr.map(item => [...arr.filter(t => t != item), item]); return arr.map(item => [...arr.filter(t => t != item), item]);
} }
const MultiWheel: Component = ({ items }, _) => ( const MultiWheel: Component = ({ items, type }, _) => (
<span class="multiwheel"> <span class={`multiwheel ${type ? type : ""}`}>
{...weird_slices(items).map(items => ( {...weird_slices(items).map((items, n) => (
<Wheel items={items} /*width={1 / items.length}*/ /> <Wheel
items={items}
width={1 / items.length}
n={n}
summary_classes={[type]}
/>
))} ))}
<Wheel items={items} classes={["invisible"]} /> <Wheel items={items} classes={["invisible"]} summary_classes={[type]} />
</span> </span>
); );
@ -66,9 +72,11 @@ const MultiWheel: Component = ({ items }, _) => (
// it would be possible to have it so the final text is actually properyly selectable maybe but eh // it would be possible to have it so the final text is actually properyly selectable maybe but eh
const Take: Component = ({ subjects, objects, adjectives }, _) => ( const Take: Component = ({ subjects, objects, adjectives }, _) => (
<div class="take"> <div class="take">
<MultiWheel items={subjects} /> <span class="bridge">who eat</span>{" "} <MultiWheel type="subjects" items={subjects} />{" "}
<MultiWheel items={objects} /> <span class="bridge">are</span>{" "} <div class="bridge">who eat</div>{" "}
<MultiWheel items={adjectives} /> <MultiWheel type="objects" items={objects} />{" "}
<div class="bridge">are</div>{" "}
<MultiWheel type="adjectives" items={adjectives} />
</div> </div>
); );