Janady13/thatstupidcomputer / apps/web/src/components/ComputerConversation.tsx

1import { useEffect, useRef, useState, type MouseEvent } from 'react'; 2import { Link } from 'react-router'; 3import { useAnimation } from '../animation/orchestration/AnimationProvider'; 4import { createConversation, INTENTS, ROASTS, transitionConversation, type ConversationEvent, type ConversationIntent } from '../animation/conversation/director.mjs'; 5import { demoIntentHref as demoHref } from './demo-intent.mjs'; 6import { analytics } from '../measurement'; 7import type { ComputerStage } from '../measurement/analytics.mjs'; 8import type { Destination } from '../animation/office/navigation'; 9import type { WorkshopStoryControls } from '../animation/choreography/useWorkshopStory'; 10import { WORKSHOP_STORIES } from '../animation/performances/workshop'; 11import { ATTENTION_CHAPTERS } from '../animation/performances/attention'; 12import type { useWorkshopAttention } from '../animation/choreography/useWorkshopAttention'; 13import { Icon } from './Icons'; 14import '../styles/computer-conversation.css'; 15 16const KEYS = { 17 design: { detail: 'Make a proper entrance.', hint: 'A blank page. My favourite kind of trouble.' }, 18 rescue: { detail: 'Give it a second life.', hint: 'I have seen things. Your website is probably fixable.' }, 19 search: { detail: 'Less hide. More seek.', hint: 'The internet is big. Let’s leave a better trail.' }, 20} as const; 21 22function KeyDrawing({ intent }: { intent: ConversationIntent }) { 23 return <svg className="computer-key-drawing" viewBox="0 0 56 46" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"> 24 {intent === 'design' ? <><path d="M5 9h39v29H5zM5 16h39M10 12h1m3 0h1m3 0h1M11 22h13v10H11zM29 23h9m-9 5h7" /><path className="key-detail" d="m43 2 2 5 5 2-5 2-2 5-2-5-5-2 5-2z" /></> : intent === 'rescue' ? <><path d="M6 7h36v29H6zM6 14h36M11 10h1m4 0h1M12 25h6l3-7 5 14 3-7h7" /><path className="key-detail" d="m37 33 5-5 9 9-5 5zM40 37l5-5" /></> : <><circle cx="25" cy="20" r="14" /><path d="M11 20h28M25 6c-9 8-9 20 0 28m0-28c9 8 9 20 0 28M15 12h20M15 28h20" /><path className="key-detail" d="m36 31 11 11M40 32l9 9-3 3-9-9" /></>} 25 </svg>; 26} 27 28/** A caption and a physical control deck, not a disclosure panel over the artwork. */ 29export function ComputerConversation({ pointing, story, attention, onPreview, onInteraction, onConversing }: { pointing: Destination | null; story: WorkshopStoryControls; attention: ReturnType<typeof useWorkshopAttention>; onPreview: (intent: ConversationIntent | null) => void; onInteraction: () => void; onConversing?: (active: boolean) => void }) { 30 const { send } = useAnimation(); 31 const [conversation, setConversation] = useState(createConversation); 32 const [announcement, setAnnouncement] = useState(''); 33 const [preview, setPreview] = useState<ConversationIntent | null>(null); 34 const primary = useRef<HTMLAnchorElement>(null); 35 const first = useRef<HTMLAnchorElement>(null); 36 const storyNext = useRef<HTMLButtonElement>(null); 37 const voice = useRef<HTMLDivElement>(null); 38 const revealManualBeat = useRef(false); 39 const focusNext = useRef<'primary' | 'first' | null>(null); 40 const latestSend = useRef(send); latestSend.current = send; 41 const view = conversation.view; 42 const choice = conversation.intent ? INTENTS[conversation.intent] : null; 43 const talking = story.active || view === 'recommendation' || view === 'roast'; 44 45 useEffect(() => { onConversing?.(talking); }, [talking, onConversing]); 46 useEffect(() => { if (story.active) storyNext.current?.focus({ preventScroll: true }); }, [story.active]); 47 useEffect(() => { 48 if (!revealManualBeat.current || !story.active) return; 49 revealManualBeat.current = false; 50 // Only an explicit story command reveals its caption. Automatic beats never move the page. 51 voice.current?.scrollIntoView({ block: 'nearest', behavior: 'instant' }); 52 }, [story.active, story.selection?.index, story.selection?.run]); 53 useEffect(() => { 54 if (focusNext.current === 'primary') primary.current?.focus(); 55 if (focusNext.current === 'first') first.current?.focus(); 56 focusNext.current = null; 57 }, [conversation]); 58 useEffect(() => () => { latestSend.current({ type: 'ATTITUDE', enabled: false }); }, []); 59 60 function act(event: ConversationEvent, metric?: ComputerStage, focus?: 'primary' | 'first') { 61 attention.cancel(); setPreview(null); onPreview(null); 62 const next = transitionConversation(conversation, event); 63 setConversation(next); 64 setAnnouncement(next.announcement); 65 focusNext.current = focus || null; 66 // The visitor owns pause and motion preferences; a choice only changes the pose. 67 send({ type: 'ATTITUDE', enabled: next.attitude }); 68 send({ type: 'PERFORM', action: next.mobile }); 69 send({ type: 'DESKTOP', state: next.desktop }); 70 if (metric) analytics.computerInteraction(metric, next.intent || undefined); 71 onInteraction(); 72 } 73 function chooseIntent(event: MouseEvent<HTMLAnchorElement>, intent: ConversationIntent) { 74 if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return; 75 event.preventDefault(); 76 act({ type: 'INTENT', intent }, 'intent_selected', 'primary'); 77 } 78 function startDemo(source: 'computer' | 'hero') { 79 analytics.computerInteraction('demo_clicked', conversation.intent || undefined); 80 analytics.demoStart(source); 81 send({ type: 'DESKTOP', state: 'demo-invite' }); 82 send({ type: 'PERFORM', action: 'PointRight' }); 83 } 84 function endStory() { 85 story.stop(); 86 act({ type: 'BACK' }, undefined, 'first'); 87 } 88 function previewKey(intent: ConversationIntent | null) { 89 if (talking) return; 90 setPreview(intent); onPreview(intent); 91 } 92 function beginStory(name: 'tour' | 'rescue') { 93 attention.cancel(); setPreview(null); onPreview(null); revealManualBeat.current = true; story.start(name); onInteraction(); 94 } 95 function moveStory(direction: 'previous' | 'next') { 96 revealManualBeat.current = true; story[direction](); 97 } 98 99 const line = story.beat ? story.beat.line : pointing && !talking 100 ? <><span className="computer-pointing">{pointing.label}<span aria-hidden="true"> ↗</span></span>{pointing.tip}</> 101 : view === 'recommendation' && choice ? choice.line 102 : view === 'roast' ? ROASTS[Math.max(0, conversation.roastIndex)] 103 : preview ? KEYS[preview].hint : attention.chapter.line; 104 const lineKey = story.selection ? `${story.selection.story}-${story.selection.index}` : pointing && !talking ? `point-${pointing.object}` : `${view}-${conversation.intent}-${conversation.roastIndex}-${preview}-${attention.chapter.id}`; 105 106 return <div ref={voice} className="computer-voice" data-testid="computer-conversation" data-conversation={view} data-computer-mood={conversation.desktop} data-attitude={conversation.attitude ? 'allowed' : 'off'}> 107 {!talking && <div className="computer-reel"><span><i aria-hidden="true" />{attention.chapter.label}</span><div className="computer-scroll-progress" aria-label={`Workshop scene ${attention.index + 1} of ${ATTENTION_CHAPTERS.length}`}><span>Scroll for his thoughts</span>{ATTENTION_CHAPTERS.map((chapter, index) => <i key={chapter.id} data-current={index === attention.index ? 'true' : undefined} aria-hidden="true" />)}<span aria-hidden="true">↓</span></div></div>} 108 {story.active && <div className="computer-story-heading"><span>{story.beat?.title}</span><span>{(story.selection?.index ?? 0) + 1} / {story.story?.beats.length}</span></div>} 109 <p key={lineKey} className={`computer-line ${view === 'roast' ? 'computer-line-roast' : ''}`} aria-live={story.active ? 'polite' : 'off'} aria-atomic="true">{line}</p> 110 <div className="computer-console"> 111 <div className="computer-console-label" aria-hidden="true"><span>YOUR WEBSITE. YOUR MOVE.</span><span>PERSONALITY INCLUDED ↵</span></div> 112 {story.active ? <div className="computer-story-controls" role="group" aria-label="Workshop story controls"> 113 <button type="button" onClick={() => moveStory('previous')} disabled={story.selection?.index === 0}>Previous</button> 114 {!story.reduced && <button type="button" onClick={story.toggle} aria-pressed={story.holding}>{story.holding ? 'Continue story' : 'Hold that thought'}</button>} 115 <button ref={storyNext} type="button" onClick={story.final ? endStory : () => moveStory('next')}>{story.final ? 'Your turn' : 'Next'}</button> 116 {story.beat?.destination && <Link to={story.beat.destination} className="computer-story-destination" onClick={onInteraction}>{story.beat.destination === '/contact/' ? 'Get my demo' : story.selection?.story === 'rescue' ? 'Tell us about your site' : 'Take a look'}<Icon name="arrow" /></Link>} 117 <button type="button" onClick={endStory}>End story</button> 118 </div> : <div className="computer-choices"> 119 {(view === 'closed' || view === 'choose') && <> 120 {(Object.keys(INTENTS) as ConversationIntent[]).map((intent, index) => <Link key={intent} ref={index === 0 ? first : undefined} className={`computer-intent computer-key computer-key-${intent}`} to={demoHref(intent)} aria-label={INTENTS[intent].label} onPointerEnter={event => { if (event.pointerType !== 'touch') previewKey(intent); }} onPointerLeave={event => { if (document.activeElement !== event.currentTarget) previewKey(null); }} onFocus={() => previewKey(intent)} onBlur={() => previewKey(null)} onClick={event => chooseIntent(event, intent)}> 121 <span className="computer-key-number" aria-hidden="true">0{index + 1}</span><KeyDrawing intent={intent} /><span className="computer-key-copy"><strong>{INTENTS[intent].label}</strong><span>{KEYS[intent].detail}</span></span><span className="computer-key-arrow" aria-hidden="true">↗</span> 122 </Link>)} 123 </>} 124 {view === 'recommendation' && choice && <> 125 <Link ref={primary} className="button button-rust computer-demo" to={demoHref(conversation.intent || 'design')} onClick={() => startDemo('computer')}>Show me what you would build<Icon name="arrow" /></Link> 126 <button type="button" className="computer-roast-link" onClick={() => act({ type: 'ROAST' }, 'attitude_requested', 'primary')}>Give me attitude</button> 127 <button type="button" className="computer-back" onClick={() => act({ type: 'BACK' }, 'back', 'first')}><span aria-hidden="true">← </span>Start again</button> 128 </>} 129 {view === 'roast' && <> 130 <button type="button" className="computer-roast-link" onClick={() => act({ type: 'ROAST' }, 'attitude_requested')}>Another roast</button> 131 {!conversation.attitude 132 ? <button type="button" className="computer-roast-link" onClick={() => act({ type: 'GESTURE' }, 'gesture_requested')}>Show the censored gesture</button> 133 : <><button type="button" className="computer-roast-link" onClick={() => act({ type: 'GESTURE', double: true }, 'gesture_requested')}>Double the attitude</button><button type="button" className="computer-roast-link" onClick={() => act({ type: 'POLITE' })}>Put the hands down</button></>} 134 <Link ref={primary} className="button button-rust computer-demo" to={demoHref(conversation.intent || 'rescue')} onClick={() => startDemo('computer')}>Get my demo<Icon name="arrow" /></Link> 135 <button type="button" className="computer-back" onClick={() => act({ type: 'BACK' }, 'back', 'first')}><span aria-hidden="true">← </span>Start again</button> 136 </>} 137 </div>} 138 {!story.active && (view === 'closed' || view === 'choose') && <div className="computer-story-options" aria-label="Explore with the computer"> 139 <button type="button" onClick={() => beginStory('tour')}><Icon name="play" />{WORKSHOP_STORIES.tour.label}</button> 140 <button type="button" onClick={() => beginStory('rescue')}><Icon name="spark" />{WORKSHOP_STORIES.rescue.label}</button> 141 <button type="button" className="computer-roast-link" onClick={() => act({ type: 'ROAST' }, 'attitude_requested', 'primary')}>Roast my website</button> 142 <Link className="computer-return" to="/contact/" onClick={() => startDemo('hero')}>Get my demo<span aria-hidden="true">↵</span></Link> 143 </div>} 144 </div> 145 <span className="computer-announcement" role="status" aria-live="polite" aria-atomic="true">{announcement}</span> 146 </div>; 147} 148