diff --git a/Docs/Vue_ensemble_transcendance.html b/docs/Vue_ensemble_transcendance.html similarity index 99% rename from Docs/Vue_ensemble_transcendance.html rename to docs/Vue_ensemble_transcendance.html index ab74b3fc..39ba9f0d 100644 --- a/Docs/Vue_ensemble_transcendance.html +++ b/docs/Vue_ensemble_transcendance.html @@ -8,4 +8,4 @@
- \ No newline at end of file + diff --git a/tests_hugo/README.md b/tests_hugo/README.md new file mode 100644 index 00000000..5a70650e --- /dev/null +++ b/tests_hugo/README.md @@ -0,0 +1,85 @@ +``` + fetch conversations + ___________________ +| _ | +| no conversation | if len == 0 +| | +| [join public] | +| | +| [start new] | +| | +|...................| +| | +|___________________| + ___________________ +| convs _ | +|___________________| if len > 0 +| | +| | +| | +| | +| | +|___________________| +| |send | +|_____________|_____| + ___________________ +| convs _ | +|_ ____________| +| .list | +| .of | +| .convs | +| | +| | +|___________________| +| |send | +|_____________|_____| + ___________________ +| [join public] _ | +| | if join_public +| .list | fetch public_conversations +| .of | +| .public | +| .convs | +| | +| | +| | +|___________________| + ___________________ +| [start new] _ | +| | if start_new +| .list | fetch friends +| .of | +| .friends | +| | +| | +| | +| | +|___________________| + ___________________ +| convs _ | +|___________________| if click_on_list_element +| .blablabla | fetch conversation(list_element) +| blablabla. | +| .bla | --server side-- +| blabla. | if conversation_exist +| bla. | return text +|___________________| else if is_allowed +| |send | return "start conv" +|_____________|_____| + +``` + +### goals : +- own messages are not sent to myself and directly printed +- i can create a room +- my messages are sent to other people in room +- i can choose in which room to send the messages + +### routes : +- https://transcendance:8080/api/v2/chat/conversations + - returns list of objects, each object contains : + - id: unique conv identification + - title: name of the conversation (name of other guy if direct message) + - + + diff --git a/tests_hugo/chat_node/index.html b/tests_hugo/chat_node/chat_client/chat.html similarity index 69% rename from tests_hugo/chat_node/index.html rename to tests_hugo/chat_node/chat_client/chat.html index d63897cf..33355042 100644 --- a/tests_hugo/chat_node/index.html +++ b/tests_hugo/chat_node/chat_client/chat.html @@ -3,6 +3,7 @@ + @@ -20,11 +21,13 @@
+
+
@@ -48,32 +51,5 @@ - - diff --git a/tests_hugo/chat_node/chat_client/chat_receive_msg.js b/tests_hugo/chat_node/chat_client/chat_receive_msg.js new file mode 100644 index 00000000..ec3fb1d2 --- /dev/null +++ b/tests_hugo/chat_node/chat_client/chat_receive_msg.js @@ -0,0 +1,20 @@ + +socket.on('chat_message', ({ data }) => { + handle_new_message(data); +}); + +const handle_new_message = (message) => { + const div_thread = document.getElementById('msg_thread'); + + console.log("received message:"); + console.log(`[${message}]`); + + div_thread.appendChild(build_new_message(message)); +} + +const build_new_message = (message) => { + const p = document.createElement("p"); + p.appendChild(document.createTextNode(message)); + return p; +} + diff --git a/tests_hugo/chat_node/chat_client/chat_submit_msg.js b/tests_hugo/chat_node/chat_client/chat_submit_msg.js new file mode 100644 index 00000000..b8bfe12a --- /dev/null +++ b/tests_hugo/chat_node/chat_client/chat_submit_msg.js @@ -0,0 +1,18 @@ + +const submit_new_message = () => { + const div_msg = document.getElementById('msg_write'); + /* + const msg = div_msg.value; + const msg = div_msg.innerText; + */ + const msg = div_msg.innerText.trim(); + div_msg.innerText = ""; + + console.log("msg:"); + console.log(`[${msg}]`); + console.log(msg.length); + + if (msg.length > 0) + socket.emit('chat_message', { data: msg }); +} + diff --git a/tests_hugo/chat_node/chat_client/style/chat.css b/tests_hugo/chat_node/chat_client/style/chat.css new file mode 100644 index 00000000..973bc703 --- /dev/null +++ b/tests_hugo/chat_node/chat_client/style/chat.css @@ -0,0 +1,113 @@ + +@import 'msg_thread.css'; +@import 'msg_write.css'; + +/** + * GRID + */ + + +/* Hide scrollbar */ +.chat_box * { + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ +} +.chat_box *::-webkit-scrollbar { + display: none; /* Chrome, Safari and Opera */ +} + +/* global settings */ +.chat_box * { + position: relative; + box-sizing: border-box; + /* Hide scrollbar for IE, Edge and Firefox */ + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ +} +.chat_box .chat_item.controls_area { grid-area: controls;} +.chat_box .chat_item.open_close { grid-area: open_close;} +.chat_box .chat_item.msg_thread { grid-area: msg_thread;} +.chat_box .chat_item.msg_write { grid-area: msg_write;} +.chat_box .chat_item.msg_send { grid-area: msg_send;} +.chat_box { + position: fixed; + bottom: 20px; + right: 20px; + display: grid; + grid: + ' controls open_close ' auto + ' msg_thread msg_thread ' 1fr + ' msg_write msg_send ' auto + / 1fr auto; + gap: 0px; + padding: 0px; + width: auto; + height: auto; + + border: 1px solid green; +} +.chat_box .chat_item * { + display: flex; +} +/* buttons settings */ +.chat_box .chat_item.button { + display: flex; + width: auto; + padding: 10px; + cursor: pointer; + outline: none; + border: none; + background-color: rgb(220, 220, 220); +} +.chat_box .chat_item.button p { + margin: auto; +} +.chat_box .chat_item.button:hover { + background-color: rgb(200, 200, 200); +} +.chat_box .chat_item.button:active { + background-color: rgb(220, 220, 220); +} +/* collapse settings */ +.chat_box .chat_item:not(.open_close) { + display: none; +} +#chat_input:checked + +.chat_box { + gap: 5px; + padding: 5px; + width: 300px; + height: 400px; +} +#chat_input:checked + +.chat_box .chat_item { + display: flex; +} +#chat_input:checked + +.chat_box .chat_item.open_close p { + display: none; +} +#chat_input:checked + +.chat_box .chat_item.open_close { + /* + */ + width: 30px; + height: 20px; + padding: 0px; + justify-self: end; + background-color: transparent; + border: none; +} +#chat_input:checked + +.chat_box .chat_item.open_close::before { + --collapse_width: 20px; + content: ""; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + height: 2px; + width: 15px; + background-color: black; +} + diff --git a/tests_hugo/chat_node/chat_client/style/msg_thread.css b/tests_hugo/chat_node/chat_client/style/msg_thread.css new file mode 100644 index 00000000..6712251b --- /dev/null +++ b/tests_hugo/chat_node/chat_client/style/msg_thread.css @@ -0,0 +1,19 @@ +.chat_box .chat_item.msg_thread { + flex-direction: column-reverse; + overflow: scroll; + border: 1px solid blue; +} + +.chat_box .chat_item .msg_box { + flex-direction: column; + width: 100%; + padding: 5px; +} + +.chat_box #msg_thread p { + white-space: pre-wrap; + margin: 5px auto 5px 0px; + padding: 5px; + border-radius: 5px; + background-color: rgb(210, 210, 210); +} diff --git a/tests_hugo/chat_node/chat_client/style/msg_write.css b/tests_hugo/chat_node/chat_client/style/msg_write.css new file mode 100644 index 00000000..d6b1a0bc --- /dev/null +++ b/tests_hugo/chat_node/chat_client/style/msg_write.css @@ -0,0 +1,20 @@ +.chat_box .chat_item .text_area { + display: block; + position: absolute; + bottom: 0px; + left: 0px; + width: 100%; + height: auto; + min-height: 100%; + max-height: 300px; + /* + resize: none; + */ + overflow-x: hidden; + overflow-y: scroll; + background-color: white; + border: 1px solid red; +} +.chat_box .chat_item .text_area div { + display: block ruby; +} diff --git a/tests_hugo/chat_node/package-lock.json b/tests_hugo/chat_node/chat_server/package-lock.json similarity index 98% rename from tests_hugo/chat_node/package-lock.json rename to tests_hugo/chat_node/chat_server/package-lock.json index 881e4e48..df39eb67 100644 --- a/tests_hugo/chat_node/package-lock.json +++ b/tests_hugo/chat_node/chat_server/package-lock.json @@ -1,10 +1,11 @@ { - "name": "chat_node", + "name": "chat_server", "lockfileVersion": 2, "requires": true, "packages": { "": { "dependencies": { + "cors": "^2.8.5", "express": "^4.18.2", "nodemon": "^2.0.20", "socket.io": "^4.5.3" @@ -48,9 +49,9 @@ } }, "node_modules/anymatch": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz", - "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==", + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", + "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==", "dependencies": { "normalize-path": "^3.0.0", "picomatch": "^2.0.4" @@ -915,9 +916,9 @@ } }, "node_modules/simple-update-notifier": { - "version": "1.0.7", - "resolved": "https://registry.npmjs.org/simple-update-notifier/-/simple-update-notifier-1.0.7.tgz", - "integrity": "sha512-BBKgR84BJQJm6WjWFMHgLVuo61FBDSj1z/xSFUIozqO6wO7ii0JxCqlIud7Enr/+LhlbNI0whErq96P2qHNWew==", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/simple-update-notifier/-/simple-update-notifier-1.1.0.tgz", + "integrity": "sha512-VpsrsJSUcJEseSbMHkrsrAVSdvVS5I96Qo1QAQ4FxQ9wXFcB+pjj7FB7/us9+GcgfW4ziHtYMc1J0PLczb55mg==", "dependencies": { "semver": "~7.0.0" }, @@ -934,16 +935,16 @@ } }, "node_modules/socket.io": { - "version": "4.5.3", - "resolved": "https://registry.npmjs.org/socket.io/-/socket.io-4.5.3.tgz", - "integrity": "sha512-zdpnnKU+H6mOp7nYRXH4GNv1ux6HL6+lHL8g7Ds7Lj8CkdK1jJK/dlwsKDculbyOHifcJ0Pr/yeXnZQ5GeFrcg==", + "version": "4.5.4", + "resolved": "https://registry.npmjs.org/socket.io/-/socket.io-4.5.4.tgz", + "integrity": "sha512-m3GC94iK9MfIEeIBfbhJs5BqFibMtkRk8ZpKwG2QwxV0m/eEhPIV4ara6XCF1LWNAus7z58RodiZlAH71U3EhQ==", "dependencies": { "accepts": "~1.3.4", "base64id": "~2.0.0", "debug": "~4.3.2", - "engine.io": "~6.2.0", + "engine.io": "~6.2.1", "socket.io-adapter": "~2.4.0", - "socket.io-parser": "~4.2.0" + "socket.io-parser": "~4.2.1" }, "engines": { "node": ">=10.0.0" @@ -1155,9 +1156,9 @@ } }, "anymatch": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz", - "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==", + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", + "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==", "requires": { "normalize-path": "^3.0.0", "picomatch": "^2.0.4" @@ -1787,9 +1788,9 @@ } }, "simple-update-notifier": { - "version": "1.0.7", - "resolved": "https://registry.npmjs.org/simple-update-notifier/-/simple-update-notifier-1.0.7.tgz", - "integrity": "sha512-BBKgR84BJQJm6WjWFMHgLVuo61FBDSj1z/xSFUIozqO6wO7ii0JxCqlIud7Enr/+LhlbNI0whErq96P2qHNWew==", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/simple-update-notifier/-/simple-update-notifier-1.1.0.tgz", + "integrity": "sha512-VpsrsJSUcJEseSbMHkrsrAVSdvVS5I96Qo1QAQ4FxQ9wXFcB+pjj7FB7/us9+GcgfW4ziHtYMc1J0PLczb55mg==", "requires": { "semver": "~7.0.0" }, @@ -1802,16 +1803,16 @@ } }, "socket.io": { - "version": "4.5.3", - "resolved": "https://registry.npmjs.org/socket.io/-/socket.io-4.5.3.tgz", - "integrity": "sha512-zdpnnKU+H6mOp7nYRXH4GNv1ux6HL6+lHL8g7Ds7Lj8CkdK1jJK/dlwsKDculbyOHifcJ0Pr/yeXnZQ5GeFrcg==", + "version": "4.5.4", + "resolved": "https://registry.npmjs.org/socket.io/-/socket.io-4.5.4.tgz", + "integrity": "sha512-m3GC94iK9MfIEeIBfbhJs5BqFibMtkRk8ZpKwG2QwxV0m/eEhPIV4ara6XCF1LWNAus7z58RodiZlAH71U3EhQ==", "requires": { "accepts": "~1.3.4", "base64id": "~2.0.0", "debug": "~4.3.2", - "engine.io": "~6.2.0", + "engine.io": "~6.2.1", "socket.io-adapter": "~2.4.0", - "socket.io-parser": "~4.2.0" + "socket.io-parser": "~4.2.1" }, "dependencies": { "debug": { diff --git a/tests_hugo/chat_node/package.json b/tests_hugo/chat_node/chat_server/package.json similarity index 82% rename from tests_hugo/chat_node/package.json rename to tests_hugo/chat_node/chat_server/package.json index 85024369..de536543 100644 --- a/tests_hugo/chat_node/package.json +++ b/tests_hugo/chat_node/chat_server/package.json @@ -1,5 +1,6 @@ { "dependencies": { + "cors": "^2.8.5", "express": "^4.18.2", "nodemon": "^2.0.20", "socket.io": "^4.5.3" diff --git a/tests_hugo/chat_node/chat_server/server.js b/tests_hugo/chat_node/chat_server/server.js new file mode 100644 index 00000000..ca1ccd87 --- /dev/null +++ b/tests_hugo/chat_node/chat_server/server.js @@ -0,0 +1,45 @@ +//let app = require('express')(); +//let server = require('http').createServer(app); +//let io = require('socket.io')(http); + +const express = require('express'); +//const cors = require('cors'); +const app = express(); +const http = require('http'); +const server = http.createServer(app); +const { Server } = require("socket.io"); +// https://socket.io/docs/v4/handling-cors/ +const io = new Server(server, { + cors: { + origin: "*" + } +}); + +// cors : https://stackoverflow.com/questions/7067966/why-doesnt-adding-cors-headers-to-an-options-route-allow-browsers-to-access-my +// https://www.npmjs.com/package/cors +//app.use(cors()); + +//app.get("/", function (req, res) { +// console.log("req.headers: "); +// console.log(req.headers); +//}) + +io.on('connection', function (socket) { + + console.log('a user is connected'); + + socket.on('disconnect', function () { + console.log('a user is disconnected'); + }) + + socket.on('chat_message', function (msg) { + console.log('message received: ' + msg); + io.emit('chat_message', msg); + }) + +}); + +server.listen(3000, function () { + console.log('server running on 3000'); +}) + diff --git a/tests_hugo/chat_node/server.js b/tests_hugo/chat_node/server.js deleted file mode 100644 index a8ea1ce2..00000000 --- a/tests_hugo/chat_node/server.js +++ /dev/null @@ -1,29 +0,0 @@ -//let app = require('express')(); -let http = require('http').Server(app); -let io = require('socket.io')(http); - -//app.get("/", function (req, res) { -// console.log("req.headers: "); -// console.log(req.headers); -// res.sendFile(__dirname + '/index.html'); -//}) - -io.on('connection', function (socket) { - - console.log('a user is connected'); - - socket.on('disconnect', function () { - console.log('a user is disconnected'); - }) - - socket.on('chat_message', function (msg) { - console.log('message received: ' + msg); - io.emit('chat_message', msg); - }) - -}); - -http.listen(3000, function () { - console.log('server running on 3000'); -}) - diff --git a/tests_hugo/js_async/async.js b/tests_hugo/js_async/async.js new file mode 100644 index 00000000..c87417f4 --- /dev/null +++ b/tests_hugo/js_async/async.js @@ -0,0 +1,133 @@ + + + +/* * * * * * * * * * * * * * * * * * * + UTILITIES +*/ + +function resolveAfter2Seconds() { + return new Promise(resolve => { + setTimeout(() => { + resolve(spent_time(ori_date) + 'lente'); + }, 2000); + }); +} +function resolveAfter1Seconds() { + return new Promise(resolve => { + setTimeout(() => { + resolve(spent_time(ori_date) + 'rapide'); + }, 1000); + }); +} +function print_time(my_date = new Date) { + let my_time = my_date.getSeconds(); + my_time += ":"; + my_time += my_date.getMilliseconds(); + return '[' + my_time + '] '; +} +function spent_time(ori_date) { + let my_date = new Date(); + + let my_seconds = my_date.getSeconds() - ori_date.getSeconds(); + if (my_seconds < 0 ) my_seconds += 60; + + let my_millis = my_date.getMilliseconds() - ori_date.getMilliseconds(); + if (my_millis < 0 ) my_millis += 1000; + + return '[' + my_seconds + ':' + my_millis + '] '; +} + + + + + + + + + + +/* * * * * * * * * * * * * * * * * * * + TESTS +/* + + async function asyncCall() { + console.log(spent_time(ori_date) + 'calling'); + const lente = await resolveAfter2Seconds(); + const rpide = await resolveAfter1Seconds(); + console.log(spent_time(ori_date) + lente); + console.log(spent_time(ori_date) + rpide); + } +// "[0:1] calling" +// "[0:4] after" +// "[3:6] [2:4] lente" +// "[3:15] [3:6] rapide" + */ + +/* + function asyncCall() { + console.log(spent_time(ori_date) + 'calling'); + const lente = resolveAfter2Seconds(); + const rpide = resolveAfter1Seconds(); + console.log(spent_time(ori_date) + lente); + console.log(spent_time(ori_date) + rpide); + } +// "[0:1] calling" +// "[0:4] [object Promise]" +// "[0:12] [object Promise]" +// "[0:19] after" + */ + +/* + function asyncCall() { + console.log(spent_time(ori_date) + 'calling'); + resolveAfter2Seconds().then(message => console.log(spent_time(ori_date) + message)) + .then(() => resolveAfter1Seconds()).then(message => console.log(spent_time(ori_date) + message)); + } +// "[0:1] calling" +// "[0:4] after" +// "[2:4] [2:4] lente" +// "[3:15] [3:15] rapide" + */ + +/* + async function asyncCall() { + console.log(spent_time(ori_date) + 'calling'); + const lente = await resolveAfter2Seconds(); + console.log(spent_time(ori_date) + 'middle'); + const rpide = await resolveAfter1Seconds(); + console.log(spent_time(ori_date) + lente); + console.log(spent_time(ori_date) + rpide); + } +// "[0:1] calling" +// "[0:2] after" +// "[2:4] middle" +// "[3:7] [2:4] lente" +// "[3:8] [3:6] rapide" + */ + +async function asyncCall() { + console.log(spent_time(ori_date) + 'calling'); + const lente = resolveAfter2Seconds(); + const rpide = resolveAfter1Seconds(); + console.log(spent_time(ori_date) + await lente); + console.log(spent_time(ori_date) + await rpide); +} +// "[0:0] calling" +// "[0:3] after" +// "[0:3] [2:4] lente" +// "[2:5] [1:3] rapide" + + + + + + +/* * * * * * * * * * * * * * * * * * * + LAUNCH TEST +*/ + +let ori_date = new Date(); +asyncCall(); + +console.log(spent_time(ori_date) + "after"); + diff --git a/tests_hugo/pure_node/myExpress.js b/tests_hugo/pure_node/myExpress.js index af662c4b..0d851233 100644 --- a/tests_hugo/pure_node/myExpress.js +++ b/tests_hugo/pure_node/myExpress.js @@ -26,7 +26,7 @@ class myServer { constructor() { this._gets = {}; this._posts = {}; - this._putss = {}; + this._puts = {}; this._deletes = {}; this._server = http.createServer((req, res) => {