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),
};
}