feat: join room

GIP-RECIA · Mar 7, 2023 · 5cb5a90 · 5cb5a90
1 parent b9bbcc8
commit 5cb5a90
Show file tree

Hide file tree

Showing 2 changed files with 92 additions and 6 deletions.
diff --git a/client/src/App.css b/client/src/App.css
@@ -24,3 +24,51 @@ a {
   width: 100%;
   height: 100%;
 }
+
+.share-container,
+.leave-container {
+  z-index: 2;
+  position: absolute;
+  left: 110px;
+  display: flex;
+  box-shadow: var(--shadows-panel);
+  border-bottom-right-radius: 9px;
+  border-bottom-left-radius: 9px;
+  background-color: var(--colors-panelContrast);
+}
+
+.leave-container {
+  left: 50px;
+}
+
+.share-item,
+.leave-item {
+  width: 60px;
+  height: 40px;
+  border-radius: 9px;
+  margin: 1px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--fontSizes-1);
+  font-family: var(--fonts-ui);
+  color: var(--colors-text);
+  user-select: none;
+}
+
+.share-item:hover,
+.leave-item:hover,
+.input-join:hover {
+  background-color: var(--colors-hover);
+}
+
+.input-join {
+  border: none;
+  outline: none;
+  width: 100px;
+  height: 40px;
+  margin: 1px;
+  border-radius: 9px;
+  text-align: center;
+}
diff --git a/client/src/components/Editor.tsx b/client/src/components/Editor.tsx
@@ -1,3 +1,4 @@
+import { FormEvent, useState } from "react";
 import { Tldraw, useFileSystem } from "@tldraw/tldraw";
 import { CustomCursor } from "./Cursor";
 import { useAssets } from "../hooks/useAssets";
@@ -34,19 +35,56 @@ function Editor({
   readOnly,
   language,
 }: Settings) {
+  const [room, setRoom] = useState(roomId);
+  const [joinRoom, setJoinRoom] = useState(undefined);
+
   language = language || "en";
   initPersistence(idbName);
   let editor = <SingleplayerEditor apiUrl={apiUrl} language={language} />;
-  if (wsUrl && roomId) {
-    initProvider(wsUrl, roomId);
+  if (wsUrl && room) {
+    initProvider(wsUrl, room);
     editor = readOnly ? (
-      <MultiplayerReadOnlyEditor roomId={roomId} language={language} />
+      <MultiplayerReadOnlyEditor roomId={room} language={language} />
     ) : (
-      <MultiplayerEditor apiUrl={apiUrl} roomId={roomId} language={language} />
+      <MultiplayerEditor apiUrl={apiUrl} roomId={room} language={language} />
     );
-  }
+  } else setTimeout(() => destroyProvider(), 500);
 
-  return editor;
+  return (
+    <div>
+      {wsUrl && !room && (
+        <div className="share-container">
+          <input
+            onChange={(e: FormEvent<HTMLInputElement>) =>
+              setJoinRoom(e.target.value)
+            }
+            className="input-join"
+            type="text"
+            placeholder="id of room"
+          ></input>
+          {joinRoom && (
+            <a className="share-item" onClick={() => setRoom(joinRoom)}>
+              Join
+            </a>
+          )}
+        </div>
+      )}
+      {wsUrl && room && (
+        <div className="leave-container">
+          <a
+            className="leave-item"
+            onClick={() => {
+              setJoinRoom(undefined);
+              setRoom(undefined);
+            }}
+          >
+            Leave
+          </a>
+        </div>
+      )}
+      {editor}
+    </div>
+  );
 }
 
 function SingleplayerEditor({ apiUrl, language }: Singleplayer) {