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
|
import * as React from 'react';
import { makeStyles, Theme } from '@material-ui/core/styles';
import Box from '@material-ui/core/Box';
import Container from '@material-ui/core/Container';
import { Tiling } from './types';
import { useReadFile } from './util';
const useStyles = makeStyles((theme: Theme) => ({
container: {
display: 'flex',
flexWrap: 'wrap',
},
tile: {
imageRendering: 'pixelated',
border: `solid 1px ${theme.palette.divider}`,
background: theme.palette.background.paper,
width: 128,
height: 128,
margin: 4,
},
}));
const tilings: Tiling[] = [
{
size: 1,
sprite: { name: 'dirt' },
},
{
size: 1,
sprite: { name: 'grass' },
},
{
size: 1,
sprite: { name: 'road_left' },
},
{
size: 1,
sprite: { name: 'road_right' },
},
];
interface TilingDisplayProps {
tiling: Tiling;
}
function TilingDisplay({ tiling }: TilingDisplayProps): JSX.Element | null {
const classes = useStyles();
let name: string;
switch (tiling.size) {
case 1:
name = tiling.sprite.name;
break;
case 3:
name = tiling.sprites[1][1].name;
break;
}
const path = `static/resources/sprite/tile/${name}.png`;
const image = useReadFile(path, 'base64');
return <img src={image ? `data:image/png;base64,${image}` : undefined} className={classes.tile} />;
}
export function Library(): JSX.Element {
const classes = useStyles();
return (
<Container>
<Box display='inline-block'>
<div className={classes.container}>
{tilings.map((tiling, i) => (
<TilingDisplay key={i} tiling={tiling} />
))}
</div>
</Box>
</Container>
);
}
|
