feat: everything

.github/workflows/sync_to_hf_spaces.yml

@@ -0,0 +1,22 @@
+name: Sync to Hugging Face Spaces
+on:
+  push:
+    branches: [main]
+  workflow_dispatch:
+
+env:
+  HF_USERNAME: failfast
+  HF_SPACE_NAME: 2D-GameCreator-GPT
+
+jobs:
+  sync-to-space:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+          lfs: true
+      - name: Push to Space
+        env:
+          HF_TOKEN: ${{ secrets.HF_TOKEN }}
+        run: git push --force https://$HF_USERNAME:[email protected]/spaces/$HF_USERNAME/$HF_SPACE_NAME main

README.md

@@ -1,7 +1,15 @@
+---
+title: 2D GameCreator-GPT
+emoji: "\U0001F47E\U0001F579\U0001F4FA"
+colorFrom: purple
+colorTo: red
+sdk: docker
+pinned: false
+license: agpl-3.0
+app_port: 3000
+---
 <h1 align="center"><big>2D GameCreator-GPT</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)
 
 ---
@@ -46,7 +54,7 @@ hosted demo on 🤗 Spaces or run it directly on your computer.
 
 ### On 🤗 Spaces
 
-The **2D GameCreator-GPT** is hosted on Hugging Face Spaces.
+[The **2D GameCreator-GPT** is hosted on Hugging Face Spaces](https://huggingface.co/spaces/failfast/2D-GameCreator-GPT/)
 
 ### On your computer
 
@@ -58,3 +66,4 @@ If you want to run the UI locally, please follow these steps!
 3. Install the required dependencies using `npm install`.
 4. Run the development server with `npm run dev` to access the WebUI.
 5. Begin creating your own 2D games in JavaScript
+

next.config.js

@@ -1,6 +1,7 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  reactStrictMode: true,
-}
+	output: "standalone",
+	reactStrictMode: true,
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;

package-lock.json

@@ -20,6 +20,7 @@
         "@tweenjs/tween.js": "^18.6.4",
         "@types/prettier": "^2.7.2",
         "axios": "1.3.5",
+        "canvas-confetti": "1.4.0",
         "codesandbox": "2.2.3",
         "esdeka": "0.1.18",
         "eslint": "8.37.0",
@@ -28,10 +29,11 @@
         "jotai": "2.0.4",
         "monaco-editor": "0.37.1",
         "monaco-themes": "0.4.4",
-        "mousetrap": "^1.6.5",
+        "mousetrap": "1.6.5",
         "nanoid": "4.0.2",
         "next": "13.2.4",
         "openai": "^3.2.1",
+        "phaser": "^3.55.2",
         "prettier": "2.8.7",
         "react": "18.2.0",
         "react-dom": "18.2.0",
@@ -41,6 +43,7 @@
       },
       "devDependencies": {
         "@semantic-release/git": "^10.0.1",
+        "@types/canvas-confetti": "^1.6.0",
         "@types/mousetrap": "^1.6.11",
         "@types/node": "18.15.11",
         "@types/react-syntax-highlighter": "^15.5.6",
@@ -1040,6 +1043,12 @@
       "resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-18.6.4.tgz",
       "integrity": "sha512-lB9lMjuqjtuJrx7/kOkqQBtllspPIN+96OvTCeJ2j5FEzinoAXTdAMFnDAQT1KVPRlnYfBrqxtqP66vDM40xxQ=="
     },
+    "node_modules/@types/canvas-confetti": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@types/canvas-confetti/-/canvas-confetti-1.6.0.tgz",
+      "integrity": "sha512-Yq6rIccwcco0TLD5SMUrIM7Fk7Fe/C0jmNRxJJCLtAF6gebDkPuUjK5EHedxecm69Pi/aA+It39Ux4OHmFhjRw==",
+      "dev": true
+    },
     "node_modules/@types/hast": {
       "version": "2.3.4",
       "resolved": "https://registry.npmjs.org/@types/hast/-/hast-2.3.4.tgz",
@@ -1827,6 +1836,15 @@
         }
       ]
     },
+    "node_modules/canvas-confetti": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/canvas-confetti/-/canvas-confetti-1.4.0.tgz",
+      "integrity": "sha512-S18o4Y9PqI/uabdlT/jI3MY7XBJjNxnfapFIkjkMwpz6qNxLFZOm2b22OMf4ZYDL9lpNWI+Ih4fEMVPwO1KHFQ==",
+      "funding": {
+        "type": "donate",
+        "url": "https://www.paypal.me/kirilvatev"
+      }
+    },
     "node_modules/capture-stack-trace": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/capture-stack-trace/-/capture-stack-trace-1.0.2.tgz",
@@ -3140,6 +3158,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/eventemitter3": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="
+    },
     "node_modules/execa": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
@@ -6098,6 +6121,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/path": {
+      "version": "0.12.7",
+      "resolved": "https://registry.npmjs.org/path/-/path-0.12.7.tgz",
+      "integrity": "sha512-aXXC6s+1w7otVF9UletFkFcDsJeO7lSZBPUQhtb5O0xJe8LtYhj/GxldoL09bBj9+ZmE2hNoHqQSFMN5fikh4Q==",
+      "dependencies": {
+        "process": "^0.11.1",
+        "util": "^0.10.3"
+      }
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -6140,6 +6172,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/phaser": {
+      "version": "3.55.2",
+      "resolved": "https://registry.npmjs.org/phaser/-/phaser-3.55.2.tgz",
+      "integrity": "sha512-amKXsbb2Ht29dGPKvt1edq3yGGYKtq8373GpJYGKPNPnneYY6MtVTOgjHDuZwtmUyK4v86FugkT3hzW/N4tjxQ==",
+      "dependencies": {
+        "eventemitter3": "^4.0.7",
+        "path": "^0.12.7"
+      }
+    },
     "node_modules/picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
@@ -6242,6 +6283,14 @@
         "node": ">=6"
       }
     },
+    "node_modules/process": {
+      "version": "0.11.10",
+      "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
+      "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/process-nextick-args": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
@@ -7588,11 +7637,24 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/util": {
+      "version": "0.10.4",
+      "resolved": "https://registry.npmjs.org/util/-/util-0.10.4.tgz",
+      "integrity": "sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==",
+      "dependencies": {
+        "inherits": "2.0.3"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
     },
+    "node_modules/util/node_modules/inherits": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+      "integrity": "sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw=="
+    },
     "node_modules/validate-npm-package-license": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",

package.json

@@ -55,6 +55,7 @@
     "@tweenjs/tween.js": "^18.6.4",
     "@types/prettier": "^2.7.2",
     "axios": "1.3.5",
+    "canvas-confetti": "1.4.0",
     "codesandbox": "2.2.3",
     "esdeka": "0.1.18",
     "eslint": "8.37.0",
@@ -63,10 +64,11 @@
     "jotai": "2.0.4",
     "monaco-editor": "0.37.1",
     "monaco-themes": "0.4.4",
-    "mousetrap": "^1.6.5",
+    "mousetrap": "1.6.5",
     "nanoid": "4.0.2",
     "next": "13.2.4",
     "openai": "^3.2.1",
+    "phaser": "^3.55.2",
     "prettier": "2.8.7",
     "react": "18.2.0",
     "react-dom": "18.2.0",
@@ -76,6 +78,7 @@
   },
   "devDependencies": {
     "@semantic-release/git": "^10.0.1",
+    "@types/canvas-confetti": "^1.6.0",
     "@types/mousetrap": "^1.6.11",
     "@types/node": "18.15.11",
     "@types/react-syntax-highlighter": "^15.5.6",

src/components/Codepen.tsx

@@ -3,8 +3,13 @@ import { wrappers } from "@/utils/share";
 import Tooltip from "@mui/material/Tooltip";
 import { CodepenIcon } from "@/components/CodepenIcon";
 import { ShareProps } from "../pages";
+import { prettify } from "@/utils";
 
 export function Codepen({ title, content }: ShareProps) {
+	// location.reload is not allowed on CodePen
+	content = content.replace("location.reload()", "history.go(0)");
+	content = prettify(content);
+
 	return (
 		<form action="https://codepen.io/pen/define" method="POST" target="_blank">
 			<input

src/components/Codesandbox.tsx

@@ -2,11 +2,11 @@ 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";
+import { ShareProps } from "@/components/GameCreator";
 
 export function Codesandbox({ title, content }: ShareProps) {
 	return (
-		<Tooltip title="Open in Codesandbox">
+		<Tooltip title="Save to Codesandbox">
 			<IconButton
 				color="primary"
 				aria-label="Codsandbox"

src/components/Examples.tsx

@@ -0,0 +1,89 @@
+import {
+	Card,
+	CardContent,
+	CardHeader,
+	CardMedia,
+	Grid,
+	Link,
+	List,
+	ListItem,
+	ListItemIcon,
+	ListItemText,
+	Table,
+	TableBody,
+	TableCell,
+	TableRow,
+	Typography,
+} from "@mui/material";
+import { DividerBox, SectionBox } from "./base/boxes";
+import { DynamicFeed, PrecisionManufacturing } from "@mui/icons-material";
+
+export default function Examples() {
+	return (
+		<>
+			<DividerBox />
+
+			<SectionBox>
+				<Typography component="h3" variant="h2">
+					Examples
+				</Typography>
+			</SectionBox>
+
+			<Grid container>
+				<Grid item sm={4}>
+					<Card>
+						<CardHeader title="Space Invaders Extreme"></CardHeader>
+						<CardMedia
+							component="img"
+							image="img/space_invaders_extreme.jpg"
+							height="256"
+						/>
+						<CardContent>
+							<Table>
+								<TableBody>
+									<TableRow>
+										<TableCell variant="head">Play</TableCell>
+										<TableCell>
+											{" "}
+											<Link
+												href="https://codesandbox.io/s/space-invaders-extreme-7xhp4v"
+												target="_blank"
+												rel="noopener"
+											>
+												via Codesandbox
+											</Link>
+										</TableCell>
+									</TableRow>
+
+									<TableRow>
+										<TableCell variant="head">Model</TableCell>
+										<TableCell>GPT 3.5 Turbo</TableCell>
+									</TableRow>
+									<TableRow>
+										<TableCell variant="head">Iterations</TableCell>
+										<TableCell>20</TableCell>
+									</TableRow>
+									<TableRow>
+										<TableCell variant="head">Controls</TableCell>
+										<TableCell>
+											Keyboard: Movement (Arrow Left, Arrow right), Shooting
+											(Space), Restart (R)
+										</TableCell>
+									</TableRow>
+									<TableRow>
+										<TableCell variant="head">Hints</TableCell>
+										<TableCell>
+											The bigger the window, the easier it gets to play
+										</TableCell>
+									</TableRow>
+								</TableBody>
+							</Table>
+						</CardContent>
+					</Card>
+				</Grid>
+			</Grid>
+
+			<DividerBox />
+		</>
+	);
+}

src/components/GameCreator.tsx

@@ -0,0 +1,691 @@
+import { SyntheticEvent, useEffect, useMemo, useRef, useState } from "react";
+
+import axios, { AxiosError, AxiosError } from "axios";
+import KeyIcon from "@mui/icons-material/Key";
+import SmartButtonIcon from "@mui/icons-material/SmartButton";
+import AcUnitIcon from "@mui/icons-material/AcUnit";
+import LocalFireDepartmentIcon from "@mui/icons-material/LocalFireDepartment";
+import CheckIcon from "@mui/icons-material/Check";
+import ClearIcon from "@mui/icons-material/Clear";
+import CodeIcon from "@mui/icons-material/Code";
+import CodeOffIcon from "@mui/icons-material/CodeOff";
+import EditIcon from "@mui/icons-material/Edit";
+import VisibilityIcon from "@mui/icons-material/Visibility";
+import DeleteForeverIcon from "@mui/icons-material/DeleteForever";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import PlayArrowIcon from "@mui/icons-material/PlayArrow";
+import ReplayIcon from "@mui/icons-material/Replay";
+import MoneyIcon from "@mui/icons-material/Money";
+import TollIcon from "@mui/icons-material/Toll";
+import TextField from "@mui/material/TextField";
+import Box from "@mui/material/Box";
+import Stack from "@mui/material/Stack";
+import Accordion from "@mui/material/Accordion";
+import Typography from "@mui/material/Typography";
+import AccordionSummary from "@mui/material/AccordionSummary";
+import AccordionDetails from "@mui/material/AccordionDetails";
+import Paper from "@mui/material/Paper";
+import IconButton from "@mui/material/IconButton";
+import List from "@mui/material/List";
+import ListItem from "@mui/material/ListItem";
+import { nanoid } from "nanoid";
+import AppBar from "@mui/material/AppBar";
+import Toolbar from "@mui/material/Toolbar";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import ListItemButton from "@mui/material/ListItemButton";
+import ListItemText from "@mui/material/ListItemText";
+import { useHost } from "esdeka/react";
+import CircularProgress from "@mui/material/CircularProgress";
+import CssBaseline from "@mui/material/CssBaseline";
+import Slider from "@mui/material/Slider";
+import { useAtom } from "jotai";
+import Button from "@mui/material/Button";
+import dynamic from "next/dynamic";
+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 { useColorScheme } from "@mui/material/styles";
+import { getTheme, prettify } from "@/utils";
+import { answersAtom, showCodeAtom } from "@/store/atoms";
+import {
+	COMMAND_ADD_FEATURE,
+	COMMAND_CREATE_GAME,
+	COMMAND_EXTEND_FEATURE,
+	COMMAND_FIX_BUG,
+	COMMAND_LABEL_ADD_FEATURE,
+	COMMAND_LABEL_CREATE_GAME,
+	COMMAND_LABEL_EXTEND_FEATURE,
+	COMMAND_LABEL_FIX_BUG,
+	COMMAND_LABEL_REMOVE_FEATURE,
+	COMMAND_REMOVE_FEATURE,
+} from "@/constants";
+import { baseGame } from "@/constants/baseGame";
+import { EditTitle } from "@/components/EditTitle";
+import theme, { 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/base/ExampleButton";
+import { Container, Grid, Link, ListSubheader } from "@mui/material";
+import Secret from "@/components/base/secret";
+import Footer from "@/components/footer";
+import Title from "@/components/title";
+import { RunCircle } from "@mui/icons-material";
+import Introduction from "@/components/Introduction";
+import Instructions from "@/components/Instructions";
+import Examples from "@/components/Examples";
+const MonacoEditor = dynamic(import("@monaco-editor/react"), { ssr: false });
+
+export interface ShareProps {
+	title: string;
+	content: string;
+}
+
+export default function GameCreator() {
+	const ref = useRef<HTMLIFrameElement>(null);
+	const [prompt, setPrompt] = useState("");
+	const [template, setTemplate] = useState(prettify(baseGame.default));
+	const [runningId, setRunningId] = useState("1");
+	const [activeId, setActiveId] = useState("1");
+	const [editingId, setEditingId] = useState<string | null>(null);
+	const [answers, setAnswers] = useAtom(answersAtom);
+	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, "2DGameGPT");
+
+	const connection = useRef(false);
+	const [tries, setTries] = useState(1);
+
+	// Send a connection request
+	useEffect(() => {
+		const current = answers.find(({ id }) => id === runningId);
+		if (connection.current || tries <= 0) {
+			return () => {
+				/* Consistency */
+			};
+		}
+
+		const timeout = setTimeout(() => {
+			if (current) {
+				call({ template: current.content });
+			}
+
+			setTries(tries - 1);
+		}, 1_000);
+
+		return () => {
+			clearTimeout(timeout);
+		};
+	}, [call, tries, answers, runningId]);
+
+	useEffect(() => {
+		if (!connection.current && loadingLive) {
+			const unsubscribe = subscribe(event => {
+				const { action } = event.data;
+				switch (action.type) {
+					case "answer":
+						connection.current = true;
+						setLoadingLive(false);
+						break;
+					default:
+						break;
+				}
+			});
+			return () => {
+				unsubscribe();
+			};
+		}
+		return () => {
+			/* Consistency */
+		};
+	}, [subscribe, loadingLive]);
+
+	const sortedAnswers = useMemo(() => {
+		return [...answers].sort((a, b) => {
+			if (a.id === "1") return -1;
+			if (b.id === "1") return 1;
+			return 0;
+		});
+	}, [answers]);
+
+	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) {
+			ref.current.src = `/live?${nanoid()}`;
+			setLoadingLive(true);
+			setTries(1);
+		}
+	}
+
+	return (
+		<>
+			<Paper sx={{ p: 1 }}>
+				<Stack
+					sx={{
+						...fontMono.style,
+						inset: 0,
+						overflow: "hidden",
+						flexDirection: { md: "row" },
+						height: "100vh",
+					}}
+				>
+					<Stack
+						sx={{
+							width: { md: "50%" },
+							height: { xs: "50%", md: "100%" },
+							flex: 1,
+							overflow: "hidden",
+						}}
+					>
+						<AppBar position="static" elevation={0} color="default">
+							<Toolbar>
+								<Typography variant="h5" component="h2" sx={{ flex: 1, m: 0 }}>
+									2D GameCreator-GPT
+								</Typography>
+
+								<IconButton
+									color="inherit"
+									aria-label={showCode ? "Hide Code" : "Show Code"}
+									onClick={() => {
+										setShowCode(previousState => !previousState);
+									}}
+								>
+									{showCode ? <CodeOffIcon /> : <CodeIcon />}
+								</IconButton>
+								{/* <IconButton
+									edge="end"
+									color="inherit"
+									aria-label="Clear Prompt"
+									onClick={async () => {
+										setActiveId("1");
+										setRunningId("1");
+										setTemplate(prettify(baseGame.default));
+										reload();
+									}}
+								>
+									<ClearIcon />
+								</IconButton> */}
+							</Toolbar>
+						</AppBar>
+						{showCode && (
+							<Box
+								sx={{ flex: 1 }}
+								onKeyDown={event => {
+									if (event.key === "s" && event.metaKey) {
+										event.preventDefault();
+										setAnswers(previousAnswers =>
+											previousAnswers.map(previousAnswer => {
+												return previousAnswer.id === activeId
+													? {
+															...previousAnswer,
+															content: template,
+													  }
+													: previousAnswer;
+											})
+										);
+										setTemplate(previousState => prettify(previousState));
+										reload();
+									}
+								}}
+							>
+								<MonacoEditor
+									theme={getTheme(mode, systemMode)}
+									language="javascript"
+									value={template}
+									options={{
+										fontSize: 14,
+									}}
+									onChange={async value => {
+										setTemplate(value ?? "");
+									}}
+								/>
+							</Box>
+						)}
+						<Stack
+							sx={{
+								flex: 1,
+								display: showCode ? "none" : undefined,
+								overflow: "hidden",
+							}}
+						>
+							<Box
+								component="form"
+								id="gpt-form"
+								sx={{ p: 0, pt: 0 }}
+								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/generate",
+											formObject
+										);
+										const answer = data;
+										setAnswers(previousAnswers => [answer, ...previousAnswers]);
+										setRunningId(answer.id);
+										setActiveId(answer.id);
+										setTemplate(prettify(answer.content));
+										reload();
+									} catch (error) {
+										setShowError(true);
+										setErrorMessage((error as AxiosError).message);
+										console.error(error);
+									} finally {
+										setLoading(false);
+									}
+								}}
+							>
+								<Stack sx={{ p: 1, pl: 0, gap: 2 }}>
+									<Secret
+										label="OpenAI API Key"
+										name="openAIAPIKey"
+										required={process.env.NODE_ENV === "production"}
+									/>
+
+									<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,
+											}}
+										/>
+
+										<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={COMMAND_CREATE_GAME}
+													label="Command"
+												>
+													<MenuItem value={COMMAND_CREATE_GAME}>
+														{COMMAND_LABEL_CREATE_GAME}
+													</MenuItem>
+													<MenuItem value={COMMAND_ADD_FEATURE}>
+														{COMMAND_LABEL_ADD_FEATURE}
+													</MenuItem>
+													<MenuItem value={COMMAND_REMOVE_FEATURE}>
+														{COMMAND_LABEL_REMOVE_FEATURE}
+													</MenuItem>
+													<MenuItem value={COMMAND_EXTEND_FEATURE}>
+														{COMMAND_LABEL_EXTEND_FEATURE}
+													</MenuItem>
+													<MenuItem value={COMMAND_FIX_BUG}>
+														{COMMAND_LABEL_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 direction="row" spacing={1} alignItems="center">
+										<Typography>Examples</Typography>
+
+										<ExampleButton
+											title={"Space Invaders"}
+											text={
+												"Space Invaders. Single player ship at the bottom, a row of invaders at the top moving side-to-side and descending. The player ship can move left and right, and shoot bullets to destroy the invaders. Handle game over scenario when an invader reaches the player's level or all invaders are dead. Collision detection for both invaders and player. "
+											}
+											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. The pipes have a huge opening so that the bird can easily fly through. 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}
+										/>
+
+										<ExampleButton
+											title="Asteroids"
+											text={
+												"Asteroids. Control spaceship-movement using arrow keys. Fire bullets with space key to destroy asteroids, breaking them into smaller pieces. Earn points for destroying asteroids, with higher scores for smaller ones. Collision detection when spaceship hits asteroid, collision reduces spaceship health, game over when health is 0."
+											}
+											// text={
+											// 	"Asteroids. Space ship can fly around in space using the arrow keys. Irregular shaped objects called asteroids flying around the space ship. The space ship can shoot bullets using the space key. When a bullet hits an asteroid, it splits in smaller irregular shaped objects; when asteroid is completely destroyed, the player scores one point. When the space ship collides with an asteroid, it looses 1 health; when the health is 0, the game is over. Restart the game via pressing space key."
+											// }
+											onClick={setPrompt}
+										/>
+									</Stack>
+
+									<Paper variant="outlined">
+										<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>
+												<Stack gap={2}>
+													<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={4096}
+														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>
+								</Stack>
+							</Box>
+
+							<Paper variant="elevation" sx={{ p: 1, pl: 0, overflow: "auto" }}>
+								<List sx={{ flex: 1, p: 0 }}>
+									<ListSubheader
+										sx={{
+											fontSize: "1em",
+											fontWeight: "normal",
+											color: "white",
+										}}
+									>
+										Games
+									</ListSubheader>
+									{sortedAnswers.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();
+													}}
+												>
+													<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: { md: "50%" },
+							height: { xs: "50%", md: "auto" },
+							position: "relative",
+						}}
+					>
+						<AppBar position="static" elevation={0} color="default">
+							<Toolbar>
+								<Typography sx={{ mr: 2 }}>Game Preview</Typography>
+
+								<IconButton
+									edge="start"
+									color="inherit"
+									aria-label="Reload"
+									onClick={() => {
+										reload();
+									}}
+								>
+									<ReplayIcon />
+								</IconButton>
+
+								<Box sx={{ flex: 1 }} />
+
+								{current && current.id !== "1" && (
+									<>
+										<Typography>Share on</Typography>
+										<Codesandbox
+											title={current.task}
+											content={current.content}
+										/>
+									</>
+								)}
+							</Toolbar>
+						</AppBar>
+						{loadingLive && (
+							<Box
+								sx={{
+									position: "absolute",
+									zIndex: 100,
+									top: "50%",
+									left: "50%",
+									transform: "translate(-50%,-50%)",
+								}}
+							>
+								<CircularProgress />
+							</Box>
+						)}
+						<Box
+							ref={ref}
+							component="iframe"
+							sx={{
+								width: "100%",
+								flex: 1,
+								m: 0,
+								border: 0,
+								overflow: "hidden",
+								visibility: loadingLive ? "hidden" : undefined,
+							}}
+							onLoad={() => {
+								if (current) {
+									setLoadingLive(true);
+									setTries(1);
+									connection.current = false;
+									call({ template: current.content });
+								}
+							}}
+							src="/live"
+						/>
+					</Stack>
+				</Stack>
+			</Paper>
+
+			<SimpleSnackbar
+				handleClose={handleSnackbarClose}
+				showError={showError}
+				message={errorMessage}
+			/>
+		</>
+	);
+}

