Janady13/thatdeveloperguy-website / tools/rive-plan.ts

1import type { RoomManifest } from './import-rooms.ts'; 2import type { RoomId } from './kits.ts'; 3 4export const ARTBOARD_NAMES: Record<RoomId, string> = { lobby: 'Lobby', 'it-services': 'ITServices', government: 'GovernmentSolutions', cybersecurity: 'Cybersecurity' }; 5 6export type Prop = 'scaleX' | 'scaleY' | 'x' | 'y' | 'opacity' | 'rotation'; 7export interface PlanKey { target: string; property: Prop; frame: number; value: number; interpolation: 'cubic' | 'linear' | 'hold' } 8export interface PlanAnimation { name: string; durationFrames: number; loop: 'oneShot' | 'loop' | 'pingPong'; keys: PlanKey[] } 9export interface PlanLayer { name: string; states: Array<{ name: string; animation?: string }>; transitions: Array<{ from: string; to: string; when?: { property: string; equals?: string | boolean }; durationMs?: number }> } 10export interface PlanTarget { id: string; kind: string; amount: number; pivot: [number, number] | null } 11export interface PlanDoor { id: string; leafId: string; hinge: [number, number]; accessLightId: string | null; hotspotId: string | null; trigger: string } 12export interface PlanHotspot { id: string; label: string; hit: { x: number; y: number; width: number; height: number }; pageId: string; section: string; trigger: string | null; targets: string[] } 13export interface RoomPlan { 14 room: RoomId; artboard: string; width: number; height: number; 15 scene: { file: 'scene.svg'; nodeName: 'scene' }; 16 targets: PlanTarget[]; doors: PlanDoor[]; hotspots: PlanHotspot[]; floorAnchor: [number, number]; 17 enum: { name: string; values: string[] }; 18 viewModel: { name: string; properties: Array<{ name: string; type: 'enum' | 'trigger' | 'boolean' }> }; 19 animations: PlanAnimation[]; layers: PlanLayer[]; 20} 21 22const PIVOTED = new Set(['door', 'glass', 'rotate', 'laptop']); 23const cubic = 'cubic' as const, linear = 'linear' as const, hold = 'hold' as const; 24const stem = (id: string) => id.split('__')[1] ?? id; 25 26/** Which room objects a hotspot wakes up, by name family (the package's ids). Doors are listed by their leaf family and open on click. */ 27const HOTSPOT_TARGETS: Record<RoomId, Record<string, RegExp>> = { 28 lobby: { 'door-IT': /^Door_IT_AccessLight|^DoorPlant_IT_/, 'door-Gov': /^Door_Gov_AccessLight|^DoorPlant_Gov_/, 'door-Cyber': /^Door_Cyber_AccessLight|^DoorPlant_Cyber_/, reception: /^ReceptionMonitor|^ReceptionFiles|^ReceptionMug|^ReceptionPlant_|^Camera_/, lounge: /^LoungePlant_|^ForegroundPalm_/ }, 29 'it-services': { status: /^StatusIndicator|^RearMonitor|^RearChair/, deployment: /^DeploymentDoor/, toolcart: /^ToolCart_/, workstations: /^WorkMonitor|^WorkChair|^WorkstationStorage|^RepairLaptop|^WorkMug|^DeskDocuments/, racks: /^IT_Rack_/ }, 30 government: { briefing: /^BriefingDoor|^GovRearPlant/, display: /^BriefingDisplay|^GovOfficeMonitor|^GovReference/, files: /^ContractFiles_|^RearStorage_|^ForegroundFiles_/, table: /^Conference|^DeskGlobe|^GovMug/ }, 31 cybersecurity: { network: /^NetworkNode|^Console\d_Monitor|^CyberStrip/, 'secure-door': /^SecureDoor|^CyberRack_|^CyberCamera/ }, 32}; 33 34/** Active pose per kind, as the reviewer projects it (preview/motion.js), expressed as Rive keys on the target or its pivot group. */ 35function activeKeys(t: PlanTarget, frame0: number, frame1: number, phase = 1): PlanKey[] { 36 const a = t.amount, tgt = PIVOTED.has(t.kind) ? `pivot:${t.id}` : t.id; 37 switch (t.kind) { 38 case 'door': return [{ target: tgt, property: 'scaleX', frame: frame0, value: 100, interpolation: cubic }, { target: tgt, property: 'scaleX', frame: frame1, value: Math.round(100 * (1 - a * phase)), interpolation: cubic }]; 39 case 'glass': return [{ target: tgt, property: 'scaleX', frame: frame0, value: 100, interpolation: cubic }, { target: tgt, property: 'scaleX', frame: frame1, value: Math.round(100 * (1 - a * phase)), interpolation: cubic }]; 40 case 'laptop': return [{ target: tgt, property: 'scaleY', frame: frame0, value: 100, interpolation: cubic }, { target: tgt, property: 'scaleY', frame: frame1, value: Math.round(100 * (1 - a * phase)), interpolation: cubic }]; 41 case 'rotate': return [{ target: tgt, property: 'rotation', frame: frame0, value: 0, interpolation: cubic }, { target: tgt, property: 'rotation', frame: frame1, value: a * phase, interpolation: cubic }]; 42 case 'drawer': return [{ target: tgt, property: 'x', frame: frame0, value: 0, interpolation: cubic }, { target: tgt, property: 'x', frame: frame1, value: -a * 0.75 * phase, interpolation: cubic }, { target: tgt, property: 'y', frame: frame0, value: 0, interpolation: cubic }, { target: tgt, property: 'y', frame: frame1, value: a * 0.55 * phase, interpolation: cubic }]; 43 case 'translateY': return [{ target: tgt, property: 'y', frame: frame0, value: 0, interpolation: cubic }, { target: tgt, property: 'y', frame: frame1, value: a * phase, interpolation: cubic }]; 44 case 'translateX': return [{ target: tgt, property: 'x', frame: frame0, value: 0, interpolation: cubic }, { target: tgt, property: 'x', frame: frame1, value: a * phase, interpolation: cubic }]; 45 case 'steam': return [{ target: tgt, property: 'y', frame: frame0, value: 0, interpolation: linear }, { target: tgt, property: 'y', frame: frame1, value: -a * phase, interpolation: linear }, { target: tgt, property: 'opacity', frame: frame0, value: 100, interpolation: linear }, { target: tgt, property: 'opacity', frame: frame1, value: 35, interpolation: linear }]; 46 case 'opacity': return [{ target: tgt, property: 'opacity', frame: frame0, value: 100, interpolation: cubic }, { target: tgt, property: 'opacity', frame: frame1, value: Math.round(100 * (1 - a * phase)), interpolation: cubic }]; 47 default: return []; 48 } 49} 50/** Rest pose keys at one frame (used by the Rest timeline so focus states blend back). */ 51function restKeys(t: PlanTarget, frame: number): PlanKey[] { 52 const tgt = PIVOTED.has(t.kind) ? `pivot:${t.id}` : t.id; 53 switch (t.kind) { 54 case 'door': case 'glass': return [{ target: tgt, property: 'scaleX', frame, value: 100, interpolation: cubic }]; 55 case 'laptop': return [{ target: tgt, property: 'scaleY', frame, value: 100, interpolation: cubic }]; 56 case 'rotate': return [{ target: tgt, property: 'rotation', frame, value: 0, interpolation: cubic }]; 57 case 'drawer': return [{ target: tgt, property: 'x', frame, value: 0, interpolation: cubic }, { target: tgt, property: 'y', frame, value: 0, interpolation: cubic }]; 58 case 'translateY': return [{ target: tgt, property: 'y', frame, value: 0, interpolation: cubic }]; 59 case 'translateX': return [{ target: tgt, property: 'x', frame, value: 0, interpolation: cubic }]; 60 case 'steam': return [{ target: tgt, property: 'y', frame, value: 0, interpolation: linear }, { target: tgt, property: 'opacity', frame, value: 100, interpolation: linear }]; 61 case 'opacity': return [{ target: tgt, property: 'opacity', frame, value: 100, interpolation: cubic }]; 62 default: return []; 63 } 64} 65 66/** 67 * The complete motion plan for a v3 room: every motion target animated (ambient on three desynchronised layers), every hotspot 68 * waking its objects (Focus states blending back to Rest), every door opening on its trigger. Targets keep the package's ids and amounts. 69 */ 70export function planRoom(manifest: RoomManifest): RoomPlan { 71 const targets: PlanTarget[] = manifest.ambient.map(a => ({ id: a.id, kind: a.kind, amount: a.amount, pivot: PIVOTED.has(a.kind) ? a.pivot : null })); 72 for (const d of manifest.doors) targets.push({ id: d.leafId, kind: 'door', amount: 0.65, pivot: d.pivot }); 73 const byId = new Map(targets.map(t => [t.id, t])); 74 const doors: PlanDoor[] = manifest.doors.map(d => ({ id: d.id, leafId: d.leafId, hinge: d.pivot, accessLightId: d.accessLightId, hotspotId: d.hotspotId, trigger: `open${d.id}` })); 75 const families = HOTSPOT_TARGETS[manifest.room] ?? {}; 76 const hotspots: PlanHotspot[] = manifest.hotspots.map(h => { 77 const door = doors.find(d => d.hotspotId === h.id); 78 const pattern = families[h.id]; 79 const matched = pattern ? targets.filter(t => pattern.test(stem(t.id)) && t.kind !== 'door').map(t => t.id) : []; 80 return { id: h.id, label: h.label, hit: { x: h.rect[0], y: h.rect[1], width: h.rect[2], height: h.rect[3] }, pageId: h.pageId, section: h.section, trigger: door?.trigger ?? null, targets: door ? [...matched, door.leafId] : matched }; 81 }); 82 83 // Ambient: three layers with different periods; rotate/opacity/steam/translate targets dealt out round-robin, alternating sign. 84 const ambientTargets = targets.filter(t => ['rotate', 'opacity', 'steam', 'translateY'].includes(t.kind) && !doors.some(d => d.accessLightId === t.id)); 85 const periods = [240, 300, 372]; 86 const animations: PlanAnimation[] = periods.map((period, i) => { 87 const keys: PlanKey[] = []; 88 ambientTargets.filter((_, n) => n % 3 === i).forEach((t, n) => { 89 const sign = n % 2 === 0 ? 1 : -1; 90 if (t.kind === 'rotate') { keys.push({ target: `pivot:${t.id}`, property: 'rotation', frame: 0, value: -t.amount * sign, interpolation: cubic }, { target: `pivot:${t.id}`, property: 'rotation', frame: period, value: t.amount * sign, interpolation: cubic }); } 91 else if (t.kind === 'opacity') { const low = Math.round(100 * (1 - t.amount)); keys.push({ target: t.id, property: 'opacity', frame: 0, value: sign > 0 ? 100 : low, interpolation: cubic }, { target: t.id, property: 'opacity', frame: period, value: sign > 0 ? low : 100, interpolation: cubic }); } 92 else if (t.kind === 'steam') { keys.push({ target: t.id, property: 'y', frame: 0, value: 0, interpolation: linear }, { target: t.id, property: 'y', frame: period, value: -t.amount * 2, interpolation: linear }, { target: t.id, property: 'opacity', frame: 0, value: 100, interpolation: linear }, { target: t.id, property: 'opacity', frame: period, value: 20, interpolation: linear }); } 93 else if (t.kind === 'translateY') { keys.push({ target: t.id, property: 'y', frame: 0, value: 0, interpolation: cubic }, { target: t.id, property: 'y', frame: period, value: t.amount * 0.5 * sign, interpolation: cubic }); } 94 }); 95 return { name: `Ambient_${'ABC'[i]}`, durationFrames: period, loop: 'pingPong' as const, keys }; 96 }); 97 // Access lights breathe on their own layer so a focus can override them. 98 const lightKeys: PlanKey[] = doors.flatMap(d => d.accessLightId ? [{ target: d.accessLightId, property: 'opacity' as Prop, frame: 0, value: 55, interpolation: cubic }, { target: d.accessLightId, property: 'opacity' as Prop, frame: 150, value: 100, interpolation: cubic }] : []); 99 if (lightKeys.length) animations.push({ name: 'Ambient_Lights', durationFrames: 150, loop: 'pingPong', keys: lightKeys }); 100 // Rest: every interactive target at rest, so leaving a hotspot blends everything back. 101 const interactiveIds = new Set(hotspots.flatMap(h => h.targets)); 102 animations.push({ name: 'Rest', durationFrames: 12, loop: 'oneShot', keys: [...interactiveIds].flatMap(id => { const t = byId.get(id); return t && t.kind !== 'door' ? restKeys(t, 0) : t ? [{ target: `pivot:${t.id}`, property: 'scaleX' as Prop, frame: 0, value: 100, interpolation: cubic }] : []; }) }); 103 // Focus per hotspot: its objects to their active pose (doors only ajar on hover; drawers stagger). 104 for (const h of hotspots) { 105 const keys: PlanKey[] = []; 106 let drawerIndex = 0; 107 for (const id of h.targets) { 108 const t = byId.get(id); if (!t) continue; 109 if (t.kind === 'door') { keys.push(...activeKeys(t, 0, 14, 0.18)); continue; } 110 if (t.kind === 'drawer') { const start = Math.min(drawerIndex++ * 3, 9); keys.push(...activeKeys(t, start, start + 12)); continue; } 111 if (t.kind === 'rotate') { keys.push(...activeKeys(t, 0, 14, 1.5)); continue; } 112 if (t.kind === 'opacity' && doors.some(d => d.accessLightId === id)) { keys.push({ target: id, property: 'opacity', frame: 0, value: 60, interpolation: cubic }, { target: id, property: 'opacity', frame: 14, value: 100, interpolation: cubic }, { target: id, property: 'scaleX', frame: 0, value: 100, interpolation: cubic }, { target: id, property: 'scaleX', frame: 14, value: 125, interpolation: cubic }, { target: id, property: 'scaleY', frame: 0, value: 100, interpolation: cubic }, { target: id, property: 'scaleY', frame: 14, value: 125, interpolation: cubic }); continue; } 113 keys.push(...activeKeys(t, 0, 14)); 114 } 115 if (keys.length) animations.push({ name: `Focus_${h.id}`, durationFrames: 24, loop: 'oneShot', keys }); 116 } 117 for (const d of doors) animations.push({ name: `DoorOpen_${d.id}`, durationFrames: 26, loop: 'oneShot', keys: [{ target: `pivot:${d.leafId}`, property: 'scaleX', frame: 0, value: 100, interpolation: cubic }, { target: `pivot:${d.leafId}`, property: 'scaleX', frame: 26, value: 35, interpolation: cubic }, ...(d.accessLightId ? [{ target: d.accessLightId, property: 'opacity' as Prop, frame: 0, value: 100, interpolation: hold }] : [])] }); 118 119 const focusStates = animations.filter(a => a.name.startsWith('Focus_')).map(a => a.name); 120 const layers: PlanLayer[] = [ 121 ...animations.filter(a => a.name.startsWith('Ambient')).map(a => ({ name: a.name, states: [{ name: 'Still' }, { name: 'Moving', animation: a.name }], transitions: [ 122 { from: '{Entry State}', to: 'Still' }, { from: 'Still', to: 'Moving', when: { property: 'reducedMotion', equals: false }, durationMs: 400 }, { from: 'Moving', to: 'Still', when: { property: 'reducedMotion', equals: true }, durationMs: 400 }, 123 ] })), 124 ...doors.map(d => ({ name: `Door_${d.id}`, states: [{ name: 'Closed' }, { name: 'Open', animation: `DoorOpen_${d.id}` }], transitions: [{ from: '{Entry State}', to: 'Closed' }, { from: 'Closed', to: 'Open', when: { property: d.trigger } }] })), 125 { name: 'Focus', states: [{ name: 'None', animation: 'Rest' }, ...focusStates.map(name => ({ name, animation: name }))], transitions: [ 126 { from: '{Entry State}', to: 'None' }, 127 ...focusStates.map(name => ({ from: '{Any State}', to: name, when: { property: 'focus', equals: name.replace('Focus_', '') }, durationMs: 220 })), 128 { from: '{Any State}', to: 'None', when: { property: 'focus', equals: 'none' }, durationMs: 320 }, 129 ] }, 130 ]; 131 const artboard = ARTBOARD_NAMES[manifest.room]; 132 return { 133 room: manifest.room, artboard, width: manifest.canvas.width, height: manifest.canvas.height, scene: { file: 'scene.svg', nodeName: 'scene' }, 134 targets, doors, hotspots, floorAnchor: manifest.floorAnchor, 135 enum: { name: `${artboard}Focus`, values: ['none', ...hotspots.map(h => h.id)] }, 136 viewModel: { name: `${artboard}Room`, properties: [{ name: 'focus', type: 'enum' }, ...doors.map(d => ({ name: d.trigger, type: 'trigger' as const })), { name: 'reducedMotion', type: 'boolean' }] }, 137 animations, layers, 138 }; 139} 140