diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml index e15b63a..083b490 100644 --- a/frontend/pnpm-lock.yaml +++ b/frontend/pnpm-lock.yaml @@ -214,113 +214,113 @@ packages: '@jridgewell/trace-mapping@0.3.31': resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==} - '@rollup/rollup-android-arm-eabi@4.53.4': - resolution: {integrity: sha512-PWU3Y92H4DD0bOqorEPp1Y0tbzwAurFmIYpjcObv5axGVOtcTlB0b2UKMd2echo08MgN7jO8WQZSSysvfisFSQ==} + '@rollup/rollup-android-arm-eabi@4.53.5': + resolution: {integrity: sha512-iDGS/h7D8t7tvZ1t6+WPK04KD0MwzLZrG0se1hzBjSi5fyxlsiggoJHwh18PCFNn7tG43OWb6pdZ6Y+rMlmyNQ==} cpu: [arm] os: [android] - '@rollup/rollup-android-arm64@4.53.4': - resolution: {integrity: sha512-Gw0/DuVm3rGsqhMGYkSOXXIx20cC3kTlivZeuaGt4gEgILivykNyBWxeUV5Cf2tDA2nPLah26vq3emlRrWVbng==} + '@rollup/rollup-android-arm64@4.53.5': + resolution: {integrity: sha512-wrSAViWvZHBMMlWk6EJhvg8/rjxzyEhEdgfMMjREHEq11EtJ6IP6yfcCH57YAEca2Oe3FNCE9DSTgU70EIGmVw==} cpu: [arm64] os: [android] - '@rollup/rollup-darwin-arm64@4.53.4': - resolution: {integrity: sha512-+w06QvXsgzKwdVg5qRLZpTHh1bigHZIqoIUPtiqh05ZiJVUQ6ymOxaPkXTvRPRLH88575ZCRSRM3PwIoNma01Q==} + '@rollup/rollup-darwin-arm64@4.53.5': + resolution: {integrity: sha512-S87zZPBmRO6u1YXQLwpveZm4JfPpAa6oHBX7/ghSiGH3rz/KDgAu1rKdGutV+WUI6tKDMbaBJomhnT30Y2t4VQ==} cpu: [arm64] os: [darwin] - '@rollup/rollup-darwin-x64@4.53.4': - resolution: {integrity: sha512-EB4Na9G2GsrRNRNFPuxfwvDRDUwQEzJPpiK1vo2zMVhEeufZ1k7J1bKnT0JYDfnPC7RNZ2H5YNQhW6/p2QKATw==} + '@rollup/rollup-darwin-x64@4.53.5': + resolution: {integrity: sha512-YTbnsAaHo6VrAczISxgpTva8EkfQus0VPEVJCEaboHtZRIb6h6j0BNxRBOwnDciFTZLDPW5r+ZBmhL/+YpTZgA==} cpu: [x64] os: [darwin] - '@rollup/rollup-freebsd-arm64@4.53.4': - resolution: {integrity: sha512-bldA8XEqPcs6OYdknoTMaGhjytnwQ0NClSPpWpmufOuGPN5dDmvIa32FygC2gneKK4A1oSx86V1l55hyUWUYFQ==} + '@rollup/rollup-freebsd-arm64@4.53.5': + resolution: {integrity: sha512-1T8eY2J8rKJWzaznV7zedfdhD1BqVs1iqILhmHDq/bqCUZsrMt+j8VCTHhP0vdfbHK3e1IQ7VYx3jlKqwlf+vw==} cpu: [arm64] os: [freebsd] - '@rollup/rollup-freebsd-x64@4.53.4': - resolution: {integrity: sha512-3T8GPjH6mixCd0YPn0bXtcuSXi1Lj+15Ujw2CEb7dd24j9thcKscCf88IV7n76WaAdorOzAgSSbuVRg4C8V8Qw==} + '@rollup/rollup-freebsd-x64@4.53.5': + resolution: {integrity: sha512-sHTiuXyBJApxRn+VFMaw1U+Qsz4kcNlxQ742snICYPrY+DDL8/ZbaC4DVIB7vgZmp3jiDaKA0WpBdP0aqPJoBQ==} cpu: [x64] os: [freebsd] - '@rollup/rollup-linux-arm-gnueabihf@4.53.4': - resolution: {integrity: sha512-UPMMNeC4LXW7ZSHxeP3Edv09aLsFUMaD1TSVW6n1CWMECnUIJMFFB7+XC2lZTdPtvB36tYC0cJWc86mzSsaviw==} + '@rollup/rollup-linux-arm-gnueabihf@4.53.5': + resolution: {integrity: sha512-dV3T9MyAf0w8zPVLVBptVlzaXxka6xg1f16VAQmjg+4KMSTWDvhimI/Y6mp8oHwNrmnmVl9XxJ/w/mO4uIQONA==} cpu: [arm] os: [linux] - '@rollup/rollup-linux-arm-musleabihf@4.53.4': - resolution: {integrity: sha512-H8uwlV0otHs5Q7WAMSoyvjV9DJPiy5nJ/xnHolY0QptLPjaSsuX7tw+SPIfiYH6cnVx3fe4EWFafo6gH6ekZKA==} + '@rollup/rollup-linux-arm-musleabihf@4.53.5': + resolution: {integrity: sha512-wIGYC1x/hyjP+KAu9+ewDI+fi5XSNiUi9Bvg6KGAh2TsNMA3tSEs+Sh6jJ/r4BV/bx/CyWu2ue9kDnIdRyafcQ==} cpu: [arm] os: [linux] - '@rollup/rollup-linux-arm64-gnu@4.53.4': - resolution: {integrity: sha512-BLRwSRwICXz0TXkbIbqJ1ibK+/dSBpTJqDClF61GWIrxTXZWQE78ROeIhgl5MjVs4B4gSLPCFeD4xML9vbzvCQ==} + '@rollup/rollup-linux-arm64-gnu@4.53.5': + resolution: {integrity: sha512-Y+qVA0D9d0y2FRNiG9oM3Hut/DgODZbU9I8pLLPwAsU0tUKZ49cyV1tzmB/qRbSzGvY8lpgGkJuMyuhH7Ma+Vg==} cpu: [arm64] os: [linux] - '@rollup/rollup-linux-arm64-musl@4.53.4': - resolution: {integrity: sha512-6bySEjOTbmVcPJAywjpGLckK793A0TJWSbIa0sVwtVGfe/Nz6gOWHOwkshUIAp9j7wg2WKcA4Snu7Y1nUZyQew==} + '@rollup/rollup-linux-arm64-musl@4.53.5': + resolution: {integrity: sha512-juaC4bEgJsyFVfqhtGLz8mbopaWD+WeSOYr5E16y+1of6KQjc0BpwZLuxkClqY1i8sco+MdyoXPNiCkQou09+g==} cpu: [arm64] os: [linux] - '@rollup/rollup-linux-loong64-gnu@4.53.4': - resolution: {integrity: sha512-U0ow3bXYJZ5MIbchVusxEycBw7bO6C2u5UvD31i5IMTrnt2p4Fh4ZbHSdc/31TScIJQYHwxbj05BpevB3201ug==} + '@rollup/rollup-linux-loong64-gnu@4.53.5': + resolution: {integrity: sha512-rIEC0hZ17A42iXtHX+EPJVL/CakHo+tT7W0pbzdAGuWOt2jxDFh7A/lRhsNHBcqL4T36+UiAgwO8pbmn3dE8wA==} cpu: [loong64] os: [linux] - '@rollup/rollup-linux-ppc64-gnu@4.53.4': - resolution: {integrity: sha512-iujDk07ZNwGLVn0YIWM80SFN039bHZHCdCCuX9nyx3Jsa2d9V/0Y32F+YadzwbvDxhSeVo9zefkoPnXEImnM5w==} + '@rollup/rollup-linux-ppc64-gnu@4.53.5': + resolution: {integrity: sha512-T7l409NhUE552RcAOcmJHj3xyZ2h7vMWzcwQI0hvn5tqHh3oSoclf9WgTl+0QqffWFG8MEVZZP1/OBglKZx52Q==} cpu: [ppc64] os: [linux] - '@rollup/rollup-linux-riscv64-gnu@4.53.4': - resolution: {integrity: sha512-MUtAktiOUSu+AXBpx1fkuG/Bi5rhlorGs3lw5QeJ2X3ziEGAq7vFNdWVde6XGaVqi0LGSvugwjoxSNJfHFTC0g==} + '@rollup/rollup-linux-riscv64-gnu@4.53.5': + resolution: {integrity: sha512-7OK5/GhxbnrMcxIFoYfhV/TkknarkYC1hqUw1wU2xUN3TVRLNT5FmBv4KkheSG2xZ6IEbRAhTooTV2+R5Tk0lQ==} cpu: [riscv64] os: [linux] - '@rollup/rollup-linux-riscv64-musl@4.53.4': - resolution: {integrity: sha512-btm35eAbDfPtcFEgaXCI5l3c2WXyzwiE8pArhd66SDtoLWmgK5/M7CUxmUglkwtniPzwvWioBKKl6IXLbPf2sQ==} + '@rollup/rollup-linux-riscv64-musl@4.53.5': + resolution: {integrity: sha512-GwuDBE/PsXaTa76lO5eLJTyr2k8QkPipAyOrs4V/KJufHCZBJ495VCGJol35grx9xryk4V+2zd3Ri+3v7NPh+w==} cpu: [riscv64] os: [linux] - '@rollup/rollup-linux-s390x-gnu@4.53.4': - resolution: {integrity: sha512-uJlhKE9ccUTCUlK+HUz/80cVtx2RayadC5ldDrrDUFaJK0SNb8/cCmC9RhBhIWuZ71Nqj4Uoa9+xljKWRogdhA==} + '@rollup/rollup-linux-s390x-gnu@4.53.5': + resolution: {integrity: sha512-IAE1Ziyr1qNfnmiQLHBURAD+eh/zH1pIeJjeShleII7Vj8kyEm2PF77o+lf3WTHDpNJcu4IXJxNO0Zluro8bOw==} cpu: [s390x] os: [linux] - '@rollup/rollup-linux-x64-gnu@4.53.4': - resolution: {integrity: sha512-jjEMkzvASQBbzzlzf4os7nzSBd/cvPrpqXCUOqoeCh1dQ4BP3RZCJk8XBeik4MUln3m+8LeTJcY54C/u8wb3DQ==} + '@rollup/rollup-linux-x64-gnu@4.53.5': + resolution: {integrity: sha512-Pg6E+oP7GvZ4XwgRJBuSXZjcqpIW3yCBhK4BcsANvb47qMvAbCjR6E+1a/U2WXz1JJxp9/4Dno3/iSJLcm5auw==} cpu: [x64] os: [linux] - '@rollup/rollup-linux-x64-musl@4.53.4': - resolution: {integrity: sha512-lu90KG06NNH19shC5rBPkrh6mrTpq5kviFylPBXQVpdEu0yzb0mDgyxLr6XdcGdBIQTH/UAhDJnL+APZTBu1aQ==} + '@rollup/rollup-linux-x64-musl@4.53.5': + resolution: {integrity: sha512-txGtluxDKTxaMDzUduGP0wdfng24y1rygUMnmlUJ88fzCCULCLn7oE5kb2+tRB+MWq1QDZT6ObT5RrR8HFRKqg==} cpu: [x64] os: [linux] - '@rollup/rollup-openharmony-arm64@4.53.4': - resolution: {integrity: sha512-dFDcmLwsUzhAm/dn0+dMOQZoONVYBtgik0VuY/d5IJUUb787L3Ko/ibvTvddqhb3RaB7vFEozYevHN4ox22R/w==} + '@rollup/rollup-openharmony-arm64@4.53.5': + resolution: {integrity: sha512-3DFiLPnTxiOQV993fMc+KO8zXHTcIjgaInrqlG8zDp1TlhYl6WgrOHuJkJQ6M8zHEcntSJsUp1XFZSY8C1DYbg==} cpu: [arm64] os: [openharmony] - '@rollup/rollup-win32-arm64-msvc@4.53.4': - resolution: {integrity: sha512-WvUpUAWmUxZKtRnQWpRKnLW2DEO8HB/l8z6oFFMNuHndMzFTJEXzaYJ5ZAmzNw0L21QQJZsUQFt2oPf3ykAD/w==} + '@rollup/rollup-win32-arm64-msvc@4.53.5': + resolution: {integrity: sha512-nggc/wPpNTgjGg75hu+Q/3i32R00Lq1B6N1DO7MCU340MRKL3WZJMjA9U4K4gzy3dkZPXm9E1Nc81FItBVGRlA==} cpu: [arm64] os: [win32] - '@rollup/rollup-win32-ia32-msvc@4.53.4': - resolution: {integrity: sha512-JGbeF2/FDU0x2OLySw/jgvkwWUo05BSiJK0dtuI4LyuXbz3wKiC1xHhLB1Tqm5VU6ZZDmAorj45r/IgWNWku5g==} + '@rollup/rollup-win32-ia32-msvc@4.53.5': + resolution: {integrity: sha512-U/54pTbdQpPLBdEzCT6NBCFAfSZMvmjr0twhnD9f4EIvlm9wy3jjQ38yQj1AGznrNO65EWQMgm/QUjuIVrYF9w==} cpu: [ia32] os: [win32] - '@rollup/rollup-win32-x64-gnu@4.53.4': - resolution: {integrity: sha512-zuuC7AyxLWLubP+mlUwEyR8M1ixW1ERNPHJfXm8x7eQNP4Pzkd7hS3qBuKBR70VRiQ04Kw8FNfRMF5TNxuZq2g==} + '@rollup/rollup-win32-x64-gnu@4.53.5': + resolution: {integrity: sha512-2NqKgZSuLH9SXBBV2dWNRCZmocgSOx8OJSdpRaEcRlIfX8YrKxUT6z0F1NpvDVhOsl190UFTRh2F2WDWWCYp3A==} cpu: [x64] os: [win32] - '@rollup/rollup-win32-x64-msvc@4.53.4': - resolution: {integrity: sha512-Sbx45u/Lbb5RyptSbX7/3deP+/lzEmZ0BTSHxwxN/IMOZDZf8S0AGo0hJD5n/LQssxb5Z3B4og4P2X6Dd8acCA==} + '@rollup/rollup-win32-x64-msvc@4.53.5': + resolution: {integrity: sha512-JRpZUhCfhZ4keB5v0fe02gQJy05GqboPOaxvjugW04RLSYYoB/9t2lx2u/tMs/Na/1NXfY8QYjgRljRpN+MjTQ==} cpu: [x64] os: [win32] @@ -658,8 +658,8 @@ packages: require-main-filename@2.0.0: resolution: {integrity: sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==} - rollup@4.53.4: - resolution: {integrity: sha512-YpXaaArg0MvrnJpvduEDYIp7uGOqKXbH9NsHGQ6SxKCOsNAjZF018MmxefFUulVP2KLtiGw1UvZbr+/ekjvlDg==} + rollup@4.53.5: + resolution: {integrity: sha512-iTNAbFSlRpcHeeWu73ywU/8KuU/LZmNCSxp6fjQkJBD3ivUb8tpDrXhIxEzA05HlYMEwmtaUnb3RP+YNv162OQ==} engines: {node: '>=18.0.0', npm: '>=8.0.0'} hasBin: true @@ -896,70 +896,70 @@ snapshots: '@jridgewell/resolve-uri': 3.1.2 '@jridgewell/sourcemap-codec': 1.5.5 - '@rollup/rollup-android-arm-eabi@4.53.4': + '@rollup/rollup-android-arm-eabi@4.53.5': optional: true - '@rollup/rollup-android-arm64@4.53.4': + '@rollup/rollup-android-arm64@4.53.5': optional: true - '@rollup/rollup-darwin-arm64@4.53.4': + '@rollup/rollup-darwin-arm64@4.53.5': optional: true - '@rollup/rollup-darwin-x64@4.53.4': + '@rollup/rollup-darwin-x64@4.53.5': optional: true - '@rollup/rollup-freebsd-arm64@4.53.4': + '@rollup/rollup-freebsd-arm64@4.53.5': optional: true - '@rollup/rollup-freebsd-x64@4.53.4': + '@rollup/rollup-freebsd-x64@4.53.5': optional: true - '@rollup/rollup-linux-arm-gnueabihf@4.53.4': + '@rollup/rollup-linux-arm-gnueabihf@4.53.5': optional: true - '@rollup/rollup-linux-arm-musleabihf@4.53.4': + '@rollup/rollup-linux-arm-musleabihf@4.53.5': optional: true - '@rollup/rollup-linux-arm64-gnu@4.53.4': + '@rollup/rollup-linux-arm64-gnu@4.53.5': optional: true - '@rollup/rollup-linux-arm64-musl@4.53.4': + '@rollup/rollup-linux-arm64-musl@4.53.5': optional: true - '@rollup/rollup-linux-loong64-gnu@4.53.4': + '@rollup/rollup-linux-loong64-gnu@4.53.5': optional: true - '@rollup/rollup-linux-ppc64-gnu@4.53.4': + '@rollup/rollup-linux-ppc64-gnu@4.53.5': optional: true - '@rollup/rollup-linux-riscv64-gnu@4.53.4': + '@rollup/rollup-linux-riscv64-gnu@4.53.5': optional: true - '@rollup/rollup-linux-riscv64-musl@4.53.4': + '@rollup/rollup-linux-riscv64-musl@4.53.5': optional: true - '@rollup/rollup-linux-s390x-gnu@4.53.4': + '@rollup/rollup-linux-s390x-gnu@4.53.5': optional: true - '@rollup/rollup-linux-x64-gnu@4.53.4': + '@rollup/rollup-linux-x64-gnu@4.53.5': optional: true - '@rollup/rollup-linux-x64-musl@4.53.4': + '@rollup/rollup-linux-x64-musl@4.53.5': optional: true - '@rollup/rollup-openharmony-arm64@4.53.4': + '@rollup/rollup-openharmony-arm64@4.53.5': optional: true - '@rollup/rollup-win32-arm64-msvc@4.53.4': + '@rollup/rollup-win32-arm64-msvc@4.53.5': optional: true - '@rollup/rollup-win32-ia32-msvc@4.53.4': + '@rollup/rollup-win32-ia32-msvc@4.53.5': optional: true - '@rollup/rollup-win32-x64-gnu@4.53.4': + '@rollup/rollup-win32-x64-gnu@4.53.5': optional: true - '@rollup/rollup-win32-x64-msvc@4.53.4': + '@rollup/rollup-win32-x64-msvc@4.53.5': optional: true '@socket.io/component-emitter@3.1.2': {} @@ -1243,32 +1243,32 @@ snapshots: require-main-filename@2.0.0: {} - rollup@4.53.4: + rollup@4.53.5: dependencies: '@types/estree': 1.0.8 optionalDependencies: - '@rollup/rollup-android-arm-eabi': 4.53.4 - '@rollup/rollup-android-arm64': 4.53.4 - '@rollup/rollup-darwin-arm64': 4.53.4 - '@rollup/rollup-darwin-x64': 4.53.4 - '@rollup/rollup-freebsd-arm64': 4.53.4 - '@rollup/rollup-freebsd-x64': 4.53.4 - '@rollup/rollup-linux-arm-gnueabihf': 4.53.4 - '@rollup/rollup-linux-arm-musleabihf': 4.53.4 - '@rollup/rollup-linux-arm64-gnu': 4.53.4 - '@rollup/rollup-linux-arm64-musl': 4.53.4 - '@rollup/rollup-linux-loong64-gnu': 4.53.4 - '@rollup/rollup-linux-ppc64-gnu': 4.53.4 - '@rollup/rollup-linux-riscv64-gnu': 4.53.4 - '@rollup/rollup-linux-riscv64-musl': 4.53.4 - '@rollup/rollup-linux-s390x-gnu': 4.53.4 - '@rollup/rollup-linux-x64-gnu': 4.53.4 - '@rollup/rollup-linux-x64-musl': 4.53.4 - '@rollup/rollup-openharmony-arm64': 4.53.4 - '@rollup/rollup-win32-arm64-msvc': 4.53.4 - '@rollup/rollup-win32-ia32-msvc': 4.53.4 - '@rollup/rollup-win32-x64-gnu': 4.53.4 - '@rollup/rollup-win32-x64-msvc': 4.53.4 + '@rollup/rollup-android-arm-eabi': 4.53.5 + '@rollup/rollup-android-arm64': 4.53.5 + '@rollup/rollup-darwin-arm64': 4.53.5 + '@rollup/rollup-darwin-x64': 4.53.5 + '@rollup/rollup-freebsd-arm64': 4.53.5 + '@rollup/rollup-freebsd-x64': 4.53.5 + '@rollup/rollup-linux-arm-gnueabihf': 4.53.5 + '@rollup/rollup-linux-arm-musleabihf': 4.53.5 + '@rollup/rollup-linux-arm64-gnu': 4.53.5 + '@rollup/rollup-linux-arm64-musl': 4.53.5 + '@rollup/rollup-linux-loong64-gnu': 4.53.5 + '@rollup/rollup-linux-ppc64-gnu': 4.53.5 + '@rollup/rollup-linux-riscv64-gnu': 4.53.5 + '@rollup/rollup-linux-riscv64-musl': 4.53.5 + '@rollup/rollup-linux-s390x-gnu': 4.53.5 + '@rollup/rollup-linux-x64-gnu': 4.53.5 + '@rollup/rollup-linux-x64-musl': 4.53.5 + '@rollup/rollup-openharmony-arm64': 4.53.5 + '@rollup/rollup-win32-arm64-msvc': 4.53.5 + '@rollup/rollup-win32-ia32-msvc': 4.53.5 + '@rollup/rollup-win32-x64-gnu': 4.53.5 + '@rollup/rollup-win32-x64-msvc': 4.53.5 fsevents: 2.3.3 set-blocking@2.0.0: {} @@ -1337,7 +1337,7 @@ snapshots: fdir: 6.5.0(picomatch@4.0.3) picomatch: 4.0.3 postcss: 8.5.6 - rollup: 4.53.4 + rollup: 4.53.5 tinyglobby: 0.2.15 optionalDependencies: '@types/node': 25.0.3 diff --git a/frontend/src/pages/chat/chat.css b/frontend/src/pages/chat/chat.css index a25c3e2..5f7b8d2 100644 --- a/frontend/src/pages/chat/chat.css +++ b/frontend/src/pages/chat/chat.css @@ -1,8 +1,8 @@ @import "tailwindcss"; -/* @font-face { +@font-face { font-family: "Nimbus Mono L"; src: url("/fonts/NimbusMonoL.woff2") format("woff2"); -} */ +} @tailwind utilities; diff --git a/frontend/src/pages/pong/addPongMessage.ts b/frontend/src/pages/pong/addPongMessage.ts index 81d33d6..13fae4b 100644 --- a/frontend/src/pages/pong/addPongMessage.ts +++ b/frontend/src/pages/pong/addPongMessage.ts @@ -3,8 +3,8 @@ import { color } from './pong'; /** * function adds a message to the frontend pongMessage * ATTENTION send inner HTML ****** - * @param text - * @returns + * @param text + * @returns */ export function addPongMessage(text: string) { diff --git a/frontend/src/pages/pong/broadcastMsg.ts b/frontend/src/pages/pong/broadcastMsg.ts index 2443278..e17644d 100644 --- a/frontend/src/pages/pong/broadcastMsg.ts +++ b/frontend/src/pages/pong/broadcastMsg.ts @@ -5,8 +5,8 @@ import { getUser } from "@app/auth"; /** * function sends socket.emit to the backend to active and a broadcast message to all sockets * echos addPongMessage() the message with addMessage to the sender - * @param socket - * @param msgCommand + * @param socket + * @param msgCommand */ export function broadcastMsg (socket: Socket, msgCommand: string[]): void { let msgText = msgCommand[1] ?? ""; diff --git a/frontend/src/pages/pong/pong.html b/frontend/src/pages/pong/pong.html index 656277f..7684f61 100644 --- a/frontend/src/pages/pong/pong.html +++ b/frontend/src/pages/pong/pong.html @@ -2,13 +2,26 @@

- +

Pong Box


+ + +
System: connecting ...
+

0:0

diff --git a/frontend/src/pages/pong/pong.ts b/frontend/src/pages/pong/pong.ts index 1ddb454..c22633c 100644 --- a/frontend/src/pages/pong/pong.ts +++ b/frontend/src/pages/pong/pong.ts @@ -8,20 +8,20 @@ import { addPongMessage } from './addPongMessage'; import { isLoggedIn } from './isLoggedIn'; import type { ClientMessage, ClientProfil } from './types_front'; import { isNullish } from "@app/utils"; - + export const color = { red: 'color: red;', green: 'color: green;', yellow: 'color: orange;', blue: 'color: blue;', - reset: '', + reset: '', }; // TODO: local game (2player -> server -> 2player : current setup) // TODO: tournament via remote (dedicated queu? idk) -// +// -// get the name of the machine used to connect +// get the name of the machine used to connect const machineHostName = window.location.hostname; console.log('connect to login at %chttps://' + machineHostName + ':8888/app/login',color.yellow); @@ -34,6 +34,9 @@ document.addEventListener('ft:pageChange', () => { // dont regen socket on page console.log("Page changed"); }); +/** + * @returns the initialized socket + */ export function getSocket(): Socket { let addressHost = `wss://${machineHostName}:8888`; @@ -46,6 +49,11 @@ export function getSocket(): Socket { return __socket; }; +/** + * + * @param socket The socket to wait for + * @returns voir or a promise + */ function waitSocketConnected(socket: Socket): Promise { return new Promise(resolve => { if (socket.connected) return resolve(); @@ -53,6 +61,11 @@ function waitSocketConnected(socket: Socket): Promise { }); }; +/** + * + * @param socket The socket to communicat + * @returns nothing + */ async function whoami(socket: Socket) { try { const chatWindow = document.getElementById("t-chatbox") as HTMLDivElement; @@ -135,7 +148,7 @@ function pongClient(_url: string, _args: RouteHandlerParams): RouteHandlerReturn // keys handler const keys: Record = {}; - + document.addEventListener("keydown", (e) => { keys[e.key.toLowerCase()] = true; }); @@ -144,35 +157,35 @@ function pongClient(_url: string, _args: RouteHandlerParams): RouteHandlerReturn }); setInterval(() => { // key sender if ((keys['w'] || keys['s']) && !(keys['w'] && keys['s'])) { // exclusive or to filter requests - if (keys['w']) { + if (keys['w']) { socket.emit("batmove_Left", "up"); console.log('north key pressed - emit batmove_Left up'); } - if (keys['s']) { + if (keys['s']) { socket.emit("batmove_Left", "down"); console.log('south key pressed - emit batmove_Left down'); } } if ((keys['p'] || keys['l']) && !(keys['p'] && keys['l'])) { // exclusive or to filter requests - if (keys['p']) { + if (keys['p']) { socket.emit("batmove_Right", "up"); console.log('north key pressed - emit batmove_Right up'); } - if (keys['l']) { + if (keys['l']) { socket.emit("batmove_Right", "down"); console.log('south key pressed - emit batmove_Right down'); } } }, 16); - + // Pong Objects updators socket.on("batLeft_update", (y: number) => { console.log('batLeft_update received y: ', y); const bat = document.getElementById("batleft") as HTMLDivElement | null; if (!bat) { console.error("FATAL ERROR: Bat element with ID 'bat-left' not found. Check HTML."); - return ; - } + return ; + } if (typeof y === 'number' && !isNaN(y)) { bat.style.transform = `translateY(${y}px)`; } else { @@ -184,8 +197,8 @@ function pongClient(_url: string, _args: RouteHandlerParams): RouteHandlerReturn const bat = document.getElementById("batright") as HTMLDivElement | null; if (!bat) { console.error("FATAL ERROR: Bat element with ID 'bat-Right' not found. Check HTML."); - return ; - } + return ; + } if (typeof y === 'number' && !isNaN(y)) { bat.style.transform = `translateY(${y}px)`; } else { @@ -193,7 +206,7 @@ function pongClient(_url: string, _args: RouteHandlerParams): RouteHandlerReturn } }); socket.on("ballPos_update", (x:number, y : number) => { - console.log('ballPos_update recieved: ', x, ' / ', y); + console.log('ballPos_update recieved'); const ball = document.getElementById("ball") as HTMLDivElement | null; if (!ball) { @@ -202,12 +215,12 @@ function pongClient(_url: string, _args: RouteHandlerParams): RouteHandlerReturn } if (typeof y !== 'number' || isNaN(y) || typeof x !== 'number' || isNaN(x)) { console.warn(`Received invalid X/Y value: ${x} / ${y}`); - return ; + return ; } ball.style.transform = `translateY(${y}px)`; ball.style.transform += `translateX(${x}px)`; }); - + // socket.once('welcome', (data) => { // console.log('%cWelcome PONG PAGE', color.yellow ); // addPongMessage('socket.once \'Welcome\' called') @@ -216,6 +229,7 @@ function pongClient(_url: string, _args: RouteHandlerParams): RouteHandlerReturn // Listen for messages from the server "MsgObjectServer" socket.on("MsgObjectServer", (data: { message: ClientMessage}) => { // Display the message in the chat window + console.log("message recieved : ", data.message.text); const systemWindow = document.getElementById('system-box') as HTMLDivElement; const MAX_SYSTEM_MESSAGES = 10; @@ -230,7 +244,17 @@ function pongClient(_url: string, _args: RouteHandlerParams): RouteHandlerReturn } systemWindow.scrollTop = systemWindow.scrollHeight; } - console.log("Getuser():", getUser()); + if (systemWindow && data.message.destination === "score-info") { + console.log("score update:", data.message.text); + const scoreboard = document.getElementById('score-board') as HTMLHeadingElement ; + + if (!scoreboard) { + console.log("update score failed :("); + return ; + } + scoreboard.textContent = `${data.message.text}`; + } + // console.log("Getuser():", getUser()); }); setTitle('Pong Game Page'); @@ -247,6 +271,22 @@ function pongClient(_url: string, _args: RouteHandlerParams): RouteHandlerReturn joinQueu(socket); }); + const checkbox = document.getElementById("modeToggle") as HTMLInputElement; + const label = document.getElementById("toggleLabel") as HTMLSpanElement; + const track = document.getElementById("toggleTrack") as HTMLDivElement; + const knob = document.getElementById("toggleKnob") as HTMLSpanElement; + + checkbox.addEventListener("change", () => { // web vs local + if (checkbox.checked) { + label.textContent = "Web"; + track.classList.replace("bg-gray-300", "bg-blue-600"); + knob.classList.add("translate-x-7"); + } else { + label.textContent = "Local"; + track.classList.replace("bg-blue-600", "bg-gray-300"); + knob.classList.remove("translate-x-7"); + } + }); } } }; diff --git a/frontend/src/pages/pong/types_front.ts b/frontend/src/pages/pong/types_front.ts index 21ae2d9..792bdea 100644 --- a/frontend/src/pages/pong/types_front.ts +++ b/frontend/src/pages/pong/types_front.ts @@ -10,7 +10,7 @@ export type ClientProfil = { command: string, destination: string, type: string, - user: string, + user: string, loginName: string, userID: string, text: string, @@ -19,4 +19,4 @@ export type ClientProfil = { SenderName: string, Sendertext: string, innerHtml?: string, -}; \ No newline at end of file +}; \ No newline at end of file diff --git a/frontend/src/pong/pong.css b/frontend/src/pong/pong.css index c22229c..f68d63d 100644 --- a/frontend/src/pong/pong.css +++ b/frontend/src/pong/pong.css @@ -10,7 +10,7 @@ @apply w-[100px] h-[32px] - border-1 + border-1 border-gray-500 rounded-3xl bg-gray-500 @@ -31,10 +31,10 @@ p-[8px] border-1 border-black - shadow-2xl + shadow-2xl text-left text-gray-700 - bg-white + bg-white rounded-3xl overflow-y-auto whitespace-pre-line @@ -46,12 +46,12 @@ .system-info { @apply h-[40px] - bg-gray-200 - text-gray-700 - p-3 - rounded-3xl - mb-2 border - border-gray-200 + bg-gray-200 + text-gray-700 + p-3 + rounded-3xl + mb-2 border + border-gray-200 text-center shadow overflow-y-auto @@ -67,20 +67,20 @@ items-center justify-center bg-[#43536b]; - + } .mainboxDisplay { @apply - fixed - top-1/2 - left-1/2 - -translate-x-1/2 - -translate-y-1/2 - bg-gray-200 w-[850px] - p-6 rounded-xl - shadow-2xl - text-center + fixed + top-1/2 + left-1/2 + -translate-x-1/2 + -translate-y-1/2 + bg-gray-200 w-[850px] + p-6 rounded-xl + shadow-2xl + text-center z-50; } @@ -103,7 +103,6 @@ .text-style { @apply text-black - } .pong-field { diff --git a/src/pong/package.json b/src/pong/package.json index ef0cbf6..bde39ed 100644 --- a/src/pong/package.json +++ b/src/pong/package.json @@ -27,7 +27,7 @@ "fastify": "^5.6.2", "fastify-plugin": "^5.1.0", "socket.io": "^4.8.1", - "typebox": "^1.0.62" + "typebox": "^1.0.63" }, "devDependencies": { "@types/node": "^22.19.3", diff --git a/src/pong/src/app.ts b/src/pong/src/app.ts index 1683076..a889aed 100644 --- a/src/pong/src/app.ts +++ b/src/pong/src/app.ts @@ -11,7 +11,7 @@ import type { ClientProfil, ClientMessage } from './chat_types'; import { sendInvite } from './sendInvite'; import { setGameLink } from './setGameLink'; import { emit } from 'process'; -import { Record } from 'typebox/type'; +import { Boolean, Record } from 'typebox/type'; import { UserId } from '@shared/database/mixin/user'; @@ -25,7 +25,6 @@ export const color = { reset: '\x1b[0m', }; - declare const __SERVICE_NAME: string; // Global map of clients @@ -35,8 +34,6 @@ interface ClientInfo { lastSeen: number; } - - export const clientChat = new Map(); // @ts-expect-error: import.meta.glob is a vite thing. Typescript doesn't know this... @@ -90,16 +87,18 @@ declare module 'fastify' { } } -function batColision(ball_origin_x : number, ball_origin_y : number, ball_height : number, origin_bat_x : number, origin_bat_y : number, bat_w : number, bat_h : number) -{ - if (((ball_origin_x >= origin_bat_x && ball_origin_x <= origin_bat_x + bat_w) || - (ball_origin_x + ball_height >= origin_bat_x && ball_origin_x + ball_height <= origin_bat_x + bat_w)) - && ((ball_origin_y >= origin_bat_y && ball_origin_y <= origin_bat_y + bat_h) || - (ball_origin_y + ball_height >= origin_bat_y && ball_origin_y + ball_height <= origin_bat_y + bat_h))) +function isInRange(x : number, low : number, high : number) { + if (x >= low && x <= high) return (true); return (false); } +async function sendScore(socket : Socket, scoreLeft : number, scoreRight : number) { // idk why, sometimes... it fails? + let msg : ClientMessage = {destination : "score-info", command: "", user:"", text:scoreLeft.toString() + ":" + scoreRight.toString(), SenderWindowID:""}; + + socket.emit('MsgObjectServer', {message : msg}); +} + async function onReady(fastify: FastifyInstance) { // shows address for connection au server transcendance @@ -131,8 +130,8 @@ async function onReady(fastify: FastifyInstance) { const START_BALLX = (RIGHT_EDGE / 2) - BALL_SIZE; const START_BALLY = (BOTTOM_EDGE / 2) - BALL_SIZE; - const ACCELERATION_FACTOR = 1.0001; - const ABS_MAX_BALL_SPEED = 10; + const ACCELERATION_FACTOR = 1.15; + const ABS_MAX_BALL_SPEED = 3; // val inits let paddleLeft = PADDLE_START; //shared start bat position @@ -140,8 +139,10 @@ async function onReady(fastify: FastifyInstance) { let ballPosX = START_BALLX; let ballPosY = START_BALLY; - let ballSpeedX = 1; - let ballSpeedY = 1; + let ballSpeedX = -1; + let ballSpeedY = -1; + let scoreL = 0; + let scoreR = 0; let games : Record = {}; // uuid, game uid - if not in game empty string @@ -150,6 +151,7 @@ async function onReady(fastify: FastifyInstance) { socket.emit("batLeft_update", paddleLeft); socket.emit("batRight_update", paddleRight); socket.emit("ballPos_update", ballPosX, ballPosY); + sendScore(socket, scoreL, scoreR); // GAME // paddle handling @@ -162,6 +164,7 @@ async function onReady(fastify: FastifyInstance) { } // position of bat leftplokoplpl paddleLeft = Math.max(TOP_EDGE, Math.min(MAX_PADDLE_Y, paddleLeft)); + console.log("batLeft_update:", paddleLeft); socket.emit("batLeft_update", paddleLeft); }); socket.on('batmove_Right', (direction: "up" | "down") => { @@ -176,14 +179,14 @@ async function onReady(fastify: FastifyInstance) { socket.emit("batRight_update", paddleRight); }); // ball handling: - // TODO 1: l/r bat hit - // TODO 2: l/r wall hit : score 5pt gagne setInterval(async () => { const new_ballPosX = ballPosX + ballSpeedX; const new_ballPosY = ballPosY + ballSpeedY; - if (batColision(new_ballPosX, new_ballPosY, BALL_SIZE, PADDLE_X_OFFSET, paddleLeft, PADDLE_WIDTH, PADDLE_HEIGHT) || - batColision(new_ballPosX, new_ballPosY, BALL_SIZE, RIGHT_EDGE - PADDLE_X_OFFSET, paddleRight, PADDLE_WIDTH, PADDLE_HEIGHT)) + if (((isInRange(new_ballPosY, paddleLeft, paddleLeft + PADDLE_HEIGHT) || isInRange(new_ballPosY + BALL_SIZE *2, paddleLeft, paddleLeft + PADDLE_HEIGHT)) // y ok ? + && isInRange(new_ballPosX, PADDLE_X_OFFSET, PADDLE_X_OFFSET + PADDLE_WIDTH) && ballSpeedX < 0) || // x ok? && ball going toward paddle? + ((isInRange(new_ballPosY, paddleRight, paddleRight + PADDLE_HEIGHT) || isInRange(new_ballPosY + BALL_SIZE *2, paddleRight, paddleRight + PADDLE_HEIGHT)) // right side equations + && isInRange(new_ballPosX + BALL_SIZE * 2, RIGHT_EDGE - PADDLE_X_OFFSET - PADDLE_WIDTH, RIGHT_EDGE - PADDLE_X_OFFSET)) && ballSpeedX > 0) { ballSpeedX *= -1; ballSpeedX *= ACCELERATION_FACTOR; @@ -191,10 +194,26 @@ async function onReady(fastify: FastifyInstance) { console.log('bat colision'); } else if (new_ballPosX < 0 || new_ballPosX + BALL_SIZE*2 > RIGHT_EDGE) { - ballSpeedX *= -1; - ballSpeedX *= ACCELERATION_FACTOR; - ballSpeedY *= ACCELERATION_FACTOR; - console.log('wall colision'); + ballPosX = START_BALLX; + ballPosY = START_BALLY; + ballSpeedX = (Math.random() - .5) < 0 ? -1 : 1; + + if (new_ballPosX < 0) { + scoreR += 1; + ballSpeedY = -1; + } else { + scoreL += 1; + ballSpeedY = 1; + } + if (scoreL >= 5 || scoreR >= 5) + { + console.log('game should stop + board reset'); + ballSpeedX = 0; // temp solution + ballSpeedY = 0; + // reset board :D + } + console.log('point scored'); + sendScore(socket, scoreL, scoreR); // TODO: score point + ball reset + spd reset } else if (new_ballPosY < 0 || new_ballPosY + BALL_SIZE*2 > BOTTOM_EDGE) { @@ -210,8 +229,8 @@ async function onReady(fastify: FastifyInstance) { socket.emit("ballPos_update", ballPosX, ballPosY); }, 16) - - // QUEU HANDL + + // QUEUE HANDL socket.on('queuJoin', async (uuid: UserId) => { console.log('queu join recieved for : ', uuid); if (!games.hasOwnProperty(uuid)) { diff --git a/src/pong/src/routes/broadcast.ts b/src/pong/src/routes/broadcast.ts index d223444..8c9118f 100644 --- a/src/pong/src/routes/broadcast.ts +++ b/src/pong/src/routes/broadcast.ts @@ -30,12 +30,12 @@ const route: FastifyPluginAsync = async (fastify): Promise => { export default route; /** - * + * * try this in a terminal - * + * * curl -k --data-raw '{"message": "Message SENT from the terminal en REMOTE"}' 'https://local.maix.me:8888/api/pong/broadcast' -H "Content-Type: application/json" - * - * send message info to the fronatend via the route '/api/pong/broadcast' + * + * send message info to the fronatend via the route '/api/pong/broadcast' */ diff --git a/src/pong/src/sendInvite.ts b/src/pong/src/sendInvite.ts index c58005d..489dc89 100644 --- a/src/pong/src/sendInvite.ts +++ b/src/pong/src/sendInvite.ts @@ -3,12 +3,12 @@ import { clientChat, color } from './app'; import { FastifyInstance } from 'fastify'; /** - * function looks for the user online in the chat + * function looks for the user online in the chat * and sends emit to invite - format HTML to make clickable * message appears in chat window text area - * @param fastify - * @param innerHtml - * @param profil + * @param fastify + * @param innerHtml + * @param profil */ export function sendInvite(fastify: FastifyInstance, innerHtml: string, profil: ClientProfil) {