// Cinema Panel — Director's toolkit for cinematic camera tools // Toggled via "cinema" admin command → localPlayer.state.cinemaOpen // Sized for future timeline/sequence editor below the node list // ═══════════════════════════════════════════════════ // EFFECT TYPE UI METADATA // ═══════════════════════════════════════════════════ var FX_UI = { screenShake: { label: 'Shake', color: 'rgba(255,80,80,0.7)', bg: 'rgba(255,80,80,0.15)', instant: true }, screenFlash: { label: 'Flash', color: 'rgba(255,220,80,0.7)', bg: 'rgba(255,220,80,0.15)', instant: true }, playSound: { label: 'Sound', color: 'rgba(80,255,180,0.7)', bg: 'rgba(80,255,180,0.15)', instant: true }, announce: { label: 'Announce', color: 'rgba(200,140,255,0.7)', bg: 'rgba(200,140,255,0.15)', instant: true }, toast: { label: 'Toast', color: 'rgba(180,180,255,0.7)', bg: 'rgba(180,180,255,0.15)', instant: true }, fade: { label: 'Fade', color: 'rgba(20,20,40,0.8)', bg: 'rgba(20,20,40,0.15)', instant: false }, turbulence: { label: 'Turbulence',color: 'rgba(200,160,80,0.6)', bg: 'rgba(200,160,80,0.1)', instant: false }, colorWash: { label: 'Color Wash',color: 'rgba(120,80,200,0.7)', bg: 'rgba(120,80,200,0.12)', instant: false }, letterbox: { label: 'Letterbox', color: 'rgba(0,200,255,0.5)', bg: 'rgba(0,200,255,0.08)', instant: false }, vignette: { label: 'Vignette', color: 'rgba(100,0,200,0.5)', bg: 'rgba(100,0,200,0.08)', instant: false }, slowMo: { label: 'Slow Mo', color: 'rgba(255,120,0,0.5)', bg: 'rgba(255,120,0,0.08)', instant: false }, musicShift: { label: 'Music', color: 'rgba(0,255,200,0.5)', bg: 'rgba(0,255,200,0.08)', instant: false }, effect: { label: 'Filter', color: 'rgba(255,200,0,0.5)', bg: 'rgba(255,200,0,0.08)', instant: false }, cinemaText: { label: 'Text', color: 'rgba(255,200,100,0.7)', bg: 'rgba(255,200,100,0.12)', instant: false }, event: { label: 'Event', color: 'rgba(255,255,255,0.6)', bg: 'rgba(255,255,255,0.08)', instant: true }, }; var FX_TYPE_KEYS = Object.keys(FX_UI); // ═══════════════════════════════════════════════════ // EFFECTS TRACK BUILDER // ═══════════════════════════════════════════════════ function buildEffectsTrack(localPlayer, totalDuration, pbTime) { var effects = localPlayer.state.cinemaEffects || []; var tq = '\u0027'; // Init window state if (window._cinemaSelFx === undefined) window._cinemaSelFx = null; if (window._cinemaFxMenu === undefined) window._cinemaFxMenu = false; // Toggle handler for add menu window._cinemaToggleFxMenu = function() { window._cinemaFxMenu = !window._cinemaFxMenu; }; window._cinemaSelectFx = function(id) { window._cinemaSelFx = (window._cinemaSelFx === id) ? null : id; }; var selFxId = window._cinemaSelFx; // Validate selection var selFx = null; for (var vi = 0; vi < effects.length; vi++) { if (effects[vi].id === selFxId) { selFx = effects[vi]; break; } } if (!selFx) { window._cinemaSelFx = null; selFxId = null; } // ── Add Effect Menu ── var addMenuHtml = ''; if (window._cinemaFxMenu) { var menuItems = []; // Instants first, then sustained, with a separator var instantKeys = FX_TYPE_KEYS.filter(function(k) { return FX_UI[k].instant; }); var sustainedKeys = FX_TYPE_KEYS.filter(function(k) { return !FX_UI[k].instant; }); for (var ik = 0; ik < instantKeys.length; ik++) { var k = instantKeys[ik]; var ui = FX_UI[k]; menuItems.push( '' ); } menuItems.push('

'); for (var sk = 0; sk < sustainedKeys.length; sk++) { var k2 = sustainedKeys[sk]; var ui2 = FX_UI[k2]; menuItems.push( '' ); } addMenuHtml = '

' + '

' + menuItems.join('') + '

' + '

'; } // ── FX Track Visual ── var trackItems = ''; if (effects.length === 0 && totalDuration <= 0) { trackItems = '

' + 'NO EFFECTS' + '

'; } else if (totalDuration > 0) { // Lane stacking algorithm var lanes = []; // each lane is an array of { endTime } var fxLanes = []; // parallel array: which lane each fx got for (var fi = 0; fi < effects.length; fi++) { var fx = effects[fi]; var fxDef = FX_UI[fx.type] || { label: '?', color: 'rgba(128,128,128,0.5)', bg: 'rgba(128,128,128,0.1)', instant: true }; var fxStart = fx.time || 0; var fxHoldExtra = 0; var fxOutExtra = 0; if (!fxDef.instant && (fx.type === 'fade' || fx.type === 'colorWash')) { var fxp = fx.params || {}; fxHoldExtra = fxp.hold || 0; fxOutExtra = fxp.fadeOut ? (fxp.fadeOutDuration || fx.duration || 2) : 0; } var fxInExtra = 0; if (!fxDef.instant && fx.type === 'cinemaText') { var fxpc = fx.params || {}; fxInExtra = (fxpc.fadeIn !== false) ? (fxpc.fadeInDuration || 1) : 0; fxOutExtra = fxpc.fadeOut ? (fxpc.fadeOutDuration || 1) : 0; } var fxEnd = fxDef.instant ? (fxStart + totalDuration * 0.02) : (fxStart + fxInExtra + (fx.duration || 2) + fxHoldExtra + fxOutExtra); // Find first lane that doesn't overlap var placed = false; for (var li = 0; li < lanes.length; li++) { var fits = true; for (var ci = 0; ci < lanes[li].length; ci++) { if (!(fxEnd <= lanes[li][ci].start || fxStart >= lanes[li][ci].end)) { fits = false; break; } } if (fits) { lanes[li].push({ start: fxStart, end: fxEnd }); fxLanes.push(li); placed = true; break; } } if (!placed) { lanes.push([{ start: fxStart, end: fxEnd }]); fxLanes.push(lanes.length - 1); } } var laneCount = Math.max(lanes.length, 1); var laneH = 20; // px per lane var trackH = laneCount * laneH; var items = []; for (var fi2 = 0; fi2 < effects.length; fi2++) { var fx2 = effects[fi2]; var def2 = FX_UI[fx2.type] || { label: '?', color: 'rgba(128,128,128,0.5)', bg: 'rgba(128,128,128,0.1)', instant: true }; var lane = fxLanes[fi2]; var leftPct = totalDuration > 0 ? ((fx2.time || 0) / totalDuration * 100) : 0; var topPx = lane * laneH; var isSel = fx2.id === selFxId; var selBorder = isSel ? 'border: 1px solid ' + def2.color + '; box-shadow: 0 0 8px ' + def2.bg + ';' : 'border: 1px solid transparent;'; if (def2.instant) { // Instant: small marker var markerTitle = def2.label + ' @ ' + (fx2.time || 0).toFixed(1) + 's'; if (fx2.type === 'event' && fx2.params && fx2.params.note) { markerTitle = (fx2.params.note.length > 40 ? fx2.params.note.substring(0, 40) + '...' : fx2.params.note) + ' @ ' + (fx2.time || 0).toFixed(1) + 's'; } var markerShape = fx2.type === 'event' ? 'width: 8px; height: ' + (laneH - 2) + 'px; transform: translateX(-4px); background: ' + def2.color + '; clip-path: polygon(50% 0%, 100% 25%, 100% 100%, 0% 100%, 0% 25%);' : 'width: 6px; height: ' + (laneH - 2) + 'px; transform: translateX(-3px); background: ' + def2.color + ';'; items.push( '

' + '

' ); } else { // Sustained: colored block — visual sections differ by type // fade/colorWash: [ramp in (duration)] [hold] [ramp out] // cinemaText: [fade in] [hold (duration)] [fade out] var rampInDur, holdDur, rampOutDur; var fx2p = fx2.params || {}; if (fx2.type === 'cinemaText') { rampInDur = (fx2p.fadeIn !== false) ? (fx2p.fadeInDuration || 1) : 0; holdDur = fx2.duration || 2; rampOutDur = fx2p.fadeOut ? (fx2p.fadeOutDuration || 1) : 0; } else { rampInDur = fx2.duration || 2; holdDur = (fx2.type === 'fade' || fx2.type === 'colorWash') ? (fx2p.hold || 0) : 0; rampOutDur = (fx2.type === 'fade' || fx2.type === 'colorWash') && fx2p.fadeOut ? (fx2p.fadeOutDuration || rampInDur) : 0; } var totalFxTime = rampInDur + holdDur + rampOutDur; var widthPct = totalDuration > 0 ? (totalFxTime / totalDuration * 100) : 5; var blockH = laneH - 4; // Calculate section percentages var inPct = totalFxTime > 0 ? (rampInDur / totalFxTime * 100) : 0; var holdPctVal = totalFxTime > 0 ? (holdDur / totalFxTime * 100) : 100; var outPct = totalFxTime > 0 ? (rampOutDur / totalFxTime * 100) : 0; // Build inner sections var innerHtml = ''; if (fx2.type === 'cinemaText') { // cinemaText: [fade-in stripe] [hold body with label] [fade-out stripe] if (rampInDur > 0) { innerHtml += '

' + '

'; } innerHtml += '

' + '' + def2.label + '' + '

'; if (rampOutDur > 0) { innerHtml += '

' + '

'; } } else { // fade/colorWash/others: [ramp-in body with label] [hold stripe] [ramp-out stripe] innerHtml = '

' + '' + def2.label + '' + '

'; if (holdDur > 0) { innerHtml += '

' + '

'; } if (rampOutDur > 0) { innerHtml += '

' + '

'; } } // Tooltip var tipParts = [def2.label + ' @ ' + (fx2.time || 0).toFixed(1) + 's']; if (fx2.type === 'cinemaText') { if (rampInDur > 0) tipParts.push('In: ' + rampInDur.toFixed(1) + 's'); tipParts.push('Hold: ' + holdDur.toFixed(1) + 's'); if (rampOutDur > 0) tipParts.push('Out: ' + rampOutDur.toFixed(1) + 's'); } else { tipParts.push('In: ' + rampInDur.toFixed(1) + 's'); if (holdDur > 0) tipParts.push('Hold: ' + holdDur.toFixed(1) + 's'); if (rampOutDur > 0) tipParts.push('Out: ' + rampOutDur.toFixed(1) + 's'); } tipParts.push('Total: ' + totalFxTime.toFixed(1) + 's'); items.push( '

' + innerHtml + '

' ); } } // Playhead var phPct = totalDuration > 0 ? (pbTime / totalDuration * 100) : 0; items.push( '

' ); trackItems = '

' + items.join('') + '

'; } // ── Selected Effect Controls ── var fxControlsHtml = ''; if (selFx) { var sDef = FX_UI[selFx.type] || { label: '?', color: 'rgba(128,128,128,0.5)', instant: true }; var sParams = selFx.params || {}; var ctrlInputSt = 'background: rgba(0,0,0,0.5); border: 1px solid rgba(0,200,255,0.15); color: rgba(0,200,255,0.9); text-align: center; width: 64px;'; // Time control (all effects) var timeCtrl = '

' + 'TIME' + '' + 's' + '

'; // Duration control (sustained only) var durCtrl = ''; if (!sDef.instant) { durCtrl = '

' + 'DUR' + '' + 's' + '

'; } // Type-specific param controls var paramCtrls = ''; switch (selFx.type) { case 'screenShake': paramCtrls = '

' + 'INTENSITY' + '' + '

' + '

' + 'LENGTH' + '' + '

'; break; case 'screenFlash': paramCtrls = '

' + 'LENGTH' + '' + '

'; break; case 'playSound': var sfxClipName = (sParams.clip || ''); var sfxShort = sfxClipName.replace('cdn/', '').replace('.mp3', '').replace(/^sfx-/, '').replace(/-/g, ' '); paramCtrls = '

' + 'CLIP' + '

' + (sfxShort || 'none') + '

' + '' + '

' + '

' + 'VOLUME' + '' + '

'; break; case 'announce': paramCtrls = '

' + 'TEXT' + '' + '

' + '

' + 'SUBTITLE' + '' + '

'; break; case 'toast': paramCtrls = '

' + 'MESSAGE' + '' + '

'; break; case 'fade': var hasFadeIn = (sParams.fadeIn !== false); var hasFadeOut = !!sParams.fadeOut; var fadeOutDur = sParams.fadeOutDuration || (selFx.duration || 2); var onStyle = 'background: rgba(0,200,255,0.15); color: rgba(0,200,255,0.9); border: 1px solid rgba(0,200,255,0.3);'; var offStyle = 'background: rgba(0,0,0,0.3); color: rgba(0,200,255,0.4); border: 1px solid rgba(0,200,255,0.1);'; paramCtrls = '

' + 'PHASES' + '' + '' + '

' + '

' + 'HOLD' + '' + 'sec at peak' + '

' + (hasFadeOut ? '

' + 'OUT DUR' + '' + 'sec ramp out' + '

' : ''); break; case 'turbulence': var turbIsInf = !!sParams.infinite; var turbInfOn = 'background: rgba(200,160,80,0.2); color: rgba(255,200,100,0.9); border: 1px solid rgba(200,160,80,0.4);'; var turbInfOff = 'background: rgba(0,0,0,0.3); color: rgba(200,160,80,0.4); border: 1px solid rgba(200,160,80,0.15);'; paramCtrls = '

' + 'INTENSITY' + '' + '

' + '

' + 'SPEED' + '' + '

' + '

' + '' + '' + (turbIsInf ? 'active for full playback' : 'ends at block') + '' + '

'; break; case 'colorWash': var cwHasFadeIn = (sParams.fadeIn !== false); var cwHasFadeOut = !!sParams.fadeOut; var cwIsInfinite = !!sParams.infinite; var cwFadeOutDur = sParams.fadeOutDuration || (selFx.duration || 2); var cwOnStyle = 'background: rgba(120,80,200,0.2); color: rgba(180,140,255,0.9); border: 1px solid rgba(120,80,200,0.4);'; var cwOffStyle = 'background: rgba(0,0,0,0.3); color: rgba(120,80,200,0.4); border: 1px solid rgba(120,80,200,0.15);'; paramCtrls = '

' + 'PHASES' + '' + '' + '' + '

' + '

' + 'COLOR' + '

' + '' + '

' + '

' + 'OPACITY' + '' + '

' + '

' + 'HOLD' + '' + 'sec at peak' + '

' + (!cwIsInfinite && cwHasFadeOut ? '

' + 'OUT DUR' + '' + 'sec ramp out' + '

' : '') + (cwIsInfinite ? '

' + '\u221E holds at peak for entire playback' + '

' : ''); break; case 'letterbox': paramCtrls = '

' + 'INTENSITY' + '' + '

'; break; case 'vignette': paramCtrls = '

' + 'INTENSITY' + '' + '

'; break; case 'slowMo': paramCtrls = '

' + 'SCALE' + '' + '

'; break; case 'musicShift': var musicLoop = sParams.loop !== false; var mClipName = (sParams.clip || ''); var mShort = mClipName.replace('cdn/', '').replace('.mp3', '').replace(/^music-instrumental-/, '').replace(/^music-vocals-/, '').replace(/^music-/, '').replace(/-/g, ' '); paramCtrls = '

' + 'CLIP' + '

' + (mShort || 'none') + '

' + '' + '

' + '

' + 'VOLUME' + '' + '

' + '

' + 'LOOP' + '' + '

'; break; case 'effect': var filterOpts = ['blur', 'pixelate', 'chromatic', 'vhs', 'sepia', 'invert', 'grayscale']; var filterSelect = []; for (var fo = 0; fo < filterOpts.length; fo++) { filterSelect.push(''); } paramCtrls = '

' + 'FILTER' + '' + '

' + '

' + 'INTENSITY' + '' + '

'; break; case 'cinemaText': var ctHasFadeIn = (sParams.fadeIn !== false); var ctHasFadeOut = !!sParams.fadeOut; var ctFadeInDur = sParams.fadeInDuration || 1; var ctFadeOutDur = sParams.fadeOutDuration || 1; var ctOnStyle = 'background: rgba(255,200,100,0.2); color: rgba(255,220,140,0.9); border: 1px solid rgba(255,200,100,0.4);'; var ctOffStyle = 'background: rgba(0,0,0,0.3); color: rgba(255,200,100,0.4); border: 1px solid rgba(255,200,100,0.15);'; var ctFontGroups = [ { label: 'Bundled', fonts: ['Geist Pixel Square', 'Geist Pixel Grid', 'Geist Pixel Circle', 'Geist Pixel Triangle', 'Geist Pixel Line', 'Jersey 10'] }, { label: 'Serif', fonts: ['Georgia', 'Times New Roman', 'Palatino Linotype', 'Book Antiqua', 'Garamond', 'Baskerville'] }, { label: 'Sans-Serif', fonts: ['Arial', 'Helvetica', 'Verdana', 'Tahoma', 'Trebuchet MS', 'Century Gothic', 'Gill Sans', 'Franklin Gothic Medium', 'Segoe UI', 'Lucida Grande', 'Futura', 'Optima', 'Candara', 'Calibri'] }, { label: 'Monospace', fonts: ['Courier New', 'Consolas', 'Lucida Console', 'Monaco', 'Andale Mono', 'SF Mono', 'Menlo'] }, { label: 'Display', fonts: ['Impact', 'Copperplate', 'Rockwell', 'Didot', 'Bodoni MT', 'Big Caslon', 'Perpetua'] }, { label: 'Handwritten / Cursive', fonts: ['Brush Script MT', 'Lucida Handwriting', 'Segoe Script', 'Bradley Hand', 'Snell Roundhand', 'Apple Chancery', 'Marker Felt', 'Comic Sans MS', 'Zapfino', 'Satisfy', 'Dancing Script', 'Pacifico'] }, { label: 'Fantasy / Decorative', fonts: ['Papyrus', 'Luminari', 'Herculanum', 'Jazz LET', 'Trattatello', 'Party LET', 'Chalkduster'] } ]; var ctSelectedFont = sParams.font || 'Geist Pixel Square'; var ctFontSelect = []; for (var cgi = 0; cgi < ctFontGroups.length; cgi++) { var grp = ctFontGroups[cgi]; ctFontSelect.push(''); for (var cfi = 0; cfi < grp.fonts.length; cfi++) { ctFontSelect.push(''); } ctFontSelect.push(''); } paramCtrls = '

' + 'TEXT' + '' + '

' + '

' + 'FONT' + '' + '

' + '

' + 'SIZE' + '' + 'px' + '

' + '

' + 'COLOR' + '

' + '' + '

' + '

' + 'POS X' + '' + '%' + '

' + '

' + 'POS Y' + '' + '%' + '

' + '

' + 'PHASES' + '' + '' + '

' + (ctHasFadeIn ? '

' + 'IN DUR' + '' + 'sec ramp in' + '

' : '') + (ctHasFadeOut ? '

' + 'OUT DUR' + '' + 'sec ramp out' + '

' : ''); break; case 'event': paramCtrls = '

' + 'DIRECTOR NOTE' + '' + '

'; break; } fxControlsHtml = '

' + '

' + // Header '

' + '

' + '' + sDef.label.toUpperCase() + '' + '' + (sDef.instant ? 'INSTANT' : 'SUSTAINED') + '' + '' + '

' + // Controls '

' + timeCtrl + durCtrl + '

' + (paramCtrls ? '

' + paramCtrls + '

' : '') + '

' + '

'; } // ── Full FX Section ── return ( '

' + // FX Header bar '

' + 'FX' + '' + effects.length + '' + // Add button (relative container for dropdown) '

' + addMenuHtml + '' + '

' + // Clear all (effects.length > 0 ? '' : '') + '

' + // FX Track '

' + '

' + trackItems + '

' + '

' + // Selected effect controls fxControlsHtml + '

' ); } module.exports = function cinemaPanel(localPlayer) { const open = localPlayer.state.cinemaOpen ?? false; if (!open) return ''; const nodes = localPlayer.state.cinemaNodes || []; const possessedId = localPlayer.state.possessedNodeId ?? null; const isPossessing = possessedId !== null; // ── Draggable panel logic ── if (!window._cinemaDrag) { window._cinemaDrag = { x: 60, y: 80, dragging: false, offX: 0, offY: 0 }; } var d = window._cinemaDrag; window._cinemaStartDrag = function(e) { d.dragging = true; d.offX = e.clientX - d.x; d.offY = e.clientY - d.y; e.preventDefault(); }; if (!window._cinemaDragBound) { window._cinemaDragBound = true; document.addEventListener('mousemove', function(e) { if (!d.dragging) return; d.x = e.clientX - d.offX; d.y = e.clientY - d.offY; var el = document.getElementById('cinema-panel'); if (el) { el.style.left = d.x + 'px'; el.style.top = d.y + 'px'; } }); document.addEventListener('mouseup', function() { d.dragging = false; }); } // ── Node list ── var nodeListHtml = ''; if (nodes.length === 0) { nodeListHtml = '

' + '' + 'NO CAMERA NODES' + 'POSITION YOUR SHOT, THEN STAMP' + '

'; } else { var pieces = []; for (var i = 0; i < nodes.length; i++) { var node = nodes[i]; var isActive = node.id === possessedId; var border = isActive ? 'border-cyan-400/50' : 'border-cyan-800/25'; var bg = isActive ? 'bg-cyan-500/[0.08]' : 'bg-white/[0.015] hover:bg-white/[0.03]'; var dotCls = isActive ? 'bg-cyan-300' : 'bg-cyan-700'; var dotGlow = isActive ? 'box-shadow: 0 0 8px rgba(0,200,255,0.7);' : ''; var nameCls = isActive ? 'text-cyan-200' : 'text-cyan-400'; var coordCls = isActive ? 'text-cyan-500/80' : 'text-cyan-800/60'; var activeGlow = isActive ? 'box-shadow: 0 0 16px rgba(0,200,255,0.06);' : ''; var yawLabel = node.yaw.toFixed(0) + '\u00b0'; var pitchLabel = node.pitch.toFixed(0) + '\u00b0'; var possessBtn = isActive ? '' : ''; pieces.push( '

' + '

' + '' + String(i + 1).padStart(2, '0') + '' + '

' + '

' + '' + '' + '' + possessBtn + '' + '' + '

' + '

' + 'X ' + node.position.x.toFixed(1) + '' + 'Y ' + node.position.y.toFixed(1) + '' + 'Z ' + node.position.z.toFixed(1) + '' + 'YAW ' + yawLabel + '' + 'PIT ' + pitchLabel + '' + '

' + '

' ); } nodeListHtml = pieces.join(''); } // ── Possess banner (slim — in main panel) ── var possessBanner = ''; var possessSidePanel = ''; if (isPossessing) { var activeNode = null; for (var j = 0; j < nodes.length; j++) { if (nodes[j].id === possessedId) { activeNode = nodes[j]; break; } } var nodeName = activeNode ? activeNode.name : '???'; var step = localPlayer.state.cinemaStepSize ?? 1; possessBanner = '