src/components/Instructions.tsx

@@ -0,0 +1,123 @@
+import { Alert, Link, List, ListItem, ListItemText, Paper, Typography } from "@mui/material";
+import { DividerBox, SectionBox, OutlinedBox } from "@/components/base/boxes";
+import { systemMessage } from "@/constants";
+
+export default function Instructions() {
+	return (
+		<>
+			<DividerBox />
+
+			<SectionBox>
+				<Typography component="h3" variant="h2">
+					Under the Hood
+				</Typography>
+			</SectionBox>
+
+			<Paper>
+				<List>
+					<ListItem>
+						<ListItemText>
+							Build on top of{" "}
+							<Link
+								href="https://huggingface.co/spaces/failfast/nextjs-hf-spaces"
+								target="_blank"
+								rel="noopener"
+							>
+								nextjs-hf-spaces
+							</Link>{" "}
+							with NextJS + TypeScript +{" "}
+							<Link
+								href="https://github.com/openai/openai-node"
+								target="_blank"
+								rel="noopener"
+							>
+								openai-node
+							</Link>
+							. The full source code can be found on{" "}
+							<Link
+								href="https://github.com/failfa-st/2D-GameCreator-GPT"
+								target="_blank"
+								rel="noopener"
+							>
+								failfa-st/2D-GameCreator-GPT.
+							</Link>
+						</ListItemText>
+					</ListItem>
+					<ListItem>
+						<ListItemText>Games are stored in localStorage.</ListItemText>
+					</ListItem>
+					<ListItem>
+						<ListItemText>
+							We use a very strong <b>system message</b> to make sure that the AI
+							behaves like a 2D Game Developer, where <b>&quot;TEMPLATE&quot;</b>{" "}
+							refers to the code of the selected game in the{" "}
+							<OutlinedBox>Games</OutlinedBox> list, intitally this is the{" "}
+							<b>Base Game</b>:
+						</ListItemText>
+					</ListItem>
+					<ListItem>
+						<ListItemText>
+							<code>
+								<pre>{systemMessage}</pre>
+							</code>
+						</ListItemText>
+					</ListItem>
+					<ListItem>
+						<ListItemText>
+							The <b>user message</b> follows another template, to make sure that the
+							selected <OutlinedBox>Command</OutlinedBox> is included and that the AI
+							always returns the full source code, as this is easier to process
+							instead of just parts of the code. The prompt is the message that you
+							entered into the <OutlinedBox>prompt</OutlinedBox> field:
+						</ListItemText>
+					</ListItem>
+					<ListItem>
+						<ListItemText>
+							<code>
+								<pre>
+									{`"$\{command\}": $\{prompt\}. Return the full source code of the game.
+TEMPLATE:`}
+								</pre>
+							</code>
+						</ListItemText>
+					</ListItem>
+				</List>
+			</Paper>
+
+			<SectionBox>
+				<Typography component="h3" variant="h2">
+					Troubleshooting
+				</Typography>
+			</SectionBox>
+
+			<Paper sx={{ p: 1 }}>
+				<Alert severity="error" sx={{ fontSize: "1.25rem", mb: 1 }}>
+					Unhandled Runtime Error: SyntaxError: Unexpected identifier
+				</Alert>
+
+				<Typography variant="body1">
+					The generated output was interrupted, as it was too long and the OpenAI API
+					delivered not everything. If you can, switch to GPT-4 as it allows a bigger
+					context size (change it in the options and also increase the max_tokens). If you
+					can&apos;t do this, then please help us extend the GameCreator so that it can
+					also resume when the output is interrupted.
+				</Typography>
+			</Paper>
+
+			<DividerBox />
+
+			<Paper sx={{ p: 1 }}>
+				<Typography>
+					You need help? Something is not working?{" "}
+					<Link
+						href="https://huggingface.co/spaces/failfast/2D-GameCreator-GPT/discussions"
+						target="_blank"
+						rel="noopener"
+					>
+						Please let us know!
+					</Link>
+				</Typography>
+			</Paper>
+		</>
+	);
+}

