30 lines
1.1 KiB
TypeScript
30 lines
1.1 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { Client, PlayingField } from '../../client';
|
|
import { ThumbnailComponent } from '../Thumbnail/Thumbnail';
|
|
import './GmPlayingField.css';
|
|
|
|
interface GmPlayingFieldProps {
|
|
client: Client
|
|
}
|
|
|
|
export const GmPlayingFieldComponent = ({ client }: GmPlayingFieldProps) => {
|
|
const [field, setField] = useState<PlayingField | undefined>(undefined);
|
|
useEffect(() => {
|
|
client.playingField().then((field) => setField(field));
|
|
}, [client]);
|
|
|
|
const [images, setImages] = useState<string[]>([]);
|
|
useEffect(() => {
|
|
client.availableImages().then((images) => setImages(images));
|
|
}, [client]);
|
|
|
|
const backgroundUrl = field && client.imageUrl(field.backgroundImage);
|
|
return (<div className="playing-field">
|
|
<div>
|
|
{images.map((imageName) => <ThumbnailComponent client={client} imageId={imageName} />)}
|
|
</div>
|
|
<div className="playing-field__background"> {backgroundUrl && <img src={backgroundUrl.toString()} alt="playing field" />} </div>
|
|
</div>)
|
|
}
|
|
|