diff --git a/package-lock.json b/package-lock.json index 8533f33..9b7b8c3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,6 +14,7 @@ "socket.io": "^4.7.4", "socket.io-client": "^4.7.4", "svelte-routing": "^2.12.0", + "svelte-select": "^5.8.3", "websocket": "^1.0.34", "ws": "^8.16.0" }, @@ -648,7 +649,6 @@ "version": "1.6.0", "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.0.tgz", "integrity": "sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==", - "dev": true, "dependencies": { "@floating-ui/utils": "^0.2.1" } @@ -657,7 +657,6 @@ "version": "1.6.1", "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.1.tgz", "integrity": "sha512-iA8qE43/H5iGozC3W0YSnVSW42Vh522yyM1gj+BqRwVsTNOyr231PsXDaV04yT39PsO0QL2QpbI/M0ZaLUQgRQ==", - "dev": true, "dependencies": { "@floating-ui/core": "^1.6.0", "@floating-ui/utils": "^0.2.1" @@ -666,8 +665,7 @@ "node_modules/@floating-ui/utils": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz", - "integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==", - "dev": true + "integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==" }, "node_modules/@isaacs/cliui": { "version": "8.0.2", @@ -3428,6 +3426,15 @@ "node": ">=16" } }, + "node_modules/svelte-floating-ui": { + "version": "1.5.8", + "resolved": "https://registry.npmjs.org/svelte-floating-ui/-/svelte-floating-ui-1.5.8.tgz", + "integrity": "sha512-dVvJhZ2bT+kQDHlE4Lep8t+sgEc0XD96fXLzAi2DDI2bsaegBbClxXVNMma0C2WsG+n9GJSYx292dTvA8CYRtw==", + "dependencies": { + "@floating-ui/core": "^1.5.0", + "@floating-ui/dom": "^1.5.3" + } + }, "node_modules/svelte-hmr": { "version": "0.15.3", "resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.15.3.tgz", @@ -3508,6 +3515,14 @@ "resolved": "https://registry.npmjs.org/svelte-routing/-/svelte-routing-2.12.0.tgz", "integrity": "sha512-6i4Mncy4P2b7gD7+BOT9JzQvrfGfGXqFra8VXYU5//bpn6AzJ0PLEhH1E/KwY2AxleOiS/8Nm37MGuic2kn15A==" }, + "node_modules/svelte-select": { + "version": "5.8.3", + "resolved": "https://registry.npmjs.org/svelte-select/-/svelte-select-5.8.3.tgz", + "integrity": "sha512-nQsvflWmTCOZjssdrNptzfD1Ok45hHVMTL5IHay5DINk7dfu5Er+8KsVJnZMJdSircqtR0YlT4YkCFlxOUhVPA==", + "dependencies": { + "svelte-floating-ui": "1.5.8" + } + }, "node_modules/svelte-time": { "version": "0.8.2", "resolved": "https://registry.npmjs.org/svelte-time/-/svelte-time-0.8.2.tgz", diff --git a/package.json b/package.json index 292a3c9..2ea144b 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,7 @@ "socket.io": "^4.7.4", "socket.io-client": "^4.7.4", "svelte-routing": "^2.12.0", + "svelte-select": "^5.8.3", "websocket": "^1.0.34", "ws": "^8.16.0" } diff --git a/src/app.css b/src/app.css index 3e6c14a..43f6985 100644 --- a/src/app.css +++ b/src/app.css @@ -1,7 +1,3 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; - @font-face { font-family: 'Comfortaa'; src: url('./fonts/Comfortaa-VariableFont_wght.ttf') format('truetype'); @@ -9,6 +5,5 @@ font-style: normal; font-stretch: normal; } -:root{ - --fontColor: #FFFFFF; -} \ No newline at end of file + + \ No newline at end of file diff --git a/src/app.html b/src/app.html index 724a781..b0aec37 100644 --- a/src/app.html +++ b/src/app.html @@ -9,27 +9,118 @@
%sveltekit.body%
- - + html,body{ + height: 100%; + width: 100%; + + margin: 0; + padding: 0; + background-color: var(--bg); + } + + * { + font-family: Comfortaa; + margin: 0; + } + + h1,h2,h3,h4,h5,p{ + color:var(--fontColor); + cursor: default; + } + + select { + min-width: 50px; + width: 8rem; + display: flex; + justify-content: center; + text-align: center; + font-size: 24px; + font-weight: 300; + overflow: auto; + } + + option { + background-color: var(--bg); + border: 0; + } + + button{ + text-shadow: 0 0 20px white; + font-size: 36px; + background: transparent; + border: 0; + height: 10%; + } + button, + select, + option { + cursor: pointer; + } + + h1, + h3, + input, + select, + button, + textarea { + color: var(--fontColor); + } + h1 { + display: flex; + justify-content: center; + align-items: center; + text-shadow: 0 0 20px white; + font-size: 48px; + height: 10%; + + } + h3 { + font-weight: 100; + font-size: 24px; + } + p { + font-size: 20px; + font-weight: 100; + } + + .noise { + position: relative; + width: 100%; + height: 100%; + display: flex; + box-shadow: 4px 4px 11px rgba(#000000, 0.4); + border-radius: 15px; + } + + .noise::before { + content: ''; + background-image: url(../noise.gif); + opacity: 0.011; + width: 100%; + height: 100%; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + pointer-events: none; + border-radius: 15px; + } + + diff --git a/src/lib/chat.js b/src/lib/chat.js new file mode 100644 index 0000000..2775725 --- /dev/null +++ b/src/lib/chat.js @@ -0,0 +1,85 @@ +import { FlyControls } from "three/examples/jsm/Addons.js"; + + export async function getLastMessages(){ + + const response = await fetch('http://localhost:8000/api/chat/get_some_messages/2?messages_loaded=0&messages_to_get=14', + { + method:'GET', + credentials:'include' + }) + + if(!response.ok) + { + console.log(response.status) + } + + if(response.ok) + { + let msgMassive = await response.json(); + let localTime + for(let i = 0; i< msgMassive.length;i++){ + localTime = new Date(msgMassive[i].created_at) + + msgMassive[i].created_at = localTime + + } + msgMassive.reverse(); + console.log(msgMassive) + return msgMassive + } + } + + export async function MessagePicToUrl(messagePic){ + + console.log(messagePic) + const DataForm = new FormData(); + DataForm.append('file', messagePic) + + const respone = await fetch('http://localhost:8000/api/images/upload_image', + { + method:"POST", + + body:DataForm + }) + + if(!respone.ok) + console.log("ошибка", respone.status) + + + if(respone.ok){ + const data = await respone.json(); + console.log("картинка принята") + return data.image_url; + + } + } + + export async function getAllChats(){ + + const response = await fetch(`http://localhost:8000/api/chat`, + { + method:"GET", + credentials:'include' + }) + if(response.ok){ + return await response.json(); + } + else{ + console.log(response.status) + } + } + + export async function getPinnedMsg(ID){ + + const response = await fetch(`http://localhost:8000/api/chat/pinned_messages/${ID}`,{ + method:"GET", + credentials:'include' + }) + + if(response.ok){ + return await response.json(); + } + else{ + console.log(response.status) + } + } \ No newline at end of file diff --git a/src/lib/login.js b/src/lib/login.js new file mode 100644 index 0000000..896d776 --- /dev/null +++ b/src/lib/login.js @@ -0,0 +1,29 @@ +export async function handleLogin(username, password) { + + const response = await fetch('http://localhost:8000/api/users/login', { + method: 'POST', + credentials:'include', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify + ({ + email_or_username: username, + password: password + }) + + }) + + if(response.status === 200) + { + window.location.href = '/chatPage' + return "" + } + else if(response.status === 401) + { + return "Неправильный логин или пароль" + } + else{ + console.log(response.status) + } + } \ No newline at end of file diff --git a/src/lib/register.js b/src/lib/register.js new file mode 100644 index 0000000..7932c3b --- /dev/null +++ b/src/lib/register.js @@ -0,0 +1,100 @@ +export async function checkName(username) { + const response = await fetch('http://localhost:8000/api/users/check_existing_username', { + method:'POST', + credentials:"include", + headers:{ + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ + "username": username + }) + }) + if(response.status === 200){ + return "" + } + else if(response.status === 409){ + let data = "ник занят" + return data + } + else if(response.status === 422){ + let data = await response.json(); + return data + } + else{ + console.log(response.status) + } +} + +export async function checkMail(mail) { + const response = await fetch('http://localhost:8000/api/users/check_existing_email', { + method:'POST', + credentials:"include", + headers:{ + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ + "email": mail + }) + }) + if(response.status === 200){ + return "" + } + + else if(response.status === 409){ + return "почта занята" + } + + else if(response.status === 422){ + return "не похоже на почту" + } +} + +export async function VerificationEmail(Code){ + const response = await fetch('http://localhost:8000/api/users/email_verification',{ + method:'POST', + credentials:'include', + headers:{ + 'Content-Type' : 'application/json' + }, + body: JSON.stringify({ + "user_code": Code + }) + }) + + if(response.status === 200){ + window.location.href = '/' + return "" + } + else if(response.status === 422){ + return "Неправильный код" + } +} + + + export async function handleRegister(username,password,email,date_of_birth){ + const response = await fetch('http://localhost:8000/api/users/register',{ + method:'POST', + credentials:"include", + headers:{ + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ + "email": email, + "username": username, + "password": password, + "date_of_birth": date_of_birth + }) + }) + + if(response.status === 201){ + const data = await response.json(); + console.log(data) + return data; + } + else if(response.status === 422){ + console.log(response.status) + let data = "Validation Error" + return data + } + + } \ No newline at end of file diff --git a/src/lib/userFunction.js b/src/lib/userFunction.js index f0af798..08f63d0 100644 --- a/src/lib/userFunction.js +++ b/src/lib/userFunction.js @@ -13,132 +13,7 @@ export async function UserCheck(){ else{ const data = await response.json(); - return - } - } - - export async function checkName(username) { - const response = await fetch('http://localhost:8000/api/users/check_existing_username', { - method:'POST', - credentials:"include", - headers:{ - 'Content-Type': 'application/json' - }, - body: JSON.stringify({ - "username": username - }) - }) - if(response.status === 200){ - } - else if(response.status === 409){ - let data = "ник занят" - return data - } - else if(response.status === 422){ - let data = await response.json(); - return data - } -} - -export async function checkMail(mail) { - const response = await fetch('http://localhost:8000/api/users/check_existing_email', { - method:'POST', - credentials:"include", - headers:{ - 'Content-Type': 'application/json' - }, - body: JSON.stringify({ - "email": mail - }) - }) - if(response.status === 200){ - } - else if(response.status === 409){ - let data = "почта занята" - return data - } - else if(response.status === 422){ - let data = "не похоже на почту" - return data - } -} - -export async function VerificationEmail(Code){ - const response = await fetch('http://localhost:8000/api/users/email_verification',{ - method:'POST', - credentials:'include', - headers:{ - 'Content-Type' : 'application/json' - }, - body: JSON.stringify({ - "user_code": Code - }) - }) - - if(response.status === 200){ - window.location.href = '/' - return "" - } - else if(response.status === 422){ - return "Неправильный код" - } -} - - - export async function handleRegister(username,password,email,date_of_birth){ - const response = await fetch('http://localhost:8000/api/users/register',{ - method:'POST', - credentials:"include", - headers:{ - 'Content-Type': 'application/json' - }, - body: JSON.stringify({ - "email": email, - "username": username, - "password": password, - "date_of_birth": date_of_birth - }) - }) - - if(response.status === 201){ - const data = await response.json(); - console.log(data) - return data; - } - else if(response.status === 422){ - console.log(response.status) - let data = "Validation Error" - return data - } - - } - - export async function handleLogin(username, password) { - - const response = await fetch('http://localhost:8000/api/users/login', { - method: 'POST', - credentials:'include', - headers: { - 'Content-Type': 'application/json', - }, - body: JSON.stringify - ({ - email_or_username: username, - password: password - }) - - }) - - if(response.status === 200) - { - window.location.href = '/chatPage' - } - else if(response.status === 401) - { - return "Неправильный логин или пароль" - } - else{ - console.log(response.status) + return data } } @@ -163,57 +38,4 @@ export async function VerificationEmail(Code){ console.error('Ошибка при выполнении выхода:', error.message); } } - - export async function getLastMessages(){ - - const response = await fetch('http://localhost:8000/api/chat/get_some_messages/2?messages_loaded=0&messages_to_get=14', - { - method:'GET', - credentials:'include' - }) - - if(!response.ok) - { - console.log(response.status) - } - - if(response.ok) - { - let msgMassive = await response.json(); - let localTime - for(let i = 0; i< msgMassive.length;i++){ - localTime = new Date(msgMassive[i].created_at) - - msgMassive[i].created_at = localTime - - } - msgMassive.reverse(); - console.log(msgMassive) - return msgMassive - } - } - - export async function MessagePicToUrl(messagePic){ - - console.log(messagePic) - const DataForm = new FormData(); - DataForm.append('file', messagePic) - - const respone = await fetch('http://localhost:8000/api/images/upload_image', - { - method:"POST", - - body:DataForm - }) - - if(!respone.ok) - console.log("ошибка", respone.status) - - - if(respone.ok){ - const data = await respone.json(); - console.log("картинка принята") - return data.image_url; - - } - } \ No newline at end of file + \ No newline at end of file diff --git a/src/routes/Header.svelte b/src/routes/Header.svelte index d33df90..051c460 100644 --- a/src/routes/Header.svelte +++ b/src/routes/Header.svelte @@ -1,135 +1,137 @@ -
-
+
+
лого -

Black Phoenix

-
-
- +

BP Chat

+
+ + {#if isOpen}
-
Профиль
-
Настройки
-
-
Выйти
+ + +
{/if} +
- diff --git a/src/routes/chatPage/+page.svelte b/src/routes/chatPage/+page.svelte index 954cfe2..518b0d8 100644 --- a/src/routes/chatPage/+page.svelte +++ b/src/routes/chatPage/+page.svelte @@ -1,11 +1,12 @@ - -
-
жопа2
-
-
- {#if messages.length == 0} -
-

В этом чате еще нет сообщений.

-

Крыски, начните обсуждать киску
прям за ее спиной

+ +
+ +
+ +
+
+
+ {#each chats as chat} +
+ +

{chat.chat_name}

+
+ {/each} +
+
+
+
+
+ +
+ + {#if messages.length == 0} +
+

В этом чате еще нет сообщений.

+

Крыски, начните обсуждать
прям за ее спиной

+
+ {/if} + +
+ {#each messages as message} +
+ ава +
+

{message.username}

+
+

{message.message}

+ {#if message.image_url != null} + пикча + {/if} +
+ +
+
+ {/each} +
+ +
+ + + + +
+
+ +
+
+
+ {#if pinnedMsg.length === 0} +
+

Тут ничего нет

+

Но если ты закрепишь сообщение,
тут что то изменится

{/if} - {#each messages as message} -
- ава -
-
-

{message.username}

-
-
- -

{message.message}

- - {#if message.image_url != null} - - {/if} -
+ {#each pinnedMsg as msg} +
+

{msg.message}

+
{/each} -
+
-
- -
- - -
-
+ +

7

+

8

+

9

-
жопа4
-
жопа5
-
жопа6
-
жопа7
- diff --git a/src/routes/login/+page.svelte b/src/routes/login/+page.svelte index 5c84269..cb65f05 100644 --- a/src/routes/login/+page.svelte +++ b/src/routes/login/+page.svelte @@ -1,11 +1,9 @@