src/components/Introduction.tsx

@@ -0,0 +1,91 @@
+import {
+	Stack,
+	Grid,
+	Typography,
+	Paper,
+	List,
+	ListSubheader,
+	ListItem,
+	ListItemIcon,
+	ListItemText,
+	Link,
+} from "@mui/material";
+import KeyIcon from "@mui/icons-material/Key";
+import SmartButtonIcon from "@mui/icons-material/SmartButton";
+import PlayArrowIcon from "@mui/icons-material/PlayArrow";
+
+export default function Introduction() {
+	return (
+		<Stack direction="row" spacing={2}>
+			<Grid container gap={2} sx={{ justifyContent: "center" }}>
+				<Grid item md={4}>
+					<Typography sx={{ mb: 1 }}>
+						Your job is to provide a prompt that describes the game you want, so that
+						your skilled 2D Game Developer can built it for you using JavaScript on
+						Canvas2D.
+					</Typography>
+
+					<Typography>
+						We would love to use open-source models for this (for example{" "}
+						<Link
+							href="https://huggingface.co/HuggingFaceH4/starchat-alpha"
+							target="_blank"
+							rel="noopener"
+						>
+							starchat-alpha
+						</Link>
+						), but running a private Inference Endpoint is too expensive for us. If you
+						would love to help us, then{" "}
+						<Link
+							href="https://discord.com/invite/m3TBB9XEkb"
+							target="_blank"
+							rel="noopener"
+						>
+							let&apos;s talk
+						</Link>
+						!
+					</Typography>
+				</Grid>
+				<Grid item md={4}>
+					<Paper>
+						<List disablePadding>
+							<ListSubheader>Quickstart</ListSubheader>
+							<ListItem>
+								<ListItemIcon>
+									<KeyIcon />
+								</ListItemIcon>
+								<ListItemText>
+									{" "}
+									Add your&nbsp;
+									<Link
+										href="https://platform.openai.com/account/api-keys"
+										target="_blank"
+										rel="noopener"
+									>
+										OpenAI API key
+									</Link>
+								</ListItemText>
+							</ListItem>
+							<ListItem>
+								<ListItemIcon>
+									<SmartButtonIcon />
+								</ListItemIcon>
+								<ListItemText>
+									Select one of the <b>examples</b>
+								</ListItemText>
+							</ListItem>
+							<ListItem>
+								<ListItemIcon>
+									<PlayArrowIcon />
+								</ListItemIcon>
+								<ListItemText>
+									Click on <b>Run</b>
+								</ListItemText>
+							</ListItem>
+						</List>
+					</Paper>
+				</Grid>
+			</Grid>
+		</Stack>
+	);
+}

src/components/Workflow.tsx

