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 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(
num_items
)}s ease-in-out reverse none running spin; ${
width ? `width: ${width * 100}%;` : ""
}`;
} ${n ? `margin-left: calc(-${(width ?? 0) * 100}% * ${n})` : ""}`;
const get_delays = (...lengths: number[]): number[] => {
let out = [0];
@ -23,14 +23,14 @@ const get_delays = (...lengths: number[]): number[] => {
return out;
};
const Wheel: Component = ({ items, width, classes }, _) => (
<details class="wheel">
<summary>
const Wheel: Component = ({ items, width, n, classes }, _) => (
<details class="wheel" style={width ? `width: ${width * 100}%;` : ""}>
<summary class={classes ? classes.join(" ") : ""}>
{...items.map((i: string) => <div class="wheel-item">{i}</div>)}
</summary>
<div
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> */}
{...items.map((item: string, i: number) => (
@ -49,15 +49,21 @@ function 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]);
}
const MultiWheel: Component = ({ items }, _) => (
<span class="multiwheel">
{...weird_slices(items).map(items => (
<Wheel items={items} /*width={1 / items.length}*/ />
const MultiWheel: Component = ({ items, type }, _) => (
<span class={`multiwheel ${type ? type : ""}`}>
{...weird_slices(items).map((items, n) => (
<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>
);
@ -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
const Take: Component = ({ subjects, objects, adjectives }, _) => (
<div class="take">
<MultiWheel items={subjects} /> <span class="bridge">who eat</span>{" "}
<MultiWheel items={objects} /> <span class="bridge">are</span>{" "}
<MultiWheel items={adjectives} />
<MultiWheel type="subjects" items={subjects} />{" "}
<div class="bridge">who eat</div>{" "}
<MultiWheel type="objects" items={objects} />{" "}
<div class="bridge">are</div>{" "}
<MultiWheel type="adjectives" items={adjectives} />
</div>
);