feat: stricter prompt

adds reloading and several performance tweaks
fixes several bugs with rendering issues

public/js/utils.js

@@ -50,17 +50,20 @@ function answer(window_, channel, targetOrigin = "*") {
 }
 
 function handleTemplate(template) {
-	for (let i = 1; i < 100_000_000; i++) {
+	for (let i = 1; i < 1_000; i++) {
 		window.clearInterval(i);
 		window.cancelAnimationFrame(i);
 		window.clearTimeout(i);
 	}
 
-	Function("Template", `${template};`)();
+	try {
+		Function("Template", `${template};`)();
+	} catch (error) {
+		console.log(error);
+	}
 }
 
 subscribe("fail4", event => {
-	console.log("GUEST", event);
 	const { action } = event.data;
 	switch (action.type) {
 		case "call":
@@ -70,7 +73,6 @@ subscribe("fail4", event => {
 			handleTemplate(action.payload.template);
 			break;
 		case "broadcast":
-			console.log("broadcast", action.payload.template);
 			ctx.clearRect(0, 0, canvas.width, canvas.height);
 			handleTemplate(action.payload.template);
 			break;

src/pages/_app.tsx

@@ -1,7 +1,6 @@
 import Head from "next/head";
 import { AppProps } from "next/app";
 import { ThemeProvider } from "@mui/material/styles";
-import CssBaseline from "@mui/material/CssBaseline";
 import { CacheProvider, EmotionCache } from "@emotion/react";
 import theme from "@/lib/theme";
 import createEmotionCache from "@/lib/createEmotionCache";
@@ -22,7 +21,6 @@ export default function MyApp(props: MyAppProps) {
 			</Head>
 			<ThemeProvider theme={theme}>
 				{/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
-				<CssBaseline />
 				<Component {...pageProps} />
 			</ThemeProvider>
 		</CacheProvider>