50 lines
1.8 KiB
TypeScript
50 lines
1.8 KiB
TypeScript
import React, { useContext, useEffect, useState } from 'react';
|
|
import './PlayerView.css';
|
|
import { WebsocketContext } from '../../components/WebsocketProvider';
|
|
import { Client } from '../../client';
|
|
import { TabletopElement } from '../../components/Tabletop/Tabletop';
|
|
import Candela from '../../plugins/Candela';
|
|
import { StateContext } from '../../providers/StateProvider/StateProvider';
|
|
import { assertNever } from '../../utils';
|
|
|
|
const TEST_CHARSHEET_UUID = "12df9c09-1f2f-4147-8eda-a97bd2a7a803";
|
|
|
|
interface PlayerViewProps {
|
|
client: Client;
|
|
}
|
|
|
|
export const PlayerView = ({ client }: PlayerViewProps) => {
|
|
const [state, dispatch] = useContext(StateContext);
|
|
|
|
const [charsheet, setCharsheet] = useState(undefined);
|
|
|
|
useEffect(
|
|
() => {
|
|
client.charsheet(TEST_CHARSHEET_UUID).then((c) => {
|
|
setCharsheet(c)
|
|
});
|
|
},
|
|
[client, setCharsheet]
|
|
);
|
|
|
|
switch (state.type) {
|
|
case "Loading": return <div></div>;
|
|
case "Ready": {
|
|
const backgroundColor = state.tabletop.backgroundColor;
|
|
const tabletopColorStyle = `rgb(${backgroundColor.red}, ${backgroundColor.green}, ${backgroundColor.blue})`;
|
|
const backgroundUrl = state.tabletop.backgroundImage ? client.imageUrl(state.tabletop.backgroundImage) : undefined;
|
|
|
|
return (<div className="player-view" style={{ backgroundColor: tabletopColorStyle }}>
|
|
<div className="player-view__middle-panel"> <TabletopElement backgroundColor={backgroundColor} backgroundUrl={backgroundUrl} /> </div>
|
|
<div className="player-view__right-panel">
|
|
{charsheet ? <Candela.CharsheetPanelElement sheet={charsheet} /> : <div> </div>}</div>
|
|
</div>)
|
|
}
|
|
default: {
|
|
assertNever(state);
|
|
return <div></div>;
|
|
}
|
|
}
|
|
}
|
|
|