Hugging Face's logo

Spaces:
failfast
/
2D-GameCreator
Runtime error

App Files Community
2
NERDDISCO commited on
Commit
22a5b8c
·
1 Parent(s): c976217

feat: added ExamplesGrid component and example "Flappy Bird SPEED"

Browse files
Files changed (2) hide show
  1. src/components/Examples.tsx +28 -82
  2. src/components/ExamplesGrid.tsx +89 -0
src/components/Examples.tsx CHANGED
@@ -1,23 +1,31 @@
1
- import {
2
- Card,
3
- CardContent,
4
- CardHeader,
5
- CardMedia,
6
- Grid,
7
- Link,
8
- List,
9
- ListItem,
10
- ListItemIcon,
11
- ListItemText,
12
- Table,
13
- TableBody,
14
- TableCell,
15
- TableRow,
16
- Typography,
17
- } from "@mui/material";
18
  import { DividerBox, SectionBox } from "./base/boxes";
19
- import { DynamicFeed, PrecisionManufacturing } from "@mui/icons-material";
20
- import theme from "@/lib/theme";
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
21
 
22
  export default function Examples() {
23
  return (
@@ -46,69 +54,7 @@ export default function Examples() {
46
  </Typography>
47
  </SectionBox>
48
 
49
- <Grid container>
50
- <Grid item sm={4}>
51
- <Card>
52
- <CardHeader
53
- title="Space Invaders Extreme"
54
- subheader={
55
- <>
56
- by{" "}
57
- <Link href="https://nerddis.co" target="_blank" rel="noopener">
58
- NERDDISCO
59
- </Link>
60
- </>
61
- }
62
- ></CardHeader>
63
- <CardMedia
64
- component="img"
65
- image="img/space_invaders_extreme.jpg"
66
- height="256"
67
- />
68
- <CardContent>
69
- <Table>
70
- <TableBody>
71
- <TableRow>
72
- <TableCell variant="head">Play</TableCell>
73
- <TableCell>
74
- {" "}
75
- <Link
76
- href="https://codesandbox.io/s/space-invaders-extreme-7xhp4v"
77
- target="_blank"
78
- rel="noopener"
79
- >
80
- on CodeSandbox
81
- </Link>
82
- </TableCell>
83
- </TableRow>
84
-
85
- <TableRow>
86
- <TableCell variant="head">Model</TableCell>
87
- <TableCell>GPT 3.5 Turbo</TableCell>
88
- </TableRow>
89
- <TableRow>
90
- <TableCell variant="head">Iterations</TableCell>
91
- <TableCell>20</TableCell>
92
- </TableRow>
93
- <TableRow>
94
- <TableCell variant="head">Controls</TableCell>
95
- <TableCell>
96
- Keyboard: Movement (Arrow Left, Arrow right), Shooting
97
- (Space), Restart (R)
98
- </TableCell>
99
- </TableRow>
100
- <TableRow>
101
- <TableCell variant="head">Hints</TableCell>
102
- <TableCell>
103
- The bigger the window, the easier it gets to play
104
- </TableCell>
105
- </TableRow>
106
- </TableBody>
107
- </Table>
108
- </CardContent>
109
- </Card>
110
- </Grid>
111
- </Grid>
112
 
113
  <DividerBox />
114
  </>
 
1
+ import { Link, Typography } from "@mui/material";
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2
  import { DividerBox, SectionBox } from "./base/boxes";
3
+ import ExamplesGrid, { Example } from "@/components/ExamplesGrid";
4
+
5
+ const examples: Example[] = [
6
+ {
7
+ title: "Space Invaders Extreme",
8
+ creatorLink: "https://nerddis.co",
9
+ creatorName: "NERDDISCO",
10
+ image: "img/space_invaders_extreme.jpg",
11
+ playLink: "https://codesandbox.io/s/space-invaders-extreme-7xhp4v",
12
+ model: "GPT 3.5 Turbo",
13
+ iterations: 20,
14
+ controls: "Keyboard: Movement (Arrow Left, Arrow right), Shooting (Space), Restart (R)",
15
+ hints: "The bigger the window, the easier it gets to play",
16
+ },
17
+ {
18
+ title: "Flappy Bird SPEED",
19
+ creatorLink: "https://nerddis.co",
20
+ creatorName: "NERDDISCO",
21
+ image: "img/flappy_bird_speed.jpg",
22
+ playLink: "https://codesandbox.io/s/flappy-bird-speed-rg9z6f",
23
+ model: "GPT 4.0",
24
+ iterations: 24,
25
+ controls: "Keyboard: Fly (space)",
26
+ hints: "Don't collide with the pipes ;)",
27
+ },
28
+ ];
29
 
30
  export default function Examples() {
31
  return (
 
54
  </Typography>
55
  </SectionBox>
56
 
57
+ <ExamplesGrid examples={examples} />
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
58
 
59
  <DividerBox />
60
  </>
src/components/ExamplesGrid.tsx ADDED
@@ -0,0 +1,89 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import {
2
+ Card,
3
+ CardHeader,
4
+ CardMedia,
5
+ CardContent,
6
+ Grid,
7
+ Link,
8
+ Table,
9
+ TableBody,
10
+ TableRow,
11
+ TableCell,
12
+ } from "@mui/material";
13
+
14
+ export interface Example {
15
+ title: string;
16
+ creatorLink: string;
17
+ creatorName: string;
18
+ image: string;
19
+ playLink: string;
20
+ model: string;
21
+ iterations: number;
22
+ controls: string;
23
+ hints: string;
24
+ }
25
+
26
+ interface ExamplesGridProps {
27
+ examples: Example[];
28
+ }
29
+
30
+ export default function ExamplesGrid({ examples }: ExamplesGridProps) {
31
+ return (
32
+ <Grid container spacing={2}>
33
+ {examples.map((example, index) => (
34
+ <Grid item sm={4} key={index}>
35
+ <Card sx={{ height: "100%" }}>
36
+ <CardHeader
37
+ title={example.title}
38
+ subheader={
39
+ <>
40
+ by{" "}
41
+ <Link href={example.creatorLink} target="_blank" rel="noopener">
42
+ {example.creatorName}
43
+ </Link>
44
+ </>
45
+ }
46
+ />
47
+ <CardMedia component="img" image={example.image} height="384" />
48
+ <CardContent>
49
+ <Table>
50
+ <TableBody>
51
+ <TableRow>
52
+ <TableCell variant="head">Play</TableCell>
53
+ <TableCell>
54
+ {" "}
55
+ <Link
56
+ href={example.playLink}
57
+ target="_blank"
58
+ rel="noopener"
59
+ >
60
+ on CodeSandbox
61
+ </Link>
62
+ </TableCell>
63
+ </TableRow>
64
+
65
+ <TableRow>
66
+ <TableCell variant="head">Model</TableCell>
67
+ <TableCell>{example.model}</TableCell>
68
+ </TableRow>
69
+ <TableRow>
70
+ <TableCell variant="head">Iterations</TableCell>
71
+ <TableCell>{example.iterations}</TableCell>
72
+ </TableRow>
73
+ <TableRow>
74
+ <TableCell variant="head">Controls</TableCell>
75
+ <TableCell>{example.controls}</TableCell>
76
+ </TableRow>
77
+ <TableRow>
78
+ <TableCell variant="head">Hints</TableCell>
79
+ <TableCell>{example.hints}</TableCell>
80
+ </TableRow>
81
+ </TableBody>
82
+ </Table>
83
+ </CardContent>
84
+ </Card>
85
+ </Grid>
86
+ ))}
87
+ </Grid>
88
+ );
89
+ }