@@ -176,6 +402,600 @@ function Demo() {
);
}
+type StateMode = MascotState | 'auto';
+
+/** Cycles through the states every few seconds until one is picked. */
+function useAutoState() {
+ const [mode, setMode] = useState
('auto');
+ const [tick, setTick] = useState(0);
+ useEffect(() => {
+ if (mode !== 'auto') return;
+ const timer = window.setInterval(() => setTick((n) => n + 1), 5200);
+ return () => window.clearInterval(timer);
+ }, [mode]);
+ const state = mode === 'auto' ? LIVE_STATES[tick % LIVE_STATES.length] : mode;
+ return { mode, setMode, state };
+}
+
+function StateSwitch({ mode, state, onChange }: { mode: StateMode; state: MascotState; onChange: (mode: StateMode) => void }) {
+ return (
+
+ {(['auto', ...LIVE_STATES] as const).map((option) => (
+ onChange(option)}>
+ {option === 'auto' ? `auto · ${STATE_LABEL[state]}` : STATE_LABEL[option]}
+
+ ))}
+
+ );
+}
+
+const PI_SHAPES: { id: PiShape; caption: string }[] = [
+ { id: 'pip', caption: 'Pip · Pi is a circle' },
+ { id: 'brackets', caption: 'Brackets · the frame' },
+ { id: 'caret', caption: 'Caret · the cursor' },
+ { id: 'glyph', caption: 'Glyph · the mark, stood up' },
+ { id: 'stamp', caption: 'Stamp · the seal' },
+];
+
+const PI_LOOKS: { id: PiLook; label: string }[] = [
+ { id: 'ink', label: 'ink' },
+ { id: 'blueprint', label: 'blueprint' },
+ { id: 'paper', label: 'paper' },
+ { id: 'warm', label: 'warm' },
+];
+
+const PI_ICONS: PiIconName[] = ['pi', 'session', 'terminal', 'branch', 'diff', 'file', 'check', 'stop', 'loop', 'spark'];
+const PI_RULES: { kind: RuleKind; label: string }[] = [
+ { kind: 'ruler', label: 'Ruler · 4px and 20px ticks' },
+ { kind: 'mark', label: 'Mark · the Pi between two hairlines' },
+ { kind: 'dotted', label: 'Dotted · 8px step' },
+ { kind: 'thread', label: 'Thread · tidal fading out' },
+];
+
+function LookSwitch({ look, onChange }: { look: PiLook; onChange: (look: PiLook) => void }) {
+ return (
+
+ {PI_LOOKS.map((option) => (
+ onChange(option.id)}>
+ {option.label}
+
+ ))}
+
+ );
+}
+
+const GLYPH_POSES = [
+ { id: 'glyph', caption: 'Glyph · the original', node: },
+ { id: 'peek', caption: 'Peek · eyes in the counter', node: },
+ { id: 'carry', caption: 'Carry · the dot rides up top', node: },
+ { id: 'walk', caption: 'Walk · on the road while it runs', node: },
+ { id: 'assemble', caption: 'Assemble · built from its grid', node: },
+];
+
+const GLYPH_SIZES = [16, 24, 32, 48, 72, 112];
+
+function GlyphFamilyDemo() {
+ const { mode, setMode, state } = useAutoState();
+ const [look, setLook] = useState('ink');
+ return (
+
+
+
+
Glyph family
+
The mark, stood up, and everything it can do.
+
+
+
+
+
+
+
+
+ {GLYPH_POSES.map((pose) => (
+
+
+ {pose.node}
+
+
+ ))}
+
+
+
+
+
+
+
+
+
+ pidex
+ ~/projects/pidex · main
+
+ ● {STATE_LABEL[state]}
+
+
+
+
+
+
+ {GLYPH_SIZES.map((size) => (
+
+ = 24} />
+ {size}
+
+ ))}
+
+
+
+
+
+
+
Stamps
+
Seals, tickets, postmarks, and stickers.
+
+ Each stamp is pressed again whenever the state changes. Worn ink speckles the ink and
+ roughens its edge, like a real rubber stamp.
+
+
+
+
+
+
+ setInked((v) => !v)}>
+ worn ink · {inked ? 'on' : 'off'}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Inks
+
One ink per state.
+
+
+ {LIVE_STATES.map((tone, i) => (
+
+
+ {STATE_LABEL[tone]}
+
+ ))}
+
+
+
+
+
+
Passport
+
A page of collected stamps.
+
+
+
+
+ Passport
+ pidex · sessions this week
+
+ {PASSPORT.map((item, i) => (
+
+ {item.node}
+
+ ))}
+
+
+
+
+
+
+
Stickers
+
Die-cut, for laptops and READMEs.
+
+
+
+
+
+
+
+
+
+
+
+
Schematic
+
The Glyph, drawn up as a blueprint.
+
+ A dimensioned elevation, an exploded view with a parts list, and the session state
+ schema. The current state lights its box and flows out along its arrows, and the
+ seal is pressed onto the title block.
+
+
+
+
+ {SHEET_LOOKS.map((option) => (
+ setLook(option.id)}>
+ {option.label}
+
+ ))}
+
+
+
+
+
+
+
+
+
Shapes
+
Five shapes, four looks, one set of inks.
+
+
+
+ {PI_LOOKS.map((option) => (
+ setLook(option.id)}>
+ {option.label}
+
+ ))}
+
+
+
+
+
+
+ {PI_SHAPES.map((shape) => (
+
+
+
+
+
+ ))}
+
+
+
+
+
Every look
+
Four looks for every shape.
+
+
+ {PI_LOOKS.map((row) => (
+
+
{row.label}
+ {PI_SHAPES.map((shape) => (
+
+
+
+ ))}
+
+ ))}
+
+
+
+
+
+
Assets
+
Stamps, rules, icons, and an empty state.
+
+
+
+
draft
+
running
+
your turn
+
blocked
+
shipped
+
+ {PI_RULES.map((rule) => (
+
+ ))}
+
+ {PI_ICONS.map((name) => (
+
+ ))}
+
+
+
+
+
+
Nothing running yet.
+
Start a session and it will show up here.
+
› pidex new "fix the flaky test"
+
+
+
+
+
+
Roster
+
One Blink per session.
+
+ Each session gets a top face and a piece of gear, so you can tell them apart. The face
+ and the signal above the head show what the session is doing, and hold for as long as
+ that state lasts.
+
+
+
+
+
+
Variants
+
Tone and gear.
+
+
+ {VARIANTS.map((v) => (
+
+
+
+
+
+ ))}
+
+
+
+
Terminal
+
Blink in block characters, in pi.dev colours.
+
+ For the CLI and for anywhere without SVG. Seven columns wide, in the same five states.
+ Each skin takes its colours from pi.dev, and the signal above the head always takes the
+ state colour.
+
+
+
+
+
+
+ pidex
+ ~/projects/pidex · main
+
+ ● {STATE_LABEL[state]}
+
+
+
+
+ {PIXEL_SKINS.map((skin) => (
+
+
+
+ {skin.id === 'terminal' ? (
+
+ › pidex
+
+ ) : null}
+
{skin.note}
+
+ ))}
+
+
+ {LIVE_STATES.map((s) => (
+
+ ))}
+
+
+
+
+
Alive
+
Three takes on the pair, moving.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+