Spaces:

failfast
/

2D-GameCreator

Running

@@ -17,13 +17,26 @@
     "url": "https://github.com/pixelass/"
   },
   "scripts": {
-    "dev": "concurrently 'npm:dev-*'",
-    "dev-ui": "next dev",
-    "dev-frame": "webpack serve --config ./config/webpack.config.dev.js",
     "prepare": "husky install",
     "spj": "npx sort-package-json",
     "toc": "npx markdown-toc README.md -i"
   },
   "dependencies": {
     "@emotion/cache": "11.10.7",
     "@emotion/react": "11.10.6",
@@ -32,6 +45,7 @@
     "@mui/icons-material": "5.11.16",
     "@mui/material": "5.12.0",
     "axios": "1.3.5",
     "eslint": "8.37.0",
     "eslint-config-next": "13.2.4",
     "jotai": "2.0.4",
@@ -46,14 +60,8 @@
   "devDependencies": {
     "@semantic-release/git": "^10.0.1",
     "@types/react-syntax-highlighter": "^15.5.6",
-    "concurrently": "^8.0.1",
-    "css-loader": "^6.7.3",
-    "html-webpack-plugin": "^5.5.0",
     "husky": "^8.0.3",
-    "style-loader": "^3.3.2",
-    "webpack": "^5.77.0",
-    "webpack-cli": "^5.0.1",
-    "webpack-dev-server": "^4.13.2"
   },
   "engines": {
     "node": ">= 18"

     "url": "https://github.com/pixelass/"
   },
   "scripts": {
+    "dev": "next dev",
     "prepare": "husky install",
     "spj": "npx sort-package-json",
     "toc": "npx markdown-toc README.md -i"
   },
+  "lint-staged": {
+    "*.js": [
+      "npx prettier --write"
+    ],
+    "package.json": [
+      "npx sort-package-json",
+      "npx prettier --write"
+    ],
+    "*.md": [
+      "npx prettier --write"
+    ],
+    "README.md": [
+      "npx markdown-toc -i"
+    ]
+  },
   "dependencies": {
     "@emotion/cache": "11.10.7",
     "@emotion/react": "11.10.6",
     "@mui/icons-material": "5.11.16",
     "@mui/material": "5.12.0",
     "axios": "1.3.5",
+    "esdeka": "0.1.18",
     "eslint": "8.37.0",
     "eslint-config-next": "13.2.4",
     "jotai": "2.0.4",
   "devDependencies": {
     "@semantic-release/git": "^10.0.1",
     "@types/react-syntax-highlighter": "^15.5.6",
     "husky": "^8.0.3",
+    "prettier": "^2.8.7"
   },
   "engines": {
     "node": ">= 18"

project/public/index.html DELETED Viewed

@@ -1,15 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<title>fail3</title>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		<link rel="stylesheet" href="./style.css" />
-	</head>
-	<body>
-		<canvas id="canvas"></canvas>
-		<script src="utils.js"></script>
-		<!-- WEBPACK will inject the bundle.js here -->
-	</body>
-</html>

project/public/style.css DELETED Viewed

@@ -1,10 +0,0 @@
-* {
-	box-sizing: border-box;
-	margin: 0;
-	padding: 0;
-}
-html,
-body {
-	overflow: hidden;
-}

project/public/utils.js DELETED Viewed

@@ -1,9 +0,0 @@
-const canvas = document.querySelector("#canvas");
-function handleResize() {
-	requestAnimationFrame(() => {
-		canvas.width = window.innerWidth;
-		canvas.height = window.innerHeight;
-	});
-}
-handleResize();
-window.addEventListener("resize", handleResize, { passive: true });

project/src/.gitkeep DELETED Viewed

File without changes

public/js/utils.js ADDED Viewed

	@@ -0,0 +1,80 @@

+const canvas = document.querySelector("#canvas");
+const ctx = canvas.getContext("2d");
+function handleResize() {
+	requestAnimationFrame(() => {
+		canvas.width = window.innerWidth;
+		canvas.height = window.innerHeight;
+	});
+}
+handleResize();
+window.addEventListener("resize", handleResize, { passive: true });
+const clients = {
+	host: "__ESDEKA::host__",
+	guest: "__ESDEKA::guest__",
+};
+// Shared communicators
+function subscribe(channel, callback) {
+	function handleMessage(event) {
+		if (
+			event.data.client &&
+			Object.values(clients).includes(event.data.client) &&
+			event.data.channel === channel
+		) {
+			callback(event);
+		}
+	}
+	window.addEventListener("message", handleMessage);
+	return () => {
+		window.removeEventListener("message", handleMessage);
+	};
+}
+const host = {};
+// Guest communicators
+function answer(window_, channel, targetOrigin = "*") {
+	window_.postMessage(
+		{
+			client: clients.guest,
+			channel,
+			action: {
+				type: "answer",
+			},
+		},
+		targetOrigin
+	);
+}
+function handleTemplate(template) {
+	for (let i = 1; i < 100_000_000; i++) {
+		window.clearInterval(i);
+		window.cancelAnimationFrame(i);
+		window.clearTimeout(i);
+	}
+	Function("Template", `${template};`)();
+}
+subscribe("fail4", event => {
+	console.log("GUEST", event);
+	const { action } = event.data;
+	switch (action.type) {
+		case "call":
+			host.current = event.source;
+			answer(event.source, "fail4");
+			ctx.clearRect(0, 0, canvas.width, canvas.height);
+			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;
+		default:
+			break;
+	}
+});

src/pages/api/gpt.ts CHANGED Viewed

@@ -9,9 +9,9 @@ export default async function handler(request: NextApiRequest, response: NextApi
 				const answer = await toOpenAI(request.body);
 				return response.status(200).json(answer);
 			} catch (error) {
-				return response.status((error as AxiosError).status ?? 500).end();
 			}
 		default:
-			return response.status(405).end();
 	}
 }

 				const answer = await toOpenAI(request.body);
 				return response.status(200).json(answer);
 			} catch (error) {
+				return response.status((error as AxiosError).status ?? 500).json({});
 			}
 		default:
