From 126556634a62284a1d7916bcf26ec1b596131365 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Thu, 28 Mar 2024 11:49:32 +0100
Subject: [PATCH 1/2] add setting for sync flag

---
 website/src/repl/Repl.jsx              |  4 ++--
 website/src/repl/panel/SettingsTab.jsx | 11 +++++++++++
 website/src/settings.mjs               | 22 +++++++++++++---------
 3 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/website/src/repl/Repl.jsx b/website/src/repl/Repl.jsx
index f4c6df25..9c472eb4 100644
--- a/website/src/repl/Repl.jsx
+++ b/website/src/repl/Repl.jsx
@@ -61,12 +61,12 @@ async function getModule(name) {
 
 export function Repl({ embedded = false }) {
   const isEmbedded = embedded || isIframe;
-  const { panelPosition, isZen } = useSettings();
+  const { panelPosition, isZen, isSyncEnabled } = useSettings();
   const init = useCallback(() => {
     const drawTime = [-2, 2];
     const drawContext = getDrawContext();
     const editor = new StrudelMirror({
-      sync: false,
+      sync: isSyncEnabled,
       defaultOutput: webaudioOutput,
       getTime: () => getAudioContext().currentTime,
       setInterval,
diff --git a/website/src/repl/panel/SettingsTab.jsx b/website/src/repl/panel/SettingsTab.jsx
index 830c926c..c60b0ccd 100644
--- a/website/src/repl/panel/SettingsTab.jsx
+++ b/website/src/repl/panel/SettingsTab.jsx
@@ -88,6 +88,7 @@ export function SettingsTab({ started }) {
     isAutoCompletionEnabled,
     isTooltipEnabled,
     isFlashEnabled,
+    isSyncEnabled,
     isLineWrappingEnabled,
     fontSize,
     fontFamily,
@@ -182,6 +183,16 @@ export function SettingsTab({ started }) {
           onChange={(cbEvent) => settingsMap.setKey('isFlashEnabled', cbEvent.target.checked)}
           value={isFlashEnabled}
         />
+        <Checkbox
+          label="Sync across Browser Tabs / Windows"
+          onChange={(cbEvent) => {
+            if (confirm('Changing this setting requires the window to reload itself. OK?')) {
+              settingsMap.setKey('isSyncEnabled', cbEvent.target.checked);
+              window.location.reload();
+            }
+          }}
+          value={isSyncEnabled}
+        />
       </FormItem>
       <FormItem label="Zen Mode">Try clicking the logo in the top left!</FormItem>
       <FormItem label="Reset Settings">
diff --git a/website/src/settings.mjs b/website/src/settings.mjs
index 34aca701..4e1396d6 100644
--- a/website/src/settings.mjs
+++ b/website/src/settings.mjs
@@ -13,6 +13,7 @@ export const defaultSettings = {
   isAutoCompletionEnabled: false,
   isTooltipEnabled: false,
   isFlashEnabled: true,
+  isSyncEnabled: true,
   isLineWrappingEnabled: false,
   isPatternHighlightingEnabled: true,
   theme: 'strudelTheme',
@@ -29,6 +30,8 @@ export const defaultSettings = {
 
 export const settingsMap = persistentMap('strudel-settings', defaultSettings);
 
+const parseBoolean = (booleanlike) => ([true, 'true'].includes(booleanlike) ? true : false);
+
 export function useSettings() {
   const state = useStore(settingsMap);
 
@@ -40,15 +43,16 @@ export function useSettings() {
   });
   return {
     ...state,
-    isZen: [true, 'true'].includes(state.isZen) ? true : false,
-    isBracketMatchingEnabled: [true, 'true'].includes(state.isBracketMatchingEnabled) ? true : false,
-    isLineNumbersDisplayed: [true, 'true'].includes(state.isLineNumbersDisplayed) ? true : false,
-    isActiveLineHighlighted: [true, 'true'].includes(state.isActiveLineHighlighted) ? true : false,
-    isAutoCompletionEnabled: [true, 'true'].includes(state.isAutoCompletionEnabled) ? true : false,
-    isPatternHighlightingEnabled: [true, 'true'].includes(state.isPatternHighlightingEnabled) ? true : false,
-    isTooltipEnabled: [true, 'true'].includes(state.isTooltipEnabled) ? true : false,
-    isLineWrappingEnabled: [true, 'true'].includes(state.isLineWrappingEnabled) ? true : false,
-    isFlashEnabled: [true, 'true'].includes(state.isFlashEnabled) ? true : false,
+    isZen: parseBoolean(state.isZen),
+    isBracketMatchingEnabled: parseBoolean(state.isBracketMatchingEnabled),
+    isLineNumbersDisplayed: parseBoolean(state.isLineNumbersDisplayed),
+    isActiveLineHighlighted: parseBoolean(state.isActiveLineHighlighted),
+    isAutoCompletionEnabled: parseBoolean(state.isAutoCompletionEnabled),
+    isPatternHighlightingEnabled: parseBoolean(state.isPatternHighlightingEnabled),
+    isTooltipEnabled: parseBoolean(state.isTooltipEnabled),
+    isLineWrappingEnabled: parseBoolean(state.isLineWrappingEnabled),
+    isFlashEnabled: parseBoolean(state.isFlashEnabled),
+    isSyncEnabled: parseBoolean(state.isSyncEnabled),
     fontSize: Number(state.fontSize),
     panelPosition: state.activeFooter !== '' ? state.panelPosition : 'bottom', // <-- keep this 'bottom' where it is!
     userPatterns: userPatterns,

From 50ed466895ff70de2a980516b4e437d487449389 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Thu, 28 Mar 2024 12:00:12 +0100
Subject: [PATCH 2/2] disable sync by default?

---
 website/src/settings.mjs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/src/settings.mjs b/website/src/settings.mjs
index 4e1396d6..2c5aa8f8 100644
--- a/website/src/settings.mjs
+++ b/website/src/settings.mjs
@@ -13,7 +13,7 @@ export const defaultSettings = {
   isAutoCompletionEnabled: false,
   isTooltipEnabled: false,
   isFlashEnabled: true,
-  isSyncEnabled: true,
+  isSyncEnabled: false,
   isLineWrappingEnabled: false,
   isPatternHighlightingEnabled: true,
   theme: 'strudelTheme',