82 lines
2.8 KiB
TypeScript
82 lines
2.8 KiB
TypeScript
import React, { useEffect, useState, useCallback } from 'react';
|
|
import { Client, PlayingField } from '../../client';
|
|
import { ThumbnailComponent } from '../Thumbnail/Thumbnail';
|
|
import './PlayingField.css';
|
|
import useWebSocket, { ReadyState } from 'react-use-websocket';
|
|
|
|
/*
|
|
export const PlayingFieldComponent = ({ client }: PlayingFieldProps) => {
|
|
const [socketUrl, setSocketUrl] = useState<string | undefined>(undefined);
|
|
const [field, setField] = useState<PlayingField | undefined>(undefined);
|
|
|
|
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> Right Panel </div>
|
|
</div>)
|
|
}
|
|
*/
|
|
|
|
interface WebsocketPlayingFieldProps {
|
|
client: Client;
|
|
websocketUrl: string;
|
|
}
|
|
|
|
type Message = |
|
|
{
|
|
type: "PlayArea";
|
|
background_image: string;
|
|
}
|
|
|
|
export const WebsocketPlayingFieldComponent = ({ client, websocketUrl }: WebsocketPlayingFieldProps) => {
|
|
const { lastMessage, readyState } = useWebSocket(websocketUrl);
|
|
const [backgroundUrl, setBackgroundUrl] = useState<URL | undefined>(undefined);
|
|
|
|
useEffect(() => {
|
|
if (lastMessage !== null) {
|
|
const message: Message = JSON.parse(lastMessage.data);
|
|
console.log("playing area: ", message);
|
|
console.log("playing area: ", message.background_image);
|
|
setBackgroundUrl(client.imageUrl(message.background_image));
|
|
}
|
|
}, [lastMessage]);
|
|
|
|
const connectionStatus = {
|
|
[ReadyState.CONNECTING]: 'Connecting',
|
|
[ReadyState.OPEN]: 'Open',
|
|
[ReadyState.CLOSING]: 'Closing',
|
|
[ReadyState.CLOSED]: 'Closed',
|
|
[ReadyState.UNINSTANTIATED]: 'Uninstantiated',
|
|
}[readyState];
|
|
|
|
return <PlayingFieldComponent backgroundUrl={backgroundUrl} connectionStatus={connectionStatus} />;
|
|
}
|
|
|
|
interface PlayingFieldProps {
|
|
backgroundUrl: URL | undefined;
|
|
connectionStatus: string;
|
|
}
|
|
|
|
export const PlayingFieldComponent = ({ backgroundUrl, connectionStatus }: PlayingFieldProps) => {
|
|
if (backgroundUrl) {
|
|
return (<div className="playing-field">
|
|
<div className="playing-field__background"> {backgroundUrl && <img src={backgroundUrl.toString()} alt="playing field" />} </div>
|
|
<div> {connectionStatus} </div>
|
|
</div>)
|
|
} else {
|
|
return (<div className="playing-field">
|
|
<div> </div>
|
|
<div> {connectionStatus} </div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|