+			return response.status(405).json({});
 	}
 }

src/pages/api/run.ts CHANGED Viewed

@@ -9,10 +9,10 @@ export default async function handler(request: NextApiRequest, response: NextApi
 		case "POST":
 			if (request.body.content) {
 				await fs.writeFile(outputFile, request.body.content);
-				return response.status(200).end();
 			}
-			return response.status(500).end();
 		default:
-			return response.status(405).end();
 	}
 }

 		case "POST":
 			if (request.body.content) {
 				await fs.writeFile(outputFile, request.body.content);
+				return response.status(200).json({});
 			}
+			return response.status(500).json({});
 		default:
+			return response.status(405).json({});
 	}
 }

src/pages/index.tsx CHANGED Viewed

@@ -30,9 +30,13 @@ import Toolbar from "@mui/material/Toolbar";
 import ListItemIcon from "@mui/material/ListItemIcon";
 import ListItemButton from "@mui/material/ListItemButton";
 import ListItemText from "@mui/material/ListItemText";
 const base = {
-	default: "/** 1.Base Script */const canvas=document.querySelector('canvas');",
 };
 const fontMono = Fira_Code({
@@ -53,14 +57,71 @@ export default function Home() {
 	]);
 	const [loading, setLoading] = useState(false);
 	useEffect(() => {
-		const current = answers.find(({ id }) => id === runningId);
-		if (current) {
-			void axios.post("/api/run", {
-				content: current.content,
 			});
 		}
-	}, [runningId, answers]);
 	const current = answers.find(({ id }) => id === activeId);
@@ -114,14 +175,14 @@ export default function Home() {
 								color="inherit"
 								aria-label="Clear Prompt"
 								onClick={async () => {
-									await axios.post("/api/run", {
-										content:
-											"/** 1.Base Script */const canvas=document.querySelector('canvas');",
-									});
 									setActiveId("1");
-									setTemplate(
-										"/** 1.Base Script */const canvas=document.querySelector('canvas');"
-									);
 								}}
 							>
 								<ClearIcon />
@@ -266,7 +327,7 @@ export default function Home() {
 					ref={ref}
 					component="iframe"
 					sx={{ width: "100%", flex: 1, m: 0, border: 0 }}
-					src="//localhost:8080"
 				/>
 			</Stack>
 		</Stack>

 import ListItemIcon from "@mui/material/ListItemIcon";
 import ListItemButton from "@mui/material/ListItemButton";
 import ListItemText from "@mui/material/ListItemText";
+import { useHost } from "esdeka/react";
 const base = {
+	default: `/** 1.Base Script */
+const canvas=document.querySelector('canvas');
+const ctx=canvas.getContext('2d');
+`,
 };
 const fontMono = Fira_Code({
 	]);
 	const [loading, setLoading] = useState(false);
+	const { broadcast, call, subscribe } = useHost(ref, "fail4");
+	const connection = useRef(false);
+	const [tries, setTries] = useState(5);
+	// Send a connection request
 	useEffect(() => {
+		if (connection.current || tries <= 0) {
+			return () => {
+				/* Consistency */
+			};
+		}
+		const timeout = setTimeout(() => {
+			call({ template: "console.log('it works')" });
+			setTries(tries - 1);
+		}, 200);
+		call({ template: "console.log('it works')" });
+		return () => {
+			clearTimeout(timeout);
+		};
+	}, [call, tries]);
+	useEffect(() => {
+		if (!connection.current) {
+			const unsubscribe = subscribe(event => {
+				const { action } = event.data;
+				switch (action.type) {
+					case "answer":
+						connection.current = true;
+						break;
+					default:
+						break;
+				}
 			});
+			return () => {
+				unsubscribe();
+			};
 		}
+		return () => {
+			/* Consistency */
+		};
+	}, [subscribe]);
+	// 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 (current) {
+	// 		void axios.post("/api/run", {
+	// 			content: current.content,
+	// 		});
+	// 	}
+	// }, [runningId, answers]);
 	const current = answers.find(({ id }) => id === activeId);
 								color="inherit"
 								aria-label="Clear Prompt"
 								onClick={async () => {
+									broadcast({ template: base.default });
+									//await axios.post("/api/run", {
+									//	content:
+									//		base.default,
+									//});
 									setActiveId("1");
+									setTemplate(base.default);
 								}}
 							>
 								<ClearIcon />
 					ref={ref}
 					component="iframe"
 					sx={{ width: "100%", flex: 1, m: 0, border: 0 }}
+					src="/live"
 				/>
 			</Stack>
 		</Stack>

src/pages/live.tsx ADDED Viewed

	@@ -0,0 +1,10 @@

+import Script from "next/script";
+export default function Page() {
+	return (
+		<>
+			<canvas id="canvas" />
+			<Script src="/js/utils.js" />
+		</>
+	);
+}