@@ -0,0 +1,244 @@
+import { PlayArrow, Code, Replay, CropSquare } from "@mui/icons-material";
+import {
+	Button,
+	Grid,
+	IconButton,
+	List,
+	ListItem,
+	ListSubheader,
+	Paper,
+	Typography,
+} from "@mui/material";
+import { OutlinedBox, SectionBox, RainbowBox } from "@/components/base/boxes";
+import { Key } from "react";
+
+const workflowSteps = [
+	{
+		title: "Create a New Game",
+		steps: [
+			"Input your game concept into the prompt field.",
+			"Make sure the command field is set to create game.",
+			"Ensure that the base game is selected in the games list.",
+			"Click on run to start the game creation process.",
+			"Once the game generation is complete, it will be added to the games list and selected automatically.",
+			"You can view the newly created game in the game preview section.",
+		],
+	},
+	{
+		title: "Add a New Feature",
+		steps: [
+			"Clear the prompt field and input the new feature you want to add.",
+			"Set the command field to add feature.",
+			"Ensure that the previously generated game is selected in the games list.",
+			"Click on run to start the feature addition process.",
+			"Once the feature addition is complete, it will be added to the games list and selected automatically.",
+			"If a bug appears in the process, proceed to the next section.",
+		],
+	},
+	{
+		title: "Fix a Bug",
+		steps: [
+			"Clear the prompt field and input the bug that you have encountered.",
+			"Set the command field to fix bug.",
+			"Ensure that the game with the bug is selected in the games list.",
+			"Click on run to start the bug fixing process.",
+			"Once the bug fixing is complete, it will be reflected in the selected game in the games list.",
+		],
+	},
+	{
+		title: "Extend a Feature",
+		steps: [
+			"Clear the prompt field and input the changes you want to make to the feature.",
+			"Set the command field to extend feature.",
+			"Ensure that the game with the feature is selected in the games list.",
+			"Click on run to start the feature extension process.",
+			"Once the feature extension is complete, it will be reflected in the selected game in the games list.",
+		],
+	},
+	{
+		title: "Start From Scratch",
+		steps: [
+			"Clear the prompt field and input a new game concept.",
+			"Set the command field to create game.",
+			"Ensure that the base game is selected in the games list.",
+			"Click on run to start the new game creation process.",
+			"Once the game generation is complete, it will be added to the games list and selected automatically.",
+			"You can view the newly created game in the game preview section.",
+		],
+	},
+	{
+		title: "Viewing & Editing Source Code",
+		steps: [
+			"To see the source code of the selected game, click the source code button in the header. This will open a code editor where you can manually change the code if desired.",
+			"Save changes with CTRL+S using your keyboard.",
+		],
+	},
+	{
+		title: "Refreshing Game Preview",
+		steps: [
+			"The refresh button in the header of the game preview refreshes the game preview.",
+			"Click this if you've made changes and want to see them reflected in the game preview and for what ever reason the game preview didn't refresh automatically.",
+			"It's also useful if you are GAME OVER and have not added a feature to restart the game yet.",
+		],
+	},
+	{
+		title: "Exporting to CodeSandbox",
+		steps: [
+			"To export your game to CodeSandbox, click the share on codesandbox button in the game preview header.",
+			"Note: This feature will not work for the base game; it can only export generated games.",
+		],
+	},
+	{
+		title: "Using Options",
+		steps: [
+			"Open the Options by clicking on them",
+			"Switch the model between gpt-4 and gpt-3.5-turbo (default)",
+			"Update the max_tokens to 4096 (gpt-4), default is 2048 (gpt-3.5-turbo)",
+			"Make changes to the temperature if you want more random results, default is 0.2",
+		],
+	},
+];
+
+function parseString(string: string) {
+	const keywords = {
+		prompt: (item: string, index: Key | null | undefined) => (
+			<>
+				&nbsp;<OutlinedBox key={index}>{item}</OutlinedBox>&nbsp;
+			</>
+		),
+		command: (item: string, index: Key | null | undefined) => (
+			<>
+				&nbsp;<OutlinedBox key={index}>{item}</OutlinedBox>&nbsp;
+			</>
+		),
+		options: (item: string, index: Key | null | undefined) => (
+			<>
+				&nbsp;<OutlinedBox key={index}>Options</OutlinedBox>&nbsp;
+			</>
+		),
+		games: (item: string, index: Key | null | undefined) => (
+			<>
+				&nbsp;<OutlinedBox key={index}>Games</OutlinedBox>&nbsp;
+			</>
+		),
+		run: (item: string, index: Key | null | undefined) => (
+			<>
+				&nbsp;
+				<Button variant="contained" startIcon={<PlayArrow />} key={index}>
+					<Typography sx={{ fontWeight: "500" }}>Run</Typography>
+				</Button>
+				&nbsp;
+			</>
+		),
+		"source code button": (item: string, index: Key | null | undefined) => (
+			<>
+				&nbsp;
+				<IconButton color="inherit" aria-label={"Show Code"}>
+					<Code />
+				</IconButton>
+				button&nbsp;
+			</>
+		),
+		"refresh button": (item: string, index: Key | null | undefined) => (
+			<>
+				&nbsp;
+				<IconButton color="inherit" aria-label={"Refresh"}>
+					<Replay />
+				</IconButton>
+				button&nbsp;
+			</>
+		),
+		"codesandbox button": (item: string, index: Key | null | undefined) => (
+			<>
+				&nbsp;
+				<IconButton color="inherit" aria-label={"Save to codesandbox"}>
+					<CropSquare />
+				</IconButton>
+				button&nbsp;
+			</>
+		),
+		"game preview": (item: string, index: Key | null | undefined) => (
+			<b key={index}>&nbsp;Game Preview&nbsp;</b>
+		),
+		"base game": (item: string, index: Key | null | undefined) => (
+			<b key={index}>&nbsp;Base Game&nbsp;</b>
+		),
+		"create game": (item: string, index: Key | null | undefined) => (
+			<b key={index}>&nbsp;{item.trim()}&nbsp;</b>
+		),
+		"add feature": (item: string, index: Key | null | undefined) => (
+			<b key={index}>&nbsp;{item.trim()}&nbsp;</b>
+		),
+		"remove feature": (item: string, index: Key | null | undefined) => (
+			<b key={index}>&nbsp;{item.trim()}&nbsp;</b>
+		),
+		"extend feature": (item: string, index: Key | null | undefined) => (
+			<b key={index}>&nbsp;{item.trim()}&nbsp;</b>
+		),
+		"fix bug": (item: string, index: Key | null | undefined) => (
+			<b key={index}>&nbsp;{item.trim()}&nbsp;</b>
+		),
+		model: (item: string, index: Key | null | undefined) => (
+			<b key={index}>&nbsp;{item.trim()}&nbsp;</b>
+		),
+		max_tokens: (item: string, index: Key | null | undefined) => (
+			<b key={index}>&nbsp;{item.trim()}&nbsp;</b>
+		),
+		temperature: (item: string, index: Key | null | undefined) => (
+			<b key={index}>&nbsp;{item.trim()}&nbsp;</b>
+		),
+	};
+
+	Object.keys(keywords).forEach(keyword => {
+		const regex = new RegExp(`\\s*\\b${keyword}\\b\\s*`, "gi");
+		string = string.replace(regex, `|${keyword}|`);
+	});
+
+	const items = string.split("|").filter(item => item !== "");
+
+	return items.map((item, index) => {
+		if (keywords.hasOwnProperty(item.trim())) {
+			return keywords[item.trim() as keyof typeof keywords](item.trim(), index);
+		} else {
+			return item;
+		}
+	});
+}
+
+export default function Workflow() {
+	return (
+		<>
+			<SectionBox>
+				<Typography component="h3" variant="h2">
+					How to use?
+				</Typography>
+			</SectionBox>
+
+			<Grid container spacing={2}>
+				{workflowSteps.map(({ title, steps }, index) => {
+					return (
+						<Grid item key={index} md={4}>
+							<Paper>
+								<List disablePadding>
+									<RainbowBox sx={{ mb: 2 }}>
+										<ListSubheader>{title}</ListSubheader>
+									</RainbowBox>
+
+									{steps.map((step, index) => {
+										return (
+											<ListItem key={index}>
+												<Typography>
+													<>{parseString(step)}</>
+												</Typography>
+											</ListItem>
+										);
+									})}
+								</List>
+							</Paper>
+						</Grid>
+					);
+				})}
+			</Grid>
+		</>
+	);
+}

src/components/base/boxes.tsx

@@ -0,0 +1,47 @@
+import { Divider, DividerProps, Paper, PaperProps } from "@mui/material";
+import { styled } from "@mui/material/styles";
+
+export const SectionBox = styled(Paper)<PaperProps>(({ theme }) => ({
+	display: "flex",
+	padding: 15,
+	paddingTop: 30,
+	paddingBottom: 30,
+	marginBottom: 20,
+	background: `linear-gradient(to bottom right, ${theme.palette.primary.main} 0%, ${theme.palette.secondary.main} 100%)`,
+}));
+
+export const HighlightBox = styled(Paper)<PaperProps>(({ theme }) => ({
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	padding: 10,
+	borderBottom: `3px solid transparent`,
+	borderImage: `linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%)`,
+	borderImageSlice: 1,
+}));
+
+export const RainbowBox = styled("div")(({ theme }) => ({
+	border: `1px solid transparent`,
+	borderImage: `linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%)`,
+	borderImageSlice: 1,
+}));
+
+export const DividerBox = styled(Divider)<DividerProps>(({ theme }) => ({
+	marginTop: 20,
+	marginBottom: 20,
+	background: "transparent",
+	border: "none",
+}));
+
+export const MarkerBox = styled("span")(({ theme }) => ({
+	padding: 2,
+	background: `linear-gradient(to bottom right, ${theme.palette.primary.main} 0%, ${theme.palette.secondary.main} 100%)`,
+}));
+
+export const OutlinedBox = styled("span")(({ theme }) => ({
+	...theme.typography.body1,
+	padding: theme.spacing(0.25),
+	border: `1px solid ${theme.palette.grey[800]}`,
+	borderRadius: theme.shape.borderRadius,
+	transition: theme.transitions.create(["border-color", "box-shadow"]),
+}));

