style!: rename properties

GIP-RECIA · Mar 9, 2023 · 6b9331a · 6b9331a
1 parent 57ddd77
commit 6b9331a
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 35 deletions.
diff --git a/README.md b/README.md
@@ -5,8 +5,8 @@ Tldraw singleplayer and mutliplayer WebComponent.
 Librairies :
 
 - [tldraw](https://www.tldraw.com)
-- [yjs](https://github.com/yjs/yjs)
-- [express](https://github.com/expressjs/express)
+- [Yjs](https://github.com/yjs/yjs)
+- [Express](https://github.com/expressjs/express)
 
 Based on [nimeshnayaju yjs-tldraw](https://github.com/nimeshnayaju/yjs-tldraw) POC for yjs multiplayer.
 
@@ -46,25 +46,25 @@ Launch client to use tldraw.
 yarn dev:client
 ```
 
-To use multiplayer functionality, launch WebSocket server then add `/r/<anything>` to your url.
+To use multiplayer functionality.
 
 ```bash
 yarn start:ws
 ```
 
 ### WebComponent
 
-|    Prop    | Description                                                                                                                                                      |  Type  | Required | Default |
-| :--------: | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----: | :------: | :-----: |
-|  idb-name  | Name for indexeddb                                                                                                                                               | string |   true   |    -    |
-|  api-url   | API url for file managment                                                                                                                                       | string |   true   |    -    |
-|   ws-url   | WebSocket url                                                                                                                                                    | string |  false   |    -    |
-|  room-id   | Identifier of multiplayer room                                                                                                                                   | string |  false   |    -    |
-|  language  | Default interface language (check [tldraw translation](https://github.com/tldraw/tldraw/tree/main/packages/tldraw/src/translations) for availables translations) | string |  false   |   en    |
-| read-only  | Disable edition on multiplayer                                                                                                                                   |  bool  |  false   |  false  |
-| cant-join  | Disallow users to join a room                                                                                                                                    |  bool  |  false   |  false  |
-| cant-leave | Disallow users to leave a room                                                                                                                                   |  bool  |  false   |  false  |
-| cant-share | Disallow users to share a romm                                                                                                                                   |  bool  |  false   |  false  |
+|  Property   |   Type    | Required | Default | Description                                                                                                                                                      |
+| :---------: | :-------: | :------: | :-----: | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `idb-name`  | `string`  |  `true`  |         | Name for indexeddb                                                                                                                                               |
+|  `api-url`  | `string`  |  `true`  |         | API url for file managment                                                                                                                                       |
+|  `ws-url`   | `string`  | `false`  |         | [Yjs](https://github.com/yjs/yjs) WebSocket server url                                                                                                           |
+|  `room-id`  | `string`  | `false`  |         | Identifier of multiplayer room                                                                                                                                   |
+| `language`  | `string`  | `false`  |  `en`   | Default interface language (check [tldraw translation](https://github.com/tldraw/tldraw/tree/main/packages/tldraw/src/translations) for availables translations) |
+| `read-only` | `boolean` | `false`  | `false` | Disable edition on multiplayer                                                                                                                                   |
+|  `no-join`  | `boolean` | `false`  | `false` | Disallow joining room                                                                                                                                            |
+| `no-leave`  | `boolean` | `false`  | `false` | Disallow leaving room                                                                                                                                            |
+| `no-share`  | `boolean` | `false`  | `false` | Disallow sharing romm                                                                                                                                            |
 
 ```html
 <tldraw-editor
@@ -74,9 +74,9 @@ yarn start:ws
   room-id=""
   language=""
   read-only
-  cant-join
-  cant-share
-  cant-leave
+  no-join
+  no-share
+  no-leave
 />
 ```
 

diff --git a/client/src/components/Editor.tsx b/client/src/components/Editor.tsx
@@ -29,9 +29,9 @@ Editor.propTypes = {
   roomId: PropTypes.string,
   language: PropTypes.string,
   readOnly: PropTypes.bool,
-  cantJoin: PropTypes.bool,
-  cantLeave: PropTypes.bool,
-  cantShare: PropTypes.bool,
+  noJoin: PropTypes.bool,
+  noLeave: PropTypes.bool,
+  noShare: PropTypes.bool,
 };
 
 const components = {
@@ -47,9 +47,9 @@ function Editor({
   roomId,
   language,
   readOnly,
-  cantJoin,
-  cantLeave,
-  cantShare,
+  noJoin,
+  noLeave,
+  noShare,
 }: Settings) {
   const [room, setRoom] = useState(roomId);
   const [joinRoom, setJoinRoom] = useState(undefined);
@@ -61,7 +61,7 @@ function Editor({
   let editor = (
     <SingleplayerEditor apiUrl={apiUrl} doc={localDoc} language={language} />
   );
-  if (wsUrl && room) {
+  if (wsUrl && room && uuidValidate(room)) {
     let doc = newDoc();
     if (useLocalDoc) doc = cloneDoc(localDoc);
     const provider = initProvider(wsUrl, room, doc);
@@ -94,7 +94,7 @@ function Editor({
     <div>
       {wsUrl && !room && (
         <div className="share-container">
-          {!cantShare && !readOnly && (
+          {!noShare && !readOnly && (
             <a
               className="share-item"
               onClick={() => setRoom(uuidv4())}
@@ -103,7 +103,7 @@ function Editor({
               <FontAwesomeIcon icon={faUsers} />
             </a>
           )}
-          {!cantShare && !readOnly && (
+          {!noShare && !readOnly && (
             <a
               className="share-item"
               onClick={() => {
@@ -115,7 +115,7 @@ function Editor({
               <FontAwesomeIcon icon={faShareNodes} />
             </a>
           )}
-          {!cantJoin && !wantJoinRoom && (
+          {!noJoin && !wantJoinRoom && (
             <a
               className="share-item"
               onClick={() => setWantJoinRoom(true)}
@@ -124,7 +124,7 @@ function Editor({
               <FontAwesomeIcon icon={faArrowRightToBracket} />
             </a>
           )}
-          {!cantJoin && wantJoinRoom && (
+          {!noJoin && wantJoinRoom && (
             <input
               onChange={(e: FormEvent<HTMLInputElement>) =>
                 setJoinRoom(e.target.value)
@@ -136,7 +136,7 @@ function Editor({
               autoFocus
             ></input>
           )}
-          {!cantJoin && wantJoinRoom && (
+          {!noJoin && wantJoinRoom && (
             <a
               className="share-item"
               onClick={resetStates}
@@ -145,7 +145,7 @@ function Editor({
               <FontAwesomeIcon icon={faXmark} />
             </a>
           )}
-          {!cantJoin && joinRoom && uuidValidate(joinRoom) && (
+          {!noJoin && joinRoom && uuidValidate(joinRoom) && (
             <a
               className="share-item"
               onClick={() => setRoom(joinRoom)}
@@ -158,7 +158,7 @@ function Editor({
       )}
       {wsUrl && room && (
         <div className="leave-container">
-          {!cantShare && (
+          {!noShare && (
             <a
               className="leave-item"
               onClick={() => navigator.clipboard.writeText(room)}
@@ -167,7 +167,7 @@ function Editor({
               {room}
             </a>
           )}
-          {!cantLeave && (
+          {!noLeave && (
             <a className="leave-item" onClick={resetStates} title="Leave room">
               <FontAwesomeIcon icon={faArrowRightFromBracket} />
             </a>

diff --git a/client/src/types/types.ts b/client/src/types/types.ts
@@ -8,9 +8,9 @@ export type Settings = {
   roomId?: string;
   readOnly?: boolean;
   language?: string;
-  cantJoin?: boolean;
-  cantLeave?: boolean;
-  cantShare?: boolean;
+  noJoin?: boolean;
+  noLeave?: boolean;
+  noShare?: boolean;
 };
 
 export type Singleplayer = {