Compare commits

...

20 Commits

Author SHA1 Message Date
Raven Scott
2fa431886c make window controls look better, move app name to the right side 2024-06-09 01:55:39 -04:00
Raven Scott
27f555d267 Setting force window default size, min size and adding real window buttons 2024-06-09 01:27:42 -04:00
Raven Scott
148f79ed13 Actually fixing the scrollbar issue and styling the chat scrollbar 2024-06-09 00:58:14 -04:00
Raven Scott
d6f14c3062 removing overflow-y from css to remove scrollbar 2024-06-09 00:50:03 -04:00
Raven Scott
34b771bea9 Removing imports that are no longer needed 2024-06-09 00:00:11 -04:00
Raven Scott
6d469dd0fd move storage into subdir 2024-06-08 23:49:34 -04:00
Raven Scott
4e961aebb7 Update CSS layout and Syles 2024-06-08 20:38:18 -04:00
4cc087fae2 delete ai command from repo 2024-06-08 23:08:39 +00:00
Raven Scott
d26c025073 update gitignore 2024-06-08 19:07:31 -04:00
Raven Scott
a4f89be654 Merge branch 'main' of git.ssh.surf:snxraven/LinkUp-P2P-Chat 2024-06-08 19:07:04 -04:00
Raven Scott
e1adede7c3 update gitignore 2024-06-08 19:06:25 -04:00
cc654112b2 Merge pull request 'Some more changed to the bot structure' (#2) from MiTask/LinkUp-P2P-Chat:main into main
Reviewed-on: snxraven/LinkUp-P2P-Chat#2
2024-06-08 21:11:17 +00:00
Raven Scott
9461368c02 Update port range 2024-06-08 17:08:30 -04:00
Raven Scott
302589e97e Bug Fix: Allowing clients to have different ServePorts per client and storages per client 2024-06-08 16:48:10 -04:00
Raven Scott
736a3a5e70 Merge branch 'main' of git.ssh.surf:snxraven/LinkUp-P2P-Chat 2024-06-08 16:47:46 -04:00
Raven Scott
7855689289 Bug Fix: Allowing clients to have different ServePorts per client and storages per client 2024-06-08 16:46:53 -04:00
Raven Scott
8dbaa629d2 Revert "Bug Fix: Allowing clients to have different ServePorts per client and storages per client"
This reverts commit b1271ceb82.
2024-06-08 16:46:36 -04:00
Raven Scott
b1271ceb82 Bug Fix: Allowing clients to have different ServePorts per client and storages per client 2024-06-08 16:46:29 -04:00
Raven Scott
5931d68a29 Revert "Bug Fix: Allowing clients to have different ServePorts per client and storages per client"
This reverts commit 5f8817a2f2.
2024-06-08 16:45:46 -04:00
Raven Scott
5f8817a2f2 Bug Fix: Allowing clients to have different ServePorts per client and storages per client 2024-06-08 16:45:15 -04:00
5 changed files with 194 additions and 139 deletions

4
.gitignore vendored
View File

@ -1,5 +1,7 @@
node_modules node_modules
package-lock.json package-lock.json
shared-storage shared-storage
storage_*
storage storage
chatBot/.env chatBot/.env
chatBot/commands/ai.js

17
app.js
View File

@ -2,13 +2,12 @@ import Hyperswarm from 'hyperswarm';
import crypto from 'hypercore-crypto'; import crypto from 'hypercore-crypto';
import b4a from 'b4a'; import b4a from 'b4a';
import ServeDrive from 'serve-drive'; import ServeDrive from 'serve-drive';
import Localdrive from 'localdrive';
import fs from 'fs';
import Hyperdrive from 'hyperdrive'; import Hyperdrive from 'hyperdrive';
import Corestore from 'corestore'; import Corestore from 'corestore';
import { EventEmitter } from 'events'; import { EventEmitter } from 'events';
const store = new Corestore('./storage'); const storagePath = `./storage/storage_${Date.now()}_${Math.random().toString(36).substring(2, 15)}`;
const store = new Corestore(storagePath);
const drive = new Hyperdrive(store); const drive = new Hyperdrive(store);
await drive.ready(); await drive.ready();
@ -21,10 +20,18 @@ let peerCount = 0;
let currentRoom = null; let currentRoom = null;
const eventEmitter = new EventEmitter(); const eventEmitter = new EventEmitter();
// Define servePort at the top level
let servePort;
// Function to get a random port between 1337 and 2223
function getRandomPort() {
return Math.floor(Math.random() * (65535 - 49152 + 1)) + 49152;
}
async function initialize() { async function initialize() {
swarm = new Hyperswarm(); swarm = new Hyperswarm();
const servePort = 1337; servePort = getRandomPort();
const serve = new ServeDrive({ port: servePort, get: ({ key, filename, version }) => drive }); const serve = new ServeDrive({ port: servePort, get: ({ key, filename, version }) => drive });
await serve.ready(); await serve.ready();
console.log('Listening on http://localhost:' + serve.address().port); console.log('Listening on http://localhost:' + serve.address().port);
@ -129,7 +136,7 @@ function registerUser(e) {
reader.onload = async (event) => { reader.onload = async (event) => {
const buffer = new Uint8Array(event.target.result); const buffer = new Uint8Array(event.target.result);
await drive.put(`/icons/${regUsername}.png`, buffer); await drive.put(`/icons/${regUsername}.png`, buffer);
userAvatar = `http://localhost:1337/icons/${regUsername}.png`; // Set the correct URL userAvatar = `http://localhost:${servePort}/icons/${regUsername}.png`; // Set the correct URL
registeredUsers[regUsername] = userAvatar; registeredUsers[regUsername] = userAvatar;
localStorage.setItem('registeredUsers', JSON.stringify(registeredUsers)); localStorage.setItem('registeredUsers', JSON.stringify(registeredUsers));
continueRegistration(regUsername); continueRegistration(regUsername);

View File

@ -10,12 +10,8 @@
</head> </head>
<body> <body>
<header> <header>
<div>LinkUp</div> <pear-ctrl></pear-ctrl>
<div class="window-controls"> <div id="linkup-text">LinkUp</div>
<button id="minimize-button">-</button>
<button id="maximize-button">+</button>
<button id="close-button">x</button>
</div>
</header> </header>
<main> <main>
<div id="sidebar"> <div id="sidebar">

View File

@ -7,8 +7,10 @@
"type": "desktop", "type": "desktop",
"gui": { "gui": {
"backgroundColor": "#1F2430", "backgroundColor": "#1F2430",
"height": 540, "height": 547,
"width": 720 "minWidth": 955,
"minHeight": 547,
"width": 955
} }
}, },
"license": "Apache-2.0", "license": "Apache-2.0",

298
style.css
View File

@ -12,49 +12,131 @@ body {
transition: background-color 0.3s ease, color 0.3s ease; transition: background-color 0.3s ease, color 0.3s ease;
} }
#messages-container { pear-ctrl[data-platform="darwin"] { float: right; margin-top: 4px; }
height: 45vh; /* Adjust as needed */
overflow-y: auto;
}
/* body { pear-ctrl {
margin-top: 9px;
margin-left: 9px;
position: absolute;
}
pear-ctrl:after {
content: '';
display: block;
height: 1.8rem;
position: fixed;
z-index: -1;
left: 0;
top: 0;
width: 100%;
background-color: #B0D94413;
filter: drop-shadow(2px 10px 6px #888);
}
main {
display: flex; display: flex;
} */ flex: 1;
overflow: hidden;
#sidebar { /* Ensure no overflow in main */
}
#sidebar {
width: 200px; width: 200px;
background-color: #2f3136; background-color: #2f3136;
color: white; color: white;
height: 100vh; height: 100%;
padding: 10px; padding: 10px;
box-sizing: border-box; box-sizing: border-box;
} }
#room-list { #content {
list-style: none;
padding: 0;
margin-bottom: 20px;
}
#room-list li {
padding: 10px;
cursor: pointer;
margin-bottom: 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#room-list li:hover {
background-color: #40444b;
}
#content {
flex: 1; flex: 1;
display: flex;
flex-direction: column;
height: 100%;
padding: 10px; padding: 10px;
} }
#sidebar button { #register,
#setup,
#chat {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 2rem;
background-color: #1f1f1f;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
#chat {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
padding: 1rem;
background-color: #1e1e1e;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
width: 100%;
}
#messages-container {
flex: 1;
overflow-y: auto;
/* Allow vertical scrolling */
overflow-x: hidden;
/* Hide horizontal scrolling */
width: 100%;
}
#messages-container::-webkit-scrollbar {
width: 8px;
/* Set the width of the scrollbar */
}
#messages-container::-webkit-scrollbar-thumb {
background-color: #b0d944;
/* Set the color of the scrollbar thumb */
border-radius: 10px;
/* Round the corners of the scrollbar thumb */
}
#messages-container::-webkit-scrollbar-track {
background: #2e2e2e;
/* Set the color of the scrollbar track */
}
#message-form {
display: flex;
margin-top: 1rem;
margin-right: 1rem;
width: 100%;
}
#message {
flex: 1;
margin-right: 0.5rem;
padding-right: 0.5rem;
height: 1.5rem;
/* Initial single line height */
overflow-y: hidden;
/* Hide scrollbar */
}
#message:focus {
height: auto;
/* Allow the textarea to grow dynamically when focused */
}
#message:empty {
height: 1.5rem;
/* Ensure single line height when empty */
}
#sidebar button {
width: 100%; width: 100%;
padding: 10px; padding: 10px;
margin-bottom: 10px; margin-bottom: 10px;
@ -64,13 +146,13 @@ body {
color: white; color: white;
font-size: 14px; font-size: 14px;
border-radius: 5px; border-radius: 5px;
} }
#sidebar button:hover { #sidebar button:hover {
background-color: #5b6eae; background-color: #5b6eae;
} }
#remove-room-btn { #remove-room-btn {
margin-top: 10px; margin-top: 10px;
padding: 10px; padding: 10px;
background-color: #f04747; background-color: #f04747;
@ -78,21 +160,20 @@ body {
color: white; color: white;
cursor: pointer; cursor: pointer;
border-radius: 5px; border-radius: 5px;
} }
#remove-room-btn:hover { #remove-room-btn:hover {
background-color: #c03535; background-color: #c03535;
} }
.hidden { .hidden {
display: none; display: none;
} }
/* Header styles */ /* Header styles */
header { header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center;
padding: 1rem; padding: 1rem;
background-color: #1f1f1f; background-color: #1f1f1f;
color: #fff; color: #fff;
@ -101,9 +182,12 @@ header {
-webkit-app-region: drag; -webkit-app-region: drag;
} }
#linkup-text {
margin-left: auto;
}
.window-controls { .window-controls {
display: flex; display: flex;
align-items: center;
-webkit-app-region: no-drag; -webkit-app-region: no-drag;
} }
@ -130,22 +214,28 @@ textarea {
border: 1px solid #b0d944; border: 1px solid #b0d944;
background-color: #333; background-color: #333;
color: #b0d944; color: #b0d944;
padding: 0.75rem; padding: 0.5rem;
/* Reduced padding */
font-family: 'Roboto Mono', monospace; font-family: 'Roboto Mono', monospace;
font-size: 1rem; font-size: 1rem;
line-height: 1.5rem; line-height: 1.25rem;
/* Adjusted line height */
border-radius: 4px; border-radius: 4px;
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
resize: none; /* Prevent resizing */ resize: none;
overflow-y: hidden; /* Hide scrollbar */ /* Prevent resizing */
overflow-y: hidden;
/* Hide scrollbar */
} }
textarea { textarea {
height: auto; /* Allow the textarea to grow dynamically */ height: auto;
/* Allow the textarea to grow dynamically */
} }
textarea:focus { textarea:focus {
outline: none; /* Remove focus outline */ outline: none;
/* Remove focus outline */
} }
textarea::placeholder { textarea::placeholder {
@ -204,6 +294,7 @@ main {
} }
#header { #header {
width: 100%;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
@ -229,9 +320,19 @@ main {
#details { #details {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center;
padding: 1rem; padding: 1rem;
background-color: #2b2b2b; background-color: #2b2b2b;
border-radius: 4px; border-radius: 4px;
width: 100%;
box-sizing: border-box;
/* Added to ensure box model includes padding */
}
#details>div {
display: flex;
flex-direction: column;
/* Allow peers count to stack */
} }
#submit-button { #submit-button {
@ -242,17 +343,20 @@ main {
flex: 1; flex: 1;
min-height: 200px; min-height: 200px;
overflow-y: auto; overflow-y: auto;
padding: 1rem; padding: 0.5rem;
/* Reduced padding */
background-color: #262626; background-color: #262626;
border-radius: 4px; border-radius: 4px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%;
} }
#message-form { #message-form {
display: flex; display: flex;
margin-top: 1rem; margin-top: 1rem;
margin-right: 1rem; margin-right: 1rem;
width: 100%;
} }
#message { #message {
@ -282,14 +386,18 @@ main {
.message { .message {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 1rem; margin-bottom: 0.5rem;
/* Reduced margin */
} }
.message img { .message img {
width: 40px; width: 32px;
height: 40px; /* Reduced size */
height: 32px;
/* Reduced size */
border-radius: 50%; border-radius: 50%;
margin-right: 0.75rem; margin-right: 0.5rem;
/* Reduced margin */
border: 2px solid #b0d944; border: 2px solid #b0d944;
} }
@ -297,13 +405,17 @@ main {
max-width: 70%; max-width: 70%;
background-color: #2e2e2e; background-color: #2e2e2e;
padding: 0.5rem; padding: 0.5rem;
border-radius: 10px; /* Reduced padding */
border-radius: 8px;
/* Reduced border radius */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
} }
.message-header { .message-header {
font-weight: bold; font-weight: bold;
color: #b0d944; color: #b0d944;
font-size: 0.9rem;
/* Reduced font size */
} }
.message-time { .message-time {
@ -311,67 +423,3 @@ main {
font-size: 0.75rem; font-size: 0.75rem;
margin-left: 0.5rem; margin-left: 0.5rem;
} }
/* Button and input styles */
button,
input,
textarea {
border: 1px solid #b0d944;
background-color: #333;
color: #b0d944;
padding: 0.75rem;
font-family: 'Roboto Mono', monospace;
font-size: 1rem;
line-height: 1.5rem;
border-radius: 4px;
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
resize: none; /* Prevent resizing */
overflow-y: hidden; /* Hide scrollbar */
}
textarea {
height: auto; /* Allow the textarea to grow dynamically */
}
textarea:focus {
outline: none; /* Remove focus outline */
}
textarea::placeholder {
color: #a0a0a0;
}
/* Chat container styles */
#chat {
display: flex;
flex-direction: column;
flex: 1;
width: 100%;
padding: 1rem;
background-color: #1e1e1e;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
overflow: hidden;
}
#message-form {
display: flex;
margin-top: 1rem;
margin-right: 1rem;
}
#message {
flex: 1;
margin-right: 0.5rem;
padding-right: 0.5rem;
height: 1.5rem; /* Initial single line height */
overflow-y: hidden; /* Hide scrollbar */
}
#message:focus {
height: auto; /* Allow the textarea to grow dynamically when focused */
}
#message:empty {
height: 1.5rem; /* Ensure single line height when empty */
}