vzcode 0.2.1 → 0.4.0

package/dist/assets/index-8d2d4b3b.css

@@ -0,0 +1 @@
+@import"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap";@import"https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css";@import"https://unpkg.com/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css";*{margin:0;padding:0;box-sizing:border-box}::-webkit-scrollbar{width:10px;height:20px}::-webkit-scrollbar-track{background:rgb(41,44,52)}::-webkit-scrollbar-thumb{background:rgb(37,37,38)}::-webkit-scrollbar-thumb:hover{background:#555}:root{--main-font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace}body{background:rgb(41,44,52);font-family:Poppins,sans-serif;overflow-x:hidden}.tab{width:max-content;height:30px;background:rgb(45,45,45);text-align:center;color:#fff;font-family:var(--main-font-family);justify-content:center;align-items:center;display:flex;padding-left:10px;padding-right:10px;border-top-left-radius:10px;border-top-right-radius:10px;margin-top:5px;margin-left:2px;margin-right:2px;cursor:pointer}.tab.active{background-color:#292c34}.tab-close{display:flex;cursor:pointer;margin-left:5px;justify-content:center;align-items:center}.tab-close:hover{border-radius:30%;background-color:#252526}.editor{position:relative;margin-left:200px;width:100%;height:100%;top:30px;bottom:0;background-color:#292c34;color:#fff;font-family:var(--main-font-family)}.tab-list{position:fixed;display:flex;flex-direction:row;top:0;left:200px;height:35px;width:100%;background:rgb(37,37,38);z-index:100;transition:all .5s ease}.bottom-bar{position:absolute;bottom:0;left:0;height:20px;width:100%;background:rgb(45,45,45);z-index:100;transition:all .5s ease}.sidebar{position:fixed;top:0;left:0;height:100%;width:200px;background:rgb(54,65,89);z-index:100;transition:all .5s ease}.link-name{margin-top:30px;margin-left:10px;color:#9aa0ac;font-size:12px;text-decoration:none}.file{display:flex;flex-direction:row;align-items:center;justify-content:left;width:180px;cursor:pointer;margin-left:10px;color:#dbdde1;border-radius:5px}.full-Box{width:inherit;height:inherit;padding:7px;display:flex;flex-direction:row;align-items:center;justify-content:space-between}.utilities{justify-content:right;margin-right:3px}.noUtils{display:none}.settings{position:absolute;bottom:0;height:30px;width:180px;z-index:100;color:#dbdde1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:14px 0;margin:10px;border-radius:5px}.file:hover,.settings:hover{background-color:#4a5469}.newBTN{justify-content:right;margin-right:10px;cursor:pointer}.themes{color:#252526}.name,.hover-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.name{max-width:200px}.hover-name{max-width:130px}

package/dist/index.html

@@ -2,11 +2,10 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
-    <script type="module" crossorigin src="/assets/index-5e86a45f.js"></script>
-    <link rel="stylesheet" href="/assets/index-5c2f5f84.css">
+    <title>VZCode</title>
+    <script type="module" crossorigin src="/assets/index-48dbd5c3.js"></script>
+    <link rel="stylesheet" href="/assets/index-8d2d4b3b.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vzcode",
-  "version": "0.2.1",
+  "version": "0.4.0",
   "description": "Multiplayer code editor system",
   "main": "index.js",
   "type": "module",
@@ -11,7 +11,7 @@
   ],
   "scripts": {
     "test": "npm run build; cd test; node ../cli.js",
-    "prettier": "prettier {*.*,**/*.*} --single-quote --write",
+    "prettier": "prettier {*.*,**/*.*} --write",
     "dev": "vite",
     "build": "vite build",
     "build-release": "vite build --mode release",
@@ -33,7 +33,10 @@
     "Data",
     "Visualization"
   ],
-  "author": "Curran Kelleher",
+  "contributors": [
+    "Curran Kelleher",
+    "Anooj Pai"
+  ],
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/vizhub-core/vzcode/issues"
@@ -52,6 +55,7 @@
     "diff-match-patch": "^1.0.5",
     "express": "^4.18.2",
     "json0-ot-diff": "^1.1.2",
+    "open": "^9.0.0",
     "react": "^18.2.0",
     "react-bootstrap": "^2.7.2",
     "react-dom": "^18.2.0",

package/src/App.jsx

@@ -14,7 +14,8 @@ ShareDBClient.types.register(json1Presence.type);
 // Establish the singleton ShareDB connection over WebSockets.
 // TODO consider using reconnecting WebSocket
 const { Connection } = ShareDBClient;
-const socket = new WebSocket('ws://' + window.location.host + '/ws');
+const wsProtocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://';
+const socket = new WebSocket(wsProtocol + window.location.host + '/ws');
 const connection = new Connection(socket);
 
 // A feature flag to disable settings for release, until it's completed.
@@ -230,7 +231,6 @@ function App() {
           </div>
         ))}
       </div>
-      <div className="bottom-bar"></div>
       <div className="sidebar show">
         <div className="nav-links">
           <div className="show-menu">
@@ -269,7 +269,9 @@ function App() {
                           setUtils(null);
                         }}
                       >
-                        <div className="name">{data[key].name}</div>
+                        <div className={utils === key ? 'hover-name' : 'name'}>
+                          {data[key].name}
+                        </div>
                         <div className={utils === key ? 'utils' : 'noUtils'}>
                           <i
                             className="bx bxs-edit utilities"

