[wip] local ~= ok, colision = ok, queue != ok, front (looks) = ok, sock Shapes ~= ok (missing new shapes)

This commit is contained in:
bgoulard 2025-12-16 14:14:54 +01:00 committed by Maix0
parent 0033956ca1
commit dded33f5fa
12 changed files with 243 additions and 172 deletions

184
frontend/pnpm-lock.yaml generated
View file

@ -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

View file

@ -1,8 +1,8 @@
@import "tailwindcss";
/* @font-face {
@font-face {
font-family: "Nimbus Mono L";
src: url("/fonts/NimbusMonoL.woff2") format("woff2");
} */
}
@tailwind utilities;

View file

@ -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) {

View file

@ -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] ?? "";

View file

@ -2,13 +2,26 @@
<div id="mainbox" class="mainboxDisplay">
<button id="b-whoami" class="btn-style absolute top-4 left-6">Who am i</button>
<br>
<button id="b-joinQueu" class="btn-style absolute top-16 left-6">Queu Up</button>
<button id="b-joinQueu" class="btn-style absolute top-16 left-6">Queue Up</button>
<br>
<h1 class="text-3xl font-bold text-gray-800">
Pong Box<span id="t-username"></span>
</h1><br>
<label class="inline-flex items-center gap-3 cursor-pointer select-none">
<!-- Checkbox -->
<input id="modeToggle" type="checkbox" class="sr-only"/>
<!-- Switch -->
<div id="toggleTrack" class="relative w-14 h-7 rounded-full bg-gray-300 transition-colors duration-300">
<span id="toggleKnob" class="absolute top-0.5 left-0.5 w-6 h-6 bg-white rounded-full transition-transform duration-300"></span>
</div>
<!-- Label -->
<span id="toggleLabel" class="text-sm font-medium text-gray-700"> Local </span>
</label>
<!-- Horizontal Message Box -->
<div id="system-box" class="system-info">System: connecting ... </div>
<h1 id="score-board" class="text-p10 font-bold text-gray-800">0:0</h1>
<!-- Pong Box -->
<div class="flex justify-center mt-2">
<div id="pongspace" class="flex flex-col">

View file

@ -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<void>
*/
function waitSocketConnected(socket: Socket): Promise<void> {
return new Promise(resolve => {
if (socket.connected) return resolve();
@ -53,6 +61,11 @@ function waitSocketConnected(socket: Socket): Promise<void> {
});
};
/**
*
* @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<string, boolean> = {};
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");
}
});
}
}
};

View file

@ -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,
};
};

View file

@ -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 {