Organize the player view and tabletop

visions/server/src/core.rs

@@ -30,7 +30,7 @@ impl Core {
         Self(Arc::new(RwLock::new(AppState {
             image_base: PathBuf::from("/home/savanni/Pictures"),
             tabletop: Tabletop {
-                background_color: RGB{ red: 15, green: 0, blue: 0 },
+                background_color: RGB{ red: 0xca, green: 0xb9, blue: 0xbb },
                 background_image: None,
             },
             clients: HashMap::new(),

visions/server/src/main.rs

@@ -139,7 +139,7 @@ pub async fn main() {
             let core = core.clone();
             move |body| {
                 println!("background_image: {}", body);
-                core.set_background_image(body);
+                let _ = core.set_background_image(body);
                 warp::reply()
             }
         });

visions/ui/src/App.tsx

@@ -1,10 +1,10 @@
 import React, { useEffect, useState } from 'react';
 import './App.css';
-import { TabletopElement } from './components/Tabletop/Tabletop';
 import { Client } from './client';
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 import { GmPlayingFieldComponent } from './components/GmPlayingField/GmPlayingField';
 import { WebsocketProvider } from './components/WebsocketProvider';
+import { PlayerView } from './views/PlayerView/PlayerView';
 
 interface AppProps {
     client: Client;
@@ -26,7 +26,7 @@ const App = ({ client }: AppProps) => {
             },
             {
                 path: "/",
-                element: websocketUrl ? <WebsocketProvider websocketUrl={websocketUrl}> <TabletopElement client={client} /> </WebsocketProvider> : <div> </div>
+                element: websocketUrl ? <WebsocketProvider websocketUrl={websocketUrl}> <PlayerView client={client} /> </WebsocketProvider> : <div> </div>
             }
         ]);
     return (

visions/ui/src/components/Tabletop/Tabletop.css

@@ -1,9 +1,5 @@
-.playing-field {
-    display: flex;
-}
-
 .playing-field__background {
-    max-width: 50%;
+    flex-grow: 1;
 }
 
 .playing-field__background > img {

visions/ui/src/components/Tabletop/Tabletop.tsx

@@ -1,23 +1,14 @@
 import React, { useContext } from 'react';
 import './Tabletop.css';
-import { WebsocketContext } from '../WebsocketProvider';
+import { RGB } from 'visions';
-import { Client } from '../../client';
 
 interface TabletopElementProps {
-    client: Client;
+    backgroundColor: RGB;
+    backgroundUrl: URL | undefined;
 }
 
-export const TabletopElement = ({ client }: TabletopElementProps) => {
+export const TabletopElement = ({ backgroundColor, backgroundUrl }: TabletopElementProps) => {
-    const { tabletop } = useContext(WebsocketContext);
+    const tabletopColorStyle = `rgb(${backgroundColor.red}, ${backgroundColor.green}, ${backgroundColor.blue})`;
-    console.log("backgroundImage", tabletop.backgroundImage);
+
-    if (tabletop.backgroundImage) {
+    return <div> {backgroundUrl && <img src={backgroundUrl.toString()} alt="playing field" />} </div>
-        return (<div className="playing-field">
-            <div className="playing-field__background"> {tabletop.backgroundImage && <img src={client.imageUrl(tabletop.backgroundImage).toString()} alt="playing field" />} </div>
-        </div>)
-    } else {
-        return (<div className="playing-field">
-            <div> </div>
-        </div>
-        );
-    }
 }

visions/ui/src/views/PlayerView/PlayerView.css

@@ -0,0 +1,16 @@
+.player-view {
+    display: flex;
+    width: 100%;
+}
+
+.player-view__left-panel {
+    flex-grow: 0;
+    min-width: 100px;
+}
+
+.player-view__right-panel {
+    flex-grow: 0;
+    min-width: 100px;
+}
+
+

visions/ui/src/views/PlayerView/PlayerView.tsx

@@ -0,0 +1,24 @@
+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>)
+}
+