diff options
author | Matthias Schiffer <mschiffer@universe-factory.net> | 2020-03-19 23:12:13 +0100 |
---|---|---|
committer | Matthias Schiffer <mschiffer@universe-factory.net> | 2020-03-19 23:12:13 +0100 |
commit | 1605e743f44b835e99b3403cb3cfc5018b697d26 (patch) | |
tree | a7d05b20bfa587a5f0cc448d66b2fc7ad392b974 /src/renderer/editor/library.tsx | |
parent | 6c8f2d780acd6c41d42de6b5fc8d84e765334b64 (diff) | |
download | rpgedit-1605e743f44b835e99b3403cb3cfc5018b697d26.tar rpgedit-1605e743f44b835e99b3403cb3cfc5018b697d26.zip |
editor: experiment with Material UI for sprite library implementation
Diffstat (limited to 'src/renderer/editor/library.tsx')
-rw-r--r-- | src/renderer/editor/library.tsx | 83 |
1 files changed, 83 insertions, 0 deletions
diff --git a/src/renderer/editor/library.tsx b/src/renderer/editor/library.tsx new file mode 100644 index 0000000..4b7dac7 --- /dev/null +++ b/src/renderer/editor/library.tsx @@ -0,0 +1,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> + ); +} |