25 lines
1.0 KiB
TypeScript
25 lines
1.0 KiB
TypeScript
import React, { useContext } from 'react';
|
|
import './PlayerView.css';
|
|
import { WebsocketContext } from '../../components/WebsocketProvider';
|
|
import { Client } from '../../client';
|
|
import { TabletopElement } from '../../components/Tabletop/Tabletop';
|
|
|
|
interface PlayerViewProps {
|
|
client: Client;
|
|
}
|
|
|
|
export const PlayerView = ({ client }: PlayerViewProps) => {
|
|
const { tabletop } = useContext(WebsocketContext);
|
|
|
|
const backgroundColor = tabletop.backgroundColor;
|
|
const tabletopColorStyle = `rgb(${backgroundColor.red}, ${backgroundColor.green}, ${backgroundColor.blue})`;
|
|
const backgroundUrl = tabletop.backgroundImage ? client.imageUrl(tabletop.backgroundImage) : undefined;
|
|
|
|
return (<div className="player-view" style={{ backgroundColor: tabletopColorStyle}}>
|
|
<div className="player-view__left-panel"> Left Side </div>
|
|
<TabletopElement backgroundColor={backgroundColor} backgroundUrl={backgroundUrl} />
|
|
<div className="player-view__right-panel"> Right Side </div>
|
|
</div>)
|
|
}
|
|
|