savanni
/
monorepo
1
0
Fork 0
Code Issues 76 Pull Requests Projects 6 Releases Wiki Activity

Try out rendering some basic components with a websocket

This commit is contained in:
Savanni D'Gerinel 2024-11-18 20:35:35 -05:00
parent 0237393c0b
commit a8170fd5c6
11 changed files with 215 additions and 2772 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
visions/server/src/handlers.rs
View File

@ -71,9 +71,16 @@ pub struct RegisterResponse {
pub async fn handle_register_client(core: Core, request: RegisterRequest) -> impl Reply {
let client_id = core.register_client();
warp::reply::json(&RegisterResponse {
url: format!("ws://127.0.0.1:8001/ws/{}", client_id),
})
Response::builder()
.header("Access-Control-Allow-Origin", "*")
.header("Content-Type", "application/json")
.body(
serde_json::to_string(&RegisterResponse {
url: format!("ws://127.0.0.1:8001/ws/{}", client_id),
})
.unwrap(),
)
.unwrap()
}
pub async fn handle_unregister_client(core: Core, client_id: String) -> impl Reply {
@ -95,13 +102,15 @@ pub async fn handle_connect_websocket(
let mut receiver = core.connect_client(client_id);
tokio::task::spawn(async move {
let mut i = 0;
ws_sender.send(Message::text(serde_json::to_string(&crate::types::Message::Count(0)).unwrap())).await;
let _ = ws_sender
.send(Message::text(
serde_json::to_string(&crate::types::Message::Count(0)).unwrap(),
))
.await;
while let Some(msg) = receiver.recv().await {
println!("Relaying message: {:?}", msg);
let _ = ws_sender
.send(Message::text(
serde_json::to_string(&msg).unwrap(),
))
.send(Message::text(serde_json::to_string(&msg).unwrap()))
.await;
}
});

1
visions/server/src/main.rs
View File

@ -140,6 +140,7 @@ pub async fn main() {
.map({
let core = core.clone();
move |body| {
println!("route_publish: {:?}", body);
core.publish(body);
warp::reply()
}

2822
visions/ui/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

5
visions/ui/package.json
View File

@ -10,9 +10,14 @@
"@types/node": "^16.18.119",
"@types/react": "^18.3.12",
"@types/react-dom": "^18.3.1",
"@types/react-router": "^5.1.20",
"@types/react-router-dom": "^5.3.3",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-router": "^6.28.0",
"react-router-dom": "^6.28.0",
"react-scripts": "5.0.1",
"react-use-websocket": "^4.11.1",
"typescript": "^4.9.5",
"web-vitals": "^2.1.4"
},

28
visions/ui/src/App.tsx
View File

@ -1,14 +1,34 @@
import React from 'react';
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';
const App = () => {
let client = new Client();
console.log("rendering app");
const client = new Client();
const [websocketUrl, setWebsocketUrl] = useState<string | undefined>(undefined);
useEffect(() => {
client.registerWebsocket().then((url) => setWebsocketUrl(url));
}, [client]);
let router =
createBrowserRouter([
{
path: "/gm",
element: <GmPlayingFieldComponent client={client} />
},
{
path: "/",
element: websocketUrl ? <WebsocketPlayingFieldComponent websocketUrl={websocketUrl} /> : <div> </div>
}
]);
return (
<div className="App">
<PlayingFieldComponent client={client} />
<RouterProvider router={router} />
</div>
);
}

14
visions/ui/src/client.ts
View File

@ -9,6 +9,20 @@ export class Client {
this.base = new URL("http://localhost:8001");
}
registerWebsocket() {
const url = new URL(this.base);
url.pathname = `api/v1/client`;
return fetch(url, { method: 'POST' }).then((response) => response.json()).then((ws) => ws.url);
}
/*
unregisterWebsocket() {
const url = new URL(this.base);
url.pathname = `api/v1/client`;
return fetch(url, { method: 'POST' }).then((response => response.json()));
}
*/
imageUrl(imageId: string) {
const url = new URL(this.base);
url.pathname = `/api/v1/image/${imageId}`;

0
visions/ui/src/components/GmPlayingField/GmPlayingField.css Normal file
View File

29
visions/ui/src/components/GmPlayingField/GmPlayingField.tsx Normal file
View File

@ -0,0 +1,29 @@
import React, { useEffect, useState } from 'react';
import { Client, PlayingField } from '../../client';
import { ThumbnailComponent } from '../Thumbnail/Thumbnail';
import './GmPlayingField.css';
interface GmPlayingFieldProps {
client: Client
}
export const GmPlayingFieldComponent = ({ client }: GmPlayingFieldProps) => {
const [field, setField] = useState<PlayingField | undefined>(undefined);
useEffect(() => {
client.playingField().then((field) => setField(field));
}, [client]);
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>)
}

61
visions/ui/src/components/PlayingField/PlayingField.tsx
View File

@ -1,17 +1,13 @@
import React, { useEffect, useState } from 'react';
import React, { useEffect, useState, useCallback } from 'react';
import { Client, PlayingField } from '../../client';
import { ThumbnailComponent } from '../Thumbnail';
import { ThumbnailComponent } from '../Thumbnail/Thumbnail';
import './PlayingField.css';
import useWebSocket, { ReadyState } from 'react-use-websocket';
interface PlayingFieldProps {
client: Client
}
/*
export const PlayingFieldComponent = ({ client }: PlayingFieldProps) => {
const [socketUrl, setSocketUrl] = useState<string | undefined>(undefined);
const [field, setField] = useState<PlayingField | undefined>(undefined);
useEffect(() => {
client.playingField().then((field) => setField(field));
}, [client]);
const [images, setImages] = useState<string[]>([]);
useEffect(() => {
@ -21,9 +17,54 @@ export const PlayingFieldComponent = ({ client }: PlayingFieldProps) => {
const backgroundUrl = field && client.imageUrl(field.backgroundImage);
return (<div className="playing-field">
<div>
{images.map((imageName) => <ThumbnailComponent client={client} imageId={imageName} />)}
{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 WebsocketPlayingFieldComponent = ({ websocketUrl }: WebsocketPlayingFieldProps) => {
const { lastMessage, readyState } = useWebSocket(websocketUrl);
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"> {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>
);
}
}

0
visions/ui/src/components/Thumbnail.css → visions/ui/src/components/Thumbnail/Thumbnail.css
View File

2
visions/ui/src/components/Thumbnail.tsx → visions/ui/src/components/Thumbnail/Thumbnail.tsx
View File

@ -1,5 +1,5 @@
import React, { useEffect, useState } from 'react';
import { Client } from '../client';
import { Client } from '../../client';
import './Thumbnail.css';
interface ThumbnailProps {