/* ============================================================
Prototype stage kit (MySubaru)
The three Subaru cases embed the same interactive prototypes the interview
deck used. This file holds the shared shells so every case presents them
the same way: a phone at the deck's proportions, a wide desktop embed that
scales to its column, and a caption that carries the deck's own label.
The animation is driven from subaru-demos.js, which finds a stage by the
data-demo id written here. Those ids are the deck's slide ids on purpose:
s39-1 is the first prototype on deck slide 39, so the two stay traceable.
============================================================ */
(function () {
const EMB = "assets/subaru/embeds/";
/* Embeds sit behind an hour-long cache on the host; the version query
retires stale copies whenever the embed files themselves change. */
const EMB_V = "?v=bare2";
function embSrc(src) {
return EMB + src + (src.indexOf("?") === -1 ? EMB_V : "");
}
function FullLink(props) {
return (
Open full screen
);
}
/* The device and its caption are separate pieces so a row can seat them
differently: under the phone in a gallery of several, beside the pair
when there are exactly two. */
function Slot(props) {
return (
);
}
/* One phone prototype. Passing `demo` hands it to the deck's scenario of
that id, which walks the interface on its own; hovering gives control
back to the reader. Omitting `demo` leaves it purely explorable. */
function Phone(props) {
return (
);
}
/* A row of prototypes. Exactly two phones become a duo: the pair sits
together and both descriptions move to a shared column at its side,
so the row's width is spent on reading rather than on empty margin.
`compare` turns a longer row into a swipeable strip on a narrow
screen so an A/B set stays side by side rather than stacking. */
function Row(props) {
const kids = React.Children.toArray(props.children);
if (kids.length === 2 && !props.stack) {
return (
) : null}
);
}
/* ---------- native diagrams ----------
Drawn in the portfolio's own vocabulary rather than embedded as slide
exports, so they stay legible at any width and in both modes. Each one
carries a caption that says what the reader is looking at. ---------- */
function Dia(props) {
return (
{props.children}
{props.caption}
);
}
/* Term frequency from the blank-module study. Weight sets the type size,
so the shape of the answer is visible before any of it is read. */
function TermCloud(props) {
return (
);
}
/* Breadth against depth, priced in reachable items per tap. */
function ReachDiagram(props) {
const max = 64;
return (
{props.rows.map(function (r) {
return (
{r.label}{r.items} items
{r.taps}
{r.note}
);
})}
);
}
/* Two reading orders of the same thing, as ranked lists. `labels` renames
the columns when the comparison is not chronological. */
function OrderFlip(props) {
const labels = props.labels || ["Before", "After"];
return (