feat: use constants for COMMAND and renamed the package

package.json

@@ -63,6 +63,7 @@
     "jotai": "2.0.4",
     "monaco-editor": "0.37.1",
     "monaco-themes": "0.4.4",
+    "mousetrap": "^1.6.5",
     "nanoid": "4.0.2",
     "next": "13.2.4",
     "openai": "^3.2.1",
@@ -75,9 +76,11 @@
   },
   "devDependencies": {
     "@semantic-release/git": "^10.0.1",
+    "@types/mousetrap": "^1.6.11",
     "@types/node": "18.15.11",
     "@types/react-syntax-highlighter": "^15.5.6",
-    "husky": "^8.0.3"
+    "husky": "^8.0.3",
+    "typescript": "5.0.4"
   },
   "engines": {
     "node": ">= 18"

src/constants/index.ts

@@ -7,10 +7,16 @@ function draw(){
 	const FPS = 60;
 
 	// TODO: Add drawing logic here
-	
+
 	// NEVER stop the loop
 	setTimeout(requestAnimationFrame(draw),1000/FPS)
 }
 draw();
     `.trim(),
 };
+
+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";

src/pages/index.tsx

@@ -46,7 +46,14 @@ import MenuItem from "@mui/material/MenuItem";
 import { useColorScheme } from "@mui/material/styles";
 import { getTheme, prettify } from "@/utils";
 import { answersAtom, showCodeAtom } from "@/store/atoms";
-import { base } from "@/constants";
+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";
@@ -239,7 +246,7 @@ export default function Home() {
 						<Box
 							component="form"
 							id="gpt-form"
-							sx={{ p: 1 }}
+							sx={{ p: 1, pt: 0 }}
 							onSubmit={async event => {
 								event.preventDefault();
 								const formData = new FormData(event.target as HTMLFormElement);
@@ -289,22 +296,24 @@ export default function Home() {
 													labelId="gpt-command-select-label"
 													id="gpt-command-select"
 													name="command"
-													defaultValue="CREATE_GAME"
+													defaultValue={COMMAND_CREATE_GAME}
 													label="Command"
 												>
-													<MenuItem value="CREATE_GAME">
+													<MenuItem value={COMMAND_CREATE_GAME}>
 														create game
 													</MenuItem>
-													<MenuItem value="ADD_FEATURE">
+													<MenuItem value={COMMAND_ADD_FEATURE}>
 														add feature
 													</MenuItem>
-													<MenuItem value="REMOVE_FEATURE">
+													<MenuItem value={COMMAND_REMOVE_FEATURE}>
 														remove feature
 													</MenuItem>
-													<MenuItem value="UPDATE_FEATURE">
+													<MenuItem value={COMMAND_EXTEND_FEATURE}>
 														update feature
 													</MenuItem>
-													<MenuItem value="FIX_BUG">fix bug</MenuItem>
+													<MenuItem value={COMMAND_FIX_BUG}>
+														fix bug
+													</MenuItem>
 												</Select>
 											</FormControl>
 
@@ -356,6 +365,17 @@ export default function Home() {
 											}
 											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>
@@ -387,18 +407,6 @@ export default function Home() {
 													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"
@@ -453,7 +461,7 @@ export default function Home() {
 												id="maxTokens"
 												name="maxTokens"
 												min={1024}
-												max={8000}
+												max={4096}
 												defaultValue={2048}
 												step={256}
 												valueLabelDisplay="auto"

src/pages/live.tsx

@@ -1,5 +1,6 @@
 import Script from "next/script";
 import TWEEN from "@tweenjs/tween.js";
+import Mousetrap from "mousetrap";
 
 const styles = (
 	<style>

src/services/api/index.ts

@@ -2,17 +2,22 @@ import { ChatCompletionRequestMessage } from "openai";
 import { nanoid } from "nanoid";
 import { 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";
 
 export async function toOpenAI({
 	command = "CREATE_GAME",
 	prompt = "extend the code",
-	negativePrompt = "",
 	temperature = "0.2",
 	template = "",
 	model = "gpt-3.5-turbo",
 	maxTokens = "2048",
 }) {
-	const negativePrompt_ = negativePrompt.trim();
 	const prompt_ = prompt.trim();
 
 	const nextMessage: ChatCompletionRequestMessage = {
@@ -26,47 +31,37 @@ export async function toOpenAI({
 			`,
 	};
 
-	const task = `${prompt_}${negativePrompt_ ? ` | not(${negativePrompt_})` : ""}`;
+	const task = `${prompt_}`;
+
+	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
+			`,
+		},
+		nextMessage,
+	];
 
 	try {
 		const response = await openai.createChatCompletion({
 			model,
+			messages,
 			max_tokens: Number.parseInt(maxTokens),
 			temperature: Number.parseFloat(temperature),
-			messages: [
-				{
-					role: "system",
-					content: miniPrompt`
-					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. 
-
-					- "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,
-			],
 		});
 
 		const { message } = response.data.choices[0];