Set up a tabletop view for both the GM and the player #260
|
@ -522,7 +522,7 @@ checksum = "baf1de4339761588bc0619e3cbc0120ee582ebb74b53b4efbf79117bd2da40fd"
|
|||
name = "changeset"
|
||||
version = "0.1.0"
|
||||
dependencies = [
|
||||
"uuid 0.8.2",
|
||||
"uuid 1.11.0",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
|
@ -4637,9 +4637,9 @@ checksum = "42ff0bf0c66b8238c6f3b578df37d0b7848e55df8577b3f74f92a69acceeb825"
|
|||
|
||||
[[package]]
|
||||
name = "typeshare"
|
||||
version = "1.0.3"
|
||||
version = "1.0.4"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "04f17399b76c2e743d58eac0635d7686e9c00f48cd4776f00695d9882a7d3187"
|
||||
checksum = "19be0f411120091e76e13e5a0186d8e2bcc3e7e244afdb70152197f1a8486ceb"
|
||||
dependencies = [
|
||||
"chrono",
|
||||
"serde 1.0.210",
|
||||
|
@ -4865,6 +4865,7 @@ dependencies = [
|
|||
"serde_json",
|
||||
"tokio",
|
||||
"tokio-stream",
|
||||
"typeshare",
|
||||
"uuid 1.11.0",
|
||||
"warp",
|
||||
]
|
||||
|
|
18
flake.lock
18
flake.lock
|
@ -5,11 +5,11 @@
|
|||
"systems": "systems"
|
||||
},
|
||||
"locked": {
|
||||
"lastModified": 1681202837,
|
||||
"narHash": "sha256-H+Rh19JDwRtpVPAWp64F+rlEtxUWBAQW28eAi3SRSzg=",
|
||||
"lastModified": 1710146030,
|
||||
"narHash": "sha256-SZ5L6eA7HJ/nmkzGG7/ISclqe6oZdOZTNoesiInkXPQ=",
|
||||
"owner": "numtide",
|
||||
"repo": "flake-utils",
|
||||
"rev": "cfacdce06f30d2b68473a46042957675eebb3401",
|
||||
"rev": "b1d9ab70662946ef0850d488da1c9019f3a9752a",
|
||||
"type": "github"
|
||||
},
|
||||
"original": {
|
||||
|
@ -35,11 +35,11 @@
|
|||
},
|
||||
"nixpkgs_2": {
|
||||
"locked": {
|
||||
"lastModified": 1681303793,
|
||||
"narHash": "sha256-JEdQHsYuCfRL2PICHlOiH/2ue3DwoxUX7DJ6zZxZXFk=",
|
||||
"lastModified": 1714906307,
|
||||
"narHash": "sha256-UlRZtrCnhPFSJlDQE7M0eyhgvuuHBTe1eJ9N9AQlJQ0=",
|
||||
"owner": "NixOS",
|
||||
"repo": "nixpkgs",
|
||||
"rev": "fe2ecaf706a5907b5e54d979fbde4924d84b65fc",
|
||||
"rev": "25865a40d14b3f9cf19f19b924e2ab4069b09588",
|
||||
"type": "github"
|
||||
},
|
||||
"original": {
|
||||
|
@ -76,11 +76,11 @@
|
|||
"nixpkgs": "nixpkgs_2"
|
||||
},
|
||||
"locked": {
|
||||
"lastModified": 1698205128,
|
||||
"narHash": "sha256-jP+81TkldLtda8bzmsBWahETGsyFkoDOCT244YkA+S4=",
|
||||
"lastModified": 1731966246,
|
||||
"narHash": "sha256-e/V7Ffm5wPd9DVzCThnPZ7lFxd43bb64tSk8/oGP4Ag=",
|
||||
"owner": "1Password",
|
||||
"repo": "typeshare",
|
||||
"rev": "c3ee2ad8f27774c45db7af4f2ba746c4ae11de21",
|
||||
"rev": "e0e5f27ee34d7d4da76a9dc96a11552e98be56da",
|
||||
"type": "github"
|
||||
},
|
||||
"original": {
|
||||
|
|
|
@ -17,3 +17,4 @@ mime = "0.3.17"
|
|||
uuid = { version = "1.11.0", features = ["v4"] }
|
||||
futures = "0.3.31"
|
||||
tokio-stream = "0.1.16"
|
||||
typeshare = "1.0.4"
|
||||
|
|
|
@ -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::{AppError, Message, Tabletop, RGB};
|
||||
|
||||
#[derive(Debug)]
|
||||
struct WebsocketClient {
|
||||
|
@ -18,9 +18,7 @@ struct WebsocketClient {
|
|||
#[derive(Debug)]
|
||||
pub struct AppState {
|
||||
pub image_base: PathBuf,
|
||||
|
||||
pub playfield_background: String,
|
||||
|
||||
pub tabletop: Tabletop,
|
||||
pub clients: HashMap<String, WebsocketClient>,
|
||||
}
|
||||
|
||||
|
@ -31,7 +29,10 @@ 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(),
|
||||
tabletop: Tabletop {
|
||||
background_color: RGB{ red: 15, green: 0, blue: 0 },
|
||||
background_image: None,
|
||||
},
|
||||
clients: HashMap::new(),
|
||||
})))
|
||||
}
|
||||
|
@ -98,12 +99,13 @@ impl Core {
|
|||
.collect()
|
||||
}
|
||||
|
||||
pub fn set_playfield_background(&self, path: String) -> Result<(), AppError> {
|
||||
{
|
||||
pub fn set_background_image(&self, path: String) -> Result<(), AppError> {
|
||||
let tabletop = {
|
||||
let mut state = self.0.write().unwrap();
|
||||
state.playfield_background = path.clone();
|
||||
}
|
||||
self.publish(Message::PlayArea(PlayArea{ background_image: path }));
|
||||
state.tabletop.background_image = Some(path.clone());
|
||||
state.tabletop.clone()
|
||||
};
|
||||
self.publish(Message::UpdateTabletop(tabletop));
|
||||
Ok(())
|
||||
}
|
||||
|
||||
|
|
|
@ -5,7 +5,7 @@ use serde::{Deserialize, Serialize};
|
|||
use tokio_stream::wrappers::UnboundedReceiverStream;
|
||||
use warp::{http::Response, reply::Reply, ws::Message};
|
||||
|
||||
use crate::{core::Core, types::PlayArea};
|
||||
use crate::{core::Core};
|
||||
|
||||
/*
|
||||
pub async fn handle_auth(
|
||||
|
@ -31,18 +31,6 @@ pub async fn handle_auth(
|
|||
}
|
||||
*/
|
||||
|
||||
pub async fn handle_playing_field() -> impl Reply {
|
||||
Response::builder()
|
||||
.header("application-type", "application/json")
|
||||
.body(
|
||||
serde_json::to_string(&PlayArea {
|
||||
background_image: "tower-in-mist.jpg".to_owned(),
|
||||
})
|
||||
.unwrap(),
|
||||
)
|
||||
.unwrap()
|
||||
}
|
||||
|
||||
pub async fn handle_file(core: Core, file_name: String) -> impl Reply {
|
||||
let mimetype = mime_guess::from_path(&file_name).first().unwrap();
|
||||
let bytes = core.get_file(file_name);
|
||||
|
@ -102,11 +90,11 @@ pub async fn handle_connect_websocket(
|
|||
let mut receiver = core.connect_client(client_id.clone());
|
||||
|
||||
tokio::task::spawn(async move {
|
||||
let background_image = core.0.read().unwrap().playfield_background.clone();
|
||||
let tabletop = core.0.read().unwrap().tabletop.clone();
|
||||
let _ = ws_sender
|
||||
.send(Message::text(
|
||||
serde_json::to_string(&crate::types::Message::PlayArea(PlayArea{ background_image })).unwrap(),
|
||||
))
|
||||
.send(Message::text(serde_json::to_string(
|
||||
&crate::types::Message::UpdateTabletop(tabletop),
|
||||
).unwrap()))
|
||||
.await;
|
||||
while let Some(msg) = receiver.recv().await {
|
||||
println!("Relaying message: {:?}", msg);
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
use authdb::AuthError;
|
||||
use handlers::{
|
||||
handle_available_images, handle_connect_websocket, handle_file, handle_playing_field,
|
||||
handle_available_images, handle_connect_websocket, handle_file,
|
||||
handle_register_client, handle_unregister_client, RegisterRequest,
|
||||
};
|
||||
use std::{
|
||||
|
@ -98,8 +98,6 @@ async fn handle_rejection(err: warp::Rejection) -> Result<impl Reply, Infallible
|
|||
pub async fn main() {
|
||||
let core = core::Core::new();
|
||||
|
||||
let route_playing_field = warp::path!("api" / "v1" / "field").then(|| handle_playing_field());
|
||||
|
||||
let route_image = warp::path!("api" / "v1" / "image" / String)
|
||||
.and(warp::get())
|
||||
.then({
|
||||
|
@ -134,13 +132,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_set_bg_image = warp::path!("api" / "v1" / "tabletop" / "bg_image")
|
||||
.and(warp::put())
|
||||
.and(warp::body::json())
|
||||
.map({
|
||||
let core = core.clone();
|
||||
move |body| {
|
||||
core.set_playfield_background(body);
|
||||
println!("background_image: {}", body);
|
||||
core.set_background_image(body);
|
||||
warp::reply()
|
||||
}
|
||||
});
|
||||
|
@ -148,10 +147,9 @@ pub async fn main() {
|
|||
let filter = route_register_client
|
||||
.or(route_unregister_client)
|
||||
.or(route_websocket)
|
||||
.or(route_playing_field)
|
||||
.or(route_image)
|
||||
.or(route_available_images)
|
||||
.or(route_set_playfield_bg)
|
||||
.or(route_set_bg_image)
|
||||
.recover(handle_rejection);
|
||||
|
||||
let server = warp::serve(filter);
|
||||
|
|
|
@ -1,10 +1,5 @@
|
|||
use serde::{Deserialize, Serialize};
|
||||
|
||||
|
||||
#[derive(Clone, Debug, Deserialize, Serialize)]
|
||||
pub struct PlayArea {
|
||||
pub background_image: String,
|
||||
}
|
||||
use typeshare::typeshare;
|
||||
|
||||
#[derive(Debug)]
|
||||
pub enum AppError {
|
||||
|
@ -12,9 +7,27 @@ pub enum AppError {
|
|||
}
|
||||
|
||||
#[derive(Clone, Debug, Deserialize, Serialize)]
|
||||
#[serde(tag = "type")]
|
||||
#[serde(rename_all = "camelCase")]
|
||||
#[typeshare]
|
||||
pub struct RGB {
|
||||
pub red: u32,
|
||||
pub green: u32,
|
||||
pub blue: u32,
|
||||
}
|
||||
|
||||
#[derive(Clone, Debug, Deserialize, Serialize)]
|
||||
#[serde(rename_all = "camelCase")]
|
||||
#[typeshare]
|
||||
pub struct Tabletop {
|
||||
pub background_color: RGB,
|
||||
pub background_image: Option<String>,
|
||||
}
|
||||
|
||||
#[derive(Clone, Debug, Deserialize, Serialize)]
|
||||
#[serde(tag = "type", content = "content")]
|
||||
#[typeshare]
|
||||
pub enum Message {
|
||||
PlayArea(PlayArea),
|
||||
UpdateTabletop(Tabletop),
|
||||
}
|
||||
|
||||
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import './App.css';
|
||||
import { PlayingFieldComponent} from './components/PlayingField/PlayingField';
|
||||
import { TabletopElement } from './components/Tabletop/Tabletop';
|
||||
import { Client } from './client';
|
||||
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
|
||||
import { GmPlayingFieldComponent } from './components/GmPlayingField/GmPlayingField';
|
||||
|
@ -26,7 +26,7 @@ const App = ({ client }: AppProps) => {
|
|||
},
|
||||
{
|
||||
path: "/",
|
||||
element: websocketUrl ? <WebsocketProvider websocketUrl={websocketUrl}> <PlayingFieldComponent client={client} /> </WebsocketProvider> : <div> </div>
|
||||
element: websocketUrl ? <WebsocketProvider websocketUrl={websocketUrl}> <TabletopElement client={client} /> </WebsocketProvider> : <div> </div>
|
||||
}
|
||||
]);
|
||||
return (
|
||||
|
|
|
@ -1,23 +0,0 @@
|
|||
import React, { useContext } from 'react';
|
||||
import './PlayingField.css';
|
||||
import { WebsocketContext } from '../WebsocketProvider';
|
||||
import { Client } from '../../client';
|
||||
|
||||
interface PlayingFieldComponentProps {
|
||||
client: Client;
|
||||
}
|
||||
|
||||
export const PlayingFieldComponent = ({ client }: PlayingFieldComponentProps) => {
|
||||
const { backgroundImage } = useContext(WebsocketContext);
|
||||
console.log("backgroundImage", backgroundImage);
|
||||
if (backgroundImage) {
|
||||
return (<div className="playing-field">
|
||||
<div className="playing-field__background"> {backgroundImage && <img src={client.imageUrl(backgroundImage).toString()} alt="playing field" />} </div>
|
||||
</div>)
|
||||
} else {
|
||||
return (<div className="playing-field">
|
||||
<div> </div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
|
@ -0,0 +1,23 @@
|
|||
import React, { useContext } from 'react';
|
||||
import './Tabletop.css';
|
||||
import { WebsocketContext } from '../WebsocketProvider';
|
||||
import { Client } from '../../client';
|
||||
|
||||
interface TabletopElementProps {
|
||||
client: Client;
|
||||
}
|
||||
|
||||
export const TabletopElement = ({ client }: TabletopElementProps) => {
|
||||
const { tabletop } = useContext(WebsocketContext);
|
||||
console.log("backgroundImage", tabletop.backgroundImage);
|
||||
if (tabletop.backgroundImage) {
|
||||
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>
|
||||
);
|
||||
}
|
||||
}
|
|
@ -1,17 +1,12 @@
|
|||
import React, { createContext, PropsWithChildren, useEffect, useReducer } from "react";
|
||||
import useWebSocket from "react-use-websocket";
|
||||
|
||||
type Message = |
|
||||
{
|
||||
type: "PlayArea";
|
||||
background_image: string;
|
||||
}
|
||||
import { Message, Tabletop } from "visions";
|
||||
|
||||
type TabletopState = {
|
||||
backgroundImage: string | undefined;
|
||||
tabletop: Tabletop;
|
||||
}
|
||||
|
||||
const initialState = () => ({ backgroundImage: undefined });
|
||||
const initialState = (): TabletopState => ({ tabletop: { backgroundColor: { red: 0, green: 0, blue: 0 }, backgroundImage: undefined } });
|
||||
|
||||
export const WebsocketContext = createContext<TabletopState>(initialState());
|
||||
|
||||
|
@ -37,11 +32,12 @@ export const WebsocketProvider = ({ websocketUrl, children }: PropsWithChildren<
|
|||
}
|
||||
|
||||
const handleMessage = (state: TabletopState, message: Message): TabletopState => {
|
||||
console.log(message);
|
||||
switch (message.type) {
|
||||
case "PlayArea": {
|
||||
case "UpdateTabletop": {
|
||||
return {
|
||||
...state,
|
||||
backgroundImage: message.background_image,
|
||||
tabletop: message.content,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -21,6 +21,7 @@
|
|||
"jsx": "react-jsx"
|
||||
},
|
||||
"include": [
|
||||
"src"
|
||||
"src",
|
||||
"gen"
|
||||
]
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue