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;
|
@tailwind utilities;
|
||||||
|
|
||||||
.btn-style {
|
@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
|
@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
|
hover:bg-blue-200
|
||||||
active:bg-gray-400
|
hover:border-blue-200
|
||||||
active:translate-y-px
|
|
||||||
active:shadow-[0_2px_0_0_black];
|
|
||||||
}
|
}
|
||||||
|
.rounded-elem {
|
||||||
.chatbox-style {
|
|
||||||
@apply
|
@apply
|
||||||
w-162.5
|
border-6 rounded-3xl
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
|
.circle-8 {
|
||||||
.system-info {
|
@apply w-8 h-8 rounded-full
|
||||||
@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 */
|
|
||||||
}
|
}
|
||||||
|
.base-box {
|
||||||
.displaybox {
|
|
||||||
@apply
|
@apply
|
||||||
fixed
|
flex items-center justify-center
|
||||||
inset-0
|
|
||||||
flex
|
|
||||||
items-center
|
|
||||||
justify-center
|
|
||||||
bg-[#43536b];
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
.focus-elem {
|
||||||
.mainboxDisplay {
|
|
||||||
@apply
|
@apply
|
||||||
fixed
|
z-50
|
||||||
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
|
shadow-2xl
|
||||||
text-center
|
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
|
|
||||||
text-black
|
text-black
|
||||||
absolute
|
absolute
|
||||||
text-xl
|
text-xl
|
||||||
|
|
@ -224,36 +115,3 @@
|
||||||
absolute right-4 top-0;
|
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");
|
navigateTo("/app");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (
|
if (
|
||||||
!batLeft ||
|
!batLeft ||
|
||||||
!batRight ||
|
!batRight ||
|
||||||
|
|
@ -143,8 +142,7 @@ function pongClient(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
|
||||||
!tour_infos
|
!tour_infos
|
||||||
)
|
)
|
||||||
// sanity check
|
// 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
|
if (!how_to_play_btn || !protips) showError("missing protips"); // not a fatal error
|
||||||
|
|
||||||
tournamentBtn.addEventListener("click", () => {
|
tournamentBtn.addEventListener("click", () => {
|
||||||
|
|
@ -181,16 +179,6 @@ function pongClient(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
|
||||||
how_to_play_btn.innerText =
|
how_to_play_btn.innerText =
|
||||||
how_to_play_btn.innerText === "?" ? "x" : "?";
|
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) => {
|
document.addEventListener("keydown", (e) => {
|
||||||
keys[e.key.toLowerCase()] = true;
|
keys[e.key.toLowerCase()] = true;
|
||||||
|
|
@ -336,7 +324,6 @@ function pongClient(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
|
||||||
queueBtn.innerText = QueueState.InQueu;
|
queueBtn.innerText = QueueState.InQueu;
|
||||||
socket.emit("enqueue");
|
socket.emit("enqueue");
|
||||||
});
|
});
|
||||||
|
|
||||||
LocalGameBtn.addEventListener("click", () => {
|
LocalGameBtn.addEventListener("click", () => {
|
||||||
if (
|
if (
|
||||||
queueBtn.innerText !== QueueState.Iddle ||
|
queueBtn.innerText !== QueueState.Iddle ||
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue