fix: reload triggers

package-lock.json

@@ -13,6 +13,7 @@
         "@emotion/react": "11.10.6",
         "@emotion/server": "11.10.0",
         "@emotion/styled": "11.10.6",
+        "@monaco-editor/react": "4.5.0",
         "@mui/icons-material": "5.11.16",
         "@mui/material": "5.12.0",
         "axios": "1.3.5",
@@ -430,6 +431,30 @@
       "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz",
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA=="
     },
+    "node_modules/@monaco-editor/loader": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.3.3.tgz",
+      "integrity": "sha512-6KKF4CTzcJiS8BJwtxtfyYt9shBiEv32ateQ9T4UVogwn4HM/uPo9iJd2Dmbkpz8CM6Y0PDUpjnZzCwC+eYo2Q==",
+      "dependencies": {
+        "state-local": "^1.0.6"
+      },
+      "peerDependencies": {
+        "monaco-editor": ">= 0.21.0 < 1"
+      }
+    },
+    "node_modules/@monaco-editor/react": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/react/-/react-4.5.0.tgz",
+      "integrity": "sha512-VJMkp5Fe1+w8pLEq8tZPHZKu8zDXQIA1FtiDTSNccg1D3wg1YIZaH2es2Qpvop1k62g3c/YySRb3bnGXu2XwYQ==",
+      "dependencies": {
+        "@monaco-editor/loader": "^1.3.3"
+      },
+      "peerDependencies": {
+        "monaco-editor": ">= 0.25.0 < 1",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/@mui/base": {
       "version": "5.0.0-alpha.125",
       "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.125.tgz",
@@ -5543,6 +5568,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/monaco-editor": {
+      "version": "0.37.1",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.37.1.tgz",
+      "integrity": "sha512-jLXEEYSbqMkT/FuJLBZAVWGuhIb4JNwHE9kPTorAVmsdZ4UzHAfgWxLsVtD7pLRFaOwYPhNG9nUCpmFL1t/dIg==",
+      "peer": true
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -10648,6 +10679,11 @@
         "node": ">= 6"
       }
     },
+    "node_modules/state-local": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz",
+      "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w=="
+    },
     "node_modules/stop-iteration-iterator": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.0.0.tgz",

package.json

@@ -42,6 +42,7 @@
     "@emotion/react": "11.10.6",
     "@emotion/server": "11.10.0",
     "@emotion/styled": "11.10.6",
+    "@monaco-editor/react": "4.5.0",
     "@mui/icons-material": "5.11.16",
     "@mui/material": "5.12.0",
     "axios": "1.3.5",

src/pages/index.tsx

@@ -35,14 +35,16 @@ import { useHost } from "esdeka/react";
 import CircularProgress from "@mui/material/CircularProgress";
 import CssBaseline from "@mui/material/CssBaseline";
 import Slider from "@mui/material/Slider";
+// import dynamic from "next/dynamic";
+// const MonacoEditor = dynamic(import("@monaco-editor/react"), { ssr: false });
 
 const base = {
 	default: `
 const canvas = document.querySelector('canvas');
 const ctx = canvas.getContext('2d');
-const FPS = 60;
 /*60FPS draw cycle*/
 function draw(){
+  const FPS = 60;
   setTimeout(requestAnimationFrame(draw),1000/FPS)
 }
 draw();
@@ -71,7 +73,7 @@ export default function Home() {
 	const { broadcast, call, subscribe } = useHost(ref, "fail4");
 
 	const connection = useRef(false);
-	const [tries, setTries] = useState(5);
+	const [tries, setTries] = useState(1);
 
 	// Send a connection request
 	useEffect(() => {
@@ -84,6 +86,8 @@ export default function Home() {
 
 		const timeout = setTimeout(() => {
 			if (current) {
+				// call({ template: "" });
+
 				call({ template: current.content });
 			}
 
@@ -102,9 +106,8 @@ export default function Home() {
 				switch (action.type) {
 					case "answer":
 						connection.current = true;
-						setTimeout(() => {
-							setLoadingLive(false);
-						}, 1_500);
+						setLoadingLive(false);
+
 						console.log("connected");
 						break;
 					default:
@@ -121,15 +124,15 @@ export default function Home() {
 	}, [subscribe, loadingLive]);
 
 	// Broadcast store to guest
-	useEffect(() => {
-		const current = answers.find(({ id }) => id === runningId);
-		if (connection.current && current) {
-			broadcast({ template: current.content });
-		}
-		return () => {
-			/* Consistency */
-		};
-	}, [broadcast, runningId, answers]);
+	// useEffect(() => {
+	// 	const current = answers.find(({ id }) => id === runningId);
+	// 		if (connection.current && current) {
+	// 			broadcast({ template: current.content });
+	// 		}
+	// 		return () => {
+	// 			/* Consistency */
+	// 		};
+	// 	}, [broadcast, runningId, answers]);
 
 	// useEffect(() => {
 	// 	const current = answers.find(({ id }) => id === runningId);
@@ -147,7 +150,7 @@ export default function Home() {
 		if (ref.current) {
 			ref.current.src = `/live?${nanoid()}`;
 			setLoadingLive(true);
-			setTries(3);
+			setTries(1);
 		}
 	}
 
@@ -206,7 +209,7 @@ export default function Home() {
 									color="inherit"
 									aria-label="Clear Prompt"
 									onClick={async () => {
-										broadcast({ template: base.default });
+										// broadcast({ template: base.default });
 										setActiveId("1");
 										setTemplate(base.default);
 										reload();
@@ -227,8 +230,8 @@ export default function Home() {
 									id="prompt"
 									name="prompt"
 									label="Prompt"
-									placeholder="add a red heart"
-									defaultValue="add a red heart"
+									placeholder="red heart"
+									defaultValue="red heart"
 									maxRows={6}
 									InputProps={{
 										style: fontMono.style,