From d8ea2aac405824f2f907b1772fe1753b8f038fc4 Mon Sep 17 00:00:00 2001 From: Savanni D'Gerinel Date: Sat, 30 Nov 2024 18:43:20 -0500 Subject: [PATCH] Retrieve the charsheet from the database and render it in the UI --- visions/server/src/core.rs | 2 +- visions/server/src/handlers.rs | 4 +++- visions/ui/Taskfile.yml | 2 ++ visions/ui/package-lock.json | 2 +- visions/ui/src/App.tsx | 12 +++++++++++- visions/ui/src/client.ts | 6 ++++++ visions/ui/src/plugins/Candela/Charsheet.tsx | 4 +++- .../ui/src/plugins/Candela/CharsheetPanel.tsx | 4 +++- visions/ui/src/views/PlayerView/PlayerView.tsx | 16 ++++++++++++++-- visions/visions-types/Taskfile.yml | 1 + visions/visions-types/package-lock.json | 8 ++++---- visions/visions-types/package.json | 2 +- 12 files changed, 50 insertions(+), 13 deletions(-) diff --git a/visions/server/src/core.rs b/visions/server/src/core.rs index c4e4631..9bb4c9f 100644 --- a/visions/server/src/core.rs +++ b/visions/server/src/core.rs @@ -118,7 +118,7 @@ impl Core { state.tabletop.background_image = Some(asset.clone()); state.tabletop.clone() }; - self.publish(Message::UpdateTabletop(tabletop)); + self.publish(Message::UpdateTabletop(tabletop)).await; Ok(()) } diff --git a/visions/server/src/handlers.rs b/visions/server/src/handlers.rs index 615b447..1dbefec 100644 --- a/visions/server/src/handlers.rs +++ b/visions/server/src/handlers.rs @@ -148,7 +148,7 @@ pub async fn handle_connect_websocket( pub async fn handle_set_background_image(core: Core, image_name: String) -> impl Reply { handler(async move { - let _ = core.set_background_image(AssetId::from(image_name)); + let _ = core.set_background_image(AssetId::from(image_name)).await; Ok(Response::builder() .header("Access-Control-Allow-Origin", "*") @@ -166,6 +166,8 @@ pub async fn handle_get_charsheet(core: Core, charid: String) -> impl Reply { match sheet { Some(sheet) => Ok(Response::builder() + .header("Access-Control-Allow-Origin", "*") + .header("Content-Type", "application/json") .body(serde_json::to_vec(&sheet).unwrap()) .unwrap()), None => Ok(Response::builder() diff --git a/visions/ui/Taskfile.yml b/visions/ui/Taskfile.yml index 823ef51..172d8e6 100644 --- a/visions/ui/Taskfile.yml +++ b/visions/ui/Taskfile.yml @@ -3,5 +3,7 @@ version: '3' tasks: dev: cmds: + - cd ../visions-types && task build + - npm install - npm run start diff --git a/visions/ui/package-lock.json b/visions/ui/package-lock.json index aac5bfd..807f246 100644 --- a/visions/ui/package-lock.json +++ b/visions/ui/package-lock.json @@ -33,7 +33,7 @@ "version": "0.0.1", "license": "ISC", "dependencies": { - "typescript": "^5.6.3" + "typescript": "^5.7.2" } }, "node_modules/@adobe/css-tools": { diff --git a/visions/ui/src/App.tsx b/visions/ui/src/App.tsx index fb49c72..cd6db11 100644 --- a/visions/ui/src/App.tsx +++ b/visions/ui/src/App.tsx @@ -12,6 +12,16 @@ interface AppProps { client: Client; } +const CandelaCharsheet = ({ client }: { client: Client }) => { + let [sheet, setSheet] = useState(undefined); + useEffect( + () => { client.charsheet("db7a2585-5dcf-4909-8743-2741111f8b9a").then((c) => setSheet(c)); }, + [client, setSheet] + ); + + return sheet ? :
+} + const App = ({ client }: AppProps) => { console.log("rendering app"); const [websocketUrl, setWebsocketUrl] = useState(undefined); @@ -32,7 +42,7 @@ const App = ({ client }: AppProps) => { }, { path: "/candela", - element: + element: }, { path: "/design", diff --git a/visions/ui/src/client.ts b/visions/ui/src/client.ts index 486eec2..b5f43b9 100644 --- a/visions/ui/src/client.ts +++ b/visions/ui/src/client.ts @@ -44,4 +44,10 @@ export class Client { url.pathname = `/api/v1/tabletop/bg_image`; return fetch(url, { method: 'PUT', headers: [['Content-Type', 'application/json']], body: JSON.stringify(name) }); } + + async charsheet(id: string) { + const url = new URL(this.base); + url.pathname = `/api/v1/charsheet/${id}`; + return fetch(url).then((response) => response.json()); + } } diff --git a/visions/ui/src/plugins/Candela/Charsheet.tsx b/visions/ui/src/plugins/Candela/Charsheet.tsx index c6095f4..362a7df 100644 --- a/visions/ui/src/plugins/Candela/Charsheet.tsx +++ b/visions/ui/src/plugins/Candela/Charsheet.tsx @@ -88,7 +88,7 @@ const AbilitiesElement = ({ role, role_abilities, specialty, specialty_abilities ); } -const CharsheetElement_ = ({ sheet }: CharsheetProps) => { +export const CharsheetElement = ({ sheet }: CharsheetProps) => { return (
Candela Obscura
@@ -115,6 +115,7 @@ const CharsheetElement_ = ({ sheet }: CharsheetProps) => {
); } +/* export const CharsheetElement = () => { const sheet = { type_: 'Candela', @@ -160,3 +161,4 @@ export const CharsheetElement = () => { return } +*/ diff --git a/visions/ui/src/plugins/Candela/CharsheetPanel.tsx b/visions/ui/src/plugins/Candela/CharsheetPanel.tsx index ea3d82c..109479b 100644 --- a/visions/ui/src/plugins/Candela/CharsheetPanel.tsx +++ b/visions/ui/src/plugins/Candela/CharsheetPanel.tsx @@ -66,7 +66,7 @@ const ActionGroupElement = ({ group }: ActionGroupElementProps) => { } -const CharsheetPanelElement_ = ({ sheet }: CharsheetPanelProps) => { +export const CharsheetPanelElement = ({ sheet }: CharsheetPanelProps) => { return (

{sheet.name} ({sheet.pronouns})

@@ -88,6 +88,7 @@ const CharsheetPanelElement_ = ({ sheet }: CharsheetPanelProps) => {
); } +/* export const CharsheetPanelElement = () => { const sheet = { type_: 'Candela', @@ -133,3 +134,4 @@ export const CharsheetPanelElement = () => { return } +*/ diff --git a/visions/ui/src/views/PlayerView/PlayerView.tsx b/visions/ui/src/views/PlayerView/PlayerView.tsx index 586d46f..9f12c60 100644 --- a/visions/ui/src/views/PlayerView/PlayerView.tsx +++ b/visions/ui/src/views/PlayerView/PlayerView.tsx @@ -1,4 +1,4 @@ -import React, { useContext } from 'react'; +import React, { useContext, useEffect, useState } from 'react'; import './PlayerView.css'; import { WebsocketContext } from '../../components/WebsocketProvider'; import { Client } from '../../client'; @@ -12,13 +12,25 @@ interface PlayerViewProps { export const PlayerView = ({ client }: PlayerViewProps) => { const { tabletop } = useContext(WebsocketContext); + const [charsheet, setCharsheet] = useState(undefined); + + useEffect( + () => { + client.charsheet("db7a2585-5dcf-4909-8743-2741111f8b9a").then((c) => { + setCharsheet(c) + }); + }, + [client, setCharsheet] + ); + const backgroundColor = tabletop.backgroundColor; const tabletopColorStyle = `rgb(${backgroundColor.red}, ${backgroundColor.green}, ${backgroundColor.blue})`; const backgroundUrl = tabletop.backgroundImage ? client.imageUrl(tabletop.backgroundImage) : undefined; return (
-
+
+ {charsheet ? :
}
) } diff --git a/visions/visions-types/Taskfile.yml b/visions/visions-types/Taskfile.yml index 4d2d386..d082755 100644 --- a/visions/visions-types/Taskfile.yml +++ b/visions/visions-types/Taskfile.yml @@ -3,5 +3,6 @@ version: '3' tasks: build: cmds: + - npm install typescript - typeshare --lang typescript --output-file visions.ts ../server/src - npx tsc diff --git a/visions/visions-types/package-lock.json b/visions/visions-types/package-lock.json index f339d13..6e7699d 100644 --- a/visions/visions-types/package-lock.json +++ b/visions/visions-types/package-lock.json @@ -9,13 +9,13 @@ "version": "0.0.1", "license": "ISC", "dependencies": { - "typescript": "^5.6.3" + "typescript": "^5.7.2" } }, "node_modules/typescript": { - "version": "5.6.3", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz", - "integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==", + "version": "5.7.2", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.2.tgz", + "integrity": "sha512-i5t66RHxDvVN40HfDd1PsEThGNnlMCMT3jMUuoh9/0TaqWevNontacunWyN02LA9/fIbEWlcHZcgTKb9QoaLfg==", "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" diff --git a/visions/visions-types/package.json b/visions/visions-types/package.json index 034f812..25aa15c 100644 --- a/visions/visions-types/package.json +++ b/visions/visions-types/package.json @@ -9,6 +9,6 @@ "author": "", "license": "ISC", "dependencies": { - "typescript": "^5.6.3" + "typescript": "^5.7.2" } }