import * as React from 'react'; const { useCallback, useMemo } = React; import { makeStyles, Theme } from '@material-ui/core/styles'; import Box from '@material-ui/core/Box'; import Button from '@material-ui/core/Button'; import Container from '@material-ui/core/Container'; import * as Color from 'color'; import * as glob from 'fast-glob'; import { Tiling, TilingMeta } from './types'; import { usePromise, useReadFile, readJSON } from './util'; const useStyles = makeStyles((theme: Theme) => ({ grid: { display: 'flex', flexWrap: 'wrap', margin: theme.spacing(-0.5), }, tile: { imageRendering: 'pixelated', borderStyle: 'solid', borderWidth: 1, borderColor: theme.palette.divider, background: theme.palette.background.paper, position: 'relative', width: 130, height: 130, margin: theme.spacing(0.5), // cursor: 'pointer', // '&:hover': { // borderColor: theme.palette.text.secondary, // boxShadow: `0 0 2px 1px ${theme.palette.text.secondary}`, // }, }, img: { position: 'absolute', zIndex: 1, width: 128, height: 128, }, label: { position: 'absolute', zIndex: 2, left: 0, right: 0, bottom: 0, height: '37.5%', padding: theme.spacing(1), background: Color(theme.palette.background.default).fade(0.3).string(), }, })); function tilingSprite(tiling: Tiling): string { const x = (tiling.meta.width - 1) / 2; const y = (tiling.meta.height - 1) / 2; return `project/tiling/${tiling.id}/${x}_${y}.png`; } interface TilingDisplayProps { tiling: Tiling; } function TilingDisplay({ tiling }: TilingDisplayProps): JSX.Element | null { const classes = useStyles(); const path = tilingSprite(tiling); const image = useReadFile(path); const src = useMemo(() => (image ? `data:image/png;base64,${image.toString('base64')}` : undefined), [image]); return (
{tiling.meta.name}
); } async function listTilings(): Promise { const matches = await glob('project/tiling/*/meta.json'); return matches.map((m) => m.split('/')[2]); } async function loadTilingMeta(id: string): Promise { const path = `project/tiling/${id}/meta.json`; const meta = await readJSON(path); return meta as TilingMeta; } async function loadTilings(): Promise { const tilings = await listTilings(); return Promise.all( tilings.map((id) => [id, loadTilingMeta(id)] as const).map(async ([id, p]) => ({ id, meta: await p })), ); } export function Library(): JSX.Element { const classes = useStyles(); const mkLoadTilings = useCallback(() => loadTilings(), []); const tilings = usePromise(mkLoadTilings) ?? []; return (
{tilings.map((tiling, i) => ( ))}
); }