update: rebased
This commit is contained in:
Maieul BOYER
Nigel
parent
b4af6e08ca
commit
d3bd2fce22
4 changed files with 33 additions and 620 deletions
|
|
@ -1,53 +0,0 @@
|
|||
<div class="displaybox">
|
||||
<div id="mainbox" class="mainboxDisplay">
|
||||
<h1 class="text-3xl font-bold text-gray-800">
|
||||
Chatter Box<span id="t-username"></span>
|
||||
</h1><br>
|
||||
<button id="b-clear" class="btn-style absolute top-4 right-6">Clear Text</button>
|
||||
<button id="b-quit" class="btn-style absolute top-14 right-6">Quit Chat</button>
|
||||
<!-- Horizontal Message Box -->
|
||||
<div id="system-box" class="system-info">System: connecting ... </div>
|
||||
<div class="flex justify-center mt-2">
|
||||
<!-- Center wrapper for chat + vertical box -->
|
||||
<!-- Groupe Chat + vertical box container -->
|
||||
<div id = "g-boxes" class="flex gap-2">
|
||||
<!-- Text Chat box panel + send -->
|
||||
<div id="g-textBoxes" class="flex flex-col">
|
||||
<div id="t-chatbox" class="chatbox-style"></div>
|
||||
<div id="t-input-send" class="flex gap-1 mt-2">
|
||||
<input id="t-chat-window" placeholder="Type your message..." class="chat-window-style" />
|
||||
<div id="notify">🔕</div>
|
||||
<div id="noGuest">💔</div>
|
||||
<button id="b-send" class="send-btn-style">Send</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Vertical Ping Buddies box panel-->
|
||||
<div id="ping-box" class="ping-box">
|
||||
<p id="ping-title" class="ping-title">Ping Buddies</p>
|
||||
<div id="ping-list" class="flex-1 overflow-y-auto">
|
||||
<div id = "div-buddies">
|
||||
</div>
|
||||
</div>
|
||||
<div id="profile-modal" class="profilPopup hidden">
|
||||
<div class="popUpBox">
|
||||
<p class="" id="modal-name"></p>
|
||||
<button id="close-modal" class="btn-style absolute bottom-32 right-12">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="game-modal" class="gamePopup hidden">
|
||||
<div class="popUpMessage" >
|
||||
<div id="game-info">
|
||||
<p class="modal-messages " id="modal-message"></p>
|
||||
</div>
|
||||
<button id="close-modal-message" class="btn-style absolute bottom-67 right-12">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
|
@ -1,379 +0,0 @@
|
|||
import './chat.css';
|
||||
import io, { Socket } from 'socket.io-client';
|
||||
import type { blockedUnBlocked } from './types_front';
|
||||
import type { ClientMessage, ClientProfil, ClientProfilPartial } from './types_front';
|
||||
import type { User } from '@app/auth';
|
||||
import { addRoute, setTitle, type RouteHandlerParams, type RouteHandlerReturn } from "@app/routing";
|
||||
import authHtml from './chat.html?raw';
|
||||
import { getUser } from "@app/auth";
|
||||
import { listBuddies } from './chatHelperFunctions/listBuddies';
|
||||
import { getProfil } from './chatHelperFunctions/getProfil';
|
||||
import { addMessage } from './chatHelperFunctions/addMessage';
|
||||
import { broadcastMsg } from './chatHelperFunctions/broadcastMsg';
|
||||
import { openProfilePopup } from './chatHelperFunctions/openProfilePopup';
|
||||
import { actionBtnPopUpBlock } from './chatHelperFunctions/actionBtnPopUpBlock';
|
||||
import { windowStateHidden } from './chatHelperFunctions/windowStateHidden';
|
||||
import { blockUser } from './chatHelperFunctions/blockUser';
|
||||
import { parseCmdMsg } from './chatHelperFunctions/parseCmdMsg';
|
||||
import { actionBtnPopUpInvite } from './chatHelperFunctions/actionBtnPopUpInvite';
|
||||
import { waitSocketConnected } from './chatHelperFunctions/waitSocketConnected';
|
||||
import { connected } from './chatHelperFunctions/connected';
|
||||
import { quitChat } from './chatHelperFunctions/quitChat';
|
||||
import { openMessagePopup } from './chatHelperFunctions/openMessagePopup';
|
||||
import { windowStateVisable } from './chatHelperFunctions/windowStateVisable';
|
||||
import { cmdList } from './chatHelperFunctions/cmdList';
|
||||
|
||||
const MAX_SYSTEM_MESSAGES = 10;
|
||||
let inviteMsgFlag: boolean = false;
|
||||
export let noGuestFlag: boolean = true;
|
||||
const machineHostName = window.location.hostname;
|
||||
|
||||
export let __socket: Socket | undefined = undefined;
|
||||
document.addEventListener('ft:pageChange', () => {
|
||||
if (__socket !== undefined)
|
||||
__socket.close();
|
||||
__socket = undefined;
|
||||
console.log("Page changed");
|
||||
});
|
||||
|
||||
export function getSocket(): Socket {
|
||||
let addressHost = `wss://${machineHostName}:8888`;
|
||||
if (__socket === undefined)
|
||||
|
||||
__socket = io(addressHost, {
|
||||
path: "/api/chat/socket.io/",
|
||||
secure: false,
|
||||
transports: ["websocket"],
|
||||
});
|
||||
return __socket;
|
||||
};
|
||||
|
||||
function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn {
|
||||
let socket = getSocket();
|
||||
let blockMessage: boolean;
|
||||
// Listen for the 'connect' event
|
||||
socket.on("connect", async () => {
|
||||
const systemWindow = document.getElementById('system-box') as HTMLDivElement;
|
||||
const sendtextbox = document.getElementById('t-chat-window') as HTMLButtonElement;
|
||||
const noGuest = document.getElementById("noGuest") ?? null;
|
||||
|
||||
await waitSocketConnected(socket);
|
||||
const user = getUser()?.name;
|
||||
const userID = getUser()?.id;
|
||||
// Ensure we have a user AND socket is connected
|
||||
if (!user || !socket.connected || !noGuest) return;
|
||||
const message = {
|
||||
command: "",
|
||||
destination: 'system-info',
|
||||
type: "chat",
|
||||
user,
|
||||
token: document.cookie ?? "",
|
||||
text: " has Just ARRIVED in the chat",
|
||||
timestamp: Date.now(),
|
||||
SenderWindowID: socket.id,
|
||||
SenderID: userID,
|
||||
};
|
||||
socket.emit('message', JSON.stringify(message));
|
||||
const guest = getUser()?.guest;
|
||||
if (guest) {noGuest.innerText = '';} else {noGuest.innerText = '❤️'};
|
||||
|
||||
const userProfile: ClientProfil = {
|
||||
command: '@noguest',
|
||||
destination: '',
|
||||
type: 'chat',
|
||||
timestamp: Date.now(),
|
||||
guestmsg: true,
|
||||
}
|
||||
socket.emit('guestmsg', JSON.stringify(userProfile));
|
||||
const messageElement = document.createElement("div");
|
||||
messageElement.textContent = `${user}: is connected au server`;
|
||||
systemWindow.appendChild(messageElement);
|
||||
systemWindow.scrollTop = systemWindow.scrollHeight;
|
||||
});
|
||||
|
||||
// Listen for messages from the server "MsgObjectServer"
|
||||
socket.on("MsgObjectServer", (data: { message: ClientMessage}) => {
|
||||
const systemWindow = document.getElementById('system-box') as HTMLDivElement;
|
||||
const chatWindow = document.getElementById("t-chatbox") as HTMLDivElement;
|
||||
|
||||
if (socket) {
|
||||
connected(socket);
|
||||
}
|
||||
|
||||
if (chatWindow && data.message.destination === "") {
|
||||
const messageElement = document.createElement("div");
|
||||
messageElement.textContent = `${data.message.user}: ${data.message.text}`;
|
||||
chatWindow.appendChild(messageElement);
|
||||
chatWindow.scrollTop = chatWindow.scrollHeight;
|
||||
}
|
||||
|
||||
if (chatWindow && data.message.destination === "privateMsg") {
|
||||
const messageElement = document.createElement("div-private");
|
||||
messageElement.textContent = `🔒${data.message.user}: ${data.message.text}`;
|
||||
chatWindow.appendChild(messageElement);
|
||||
chatWindow.scrollTop = chatWindow.scrollHeight;
|
||||
}
|
||||
|
||||
if (chatWindow && data.message.destination === "inviteMsg") {
|
||||
const messageElement = document.createElement("div-private");
|
||||
const chatWindow = document.getElementById("t-chatbox") as HTMLDivElement;
|
||||
messageElement.innerHTML = `🏓${data.message.SenderUserName}: ${data.message.innerHtml}`;
|
||||
chatWindow.appendChild(messageElement);
|
||||
chatWindow.scrollTop = chatWindow.scrollHeight;
|
||||
}
|
||||
|
||||
if (systemWindow && data.message.destination === "system-info") {
|
||||
const messageElement = document.createElement("div");
|
||||
messageElement.textContent = `${data.message.user}: ${data.message.text}`;
|
||||
systemWindow.appendChild(messageElement);
|
||||
|
||||
// keep only last 10
|
||||
while (systemWindow.children.length > MAX_SYSTEM_MESSAGES) {
|
||||
systemWindow.removeChild(systemWindow.firstChild!);
|
||||
}
|
||||
systemWindow.scrollTop = systemWindow.scrollHeight;
|
||||
}
|
||||
});
|
||||
|
||||
socket.on('profilMessage', (profil: ClientProfil) => {
|
||||
profil.SenderID = getUser()?.id ?? "";
|
||||
profil.SenderName = getUser()?.name ?? "";
|
||||
openProfilePopup(profil);
|
||||
socket.emit('isBlockdBtn', profil);
|
||||
socket.emit('check_Block_button', profil);
|
||||
actionBtnPopUpInvite(profil, socket);
|
||||
actionBtnPopUpBlock(profil, socket);
|
||||
});
|
||||
|
||||
socket.on('blockUser', (blocked: ClientProfil) => {
|
||||
let icon = '⛔';
|
||||
if (inviteMsgFlag) {
|
||||
const chatWindow = document.getElementById("t-chatbox") as HTMLDivElement;
|
||||
const messageElement = document.createElement("div");
|
||||
if (`${blocked.text}` === 'I have un-blocked you' ) {icon = '💚'};
|
||||
messageElement.innerText =`${icon}${blocked.SenderName}: ${blocked.text}`;
|
||||
chatWindow.appendChild(messageElement);
|
||||
chatWindow.scrollTop = chatWindow.scrollHeight;
|
||||
}
|
||||
});
|
||||
|
||||
socket.on('blockBtn', (data: blockedUnBlocked) => {
|
||||
const blockUserBtn = document.querySelector("#popup-b-block");
|
||||
if (blockUserBtn) {
|
||||
let message = "";
|
||||
if (data.userState === "block") {message = "un-block", blockMessage = true} else{message = "block", blockMessage = false}
|
||||
blockUserBtn.textContent = message;
|
||||
}
|
||||
});
|
||||
|
||||
socket.on('logout', () => {
|
||||
quitChat(socket);
|
||||
});
|
||||
|
||||
socket.on('privMessageCopy', (message: string) => {
|
||||
addMessage(message);
|
||||
})
|
||||
|
||||
//receives broadcast of the next GAME
|
||||
socket.on('nextGame', (message: string) => {
|
||||
openMessagePopup(message);
|
||||
})
|
||||
|
||||
let toggle = false
|
||||
window.addEventListener("focus", async () => {
|
||||
|
||||
setTimeout(() => {
|
||||
connected(socket);
|
||||
}, 16);
|
||||
if (window.location.pathname === '/app/chat') {
|
||||
if (socket.id) {
|
||||
await windowStateVisable();
|
||||
}
|
||||
toggle = true;
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener("blur", () => {
|
||||
if (socket.id)
|
||||
windowStateHidden();
|
||||
toggle = false;
|
||||
});
|
||||
|
||||
socket.on('listBud', async (myBuddies: string[]) => {
|
||||
const buddies = document.getElementById('div-buddies') as HTMLDivElement;
|
||||
listBuddies(socket, buddies, myBuddies);
|
||||
});
|
||||
|
||||
socket.once('welcome', (data) => {
|
||||
const buddies = document.getElementById('div-buddies') as HTMLDivElement;
|
||||
buddies.textContent = '';
|
||||
buddies.innerHTML = '';
|
||||
connected(socket);
|
||||
addMessage (`${data.msg} ` + getUser()?.name);
|
||||
});
|
||||
setTitle('Chat Page');
|
||||
|
||||
return {
|
||||
|
||||
html: authHtml, postInsert: async (app) => {
|
||||
const sendButton = document.getElementById('b-send') as HTMLButtonElement;
|
||||
const chatWindow = document.getElementById('t-chatbox') as HTMLDivElement;
|
||||
const sendtextbox = document.getElementById('t-chat-window') as HTMLButtonElement;
|
||||
const clearText = document.getElementById('b-clear') as HTMLButtonElement;
|
||||
const buddies = document.getElementById('div-buddies') as HTMLDivElement;
|
||||
const bquit = document.getElementById('b-quit') as HTMLDivElement;
|
||||
|
||||
buddies.textContent = '';
|
||||
buddies.innerHTML = '';
|
||||
const buttonPro = document.getElementById("close-modal") ?? null;
|
||||
|
||||
if (buttonPro)
|
||||
buttonPro.addEventListener("click", () => {
|
||||
const profilList = document.getElementById("profile-modal") ?? null;
|
||||
if (profilList) profilList.classList.add("hidden");
|
||||
});
|
||||
|
||||
const buttonMessage = document.getElementById("close-modal-message") ?? null;
|
||||
|
||||
if (buttonMessage)
|
||||
buttonMessage.addEventListener("click", () => {
|
||||
const gameMessage = document.getElementById("game-modal") ?? null;
|
||||
if (gameMessage) gameMessage.classList.add("hidden");
|
||||
const modalmessage = document.getElementById("modal-message") ?? null;
|
||||
if (modalmessage) {modalmessage.innerHTML = "";}
|
||||
|
||||
});
|
||||
|
||||
// Send button
|
||||
sendButton?.addEventListener("click", () => {
|
||||
const notify = document.getElementById("notify") ?? null;
|
||||
const noGuest = document.getElementById("noGuest") ?? null;
|
||||
const userId = getUser()?.id;
|
||||
const userAskingToBlock = getUser()?.name;
|
||||
if (sendtextbox && sendtextbox.value.trim()) {
|
||||
let msgText: string = sendtextbox.value.trim();
|
||||
const msgCommand = parseCmdMsg(msgText) ?? "";
|
||||
connected(socket);
|
||||
if (msgCommand !== "") {
|
||||
switch (msgCommand[0]) {
|
||||
case '@msg':
|
||||
broadcastMsg(socket, msgCommand);
|
||||
break;
|
||||
|
||||
case '@block':
|
||||
if (msgCommand[1] === '') {break;};
|
||||
if (!userAskingToBlock) return;
|
||||
if (!userId) return;
|
||||
const userToBlock: ClientProfil = {
|
||||
command: msgCommand[0],
|
||||
destination: '',
|
||||
type: 'chat',
|
||||
user: msgCommand[1],
|
||||
userID: userId,
|
||||
timestamp: Date.now(),
|
||||
SenderWindowID: socket.id,
|
||||
SenderName: userAskingToBlock,
|
||||
}
|
||||
blockUser(userToBlock, socket);
|
||||
break;
|
||||
|
||||
case '@notify':
|
||||
if (notify === null) {break;};
|
||||
if (inviteMsgFlag === false) {
|
||||
notify.innerText = '🔔';
|
||||
inviteMsgFlag = true;
|
||||
} else {
|
||||
notify.innerText = '🔕';
|
||||
inviteMsgFlag = false;
|
||||
}
|
||||
break;
|
||||
|
||||
case '@guest':
|
||||
if (!userId) {return;};
|
||||
if (!userAskingToBlock) {return;};
|
||||
if (noGuest === null) {break;};
|
||||
const guest = getUser()?.guest;
|
||||
if (noGuestFlag === false && noGuest.innerText === '💔') {
|
||||
noGuest.innerText = '❤️';
|
||||
noGuestFlag = true;
|
||||
} else {
|
||||
noGuest.innerText = '💔';
|
||||
noGuestFlag = false;
|
||||
}
|
||||
if (guest) {noGuestFlag = true; noGuest.innerText = ''; sendtextbox.value = '';};
|
||||
const userProfile: ClientProfilPartial = {
|
||||
command: '@noguest',
|
||||
destination: '',
|
||||
type: 'chat',
|
||||
user: userAskingToBlock,
|
||||
userID: userId,
|
||||
timestamp: Date.now(),
|
||||
SenderWindowID: '',
|
||||
guestmsg: noGuestFlag,
|
||||
}
|
||||
socket.emit('guestmsg', JSON.stringify(userProfile));
|
||||
break;
|
||||
|
||||
case '@profile':
|
||||
if (msgCommand[1] === '') {break;};
|
||||
getProfil(socket, msgCommand[1]);
|
||||
break;
|
||||
case '@cls':
|
||||
chatWindow.innerHTML = '';
|
||||
break;
|
||||
case '@help':
|
||||
cmdList();
|
||||
break;
|
||||
|
||||
case '@quit':
|
||||
quitChat(socket);
|
||||
break;
|
||||
|
||||
default:
|
||||
const user: User | null = getUser();
|
||||
if (!user) return;
|
||||
if (!user || !socket.connected) return;
|
||||
const message: ClientProfilPartial = {
|
||||
command: msgCommand[0],
|
||||
destination: '',
|
||||
type: "chat",
|
||||
user: user.name,
|
||||
userID: user.id,
|
||||
token: document.cookie ?? '',
|
||||
text: msgCommand[1],
|
||||
timestamp: Date.now(),
|
||||
SenderWindowID: socket.id ?? '',
|
||||
SenderID: user.id,
|
||||
};
|
||||
socket.emit('privMessage', JSON.stringify(message));
|
||||
break;
|
||||
}
|
||||
// Clear the input in all cases
|
||||
sendtextbox.value = "";
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Clear Text button
|
||||
clearText?.addEventListener("click", () => {
|
||||
if (chatWindow) {
|
||||
chatWindow.innerHTML = '';
|
||||
}
|
||||
});
|
||||
|
||||
bquit?.addEventListener('click', () => {
|
||||
quitChat(socket);
|
||||
});
|
||||
|
||||
// Enter key to send message
|
||||
sendtextbox.addEventListener('keydown', (event) => {
|
||||
if(!sendtextbox) return;
|
||||
if (event.key === 'Enter') {
|
||||
event.preventDefault();
|
||||
sendButton?.click();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
addRoute('/chat', handleChat);
|
||||
|
|
@ -6,147 +6,38 @@
|
|||
|
||||
@tailwind utilities;
|
||||
|
||||
.btn-style {
|
||||
@apply
|
||||
w-25
|
||||
h-8
|
||||
border
|
||||
border-gray-500
|
||||
rounded-3xl
|
||||
bg-gray-500
|
||||
text-white
|
||||
cursor-pointer
|
||||
shadow-[0_2px_0_0_black]
|
||||
transition-all
|
||||
hover:bg-blue-200
|
||||
active:bg-gray-400
|
||||
active:translate-y-px
|
||||
active:shadow-[0_2px_0_0_black];
|
||||
}
|
||||
|
||||
.chatbox-style {
|
||||
@apply
|
||||
w-162.5
|
||||
h-75 /* increase height if needed */
|
||||
p-2
|
||||
border
|
||||
border-black
|
||||
shadow-2xl
|
||||
text-left
|
||||
text-gray-700
|
||||
bg-white
|
||||
rounded-3xl
|
||||
overflow-y-auto
|
||||
whitespace-pre-line
|
||||
flex
|
||||
flex-col
|
||||
mx-auto;
|
||||
}
|
||||
|
||||
.system-info {
|
||||
@apply
|
||||
h-10
|
||||
bg-gray-200
|
||||
text-gray-700
|
||||
p-3
|
||||
rounded-3xl
|
||||
mb-2 border
|
||||
border-gray-200
|
||||
text-center
|
||||
shadow
|
||||
overflow-y-auto
|
||||
justify-end /* 👈 forces text to bottom */
|
||||
relative; /* needed for overlay */
|
||||
}
|
||||
|
||||
.displaybox {
|
||||
@apply
|
||||
fixed
|
||||
inset-0
|
||||
flex
|
||||
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-212.5
|
||||
p-6 rounded-xl
|
||||
shadow-2xl
|
||||
text-center
|
||||
z-50;
|
||||
}
|
||||
|
||||
.mainboxDisplay button {
|
||||
@apply
|
||||
cursor-pointer
|
||||
}
|
||||
|
||||
.pongbox-style {
|
||||
@apply
|
||||
h-112.5
|
||||
w-200
|
||||
bg-gray-400
|
||||
text-6xl
|
||||
flex
|
||||
items-center
|
||||
justify-center;
|
||||
}
|
||||
|
||||
.text-style {
|
||||
@apply
|
||||
text-black
|
||||
items-center
|
||||
justify-center
|
||||
min-w-[2rem] h-8 px-2
|
||||
rounded-md border border-gray-300
|
||||
bg-gray-100 text-gray-800
|
||||
font-mono text-sm font-medium
|
||||
shadow-sm
|
||||
select-none
|
||||
}
|
||||
|
||||
|
||||
.pong-field {
|
||||
@apply relative w-200 h-112.5 bg-black;
|
||||
}
|
||||
|
||||
.pong-bat {
|
||||
@apply absolute w-3 h-20 bg-white;
|
||||
}
|
||||
|
||||
.pong-batleft {
|
||||
@apply absolute left-4 w-3 h-20 top-0;
|
||||
}
|
||||
|
||||
.pong-batright {
|
||||
@apply absolute right-4 w-3 h-20 top-0;
|
||||
}
|
||||
|
||||
.pong-center-line {
|
||||
@apply
|
||||
absolute
|
||||
left-1/2
|
||||
top-0
|
||||
h-full
|
||||
w-1
|
||||
-translate-x-1/2
|
||||
bg-[linear-gradient(to_bottom,white_50%,transparent_50%)]
|
||||
bg-size-[4px_20px];
|
||||
}
|
||||
|
||||
.pong-end-screen {
|
||||
@apply
|
||||
rounded-2xl
|
||||
absolute
|
||||
justify-center
|
||||
@layer utilities {
|
||||
.gray-color {
|
||||
@apply border-gray-500 bg-gray-500
|
||||
}
|
||||
.white-color {
|
||||
@apply border-white bg-white
|
||||
}
|
||||
.fit-all {
|
||||
@apply
|
||||
w-fit h-fit
|
||||
}
|
||||
.blue-hover {
|
||||
@apply
|
||||
hover:bg-blue-200
|
||||
hover:border-blue-200
|
||||
}
|
||||
.rounded-elem {
|
||||
@apply
|
||||
border-6 rounded-3xl
|
||||
}
|
||||
.circle-8 {
|
||||
@apply w-8 h-8 rounded-full
|
||||
}
|
||||
.base-box {
|
||||
@apply
|
||||
flex items-center justify-center
|
||||
}
|
||||
.focus-elem {
|
||||
@apply
|
||||
z-50
|
||||
shadow-2xl
|
||||
text-center
|
||||
text-black
|
||||
absolute
|
||||
text-xl
|
||||
|
|
@ -224,36 +115,3 @@
|
|||
absolute right-4 top-0;
|
||||
}
|
||||
}
|
||||
|
||||
.pong-protips-key {
|
||||
@apply
|
||||
inline-flex
|
||||
items-center
|
||||
justify-center
|
||||
min-w-[2rem] h-8 px-2
|
||||
rounded-md border border-gray-300
|
||||
bg-gray-100 text-gray-800
|
||||
font-mono text-sm font-medium
|
||||
shadow-sm
|
||||
select-none
|
||||
}
|
||||
|
||||
.pong-how-to-play {
|
||||
@apply
|
||||
inline-flex items-center justify-center
|
||||
rounded-full w-8 h-8 bg-blue-500
|
||||
border-10 border-blue-500
|
||||
}
|
||||
|
||||
.chatPopUp {
|
||||
@apply
|
||||
fixed
|
||||
inset-0
|
||||
flex
|
||||
justify-center
|
||||
items-center;
|
||||
}
|
||||
|
||||
.hidden{
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -125,7 +125,6 @@ function pongClient(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
|
|||
navigateTo("/app");
|
||||
return;
|
||||
}
|
||||
|
||||
if (
|
||||
!batLeft ||
|
||||
!batRight ||
|
||||
|
|
@ -143,8 +142,7 @@ function pongClient(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
|
|||
!tour_infos
|
||||
)
|
||||
// sanity check
|
||||
return showError("fatal error"); <a href="/chat" class="hover:bg-gray-700 rounded-md px-3 py-2">👤 Chat</a>
|
||||
|
||||
return showError("fatal error");
|
||||
if (!how_to_play_btn || !protips) showError("missing protips"); // not a fatal error
|
||||
|
||||
tournamentBtn.addEventListener("click", () => {
|
||||
|
|
@ -181,16 +179,6 @@ function pongClient(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
|
|||
how_to_play_btn.innerText =
|
||||
how_to_play_btn.innerText === "?" ? "x" : "?";
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener("keydown", (e) => {keys[e.key.toLowerCase()] = true;});
|
||||
document.addEventListener("keyup", (e) => {keys[e.key.toLowerCase()] = false;});
|
||||
|
||||
setInterval(() => { // key sender
|
||||
if (keys['escape'] === true && protips && how_to_play_btn) {
|
||||
protips.classList.add("hidden");
|
||||
how_to_play_btn.innerText = '?';
|
||||
}
|
||||
|
||||
document.addEventListener("keydown", (e) => {
|
||||
keys[e.key.toLowerCase()] = true;
|
||||
|
|
@ -336,7 +324,6 @@ function pongClient(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
|
|||
queueBtn.innerText = QueueState.InQueu;
|
||||
socket.emit("enqueue");
|
||||
});
|
||||
|
||||
LocalGameBtn.addEventListener("click", () => {
|
||||
if (
|
||||
queueBtn.innerText !== QueueState.Iddle ||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue