diff --git a/website/src/repl/components/panel/PatternsTab.jsx b/website/src/repl/components/panel/PatternsTab.jsx index 8e2b75b9..5e0d50e7 100644 --- a/website/src/repl/components/panel/PatternsTab.jsx +++ b/website/src/repl/components/panel/PatternsTab.jsx @@ -79,13 +79,11 @@ const updateCodeWindow = (context, patternData, reset = false) => { context.handleUpdate(patternData, reset); }; -const autoResetPatternOnChange = !isUdels(); - function UserPatterns({ context }) { const activePattern = useActivePattern(); const viewingPatternStore = useViewingPatternData(); const viewingPatternData = parseJSON(viewingPatternStore); - const { userPatterns, patternFilter } = useSettings(); + const { userPatterns, patternFilter, patternAutoStart } = useSettings(); const viewingPatternID = viewingPatternData?.id; return (
@@ -135,13 +133,13 @@ function UserPatterns({ context }) {
{/* {patternFilter === patternFilterName.user && ( */} - updateCodeWindow( - context, - { ...userPatterns[id], collection: userPattern.collection }, - autoResetPatternOnChange, - ) - } + onClick={(id) => { + updateCodeWindow(context, { ...userPatterns[id], collection: userPattern.collection }, patternAutoStart); + + if (context.started && activePattern === id) { + context.handleEvaluate(); + } + }} patterns={userPatterns} started={context.started} activePattern={activePattern} @@ -188,17 +186,14 @@ function FeaturedPatterns({ context }) { const examplePatterns = useExamplePatterns(); const collections = examplePatterns.collections; const patterns = collections.get(patternFilterName.featured); + const { patternAutoStart } = useSettings(); return ( { - updateCodeWindow( - context, - { ...patterns[id], collection: patternFilterName.featured }, - autoResetPatternOnChange, - ); + updateCodeWindow(context, { ...patterns[id], collection: patternFilterName.featured }, patternAutoStart); }} paginationOnChange={async (pageNum) => { await loadAndSetFeaturedPatterns(pageNum - 1); @@ -213,13 +208,14 @@ function LatestPatterns({ context }) { const examplePatterns = useExamplePatterns(); const collections = examplePatterns.collections; const patterns = collections.get(patternFilterName.public); + const { patternAutoStart } = useSettings(); return ( { - updateCodeWindow(context, { ...patterns[id], collection: patternFilterName.public }, autoResetPatternOnChange); + updateCodeWindow(context, { ...patterns[id], collection: patternFilterName.public }, patternAutoStart); }} paginationOnChange={async (pageNum) => { await loadAndSetPublicPatterns(pageNum - 1); diff --git a/website/src/repl/components/panel/SettingsTab.jsx b/website/src/repl/components/panel/SettingsTab.jsx index 80daef01..85991f55 100644 --- a/website/src/repl/components/panel/SettingsTab.jsx +++ b/website/src/repl/components/panel/SettingsTab.jsx @@ -112,6 +112,7 @@ export function SettingsTab({ started }) { multiChannelOrbits, isTabIndentationEnabled, isMultiCursorEnabled, + patternAutoStart, } = useSettings(); const shouldAlwaysSync = isUdels(); const canChangeAudioDevice = AudioContext.prototype.setSinkId != null; @@ -304,6 +305,11 @@ export function SettingsTab({ started }) { onChange={(cbEvent) => settingsMap.setKey('isCSSAnimationDisabled', cbEvent.target.checked)} value={isCSSAnimationDisabled} /> + settingsMap.setKey('patternAutoStart', cbEvent.target.checked)} + value={patternAutoStart} + /> Try clicking the logo in the top left! diff --git a/website/src/settings.mjs b/website/src/settings.mjs index 9365a6db..7c62b0de 100644 --- a/website/src/settings.mjs +++ b/website/src/settings.mjs @@ -96,6 +96,11 @@ export function useSettings() { isPanelOpen: parseBoolean(state.isPanelOpen), userPatterns: userPatterns, multiChannelOrbits: parseBoolean(state.multiChannelOrbits), + patternAutoStart: isUdels() + ? false + : state.patternAutoStart === undefined + ? true + : parseBoolean(state.patternAutoStart), }; }