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:$HF_TOKEN@huggingface.co/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.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 />
+		</>
+	);
+}