feat: changed everything to create Canvas2D games

README.md

@@ -1,13 +1,9 @@
-<h1 align="center"><big>fail4</big></h1>
+<h1 align="center"><big>2DGameGPT</big></h1>
 
 <p align="center"><img src="assets/logo.png" alt="logo" width="200"/></p>
 
 [![Discord](https://img.shields.io/discord/1091306623819059300?color=7289da&label=Discord&logo=discord&logoColor=fff&style=for-the-badge)](https://discord.com/invite/m3TBB9XEkb)
 
-> This project is built to fail  
-> (until it doesn't)  
-> Restart until it works
-
 # Prompt-Driven WebUI for Creative Development
 
 Discover a web-based user interface designed for prompt-driven development, enabling users to create

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "fail4",
+  "name": "2dgamegpt",
   "version": "1.0.0",
   "description": "JavaScript Canvas2D | 100% Prompt Driven Development (GPT) ",
   "keywords": [
@@ -16,6 +16,12 @@
     "name": "Gregor Adams",
     "url": "https://github.com/pixelass/"
   },
+  "contributors": [
+    {
+      "name": "Tim Pietrusky",
+      "url": "https://github.com/TimPietrusky"
+    }
+  ],
   "scripts": {
     "dev": "next dev",
     "prepare": "husky install",
@@ -46,8 +52,10 @@
     "@monaco-editor/react": "4.5.0",
     "@mui/icons-material": "5.11.16",
     "@mui/material": "5.12.0",
+    "@tweenjs/tween.js": "^18.6.4",
     "@types/prettier": "^2.7.2",
     "axios": "1.3.5",
+    "codesandbox": "2.2.3",
     "esdeka": "0.1.18",
     "eslint": "8.37.0",
     "eslint-config-next": "13.2.4",

public/js/utils.js

@@ -52,12 +52,12 @@ function handleTemplate(template) {
 	Function("Template", `${template};`)();
 }
 
-subscribe("fail4", event => {
+subscribe("2DGameGPT", event => {
 	const { action } = event.data;
 	switch (action.type) {
 		case "call":
 			host.current = event.source;
-			answer(event.source, "fail4");
+			answer(event.source, "2DGameGPT");
 			handleTemplate(action.payload.template);
 			break;
 		case "broadcast":

src/components/Codepen.tsx

@@ -0,0 +1,28 @@
+import IconButton from "@mui/material/IconButton";
+import { wrappers } from "@/utils/share";
+import Tooltip from "@mui/material/Tooltip";
+import { CodepenIcon } from "@/components/CodepenIcon";
+import { ShareProps } from "../pages";
+
+export function Codepen({ title, content }: ShareProps) {
+	return (
+		<form action="https://codepen.io/pen/define" method="POST" target="_blank">
+			<input
+				type="hidden"
+				name="data"
+				value={JSON.stringify({
+					title,
+					js: wrappers.js(content),
+					html: wrappers.miniHtml(title),
+					css: wrappers.css(),
+				})}
+			/>
+
+			<Tooltip title="Open in Codepen">
+				<IconButton color="primary" type="submit" aria-label="Codepen">
+					<CodepenIcon />
+				</IconButton>
+			</Tooltip>
+		</form>
+	);
+}

src/components/CodepenIcon.tsx

@@ -0,0 +1,12 @@
+import SvgIcon, { SvgIconProps } from "@mui/material/SvgIcon";
+
+export function CodepenIcon(props: SvgIconProps) {
+	return (
+		<SvgIcon {...props} viewBox="0 0 24 24">
+			<path
+				fill="currentColor"
+				d="M8.21 12L6.88 12.89V11.11L8.21 12M11.47 9.82V7.34L7.31 10.12L9.16 11.36L11.47 9.82M16.7 10.12L12.53 7.34V9.82L14.84 11.36L16.7 10.12M7.31 13.88L11.47 16.66V14.18L9.16 12.64L7.31 13.88M12.53 14.18V16.66L16.7 13.88L14.84 12.64L12.53 14.18M12 10.74L10.12 12L12 13.26L13.88 12L12 10.74M22 12C22 17.5 17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2C17.5 2 22 6.5 22 12M18.18 10.12C18.18 10.09 18.18 10.07 18.18 10.05L18.17 10L18.17 10L18.16 9.95C18.15 9.94 18.15 9.93 18.14 9.91L18.13 9.89L18.11 9.85L18.1 9.83L18.08 9.8L18.06 9.77L18.03 9.74L18 9.72L18 9.7L17.96 9.68L17.95 9.67L12.3 5.91C12.12 5.79 11.89 5.79 11.71 5.91L6.05 9.67L6.05 9.68L6 9.7C6 9.71 6 9.72 6 9.72L5.97 9.74L5.94 9.77L5.93 9.8L5.9 9.83L5.89 9.85L5.87 9.89L5.86 9.91L5.84 9.95L5.84 10L5.83 10L5.82 10.05C5.82 10.07 5.82 10.09 5.82 10.12V13.88C5.82 13.91 5.82 13.93 5.82 13.95L5.83 14L5.84 14L5.84 14.05C5.85 14.06 5.85 14.07 5.86 14.09L5.87 14.11L5.89 14.15L5.9 14.17L5.92 14.2L5.94 14.23C5.95 14.24 5.96 14.25 5.97 14.26L6 14.28L6 14.3L6.04 14.32L6.05 14.33L11.71 18.1C11.79 18.16 11.9 18.18 12 18.18C12.1 18.18 12.21 18.15 12.3 18.1L17.95 14.33L17.96 14.32L18 14.3L18 14.28L18.03 14.26L18.06 14.23L18.08 14.2L18.1 14.17L18.11 14.15L18.13 14.11L18.14 14.09L18.16 14.05L18.16 14L18.17 14L18.18 13.95C18.18 13.93 18.18 13.91 18.18 13.88V10.12M17.12 12.89V11.11L15.79 12L17.12 12.89Z"
+			/>
+		</SvgIcon>
+	);
+}

src/components/Codesandbox.tsx

@@ -0,0 +1,25 @@
+import axios from "axios";
+import CropSquareIcon from "@mui/icons-material/CropSquare";
+import IconButton from "@mui/material/IconButton";
+import Tooltip from "@mui/material/Tooltip";
+import { ShareProps } from "../pages";
+
+export function Codesandbox({ title, content }: ShareProps) {
+	return (
+		<Tooltip title="Open in Codesandbox">
+			<IconButton
+				color="primary"
+				aria-label="Codsandbox"
+				onClick={async () => {
+					const { data } = await axios.post<string>("/api/url/codesandbox", {
+						content,
+						title,
+					});
+					window.open(data, "_blank");
+				}}
+			>
+				<CropSquareIcon />
+			</IconButton>
+		</Tooltip>
+	);
+}

src/components/EditTitle.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import Box from "@mui/material/Box";
 import InputBase from "@mui/material/InputBase";
-import { roboto } from "@/lib/theme";
+import { poppins } from "@/lib/theme";
 import IconButton from "@mui/material/IconButton";
 import SaveIcon from "@mui/icons-material/Save";
 
@@ -24,7 +24,7 @@ export function EditTitle({ value, onSave }: { value: string; onSave(value: stri
 					sx={{
 						width: "100%",
 						fontSize: 16,
-						input: { ...roboto.style, p: 0, lineHeight: 1.5 },
+						input: { ...poppins.style, p: 0, lineHeight: 1.5 },
 					}}
 					onChange={event => {
 						setText(event.target.value);

src/components/ExampleButton.tsx

@@ -0,0 +1,37 @@
+import { Button, Typography } from "@mui/material";
+import { MouseEventHandler } from "react";
+
+interface ExampleButtonProps {
+	text: string;
+	title?: string;
+	displayLength?: number;
+	onClick?: (text: string) => void;
+}
+
+/**
+ *
+ * A button that hosts an example "text" that can be used as the input
+ * to anything to get an inspiration on how to get started.
+ *
+ * @param props ExampleButtonProps
+ * @returns
+ */
+export default function ExampleButton(props: ExampleButtonProps) {
+	const { title, text, displayLength = 50, onClick } = props;
+
+	const displayText = text.slice(0, displayLength) + (text.length > displayLength ? "..." : "");
+
+	const handleClick: MouseEventHandler = event => {
+		event.preventDefault();
+
+		if (onClick) {
+			onClick(text);
+		}
+	};
+
+	return (
+		<Button onClick={handleClick} sx={{ textTransform: "none" }} variant="outlined">
+			<Typography>{title ?? displayText}</Typography>
+		</Button>
+	);
+}

src/components/InfoMenu.tsx

@@ -0,0 +1,72 @@
+import { useState, MouseEvent } from "react";
+import IconButton from "@mui/material/IconButton";
+import Menu from "@mui/material/Menu";
+import MenuItem from "@mui/material/MenuItem";
+import InfoIcon from "@mui/icons-material/Info";
+import { useRouter } from "next/router";
+
+export function InfoMenu() {
+	const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+	const open = Boolean(anchorEl);
+	const handleClick = (event: MouseEvent<HTMLElement>) => {
+		setAnchorEl(event.currentTarget);
+	};
+	const router = useRouter();
+	const handleClose = () => {
+		setAnchorEl(null);
+	};
+
+	return (
+		<div>
+			<IconButton
+				aria-label="Info"
+				id="infoMenu-button"
+				aria-controls={open ? "infoMenu-menu" : undefined}
+				aria-expanded={open ? "true" : undefined}
+				aria-haspopup="true"
+				onClick={handleClick}
+			>
+				<InfoIcon />
+			</IconButton>
+			<Menu
+				id="infoMenu-menu"
+				MenuListProps={{
+					"aria-labelledby": "infoMenu-button",
+				}}
+				anchorEl={anchorEl}
+				open={open}
+				onClose={handleClose}
+				PaperProps={{
+					style: {
+						width: "20ch",
+					},
+				}}
+			>
+				<MenuItem
+					onClick={async () => {
+						await router.push("/legal/data-policy");
+						handleClose();
+					}}
+				>
+					Data Policy
+				</MenuItem>
+				<MenuItem
+					onClick={async () => {
+						await router.push("/legal/imprint");
+						handleClose();
+					}}
+				>
+					Imprint
+				</MenuItem>
+				<MenuItem
+					onClick={async () => {
+						await router.push("/legal/cookie-policy");
+						handleClose();
+					}}
+				>
+					Cookie Policy
+				</MenuItem>
+			</Menu>
+		</div>
+	);
+}

src/components/SimpleSnackbar.tsx

@@ -0,0 +1,37 @@
+import Button from "@mui/material/Button";
+import Snackbar from "@mui/material/Snackbar";
+import IconButton from "@mui/material/IconButton";
+import CloseIcon from "@mui/icons-material/Close";
+import { SyntheticEvent } from "react";
+import { Alert, SnackbarContent } from "@mui/material";
+
+interface SnackbarProps {
+	showError: boolean;
+	handleClose: (event: SyntheticEvent | Event, reason?: string) => void;
+	message: string;
+}
+
+export default function SimpleSnackbar({ showError, handleClose, message }: SnackbarProps) {
+	const action = (
+		<>
+			<Button color="secondary" size="small" onClick={handleClose}>
+				UNDO
+			</Button>
+			<IconButton size="small" aria-label="close" color="inherit" onClick={handleClose}>
+				<CloseIcon fontSize="small" />
+			</IconButton>
+		</>
+	);
+
+	return (
+		<Snackbar
+			open={showError}
+			autoHideDuration={6000}
+			onClose={handleClose}
+			action={action}
+			anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
+		>
+			<Alert severity="error">{message}</Alert>
+		</Snackbar>
+	);
+}

src/constants/index.ts

@@ -1,26 +1,16 @@
 export const base = {
-	default: `/** CHANGELOG
- * v1.0.0. Set up canvas
- */
-const canvas = document.querySelector('canvas');
+	default: `const canvas = document.querySelector('canvas');
+canvas.style.backgroundColor = '#fff';
 const ctx = canvas.getContext('2d');
-/**
- * Always use this random function
- */
-function random() {
-	return Math.random()
-}
-/**
- * The draw function is called every frame to update the canvas.
- * To change the drawing logic, modify the code inside this function.
- */
+
 function draw(){
-	// TODO: Add drawing logic here
-	// Set the desired FPS (frames per second) for the animation
 	const FPS = 60;
-	// Schedule the next frame to be drawn
+
+	// TODO: Add drawing logic here
+	
+	// NEVER stop the loop
 	setTimeout(requestAnimationFrame(draw),1000/FPS)
 }
 draw();
-	`.trim(),
+    `.trim(),
 };

src/lib/theme.ts

@@ -1,14 +1,13 @@
-import { Fira_Code, Roboto } from "next/font/google";
+import { Fira_Code, Poppins } from "next/font/google";
 import { experimental_extendTheme as extendTheme } from "@mui/material/styles";
 
-export const roboto = Roboto({
+export const poppins = Poppins({
 	weight: ["300", "400", "500", "700"],
 	subsets: ["latin"],
 	display: "swap",
 	fallback: ["Helvetica", "Arial", "sans-serif"],
 });
 
-// Create a theme instance.
 const theme = extendTheme({
 	colorSchemes: {
 		light: {
@@ -33,7 +32,31 @@ const theme = extendTheme({
 		},
 	},
 	typography: {
-		...roboto.style,
+		...poppins.style,
+		h1: {
+			fontSize: "3em",
+			marginBottom: 24,
+		},
+		h2: {
+			fontSize: "1.9em",
+			marginBottom: 12,
+		},
+		h3: {
+			fontSize: "1.7em",
+			marginBottom: 12,
+		},
+		h4: {
+			fontSize: "1.25em",
+			marginBottom: 12,
+		},
+		h5: {
+			fontSize: "1em",
+			marginBottom: 12,
+		},
+		h6: {
+			fontSize: "0.8em",
+			marginBottom: 12,
+		},
 	},
 });
 

src/pages/_document.tsx

@@ -9,7 +9,7 @@ import Document, {
 } from "next/document";
 import createEmotionServer from "@emotion/server/create-instance";
 import { AppType } from "next/app";
-import { roboto } from "@/lib/theme";
+import { poppins } from "@/lib/theme";
 import createEmotionCache from "@/lib/createEmotionCache";
 import { MyAppProps } from "./_app";
 import { getInitColorSchemeScript } from "@mui/material/styles";
@@ -20,7 +20,7 @@ interface MyDocumentProps extends DocumentProps {
 
 export default function MyDocument({ emotionStyleTags }: MyDocumentProps) {
 	return (
-		<Html lang="en" className={roboto.className}>
+		<Html lang="en" className={poppins.className}>
 			<Head>
 				<link rel="shortcut icon" href="/favicon.ico" />
 				<meta name="emotion-insertion-point" content="" />

src/pages/api/{gpt.ts → generate.ts}

@@ -9,7 +9,7 @@ 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).json({});
+				return response.status((error as AxiosError).status ?? 500).json(error);
 			}
 		default:
 			return response.status(405).json({});

src/pages/api/run.ts

@@ -1,18 +0,0 @@
-import fs from "node:fs/promises";
-import path from "node:path";
-import { NextApiRequest, NextApiResponse } from "next";
-
-const outputFile = path.join(__dirname, "../../../../project/src/index.js");
-
-export default async function handler(request: NextApiRequest, response: NextApiResponse) {
-	switch (request.method) {
-		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/api/url/codesandbox.ts

@@ -0,0 +1,43 @@
+import { getParameters } from "codesandbox/lib/api/define";
+import { NextApiRequest, NextApiResponse } from "next";
+import prettier from "prettier";
+import parserHTML from "prettier/parser-html";
+import parserCSS from "prettier/parser-postcss";
+import parserBabel from "prettier/parser-babel";
+import { wrappers } from "@/utils/share";
+
+export default async function handler(request: NextApiRequest, response: NextApiResponse) {
+	const content = request.body.content as string;
+	const title = request.body.title as string;
+
+	const parameters = getParameters({
+		template: "static",
+		files: {
+			"index.html": {
+				content: prettier.format(wrappers.html(title), {
+					parser: "html",
+					plugins: [parserHTML],
+				}),
+				isBinary: false,
+			},
+			"style.css": {
+				content: prettier.format(wrappers.css(), {
+					parser: "css",
+					plugins: [parserCSS],
+				}),
+				isBinary: false,
+			},
+			"script.js": {
+				content: prettier.format(wrappers.js(content), {
+					parser: "babel",
+					plugins: [parserBabel],
+				}),
+				isBinary: false,
+			},
+		},
+	});
+
+	response
+		.status(200)
+		.json(`https://codesandbox.io/api/v1/sandboxes/define?parameters=${parameters}`);
+}

src/pages/api/url/types.d.ts

@@ -0,0 +1,8 @@
+declare module "codesandbox-import-utils/lib/api/define" {
+	interface IFiles {
+		[key: string]: {
+			content: string | Record<string, unknown>;
+			isBinary: boolean;
+		};
+	}
+}

src/pages/index.tsx

@@ -1,6 +1,6 @@
-import { useEffect, useRef, useState } from "react";
+import { SyntheticEvent, useEffect, useRef, useState } from "react";
 
-import axios from "axios";
+import axios, { AxiosError, AxiosError } from "axios";
 import AcUnitIcon from "@mui/icons-material/AcUnit";
 import LocalFireDepartmentIcon from "@mui/icons-material/LocalFireDepartment";
 import CheckIcon from "@mui/icons-material/Check";
@@ -43,17 +43,29 @@ import FormControl from "@mui/material/FormControl";
 import InputLabel from "@mui/material/InputLabel";
 import Select from "@mui/material/Select";
 import MenuItem from "@mui/material/MenuItem";
-import { fontMono } from "@/lib/theme";
 import { useColorScheme } from "@mui/material/styles";
 import { getTheme, prettify } from "@/utils";
 import { answersAtom, showCodeAtom } from "@/store/atoms";
 import { base } from "@/constants";
 import { EditTitle } from "@/components/EditTitle";
-
+import Link from "next/link";
+import { fontMono } from "@/lib/theme";
+import { Codesandbox } from "@/components/Codesandbox";
+import { Codepen } from "@/components/Codepen";
+import { InfoMenu } from "@/components/InfoMenu";
+import SimpleSnackbar from "@/components/SimpleSnackbar";
+import ExampleButton from "@/components/ExampleButton";
+import { ListSubheader } from "@mui/material";
 const MonacoEditor = dynamic(import("@monaco-editor/react"), { ssr: false });
 
+export interface ShareProps {
+	title: string;
+	content: string;
+}
+
 export default function Home() {
 	const ref = useRef<HTMLIFrameElement>(null);
+	const [prompt, setPrompt] = useState("");
 	const [template, setTemplate] = useState(prettify(base.default));
 	const [runningId, setRunningId] = useState("1");
 	const [activeId, setActiveId] = useState("1");
@@ -62,9 +74,12 @@ export default function Home() {
 	const [showCode, setShowCode] = useAtom(showCodeAtom);
 	const [loading, setLoading] = useState(false);
 	const [loadingLive, setLoadingLive] = useState(true);
+	const [showError, setShowError] = useState(false);
+	const [errorMessage, setErrorMessage] = useState("");
+
 	const { mode, systemMode } = useColorScheme();
 
-	const { call, subscribe } = useHost(ref, "fail4");
+	const { call, subscribe } = useHost(ref, "2DGameGPT");
 
 	const connection = useRef(false);
 	const [tries, setTries] = useState(1);
@@ -99,8 +114,6 @@ export default function Home() {
 					case "answer":
 						connection.current = true;
 						setLoadingLive(false);
-
-						console.log("connected");
 						break;
 					default:
 						break;
@@ -117,6 +130,14 @@ export default function Home() {
 
 	const current = answers.find(({ id }) => id === activeId);
 
+	const handleSnackbarClose = (event: SyntheticEvent | Event, reason?: string) => {
+		if (reason === "clickaway") {
+			return;
+		}
+
+		setShowError(false);
+	};
+
 	function reload() {
 		connection.current = false;
 		if (ref.current) {
@@ -135,67 +156,23 @@ export default function Home() {
 					position: "absolute",
 					inset: 0,
 					overflow: "hidden",
-					flexDirection: "row",
+					flexDirection: { md: "row" },
 					height: "100%",
 				}}
 			>
-				<Stack sx={{ width: "50%", flex: 1 }}>
+				<Stack
+					sx={{
+						width: { md: "50%" },
+						height: { xs: "50%", md: "100%" },
+						flex: 1,
+						overflow: "hidden",
+					}}
+				>
 					<AppBar position="static" elevation={0} color="default">
 						<Toolbar>
-							<Button
-								form="gpt-form"
-								type="submit"
-								aria-label={loading ? "Loading" : "Run"}
-								aria-disabled={loading}
-								disabled={loading}
-								startIcon={
-									loading ? <CircularProgress size={20} /> : <PlayArrowIcon />
-								}
-							>
-								Run
-							</Button>
-
-							{current?.id === editingId ? (
-								<EditTitle
-									value={current.task}
-									onSave={value => {
-										setEditingId(null);
-										setAnswers(previousAnswers =>
-											previousAnswers.map(answer_ =>
-												current.id === answer_.id
-													? {
-															...answer_,
-															task: value,
-													  }
-													: answer_
-											)
-										);
-									}}
-								/>
-							) : (
-								<>
-									<Typography
-										sx={{
-											flex: 1,
-											pl: 3,
-											overflow: "hidden",
-											textOverflow: "ellipsis",
-											whiteSpace: "nowrap",
-										}}
-									>
-										{current?.task}
-									</Typography>
-									<IconButton
-										onClick={() => {
-											if (current) {
-												setEditingId(current.id);
-											}
-										}}
-									>
-										<EditIcon />
-									</IconButton>
-								</>
-							)}
+							<Typography variant="h3" component="h1" sx={{ flex: 1, m: 0 }}>
+								2D GameCreator-GPT
+							</Typography>
 
 							<IconButton
 								color="inherit"
@@ -229,12 +206,12 @@ export default function Home() {
 									event.preventDefault();
 									setAnswers(previousAnswers =>
 										previousAnswers.map(previousAnswer => {
-											console.log(previousAnswer.id, activeId);
 											return previousAnswer.id === activeId
 												? { ...previousAnswer, content: template }
 												: previousAnswer;
 										})
 									);
+									setTemplate(previousState => prettify(previousState));
 									reload();
 								}
 							}}
@@ -247,25 +224,29 @@ export default function Home() {
 									fontSize: 14,
 								}}
 								onChange={async value => {
-									console.log(value);
 									setTemplate(value ?? "");
 								}}
 							/>
 						</Box>
 					)}
 					<Stack
-						sx={{ flex: 1, display: showCode ? "none" : undefined, overflow: "hidden" }}
+						sx={{
+							flex: 1,
+							display: showCode ? "none" : undefined,
+							overflow: "hidden",
+						}}
 					>
 						<Box
 							component="form"
 							id="gpt-form"
+							sx={{ p: 1 }}
 							onSubmit={async event => {
 								event.preventDefault();
 								const formData = new FormData(event.target as HTMLFormElement);
 								const formObject = Object.fromEntries(formData);
 								try {
 									setLoading(true);
-									const { data } = await axios.post("/api/gpt", formObject);
+									const { data } = await axios.post("/api/generate", formObject);
 									const answer = data;
 									setAnswers(previousAnswers => [answer, ...previousAnswers]);
 									setRunningId(answer.id);
@@ -273,6 +254,8 @@ export default function Home() {
 									setTemplate(prettify(answer.content));
 									reload();
 								} catch (error) {
+									setShowError(true);
+									setErrorMessage((error as AxiosError).message);
 									console.error(error);
 								} finally {
 									setLoading(false);
@@ -281,191 +264,314 @@ export default function Home() {
 						>
 							<Paper variant="outlined" sx={{ p: 0 }}>
 								<Stack sx={{ p: 2, gap: 2 }}>
-									<TextField
-										multiline
-										fullWidth
-										id="prompt"
-										name="prompt"
-										label="Prompt"
-										placeholder="matrix code"
-										defaultValue="matrix code"
-										maxRows={6}
-										InputProps={{
-											style: fontMono.style,
-										}}
-									/>
-									<TextField
-										multiline
-										fullWidth
-										id="negativePrompt"
-										name="negativePrompt"
-										label="Negative Prompt"
-										placeholder="images, audio files"
-										maxRows={6}
-										InputProps={{
-											style: fontMono.style,
-										}}
-									/>
-								</Stack>
-							</Paper>
-							<Accordion disableGutters square elevation={0}>
-								<AccordionSummary
-									expandIcon={<ExpandMoreIcon />}
-									aria-controls="gtp-options-content"
-									id="gtp-options-header"
-									sx={{
-										bgcolor: "background.paper",
-										color: "text.primary",
-									}}
-								>
-									<Typography>Options</Typography>
-								</AccordionSummary>
-								<AccordionDetails>
-									<FormControl fullWidth variant="outlined" sx={{ mb: 3 }}>
-										<InputLabel id="gpt-model-select-label">Model</InputLabel>
-										<Select
-											labelId="gpt-model-select-label"
-											id="gpt-model-select"
-											name="model"
-											defaultValue="gpt-3.5-turbo"
-											label="Model"
-										>
-											<MenuItem value="gpt-3.5-turbo">GPT 3.5 turbo</MenuItem>
-											<MenuItem value="gpt-4">GPT 4</MenuItem>
-										</Select>
-									</FormControl>
-									<Stack
-										spacing={2}
-										direction="row"
-										sx={{ mb: 2 }}
-										alignItems="center"
-									>
-										<AcUnitIcon />
-										<Slider
-											marks
-											id="temperature"
-											name="temperature"
-											min={0}
-											max={0.8}
-											defaultValue={0.2}
-											step={0.1}
-											valueLabelDisplay="auto"
-											aria-label="Temperature"
+									<Stack direction="row" spacing={1}>
+										<TextField
+											multiline
+											fullWidth
+											required
+											id="prompt"
+											name="prompt"
+											label="Prompt"
+											value={prompt}
+											onChange={e => setPrompt(e.target.value)}
+											minRows={5}
+											InputProps={{
+												style: fontMono.style,
+											}}
 										/>
-										<LocalFireDepartmentIcon />
+
+										<Stack spacing={1}>
+											<FormControl variant="outlined" sx={{ minWidth: 180 }}>
+												<InputLabel id="gpt-command-select-label">
+													Command
+												</InputLabel>
+												<Select
+													labelId="gpt-command-select-label"
+													id="gpt-command-select"
+													name="command"
+													defaultValue="CREATE_GAME"
+													label="Command"
+												>
+													<MenuItem value="CREATE_GAME">
+														create game
+													</MenuItem>
+													<MenuItem value="ADD_FEATURE">
+														add feature
+													</MenuItem>
+													<MenuItem value="REMOVE_FEATURE">
+														remove feature
+													</MenuItem>
+													<MenuItem value="UPDATE_FEATURE">
+														update feature
+													</MenuItem>
+													<MenuItem value="FIX_BUG">fix bug</MenuItem>
+												</Select>
+											</FormControl>
+
+											<Button
+												form="gpt-form"
+												type="submit"
+												variant="contained"
+												fullWidth
+												aria-label={loading ? "Loading" : "Run"}
+												aria-disabled={loading}
+												disabled={loading}
+												startIcon={
+													loading ? (
+														<CircularProgress size={20} />
+													) : (
+														<PlayArrowIcon />
+													)
+												}
+												sx={{ pl: 5, pr: 5, flexGrow: 1, overflow: "auto" }}
+											>
+												<Typography sx={{ fontWeight: "500" }}>
+													Run
+												</Typography>
+											</Button>
+										</Stack>
 									</Stack>
-									<Stack
-										spacing={2}
-										direction="row"
-										sx={{ mb: 2 }}
-										alignItems="center"
-									>
-										<TollIcon />
-										<Slider
-											marks
-											id="maxTokens"
-											name="maxTokens"
-											min={1024}
-											max={4096}
-											defaultValue={2048}
-											step={256}
-											valueLabelDisplay="auto"
-											aria-label="Max Tokens"
+
+									<Stack direction="row" spacing={1} alignItems="center">
+										<Typography>Examples</Typography>
+
+										<ExampleButton
+											title={"Space Invaders"}
+											text={"Retro Space Invaders"}
+											onClick={setPrompt}
+										/>
+
+										<ExampleButton
+											title="Jump & Run"
+											text={
+												"Jump & Run. Player collects coins to enter the next level. Various platform heights. Gras platform covers the whole ground. Space key for jumping, arrow keys for movement."
+											}
+											onClick={setPrompt}
+										/>
+
+										<ExampleButton
+											title="Flappy Bird"
+											text={
+												"Flappy Bird. Intro screen, start the game by pressing space key. Bird starts flying on the left center of the screen. Gradually falls slowly. Pressing the space key over and over lets the bird fly higher. Pipes move from the right of the screen to the left. Collision detection when the bird hits the ground or a pipe. When collision detected, then show intro screen. Player gets a point for each passed pipe without an collision. Score is shown in the top left while bird is flying. High score on intro screen."
+											}
+											onClick={setPrompt}
 										/>
-										<MoneyIcon />
 									</Stack>
-									<input
-										id="template"
-										name="template"
-										type="hidden"
-										value={template}
-										onChange={event => {
-											setTemplate(event.target.value);
+								</Stack>
+							</Paper>
+
+							<Paper variant="outlined" sx={{ mt: 2 }}>
+								<Accordion disableGutters square elevation={0}>
+									<AccordionSummary
+										expandIcon={<ExpandMoreIcon />}
+										aria-controls="gtp-options-content"
+										id="gtp-options-header"
+										sx={{
+											bgcolor: "background.paper",
+											color: "text.primary",
 										}}
-									/>
-								</AccordionDetails>
-							</Accordion>
+									>
+										<Typography>Options</Typography>
+									</AccordionSummary>
+									<AccordionDetails>
+										<Stack gap={2}>
+											<TextField
+												fullWidth
+												multiline
+												required={process.env.NODE_ENV === "production"}
+												id="openAPIKey"
+												name="openAPIKey"
+												label="OpenAI API Key"
+												minRows={1}
+												InputProps={{
+													style: fontMono.style,
+												}}
+											/>
+											<TextField
+												multiline
+												fullWidth
+												id="negativePrompt"
+												name="negativePrompt"
+												label="Negative Prompt"
+												placeholder="images, audio files"
+												maxRows={6}
+												InputProps={{
+													style: fontMono.style,
+												}}
+											/>
+											<FormControl
+												fullWidth
+												variant="outlined"
+												sx={{ mb: 3 }}
+											>
+												<InputLabel id="gpt-model-select-label">
+													Model
+												</InputLabel>
+												<Select
+													labelId="gpt-model-select-label"
+													id="gpt-model-select"
+													name="model"
+													defaultValue="gpt-3.5-turbo"
+													label="Model"
+												>
+													<MenuItem value="gpt-3.5-turbo">
+														GPT 3.5 turbo
+													</MenuItem>
+													<MenuItem value="gpt-4">GPT 4</MenuItem>
+												</Select>
+											</FormControl>
+										</Stack>
+										<Stack
+											spacing={2}
+											direction="row"
+											sx={{ mb: 2 }}
+											alignItems="center"
+										>
+											<AcUnitIcon />
+											<Slider
+												marks
+												id="temperature"
+												name="temperature"
+												min={0}
+												max={0.8}
+												defaultValue={0.2}
+												step={0.1}
+												valueLabelDisplay="auto"
+												aria-label="Temperature"
+											/>
+											<LocalFireDepartmentIcon />
+										</Stack>
+										<Stack
+											spacing={2}
+											direction="row"
+											sx={{ mb: 2 }}
+											alignItems="center"
+										>
+											<TollIcon />
+											<Slider
+												marks
+												id="maxTokens"
+												name="maxTokens"
+												min={1024}
+												max={8000}
+												defaultValue={2048}
+												step={256}
+												valueLabelDisplay="auto"
+												aria-label="Max Tokens"
+											/>
+											<MoneyIcon />
+										</Stack>
+										<input
+											id="template"
+											name="template"
+											type="hidden"
+											value={template}
+											onChange={event => {
+												setTemplate(event.target.value);
+											}}
+										/>
+									</AccordionDetails>
+								</Accordion>
+							</Paper>
 						</Box>
 
-						<List sx={{ flex: 1, overflow: "auto" }}>
-							{answers.map((answer, index) => {
-								return (
-									<ListItem
-										key={answer.id}
-										secondaryAction={
-											<Stack sx={{ flexDirection: "row", gap: 1 }}>
-												{answer.id === "1" ? undefined : (
-													<IconButton
-														edge="end"
-														aria-label="Delete"
-														onClick={() => {
-															setAnswers(previousAnswers =>
-																previousAnswers.filter(
-																	({ id }) => id !== answer.id
-																)
-															);
-															if (runningId === answer.id) {
-																const previous = answers[index + 1];
-																if (previous) {
-																	setActiveId(previous.id);
-																	setRunningId(previous.id);
-																	setTemplate(
-																		prettify(previous.task)
-																	);
-																	reload();
+						<Paper variant="elevation" sx={{ p: 1, overflow: "auto" }}>
+							<List sx={{ flex: 1, p: 0 }}>
+								<ListSubheader
+									sx={{ fontSize: "1em", fontWeight: "normal", color: "white" }}
+								>
+									Games
+								</ListSubheader>
+								{answers.map((answer, index) => {
+									return (
+										<ListItem
+											key={answer.id}
+											secondaryAction={
+												<Stack sx={{ flexDirection: "row", gap: 1 }}>
+													{answer.id === "1" ? undefined : (
+														<IconButton
+															edge="end"
+															aria-label="Delete"
+															onClick={() => {
+																setAnswers(previousAnswers =>
+																	previousAnswers.filter(
+																		({ id }) => id !== answer.id
+																	)
+																);
+																if (runningId === answer.id) {
+																	const previous =
+																		answers[index + 1];
+																	if (previous) {
+																		setActiveId(previous.id);
+																		setRunningId(previous.id);
+																		setTemplate(
+																			prettify(
+																				previous.content
+																			)
+																		);
+																		reload();
+																	}
 																}
-															}
-														}}
-													>
-														<DeleteForeverIcon />
-													</IconButton>
-												)}
-											</Stack>
-										}
-										disablePadding
-									>
-										<ListItemButton
-											dense
-											selected={activeId === answer.id}
-											disabled={activeId === answer.id}
-											role={undefined}
-											onClick={() => {
-												setActiveId(answer.id);
-												setRunningId(answer.id);
-												setTemplate(prettify(answer.content));
-												reload();
-											}}
+															}}
+														>
+															<DeleteForeverIcon />
+														</IconButton>
+													)}
+												</Stack>
+											}
+											disablePadding
 										>
-											<ListItemIcon>
-												{runningId === answer.id ? (
-													<CheckIcon />
-												) : (
-													<VisibilityIcon />
-												)}
-											</ListItemIcon>
-
-											<ListItemText
-												primary={answer.task}
-												primaryTypographyProps={{
-													sx: {
-														overflow: "hidden",
-														textOverflow: "ellipsis",
-														whiteSpace: "nowrap",
-														fontSize: 16,
-													},
+											<ListItemButton
+												dense
+												selected={activeId === answer.id}
+												// disabled={activeId === answer.id}
+												role={undefined}
+												onClick={() => {
+													setActiveId(answer.id);
+													setRunningId(answer.id);
+													setTemplate(prettify(answer.content));
+													reload();
 												}}
-											/>
-										</ListItemButton>
-									</ListItem>
-								);
-							})}
-						</List>
+											>
+												<ListItemIcon>
+													{runningId === answer.id ? (
+														<CheckIcon />
+													) : (
+														<VisibilityIcon />
+													)}
+												</ListItemIcon>
+
+												<ListItemText
+													primary={answer.task}
+													primaryTypographyProps={{
+														sx: {
+															overflow: "hidden",
+															textOverflow: "ellipsis",
+															whiteSpace: "nowrap",
+															fontSize: 16,
+														},
+													}}
+												/>
+											</ListItemButton>
+										</ListItem>
+									);
+								})}
+							</List>
+						</Paper>
 					</Stack>
 				</Stack>
-				<Stack sx={{ flex: 1, width: "50%", position: "relative" }}>
+				<Stack
+					sx={{
+						flex: 1,
+						width: { md: "50%" },
+						height: { xs: "50%", md: "auto" },
+						position: "relative",
+					}}
+				>
 					<AppBar position="static" elevation={0} color="default">
 						<Toolbar>
 							<IconButton
+								edge="start"
 								color="inherit"
 								aria-label="Reload"
 								onClick={() => {
@@ -474,6 +580,28 @@ export default function Home() {
 							>
 								<ReplayIcon />
 							</IconButton>
+							{current && current.id !== "1" && (
+								<>
+									<Codepen title={current.task} content={current.content} />
+									<Codesandbox title={current.task} content={current.content} />
+								</>
+							)}
+							<Box sx={{ flex: 1 }} />
+
+							<InfoMenu />
+
+							<Link href="/" aria-label="home" style={{ color: "inherit" }}>
+								<Box
+									component="svg"
+									viewBox="0 0 24 24"
+									sx={{ fontSize: "2em", height: "1em", width: "1em" }}
+								>
+									<path
+										fill="currentColor"
+										d="m8,12c-.55,0-1-.45-1-1,0,0,0,0,0,0h-1v-1h4v1h-1s0,0,0,0c0,.55-.45,1-1,1Zm-4-2v4l.97,1.56-.02-4.03-.96-1.53Zm4,8h4v-1h-4v1Zm4,2v2s3,0,3,0l2.5-4h-4.3l-1.2,2Zm8-12v6l-1.28,2.05-4.33-.04.61-1.01h-3s0-13,0-13c7,0,8,6,8,6Zm-2,3l-2-2-2,2.01,2,1.99,2-2Zm-7,4h-1v1h1v-1Z"
+									/>
+								</Box>
+							</Link>
 						</Toolbar>
 					</AppBar>
 					{loadingLive && (
@@ -500,10 +628,24 @@ export default function Home() {
 							overflow: "hidden",
 							visibility: loadingLive ? "hidden" : undefined,
 						}}
+						onLoad={() => {
+							if (current) {
+								setLoadingLive(true);
+								setTries(1);
+								connection.current = false;
+								call({ template: current.content });
+							}
+						}}
 						src="/live"
 					/>
 				</Stack>
 			</Stack>
+
+			<SimpleSnackbar
+				handleClose={handleSnackbarClose}
+				showError={showError}
+				message={errorMessage}
+			/>
 		</>
 	);
 }

src/pages/live.tsx

@@ -1,4 +1,5 @@
 import Script from "next/script";
+import TWEEN from "@tweenjs/tween.js";
 
 const styles = (
 	<style>
@@ -12,7 +13,7 @@ const styles = (
 			height: 100%;
 			width: 100%;
 			overflow: hidden;
-		    background: #a9a9a9;
+			background: #a9a9a9;
 		}
 		#__next {
 			display: contents;
@@ -24,7 +25,7 @@ export default function Page() {
 	return (
 		<>
 			{styles}
-			<canvas id="canvas" style={{}} />
+			<canvas id="canvas" />
 			<Script src="/js/utils.js" />
 		</>
 	);

src/services/api/index.ts

@@ -1,14 +1,15 @@
 import { ChatCompletionRequestMessage } from "openai";
 import { nanoid } from "nanoid";
 import { openai } from "@/services/api/openai";
-import { extractCode, miniPrompt } from "@/utils";
+import { extractCode, miniPrompt } from "@/utils/prompt";
 
 export async function toOpenAI({
+	command = "CREATE_GAME",
 	prompt = "extend the code",
 	negativePrompt = "",
+	temperature = "0.2",
 	template = "",
 	model = "gpt-3.5-turbo",
-	temperature = "0.2",
 	maxTokens = "2048",
 }) {
 	const negativePrompt_ = negativePrompt.trim();
@@ -17,10 +18,9 @@ export async function toOpenAI({
 	const nextMessage: ChatCompletionRequestMessage = {
 		role: "user",
 		content: miniPrompt`
-			ADD: ${prompt_}
-			${negativePrompt_ ? `REMOVE: ${negativePrompt_}` : ""}
+			"${command}": ${prompt_}. Return the full source code of the game.
 			TEMPLATE:
-			\`\`\`js
+			\`\`\`javascript
 			${template.trim().replace(/^\s+/gm, "").replace(/^\n+/g, "").replace(/\s+/, " ")}
 			\`\`\`
 			`,
@@ -31,35 +31,53 @@ export async function toOpenAI({
 	try {
 		const response = await openai.createChatCompletion({
 			model,
+			max_tokens: Number.parseInt(maxTokens),
 			temperature: Number.parseFloat(temperature),
 			messages: [
 				{
 					role: "system",
 					content: miniPrompt`
-					As a JavaScript expert, you optimize performance and create interactive experiences. You are absurdly creative.
-					Follow these guidelines closely for optimal results:
+					You are a skilled 2D game developer working with JavaScript on Canvas2D. 
+					You understand and follow a set of "COMMANDS" to build and modify games. 
 
-					* Use "ADD" and "REMOVE" guidelines to modify code as needed.
-					* Follow TODO statements
-					* Always output the complete code, including the original "TEMPLATE" minus "REMOVE" plus "ADD".
-					* Use valid JavaScript exclusively in a markdown code block using the provided "TEMPLATE".
-					* Keep a "CHANGELOG" to document changes made to the code.
-					* Always change the code in some way
-					* Modify the "TEMPLATE" when adding new code elements for continuous improvement.
-    				`,
+					- "CREATE_GAME": You initiate the development of a game. You consider the game type, environment, basic mechanics and extend the "TEMPLATE".
+					- "ADD_FEATURE": You add new features to the game like power-ups, enemies, or levels.
+					- "REMOVE_FEATURE": You can remove any existing feature from the game.
+					- "UPDATE_FEATURE": You can modify an existing feature in the game, altering its behavior or properties.
+					- "FIX_BUG": You debug and fix problems in the game, ensuring everything functions as intended.
+					
+					You NEVER use any (external) assets: image, base64, sprite or audio. 
+					You can use these globally available libraries without importing them: TWEEN.
+					Never use alert! Write your message on Canvas directly.
+					You aim for high performance.
+					Your "OUTPUT FORMAT" must be valid JavaScript code within a markdown code block.
+					It's crucial to follow these "COMMANDS" and "OUTPUT FORMAT" for the desired results.
+					`,
+					// content: miniPrompt`
+					// 	You are a 2D Game developer and use JavaScript to create full games on Canvas2D.
+					// 	You can choose to add highscore, levels, player life, power ups, enemies.
+					// 	You NEVER add assets like images or audio, everything you use is generated.
+					// 	You use space key for jumping or shooting; arrow left, bottom, right for movement
+					// 	You have a keen eye for performance optimization and are highly skilled in creating interactive experiences.
+					// 	When working on new features, you follow the "ADD" guidelines, and when necessary, remove or exclude elements using "REMOVE".
+					// 	You also pay close attention to "TEMPLATE" code, extending or fixing it as needed.
+					// 	Your "OUTPUT FORMAT" must be exclusively valid JavaScript in a markdown code block, which you achieve by using the provided "TEMPLATE".
+					// 	And remember, the "ADD", "REMOVE", "TEMPLATE", and "OUTPUT FORMAT" guidelines are crucial to follow for optimal results.
+					// `,
 				},
 				nextMessage,
 			],
-			max_tokens: Number.parseInt(maxTokens, 10),
 		});
 
 		const { message } = response.data.choices[0];
 
 		if (message) {
+			console.log("ORIGINAL OUTPUT");
+			console.log(message.content);
 			return {
 				...message,
 				content: extractCode(message.content).replace(
-					/(ADD|TEMPLATE|OUTPUT FORMAT|REMOVE).*\n/,
+					/(COMMANDS|CREATE_GAME|ADD_FEATURE|REMOVE_FEATURE|UPDATE_FEATURE|FIX_BUG|TEMPLATE|OUTPUT FORMAT).*\n/,
 					""
 				),
 				task,

src/store/atoms.ts

@@ -8,11 +8,11 @@ export const answersAtom = atomWithStorage<
 		content: string;
 		task: string;
 	}[]
->("fail4", [
+>("2DGameGPT", [
 	{
 		id: "1",
 		content: base.default,
-		task: "Base Script",
+		task: "Base Game",
 	},
 ]);
-export const showCodeAtom = atomWithStorage("fail4-editor", false);
+export const showCodeAtom = atomWithStorage("2DGameGPT-editor", false);

src/utils/index.ts

@@ -1,5 +1,6 @@
 import GPT3Tokenizer from "gpt3-tokenizer";
 import prettier from "prettier";
+import parserBabel from "prettier/parser-babel";
 
 export const tokenizer = new GPT3Tokenizer({ type: "gpt3" });
 
@@ -9,8 +10,13 @@ export function getTokens(text: string) {
 
 export function prettify(code: string) {
 	try {
-		return prettier.format(code, { useTabs: true, semi: true, parser: "babel" });
-	} catch {
+		return prettier.format(code, {
+			useTabs: true,
+			semi: true,
+			parser: "babel",
+			plugins: [parserBabel],
+		});
+	} catch (error) {
 		return code;
 	}
 }
@@ -24,5 +30,3 @@ export function getTheme(mode: string | undefined, systemMode: string | undefine
 	}
 	return undefined;
 }
-export { extractCode } from "@/utils/prompt";
-export { miniPrompt } from "@/utils/prompt";

src/utils/share.tsx

@@ -0,0 +1,110 @@
+import { renderToString } from "react-dom/server";
+
+export const wrappers: Record<"js" | "html" | "css" | "miniHtml", (content?: string) => string> = {
+	html(content) {
+		return `<!DOCTYPE html>
+<!-- generated with https://failfa.st -->
+${renderToString(
+	<html lang="en">
+		<head>
+			<meta charSet="utf-8" />
+			<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+			<title>{content}</title>
+			<script defer src="/script.js" />
+			<link rel="stylesheet" href="/style.css" />
+		</head>
+		<body>
+			<canvas id="canvas" />
+			<a className="failfast" href="https://failfa.st" target="_blank">
+				AI generated with
+				<svg viewBox="0 0 24 24">
+					<path
+						fill="currentColor"
+						d="m8,12c-.55,0-1-.45-1-1,0,0,0,0,0,0h-1v-1h4v1h-1s0,0,0,0c0,.55-.45,1-1,1Zm-4-2v4l.97,1.56-.02-4.03-.96-1.53Zm4,8h4v-1h-4v1Zm4,2v2s3,0,3,0l2.5-4h-4.3l-1.2,2Zm8-12v6l-1.28,2.05-4.33-.04.61-1.01h-3s0-13,0-13c7,0,8,6,8,6Zm-2,3l-2-2-2,2.01,2,1.99,2-2Zm-7,4h-1v1h1v-1Z"
+					/>
+				</svg>
+			</a>
+		</body>
+	</html>
+)}`;
+	},
+	miniHtml() {
+		return `
+<!-- generated with https://failfa.st -->
+${renderToString(
+	<>
+		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+
+		<canvas id="canvas" />
+		<a className="failfast" href="https://failfa.st" target="_blank">
+			AI generated with
+			<svg viewBox="0 0 24 24">
+				<path
+					fill="currentColor"
+					d="m8,12c-.55,0-1-.45-1-1,0,0,0,0,0,0h-1v-1h4v1h-1s0,0,0,0c0,.55-.45,1-1,1Zm-4-2v4l.97,1.56-.02-4.03-.96-1.53Zm4,8h4v-1h-4v1Zm4,2v2s3,0,3,0l2.5-4h-4.3l-1.2,2Zm8-12v6l-1.28,2.05-4.33-.04.61-1.01h-3s0-13,0-13c7,0,8,6,8,6Zm-2,3l-2-2-2,2.01,2,1.99,2-2Zm-7,4h-1v1h1v-1Z"
+				/>
+			</svg>
+		</a>
+	</>
+)}`;
+	},
+	css() {
+		return `/**
+ * generated with https://failfa.st
+ */
+
+* {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+}
+html, body {
+	height: 100%;
+	width: 100%;
+	overflow: hidden;
+	background: #a9a9a9;
+}
+.failfast {
+	position: fixed;
+	display: "flex";
+	align-items: center;
+	align-content: center;
+	z-index: 1;
+	top: 0;
+	left: 0;
+	margin: 8px;
+	padding: 6px 16px;
+	background: black;
+	color: white;
+	text-decoration: none;
+	border-radius: 4px;
+	font-family: sans-serif;
+}
+.failfast svg {
+	height: 1em;
+	width: 1em;
+	font-size: 24px;
+	margin: 0 0 -4px 4px;
+}
+`;
+	},
+	js(content) {
+		return `
+/**
+ * generated with https://failfa.st
+ */
+function __2DGameGPT__ResizeHelper(){
+	function handleResize() {
+		requestAnimationFrame(() => {
+			canvas.width = window.innerWidth;
+			canvas.height = window.innerHeight;
+		});
+	}
+	handleResize();
+	window.addEventListener("resize", handleResize, { passive: true });
+}
+__2DGameGPT__ResizeHelper()
+${content}
+`;
+	},
+};