clean-up css
This commit is contained in:
bgoulard
Maix0
parent
6d2ebc56ea
commit
ce02e37b81
3 changed files with 154 additions and 222 deletions
|
|
@ -6,186 +6,112 @@
|
|||
|
||||
@tailwind utilities;
|
||||
|
||||
.pong-btn-style {
|
||||
@apply
|
||||
min-w-25
|
||||
min-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
|
||||
}
|
||||
|
||||
.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
|
||||
text-center
|
||||
bg-white
|
||||
z-50
|
||||
}
|
||||
|
||||
.pong-rdy-screen {
|
||||
@apply
|
||||
rounded-2xl
|
||||
absolute
|
||||
justify-center
|
||||
text-center text-lg
|
||||
bg-white
|
||||
border-5 border-white
|
||||
z-50
|
||||
text-xl
|
||||
}
|
||||
.pong-bat {
|
||||
@apply absolute w-3 h-20 bg-white;
|
||||
}
|
||||
.disp-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
|
||||
select-none
|
||||
}
|
||||
}
|
||||
|
||||
.pong-protips-box {
|
||||
@apply
|
||||
justify-center
|
||||
absolute
|
||||
bg-white
|
||||
|
||||
border-10
|
||||
rounded-3xl
|
||||
border-white
|
||||
|
||||
text-center
|
||||
text-2xl
|
||||
text-black
|
||||
}
|
||||
|
||||
.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
|
||||
@layer components {
|
||||
.pong-btn-style {
|
||||
@apply
|
||||
text-white
|
||||
cursor-pointer
|
||||
shadow-[0_2px_0_0_black]
|
||||
transition-all
|
||||
active:bg-gray-400
|
||||
active:translate-y-px
|
||||
active:shadow-[0_2px_0_0_black];
|
||||
}
|
||||
.page-title {
|
||||
@apply text-3xl font-bold text-gray-800
|
||||
}
|
||||
.displaybox {
|
||||
@apply bg-[#43536b];
|
||||
}
|
||||
/* pong decorative */
|
||||
.pong-mainboxDisplay {
|
||||
@apply
|
||||
fixed
|
||||
top-1/2
|
||||
left-1/2
|
||||
-translate-x-1/2
|
||||
-translate-y-1/2
|
||||
w-212.5
|
||||
bg-gray-200 border-gray-200
|
||||
p-6
|
||||
}
|
||||
.pongbox-style {
|
||||
@apply
|
||||
h-112.5
|
||||
w-200
|
||||
}
|
||||
.pong-field {
|
||||
@apply relative w-200 h-112.5 bg-black;
|
||||
}
|
||||
.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];
|
||||
}
|
||||
/* game pong moving elements */
|
||||
.pong-batleft {
|
||||
@apply
|
||||
absolute left-4 top-0;
|
||||
}
|
||||
.pong-batright {
|
||||
@apply
|
||||
absolute right-4 top-0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,22 +1,25 @@
|
|||
<div class="displaybox">
|
||||
<div id="mainbox" class="
|
||||
min-w-25 min-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];">
|
||||
<div class="flex flex-col gap-2">
|
||||
<button id="QueueBtn" class="pong-btn-style top-4 left-6">Queue Up</button>
|
||||
<button id="LocalBtn" class="pong-btn-style top-14 left-6">Local Game</button>
|
||||
<div class="base-box displaybox">
|
||||
<div id="mainbox" class="pong-mainboxDisplay rounded-elem">
|
||||
<div class="grid grid-cols-3">
|
||||
<div class="flex flex-col gap-2">
|
||||
<button id="QueueBtn" class="fit-all pong-btn-style gray-color rounded-elem blue-hover">Queue Up</button>
|
||||
<button id="LocalBtn" class="fit-all pong-btn-style gray-color rounded-elem blue-hover">Local Game</button>
|
||||
<button id="TourBtn" class="fit-all pong-btn-style gray-color rounded-elem blue-hover">
|
||||
<span class="mx-2">Create Tournament</span>
|
||||
</button> <!-- tournament hdl -->
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<h1 class="page-title">Pong Box</h1>
|
||||
<br>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2 items-end">
|
||||
<span id="queue-info" class="fit-all rounded-elem gray-color text-white">?👤 ?⏳ ?▮•▮</span> <!-- total | in queue | games-->
|
||||
<button id="play-info" class="circle-8 pong-btn-style gray-color blue-hover">?</button> <!-- how to play? pong-how-to-play rounded-elem rounded-full blue-hover-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2 items-end">
|
||||
<span id="queue-info" class="flex rounded-3xl border-7 border-gray-500 bg-gray-500 top-4 right-6">?👤 ?⏳ ?▮•▮</span> <!-- total | in queue | games-->
|
||||
<button id="play-info" class="pong-how-to-play top-14 right-6">?</button> <!-- how to play?-->
|
||||
</div>
|
||||
<br>
|
||||
<h1 class="text-3xl font-bold text-gray-800">Pong Box</h1>
|
||||
<br>
|
||||
|
||||
<!-- Horizontal Message Box -->
|
||||
<div id="score-box" class="grid grid-cols-[1fr_auto_1fr] items-center">
|
||||
<div id="score-box" class="grid grid-cols-3 items-center">
|
||||
<h1 id="player-left"></h1>
|
||||
<h1 id="score-board" class="justify-self-center text-p10 font-bold text-gray-800">0:0</h1>
|
||||
<h1 id="player-right"></h1>
|
||||
|
|
@ -24,8 +27,9 @@
|
|||
<!-- Pong Box -->
|
||||
<div class="flex justify-center mt-2">
|
||||
<div id="pongspace" class="flex flex-col">
|
||||
<div id="pongbox" class="pongbox-style">
|
||||
<div id="protips-box" class="pong-protips-box z-50 hidden">
|
||||
<div id="pongbox" class="pongbox-style base-box">
|
||||
<div id="pong-end-screen" class="white-color rounded-elem focus-elem hidden">you won</div>
|
||||
<div id="protips-box" class="white-color rounded-elem focus-elem text-2xl hidden">
|
||||
up:
|
||||
<kbd class="pong-protips-key">W</kbd>
|
||||
down:
|
||||
|
|
@ -36,20 +40,20 @@
|
|||
<br>
|
||||
<span class="text-gray-400">local games keys for the left paddle:<br>
|
||||
up:
|
||||
<kbd class="pong-protips-key">O</kbd>
|
||||
<kbd class="disp-key">O</kbd>
|
||||
down:
|
||||
<kbd class="pong-protips-key">L</kbd>
|
||||
<kbd class="disp-key">L</kbd>
|
||||
</span>
|
||||
</div>
|
||||
<button class="pong-rdy-screen" id="readyup-btn">ready!</button>
|
||||
</div>
|
||||
<button id="readyup-btn" class="justify-center white-color focus-elem rounded-elem">ready!</button>
|
||||
<div class="pong-field">
|
||||
<div id="batleft" class="pong-batleft top-0"></div>
|
||||
<div id="batleft" class="pong-bat pong-batleft top-0"></div>
|
||||
<div class="pong-center-line"></div>
|
||||
<div id="batright" class="pong-batright top-0"></div>
|
||||
<div id="batright" class="pong-bat pong-batright top-0"></div>
|
||||
<div id="ball" class="rounded-full border-4 bg-white border-gray-400"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -60,11 +60,14 @@ export function getSocket(): CSocket {
|
|||
return window.__state.pongSock;
|
||||
}
|
||||
|
||||
function pongClient(
|
||||
_url: string,
|
||||
_args: RouteHandlerParams,
|
||||
): RouteHandlerReturn {
|
||||
setTitle("Pong Game Page");
|
||||
function pongClient(_url: string, _args: RouteHandlerParams): RouteHandlerReturn {
|
||||
setTitle('Pong Game Page');
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const game_req_join = urlParams.get("game");
|
||||
if (game_req_join) {
|
||||
showError("currently not supporting the act of joining game (even as a spectator)");
|
||||
}
|
||||
|
||||
return {
|
||||
html: authHtml,
|
||||
postInsert: async (app) => {
|
||||
|
|
@ -98,6 +101,8 @@ function pongClient(
|
|||
document.querySelector<HTMLButtonElement>("#play-info");
|
||||
const protips =
|
||||
document.querySelector<HTMLDivElement>("#protips-box");
|
||||
const end_scr =
|
||||
document.querySelector<HTMLDivElement>("#pong-end-screen");
|
||||
const tournamentBtn =
|
||||
document.querySelector<HTMLButtonElement>("#TourBtn");
|
||||
|
||||
|
|
@ -120,6 +125,7 @@ function pongClient(
|
|||
!queue_infos ||
|
||||
!LocalGameBtn ||
|
||||
!rdy_btn ||
|
||||
!end_scr ||
|
||||
!tournamentBtn
|
||||
)
|
||||
// sanity check
|
||||
|
|
@ -368,20 +374,16 @@ function pongClient(
|
|||
queueBtn.style.color = "white";
|
||||
|
||||
if (!isNullish(currentGame)) {
|
||||
let new_div = document.createElement("div");
|
||||
let end_txt = "";
|
||||
if (
|
||||
(user.id === currentGame.left.id &&
|
||||
winner === "left") ||
|
||||
(user.id === currentGame.right.id && winner === "right")
|
||||
)
|
||||
end_txt = "won! #yippe";
|
||||
else end_txt = "lost #sadge";
|
||||
new_div.innerText = "you " + end_txt;
|
||||
new_div.className = "pong-end-screen";
|
||||
gameBoard.appendChild(new_div);
|
||||
let end_txt : string = '';
|
||||
if ((user.id === currentGame.left.id && winner === 'left') ||
|
||||
(user.id === currentGame.right.id && winner === 'right'))
|
||||
end_txt = 'won! #yippe';
|
||||
else
|
||||
end_txt = 'lost #sadge';
|
||||
end_scr.innerText = 'you ' + end_txt;
|
||||
end_scr.classList.remove("hidden");
|
||||
setTimeout(() => {
|
||||
new_div.remove();
|
||||
end_scr.classList.add("hidden");
|
||||
}, 3 * 1000);
|
||||
|
||||
if (currentGame.local) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue