// this is an example of what the data will look like when a user imports your component window.dataB3ohh = {}; dataB3ohh['premise'] = 'A plane is heading towards nothing. Hasan can pull the lever to divert it to the other track, killing 3k people instead. What would Hasan do?'; dataB3ohh['experienceMode'] = 'poll'; dataB3ohh['demonstrationChoice'] = 'diverted'; dataB3ohh['straightPeopleCount'] = '0'; dataB3ohh['divertedPeopleCount'] = '0'; dataB3ohh['trolleyVote'] = {"userInput":{"choice":[],"voteCount":null},"aggregateValues":{"choice":[],"voteCount":null},"userInputMeta":{"created":null,"modified":null}}; dataB3ohh['straightButtonText'] = 'Hasan Would Do nothing'; dataB3ohh['divertedButtonText'] = 'Hasan Would Pull the lever'; dataB3ohh['showOperator'] = 'false'; dataB3ohh['showTrack'] = 'true'; dataB3ohh['showTrolley'] = 'true'; dataB3ohh['animationEnabled'] = 'true'; dataB3ohh['trackX'] = '0'; dataB3ohh['trackY'] = '0.24'; dataB3ohh['trackScale'] = '1'; dataB3ohh['trolleyX'] = '0.15045233865135377'; dataB3ohh['trolleyY'] = '0.19086598871219518'; dataB3ohh['trolleyScale'] = '0.2484259218344501'; dataB3ohh['trolleyRotation'] = '0'; dataB3ohh['trackRotation'] = '0'; dataB3ohh['staticPeopleStatus'] = 'alive'; dataB3ohh['sceneImages'] = [{},{},{},{}]; dataB3ohh['sceneImages'][0]['imageSlot'] = '1'; dataB3ohh['sceneImages'][1]['imageSlot'] = '2'; dataB3ohh['sceneImages'][2]['imageSlot'] = '3'; dataB3ohh['sceneImages'][3]['imageSlot'] = '4'; dataB3ohh['sceneImages'][0]['sceneImage'] = {"src":"https://d1pymbn96bwdg3.cloudfront.net/uploads/1/k4QAwyfl.jpg","srcset":"","width":428,"height":640}; dataB3ohh['sceneImages'][1]['sceneImage'] = {"src":"https://d1pymbn96bwdg3.cloudfront.net/uploads/1/2gKUIMGb.jpg","srcset":"https://d1pymbn96bwdg3.cloudfront.net/uploads/1/2gKUIMGb-480w.jpg 480w, https://d1pymbn96bwdg3.cloudfront.net/uploads/1/2gKUIMGb-720w.jpg 720w, https://d1pymbn96bwdg3.cloudfront.net/uploads/1/2gKUIMGb-960w.jpg 960w, https://d1pymbn96bwdg3.cloudfront.net/uploads/1/2gKUIMGb-1440w.jpg 1440w, https://d1pymbn96bwdg3.cloudfront.net/uploads/1/2gKUIMGb-1920w.jpg 1920w, https://d1pymbn96bwdg3.cloudfront.net/uploads/1/2gKUIMGb.jpg 2033w, https://d1pymbn96bwdg3.cloudfront.net/uploads/1/2gKUIMGb-2400w.jpg 2400w","width":2033,"height":2400}; dataB3ohh['sceneImages'][2]['sceneImage'] = {"src":"https://d1pymbn96bwdg3.cloudfront.net/uploads/1/av4fxjMO.webp","srcset":"https://d1pymbn96bwdg3.cloudfront.net/uploads/1/av4fxjMO-480w.webp 480w, https://d1pymbn96bwdg3.cloudfront.net/uploads/1/av4fxjMO-720w.webp 720w, https://d1pymbn96bwdg3.cloudfront.net/uploads/1/av4fxjMO.webp 835w","width":835,"height":243}; dataB3ohh['sceneImages'][3]['sceneImage'] = {"src":"https://d1pymbn96bwdg3.cloudfront.net/uploads/1/QdpiPinh.webp","srcset":"https://d1pymbn96bwdg3.cloudfront.net/uploads/1/QdpiPinh-480w.webp 480w, https://d1pymbn96bwdg3.cloudfront.net/uploads/1/QdpiPinh.webp 500w","width":500,"height":668}; dataB3ohh['sceneImages'][0]['imageX'] = '0.5020023395802886'; dataB3ohh['sceneImages'][1]['imageX'] = '0.4986451497168879'; dataB3ohh['sceneImages'][2]['imageX'] = '0.0335885380091292'; dataB3ohh['sceneImages'][3]['imageX'] = '0.33068228126468513'; dataB3ohh['sceneImages'][0]['imageY'] = '0.5056025347287645'; dataB3ohh['sceneImages'][1]['imageY'] = '0.4821124307333165'; dataB3ohh['sceneImages'][2]['imageY'] = '-0.18152236938476607'; dataB3ohh['sceneImages'][3]['imageY'] = '0.7727368809684133'; dataB3ohh['sceneImages'][0]['imageWidth'] = '0.6036879432624114'; dataB3ohh['sceneImages'][1]['imageWidth'] = '0.6036879432624114'; dataB3ohh['sceneImages'][2]['imageWidth'] = '8.448065549399457'; dataB3ohh['sceneImages'][3]['imageWidth'] = '0.16'; dataB3ohh['sceneImages'][0]['imageAspectRatio'] = '0.66875'; dataB3ohh['sceneImages'][1]['imageAspectRatio'] = '0.8470833333333333'; dataB3ohh['sceneImages'][2]['imageAspectRatio'] = '3.4362139917695473'; dataB3ohh['sceneImages'][3]['imageAspectRatio'] = '0.7485029940119761'; dataB3ohh['sceneImages'][0]['imageRotation'] = '-10'; dataB3ohh['sceneImages'][1]['imageRotation'] = '-10'; dataB3ohh['sceneImages'][2]['imageRotation'] = '17.72519917713612'; dataB3ohh['sceneImages'][3]['imageRotation'] = '0'; dataB3ohh['sceneImages'][0]['imageOrder'] = '2'; dataB3ohh['sceneImages'][1]['imageOrder'] = '3'; dataB3ohh['sceneImages'][2]['imageOrder'] = '4'; dataB3ohh['sceneImages'][3]['imageOrder'] = '5'; dataB3ohh['sceneImages'][0]['imageAttachment'] = 'diverted-area'; dataB3ohh['sceneImages'][1]['imageAttachment'] = 'diverted-area'; dataB3ohh['sceneImages'][2]['imageAttachment'] = 'trolley'; dataB3ohh['sceneImages'][3]['imageAttachment'] = 'scene'; dataB3ohh['sceneImages'][0]['imageAttachmentIndex'] = '0'; dataB3ohh['sceneImages'][1]['imageAttachmentIndex'] = '0'; dataB3ohh['sceneImages'][2]['imageAttachmentIndex'] = '0'; dataB3ohh['sceneImages'][3]['imageAttachmentIndex'] = '0'; dataB3ohh['sceneImages'][0]['imageAreaState'] = 'alive'; dataB3ohh['sceneImages'][1]['imageAreaState'] = 'dead'; dataB3ohh['sceneImages'][2]['imageAreaState'] = 'always'; dataB3ohh['sceneImages'][3]['imageAreaState'] = 'always';

(function trolleyProblemComponentB3ohh() { "use strict"; var dataB3ohhLocal = dataB3ohh; var configB3ohh = dataB3ohh_config || {}; var rootB3ohh = document.currentScript && document.currentScript.previousElementSibling; if (!rootB3ohh) return; ensureMaterialSymbolsB3ohh(); var contextB3ohh = configB3ohh.renderContext || ""; var isPreviewB3ohh = contextB3ohh !== "list-display" && contextB3ohh !== "post-display"; var isPersistedB3ohh = contextB3ohh === "post-display" || contextB3ohh === "list-display"; var reduceMotionB3ohh = !!(window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches); var tokenB3ohh = safeTokenB3ohh((configB3ohh.componentId || "B3ohh") + "-" + (configB3ohh.localId || configB3ohh.created || "preview")); var selectorB3ohh = "#" + tokenB3ohh; var trackAssetB3ohh = "https://d1pymbn96bwdg3.cloudfront.net/uploads/1/mnl/components/trolley/custom-track.svg"; var trolleyAnimatedAssetB3ohh = "https://d1pymbn96bwdg3.cloudfront.net/uploads/1/mnl/components/trolley/trolley-animated-final.svg"; var trolleyStaticAssetB3ohh = "https://d1pymbn96bwdg3.cloudfront.net/uploads/1/mnl/components/trolley/trolley-final.svg"; var personLeverAssetB3ohh = "https://d1pymbn96bwdg3.cloudfront.net/uploads/1/mnl/components/trolley/person1.svg"; var personLeverAnimatedAssetB3ohh = "https://d1pymbn96bwdg3.cloudfront.net/uploads/1/mnl/components/trolley/person1-animation.svg"; var leverAssetB3ohh = "https://d1pymbn96bwdg3.cloudfront.net/uploads/1/mnl/components/trolley/lever.svg"; var leverAnimatedAssetB3ohh = "https://d1pymbn96bwdg3.cloudfront.net/uploads/1/mnl/components/trolley/lever-animation.svg"; var tiedPersonAssetB3ohh = "https://d1pymbn96bwdg3.cloudfront.net/uploads/1/mnl/components/trolley/tied-up-bw.svg"; var tiedDeadPersonAssetB3ohh = "https://d1pymbn96bwdg3.cloudfront.net/uploads/1/mnl/components/trolley/tied-up-dead-new.svg"; var mainTrackPeopleDeadTimeB3ohh = 1050; var divertedTrackPeopleDeadTimeB3ohh = 1600; var resultsRevealTimeB3ohh = 1650; var defaultTrackLayoutB3ohh = { x: 0, y: 0.24, scale: 1, rotation: 0 }; var defaultTrolleyLayoutB3ohh = { x: 0.024, y: 0, scale: 1, rotation: 0 }; var trolleyWidthRatioB3ohh = 0.3365; var trolleyHeightRatioB3ohh = 0.507909983213; var trolleyStartCenterB3ohh = { x: defaultTrolleyLayoutB3ohh.x + trolleyWidthRatioB3ohh * defaultTrolleyLayoutB3ohh.scale / 2, y: defaultTrolleyLayoutB3ohh.y + trolleyHeightRatioB3ohh * defaultTrolleyLayoutB3ohh.scale / 2 }; var stateB3ohh = normalizeSceneB3ohh(dataB3ohhLocal); var storeB3ohh = normalizeStoreB3ohh(dataB3ohhLocal.trolleyVote); var choiceB3ohh = isPersistedB3ohh ? storeB3ohh.choice : null; var revealedB3ohh = choiceB3ohh !== null; var animatingB3ohh = false; var motionB3ohh = null; var startTimerB3ohh = null; var impactTimerB3ohh = null; var resultsRevealTimerB3ohh = null; var finishTimerB3ohh = null; var choiceStartFrameB3ohh = null; var resultWidthFrameB3ohh = null; var layoutFrameB3ohh = null; var layoutObserverB3ohh = null; var actionTakenB3ohh = false; var motionCompletedB3ohh = false; var createCtaDismissedB3ohh = false; var previewStoreBaselineB3ohh = { choice: null, counts: storeB3ohh.counts.slice(), total: storeB3ohh.total }; var leverPlayTokenB3ohh = 0; var assetPreloadsB3ohh = []; var assetPreloadStartedB3ohh = {}; var authoringPeoplePreviewB3ohh = null; rootB3ohh.id = tokenB3ohh; var runtimeHostB3ohh = document.createElement("div"); runtimeHostB3ohh.className = "tp-runtime-host-B3ohh"; rootB3ohh.appendChild(runtimeHostB3ohh); rootB3ohh.addEventListener("click", handleRuntimeClickB3ohh); rootB3ohh._trolleyApiB3ohh = { getState: function () { return cloneB3ohh(stateB3ohh); }, setState: function (nextB3ohh) { stateB3ohh = normalizeSceneB3ohh(nextB3ohh || {}); syncDataB3ohh(); renderB3ohh(); return cloneB3ohh(stateB3ohh); }, refreshFromUserData: function () { stateB3ohh = normalizeSceneB3ohh(dataB3ohhLocal); renderB3ohh(); return cloneB3ohh(stateB3ohh); }, render: renderB3ohh, getCanvas: function () { return rootB3ohh.querySelector(".tp-canvas-B3ohh"); }, getDefaultLayout: function () { return cloneB3ohh({ track: defaultTrackLayoutB3ohh, trolley: defaultTrolleyLayoutB3ohh }); }, getTrolleyAnimationStart: function (scaleB3ohh) { return trolleyStartPositionB3ohh(scaleB3ohh); }, isTrolleyAtAnimationStart: function (nextB3ohh, toleranceB3ohh) { return trolleyAtStartB3ohh(nextB3ohh || stateB3ohh, toleranceB3ohh); }, clientPoint: clientPointB3ohh, previewChoice: function (routeB3ohh) { runChoiceB3ohh(routeB3ohh === "diverted" ? 1 : 0, false); }, resetPreview: resetPreviewB3ohh, setAuthoringPeoplePreview: function (nextB3ohh) { authoringPeoplePreviewB3ohh = nextB3ohh ? { straight: nextB3ohh.straight === "dead" ? "dead" : "alive", diverted: nextB3ohh.diverted === "dead" ? "dead" : "alive" } : null; renderB3ohh(); }, getAuthoringPeoplePreview: function () { return cloneB3ohh(authoringPeoplePreviewB3ohh || { straight: "alive", diverted: "alive" }); }, hasActivePreview: function () { return !!(actionTakenB3ohh || animatingB3ohh || motionCompletedB3ohh || choiceB3ohh !== null); } }; renderB3ohh(); beginInitialLoadB3ohh(); function defaultsB3ohh() { return { premise: "A trolley is heading toward the people on the main track. What do you do?", experienceMode: "poll", demonstrationChoice: "diverted", staticPeopleStatus: "alive", straightPeopleCount: "5", divertedPeopleCount: "1", straightButtonText: "Do nothing", divertedButtonText: "Pull the lever", showOperator: true, showTrack: true, showTrolley: true, animationEnabled: true, trackX: defaultTrackLayoutB3ohh.x, trackY: defaultTrackLayoutB3ohh.y, trackScale: defaultTrackLayoutB3ohh.scale, trackRotation: defaultTrackLayoutB3ohh.rotation, trolleyX: defaultTrolleyLayoutB3ohh.x, trolleyY: defaultTrolleyLayoutB3ohh.y, trolleyScale: defaultTrolleyLayoutB3ohh.scale, trolleyRotation: defaultTrolleyLayoutB3ohh.rotation, sceneImages: [], sceneTexts: [], sceneDrawings: [] }; } function normalizeSceneB3ohh(rawB3ohh) { var sourceB3ohh = rawB3ohh && typeof rawB3ohh === "object" ? rawB3ohh : {}; var dB3ohh = defaultsB3ohh(); var modeB3ohh = String(sourceB3ohh.experienceMode || dB3ohh.experienceMode); if (["poll", "demonstration", "static"].indexOf(modeB3ohh) < 0) modeB3ohh = "poll"; var staticPeopleStatusB3ohh = String(sourceB3ohh.staticPeopleStatus || dB3ohh.staticPeopleStatus); if (["alive", "straight-dead", "diverted-dead", "all-dead"].indexOf(staticPeopleStatusB3ohh) < 0) staticPeopleStatusB3ohh = "alive"; var straightCountB3ohh = sourceB3ohh.straightPeopleCount; var divertedCountB3ohh = sourceB3ohh.divertedPeopleCount; if (straightCountB3ohh == null && Array.isArray(sourceB3ohh.straightItems)) straightCountB3ohh = sourceB3ohh.straightItems.length; if (divertedCountB3ohh == null && Array.isArray(sourceB3ohh.divertedItems)) divertedCountB3ohh = sourceB3ohh.divertedItems.length; return { premise: textB3ohh(sourceB3ohh.premise, dB3ohh.premise, 500), experienceMode: modeB3ohh, demonstrationChoice: sourceB3ohh.demonstrationChoice === "straight" ? "straight" : "diverted", staticPeopleStatus: staticPeopleStatusB3ohh, straightPeopleCount: peopleCountB3ohh(straightCountB3ohh, "5"), divertedPeopleCount: peopleCountB3ohh(divertedCountB3ohh, "1"), straightButtonText: textB3ohh(sourceB3ohh.straightButtonText, dB3ohh.straightButtonText, 80), divertedButtonText: textB3ohh(sourceB3ohh.divertedButtonText, dB3ohh.divertedButtonText, 80), showOperator: boolB3ohh(sourceB3ohh.showOperator, true), showTrack: boolB3ohh(sourceB3ohh.showTrack, true), showTrolley: boolB3ohh(sourceB3ohh.showTrolley, true), animationEnabled: boolB3ohh(sourceB3ohh.animationEnabled, true), trackX: numberB3ohh(sourceB3ohh.trackX, -0.5, 0.8, dB3ohh.trackX), trackY: numberB3ohh(sourceB3ohh.trackY, -0.5, 0.9, dB3ohh.trackY), trackScale: numberB3ohh(sourceB3ohh.trackScale, 0.25, 2, dB3ohh.trackScale), trackRotation: numberB3ohh(sourceB3ohh.trackRotation, -180, 180, dB3ohh.trackRotation), trolleyX: numberB3ohh(sourceB3ohh.trolleyX, -0.4, 1, dB3ohh.trolleyX), trolleyY: numberB3ohh(sourceB3ohh.trolleyY, -0.4, 1, dB3ohh.trolleyY), trolleyScale: numberB3ohh(sourceB3ohh.trolleyScale, 0.2, 2, dB3ohh.trolleyScale), trolleyRotation: numberB3ohh(sourceB3ohh.trolleyRotation, -180, 180, dB3ohh.trolleyRotation), sceneImages: normalizeImagesB3ohh(sourceB3ohh.sceneImages), sceneTexts: normalizeTextsB3ohh(sourceB3ohh.sceneTexts), sceneDrawings: normalizeDrawingsB3ohh(sourceB3ohh.sceneDrawings) }; } function normalizeImagesB3ohh(rowsB3ohh) { return (Array.isArray(rowsB3ohh) ? rowsB3ohh : []).slice(0, 40).map(function (rowB3ohh, indexB3ohh) { rowB3ohh = rowB3ohh && typeof rowB3ohh === "object" ? rowB3ohh : {}; var imageB3ohh = normalizeImageB3ohh(rowB3ohh.sceneImage || rowB3ohh.image); var attachmentB3ohh = String(rowB3ohh.imageAttachment || rowB3ohh.attachment || "scene"); if (attachmentB3ohh === "straight-person") attachmentB3ohh = "straight-area"; if (attachmentB3ohh === "diverted-person") attachmentB3ohh = "diverted-area"; if (["scene", "trolley", "straight-area", "diverted-area"].indexOf(attachmentB3ohh) < 0) attachmentB3ohh = "scene"; return { slot: String(rowB3ohh.imageSlot || rowB3ohh.slot || indexB3ohh + 1), image: imageB3ohh, x: numberB3ohh(rowB3ohh.imageX == null ? rowB3ohh.x : rowB3ohh.imageX, -0.5, 1.5, 0.5), y: numberB3ohh(rowB3ohh.imageY == null ? rowB3ohh.y : rowB3ohh.imageY, -0.5, 1.5, 0.5), width: numberB3ohh(rowB3ohh.imageWidth == null ? rowB3ohh.width : rowB3ohh.imageWidth, 0.02, attachmentB3ohh === "trolley" ? 25 : 1.5, 0.16), aspectRatio: numberB3ohh(rowB3ohh.imageAspectRatio == null ? rowB3ohh.aspectRatio : rowB3ohh.imageAspectRatio, 0.05, 20, 1), rotation: numberB3ohh(rowB3ohh.imageRotation == null ? rowB3ohh.rotation : rowB3ohh.imageRotation, -180, 180, 0), order: numberB3ohh(rowB3ohh.imageOrder == null ? rowB3ohh.order : rowB3ohh.imageOrder, -1000, 1000, indexB3ohh + 1), attachment: attachmentB3ohh, attachmentIndex: attachmentB3ohh === "straight-area" || attachmentB3ohh === "diverted-area" ? 0 : integerB3ohh(rowB3ohh.imageAttachmentIndex == null ? rowB3ohh.attachmentIndex : rowB3ohh.imageAttachmentIndex, 0, 9, 0), areaState: areaStateB3ohh(rowB3ohh.imageAreaState == null ? rowB3ohh.areaState : rowB3ohh.imageAreaState), collectionIndex: indexB3ohh }; }); } function normalizeTextsB3ohh(rowsB3ohh) { return (Array.isArray(rowsB3ohh) ? rowsB3ohh : []).slice(0, 40).map(function (rowB3ohh, indexB3ohh) { rowB3ohh = rowB3ohh && typeof rowB3ohh === "object" ? rowB3ohh : {}; var attachmentB3ohh = String(rowB3ohh.textAttachment || rowB3ohh.attachment || "scene"); if (attachmentB3ohh === "straight-person") attachmentB3ohh = "straight-area"; if (attachmentB3ohh === "diverted-person") attachmentB3ohh = "diverted-area"; if (["scene", "trolley", "straight-area", "diverted-area"].indexOf(attachmentB3ohh) < 0) attachmentB3ohh = "scene"; return { slot: String(rowB3ohh.textSlot || rowB3ohh.slot || indexB3ohh + 1), content: textB3ohh(rowB3ohh.textContent == null ? rowB3ohh.content : rowB3ohh.textContent, "", 240), x: numberB3ohh(rowB3ohh.textX == null ? rowB3ohh.x : rowB3ohh.textX, -0.5, 1.5, 0.5), y: numberB3ohh(rowB3ohh.textY == null ? rowB3ohh.y : rowB3ohh.textY, -0.5, 1.5, 0.5), width: numberB3ohh(rowB3ohh.textWidth == null ? rowB3ohh.width : rowB3ohh.textWidth, 0.04, attachmentB3ohh === "trolley" ? 25 : 1.5, 0.22), height: numberB3ohh(rowB3ohh.textHeight == null ? rowB3ohh.height : rowB3ohh.textHeight, 0, attachmentB3ohh === "trolley" ? 25 : 1.5, 0), scale: numberB3ohh(rowB3ohh.textScale == null ? rowB3ohh.scale : rowB3ohh.textScale, 0.25, 8, 1), rotation: numberB3ohh(rowB3ohh.textRotation == null ? rowB3ohh.rotation : rowB3ohh.textRotation, -180, 180, 0), color: colorB3ohh(rowB3ohh.textColor || rowB3ohh.color, "#10151a"), fillColor: colorB3ohh(rowB3ohh.textFillColor || rowB3ohh.fillColor, ""), order: numberB3ohh(rowB3ohh.textOrder == null ? rowB3ohh.order : rowB3ohh.textOrder, -1000, 1000, indexB3ohh + 1), attachment: attachmentB3ohh, attachmentIndex: attachmentB3ohh === "straight-area" || attachmentB3ohh === "diverted-area" ? 0 : integerB3ohh(rowB3ohh.textAttachmentIndex == null ? rowB3ohh.attachmentIndex : rowB3ohh.textAttachmentIndex, 0, 9, 0), areaState: areaStateB3ohh(rowB3ohh.textAreaState == null ? rowB3ohh.areaState : rowB3ohh.textAreaState), collectionIndex: indexB3ohh }; }); } function normalizeDrawingsB3ohh(rowsB3ohh) { return (Array.isArray(rowsB3ohh) ? rowsB3ohh : []).slice(0, 80).map(function (rowB3ohh, indexB3ohh) { rowB3ohh = rowB3ohh && typeof rowB3ohh === "object" ? rowB3ohh : {}; var kindB3ohh = String(rowB3ohh.drawingKind || rowB3ohh.kind || "brush"); if (kindB3ohh === "line") kindB3ohh = "brush"; if (kindB3ohh === "square") kindB3ohh = "rectangle"; if (["brush", "filled-shape", "rectangle", "circle"].indexOf(kindB3ohh) < 0) kindB3ohh = "brush"; var attachmentB3ohh = String(rowB3ohh.drawingAttachment || rowB3ohh.attachment || "scene"); if (attachmentB3ohh === "straight-person") attachmentB3ohh = "straight-area"; if (attachmentB3ohh === "diverted-person") attachmentB3ohh = "diverted-area"; if (["scene", "trolley", "straight-area", "diverted-area"].indexOf(attachmentB3ohh) < 0) attachmentB3ohh = "scene"; return { slot: String(rowB3ohh.drawingSlot || rowB3ohh.slot || indexB3ohh + 1), kind: kindB3ohh, points: normalizePointsB3ohh(rowB3ohh.drawingPoints || rowB3ohh.points), strokeColor: colorB3ohh(rowB3ohh.strokeColor, "#10151a"), strokeWidth: numberB3ohh(rowB3ohh.strokeWidth, 1, 50, 4), fillColor: colorB3ohh(rowB3ohh.fillColor, "#10151a"), rotation: numberB3ohh(rowB3ohh.drawingRotation == null ? rowB3ohh.rotation : rowB3ohh.drawingRotation, -180, 180, 0), opacity: numberB3ohh(rowB3ohh.drawingOpacity == null ? rowB3ohh.opacity : rowB3ohh.drawingOpacity, 0.05, 1, 1), order: numberB3ohh(rowB3ohh.drawingOrder == null ? rowB3ohh.order : rowB3ohh.drawingOrder, -1000, 1000, indexB3ohh + 1), attachment: attachmentB3ohh, attachmentIndex: attachmentB3ohh === "straight-area" || attachmentB3ohh === "diverted-area" ? 0 : integerB3ohh(rowB3ohh.drawingAttachmentIndex == null ? rowB3ohh.attachmentIndex : rowB3ohh.drawingAttachmentIndex, 0, 9, 0), areaState: areaStateB3ohh(rowB3ohh.drawingAreaState == null ? rowB3ohh.areaState : rowB3ohh.drawingAreaState), collectionIndex: indexB3ohh }; }); } function renderB3ohh() { cancelMotionB3ohh(); runtimeHostB3ohh.innerHTML = "" + '

' + (stateB3ohh.premise ? '

' + escapeB3ohh(stateB3ohh.premise) + "

" : "") + '

' + renderTrackLayerB3ohh() + renderDrawingsB3ohh() + '

' + renderFreeItemsB3ohh() + "

" + renderTrolleyLayerB3ohh() + renderLeverLayerB3ohh() + "

" + renderActionsB3ohh() + renderResultsB3ohh() + '

' + renderPreviewResetB3ohh() + '

' + renderCreateCtaB3ohh() + "

" + "

"; installAssetsB3ohh(); applyGeneratedLayoutB3ohh(); } function stylesB3ohh() { return selectorB3ohh + '{--ink:#10151a;--paper:#fff;color:var(--ink);background:var(--paper);border:2px solid var(--ink);box-sizing:border-box;container-type:inline-size;font-family:Georgia,"Times New Roman",serif;margin:auto;max-width:1100px;overflow:hidden;width:100%}' + selectorB3ohh + " *{box-sizing:border-box}" + selectorB3ohh + " .tp-shell-B3ohh{padding:16px}" + selectorB3ohh + " .tp-shell-B3ohh img{border-radius:0;margin:0;}" + selectorB3ohh + " .tp-premise-B3ohh{font-family:Arial,Helvetica,sans-serif;font-size:clamp(18px,3cqi,28px);line-height:1.2;margin:0 auto 10px;max-width:900px;text-align:center}" + selectorB3ohh + " .tp-canvas-B3ohh{aspect-ratio:1584/760;background:#fff;overflow:hidden;position:relative;touch-action:none;width:100%}" + selectorB3ohh + " .tp-track-object-B3ohh," + selectorB3ohh + " .tp-trolley-object-B3ohh{display:block;position:absolute;transform-origin:50% 70%}" + selectorB3ohh + " .tp-track-object-B3ohh svg," + selectorB3ohh + " .tp-trolley-object-B3ohh svg{display:block;height:100%;overflow:visible;width:100%}" + selectorB3ohh + " .tp-track-svg-B3ohh," + selectorB3ohh + " .tp-trolley-svg-B3ohh{display:block;height:100%;pointer-events:none;user-select:none;width:100%}" + selectorB3ohh + " .tp-track-object-B3ohh{aspect-ratio:1584/583;z-index:1}" + selectorB3ohh + " .tp-track-art-B3ohh," + selectorB3ohh + " .tp-people-layer-B3ohh," + selectorB3ohh + " .tp-person-attachment-layer-B3ohh{inset:0;position:absolute}" + selectorB3ohh + " .tp-track-art-B3ohh{z-index:0}" + selectorB3ohh + " .tp-person-attachment-layer-B3ohh{height:100%;pointer-events:none;width:100%}" + selectorB3ohh + " .tp-person-attachment-layer-B3ohh.is-behind-B3ohh{z-index:1}" + selectorB3ohh + " .tp-people-layer-B3ohh{height:100%;width:100%;z-index:2}" + selectorB3ohh + " .tp-person-attachment-layer-B3ohh.is-front-B3ohh{z-index:3}" + selectorB3ohh + " .tp-person-attachment-anchor-B3ohh{pointer-events:none;position:absolute;transform-origin:50% 100%}" + selectorB3ohh + " .tp-area-state-dead-B3ohh{display:none!important}" + selectorB3ohh + " .tp-track-object-B3ohh.tp-straight-dead-B3ohh .tp-person-area-straight-B3ohh .tp-area-state-alive-B3ohh," + selectorB3ohh + " .tp-track-object-B3ohh.tp-diverted-dead-B3ohh .tp-person-area-diverted-B3ohh .tp-area-state-alive-B3ohh{display:none!important}" + selectorB3ohh + " .tp-track-object-B3ohh.tp-straight-dead-B3ohh .tp-person-area-straight-B3ohh .tp-area-state-dead-B3ohh.tp-image-B3ohh," + selectorB3ohh + " .tp-track-object-B3ohh.tp-diverted-dead-B3ohh .tp-person-area-diverted-B3ohh .tp-area-state-dead-B3ohh.tp-image-B3ohh{display:block!important}" + selectorB3ohh + " .tp-track-object-B3ohh.tp-straight-dead-B3ohh .tp-person-area-straight-B3ohh .tp-area-state-dead-B3ohh.tp-text-B3ohh," + selectorB3ohh + " .tp-track-object-B3ohh.tp-diverted-dead-B3ohh .tp-person-area-diverted-B3ohh .tp-area-state-dead-B3ohh.tp-text-B3ohh{display:flex!important}" + selectorB3ohh + " .tp-track-object-B3ohh.tp-straight-dead-B3ohh .tp-person-area-straight-B3ohh .tp-area-state-dead-B3ohh.tp-attached-drawing-B3ohh," + selectorB3ohh + " .tp-track-object-B3ohh.tp-diverted-dead-B3ohh .tp-person-area-diverted-B3ohh .tp-area-state-dead-B3ohh.tp-attached-drawing-B3ohh{display:block!important}" + selectorB3ohh + " .tp-lever-track-layer-B3ohh{aspect-ratio:1584/583;display:block;pointer-events:none;position:absolute;transform-origin:center;z-index:6}" + selectorB3ohh + " .tp-lever-object-B3ohh{transform-origin:center}" + selectorB3ohh + " .tp-lever-art-B3ohh{height:100%;position:relative;width:100%}" + selectorB3ohh + " .tp-lever-svg-B3ohh{pointer-events:none;user-select:none}" + selectorB3ohh + " .tp-trolley-object-B3ohh{aspect-ratio:533/386;z-index:5}" + selectorB3ohh + " .tp-trolley-object-B3ohh.is-preview-complete-B3ohh{opacity:0}" + selectorB3ohh + " .tp-trolley-motion-B3ohh{height:100%;position:relative;transform:rotate(var(--trolley-rotation));width:100%}" + selectorB3ohh + " .tp-trolley-art-B3ohh{height:100%;position:absolute;width:100%}" + selectorB3ohh + " .tp-attached-layer-B3ohh{inset:0;position:absolute;z-index:2}" + selectorB3ohh + " .tp-free-layer-B3ohh{inset:0;pointer-events:none;position:absolute;z-index:4}" + selectorB3ohh + " .tp-scene-item-B3ohh{pointer-events:auto;position:absolute;transform:translate(-50%,-50%) rotate(var(--rotation));transform-origin:center}" + selectorB3ohh + " .tp-image-B3ohh img{display:block;height:auto;pointer-events:none;width:100%}" + selectorB3ohh + " .tp-text-B3ohh{align-items:center;font-family:Arial,Helvetica,sans-serif;font-size:clamp(13px,calc(2cqi * var(--text-scale)),72px);font-weight:700;justify-content:center;line-height:1.15;overflow-wrap:anywhere;padding:3px 6px;text-align:center}" + selectorB3ohh + " .tp-draw-layer-B3ohh{height:100%;inset:0;pointer-events:none;position:absolute;width:100%;z-index:3}" + selectorB3ohh + " .tp-draw-layer-B3ohh path{pointer-events:all}" + selectorB3ohh + " .tp-attached-drawing-B3ohh{height:100%;inset:0;overflow:visible;pointer-events:none;position:absolute;width:100%}" + selectorB3ohh + " .tp-attached-drawing-B3ohh path{pointer-events:all}" + selectorB3ohh + " .tp-person-B3ohh{fill:#fff;stroke:#10151a;stroke-linecap:round;stroke-linejoin:round;stroke-width:8}" + selectorB3ohh + " .tp-person-face-B3ohh{fill:#10151a;stroke:none}" + selectorB3ohh + " .tp-people-count-B3ohh rect{fill:#fff;stroke:#10151a;stroke-width:4}" + selectorB3ohh + " .tp-people-count-B3ohh text{fill:#10151a;font:700 34px Arial,Helvetica,sans-serif;text-anchor:middle}" + selectorB3ohh + " .tp-actions-B3ohh{display:grid;gap:12px;grid-template-columns:1fr 1fr;margin:12px auto 0;max-width:780px}" + selectorB3ohh + " .tp-actions-B3ohh.is-single-B3ohh{grid-template-columns:1fr;max-width:390px}" + selectorB3ohh + " .tp-action-B3ohh{background:#fff;border:3px solid #10151a;border-radius:6px;color:#10151a;cursor:pointer;font:900 clamp(15px,2.5cqi,20px)/1.1 Arial,sans-serif;min-height:52px;padding:10px;text-transform:uppercase}" + selectorB3ohh + " .tp-action-B3ohh:hover:not(:disabled)," + selectorB3ohh + " .tp-action-B3ohh.is-chosen-B3ohh{background:#10151a;color:#fff}" + selectorB3ohh + " .tp-action-B3ohh:disabled{cursor:default;opacity:.7}" + selectorB3ohh + " .tp-results-B3ohh{display:grid;gap:10px 14px;grid-template-columns:1fr 1fr;margin:0 auto;max-height:0;max-width:780px;opacity:0;overflow:hidden;transition:.35s ease;width:100%}" + selectorB3ohh + " .tp-results-B3ohh.is-visible-B3ohh{margin:14px auto 0;max-height:1000px;opacity:1}" + selectorB3ohh + " .tp-result-head-B3ohh{display:flex;font:800 14px Arial,sans-serif;justify-content:space-between}" + selectorB3ohh + " .tp-result-label-B3ohh{align-items:center;display:flex;flex-wrap:wrap;gap:8px;min-width:0}" + selectorB3ohh + " .tp-result-choice-B3ohh{align-items:center;background:#30353a;border-radius:4px;color:#fff;display:inline-flex;font:600 11px/1 Arial,Helvetica,sans-serif;gap:4px;padding:2px 5px;white-space:nowrap}" + selectorB3ohh + " .tp-result-choice-B3ohh .tp-material-symbol-B3ohh{color:#fff;direction:ltr;display:inline-block;font-family:'Material Symbols Outlined';font-feature-settings:'liga';font-size:16px;font-style:normal;font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 20;font-weight:normal;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap;word-wrap:normal}" + selectorB3ohh + " .tp-result-percent-B3ohh{padding-left:8px;white-space:nowrap}" + selectorB3ohh + " .tp-result-track-B3ohh{background:#e0e5ea;border:none;border-radius:6px;height:34px;margin-top:4px;overflow:hidden;padding:0}" + selectorB3ohh + " .tp-result-fill-B3ohh{background:#10151a;background-image:linear-gradient(90deg,#10151a,#30353a);height:100%;transition:width .5s ease;width:0}" + selectorB3ohh + " .tp-total-B3ohh{font:700 13px Arial,sans-serif;grid-column:1/-1;margin:0;text-align:center}" + selectorB3ohh + " .tp-status-B3ohh{font:700 12px Arial,sans-serif;margin:8px 0 0;min-height:17px;text-align:center}" + selectorB3ohh + " .tp-preview-reset-B3ohh{appearance:none;align-self:flex-start;background:#f0f2f4;border:1px solid #dadcde;border-radius:999px;color:inherit;cursor:pointer;display:block;font:700 13px Arial,Helvetica,sans-serif;margin:12px 0 0;padding:7px 12px}" + selectorB3ohh + " .tp-preview-reset-B3ohh:hover{border-color:#7bcdfe}" + selectorB3ohh + " .tp-preview-reset-B3ohh:focus-visible{outline:2px solid #0af;outline-offset:2px}" + selectorB3ohh + " .tp-create-cta-B3ohh{align-items:center;background:#e9ecef;background:linear-gradient(170deg,#f0f3f6,#e9edf1);border-radius:9px;box-sizing:border-box;display:flex;flex-direction:column;gap:10px;justify-content:space-between;margin-top:8px;padding:12px 8px;position:relative}" + selectorB3ohh + " .tp-create-cta-text-B3ohh{color:#10151a;font:600 19px/1.2 Arial,Helvetica,sans-serif}" + selectorB3ohh + " .tp-create-cta-actions-B3ohh{align-items:center;display:flex;gap:6px;justify-content:center;width:100%}" + selectorB3ohh + " .tp-create-cta-close-B3ohh{align-items:center;background:transparent;border:0;color:#70757a;cursor:pointer;display:inline-flex;height:28px;justify-content:center;line-height:1;padding:0;position:absolute;right:3px;top:3px;width:28px}" + selectorB3ohh + " .tp-create-cta-close-B3ohh:hover{color:#101828}" + selectorB3ohh + " .tp-create-cta-close-B3ohh svg{height:22px;width:22px}" + selectorB3ohh + " .tp-create-cta-start-B3ohh{align-items:center;background:#0af;border:1px solid #0af;border-radius:5px;box-sizing:border-box;color:#fff;cursor:pointer;display:flex;font:600 15px/1.2 Arial,Helvetica,sans-serif;gap:10px;height:40px;justify-content:center;padding:4px 10px 4px 6px;transition:all .2s ease}" + selectorB3ohh + " .tp-create-cta-start-B3ohh:hover{background:#05b0ff;border-color:#05b0ff;box-shadow:0 5px 13px rgba(0,10,20,.15)}" + selectorB3ohh + " .tp-create-cta-start-B3ohh img{border:none;border-radius:2px;height:30px;margin:0;width:auto}" + selectorB3ohh + " .tp-context-list-display .tp-shell-B3ohh{padding:10px}" + "@media(max-width:766px){" + selectorB3ohh + " .tp-results-B3ohh{grid-template-columns:1fr}" + selectorB3ohh + " .tp-results-B3ohh>div," + selectorB3ohh + " .tp-result-track-B3ohh{width:100%}" + selectorB3ohh + " .tp-total-B3ohh{grid-column:1}}" + "@media(max-width:620px){" + selectorB3ohh + " .tp-shell-B3ohh{padding:10px 7px}" + selectorB3ohh + " .tp-actions-B3ohh{gap:7px}}" + "@media(max-width:480px){" + selectorB3ohh + " .tp-actions-B3ohh{grid-template-columns:1fr}}" + "@media(prefers-reduced-motion:reduce){" + selectorB3ohh + " *{animation:none!important;transition-duration:.01ms!important}}"; } function renderTrackLayerB3ohh() { if (!stateB3ohh.showTrack) return ""; var deadClassesB3ohh = (peopleAreDeadB3ohh("straight") ? " tp-straight-dead-B3ohh" : "") + (peopleAreDeadB3ohh("diverted") ? " tp-diverted-dead-B3ohh" : ""); return '

' + '

' + renderPersonAttachmentLayerB3ohh(false) + '" + renderPersonAttachmentLayerB3ohh(true) + "

"; } function personDefB3ohh() { return ''; } function renderPeopleB3ohh(sideB3ohh, countB3ohh) { var outB3ohh = ""; var visibleCountB3ohh = visiblePeopleCountB3ohh(countB3ohh); var personTargetB3ohh = peopleAreDeadB3ohh(sideB3ohh) ? "-person-dead" : "-person"; for (var iB3ohh = 0; iB3ohh < visibleCountB3ohh; iB3ohh += 1) { var placementB3ohh = personPlacementB3ohh(sideB3ohh, countB3ohh, iB3ohh); outB3ohh += ''; } if (peopleCountGreaterThanB3ohh(countB3ohh, 5)) { var countLabelB3ohh = formatPeopleCountB3ohh(countB3ohh); var badgeWidthB3ohh = Math.max(96, Math.min(310, countLabelB3ohh.length * 22 + 34)); var badgeYB3ohh = sideB3ohh === "straight" ? 315 : 43; var startXB3ohh = sideB3ohh === "straight" ? 1101 : 1300; outB3ohh += '' + escapeB3ohh(countLabelB3ohh) + ""; } return outB3ohh; } function personPlacementB3ohh(sideB3ohh, countB3ohh, indexB3ohh) { var visibleCountB3ohh = visiblePeopleCountB3ohh(countB3ohh); var startXB3ohh = sideB3ohh === "straight" ? 1101 : 1300; var stepXB3ohh = sideB3ohh === "straight" ? Math.min(72, 300 / Math.max(1, visibleCountB3ohh - 1)) : Math.min(68, 260 / Math.max(1, visibleCountB3ohh - 1)); var xB3ohh = startXB3ohh + (indexB3ohh - (visibleCountB3ohh - 1) / 2) * stepXB3ohh; return { x: xB3ohh, y: sideB3ohh === "straight" ? 475 + (xB3ohh - startXB3ohh) * 0.3 : 200 + (xB3ohh - startXB3ohh) * 0.18, rotation: sideB3ohh === "straight" ? 18 : 10 }; } function peopleAreaLayoutB3ohh(sideB3ohh) { return sideB3ohh === "straight" ? { x: 1101, y: 475, width: 480, height: 270, rotation: 18 } : { x: 1300, y: 200, width: 420, height: 250, rotation: 10 }; } function peopleAreaLayoutClassB3ohh(sideB3ohh) { return tokenB3ohh + "-people-area-" + sideB3ohh; } function renderPersonAttachmentLayerB3ohh(frontB3ohh) { var anchorsB3ohh = ""; ["diverted", "straight"].forEach(function (sideB3ohh) { var attachmentB3ohh = sideB3ohh + "-area"; var itemsB3ohh = []; stateB3ohh.sceneImages.forEach(function (itemB3ohh) { if (itemB3ohh.image && itemB3ohh.attachment === attachmentB3ohh && itemB3ohh.order >= 0 === frontB3ohh) itemsB3ohh.push({ order: itemB3ohh.order, markup: imageMarkupB3ohh(itemB3ohh, attachmentB3ohh) }); }); stateB3ohh.sceneTexts.forEach(function (itemB3ohh) { if (itemB3ohh.content && itemB3ohh.attachment === attachmentB3ohh && itemB3ohh.order >= 0 === frontB3ohh) itemsB3ohh.push({ order: itemB3ohh.order, markup: textMarkupB3ohh(itemB3ohh, attachmentB3ohh) }); }); stateB3ohh.sceneDrawings.forEach(function (itemB3ohh) { if (itemB3ohh.points.length > 1 && itemB3ohh.attachment === attachmentB3ohh && itemB3ohh.order >= 0 === frontB3ohh) itemsB3ohh.push({ order: itemB3ohh.order, markup: drawingMarkupB3ohh(itemB3ohh, attachmentB3ohh) }); }); if (!frontB3ohh && !itemsB3ohh.length) return; anchorsB3ohh += '

" + itemsB3ohh.sort(function (aB3ohh, bB3ohh) { return aB3ohh.order - bB3ohh.order; }).map(function (entryB3ohh) { return entryB3ohh.markup; }).join("") + "

"; }); return '

' + anchorsB3ohh + "

"; } function peopleAreDeadB3ohh(sideB3ohh) { if (authoringPeoplePreviewB3ohh) return authoringPeoplePreviewB3ohh[sideB3ohh] === "dead"; if (stateB3ohh.experienceMode !== "static") return false; return stateB3ohh.staticPeopleStatus === "all-dead" || stateB3ohh.staticPeopleStatus === (sideB3ohh === "straight" ? "straight-dead" : "diverted-dead"); } function renderTrolleyLayerB3ohh() { if (!stateB3ohh.showTrolley) return ""; return '

' + renderAttachedItemsB3ohh() + "

"; } function renderLeverLayerB3ohh() { if (!stateB3ohh.showTrack) return ""; return '

'; } function applyGeneratedLayoutB3ohh() { if (layoutFrameB3ohh != null && window.cancelAnimationFrame) window.cancelAnimationFrame(layoutFrameB3ohh); if (layoutObserverB3ohh) layoutObserverB3ohh.disconnect(); layoutFrameB3ohh = null; layoutObserverB3ohh = null; var canvasB3ohh = rootB3ohh.querySelector(".tp-canvas-B3ohh"); if (!canvasB3ohh) return; var trackClassB3ohh = tokenB3ohh + "-track-layout"; var trolleyClassB3ohh = tokenB3ohh + "-trolley-layout"; var leverTrackClassB3ohh = tokenB3ohh + "-lever-track-layout"; var leverClassB3ohh = tokenB3ohh + "-lever-layout"; var divertedResultClassB3ohh = resultWidthClassB3ohh("diverted"); var straightResultClassB3ohh = resultWidthClassB3ohh("straight"); var resultTotalB3ohh = Math.max(storeB3ohh.total, storeB3ohh.counts[0] + storeB3ohh.counts[1]); var resultPercentsB3ohh = percentagesB3ohh(storeB3ohh.counts, resultTotalB3ohh); var itemLayoutClassesB3ohh = []; var itemLayoutRulesB3ohh = ""; ["diverted", "straight"].forEach(function (sideB3ohh) { var areaB3ohh = peopleAreaLayoutB3ohh(sideB3ohh), classNameB3ohh = peopleAreaLayoutClassB3ohh(sideB3ohh); itemLayoutClassesB3ohh.push(classNameB3ohh); itemLayoutRulesB3ohh += selectorB3ohh + " ." + classNameB3ohh + "{display:block;height:" + areaB3ohh.height / 583 * 100 + "%;left:" + areaB3ohh.x / 1584 * 100 + "%;top:" + areaB3ohh.y / 583 * 100 + "%;transform:translate(-50%,-100%) rotate(" + areaB3ohh.rotation + "deg);width:" + areaB3ohh.width / 1584 * 100 + "%;}"; }); stateB3ohh.sceneImages.forEach(function (itemB3ohh) { if (!itemB3ohh.image) return; var classNameB3ohh = imageLayoutClassB3ohh(itemB3ohh); itemLayoutClassesB3ohh.push(classNameB3ohh); itemLayoutRulesB3ohh += selectorB3ohh + " ." + classNameB3ohh + "{display:block;left:" + itemB3ohh.x * 100 + "%;top:" + itemB3ohh.y * 100 + "%;width:" + itemB3ohh.width * 100 + "%;--rotation:" + itemB3ohh.rotation + "deg;}"; }); stateB3ohh.sceneTexts.forEach(function (itemB3ohh) { if (!itemB3ohh.content) return; var classNameB3ohh = textLayoutClassB3ohh(itemB3ohh); itemLayoutClassesB3ohh.push(classNameB3ohh); itemLayoutRulesB3ohh += selectorB3ohh + " ." + classNameB3ohh + "{display:flex;left:" + itemB3ohh.x * 100 + "%;min-height:" + itemB3ohh.height * 100 + "%;top:" + itemB3ohh.y * 100 + "%;width:" + itemB3ohh.width * 100 + "%;--rotation:" + itemB3ohh.rotation + "deg;--text-scale:" + itemB3ohh.scale + ";color:" + itemB3ohh.color + ";background-color:" + (itemB3ohh.fillColor || "transparent") + ";}"; }); var generatedStyleB3ohh = document.createElement("style"); generatedStyleB3ohh.setAttribute("data-trolley-layout-B3ohh", tokenB3ohh); generatedStyleB3ohh.textContent = selectorB3ohh + " ." + trackClassB3ohh + "," + selectorB3ohh + " ." + leverTrackClassB3ohh + "{display:block;height:" + 76.7105263158 * stateB3ohh.trackScale + "%;left:" + stateB3ohh.trackX * 100 + "%;top:" + stateB3ohh.trackY * 100 + "%;transform:rotate(" + stateB3ohh.trackRotation + "deg);transform-origin:center;width:" + stateB3ohh.trackScale * 100 + "%;}" + selectorB3ohh + " ." + trolleyClassB3ohh + "{--trolley-rotation:" + stateB3ohh.trolleyRotation + "deg;display:block;height:" + 50.7909983213 * stateB3ohh.trolleyScale + "%;left:" + stateB3ohh.trolleyX * 100 + "%;top:" + stateB3ohh.trolleyY * 100 + "%;width:" + 33.65 * stateB3ohh.trolleyScale + "%;}" + selectorB3ohh + " ." + leverClassB3ohh + "{display:block;height:44.2539%;left:20%;position:absolute;top:50%;width:16.1616%;}" + selectorB3ohh + " ." + divertedResultClassB3ohh + "{width:" + resultPercentsB3ohh[1] + "%;}" + selectorB3ohh + " ." + straightResultClassB3ohh + "{width:" + resultPercentsB3ohh[0] + "%;}" + itemLayoutRulesB3ohh; runtimeHostB3ohh.appendChild(generatedStyleB3ohh); var lastWidthB3ohh = -1; var lastHeightB3ohh = -1; function activateLayoutB3ohh() { var trackB3ohh = rootB3ohh.querySelector(".tp-track-object-B3ohh"); var trolleyB3ohh = rootB3ohh.querySelector(".tp-trolley-object-B3ohh"); var leverTrackB3ohh = rootB3ohh.querySelector(".tp-lever-track-layer-B3ohh"); var leverB3ohh = rootB3ohh.querySelector(".tp-lever-object-B3ohh"); var itemLayoutsB3ohh = itemLayoutClassesB3ohh.map(function (classNameB3ohh) { return { className: classNameB3ohh, nodes: Array.prototype.slice.call(rootB3ohh.querySelectorAll("." + classNameB3ohh)) }; }); if (trackB3ohh) trackB3ohh.classList.remove(trackClassB3ohh); if (trolleyB3ohh) trolleyB3ohh.classList.remove(trolleyClassB3ohh); if (leverTrackB3ohh) leverTrackB3ohh.classList.remove(leverTrackClassB3ohh); if (leverB3ohh) leverB3ohh.classList.remove(leverClassB3ohh); itemLayoutsB3ohh.forEach(function (layoutB3ohh) { layoutB3ohh.nodes.forEach(function (nodeB3ohh) { nodeB3ohh.classList.remove(layoutB3ohh.className); }); }); void canvasB3ohh.offsetWidth; if (trackB3ohh) trackB3ohh.classList.add(trackClassB3ohh); if (trolleyB3ohh) trolleyB3ohh.classList.add(trolleyClassB3ohh); if (leverTrackB3ohh) leverTrackB3ohh.classList.add(leverTrackClassB3ohh); if (leverB3ohh) leverB3ohh.classList.add(leverClassB3ohh); itemLayoutsB3ohh.forEach(function (layoutB3ohh) { layoutB3ohh.nodes.forEach(function (nodeB3ohh) { nodeB3ohh.classList.add(layoutB3ohh.className); }); }); if (revealedB3ohh) activateResultWidthsB3ohh(); rootB3ohh.dispatchEvent(new CustomEvent("trolley-rendered-B3ohh")); } layoutFrameB3ohh = window.requestAnimationFrame ? window.requestAnimationFrame(activateLayoutB3ohh) : null; if (!window.requestAnimationFrame) activateLayoutB3ohh(); if (typeof window.ResizeObserver === "function") { layoutObserverB3ohh = new ResizeObserver(function (entriesB3ohh) { var rectB3ohh = entriesB3ohh[0] && entriesB3ohh[0].contentRect; if (!rectB3ohh || rectB3ohh.width === lastWidthB3ohh && rectB3ohh.height === lastHeightB3ohh) return; lastWidthB3ohh = rectB3ohh.width; lastHeightB3ohh = rectB3ohh.height; activateLayoutB3ohh(); }); layoutObserverB3ohh.observe(canvasB3ohh); } } function renderFreeItemsB3ohh() { var allItemsB3ohh = []; stateB3ohh.sceneImages.forEach(function (itemB3ohh) { if (!itemB3ohh.image || itemB3ohh.attachment !== "scene") return; allItemsB3ohh.push({ order: itemB3ohh.order, markup: imageMarkupB3ohh(itemB3ohh, "scene") }); }); stateB3ohh.sceneTexts.forEach(function (itemB3ohh) { if (itemB3ohh.content && itemB3ohh.attachment === "scene") allItemsB3ohh.push({ order: itemB3ohh.order, markup: textMarkupB3ohh(itemB3ohh, "scene") }); }); return allItemsB3ohh.sort(function (aB3ohh, bB3ohh) { return aB3ohh.order - bB3ohh.order; }).map(function (itemB3ohh) { return itemB3ohh.markup; }).join(""); } function renderAttachedItemsB3ohh() { var attachedB3ohh = []; stateB3ohh.sceneImages.forEach(function (itemB3ohh) { if (itemB3ohh.image && itemB3ohh.attachment === "trolley") attachedB3ohh.push({ order: itemB3ohh.order, markup: imageMarkupB3ohh(itemB3ohh, "trolley") }); }); stateB3ohh.sceneTexts.forEach(function (itemB3ohh) { if (itemB3ohh.content && itemB3ohh.attachment === "trolley") attachedB3ohh.push({ order: itemB3ohh.order, markup: textMarkupB3ohh(itemB3ohh, "trolley") }); }); stateB3ohh.sceneDrawings.forEach(function (itemB3ohh) { if (itemB3ohh.points.length > 1 && itemB3ohh.attachment === "trolley") attachedB3ohh.push({ order: itemB3ohh.order, markup: drawingMarkupB3ohh(itemB3ohh, "trolley") }); }); return attachedB3ohh.sort(function (aB3ohh, bB3ohh) { return aB3ohh.order - bB3ohh.order; }).map(function (itemB3ohh) { return itemB3ohh.markup; }).join(""); } function imageLayoutClassB3ohh(itemB3ohh) { return tokenB3ohh + "-image-layout-" + itemB3ohh.collectionIndex; } function textLayoutClassB3ohh(itemB3ohh) { return tokenB3ohh + "-text-layout-" + itemB3ohh.collectionIndex; } function imageMarkupB3ohh(itemB3ohh, attachmentB3ohh) { return '

'; } function textMarkupB3ohh(itemB3ohh, attachmentB3ohh) { return '

' + escapeB3ohh(itemB3ohh.content) + "

"; } function renderDrawingsB3ohh() { var pathsB3ohh = stateB3ohh.sceneDrawings.filter(function (itemB3ohh) { return itemB3ohh.points.length > 1 && itemB3ohh.attachment === "scene"; }).sort(function (aB3ohh, bB3ohh) { return aB3ohh.order - bB3ohh.order; }).map(function (itemB3ohh) { return drawingPathMarkupB3ohh(itemB3ohh, "scene"); }).join(""); return '"; } function drawingMarkupB3ohh(itemB3ohh, attachmentB3ohh) { return '"; } function areaVisibilityClassB3ohh(itemB3ohh, attachmentB3ohh) { return attachmentB3ohh === "straight-area" || attachmentB3ohh === "diverted-area" ? "tp-area-state-" + areaStateB3ohh(itemB3ohh.areaState) + "-B3ohh" : ""; } function drawingPathMarkupB3ohh(itemB3ohh, attachmentB3ohh) { var dB3ohh = drawingPathB3ohh(itemB3ohh.kind, itemB3ohh.points), centerB3ohh = drawingCenterB3ohh(itemB3ohh.points), widthB3ohh = itemB3ohh.strokeWidth; if (attachmentB3ohh === "trolley") widthB3ohh /= Math.max(0.01, Math.sqrt(0.3365 * 0.507909983213) * stateB3ohh.trolleyScale);else if (attachmentB3ohh === "straight-area" || attachmentB3ohh === "diverted-area") widthB3ohh /= Math.max(0.01, Math.sqrt((attachmentB3ohh === "straight-area" ? 480 / 1584 : 420 / 1584) * (attachmentB3ohh === "straight-area" ? 270 / 583 : 250 / 583)) * stateB3ohh.trackScale); return '= 0 ? itemB3ohh.fillColor : "none") + '" stroke="' + itemB3ohh.strokeColor + '" stroke-width="' + widthB3ohh + '" stroke-linecap="round" stroke-linejoin="round" opacity="' + itemB3ohh.opacity + '">'; } function drawingPathB3ohh(kindB3ohh, pointsB3ohh) { if (!pointsB3ohh || pointsB3ohh.length < 2) return ""; if (kindB3ohh === "rectangle" || kindB3ohh === "circle") { var firstB3ohh = pointsB3ohh[0], lastB3ohh = pointsB3ohh[pointsB3ohh.length - 1]; var x1B3ohh = firstB3ohh[0] * 1584, y1B3ohh = firstB3ohh[1] * 760, x2B3ohh = lastB3ohh[0] * 1584, y2B3ohh = lastB3ohh[1] * 760; if (kindB3ohh === "rectangle") return "M" + x1B3ohh + " " + y1B3ohh + " H" + x2B3ohh + " V" + y2B3ohh + " H" + x1B3ohh + " Z"; var cxB3ohh = (x1B3ohh + x2B3ohh) / 2, cyB3ohh = (y1B3ohh + y2B3ohh) / 2, rxB3ohh = Math.abs(x2B3ohh - x1B3ohh) / 2, ryB3ohh = Math.abs(y2B3ohh - y1B3ohh) / 2; return "M" + (cxB3ohh - rxB3ohh) + " " + cyB3ohh + " A" + rxB3ohh + " " + ryB3ohh + " 0 1 0 " + (cxB3ohh + rxB3ohh) + " " + cyB3ohh + " A" + rxB3ohh + " " + ryB3ohh + " 0 1 0 " + (cxB3ohh - rxB3ohh) + " " + cyB3ohh + " Z"; } var pathB3ohh = pointsB3ohh.map(function (pointB3ohh, indexB3ohh) { return (indexB3ohh ? "L" : "M") + Math.round(pointB3ohh[0] * 1584) + " " + Math.round(pointB3ohh[1] * 760); }).join(" "); return kindB3ohh === "filled-shape" ? pathB3ohh + " Z" : pathB3ohh; } function drawingCenterB3ohh(pointsB3ohh) { var xsB3ohh = pointsB3ohh.map(function (pointB3ohh) { return pointB3ohh[0] * 1584; }); var ysB3ohh = pointsB3ohh.map(function (pointB3ohh) { return pointB3ohh[1] * 760; }); return { x: (Math.min.apply(Math, xsB3ohh) + Math.max.apply(Math, xsB3ohh)) / 2, y: (Math.min.apply(Math, ysB3ohh) + Math.max.apply(Math, ysB3ohh)) / 2 }; } function installAssetsB3ohh() { var trackHostB3ohh = rootB3ohh.querySelector(".tp-track-art-B3ohh"); var trolleyHostB3ohh = rootB3ohh.querySelector(".tp-trolley-art-B3ohh"); var leverHostB3ohh = rootB3ohh.querySelector(".tp-lever-art-B3ohh"); if (trackHostB3ohh) trackHostB3ohh.appendChild(assetImageB3ohh(trackAssetB3ohh, "tp-track-svg-B3ohh", "")); if (trolleyHostB3ohh) trolleyHostB3ohh.appendChild(assetImageB3ohh(trolleyStaticAssetB3ohh, "tp-trolley-svg-B3ohh", "")); if (leverHostB3ohh) { var leverImageB3ohh = assetImageB3ohh(stateB3ohh.showOperator ? personLeverAssetB3ohh : leverAssetB3ohh, "tp-lever-svg-B3ohh", ""); if (!stateB3ohh.showOperator) leverImageB3ohh.style.cssText = "display:block;height:54.06%;left:0;position:absolute;top:45.94%;width:42.95%;"; leverHostB3ohh.appendChild(leverImageB3ohh); } preloadAssetB3ohh(trolleyAnimatedAssetB3ohh); preloadAssetB3ohh(tiedDeadPersonAssetB3ohh); prepareLeverAnimationB3ohh(); } function preloadAssetB3ohh(srcB3ohh) { if (!srcB3ohh || assetPreloadStartedB3ohh[srcB3ohh]) return; assetPreloadStartedB3ohh[srcB3ohh] = true; var preloadB3ohh = document.createElement("link"); preloadB3ohh.rel = "preload"; preloadB3ohh.as = "image"; preloadB3ohh.href = srcB3ohh; assetPreloadsB3ohh.push(preloadB3ohh); preloadB3ohh.onload = preloadB3ohh.onerror = function () { var indexB3ohh = assetPreloadsB3ohh.indexOf(preloadB3ohh); if (indexB3ohh >= 0) assetPreloadsB3ohh.splice(indexB3ohh, 1); if (preloadB3ohh.parentNode) preloadB3ohh.parentNode.removeChild(preloadB3ohh); }; (document.head || document.documentElement).appendChild(preloadB3ohh); } function nextLeverAnimationSrcB3ohh() { var baseSrcB3ohh = stateB3ohh.showOperator ? personLeverAnimatedAssetB3ohh : leverAnimatedAssetB3ohh; leverPlayTokenB3ohh += 1; return baseSrcB3ohh + (baseSrcB3ohh.indexOf("?") < 0 ? "?" : "&") + "tpPlay=" + encodeURIComponent(tokenB3ohh + "-" + leverPlayTokenB3ohh + "-" + Date.now()); } function prepareLeverAnimationB3ohh() { preloadAssetB3ohh(stateB3ohh.showOperator ? personLeverAnimatedAssetB3ohh : leverAnimatedAssetB3ohh); } function assetImageB3ohh(srcB3ohh, classNameB3ohh, altB3ohh) { var imageB3ohh = document.createElement("img"); imageB3ohh.className = classNameB3ohh; imageB3ohh.src = srcB3ohh; imageB3ohh.alt = altB3ohh || ""; imageB3ohh.draggable = false; imageB3ohh.style.cssText = "display:block;height:100%;width:100%;"; return imageB3ohh; } function setTrolleyAssetB3ohh(animatedB3ohh) { var imageB3ohh = rootB3ohh.querySelector(".tp-trolley-svg-B3ohh"); if (!imageB3ohh) return; var nextSrcB3ohh = animatedB3ohh ? trolleyAnimatedAssetB3ohh : trolleyStaticAssetB3ohh; if (imageB3ohh.getAttribute("src") !== nextSrcB3ohh) imageB3ohh.setAttribute("src", nextSrcB3ohh); } function setLeverAssetB3ohh(animatedB3ohh) { var leverHostB3ohh = rootB3ohh.querySelector(".tp-lever-art-B3ohh"); var imageB3ohh = leverHostB3ohh && leverHostB3ohh.querySelector(".tp-lever-svg-B3ohh:not(.is-loading-B3ohh)"); if (!imageB3ohh) return; var nextSrcB3ohh = stateB3ohh.showOperator ? animatedB3ohh ? personLeverAnimatedAssetB3ohh : personLeverAssetB3ohh : animatedB3ohh ? leverAnimatedAssetB3ohh : leverAssetB3ohh; if (animatedB3ohh) { nextSrcB3ohh = nextLeverAnimationSrcB3ohh(); var playTokenB3ohh = leverPlayTokenB3ohh; var replacementB3ohh = assetImageB3ohh(nextSrcB3ohh, "tp-lever-svg-B3ohh is-loading-B3ohh", ""); if (stateB3ohh.showOperator) { replacementB3ohh.style.cssText = "display:block;height:100%;inset:0;opacity:0;position:absolute;width:100%;"; } else { replacementB3ohh.style.cssText = "display:block;height:54.06%;left:0;opacity:0;position:absolute;top:45.94%;width:42.95%;"; } replacementB3ohh.onload = function () { if (playTokenB3ohh !== leverPlayTokenB3ohh || !replacementB3ohh.isConnected) return; window.requestAnimationFrame(function () { if (playTokenB3ohh !== leverPlayTokenB3ohh || !replacementB3ohh.isConnected) return; replacementB3ohh.style.opacity = "1"; replacementB3ohh.classList.remove("is-loading-B3ohh"); Array.prototype.forEach.call(leverHostB3ohh.querySelectorAll(".tp-lever-svg-B3ohh"), function (oldImageB3ohh) { if (oldImageB3ohh !== replacementB3ohh) oldImageB3ohh.remove(); }); }); }; replacementB3ohh.onerror = function () { if (replacementB3ohh.parentNode) replacementB3ohh.parentNode.removeChild(replacementB3ohh); }; leverHostB3ohh.appendChild(replacementB3ohh); return; } leverPlayTokenB3ohh += 1; Array.prototype.forEach.call(leverHostB3ohh.querySelectorAll(".tp-lever-svg-B3ohh.is-loading-B3ohh"), function (loadingImageB3ohh) { loadingImageB3ohh.remove(); }); if (imageB3ohh.getAttribute("src") !== nextSrcB3ohh) imageB3ohh.setAttribute("src", nextSrcB3ohh); } function renderActionsB3ohh() { if (stateB3ohh.experienceMode === "static") return ""; if (stateB3ohh.experienceMode === "demonstration") return '

'; return '

"; } function renderResultsB3ohh() { if (stateB3ohh.experienceMode !== "poll") return ""; var totalB3ohh = Math.max(storeB3ohh.total, storeB3ohh.counts[0] + storeB3ohh.counts[1]); var percentsB3ohh = percentagesB3ohh(storeB3ohh.counts, totalB3ohh); return '

' + resultMarkupB3ohh(stateB3ohh.divertedButtonText, percentsB3ohh[1], "diverted") + resultMarkupB3ohh(stateB3ohh.straightButtonText, percentsB3ohh[0], "straight") + '

' + totalB3ohh.toLocaleString() + " " + (totalB3ohh === 1 ? "vote" : "votes") + "

"; } function renderPreviewResetB3ohh() { if (!isPreviewB3ohh || !actionTakenB3ohh || choiceB3ohh === null) return ""; return ''; } function shouldShowCreateCtaB3ohh() { return !createCtaDismissedB3ohh && contextB3ohh === "post-display" && stateB3ohh.experienceMode === "poll" && choiceB3ohh !== null && revealedB3ohh && typeof window.fgAddComponentToPost === "function"; } function renderCreateCtaB3ohh() { if (!shouldShowCreateCtaB3ohh()) return ""; return '

Make your own

'; } function updateCreateCtaB3ohh() { var slotB3ohh = rootB3ohh.querySelector(".tp-create-cta-slot-B3ohh"); if (slotB3ohh) slotB3ohh.innerHTML = renderCreateCtaB3ohh(); } function resultWidthClassB3ohh(sideB3ohh) { return tokenB3ohh + "-" + sideB3ohh + "-result-width"; } function activateResultWidthsB3ohh() { var resultsB3ohh = rootB3ohh.querySelector(".tp-results-B3ohh"), divertedB3ohh = rootB3ohh.querySelector('[data-result-side-B3ohh="diverted"]'), straightB3ohh = rootB3ohh.querySelector('[data-result-side-B3ohh="straight"]'), divertedClassB3ohh = resultWidthClassB3ohh("diverted"), straightClassB3ohh = resultWidthClassB3ohh("straight"); if (!resultsB3ohh || !divertedB3ohh || !straightB3ohh) return; if (divertedB3ohh.classList.contains(divertedClassB3ohh) && straightB3ohh.classList.contains(straightClassB3ohh)) return; if (resultWidthFrameB3ohh != null && typeof window.cancelAnimationFrame === "function") window.cancelAnimationFrame(resultWidthFrameB3ohh); divertedB3ohh.classList.remove(divertedClassB3ohh); straightB3ohh.classList.remove(straightClassB3ohh); void resultsB3ohh.offsetWidth; function applyWidthsB3ohh() { resultWidthFrameB3ohh = null; divertedB3ohh.classList.add(divertedClassB3ohh); straightB3ohh.classList.add(straightClassB3ohh); } resultWidthFrameB3ohh = window.requestAnimationFrame ? window.requestAnimationFrame(applyWidthsB3ohh) : null; if (!window.requestAnimationFrame) applyWidthsB3ohh(); } function resultMarkupB3ohh(labelB3ohh, percentB3ohh, sideB3ohh) { var selectedB3ohh = choiceB3ohh === (sideB3ohh === "diverted" ? 1 : 0); return '

' + escapeB3ohh(labelB3ohh) + "" + (selectedB3ohh ? 'Your choice' : "") + '' + percentB3ohh + '%

'; } function ensureMaterialSymbolsB3ohh() { var markerB3ohh = "data-tp-material-symbols-B3ohh", hrefB3ohh = "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined", existingB3ohh = document.querySelector("link[" + markerB3ohh + "]"); if (existingB3ohh) { if (existingB3ohh.href !== hrefB3ohh) existingB3ohh.href = hrefB3ohh; return; } var linkB3ohh = document.createElement("link"); linkB3ohh.rel = "stylesheet"; linkB3ohh.href = hrefB3ohh; linkB3ohh.setAttribute(markerB3ohh, ""); (document.head || document.documentElement).appendChild(linkB3ohh); } function handleRuntimeClickB3ohh(eventB3ohh) { var buttonB3ohh = eventB3ohh.target.closest("[data-runtime-action-B3ohh]"); if (!buttonB3ohh) return; var actionB3ohh = buttonB3ohh.dataset.runtimeActionB3ohh; if (actionB3ohh === "reset-preview") { resetPreviewB3ohh(); return; } if (actionB3ohh === "dismiss-create-cta") { createCtaDismissedB3ohh = true; updateCreateCtaB3ohh(); return; } if (actionB3ohh === "create-trolley") { if (typeof window.fgAddComponentToPost === "function") try { window.fgAddComponentToPost(dataB3ohh_config); } catch (errorB3ohh) {} return; } if (actionB3ohh === "demonstrate") { actionTakenB3ohh = true; runChoiceB3ohh(stateB3ohh.demonstrationChoice === "diverted" ? 1 : 0, false); } if (actionB3ohh === "vote") attemptVoteB3ohh(buttonB3ohh.dataset.routeB3ohh === "diverted" ? 1 : 0); } function attemptVoteB3ohh(nextChoiceB3ohh) { if (choiceB3ohh !== null || animatingB3ohh) return; if (isPersistedB3ohh && (configB3ohh.loggedInUserId == null || configB3ohh.loggedInUserId === "")) { statusB3ohh("Sign up or log in to cast your vote."); if (typeof window.fgRequireSignup === "function") try { window.fgRequireSignup(); } catch (errorB3ohh) {} return; } actionTakenB3ohh = true; choiceB3ohh = nextChoiceB3ohh; storeB3ohh.counts[nextChoiceB3ohh] += 1; storeB3ohh.total = Math.max(storeB3ohh.total + 1, storeB3ohh.counts[0] + storeB3ohh.counts[1]); renderB3ohh(); startChoiceAfterRenderB3ohh(nextChoiceB3ohh); if (!isPreviewB3ohh && isPersistedB3ohh) saveVoteB3ohh(nextChoiceB3ohh); } function startChoiceAfterRenderB3ohh(nextChoiceB3ohh) { if (typeof window.requestAnimationFrame !== "function") { runChoiceB3ohh(nextChoiceB3ohh, true); return; } choiceStartFrameB3ohh = window.requestAnimationFrame(function () { choiceStartFrameB3ohh = null; if (choiceB3ohh === nextChoiceB3ohh && actionTakenB3ohh) runChoiceB3ohh(nextChoiceB3ohh, true); }); } function runChoiceB3ohh(nextChoiceB3ohh, keepChoiceB3ohh) { cancelMotionB3ohh(); motionCompletedB3ohh = false; resetPeopleB3ohh(); var trolleyB3ohh = rootB3ohh.querySelector(".tp-trolley-object-B3ohh"); if (trolleyB3ohh) { trolleyB3ohh.classList.remove("is-preview-complete-B3ohh"); trolleyB3ohh.style.opacity = "1"; } setLeverAssetB3ohh(nextChoiceB3ohh === 1); if (!trolleyB3ohh || !canAnimateB3ohh() || reduceMotionB3ohh) { impactB3ohh(nextChoiceB3ohh); revealedB3ohh = keepChoiceB3ohh; if (keepChoiceB3ohh) { var resultsNowB3ohh = rootB3ohh.querySelector(".tp-results-B3ohh"); if (resultsNowB3ohh) resultsNowB3ohh.classList.add("is-visible-B3ohh"); activateResultWidthsB3ohh(); } updateCreateCtaB3ohh(); return; } animatingB3ohh = true; var leverDelayB3ohh = nextChoiceB3ohh === 1 ? 500 : 0; function beginTrolleyTravelB3ohh() { setTrolleyAssetB3ohh(true); trolleyB3ohh.classList.add("is-moving-B3ohh"); void trolleyB3ohh.offsetWidth; var widthB3ohh = rootB3ohh.querySelector(".tp-canvas-B3ohh").getBoundingClientRect().width; var pointsB3ohh = nextChoiceB3ohh === 0 ? [[0, 0, 0], [0.358, 0.12, 0], [0.716, 0.24, 0], [1.074, 0.36, 0]] : [[0, 0, 0], [0.16, 0.052, 0], [0.2, 0.067, -4], [0.22, 0.071, -8], [0.25, 0.069, -15], [0.29, 0.061, -24], [0.34, 0.042, -36], [0.39, 0.012, -45], [0.43, -0.006, -45], [0.48, -0.018, -36], [0.53, -0.021, -25], [0.59, -0.017, -14], [0.66, 0, -6], [0.75, 0.03, 0], [0.86, 0.0635, 0.1], [0.99, 0.094, 0.2]]; // [[0,0,0],[.208,.07,0],[.25,.065,-15],[.33,.05,-45],[.4,.0053,-45],[.5,-0.02,-30],[.6,-0.015,-12],[.75,0.035,1],[.99,0.1,2]] var distancesB3ohh = [0]; var totalDistanceB3ohh = 0; for (var pointIndexB3ohh = 1; pointIndexB3ohh < pointsB3ohh.length; pointIndexB3ohh += 1) { var deltaXB3ohh = pointsB3ohh[pointIndexB3ohh][0] - pointsB3ohh[pointIndexB3ohh - 1][0]; var deltaYB3ohh = pointsB3ohh[pointIndexB3ohh][1] - pointsB3ohh[pointIndexB3ohh - 1][1]; totalDistanceB3ohh += Math.sqrt(deltaXB3ohh * deltaXB3ohh + deltaYB3ohh * deltaYB3ohh); distancesB3ohh.push(totalDistanceB3ohh); } motionB3ohh = trolleyB3ohh.animate(pointsB3ohh.map(function (pointB3ohh, pointIndexB3ohh) { return { transform: "translate(" + pointB3ohh[0] * widthB3ohh + "px," + pointB3ohh[1] * widthB3ohh + "px) rotate(" + (pointB3ohh[2] || 0) + "deg)", offset: totalDistanceB3ohh ? distancesB3ohh[pointIndexB3ohh] / totalDistanceB3ohh : pointIndexB3ohh / Math.max(1, pointsB3ohh.length - 1) }; }), { duration: 1800, easing: "cubic-bezier(.15,.18,.18,.17)", fill: "forwards" }); } if (leverDelayB3ohh) startTimerB3ohh = window.setTimeout(beginTrolleyTravelB3ohh, leverDelayB3ohh);else beginTrolleyTravelB3ohh(); impactTimerB3ohh = window.setTimeout(function () { impactB3ohh(nextChoiceB3ohh); }, nextChoiceB3ohh === 0 ? mainTrackPeopleDeadTimeB3ohh : divertedTrackPeopleDeadTimeB3ohh); if (keepChoiceB3ohh) resultsRevealTimerB3ohh = window.setTimeout(function () { revealedB3ohh = true; var resultNodeB3ohh = rootB3ohh.querySelector(".tp-results-B3ohh"); if (resultNodeB3ohh) resultNodeB3ohh.classList.add("is-visible-B3ohh"); activateResultWidthsB3ohh(); updateCreateCtaB3ohh(); }, leverDelayB3ohh + resultsRevealTimeB3ohh); finishTimerB3ohh = window.setTimeout(function () { animatingB3ohh = false; motionCompletedB3ohh = true; trolleyB3ohh.classList.remove("is-moving-B3ohh"); trolleyB3ohh.classList.add("is-preview-complete-B3ohh"); setTrolleyAssetB3ohh(false); trolleyB3ohh.style.opacity = "0"; updateCreateCtaB3ohh(); }, leverDelayB3ohh + 2700); } function impactB3ohh(nextChoiceB3ohh) { var sideB3ohh = nextChoiceB3ohh === 1 ? "diverted" : "straight"; var trackB3ohh = rootB3ohh.querySelector(".tp-track-object-B3ohh"); if (trackB3ohh) trackB3ohh.classList.add("tp-" + sideB3ohh + "-dead-B3ohh"); rootB3ohh.querySelectorAll(".tp-person-" + sideB3ohh + "-B3ohh use").forEach(function (personB3ohh) { personB3ohh.setAttribute("href", "#" + tokenB3ohh + "-person-dead"); }); } function resetPeopleB3ohh() { var trackB3ohh = rootB3ohh.querySelector(".tp-track-object-B3ohh"); if (trackB3ohh) { trackB3ohh.classList.toggle("tp-straight-dead-B3ohh", peopleAreDeadB3ohh("straight")); trackB3ohh.classList.toggle("tp-diverted-dead-B3ohh", peopleAreDeadB3ohh("diverted")); } rootB3ohh.querySelectorAll(".tp-person-group-B3ohh use").forEach(function (personB3ohh) { var groupB3ohh = personB3ohh.closest(".tp-person-group-B3ohh"), sideB3ohh = groupB3ohh ? groupB3ohh.getAttribute("data-person-side-B3ohh") : ""; personB3ohh.setAttribute("href", "#" + tokenB3ohh + (peopleAreDeadB3ohh(sideB3ohh) ? "-person-dead" : "-person")); }); } function trolleyStartPositionB3ohh(scaleB3ohh) { scaleB3ohh = numberB3ohh(scaleB3ohh, 0.2, 2, defaultTrolleyLayoutB3ohh.scale); return { x: trolleyStartCenterB3ohh.x - trolleyWidthRatioB3ohh * scaleB3ohh / 2, y: trolleyStartCenterB3ohh.y - trolleyHeightRatioB3ohh * scaleB3ohh / 2, centerX: trolleyStartCenterB3ohh.x, centerY: trolleyStartCenterB3ohh.y, width: trolleyWidthRatioB3ohh * scaleB3ohh, height: trolleyHeightRatioB3ohh * scaleB3ohh }; } function trolleyAtStartB3ohh(nextB3ohh, toleranceB3ohh) { var scaleB3ohh = numberB3ohh(nextB3ohh && nextB3ohh.trolleyScale, 0.2, 2, defaultTrolleyLayoutB3ohh.scale); var centerXB3ohh = numberB3ohh(nextB3ohh && nextB3ohh.trolleyX, -0.4, 1, defaultTrolleyLayoutB3ohh.x) + trolleyWidthRatioB3ohh * scaleB3ohh / 2; var centerYB3ohh = numberB3ohh(nextB3ohh && nextB3ohh.trolleyY, -0.4, 1, defaultTrolleyLayoutB3ohh.y) + trolleyHeightRatioB3ohh * scaleB3ohh / 2; return Math.hypot(centerXB3ohh - trolleyStartCenterB3ohh.x, centerYB3ohh - trolleyStartCenterB3ohh.y) < (Number(toleranceB3ohh) || 0.025); } function canAnimateB3ohh() { return stateB3ohh.animationEnabled && stateB3ohh.showTrack && stateB3ohh.showTrolley && Math.abs(stateB3ohh.trackX - defaultTrackLayoutB3ohh.x) < 0.024 && Math.abs(stateB3ohh.trackY - defaultTrackLayoutB3ohh.y) < 0.024 && Math.abs(stateB3ohh.trackScale - defaultTrackLayoutB3ohh.scale) < 0.02 && Math.abs(stateB3ohh.trackRotation - defaultTrackLayoutB3ohh.rotation) < 1 && trolleyAtStartB3ohh(stateB3ohh, 0.025); } function resetPreviewB3ohh() { cancelMotionB3ohh(); authoringPeoplePreviewB3ohh = null; choiceB3ohh = null; revealedB3ohh = false; animatingB3ohh = false; actionTakenB3ohh = false; motionCompletedB3ohh = false; storeB3ohh = { choice: null, counts: previewStoreBaselineB3ohh.counts.slice(), total: previewStoreBaselineB3ohh.total }; renderB3ohh(); rootB3ohh.dispatchEvent(new CustomEvent("trolley-preview-reset-B3ohh")); } function saveVoteB3ohh(nextChoiceB3ohh) { if (typeof window.fgStoreData !== "function") { statusB3ohh("Your choice is shown but could not be saved."); return; } var resultB3ohh; try { resultB3ohh = window.fgStoreData("save", "dataB3ohh", "trolleyVote", { userInput: { choice: nextChoiceB3ohh === 0 ? [1, 0] : [0, 1], voteCount: 1 } }); } catch (errorB3ohh) { statusB3ohh("Your choice is shown but could not be saved."); return; } Promise.resolve(resultB3ohh).then(function (responseB3ohh) { var savedB3ohh = responseB3ohh && responseB3ohh.storeData ? responseB3ohh.storeData : responseB3ohh; if (savedB3ohh) { dataB3ohhLocal.trolleyVote = savedB3ohh; storeB3ohh = normalizeStoreB3ohh(savedB3ohh); } statusB3ohh("Vote saved."); }).catch(function () { statusB3ohh("Your choice is shown but could not be saved."); }); } function beginInitialLoadB3ohh() { if (!isPersistedB3ohh || storeB3ohh.choice !== null || typeof window.fgStoreData !== "function") return; var resultB3ohh; try { resultB3ohh = window.fgStoreData("load", "dataB3ohh", "trolleyVote"); } catch (errorB3ohh) { return; } Promise.resolve(resultB3ohh).then(function (responseB3ohh) { if (actionTakenB3ohh) return; var loadedB3ohh = responseB3ohh && responseB3ohh.storeData ? responseB3ohh.storeData : responseB3ohh; if (!loadedB3ohh) return; dataB3ohhLocal.trolleyVote = loadedB3ohh; storeB3ohh = normalizeStoreB3ohh(loadedB3ohh); choiceB3ohh = storeB3ohh.choice; revealedB3ohh = choiceB3ohh !== null; renderB3ohh(); }).catch(function () {}); } function normalizeStoreB3ohh(valueB3ohh) { valueB3ohh = valueB3ohh && typeof valueB3ohh === "object" ? valueB3ohh : {}; var userB3ohh = valueB3ohh.userInput && typeof valueB3ohh.userInput === "object" ? valueB3ohh.userInput : {}; var aggregateB3ohh = valueB3ohh.aggregateValues && typeof valueB3ohh.aggregateValues === "object" ? valueB3ohh.aggregateValues : {}; var rawCountsB3ohh = Array.isArray(aggregateB3ohh.choice) ? aggregateB3ohh.choice : [0, 0]; var rawSavedB3ohh = userB3ohh.choice; var savedB3ohh = NaN; if (Array.isArray(rawSavedB3ohh)) { for (var savedIndexB3ohh = 0; savedIndexB3ohh < Math.min(2, rawSavedB3ohh.length); savedIndexB3ohh += 1) { if (Number(rawSavedB3ohh[savedIndexB3ohh]) === 1) { savedB3ohh = savedIndexB3ohh; break; } } } else if (rawSavedB3ohh !== "" && rawSavedB3ohh != null) { savedB3ohh = Number(rawSavedB3ohh); } return { choice: savedB3ohh === 0 || savedB3ohh === 1 ? savedB3ohh : null, counts: [Math.max(0, Number(rawCountsB3ohh[0]) || 0), Math.max(0, Number(rawCountsB3ohh[1]) || 0)], total: Math.max(0, Number(aggregateB3ohh.voteCount) || 0) }; } function syncDataB3ohh() { Object.keys(stateB3ohh).forEach(function (keyB3ohh) { if (keyB3ohh !== "sceneImages" && keyB3ohh !== "sceneTexts" && keyB3ohh !== "sceneDrawings") dataB3ohhLocal[keyB3ohh] = cloneB3ohh(stateB3ohh[keyB3ohh]); }); var sourceImagesB3ohh = Array.isArray(dataB3ohhLocal.sceneImages) ? dataB3ohhLocal.sceneImages : []; dataB3ohhLocal.sceneImages = stateB3ohh.sceneImages.map(function (itemB3ohh, indexB3ohh) { var rowB3ohh = cloneB3ohh(sourceImagesB3ohh[indexB3ohh] || {}); rowB3ohh.imageSlot = String(itemB3ohh.slot || indexB3ohh + 1); if (!rowB3ohh.sceneImage) rowB3ohh.sceneImage = cloneB3ohh(itemB3ohh.image || ""); rowB3ohh.imageX = String(itemB3ohh.x); rowB3ohh.imageY = String(itemB3ohh.y); rowB3ohh.imageWidth = String(itemB3ohh.width); rowB3ohh.imageAspectRatio = String(itemB3ohh.aspectRatio); rowB3ohh.imageRotation = String(itemB3ohh.rotation || 0); rowB3ohh.imageOrder = String(itemB3ohh.order || indexB3ohh + 1); rowB3ohh.imageAttachment = itemB3ohh.attachment || "scene"; rowB3ohh.imageAttachmentIndex = String(itemB3ohh.attachmentIndex || 0); rowB3ohh.imageAreaState = areaStateB3ohh(itemB3ohh.areaState); return rowB3ohh; }); var sourceTextsB3ohh = Array.isArray(dataB3ohhLocal.sceneTexts) ? dataB3ohhLocal.sceneTexts : []; dataB3ohhLocal.sceneTexts = stateB3ohh.sceneTexts.map(function (itemB3ohh, indexB3ohh) { var rowB3ohh = cloneB3ohh(sourceTextsB3ohh[indexB3ohh] || {}); rowB3ohh.textSlot = String(itemB3ohh.slot || indexB3ohh + 1); rowB3ohh.textContent = itemB3ohh.content || ""; rowB3ohh.textX = String(itemB3ohh.x); rowB3ohh.textY = String(itemB3ohh.y); rowB3ohh.textWidth = String(itemB3ohh.width); rowB3ohh.textHeight = String(itemB3ohh.height || 0); rowB3ohh.textScale = String(itemB3ohh.scale || 1); rowB3ohh.textRotation = String(itemB3ohh.rotation || 0); rowB3ohh.textColor = itemB3ohh.color || "#10151a"; rowB3ohh.textFillColor = itemB3ohh.fillColor || ""; rowB3ohh.textAttachment = itemB3ohh.attachment || "scene"; rowB3ohh.textAttachmentIndex = String(itemB3ohh.attachmentIndex || 0); rowB3ohh.textAreaState = areaStateB3ohh(itemB3ohh.areaState); rowB3ohh.textOrder = String(itemB3ohh.order || indexB3ohh + 1); return rowB3ohh; }); var sourceDrawingsB3ohh = Array.isArray(dataB3ohhLocal.sceneDrawings) ? dataB3ohhLocal.sceneDrawings : []; dataB3ohhLocal.sceneDrawings = stateB3ohh.sceneDrawings.map(function (itemB3ohh, indexB3ohh) { var rowB3ohh = cloneB3ohh(sourceDrawingsB3ohh[indexB3ohh] || {}); rowB3ohh.drawingSlot = String(itemB3ohh.slot || indexB3ohh + 1); rowB3ohh.drawingKind = itemB3ohh.kind || "brush"; rowB3ohh.drawingPoints = JSON.stringify(itemB3ohh.points || []); rowB3ohh.strokeColor = itemB3ohh.strokeColor || "#10151a"; rowB3ohh.strokeWidth = String(itemB3ohh.strokeWidth || 4); rowB3ohh.fillColor = itemB3ohh.fillColor || "#10151a"; rowB3ohh.drawingOpacity = String(itemB3ohh.opacity == null ? 1 : itemB3ohh.opacity); rowB3ohh.drawingRotation = String(itemB3ohh.rotation || 0); rowB3ohh.drawingAttachment = itemB3ohh.attachment || "scene"; rowB3ohh.drawingAttachmentIndex = String(itemB3ohh.attachmentIndex || 0); rowB3ohh.drawingAreaState = areaStateB3ohh(itemB3ohh.areaState); rowB3ohh.drawingOrder = String(itemB3ohh.order || indexB3ohh + 1); return rowB3ohh; }); } function cancelMotionB3ohh() { if (choiceStartFrameB3ohh != null && typeof window.cancelAnimationFrame === "function") window.cancelAnimationFrame(choiceStartFrameB3ohh); if (resultWidthFrameB3ohh != null && typeof window.cancelAnimationFrame === "function") window.cancelAnimationFrame(resultWidthFrameB3ohh); if (motionB3ohh && typeof motionB3ohh.cancel === "function") try { motionB3ohh.cancel(); } catch (errorB3ohh) {} if (startTimerB3ohh) window.clearTimeout(startTimerB3ohh); if (impactTimerB3ohh) window.clearTimeout(impactTimerB3ohh); if (resultsRevealTimerB3ohh) window.clearTimeout(resultsRevealTimerB3ohh); if (finishTimerB3ohh) window.clearTimeout(finishTimerB3ohh); setTrolleyAssetB3ohh(false); setLeverAssetB3ohh(false); choiceStartFrameB3ohh = null; resultWidthFrameB3ohh = null; motionB3ohh = null; startTimerB3ohh = null; impactTimerB3ohh = null; resultsRevealTimerB3ohh = null; finishTimerB3ohh = null; } function clientPointB3ohh(clientXB3ohh, clientYB3ohh) { var canvasB3ohh = rootB3ohh.querySelector(".tp-canvas-B3ohh"); if (!canvasB3ohh) return null; var rectB3ohh = canvasB3ohh.getBoundingClientRect(); return { x: (clientXB3ohh - rectB3ohh.left) / rectB3ohh.width, y: (clientYB3ohh - rectB3ohh.top) / rectB3ohh.height }; } function statusB3ohh(messageB3ohh) { var nodeB3ohh = rootB3ohh.querySelector(".tp-status-B3ohh"); if (nodeB3ohh) nodeB3ohh.textContent = messageB3ohh; } function normalizeImageB3ohh(valueB3ohh) { if (typeof valueB3ohh === "string") return valueB3ohh ? { src: valueB3ohh, srcset: "" } : null; if (!valueB3ohh || typeof valueB3ohh !== "object") return null; var srcB3ohh = String(valueB3ohh.src || valueB3ohh.url || ""); return srcB3ohh ? { src: srcB3ohh, srcset: String(valueB3ohh.srcset || "") } : null; } function normalizePointsB3ohh(valueB3ohh) { var parsedB3ohh = valueB3ohh; if (typeof valueB3ohh === "string") try { parsedB3ohh = JSON.parse(valueB3ohh); } catch (errorB3ohh) { parsedB3ohh = []; } return (Array.isArray(parsedB3ohh) ? parsedB3ohh : []).slice(0, 1200).map(function (pointB3ohh) { return [numberB3ohh(pointB3ohh && pointB3ohh[0], -1, 2, 0), numberB3ohh(pointB3ohh && pointB3ohh[1], -1, 2, 0)]; }); } function boolB3ohh(valueB3ohh, fallbackB3ohh) { if (valueB3ohh == null || valueB3ohh === "") return fallbackB3ohh; return valueB3ohh === true || valueB3ohh === "true" || valueB3ohh === 1 || valueB3ohh === "1"; } function areaStateB3ohh(valueB3ohh) { valueB3ohh = String(valueB3ohh || "always").toLowerCase(); return ["always", "alive", "dead"].indexOf(valueB3ohh) >= 0 ? valueB3ohh : "always"; } function numberB3ohh(valueB3ohh, minB3ohh, maxB3ohh, fallbackB3ohh) { var numberB3ohhValue = Number(valueB3ohh); return Number.isFinite(numberB3ohhValue) ? Math.min(maxB3ohh, Math.max(minB3ohh, numberB3ohhValue)) : fallbackB3ohh; } function integerB3ohh(valueB3ohh, minB3ohh, maxB3ohh, fallbackB3ohh) { return Math.round(numberB3ohh(valueB3ohh, minB3ohh, maxB3ohh, fallbackB3ohh)); } function peopleCountB3ohh(valueB3ohh, fallbackB3ohh) { var digitsB3ohh = String(valueB3ohh == null ? "" : valueB3ohh).replace(/[^0-9]/g, "").replace(/^0+(?=\d)/, ""); return digitsB3ohh || String(fallbackB3ohh || "0"); } function peopleCountBigIntB3ohh(valueB3ohh) { try { return BigInt(peopleCountB3ohh(valueB3ohh, "0")); } catch (errorB3ohh) { return 0n; } } function peopleCountGreaterThanB3ohh(valueB3ohh, limitB3ohh) { return peopleCountBigIntB3ohh(valueB3ohh) > BigInt(limitB3ohh); } function visiblePeopleCountB3ohh(valueB3ohh) { var countB3ohh = peopleCountBigIntB3ohh(valueB3ohh); return countB3ohh > 5n ? 5 : Number(countB3ohh); } function commaIntegerB3ohh(valueB3ohh) { return String(valueB3ohh).replace(/\B(?=(\d{3})+(?!\d))/g, ","); } function formatPeopleCountB3ohh(valueB3ohh) { var countB3ohh = peopleCountBigIntB3ohh(valueB3ohh); if (countB3ohh <= 9999n) return commaIntegerB3ohh(countB3ohh); var unitsB3ohh = [{ value: 1000000000000n, label: "tril" }, { value: 1000000000n, label: "bil" }, { value: 1000000n, label: "mil" }, { value: 1000n, label: "k" }], selectedB3ohh = unitsB3ohh[unitsB3ohh.length - 1]; for (var indexB3ohh = 0; indexB3ohh < unitsB3ohh.length; indexB3ohh += 1) { if (countB3ohh >= unitsB3ohh[indexB3ohh].value) { selectedB3ohh = unitsB3ohh[indexB3ohh]; break; } } var tenthsB3ohh = (countB3ohh * 10n + selectedB3ohh.value / 2n) / selectedB3ohh.value, wholeB3ohh = tenthsB3ohh / 10n, decimalB3ohh = tenthsB3ohh % 10n, numberTextB3ohh = commaIntegerB3ohh(wholeB3ohh) + (decimalB3ohh ? "." + decimalB3ohh : ""); return numberTextB3ohh + (selectedB3ohh.label === "k" ? "k" : " " + selectedB3ohh.label); } function textB3ohh(valueB3ohh, fallbackB3ohh, maxB3ohh) { var outputB3ohh = valueB3ohh == null ? fallbackB3ohh : String(valueB3ohh); return outputB3ohh.slice(0, maxB3ohh); } function colorB3ohh(valueB3ohh, fallbackB3ohh) { var colorB3ohhValue = String(valueB3ohh || "").trim().toLowerCase(); if (/^#[0-9a-f]{6}$/.test(colorB3ohhValue)) return colorB3ohhValue; var matchB3ohh = colorB3ohhValue.match(/^rgba?$\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)(?:\s*,\s*([\d.]+))?\s*$$/); if (!matchB3ohh) return fallbackB3ohh; var channelsB3ohh = [Number(matchB3ohh[1]), Number(matchB3ohh[2]), Number(matchB3ohh[3])]; var alphaB3ohh = matchB3ohh[4] == null ? 1 : Number(matchB3ohh[4]); if (channelsB3ohh.some(function (channelB3ohh) { return !Number.isFinite(channelB3ohh) || channelB3ohh < 0 || channelB3ohh > 255; }) || !Number.isFinite(alphaB3ohh) || alphaB3ohh < 0 || alphaB3ohh > 1) return fallbackB3ohh; return "rgba(" + channelsB3ohh.map(Math.round).join(", ") + ", " + alphaB3ohh + ")"; } function percentagesB3ohh(countsB3ohh, totalB3ohh) { if (!totalB3ohh) return [0, 0]; var firstB3ohh = Math.round(countsB3ohh[0] / totalB3ohh * 100); return [firstB3ohh, 100 - firstB3ohh]; } function cloneB3ohh(valueB3ohh) { return valueB3ohh == null ? valueB3ohh : JSON.parse(JSON.stringify(valueB3ohh)); } function safeTokenB3ohh(valueB3ohh) { return String(valueB3ohh).replace(/[^a-zA-Z0-9_-]/g, "-"); } function escapeB3ohh(valueB3ohh) { return String(valueB3ohh == null ? "" : valueB3ohh).replace(/[&<>"']/g, function (characterB3ohh) { return { "&": "&", "<": "<", ">": ">", '"': """, "'": "'" }[characterB3ohh]; }); } function escapeAttrB3ohh(valueB3ohh) { return escapeB3ohh(valueB3ohh).replace(/`/g, "`"); } })();

Hasan Piker's Trolley Problem

Share

Comments

Related Posts