Join session via url

client/package.json

@@ -52,6 +52,7 @@
     ]
   },
   "devDependencies": {
+    "@types/query-string": "^6.3.0",
     "@types/uuid": "^8.3.0",
     "@types/websocket": "^1.0.1"
   }

client/src/components/App.tsx

@@ -19,11 +19,9 @@ const App = () => {
             <LandingPage />
           </Route>
           <Route exact path='/play'>
-            {/* eventually /play/:session-id */}
             <PlayPage />
           </Route>
           <Route exact path='/registration'>
-            {/* eventually /play/:session-id */}
             <RegistrationPage />
           </Route>
           <Route>

client/src/components/interface/InnerSidebar.tsx

@@ -1,39 +1,44 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useContext } from 'react';
 import socket from '../../socket';
 import { cleanJsonString } from '../../utilities/json';
+import { AuthContext } from '../contexts/AuthProvider';
 
-const InnerSidebar = (props: { width: number }) => {
+const InnerSidebar = (props: { session: any; width: number }) => {
+  const auth = useContext(AuthContext);
   const [messages, setMessages] = useState<Record<string, any>[]>([]);
   const [newMessage, setNewMessage] = useState('');
 
   useEffect(() => {
     console.log('adding event listener for chat');
     socket.addEventListener('message', function (event) {
       let message = JSON.parse(event.data);
-      if (cleanJsonString(message.channel) !== 'group') return;
+      if (cleanJsonString(message.channel) !== 'group' || message.session?.uuid !== props.session?.uuid) return;
       setMessages((messages) => [...messages, JSON.parse(event.data)]);
     });
-  }, []);
+  }, [props.session]);
 
   const sendMessage = (message: string) => {
-    if (message === '') return;
+    if (message === '' || !auth.authState.rpgToolUser) return;
+    const user = auth.authState.rpgToolUser;
+
     if (message.startsWith('/roll ')) {
       message = message.replace('/roll ', '');
       socket.send(
         JSON.stringify({
           socket_id: 1234,
-          username: process.env.REACT_APP_USERNAME, // do this better
+          username: user.username,
           channel: 'roll',
           timestamp: Date.now(),
           message: message,
+          session: props.session,
         })
       );
     } else if (message.startsWith('/newmap ')) {
       message = message.replace('/newmap ', '');
       socket.send(
         JSON.stringify({
           socket_id: 1234,
-          username: process.env.REACT_APP_USERNAME, // do this better
+          username: user.username,
           channel: 'map',
           command: 'new',
           timestamp: Date.now(),
@@ -44,10 +49,11 @@ const InnerSidebar = (props: { width: number }) => {
       socket.send(
         JSON.stringify({
           socket_id: 1234,
-          username: process.env.REACT_APP_USERNAME, // do this better
+          username: user.username,
           channel: 'group',
           timestamp: Date.now(),
           message: message,
+          session: props.session,
         })
       );
     }

client/src/components/pages/PlayPage.tsx

@@ -1,13 +1,50 @@
-import React, { createRef, useEffect } from 'react';
+import React, { createRef, useContext, useEffect, useState } from 'react';
 import playArea from '../pixi/playArea';
 import useWindowDimensions from '../../utilities/window';
+import { parseUrlQuery } from '../../utilities/url';
 
 import OuterSidebar from '../interface/OuterSidebar';
 import InnerSidebar from '../interface/InnerSidebar';
 import Toolbox from '../interface/Toolbox';
 
+import http from '../../http';
+import socket from '../../socket';
+import { API_URL } from '../../environment';
+
+import { AuthContext } from '../contexts/AuthProvider';
+
 const PlayPage = (props: {}) => {
+  const auth = useContext(AuthContext);
   const canvasRef = createRef<HTMLDivElement>();
+  const { sessionId } = parseUrlQuery(window.location.search);
+
+  const [session, setSession] = useState<any>(null);
+
+  useEffect(() => {
+    if (auth?.authState?.rpgToolUser) {
+      socket.send(
+        JSON.stringify({
+          channel: 'register',
+          user_id: auth.authState.rpgToolUser.id,
+        })
+      );
+    }
+  }, [auth]);
+
+  useEffect(() => {
+    if (!sessionId) return;
+
+    http
+      .get(`${API_URL}/session/${sessionId}`)
+      .then((res) => {
+        if (res?.data) {
+          setSession(res.data);
+        }
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  }, []);
 
   useEffect(() => {
     canvasRef?.current?.appendChild(playArea.view);
@@ -19,19 +56,17 @@ const PlayPage = (props: {}) => {
 
   useEffect(() => {
     if (playArea && canvasRef.current) {
-      playArea.renderer.resize(
-        width - outerSidebarWidth - innerSidebarWidth,
-        height
-      );
+      playArea.renderer.resize(width - outerSidebarWidth - innerSidebarWidth, height);
     }
   }, [canvasRef, width, height]);
 
   return (
     <div style={{ width: '100vw' }} className='Play'>
       <OuterSidebar width={outerSidebarWidth} />
-      <InnerSidebar width={innerSidebarWidth} />
+      <InnerSidebar session={session} width={innerSidebarWidth} />
       <Toolbox sidebarWidth={innerSidebarWidth + outerSidebarWidth} />
       <div style={{ overflow: 'auto' }} ref={canvasRef} />
+      {session && <span style={{ position: 'fixed', bottom: '8px', right: '8px' }}>Session ID: {session.uuid}</span>}
     </div>
   );
 };

client/src/utilities/url.ts

@@ -0,0 +1,9 @@
+export const parseUrlQuery = (urlQuery: string) => {
+  var query = urlQuery.substr(1);
+  var result: any = {};
+  query.split('&').forEach(function (part) {
+    var item = part.split('=');
+    result[item[0]] = decodeURIComponent(item[1]);
+  });
+  return result;
+};

server/Cargo.toml

@@ -17,9 +17,10 @@ env_logger = "0.8.3"
 time = "0.2.25"
 cute-dnd-dice = "4.0.0"
 dotenv = "0.15.0"
-diesel = { version = "1.4.4", features = ["postgres", "uuidv07", "serde_json"] }
+diesel = { version = "1.4.4", features = ["postgres", "uuidv07", "serde_json", "numeric"] }
 tokio = { version = "1", features = ["full"] }
 warp = "0.3"
+lazy_static = "1.4.0"
 # [dev-dependencies]
 # clap = "2.31.2"
 # term = "0.7.0"

server/migrations/2021-04-08-144146_bigInt-to-int/down.sql

@@ -0,0 +1,3 @@
+ALTER TABLE session 
+ALTER COLUMN dm TYPE int8,
+ALTER COLUMN players TYPE int8[];

server/migrations/2021-04-08-144146_bigInt-to-int/up.sql

@@ -0,0 +1,3 @@
+ALTER TABLE session 
+ALTER COLUMN dm TYPE int4,
+ALTER COLUMN players TYPE int4[];

server/src/db.rs

@@ -1,6 +1,6 @@
 mod image;
 pub mod session;
-mod user;
+pub mod user;
 
 pub use image::*;
 pub use session::*;

server/src/db/session.rs

@@ -14,7 +14,7 @@ use ::uuid::Uuid;
 pub fn create_session<'a>(db: &PgConnection, user_id: i32) -> Result<Session, warp::Rejection> {
   let new_session = NewSession {
     uuid: Uuid::new_v4(),
-    dm: user_id as i64,
+    dm: user_id,
     players: None,
     state: None,
   };
@@ -33,7 +33,7 @@ pub fn get_user_sessions<'a>(
   db: &PgConnection,
   user_id: i32,
 ) -> Result<Vec<Session>, warp::Rejection> {
-  let res = session.filter(dm.eq(user_id as i64)).load(db);
+  let res = session.filter(dm.eq(user_id)).load(db);
 
   match res {
     Ok(i) => Ok(i),

server/src/db/user.rs

@@ -1,6 +1,7 @@
 extern crate diesel;
 extern crate dotenv;
 
+use crate::models::Session;
 use diesel::pg::PgConnection;
 use diesel::prelude::*;
 
@@ -34,3 +35,28 @@ pub fn update_user<'a>(db: &PgConnection, updated_user: &User) -> Result<User, w
     _ => Err(warp::reject()),
   }
 }
+
+pub fn _get_users_in_session<'a>(
+  db: &PgConnection,
+  session: Session,
+) -> Result<Vec<User>, warp::Rejection> {
+  let mut users: Vec<User> = Vec::new();
+  let mut user_ids = vec![session.dm];
+
+  match session.players {
+    Some(mut players) => {
+      user_ids.append(&mut players);
+    }
+    _ => {}
+  }
+
+  match user.filter(id.eq_any(user_ids)).load::<User>(db) {
+    Ok(mut u) => {
+      users.append(&mut u);
+    }
+    _ => {}
+  };
+
+  println!("{:?}", users);
+  Ok(users)
+}

server/src/main.rs

@@ -1,5 +1,8 @@
 #[macro_use]
 extern crate diesel;
+#[macro_use]
+extern crate lazy_static;
+
 pub mod models;
 pub mod schema;
 

server/src/message/client.rs

@@ -1,10 +1,12 @@
+use crate::models::Session;
 use serde::{Deserialize, Serialize};
 
-#[derive(Serialize, Deserialize)]
+#[derive(Serialize, Deserialize, Debug)]
 pub struct ClientMessage {
   pub client_id: String,
   pub username: String,
   pub channel: String,
   pub timestamp: String,
   pub message: String,
+  pub session: Option<Session>,
 }

server/src/message/group.rs

@@ -1,4 +1,5 @@
 use crate::message::*;
+use crate::models::session_from_json;
 use time::OffsetDateTime;
 
 pub fn generate_group_message(msg_data: Value) -> ClientMessage {
@@ -11,5 +12,10 @@ pub fn generate_group_message(msg_data: Value) -> ClientMessage {
     .to_string()
     .into(),
     message: msg_data["message"].to_string(),
+    session: if !msg_data["session"].is_null() {
+      Some(session_from_json(&msg_data["session"]))
+    } else {
+      None
+    },
   }
 }

server/src/message/roll.rs

@@ -1,3 +1,4 @@
+use crate::models::session_from_json;
 use cute_dnd_dice::*;
 use time::OffsetDateTime;
 
@@ -14,6 +15,11 @@ pub fn generate_roll_message(msg_data: Value) -> ClientMessage {
     .to_string()
     .into(),
     message: String::new(),
+    session: if !msg_data["session"].is_null() {
+      Some(session_from_json(&msg_data["session"]))
+    } else {
+      None
+    },
   };
 
   let roll = Roll::from_str(msg_data["message"].as_str().unwrap());

server/src/models/session.rs

@@ -5,17 +5,35 @@ use uuid::*;
 #[derive(Queryable, Debug, Deserialize, Serialize, Clone)]
 pub struct Session {
   pub id: i32,
-  uuid: Uuid,
-  dm: i64,
-  players: Option<Vec<i64>>,
-  state: Option<serde_json::Value>,
+  pub uuid: Uuid,
+  pub dm: i32,
+  pub players: Option<Vec<i32>>,
+  pub state: Option<serde_json::Value>,
 }
 
 #[derive(Insertable, Debug, Deserialize, Serialize, Clone)]
 #[table_name = "session"]
 pub struct NewSession {
   pub uuid: Uuid,
-  pub dm: i64,
-  pub players: Option<Vec<i64>>,
+  pub dm: i32,
+  pub players: Option<Vec<i32>>,
   pub state: Option<serde_json::Value>,
 }
+
+pub fn session_from_json(json: &serde_json::Value) -> Session {
+  Session {
+    id: json["id"].as_i64().unwrap() as i32,
+    uuid: Uuid::parse_str(&json["uuid"].to_string()[1..37]).unwrap(),
+    dm: json["dm"].as_i64().unwrap() as i32,
+    players: match json["players"].as_array() {
+      Some(p_vec) => Some(
+        p_vec
+          .into_iter()
+          .map(|p| p.as_i64().unwrap() as i32)
+          .collect(),
+      ),
+      _ => None,
+    },
+    state: Some(json["state"].clone()),
+  }
+}

server/src/schema.rs

@@ -9,8 +9,8 @@ table! {
     session (id) {
         id -> Int4,
         uuid -> Uuid,
-        dm -> Int8,
-        players -> Nullable<Array<Int8>>,
+        dm -> Int4,
+        players -> Nullable<Array<Int4>>,
         state -> Nullable<Json>,
     }
 }
@@ -28,4 +28,8 @@ table! {
     }
 }
 
-allow_tables_to_appear_in_same_query!(image, session, user,);
+allow_tables_to_appear_in_same_query!(
+    image,
+    session,
+    user,
+);