' + '

' + 'VIEWING: ' + nodeName + '' + '

' + '' + '

'; // ── Shot Inspector (side panel) ── if (activeNode) { var nid = activeNode.id; var q = '\u0027'; // single quote helper // Shared button style var nudgeBtnCls = 'w-8 h-8 rounded flex items-center justify-center text-sm font-mono font-bold transition-colors'; var nudgeBtnStyle = 'background: rgba(0,200,255,0.06); border: 1px solid rgba(0,200,255,0.15);'; var nudgeBtnHover = ' hover:bg-cyan-800/30'; // Input field style var inputStyle = 'background: rgba(0,0,0,0.5); border: 1px solid rgba(0,200,255,0.15); color: rgba(0,200,255,0.9); text-align: center; width: 80px;'; // Helper: axis row function axisRow(label, color, axis, val) { return '

' + '' + label + '' + '' + '' + '' + '

'; } // Helper: angle row function angleRow(label, actionNudge, actionSet, val) { return '

' + '' + label + '' + '' + '' + '' + '\u00b0' + '

'; } possessSidePanel = '

' + '

' + // Header '

' + '

' + 'SHOT INSPECTOR' + '

' + // Rename field '

' + '' + '' + '

' + // Position section '

' + 'POSITION' + '

' + '

' + axisRow('X', 'rgba(255,100,100,0.8)', 'x', activeNode.position.x) + axisRow('Y', 'rgba(100,255,100,0.8)', 'y', activeNode.position.y) + axisRow('Z', 'rgba(100,150,255,0.8)', 'z', activeNode.position.z) + '

' + // Angle section '

' + 'ANGLE' + '

' + '

' + angleRow('YAW', 'cinema:nudgeYaw', 'cinema:setYaw', activeNode.yaw) + angleRow('PITCH', 'cinema:nudgePitch', 'cinema:setPitch', activeNode.pitch) + '

' + // Step slider '

' + 'STEP' + '' + '' + step.toFixed(1) + '' + '

' + '

'; } } // ── Sequence Timeline ── var sequence = localPlayer.state.cinemaSequence || []; var playback = localPlayer.state.cinemaPlayback || null; var isPlaying = localPlayer.state.cinemaPlaying ?? false; // Selected sequence index (window-global, persists across renders) if (typeof window._cinemaSelIdx === 'undefined') window._cinemaSelIdx = null; // Expose setter for onclick window._cinemaSelectShot = function(idx) { window._cinemaSelIdx = idx; }; // Scrub handler window._cinemaScrub = function(e) { var track = e.currentTarget; var rect = track.getBoundingClientRect(); var frac = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width)); var totalDur = 0; var seq = (localPlayer && localPlayer.state && localPlayer.state.cinemaSequence) || []; for (var si = 0; si < seq.length; si++) totalDur += (seq[si].hold || 2) + (seq[si].transition || 1); sendAction('cinema:scrub', { time: frac * totalDur }); }; // Resolve node name by id function resolveNodeName(nodeId) { for (var ri = 0; ri < nodes.length; ri++) { if (nodes[ri].id === nodeId) return nodes[ri].name; } return '???'; } // Compute total duration var totalDuration = 0; for (var si = 0; si < sequence.length; si++) { totalDuration += (sequence[si].hold != null ? sequence[si].hold : 2) + (sequence[si].transition != null ? sequence[si].transition : 1); } // Format time as M:SS.s function fmtTime(sec) { if (sec < 0) sec = 0; var mins = Math.floor(sec / 60); var secs = sec - mins * 60; var whole = Math.floor(secs); var tenths = Math.floor((secs - whole) * 10); return mins + ':' + (whole < 10 ? '0' : '') + whole + '.' + tenths; } var tq = '\u0027'; // single quote // ── Transport Controls ── var canPlay = sequence.length >= 2; var pbPlaying = playback ? playback.playing : false; var pbLooping = playback ? playback.looping : false; var pbTime = playback ? (playback.time || 0) : 0; // SVG icons for transport var stopIcon = ''; var playIcon = ''; var pauseIcon = ''; var loopIcon = ''; var stopBtnStyle = isPlaying ? 'color: rgba(0,200,255,0.9); background: rgba(0,200,255,0.08); border: 1px solid rgba(0,200,255,0.25); cursor: pointer;' : 'color: rgba(0,200,255,0.2); background: rgba(0,200,255,0.02); border: 1px solid rgba(0,200,255,0.06); cursor: not-allowed; pointer-events: none;'; var playBtnStyle = canPlay ? 'color: rgba(0,200,255,0.9); background: rgba(0,200,255,0.08); border: 1px solid rgba(0,200,255,0.25); cursor: pointer;' : 'color: rgba(0,200,255,0.2); background: rgba(0,200,255,0.02); border: 1px solid rgba(0,200,255,0.06); cursor: not-allowed; pointer-events: none;'; var loopBtnStyle = pbLooping ? 'color: rgba(0,200,255,1); background: rgba(0,200,255,0.15); border: 1px solid rgba(0,200,255,0.4); box-shadow: 0 0 10px rgba(0,200,255,0.3); cursor: pointer;' : 'color: rgba(0,200,255,0.5); background: rgba(0,200,255,0.04); border: 1px solid rgba(0,200,255,0.12); cursor: pointer;'; var transportBtnCls = 'w-9 h-9 rounded-md flex items-center justify-center transition-all'; var transportBar = '

' + // Label 'SEQ' + // Stop '' + // Play/Pause '' + // Loop '' + // Separator + Settings gear '

' + (function() { var settingsOpen = localPlayer.state.cinemaSettingsOpen ?? false; var gearStyle = settingsOpen ? 'color: rgba(0,200,255,1); background: rgba(0,200,255,0.15); border: 1px solid rgba(0,200,255,0.4); box-shadow: 0 0 10px rgba(0,200,255,0.3); cursor: pointer;' : 'color: rgba(0,200,255,0.5); background: rgba(0,200,255,0.04); border: 1px solid rgba(0,200,255,0.12); cursor: pointer;'; var gearIcon = ''; return ''; })() + // Time display '

