File size: 7,723 Bytes
2f65818
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
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>
		</>
	);
}