Merge pull request #181 from latitudegames/0.0.67

0.0.67

Author: parzival418

.vscode/launch.json

@@ -8,7 +8,7 @@
       "type": "pwa-chrome",
       "request": "launch",
       "name": "Launch Chrome against localhost",
-      "url": "http://localhost:3001",
+      "url": "http://localhost:3003",
       "sourceMap": true,
       "webRoot": "${workspaceFolder}/client",
       "trace": true,

README.md

@@ -50,7 +50,7 @@ In the project directory, you can run:
 ### `yarn start`
 
 Runs @thoth/client in the development mode.\
-Open [http://localhost:3001](http://localhost:3001) to view it in the browser.
+Open [http://localhost:3003](http://localhost:3003) to view it in the browser.
 
 ### `yarn build`
 

client/.env

@@ -4,7 +4,7 @@ EXTEND_ESLINT = true
 
 REACT_APP_SITE_ROOT_URL_PROD=https://thoth.latitude.io
 
-REACT_APP_SITE_ROOT_URL=http://localhost:3001
+REACT_APP_SITE_ROOT_URL=http://localhost:3003
 REACT_APP_LAPI_ROOT_URL=http://localhost:8000
 
 REACT_APP_LAPI_ROOT_URL_PROD=https://api.latitude.io
@@ -15,3 +15,4 @@ REACT_APP_SITE_STAGING=https://62264f21c3a9860ad1e5bdd3--optimistic-turing-def91
 REACT_APP_OAUTH_CLIENT_ID=a6b51c87-7565-42ab-a4b0-38a07f3b6c56
 
 REACT_APP_SHAREDB=false
+REACT_APP_WEBSOCKETS=false

client/.env.example

@@ -2,7 +2,7 @@ EXTEND_ESLINT = true
 
 # This prod site root assumes the netlify build context $URL is available, replace for other hosts
 REACT_APP_SITE_ROOT_URL_PROD=$URL
-REACT_APP_SITE_ROOT_URL=http://localhost:3001
+REACT_APP_SITE_ROOT_URL=http://localhost:3003
 REACT_APP_LAPI_ROOT_URL=http://localhost:8000
 REACT_APP_LAPI_ROOT_URL_PROD=https://api.latitude.io
 REACT_APP_SITE_STAGING=https://62264f21c3a9860ad1e5bdd3--optimistic-turing-def916.netlify.app/

client/README.md

@@ -15,7 +15,7 @@ In the project directory, you can run:
 ### `yarn start`
 
 Runs the app in the development mode.\
-Open [http://localhost:3001](http://localhost:3001) to view it in the browser.
+Open [http://localhost:3003](http://localhost:3003) to view it in the browser.
 
 The page will reload if you make edits.\
 You will also see any lint errors in the console.

client/package.json

@@ -23,7 +23,7 @@
     "@callstack/async-storage": "^2.0.3",
     "@emotion/react": "^11.8.2",
     "@emotion/styled": "^11.8.1",
-    "@latitudegames/thoth-core": "^0.0.66",
+    "@latitudegames/thoth-core": "^0.0.67",
     "@monaco-editor/react": "^4.2.1",
     "@mui/icons-material": "^5.5.1",
     "@mui/material": "^5.5.3",

client/src/config.ts

@@ -12,4 +12,5 @@ export const appRootUrl =
 
 // coercing this into a boolean
 export const sharedb = process.env.REACT_APP_SHAREDB === 'true'
+export const websockets = process.env.REACT_APP_WEBSOCKETS === 'true'
 export const websocketUrl = 'ws://localhost:8080'

client/src/contexts/AppProviders.tsx

@@ -9,6 +9,7 @@ import AuthProvider from './AuthProvider'
 import PubSubProvider from './PubSubProvider'
 import SharedbProvider from './SharedbProvider'
 import ToastProvider from './ToastProvider'
+import WebSocketProvider from './WebSocketProvider'
 
 declare module '@mui/styles/defaultTheme' {
   // eslint-disable-next-line @typescript-eslint/no-empty-interface
@@ -28,6 +29,7 @@ const providers = [
   [ThemeProvider, { theme: darkTheme }],
   ToastProvider,
   AuthProvider,
+  WebSocketProvider,
   SharedbProvider,
 ]
 

client/src/contexts/PubSubProvider.tsx

@@ -23,6 +23,7 @@ export const events = {
   UPDATE_SUBSPELL: 'updateSubspell',
   DELETE_SUBSPELL: 'deleteSubspell',
   $SUBSPELL_UPDATED: spellId => `subspellUpdated:${spellId}`,
+  $TRIGGER: (tabId, nodeId) => `triggerNode:${tabId}:${nodeId}`,
   $PLAYTEST_INPUT: tabId => `playtestInput:${tabId}`,
   $PLAYTEST_PRINT: tabId => `playtestPrint:${tabId}`,
   $DEBUG_PRINT: tabId => `debugPrint:${tabId}`,

client/src/contexts/SharedbProvider.tsx

@@ -1,24 +1,22 @@
-import { sharedb, websocketUrl } from '@/config'
+import { sharedb } from '@/config'
 import { useContext, createContext, useEffect, useState } from 'react'
 import { Doc } from 'sharedb'
 
-import ReconnectingWebSocket from 'reconnecting-websocket'
 import client from 'sharedb/lib/client'
 import { Socket } from 'sharedb/lib/sharedb'
 import { Spell } from '@latitudegames/thoth-core/types'
 import LoadingScreen from '@/components/LoadingScreen/LoadingScreen'
+import { useWebSocket } from './WebSocketProvider'
 
 const Connection = client.Connection
 
 interface SharedbContext {
   connection: client.Connection | null
-  socket: Socket | null
   getSpellDoc: (spell: Spell) => Doc | null
 }
 
 const Context = createContext<SharedbContext>({
   connection: null,
-  socket: null,
   getSpellDoc: () => null,
 })
 
@@ -28,14 +26,12 @@ export const docMap = new Map()
 
 // Might want to namespace these
 const SharedbProvider = ({ children }) => {
-  const [socket, setSocket] = useState<Socket | null>(null)
+  const { socket } = useWebSocket()
   const [connection, setConnection] = useState<client.Connection | null>(null)
 
   useEffect(() => {
-    const _socket = new ReconnectingWebSocket(websocketUrl)
-    const _connection = new Connection(_socket as Socket)
+    const _connection = new Connection(socket as Socket)
     setConnection(_connection)
-    setSocket(_socket as Socket)
   }, [])
 
   const getSpellDoc = (spell: Spell) => {
@@ -61,7 +57,6 @@ const SharedbProvider = ({ children }) => {
   }
 
   const publicInterface: SharedbContext = {
-    socket,
     connection,
     getSpellDoc,
   }