From 3de300ffa5676e2cc13f60a626e720a658b51a51 Mon Sep 17 00:00:00 2001
From: mehbark <terezi@pyrope.net>
Date: Mon, 10 Jul 2023 16:50:36 -0400
Subject: [PATCH] good enough animation

now for twitter imitation
---
 ...eople_who_eat_croissants_are_dangerous.tsx | 47 ++++++++-----------
 1 file changed, 20 insertions(+), 27 deletions(-)

diff --git a/html/hot_people_who_eat_croissants_are_dangerous.tsx b/html/hot_people_who_eat_croissants_are_dangerous.tsx
index 5990229..51b0d9d 100644
--- a/html/hot_people_who_eat_croissants_are_dangerous.tsx
+++ b/html/hot_people_who_eat_croissants_are_dangerous.tsx
@@ -1,4 +1,4 @@
-import { Html, debug_render } from "./html.ts";
+import { Html, debug_render, render } from "./html.ts";
 import { Component } from "./jsx/jsx-runtime.ts";
 
 const peopleify = (...people: string[]): string[] =>
@@ -6,10 +6,10 @@ const peopleify = (...people: string[]): string[] =>
 
 const animation_length = (num_items: number): number => num_items / 5;
 
-const wheel_style = (num_items: number, delay_seconds = 0): string =>
+const wheel_style = (num_items: number): string =>
     `transform: translateY(calc(2rem * -${num_items})); animation: ${animation_length(
         num_items
-    )}s 0s ease-in-out reverse none running spin; animation-delay: ${delay_seconds}s;`;
+    )}s ease-in-out reverse none running spin;`;
 
 const get_delays = (...lengths: number[]): number[] => {
     let out = [0];
@@ -18,34 +18,27 @@ const get_delays = (...lengths: number[]): number[] => {
     }
     return out;
 };
-const Wheel: Component = ({ delay_seconds }, children) => (
-    <div class="wheel">
-        <div
-            class="wheel-inner"
-            style={wheel_style(children.length, delay_seconds)}
-        >
-            <div class="wheel-item empty"></div>
-            {...children.map(i => <div class="wheel-item">{i}</div>)}
+
+const Wheel: Component = ({ items }, _) => (
+    <details class="wheel">
+        <summary>
+            {...items.map((i: string) => <div class="wheel-item">{i}</div>)}
+        </summary>
+        <div class="wheel-inner" style={wheel_style(items.length)}>
+            {/* <div class="wheel-item empty"></div> */}
+            {...items.map((i: string) => <div class="wheel-item">{i}</div>)}
         </div>
-    </div>
+    </details>
 );
 
 // i'll probably just hardcode the delays... lame but w/e
-const Take: Component = ({ subjects, objects, adjectives }, _) => {
-    const [d1, d2, d3] = get_delays(
-        subjects.length,
-        objects.length,
-        adjectives.length
-    );
-    console.log(get_delays(subjects.length, objects.length, adjectives.length));
-    return (
-        <div class="take">
-            <Wheel delay_seconds={d1}>{...subjects}</Wheel> who eat{" "}
-            <Wheel delay_seconds={d2}>{...objects}</Wheel> are{" "}
-            <Wheel delay_seconds={d3}>{...adjectives}</Wheel>
-        </div>
-    );
-};
+const Take: Component = ({ subjects, objects, adjectives }, _) => (
+    <div class="take">
+        <Wheel items={subjects} /> <div class="bridge">who eat</div>{" "}
+        <Wheel items={objects} /> <div class="bridge">are</div>{" "}
+        <Wheel items={adjectives} />
+    </div>
+);
 
 // might want to have the final item be seperate
 // turned out to be unnecessary