visions/server/src/core.rs

@@ -8,7 +8,7 @@ use std::{
 use tokio::sync::mpsc::{unbounded_channel, UnboundedReceiver, UnboundedSender};
 use uuid::Uuid;
 
-use crate::types::{AppError, Message, PlayArea};
+use crate::types::Message;
 
 #[derive(Debug)]
 struct WebsocketClient {
@@ -19,8 +19,6 @@ struct WebsocketClient {
 pub struct AppState {
     pub image_base: PathBuf,
 
-    pub playfield_background: String,
-
     pub clients: HashMap<String, WebsocketClient>,
 }
 
@@ -31,7 +29,6 @@ impl Core {
     pub fn new() -> Self {
         Self(Arc::new(RwLock::new(AppState {
             image_base: PathBuf::from("/home/savanni/Pictures"),
-            playfield_background: "moon.jpg".to_owned(),
             clients: HashMap::new(),
         })))
     }
@@ -98,15 +95,6 @@ impl Core {
             .collect()
     }
 
-    pub fn set_playfield_background(&self, path: String) -> Result<(), AppError> {
-        {
-            let mut state = self.0.write().unwrap();
-            state.playfield_background = path.clone();
-        }
-        self.publish(Message::PlayArea(PlayArea{ background_image: path }));
-        Ok(())
-    }
-
     pub fn publish(&self, message: Message) {
         let state = self.0.read().unwrap();
 

visions/server/src/handlers.rs

@@ -98,14 +98,13 @@ pub async fn handle_connect_websocket(
     ws.on_upgrade(move |socket| {
         let core = core.clone();
         async move {
-            let (mut ws_sender, _) = socket.split();
+            let (mut ws_sender, mut ws_recv) = socket.split();
-            let mut receiver = core.connect_client(client_id.clone());
+            let mut receiver = core.connect_client(client_id);
 
             tokio::task::spawn(async move {
-                let background_image = core.0.read().unwrap().playfield_background.clone();
                 let _ = ws_sender
                     .send(Message::text(
-                        serde_json::to_string(&crate::types::Message::PlayArea(PlayArea{ background_image })).unwrap(),
+                        serde_json::to_string(&crate::types::Message::Count(0)).unwrap(),
                     ))
                     .await;
                 while let Some(msg) = receiver.recv().await {
@@ -114,7 +113,6 @@ pub async fn handle_connect_websocket(
                         .send(Message::text(serde_json::to_string(&msg).unwrap()))
                         .await;
                 }
-                println!("process ended for id {}", client_id);
             });
         }
     })

visions/server/src/main.rs

@@ -134,13 +134,14 @@ pub async fn main() {
             move |ws, client_id| handle_connect_websocket(core.clone(), ws, client_id)
         });
 
-    let route_set_playfield_bg = warp::path!("api" / "v1" / "playfield" / "bg")
+    let route_publish = warp::path!("api" / "v1" / "message")
-        .and(warp::put())
+        .and(warp::post())
         .and(warp::body::json())
         .map({
             let core = core.clone();
             move |body| {
-                core.set_playfield_background(body);
+                println!("route_publish: {:?}", body);
+                core.publish(body);
                 warp::reply()
             }
         });
@@ -151,7 +152,7 @@ pub async fn main() {
         .or(route_playing_field)
         .or(route_image)
         .or(route_available_images)
-        .or(route_set_playfield_bg)
+        .or(route_publish)
         .recover(handle_rejection);
 
     let server = warp::serve(filter);

visions/server/src/types.rs

@@ -12,9 +12,9 @@ pub enum AppError {
 }
 
 #[derive(Clone, Debug, Deserialize, Serialize)]
-#[serde(tag = "type")]
 pub enum Message {
-    PlayArea(PlayArea),
+    Count(u32),
+    // PlayArea(PlayArea),
 }
 
 

visions/ui/src/App.tsx

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

visions/ui/src/components/PlayingField/PlayingField.tsx

@@ -1,22 +1,69 @@
-import React, { useContext } from 'react';
+import React, { useEffect, useState, useCallback } from 'react';
+import { Client, PlayingField } from '../../client';
+import { ThumbnailComponent } from '../Thumbnail/Thumbnail';
 import './PlayingField.css';
-import { WebsocketContext } from '../WebsocketProvider';
+import useWebSocket, { ReadyState } from 'react-use-websocket';
-import { Client } from '../../client';
 
-interface PlayingFieldComponentProps {
+/*
-    client: Client;
+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 {
+    websocketUrl: string;
 }
 
-export const PlayingFieldComponent = ({ client }: PlayingFieldComponentProps) => {
+export const WebsocketPlayingFieldComponent = ({ websocketUrl }: WebsocketPlayingFieldProps) => {
-    const { backgroundImage } = useContext(WebsocketContext);
+    const { lastMessage, readyState } = useWebSocket(websocketUrl);
-    console.log("backgroundImage", backgroundImage);
+
-    if (backgroundImage) {
+    useEffect(() => {
+        if (lastMessage !== null) {
+            console.log("last message: ", lastMessage);
+        }
+    }, [lastMessage]);
+
+    const connectionStatus = {
+        [ReadyState.CONNECTING]: 'Connecting',
+        [ReadyState.OPEN]: 'Open',
+        [ReadyState.CLOSING]: 'Closing',
+        [ReadyState.CLOSED]: 'Closed',
+        [ReadyState.UNINSTANTIATED]: 'Uninstantiated',
+    }[readyState];
+
+    return <PlayingFieldComponent backgroundUrl={undefined} connectionStatus={connectionStatus} />;
+}
+
+interface PlayingFieldProps {
+    backgroundUrl: string | undefined;
+    connectionStatus: string;
+}
+
+export const PlayingFieldComponent = ({ backgroundUrl, connectionStatus }: PlayingFieldProps) => {
+    if (backgroundUrl) {
         return (<div className="playing-field">
-            <div className="playing-field__background"> {backgroundImage && <img src={client.imageUrl(backgroundImage).toString()} alt="playing field" />} </div>
+            <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>
         );
     }

visions/ui/src/components/WebsocketProvider.tsx

@@ -1,48 +0,0 @@
-import React, { createContext, PropsWithChildren, useEffect, useReducer } from "react";
-import useWebSocket from "react-use-websocket";
-
-type Message = |
-{
-    type: "PlayArea";
-    background_image: string;
-}
-
-type TabletopState = {
-    backgroundImage: string | undefined;
-}
-
-const initialState = () => ({ backgroundImage: undefined });
-
-export const WebsocketContext = createContext<TabletopState>(initialState());
-
-interface WebsocketProviderProps {
-    websocketUrl: string;
-}
-
-export const WebsocketProvider = ({ websocketUrl, children }: PropsWithChildren<WebsocketProviderProps>) => {
-    const { lastMessage } = useWebSocket(websocketUrl);
-
-    const [state, dispatch] = useReducer(handleMessage, initialState());
-
-    useEffect(() => {
-        if (lastMessage !== null) {
-            const message: Message = JSON.parse(lastMessage.data);
-            dispatch(message);
-        }
-    }, [lastMessage]);
-
-    return (<WebsocketContext.Provider value={state}>
-        {children}
-    </WebsocketContext.Provider>);
-}
-
-const handleMessage = (state: TabletopState, message: Message): TabletopState => {
-    switch (message.type) {
-        case "PlayArea": {
-            return {
-                ...state,
-                backgroundImage: message.background_image,
-            }
-        }
-    }
-}