package/src/settings.jsx

@@ -74,17 +74,42 @@ const themes = [
   { value: 'zenburn', label: 'zenburn' },
 ];
 
+const saveTimes = [
+  { value: 1, label: '1 second' },
+  { value: 5, label: '5 seconds' },
+  { value: 10, label: '10 seconds' },
+  { value: 30, label: '30 seconds' },
+];
+
 export const Settings = ({ show, onClose, setTheme }) => {
   const handleChange = useCallback((selectedOption) => {
     setTheme(selectedOption.value);
   }, []);
 
+  const handleSaveTimeChange = useCallback((selectedOption) => {
+    const time = [{ value: selectedOption.value }];
+    fetch('/saveTime', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(time),
+    });
+  }, []);
+
   return show ? (
     <Modal show={show} onHide={onClose} animation={false}>
       <Modal.Header closeButton>
         <Modal.Title>Settings</Modal.Title>
       </Modal.Header>
       <Modal.Body>
+        <Form.Group className="mb-3" controlId="formFork">
+          <Form.Label>Username</Form.Label>
+          <Form.Control type="text" placeholder="Enter username" />
+          <Form.Text className="text-muted">
+            Enter a username to be displayed on your cursor
+          </Form.Text>
+        </Form.Group>
         <Form.Group className="mb-3" controlId="formFork">
           <Form.Label>Theme</Form.Label>
           <Select
@@ -96,6 +121,15 @@ export const Settings = ({ show, onClose, setTheme }) => {
             Select a color theme for the editor
           </Form.Text>
         </Form.Group>
+        <Form.Group className="mb-3" controlId="formFork">
+          <Form.Label>Auto-Save Time</Form.Label>
+          <Select
+            classvalue="themes"
+            options={saveTimes}
+            onChange={handleSaveTimeChange}
+          />
+          <Form.Text className="text-muted">Select an auto save time</Form.Text>
+        </Form.Group>
       </Modal.Body>
       <Modal.Footer>
         <Button variant="primary" onClick={onClose}>

package/src/style.css

@@ -10,6 +10,27 @@
   box-sizing: border-box;
 }
 
+/* width */
+::-webkit-scrollbar {
+  width: 10px;
+  height: 20px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: rgb(41, 44, 52);
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: rgb(37, 37, 38);
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+
 :root {
   --main-font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas,
     Liberation Mono, monospace;
@@ -18,6 +39,7 @@
 body {
   background: rgb(41, 44, 52);
   font-family: 'Poppins', sans-serif;
+  overflow-x: hidden;
 }
 
 .tab {
@@ -58,7 +80,7 @@ body {
 }
 
 .editor {
-  position: fixed;
+  position: relative;
   margin-left: 200px;
   width: 100%;
   height: 100%;
@@ -176,3 +198,18 @@ body {
 .themes {
   color: rgb(37, 37, 38);
 }
+
+.name,
+.hover-name {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.name {
+  max-width: 200px;
+}
+
+.hover-name {
+  max-width: 130px;
+}

package/dist/assets/index-5c2f5f84.css

@@ -1 +0,0 @@
-@import"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap";@import"https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css";@import"https://unpkg.com/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css";*{margin:0;padding:0;box-sizing:border-box}:root{--main-font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace}body{background:rgb(41,44,52);font-family:Poppins,sans-serif}.tab{width:max-content;height:30px;background:rgb(45,45,45);text-align:center;color:#fff;font-family:var(--main-font-family);justify-content:center;align-items:center;display:flex;padding-left:10px;padding-right:10px;border-top-left-radius:10px;border-top-right-radius:10px;margin-top:5px;margin-left:2px;margin-right:2px;cursor:pointer}.tab.active{background-color:#292c34}.tab-close{display:flex;cursor:pointer;margin-left:5px;justify-content:center;align-items:center}.tab-close:hover{border-radius:30%;background-color:#252526}.editor{position:fixed;margin-left:200px;width:100%;height:100%;top:30px;bottom:0;background-color:#292c34;color:#fff;font-family:var(--main-font-family)}.tab-list{position:fixed;display:flex;flex-direction:row;top:0;left:200px;height:35px;width:100%;background:rgb(37,37,38);z-index:100;transition:all .5s ease}.bottom-bar{position:absolute;bottom:0;left:0;height:20px;width:100%;background:rgb(45,45,45);z-index:100;transition:all .5s ease}.sidebar{position:fixed;top:0;left:0;height:100%;width:200px;background:rgb(54,65,89);z-index:100;transition:all .5s ease}.link-name{margin-top:30px;margin-left:10px;color:#9aa0ac;font-size:12px;text-decoration:none}.file{display:flex;flex-direction:row;align-items:center;justify-content:left;width:180px;cursor:pointer;margin-left:10px;color:#dbdde1;border-radius:5px}.full-Box{width:inherit;height:inherit;padding:7px;display:flex;flex-direction:row;align-items:center;justify-content:space-between}.utilities{justify-content:right;margin-right:3px}.noUtils{display:none}.settings{position:absolute;bottom:0;height:30px;width:180px;z-index:100;color:#dbdde1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:14px 0;margin:10px;border-radius:5px}.file:hover,.settings:hover{background-color:#4a5469}.newBTN{justify-content:right;margin-right:10px;cursor:pointer}.themes{color:#252526}

package/dist/vite.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>