Chat moved up to top level now in all services frontend
This commit is contained in:
NigeParis
Nigel
parent
814c389e38
commit
b4af6e08ca
32 changed files with 687 additions and 42 deletions
|
|
@ -6,38 +6,147 @@
|
|||
|
||||
@tailwind utilities;
|
||||
|
||||
@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
|
||||
.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
|
||||
text-black
|
||||
absolute
|
||||
text-xl
|
||||
|
|
@ -115,3 +224,36 @@
|
|||
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,6 +125,7 @@ function pongClient(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
|
|||
navigateTo("/app");
|
||||
return;
|
||||
}
|
||||
|
||||
if (
|
||||
!batLeft ||
|
||||
!batRight ||
|
||||
|
|
@ -142,7 +143,8 @@ function pongClient(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
|
|||
!tour_infos
|
||||
)
|
||||
// sanity check
|
||||
return showError("fatal error");
|
||||
return showError("fatal error"); <a href="/chat" class="hover:bg-gray-700 rounded-md px-3 py-2">👤 Chat</a>
|
||||
|
||||
if (!how_to_play_btn || !protips) showError("missing protips"); // not a fatal error
|
||||
|
||||
tournamentBtn.addEventListener("click", () => {
|
||||
|
|
@ -179,6 +181,16 @@ 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;
|
||||
|
|
@ -324,6 +336,7 @@ 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