vzcode 0.2.1 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1 @@
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{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:130px}
Binary file
package/dist/index.html CHANGED
@@ -2,11 +2,10 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta charset="UTF-8" />
5
- <link rel="icon" type="image/svg+xml" href="/vite.svg" />
6
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
- <title>Vite + React</title>
8
- <script type="module" crossorigin src="/assets/index-5e86a45f.js"></script>
9
- <link rel="stylesheet" href="/assets/index-5c2f5f84.css">
6
+ <title>VZCode</title>
7
+ <script type="module" crossorigin src="/assets/index-4694dca8.js"></script>
8
+ <link rel="stylesheet" href="/assets/index-58524f84.css">
10
9
  </head>
11
10
  <body>
12
11
  <div id="root"></div>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vzcode",
3
- "version": "0.2.1",
3
+ "version": "0.3.0",
4
4
  "description": "Multiplayer code editor system",
5
5
  "main": "index.js",
6
6
  "type": "module",
package/src/App.jsx CHANGED
@@ -230,7 +230,6 @@ function App() {
230
230
  </div>
231
231
  ))}
232
232
  </div>
233
- <div className="bottom-bar"></div>
234
233
  <div className="sidebar show">
235
234
  <div className="nav-links">
236
235
  <div className="show-menu">
@@ -269,7 +268,9 @@ function App() {
269
268
  setUtils(null);
270
269
  }}
271
270
  >
272
- <div className="name">{data[key].name}</div>
271
+ <div className={utils === key ? 'name' : ''}>
272
+ {data[key].name}
273
+ </div>
273
274
  <div className={utils === key ? 'utils' : 'noUtils'}>
274
275
  <i
275
276
  className="bx bxs-edit utilities"
package/src/settings.jsx CHANGED
@@ -74,17 +74,42 @@ const themes = [
74
74
  { value: 'zenburn', label: 'zenburn' },
75
75
  ];
76
76
 
77
+ const saveTimes = [
78
+ { value: 1, label: '1 second' },
79
+ { value: 5, label: '5 seconds' },
80
+ { value: 10, label: '10 seconds' },
81
+ { value: 30, label: '30 seconds' },
82
+ ];
83
+
77
84
  export const Settings = ({ show, onClose, setTheme }) => {
78
85
  const handleChange = useCallback((selectedOption) => {
79
86
  setTheme(selectedOption.value);
80
87
  }, []);
81
88
 
89
+ const handleSaveTimeChange = useCallback((selectedOption) => {
90
+ const time = [{ value: selectedOption.value }];
91
+ fetch('/saveTime', {
92
+ method: 'POST',
93
+ headers: {
94
+ 'Content-Type': 'application/json',
95
+ },
96
+ body: JSON.stringify(time),
97
+ });
98
+ }, []);
99
+
82
100
  return show ? (
83
101
  <Modal show={show} onHide={onClose} animation={false}>
84
102
  <Modal.Header closeButton>
85
103
  <Modal.Title>Settings</Modal.Title>
86
104
  </Modal.Header>
87
105
  <Modal.Body>
106
+ <Form.Group className="mb-3" controlId="formFork">
107
+ <Form.Label>Username</Form.Label>
108
+ <Form.Control type="text" placeholder="Enter username" />
109
+ <Form.Text className="text-muted">
110
+ Enter a username to be displayed on your cursor
111
+ </Form.Text>
112
+ </Form.Group>
88
113
  <Form.Group className="mb-3" controlId="formFork">
89
114
  <Form.Label>Theme</Form.Label>
90
115
  <Select
@@ -96,6 +121,15 @@ export const Settings = ({ show, onClose, setTheme }) => {
96
121
  Select a color theme for the editor
97
122
  </Form.Text>
98
123
  </Form.Group>
124
+ <Form.Group className="mb-3" controlId="formFork">
125
+ <Form.Label>Auto-Save Time</Form.Label>
126
+ <Select
127
+ classvalue="themes"
128
+ options={saveTimes}
129
+ onChange={handleSaveTimeChange}
130
+ />
131
+ <Form.Text className="text-muted">Select an auto save time</Form.Text>
132
+ </Form.Group>
99
133
  </Modal.Body>
100
134
  <Modal.Footer>
101
135
  <Button variant="primary" onClick={onClose}>
package/src/style.css CHANGED
@@ -10,6 +10,27 @@
10
10
  box-sizing: border-box;
11
11
  }
12
12
 
13
+ /* width */
14
+ ::-webkit-scrollbar {
15
+ width: 10px;
16
+ height: 20px;
17
+ }
18
+
19
+ /* Track */
20
+ ::-webkit-scrollbar-track {
21
+ background: rgb(41, 44, 52);
22
+ }
23
+
24
+ /* Handle */
25
+ ::-webkit-scrollbar-thumb {
26
+ background: rgb(37, 37, 38);
27
+ }
28
+
29
+ /* Handle on hover */
30
+ ::-webkit-scrollbar-thumb:hover {
31
+ background: #555;
32
+ }
33
+
13
34
  :root {
14
35
  --main-font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas,
15
36
  Liberation Mono, monospace;
@@ -18,6 +39,7 @@
18
39
  body {
19
40
  background: rgb(41, 44, 52);
20
41
  font-family: 'Poppins', sans-serif;
42
+ overflow-x: hidden;
21
43
  }
22
44
 
23
45
  .tab {
@@ -58,7 +80,7 @@ body {
58
80
  }
59
81
 
60
82
  .editor {
61
- position: fixed;
83
+ position: relative;
62
84
  margin-left: 200px;
63
85
  width: 100%;
64
86
  height: 100%;
@@ -176,3 +198,10 @@ body {
176
198
  .themes {
177
199
  color: rgb(37, 37, 38);
178
200
  }
201
+
202
+ .name {
203
+ text-overflow: ellipsis;
204
+ white-space: nowrap;
205
+ overflow: hidden;
206
+ max-width: 130px;
207
+ }
@@ -1 +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}: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 DELETED
@@ -1 +0,0 @@
1
- <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>