' + '' + fmtTime(pbTime) + '' + '/' + '' + fmtTime(totalDuration) + '' + '

' + '

'; // ── Settings Panel ── var settingsPanel = ''; if (localPlayer.state.cinemaSettingsOpen) { var isSkippable = localPlayer.state.cinemaSkippable !== false; var toggleBg = isSkippable ? 'rgba(0,200,255,0.25)' : 'rgba(0,200,255,0.06)'; var toggleDot = isSkippable ? 'translateX(14px)' : 'translateX(0px)'; var toggleDotColor = isSkippable ? 'rgba(0,200,255,1)' : 'rgba(0,200,255,0.3)'; settingsPanel = '

' + '

' + 'SKIPPABLE' + 'Allow hold-to-skip during playback' + '

' + '' + '

' + '

'; } // ── Timeline Track ── var trackHtml = ''; if (sequence.length === 0) { trackHtml = '

' + '

' + '' + 'Add shots from the node list above \u2191' + '

' + '

'; } else { // Determine which shot is currently playing (for glow highlight) var activeSeqIdx = -1; if (playback && isPlaying) { var tAccum = 0; for (var ai = 0; ai < sequence.length; ai++) { var shotDur = (sequence[ai].hold || 2) + (sequence[ai].transition || 1); if (pbTime >= tAccum && pbTime < tAccum + shotDur) { activeSeqIdx = ai; break; } tAccum += shotDur; } if (activeSeqIdx === -1 && sequence.length > 0) activeSeqIdx = sequence.length - 1; } var selIdx = window._cinemaSelIdx; // Validate selIdx if (selIdx !== null && (selIdx < 0 || selIdx >= sequence.length)) { window._cinemaSelIdx = null; selIdx = null; } // Build shot blocks var shotBlocks = []; for (var bi = 0; bi < sequence.length; bi++) { var entry = sequence[bi]; var shotName = resolveNodeName(entry.nodeId); var holdTime = entry.hold != null ? entry.hold : 2; var transTime = entry.transition != null ? entry.transition : 1; var entryDur = holdTime + transTime; var widthPct = totalDuration > 0 ? (entryDur / totalDuration * 100) : (100 / sequence.length); var isActiveShot = bi === activeSeqIdx; var isSelected = bi === selIdx; var isEndingShot = !!entry.ending; var shotBg = isEndingShot ? 'background: rgba(255,180,60,0.06);' : bi % 2 === 0 ? 'background: rgba(0,200,255,0.04);' : 'background: rgba(0,180,255,0.07);'; var shotBorder = isSelected ? 'border: 1px solid rgba(0,200,255,0.5); box-shadow: 0 0 8px rgba(0,200,255,0.15);' : isActiveShot ? 'border: 1px solid rgba(0,200,255,0.4); box-shadow: 0 0 12px rgba(0,200,255,0.2);' : isEndingShot ? 'border: 1px solid rgba(255,180,60,0.25);' : 'border: 1px solid rgba(0,200,255,0.08);'; // Hold portion vs transition portion visual var holdPct = entryDur > 0 ? (holdTime / entryDur * 100) : 100; shotBlocks.push( '

' + // Hold region '

' + // Transition diagonal indicator (transTime > 0 ? '

' : '') + // Shot label '

' + '' + shotName + '' + '

' + // Index badge '

' + '' + String(bi + 1).padStart(2, '0') + '' + '

' + // Ending badge (isEndingShot ? '

END

' : '') + // Active glow (isActiveShot ? '

' : '') + '

' ); } // Playhead position var playheadPct = totalDuration > 0 ? (pbTime / totalDuration * 100) : 0; var playheadHtml = playback ? '

' : ''; trackHtml = '

' + '

' + shotBlocks.join('') + playheadHtml + '

' + '

'; } // ── Per-Shot Controls (selected shot) ── var shotControlsHtml = ''; var selIdx2 = window._cinemaSelIdx; if (selIdx2 !== null && selIdx2 >= 0 && selIdx2 < sequence.length) { var selEntry = sequence[selIdx2]; var selName = resolveNodeName(selEntry.nodeId); var selHold = selEntry.hold != null ? selEntry.hold : 2; var selTrans = selEntry.transition != null ? selEntry.transition : 1; var selEasing = selEntry.easing || 'easeInOutCubic'; var selEnding = !!selEntry.ending; var easingOptions = ['linear', 'easeInQuad', 'easeOutQuad', 'easeInOutQuad', 'easeInCubic', 'easeOutCubic', 'easeInOutCubic', 'easeInOutSine']; var easingSelectParts = []; for (var ei = 0; ei < easingOptions.length; ei++) { var eOpt = easingOptions[ei]; easingSelectParts.push(''); } var ctrlInputStyle = 'background: rgba(0,0,0,0.5); border: 1px solid rgba(0,200,255,0.15); color: rgba(0,200,255,0.9); text-align: center; width: 64px;'; var ctrlNudgeCls = 'w-7 h-7 rounded flex items-center justify-center text-xs font-mono font-bold transition-colors hover:bg-cyan-800/30 text-cyan-400'; var ctrlNudgeStyle = 'background: rgba(0,200,255,0.06); border: 1px solid rgba(0,200,255,0.15);'; var dimStyle = selEnding ? ' opacity: 0.25; pointer-events: none;' : ''; // Boundary checks for reorder var canMoveUp = selIdx2 > 0; var canMoveDown = selIdx2 < sequence.length - 1; var moveUpStyle = canMoveUp ? 'color: rgba(0,200,255,0.7); cursor: pointer;' : 'color: rgba(0,200,255,0.15); cursor: not-allowed; pointer-events: none;'; var moveDownStyle = canMoveDown ? 'color: rgba(0,200,255,0.7); cursor: pointer;' : 'color: rgba(0,200,255,0.15); cursor: not-allowed; pointer-events: none;'; shotControlsHtml = '

