flake.nix

@@ -44,7 +44,6 @@
             pkgs.sqlx-cli
             pkgs.udev
             pkgs.wasm-pack
-            pkgs.go-task
             typeshare.packages."x86_64-linux".default
             pkgs.nodePackages_latest.typescript-language-server
           ];

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: 0xca, green: 0xb9, blue: 0xbb },
+                background_color: RGB{ red: 15, green: 0, blue: 0 },
                 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);
-                let _ = core.set_background_image(body);
+                core.set_background_image(body);
                 warp::reply()
             }
         });

visions/ui/package.json

@@ -19,8 +19,7 @@
     "react-scripts": "5.0.1",
     "react-use-websocket": "^4.11.1",
     "typescript": "^4.9.5",
-    "web-vitals": "^2.1.4",
+    "web-vitals": "^2.1.4"
-    "visions-types": "../visions-types"
   },
   "scripts": {
     "start": "react-scripts start",

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}> <PlayerView client={client} /> </WebsocketProvider> : <div> </div>
+                element: websocketUrl ? <WebsocketProvider websocketUrl={websocketUrl}> <TabletopElement client={client} /> </WebsocketProvider> : <div> </div>
             }
         ]);
     return (

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

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

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

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

visions/ui/src/components/WebsocketProvider.tsx

@@ -1,6 +1,6 @@
 import React, { createContext, PropsWithChildren, useEffect, useReducer } from "react";
 import useWebSocket from "react-use-websocket";
-import { Message, Tabletop } from "visions-types";
+import { Message, Tabletop } from "visions";
 
 type TabletopState = {
     tabletop: Tabletop;

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

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

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

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

visions/visions-types/.gitignore

@@ -1,2 +0,0 @@
-dist
-visions.ts

visions/visions-types/Taskfile.yml

@@ -1,7 +0,0 @@
-version: '3'
-
-tasks:
-  build:
-    cmds:
-      - typeshare --lang typescript --output-file visions.ts ../server/src
-      - npx tsc

visions/visions-types/package-lock.json

@@ -1,28 +0,0 @@
-{
-  "name": "visions-types",
-  "version": "0.0.1",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {
-    "": {
-      "name": "visions-types",
-      "version": "0.0.1",
-      "license": "ISC",
-      "dependencies": {
-        "typescript": "^5.6.3"
-      }
-    },
-    "node_modules/typescript": {
-      "version": "5.6.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz",
-      "integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==",
-      "bin": {
-        "tsc": "bin/tsc",
-        "tsserver": "bin/tsserver"
-      },
-      "engines": {
-        "node": ">=14.17"
-      }
-    }
-  }
-}

visions/visions-types/package.json

@@ -1,14 +0,0 @@
-{
-  "name": "visions-types",
-  "version": "0.0.1",
-  "description": "Shared data types for Visions",
-  "main": "visions.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "author": "",
-  "license": "ISC",
-  "dependencies": {
-    "typescript": "^5.6.3"
-  }
-}

visions/visions-types/tsconfig.json

@@ -1,15 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es2016",
-    "module": "commonjs",
-    "declaration": true,
-    "declarationMap": true,
-    "sourceMap": true,
-    "outDir": "./dist",
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
-    "strict": true,
-    "skipLibCheck": true
-  },
-  "include": ["./visions.ts"]
-}