src/components/base/secret.tsx

@@ -0,0 +1,33 @@
+import {
+  IconButton,
+  InputAdornment,
+  TextField,
+  TextFieldProps,
+} from "@mui/material";
+import { useState } from "react";
+import { Visibility, VisibilityOff } from "@mui/icons-material";
+
+export default function Secret(props: TextFieldProps) {
+  const { name = "secret", label = "Secret" } = props;
+  const [showSecret, setShowSecret] = useState(false);
+
+  const handleShowSecret = () => setShowSecret(!showSecret);
+
+  return (
+    <TextField
+      variant="filled"
+      label={label}
+      name={name}
+      type={showSecret ? "text" : "password"}
+      InputProps={{
+        endAdornment: (
+          <InputAdornment position="end">
+            <IconButton onClick={handleShowSecret}>
+              {showSecret ? <Visibility /> : <VisibilityOff />}
+            </IconButton>
+          </InputAdornment>
+        ),
+      }}
+    />
+  );
+}

src/components/footer.tsx

@@ -0,0 +1,32 @@
+import Box from "@mui/material/Box";
+import Image from "next/image";
+import { Divider, Link } from "@mui/material";
+
+const Footer = () => {
+  return (
+    <Box
+      component="footer"
+      sx={{
+        display: "flex",
+        justifyContent: "center",
+        gap: 1,
+        alignItems: "center",
+        mt: 8,
+        mb: 4,
+      }}
+    >
+      <Link
+        href="https://failfa.st"
+        display="flex"
+        alignItems="center"
+        rel="noopener"
+        target="_blank"
+      >
+        <Box sx={{ mr: 0.5 }}>Powered by</Box>{" "}
+        <Image src="/failfast.svg" alt="failfast Logo" width="32" height="32" />
+      </Link>
+    </Box>
+  );
+};
+
+export default Footer;

src/components/title.tsx

@@ -0,0 +1,46 @@
+import { Button, Link, Paper, Stack, Typography } from "@mui/material";
+import { HighlightBox } from "./base/boxes";
+import ContentCopyIcon from "@mui/icons-material/ContentCopy";
+
+export default function Title() {
+	return (
+		<Stack
+			spacing={4}
+			sx={{
+				justifyContent: "center",
+				alignItems: "center",
+				minHeight: "40vh",
+				p: 4,
+			}}
+		>
+			<Typography variant="h1" component="h1">
+				2D GameCreator-GPT
+			</Typography>
+
+			<HighlightBox>
+				<Typography variant="h5" component="p">
+					text-to-game using OpenAI GPT 3.5 / GPT 4
+				</Typography>
+			</HighlightBox>
+
+			<Stack gap={2} direction="row">
+				<Link
+					href="https://discord.com/invite/m3TBB9XEkb"
+					target="_blank"
+					rel="noopener"
+					sx={{ alignSelf: "end" }}
+				>
+					<img src="https://img.shields.io/discord/1091306623819059300?color=7289da&label=Discord&logo=discord&logoColor=fff&style=for-the-badge" />
+				</Link>
+
+				<Button
+					href="https://github.com/failfa-st/nextjs-docker-starter"
+					target="_blank"
+					rel="noopener"
+				>
+					Contribute on GitHub
+				</Button>
+			</Stack>
+		</Stack>
+	);
+}

src/constants/baseGame.ts

@@ -0,0 +1,18 @@
+export const baseGame = {
+	default: `const canvas = document.querySelector('canvas');
+canvas.style.backgroundColor = '#fff';
+const ctx = canvas.getContext('2d');
+const w = canvas.width;
+const h = canvas.height;
+
+function draw(){
+	const FPS = 60;
+
+	// TODO: Add drawing logic here
+
+	// NEVER stop the loop
+	setTimeout(requestAnimationFrame(draw),1000/FPS)
+}
+draw();
+    `.trim(),
+};

src/constants/index.ts

@@ -1,22 +1,28 @@
-export const base = {
-	default: `const canvas = document.querySelector('canvas');
-canvas.style.backgroundColor = '#fff';
-const ctx = canvas.getContext('2d');
+export const COMMAND_CREATE_GAME = "CREATE_GAME";
+export const COMMAND_ADD_FEATURE = "ADD_FEATURE";
+export const COMMAND_REMOVE_FEATURE = "REMOVE_FEATURE";
+export const COMMAND_EXTEND_FEATURE = "UPDATE_FEATURE";
+export const COMMAND_FIX_BUG = "FIX_BUG";
 
-function draw(){
-	const FPS = 60;
+export const COMMAND_LABEL_CREATE_GAME = "create game";
+export const COMMAND_LABEL_ADD_FEATURE = "add feature";
+export const COMMAND_LABEL_REMOVE_FEATURE = "remove feature";
+export const COMMAND_LABEL_EXTEND_FEATURE = "extend feature";
+export const COMMAND_LABEL_FIX_BUG = "fix bug";
 
-	// TODO: Add drawing logic here
+export const systemMessage = `You are a skilled 2D game developer working with JavaScript on Canvas2D, aim for high performance
+You understand and follow a set of "COMMANDS" to build games:
 
-	// NEVER stop the loop
-	setTimeout(requestAnimationFrame(draw),1000/FPS)
-}
-draw();
-    `.trim(),
-};
+"${COMMAND_CREATE_GAME}": Initiate the development. Consider the game type, environment, basic mechanics and extend the "TEMPLATE"
+"${COMMAND_ADD_FEATURE}": Add the new feature
+"${COMMAND_REMOVE_FEATURE}": Remove the existing feature
+"${COMMAND_EXTEND_FEATURE}": Modify an existing feature, altering its behavior or properties
+"${COMMAND_FIX_BUG}": Debug and fix problems, ensuring edverything functions as intended
 
-export const COMMAND_CREATE_GAME = "CREATE_GAME";
-export const COMMAND_ADD_FEATURE = "ADD";
-export const COMMAND_REMOVE_FEATURE = "REMOVE";
-export const COMMAND_EXTEND_FEATURE = "EXTEND";
-export const COMMAND_FIX_BUG = "FIX";
+NEVER use any external assets: image, base64, sprite, audio, svg
+NEVER use alert! Write your message on Canvas directly
+NEVER add comments to reduce the token amount
+You can choose from these global libs: Mousetrap.bind, confetti
+Your "OUTPUT FORMAT" must be valid JavaScript code within a markdown code block
+It's crucial to follow the "COMMANDS" and "OUTPUT FORMAT" for the desired results
+`;

src/lib/theme.ts

@@ -1,5 +1,5 @@
 import { Fira_Code, Poppins } from "next/font/google";
-import { experimental_extendTheme as extendTheme } from "@mui/material/styles";
+import { experimental_extendTheme as extendTheme, Theme } from "@mui/material/styles";
 
 export const poppins = Poppins({
 	weight: ["300", "400", "500", "700"],
@@ -13,20 +13,23 @@ const theme = extendTheme({
 		light: {
 			palette: {
 				primary: {
-					main: "#40088d",
+					main: "#2c90fc",
 				},
 				secondary: {
-					main: "#038225",
+					main: "#b827fc",
 				},
 			},
 		},
 		dark: {
 			palette: {
 				primary: {
-					main: "#00d720",
+					main: "#2c90fc",
 				},
 				secondary: {
-					main: "#cc06ed",
+					main: "#b827fc",
+				},
+				text: {
+					secondary: "#ffffff",
 				},
 			},
 		},
@@ -34,28 +37,26 @@ const theme = extendTheme({
 	typography: {
 		...poppins.style,
 		h1: {
-			fontSize: "3em",
-			marginBottom: 24,
-		},
-		h2: {
-			fontSize: "1.9em",
-			marginBottom: 12,
-		},
-		h3: {
-			fontSize: "1.7em",
-			marginBottom: 12,
+			fontSize: "5em",
 		},
-		h4: {
-			fontSize: "1.25em",
-			marginBottom: 12,
-		},
-		h5: {
-			fontSize: "1em",
-			marginBottom: 12,
+	},
+	components: {
+		MuiLink: {
+			styleOverrides: {
+				root: {
+					textDecoration: "none",
+					":hover": {
+						textDecoration: "underline",
+					},
+				},
+			},
 		},
-		h6: {
-			fontSize: "0.8em",
-			marginBottom: 12,
+		MuiListSubheader: {
+			styleOverrides: {
+				root: {
+					fontSize: "1.35rem",
+				},
+			},
 		},
 	},
 });

src/pages/index.tsx

@@ -1,659 +1,35 @@
-import { SyntheticEvent, useEffect, useRef, useState } from "react";
-
-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";
-import ClearIcon from "@mui/icons-material/Clear";
-import CodeIcon from "@mui/icons-material/Code";
-import CodeOffIcon from "@mui/icons-material/CodeOff";
-import EditIcon from "@mui/icons-material/Edit";
-import VisibilityIcon from "@mui/icons-material/Visibility";
-import DeleteForeverIcon from "@mui/icons-material/DeleteForever";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import PlayArrowIcon from "@mui/icons-material/PlayArrow";
-import ReplayIcon from "@mui/icons-material/Replay";
-import MoneyIcon from "@mui/icons-material/Money";
-import TollIcon from "@mui/icons-material/Toll";
-import TextField from "@mui/material/TextField";
-import Box from "@mui/material/Box";
 import Stack from "@mui/material/Stack";
-import Accordion from "@mui/material/Accordion";
-import Typography from "@mui/material/Typography";
-import AccordionSummary from "@mui/material/AccordionSummary";
-import AccordionDetails from "@mui/material/AccordionDetails";
-import Paper from "@mui/material/Paper";
-import IconButton from "@mui/material/IconButton";
-import List from "@mui/material/List";
-import ListItem from "@mui/material/ListItem";
-import { nanoid } from "nanoid";
-import AppBar from "@mui/material/AppBar";
-import Toolbar from "@mui/material/Toolbar";
-import ListItemIcon from "@mui/material/ListItemIcon";
-import ListItemButton from "@mui/material/ListItemButton";
-import ListItemText from "@mui/material/ListItemText";
-import { useHost } from "esdeka/react";
-import CircularProgress from "@mui/material/CircularProgress";
 import CssBaseline from "@mui/material/CssBaseline";
-import Slider from "@mui/material/Slider";
-import { useAtom } from "jotai";
-import Button from "@mui/material/Button";
-import dynamic from "next/dynamic";
-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 { useColorScheme } from "@mui/material/styles";
-import { getTheme, prettify } from "@/utils";
-import { answersAtom, showCodeAtom } from "@/store/atoms";
-import {
-	COMMAND_ADD_FEATURE,
-	COMMAND_CREATE_GAME,
-	COMMAND_EXTEND_FEATURE,
-	COMMAND_FIX_BUG,
-	COMMAND_REMOVE_FEATURE,
-	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;
-}
+import { Container } from "@mui/material";
+import Footer from "@/components/footer";
+import Title from "@/components/title";
+import Introduction from "@/components/Introduction";
+import Instructions from "@/components/Instructions";
+import Examples from "@/components/Examples";
+import GameCreator from "@/components/GameCreator";
+import Workflow from "@/components/Workflow";
 
 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");
-	const [editingId, setEditingId] = useState<string | null>(null);
-	const [answers, setAnswers] = useAtom(answersAtom);
-	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, "2DGameGPT");
-
-	const connection = useRef(false);
-	const [tries, setTries] = useState(1);
-
-	// Send a connection request
-	useEffect(() => {
-		const current = answers.find(({ id }) => id === runningId);
-		if (connection.current || tries <= 0) {
-			return () => {
-				/* Consistency */
-			};
-		}
-
-		const timeout = setTimeout(() => {
-			if (current) {
-				call({ template: current.content });
-			}
-
-			setTries(tries - 1);
-		}, 1_000);
-
-		return () => {
-			clearTimeout(timeout);
-		};
-	}, [call, tries, answers, runningId]);
-
-	useEffect(() => {
-		if (!connection.current && loadingLive) {
-			const unsubscribe = subscribe(event => {
-				const { action } = event.data;
-				switch (action.type) {
-					case "answer":
-						connection.current = true;
-						setLoadingLive(false);
-						break;
-					default:
-						break;
-				}
-			});
-			return () => {
-				unsubscribe();
-			};
-		}
-		return () => {
-			/* Consistency */
-		};
-	}, [subscribe, loadingLive]);
-
-	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) {
-			ref.current.src = `/live?${nanoid()}`;
-			setLoadingLive(true);
-			setTries(1);
-		}
-	}
-
 	return (
 		<>
 			<CssBaseline />
-			<Stack
-				sx={{
-					...fontMono.style,
-					position: "absolute",
-					inset: 0,
-					overflow: "hidden",
-					flexDirection: { md: "row" },
-					height: "100%",
-				}}
-			>
-				<Stack
-					sx={{
-						width: { md: "50%" },
-						height: { xs: "50%", md: "100%" },
-						flex: 1,
-						overflow: "hidden",
-					}}
-				>
-					<AppBar position="static" elevation={0} color="default">
-						<Toolbar>
-							<Typography variant="h3" component="h1" sx={{ flex: 1, m: 0 }}>
-								2D GameCreator-GPT
-							</Typography>
-
-							<IconButton
-								color="inherit"
-								aria-label={showCode ? "Hide Code" : "Show Code"}
-								onClick={() => {
-									setShowCode(previousState => !previousState);
-								}}
-							>
-								{showCode ? <CodeOffIcon /> : <CodeIcon />}
-							</IconButton>
-							<IconButton
-								edge="end"
-								color="inherit"
-								aria-label="Clear Prompt"
-								onClick={async () => {
-									setActiveId("1");
-									setRunningId("1");
-									setTemplate(prettify(base.default));
-									reload();
-								}}
-							>
-								<ClearIcon />
-							</IconButton>
-						</Toolbar>
-					</AppBar>
-					{showCode && (
-						<Box
-							sx={{ flex: 1 }}
-							onKeyDown={event => {
-								if (event.key === "s" && event.metaKey) {
-									event.preventDefault();
-									setAnswers(previousAnswers =>
-										previousAnswers.map(previousAnswer => {
-											return previousAnswer.id === activeId
-												? { ...previousAnswer, content: template }
-												: previousAnswer;
-										})
-									);
-									setTemplate(previousState => prettify(previousState));
-									reload();
-								}
-							}}
-						>
-							<MonacoEditor
-								theme={getTheme(mode, systemMode)}
-								language="javascript"
-								value={template}
-								options={{
-									fontSize: 14,
-								}}
-								onChange={async value => {
-									setTemplate(value ?? "");
-								}}
-							/>
-						</Box>
-					)}
-					<Stack
-						sx={{
-							flex: 1,
-							display: showCode ? "none" : undefined,
-							overflow: "hidden",
-						}}
-					>
-						<Box
-							component="form"
-							id="gpt-form"
-							sx={{ p: 1, pt: 0 }}
-							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/generate", formObject);
-									const answer = data;
-									setAnswers(previousAnswers => [answer, ...previousAnswers]);
-									setRunningId(answer.id);
-									setActiveId(answer.id);
-									setTemplate(prettify(answer.content));
-									reload();
-								} catch (error) {
-									setShowError(true);
-									setErrorMessage((error as AxiosError).message);
-									console.error(error);
-								} finally {
-									setLoading(false);
-								}
-							}}
-						>
-							<Paper variant="outlined" sx={{ p: 0 }}>
-								<Stack sx={{ p: 2, gap: 2 }}>
-									<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,
-											}}
-										/>
-
-										<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={COMMAND_CREATE_GAME}
-													label="Command"
-												>
-													<MenuItem value={COMMAND_CREATE_GAME}>
-														create game
-													</MenuItem>
-													<MenuItem value={COMMAND_ADD_FEATURE}>
-														add feature
-													</MenuItem>
-													<MenuItem value={COMMAND_REMOVE_FEATURE}>
-														remove feature
-													</MenuItem>
-													<MenuItem value={COMMAND_EXTEND_FEATURE}>
-														update feature
-													</MenuItem>
-													<MenuItem value={COMMAND_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 direction="row" spacing={1} alignItems="center">
-										<Typography>Examples</Typography>
-
-										<ExampleButton
-											title={"Space Invaders"}
-											text={"Retro Space Invaders"}
-											onClick={setPrompt}
-										/>
+			<Container sx={{ maxWidth: { xl: "1536px", md: "100%" } }}>
+				<Title />
 
-										<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}
-										/>
+				<Stack gap={5}>
+					<Introduction />
 
-										<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. The pipes have a huge opening so that the bird can easily fly through. 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}
-										/>
-
-										<ExampleButton
-											title="Asteroids"
-											text={
-												"Asteroids. Control spaceship-movement using arrow keys. Fire bullets with space key to destroy asteroids, breaking them into smaller pieces. Earn points for destroying asteroids, with higher scores for smaller ones. Collision detection when spaceship hits asteroid, collision reduces spaceship health, game over when health is 0."
-											}
-											// text={
-											// 	"Asteroids. Space ship can fly around in space using the arrow keys. Irregular shaped objects called asteroids flying around the space ship. The space ship can shoot bullets using the space key. When a bullet hits an asteroid, it splits in smaller irregular shaped objects; when asteroid is completely destroyed, the player scores one point. When the space ship collides with an asteroid, it looses 1 health; when the health is 0, the game is over. Restart the game via pressing space key."
-											// }
-											onClick={setPrompt}
-										/>
-									</Stack>
-								</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",
-										}}
-									>
-										<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,
-												}}
-											/>
-											<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={4096}
-												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>
-
-						<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();
-												}}
-											>
-												<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>
+					<GameCreator />
 				</Stack>
-				<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={() => {
-									reload();
-								}}
-							>
-								<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 />
+				<Examples />
 
-							<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 && (
-						<Box
-							sx={{
-								position: "absolute",
-								zIndex: 100,
-								top: "50%",
-								left: "50%",
-								transform: "translate(-50%,-50%)",
-							}}
-						>
-							<CircularProgress />
-						</Box>
-					)}
-					<Box
-						ref={ref}
-						component="iframe"
-						sx={{
-							width: "100%",
-							flex: 1,
-							m: 0,
-							border: 0,
-							overflow: "hidden",
-							visibility: loadingLive ? "hidden" : undefined,
-						}}
-						onLoad={() => {
-							if (current) {
-								setLoadingLive(true);
-								setTries(1);
-								connection.current = false;
-								call({ template: current.content });
-							}
-						}}
-						src="/live"
-					/>
-				</Stack>
-			</Stack>
+				<Workflow />
+
+				<Instructions />
 
-			<SimpleSnackbar
-				handleClose={handleSnackbarClose}
-				showError={showError}
-				message={errorMessage}
-			/>
+				<Footer />
+			</Container>
 		</>
 	);
 }

src/pages/live.tsx

@@ -1,6 +1,8 @@
 import Script from "next/script";
-import TWEEN from "@tweenjs/tween.js";
 import Mousetrap from "mousetrap";
+import confetti from "canvas-confetti";
+
+import { useEffect } from "react";
 
 const styles = (
 	<style>
@@ -23,6 +25,11 @@ const styles = (
 	</style>
 );
 export default function Page() {
+	useEffect(() => {
+		window.Mousetrap = Mousetrap;
+		window.confetti = confetti;
+	}, []);
+
 	return (
 		<>
 			{styles}

src/services/api/index.ts

@@ -1,14 +1,8 @@
 import { ChatCompletionRequestMessage } from "openai";
 import { nanoid } from "nanoid";
-import { openai } from "@/services/api/openai";
+import { createClient, openai } from "@/services/api/openai";
 import { extractCode, miniPrompt } from "@/utils/prompt";
-import {
-	COMMAND_ADD_FEATURE,
-	COMMAND_CREATE_GAME,
-	COMMAND_EXTEND_FEATURE,
-	COMMAND_FIX_BUG,
-	COMMAND_REMOVE_FEATURE,
-} from "@/constants";
+import { systemMessage } from "@/constants";
 
 export async function toOpenAI({
 	command = "CREATE_GAME",
@@ -17,9 +11,16 @@ export async function toOpenAI({
 	template = "",
 	model = "gpt-3.5-turbo",
 	maxTokens = "2048",
+	openAIAPIKey = "",
 }) {
 	const prompt_ = prompt.trim();
 
+	let client = openai;
+
+	if (openAIAPIKey !== "") {
+		client = createClient(openAIAPIKey);
+	}
+
 	const nextMessage: ChatCompletionRequestMessage = {
 		role: "user",
 		content: miniPrompt`
@@ -36,28 +37,13 @@ export async function toOpenAI({
 	const messages: ChatCompletionRequestMessage[] = [
 		{
 			role: "system",
-			content: miniPrompt`
-			You are a skilled 2D game developer working with JavaScript on Canvas2D and aim for high performance
-			You understand and follow a set of "COMMANDS" to build games:
-
-			"${COMMAND_CREATE_GAME}": Initiate the development. Consider the game type, environment, basic mechanics and extend the "TEMPLATE"
-			"${COMMAND_ADD_FEATURE}": Add the new feature
-			"${COMMAND_REMOVE_FEATURE}": Remove the existing feature
-			"${COMMAND_EXTEND_FEATURE}": Modify an existing feature, altering its behavior or properties
-			"${COMMAND_FIX_BUG}": Debug and fix problems, ensuring everything functions as intended
-
-			NEVER use any external assets: image, base64, sprite or audio
-			You can use these libraries without importing them: TWEEN, Mousetrap
-			NEVER use alert! Write your message on Canvas directly
-			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`${systemMessage}`,
 		},
 		nextMessage,
 	];
 
 	try {
-		const response = await openai.createChatCompletion({
+		const response = await client.createChatCompletion({
 			model,
 			messages,
 			max_tokens: Number.parseInt(maxTokens),

src/services/api/openai.ts

@@ -5,3 +5,7 @@ export const configuration = new Configuration({
 	apiKey: process.env.OPENAI_API_KEY,
 });
 export const openai = new OpenAIApi(configuration);
+
+export const createClient = (apiKey: string) => {
+	return new OpenAIApi(new Configuration({ apiKey }));
+};

src/store/atoms.ts

@@ -1,6 +1,6 @@
 import { atomWithStorage } from "jotai/utils";
 
-import { base } from "@/constants";
+import { baseGame } from "@/constants/baseGame";
 
 export const answersAtom = atomWithStorage<
 	{
@@ -11,7 +11,7 @@ export const answersAtom = atomWithStorage<
 >("2DGameGPT", [
 	{
 		id: "1",
-		content: base.default,
+		content: baseGame.default,
 		task: "Base Game",
 	},
 ]);

src/utils/share.tsx

@@ -10,20 +10,11 @@ ${renderToString(
 			<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" />
+			<script defer src="/script.js" type="module" />
 			<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>
 )}`;
@@ -36,15 +27,6 @@ ${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>
 	</>
 )}`;
 	},
@@ -93,17 +75,36 @@ html, body {
 /**
  * generated with https://failfa.st
  */
+
+
+/**
+ * Global imports
+ */
+import Mousetrap from "https://cdn.skypack.dev/[email protected]";
+import confetti from "https://cdn.skypack.dev/[email protected]";
+
+/**
+ * Helper to handle the resize of the window > canvas automatically
+ */
 function __2DGameGPT__ResizeHelper(){
+	const _canvas = document.querySelector("canvas")
+	_canvas.width = window.innerWidth;
+	_canvas.height = window.innerHeight;
+
 	function handleResize() {
 		requestAnimationFrame(() => {
-			canvas.width = window.innerWidth;
-			canvas.height = window.innerHeight;
+			_canvas.width = window.innerWidth;
+			_canvas.height = window.innerHeight;
 		});
 	}
 	handleResize();
 	window.addEventListener("resize", handleResize, { passive: true });
 }
 __2DGameGPT__ResizeHelper()
+
+/**
+ * Generated 2D game
+ */
 ${content}
 `;
 	},