Sage

notes:

• you have to click a bunch at the end of the cycle! sorry! this is my fault
• the grid is 7x7 for size reasons alone
• this is a (bad) application of @blackle's technique
• i am planning to milk this leverage the creativity of cohostlandia's userbase in never before seen ways by using this format with colors, so rank your faves here and illl pick the top ten or so at some point: https://strawpoll.com/7rnzmNYoDyO they're built into your browser so they're easy to find and such standerda each I need to sleep now. okay
  • i didn't do this. maybe i should! i should. that would be fun. computer, set a reminder
• here's the most important part of the (again, bad) code:

export const Cycle = ({
    width_px,
    height_px,
    children,
    style,
}: {
    width_px: number;
    height_px: number;
    children: [ComponentChild, ...ComponentChild[]];
    style?: Record<string, string>;
}) => (
    <div
        style={{
            width: `${width_px}px`,
            height: `${height_px}px`,
            overflow: "hidden",
            filter: "url(https://mehbark.github.io/#INFINITE%20CREDIT%20TO%20@BLACKLE)",
            ...style,
        }}
    >
        <div
            style={{
                display: "inline-flex",
                height: `${height_px}px`,
                paddingRight: `${width_px}px`,
                position: "relative",
                cursor: "pointer",
            }}
        >
            {...children.map((c, i) => (
                <details>
                    <summary
                        style={{
                            position: "absolute",
                            top: "0px",
                            left: `calc(-${width_px * 100}% + ${
                                width_px * width_px + width_px * i
                            }px)`,
                            // width: `${width_px}px`,
                            width: `calc(${
                                width_px * (children.length - 1) * 2 +
                                width_px -
                                width_px * i * 2
                            }px)`,
                            height: `${height_px}px`,
                            listStyle: "none",
                            overflow: "hidden",
                        }}
                    >
                        {c}
                    </summary>
                    <div
                        style={{
                            width: `${
                                i == children.length - 1
                                    ? children.length - 1
                                    : 1
                            }px`,
                        }}
                    ></div>
                </details>
            ))}
        </div>
    </div>
);