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