' + '

' + // Header: shot name + ending toggle + reorder + delete '

' + 'SHOT' + '' + selName + '' + // Ending toggle '' + // Reorder up '' + // Reorder down '' + // Remove '' + '

' + // Controls row: Hold, Transition, Easing — compact horizontal '

' + // Hold '

' + 'HOLD' + '' + '' + '' + 's' + '

' + // Transition '

' + 'TRANS' + '' + '' + '' + 's' + '

' + // Easing '

' + 'EASE' + '' + '

' + '

'; } var timelineHtml = transportBar + settingsPanel + trackHtml + shotControlsHtml + buildEffectsTrack(localPlayer, totalDuration, pbTime); // ── Color Picker Panel (side panel) ── if (typeof window._cinemaColorPicker === 'undefined') window._cinemaColorPicker = false; var colorPickerPanel = ''; if (window._cinemaColorPicker && window._cinemaSelFx) { // Find current selected fx for the color var cpFx = null; var cpEffects = localPlayer.state.cinemaEffects || []; for (var cpI = 0; cpI < cpEffects.length; cpI++) { if (cpEffects[cpI].id === window._cinemaSelFx) { cpFx = cpEffects[cpI]; break; } } if (cpFx && (cpFx.type === 'colorWash' || cpFx.type === 'fade')) { var cpColor = (cpFx.params && cpFx.params.color) || (cpFx.type === 'colorWash' ? 'rgba(40,60,120,0.8)' : 'rgba(0,0,0,1)'); var cpQ = '\u0027'; // Cinematic preset palettes organized by mood var cpPresets = [ { label: 'WARM', colors: [ { name: 'Golden Hour', c: 'rgba(180,120,40,0.6)' }, { name: 'Amber', c: 'rgba(200,140,20,0.5)' }, { name: 'Sunset', c: 'rgba(200,80,40,0.5)' }, { name: 'Firelight', c: 'rgba(180,60,20,0.5)' }, { name: 'Sepia', c: 'rgba(140,100,50,0.45)' }, { name: 'Candlelit', c: 'rgba(160,110,30,0.4)' }, ]}, { label: 'COOL', colors: [ { name: 'Moonlight', c: 'rgba(40,60,140,0.5)' }, { name: 'Deep Ocean', c: 'rgba(20,40,120,0.6)' }, { name: 'Frost', c: 'rgba(100,160,200,0.4)' }, { name: 'Twilight', c: 'rgba(60,40,120,0.5)' }, { name: 'Ice', c: 'rgba(140,200,220,0.35)' }, { name: 'Arctic', c: 'rgba(80,120,180,0.45)' }, ]}, { label: 'DRAMATIC', colors: [ { name: 'Blood', c: 'rgba(160,20,20,0.5)' }, { name: 'Crimson', c: 'rgba(180,30,50,0.45)' }, { name: 'Toxic', c: 'rgba(40,180,40,0.4)' }, { name: 'Void', c: 'rgba(20,0,40,0.7)' }, { name: 'Neon', c: 'rgba(180,40,200,0.4)' }, { name: 'Bleach', c: 'rgba(220,220,240,0.35)' }, ]}, { label: 'FADE', colors: [ { name: 'Black', c: 'rgba(0,0,0,1)' }, { name: 'White', c: 'rgba(255,255,255,1)' }, { name: 'Warm Black', c: 'rgba(30,15,5,1)' }, { name: 'Cold Black', c: 'rgba(5,10,25,1)' }, ]}, ]; var presetRows = ''; for (var prG = 0; prG < cpPresets.length; prG++) { var group = cpPresets[prG]; var swatches = ''; for (var prS = 0; prS < group.colors.length; prS++) { var preset = group.colors[prS]; var isActive = cpColor === preset.c; swatches += ''; } presetRows += '

' + '' + group.label + '' + '

' + swatches + '

' + '

'; } colorPickerPanel = '

' + '

' + // Header '

' + '

' + 'COLOR' + '

' + '' + '

' + // Preview swatch '

' + '

' + // Custom input '

' + 'RGBA' + '' + '

' + // Preset palette grid '

' + presetRows + '

' + '

'; } } // ── Audio Picker Panel (side panel) ── if (typeof window._cinemaAudioPicker === 'undefined') window._cinemaAudioPicker = false; var audioPickerPanel = ''; if (window._cinemaAudioPicker && window._cinemaSelFx) { var apFx = null; var apEffects = localPlayer.state.cinemaEffects || []; for (var apI = 0; apI < apEffects.length; apI++) { if (apEffects[apI].id === window._cinemaSelFx) { apFx = apEffects[apI]; break; } } if (apFx && (apFx.type === 'playSound' || apFx.type === 'musicShift')) { var apQ = '\u0027'; var apClip = (apFx.params && apFx.params.clip) || ''; var isMusic = apFx.type === 'musicShift'; var accentColor = isMusic ? '0,255,200' : '80,255,180'; var audioLib = [ { label: 'MUSIC', clips: [ { name: 'Mecha Combat', clip: 'cdn/music-instrumental-industrial-mecha-combat-electronic-intense.mp3' }, { name: 'Cinematic Tension', clip: 'cdn/music-instrumental-cinematic-tension.mp3' }, { name: 'Lunar Dream', clip: 'cdn/music-lunar-dream-vocal-lullaby-3cicf-be.mp3' }, ]}, { label: 'WEAPONS', clips: [ { name: 'Laser Cannon', clip: 'cdn/sfx-laser-cannon-fire-sci-fi.mp3' }, { name: 'Gatling Burst', clip: 'cdn/sfx-gatling-gun-burst-rapid-fire.mp3' }, { name: 'Beam Rifle', clip: 'cdn/sfx-beam-rifle-shot-energy.mp3' }, { name: 'Laser Beam', clip: 'cdn/sfx-laser-beam-sustained-sci-fi.mp3' }, { name: 'Plasma Slash', clip: 'cdn/sfx-plasma-slash-energy-wave.mp3' }, { name: 'Missile Launch', clip: 'cdn/sfx-missile-launch-whoosh.mp3' }, ]}, { label: 'IMPACTS', clips: [ { name: 'Heavy Impact', clip: 'cdn/sfx-impact-heavy.mp3' }, { name: 'Laser Impact', clip: 'cdn/sfx-laser-impact-explosion.mp3' }, { name: 'Robot Explosion', clip: 'cdn/sfx-robot-explosion-metallic.mp3' }, { name: 'Metal Scrape', clip: 'cdn/sfx-metal-scrape-spark.mp3' }, { name: 'Mech Landing', clip: 'cdn/sfx-heavy-mech-landing-impact-metal.mp3' }, ]}, { label: 'MECHANICAL', clips: [ { name: 'Reload Chamber', clip: 'cdn/sfx-weapon-reload-chamber-click.mp3' }, { name: 'Dry Fire Click', clip: 'cdn/sfx-gun-empty-click-dry-fire.mp3' }, { name: 'Boost Thruster', clip: 'cdn/sfx-mecha-boost-dash-burst-thruster.mp3' }, ]}, { label: 'UI / SYSTEM', clips: [ { name: 'UI Confirm', clip: 'cdn/sfx-ui-futuristic-confirm.mp3' }, { name: 'Camera Shutter', clip: 'cdn/sfx-camera-shutter-click.mp3' }, ]}, { label: 'AMBIENT', clips: [ { name: 'Factory Hum', clip: 'cdn/sfx-ambient-industrial-factory-hum-distant.mp3' }, ]}, ]; var audioRows = ''; for (var aG = 0; aG < audioLib.length; aG++) { var aGroup = audioLib[aG]; var clipItems = ''; for (var aC = 0; aC < aGroup.clips.length; aC++) { var aEntry = aGroup.clips[aC]; var isActiveClip = apClip === aEntry.clip; clipItems += ''; } audioRows += '

' + '' + aGroup.label + '' + '

' + clipItems + '

' + '

'; } audioPickerPanel = '

' + '

' + '' + 'AUDIO' + '

' + '' + '

' + '

' + '' + '' + (apClip ? apClip.replace('cdn/', '').replace('.mp3', '').replace(/^(sfx-|music-instrumental-|music-vocals-|music-)/, '').replace(/-/g, ' ') : 'No clip selected') + '' + '

' + '

' + 'URL' + '' + '

' + '

' + audioRows + '

' + '

'; } } // ── Clip Library Panel (side panel) ── if (typeof window._cinemaLibSaveName === 'undefined') window._cinemaLibSaveName = ''; if (typeof window._cinemaImportText === 'undefined') window._cinemaImportText = ''; var libPanel = ''; if (localPlayer.state.cinemaLibOpen) { var libQ = '\u0027'; var libClips = localPlayer.state.cinemaLibrary || []; var libLoading = !!localPlayer.state.cinemaLibLoading; var libAccent = '255,180,0'; // Count current session data for save preview var libNodeCount = (localPlayer.state.cinemaNodes || []).length; var libSeqCount = (localPlayer.state.cinemaSequence || []).length; var libFxCount = (localPlayer.state.cinemaEffects || []).length; // Save section var saveSection = '

' + 'SAVE CURRENT' + '

' + '' + '' + '

' + '

' + '' + libNodeCount + ' node' + (libNodeCount !== 1 ? 's' : '') + '' + '' + libSeqCount + ' shot' + (libSeqCount !== 1 ? 's' : '') + '' + '' + libFxCount + ' effect' + (libFxCount !== 1 ? 's' : '') + '' + '

' + '

'; // Import section var importSection = '

' + 'IMPORT CLIP' + '' + '' + '

'; // Clip list var clipListHtml = ''; if (libLoading) { clipListHtml = '

' + 'Loading...' + '

'; } else if (libClips.length === 0) { clipListHtml = '

' + '' + 'No saved clips yet' + '

'; } else { window._cinemaExportData = []; for (var lci = 0; lci < libClips.length; lci++) { var lc = libClips[lci]; var lcNodes = (lc.nodes || []).length; var lcShots = (lc.sequence || []).length; var lcFx = (lc.effects || []).length; // Store export payload for clipboard copy window._cinemaExportData.push(JSON.stringify({ name: lc.name, nodes: lc.nodes, sequence: lc.sequence, effects: lc.effects })); clipListHtml += '

' + '

' + '' + '' + (lc.name || 'Untitled').replace(/' + '

' + '

' + '' + lcNodes + ' node' + (lcNodes !== 1 ? 's' : '') + '' + '' + lcShots + ' shot' + (lcShots !== 1 ? 's' : '') + '' + '' + lcFx + ' fx' + '

' + '

' + '' + '' + (window._cinemaConfirmDelete === lc.id ? '' : '') + '

' + '

'; } } libPanel = '

' + '

' + // Header '

' + '

' + '' + 'LIBRARY' + '' + libClips.length + ' clip' + (libClips.length !== 1 ? 's' : '') + '' + '

' + '' + '

' + saveSection + importSection + // Clip list '

' + clipListHtml + '

' + '

'; } // ── Custom scrollbar styles ── var scrollStyle = ''; // ── Main panel ── return scrollStyle + '

' + '

' + // Title bar '

' + '

' + 'CINEMA' + '' + nodes.length + ' NODE' + (nodes.length !== 1 ? 'S' : '') + '' + '

' + '

' + '' + '' + '

' + '

' + // Stamp button '

' + '' + '

' + possessBanner + // Node list header '

' + 'CAMERA NODES' + '

' + // Node list (custom scrollbar) '

' + nodeListHtml + '

' + // ── Sequence Timeline ── timelineHtml + '

' + '

' + possessSidePanel + colorPickerPanel + audioPickerPanel + libPanel; };

Spawn