unified front for games done
This commit is contained in:
bgoulard
apetitco
parent
77f24de84d
commit
7ffb3d8ef4
4 changed files with 143 additions and 113 deletions
|
|
@ -42,9 +42,6 @@
|
|||
absolute
|
||||
text-xl
|
||||
}
|
||||
.pong-bat {
|
||||
@apply absolute w-3 h-20 bg-white;
|
||||
}
|
||||
.disp-key {
|
||||
@apply
|
||||
inline-flex
|
||||
|
|
@ -56,9 +53,13 @@
|
|||
font-mono text-sm font-medium
|
||||
select-none
|
||||
}
|
||||
}
|
||||
@layer components {
|
||||
.pong-btn-style {
|
||||
.page-title {
|
||||
@apply text-3xl font-bold text-gray-800
|
||||
}
|
||||
.displaybox {
|
||||
@apply bg-[#43536b];
|
||||
}
|
||||
.dflt-btn-style {
|
||||
@apply
|
||||
text-white
|
||||
cursor-pointer
|
||||
|
|
@ -68,14 +69,7 @@
|
|||
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 {
|
||||
.game-mainBoxDisplay {
|
||||
@apply
|
||||
fixed
|
||||
top-1/2
|
||||
|
|
@ -86,6 +80,11 @@
|
|||
bg-gray-200 border-gray-200
|
||||
p-6
|
||||
}
|
||||
}
|
||||
|
||||
/* PONG ONLY ELEMENTS */
|
||||
@layer components {
|
||||
/* pong decorative */
|
||||
.pongbox-style {
|
||||
@apply
|
||||
h-112.5
|
||||
|
|
@ -106,6 +105,9 @@
|
|||
bg-size-[4px_20px];
|
||||
}
|
||||
/* game pong moving elements */
|
||||
.pong-bat {
|
||||
@apply absolute w-3 h-20 bg-white;
|
||||
}
|
||||
.pong-batleft {
|
||||
@apply
|
||||
absolute left-4 top-0;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<div class="base-box displaybox">
|
||||
<div id="mainbox" class="pong-mainboxDisplay rounded-elem">
|
||||
<div id="mainbox" class="game-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
|
||||
|
|
|
|||
|
|
@ -5,85 +5,112 @@
|
|||
src: url("/fonts/DejaVuSansMono.woff2") format("woff2");
|
||||
}
|
||||
|
||||
.displaybox {
|
||||
@apply
|
||||
fixed
|
||||
inset-0
|
||||
flex
|
||||
items-center
|
||||
justify-center
|
||||
bg-[#43536b];
|
||||
@tailwind utilities;
|
||||
|
||||
}
|
||||
|
||||
.mainboxDisplay {
|
||||
@apply
|
||||
fixed
|
||||
top-1/2
|
||||
left-1/2
|
||||
-translate-x-1/2
|
||||
-translate-y-1/2
|
||||
bg-gray-200
|
||||
p-6 rounded-xl
|
||||
shadow-2xl
|
||||
text-center z-50;
|
||||
}
|
||||
|
||||
|
||||
.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];
|
||||
}
|
||||
|
||||
|
||||
.grid-box {
|
||||
@layer utilities {
|
||||
.gray-color {
|
||||
@apply border-gray-500 bg-gray-500
|
||||
}
|
||||
.white-color {
|
||||
@apply border-white bg-white
|
||||
}
|
||||
.fit-all {
|
||||
@apply
|
||||
bg-white
|
||||
p-8
|
||||
rounded-3xl
|
||||
border
|
||||
border-black
|
||||
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
|
||||
}
|
||||
|
||||
|
||||
.grid-layout {
|
||||
text-center
|
||||
text-black
|
||||
absolute
|
||||
text-xl
|
||||
}
|
||||
.disp-key {
|
||||
@apply
|
||||
|
||||
grid
|
||||
grid-cols-3
|
||||
gap-1
|
||||
max-w-2xl
|
||||
mx-auto
|
||||
}
|
||||
|
||||
.ttt-cell {
|
||||
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
|
||||
}
|
||||
.page-title {
|
||||
@apply text-3xl font-bold text-gray-800
|
||||
}
|
||||
.displaybox {
|
||||
@apply bg-[#43536b];
|
||||
}
|
||||
.dflt-btn-style {
|
||||
@apply
|
||||
bg-black
|
||||
aspect-square
|
||||
flex
|
||||
items-center
|
||||
justify-center
|
||||
text-white
|
||||
text-9xl
|
||||
font-bold
|
||||
hover:bg-gray-500
|
||||
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];
|
||||
}
|
||||
.game-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
|
||||
}
|
||||
}
|
||||
|
||||
#historyBtn {
|
||||
@apply
|
||||
text-white
|
||||
/* TIC-TAC-TOE ONLY ELEMENTS */
|
||||
@layer components {
|
||||
/* ttt decorative */
|
||||
.player-name {
|
||||
@apply
|
||||
font-semibold text-gray-800
|
||||
}
|
||||
.player-timer {
|
||||
@apply
|
||||
text-lg text-gray-800
|
||||
}
|
||||
/* ttt game elements */
|
||||
.ttt-play-area {
|
||||
@apply
|
||||
grid grid-cols-3 gap-1
|
||||
max-w-2xl mx-auto
|
||||
relative overflow-hidden
|
||||
}
|
||||
.ttt-cell {
|
||||
@apply
|
||||
bg-black
|
||||
aspect-square
|
||||
flex
|
||||
items-center
|
||||
justify-center
|
||||
text-white
|
||||
text-9xl
|
||||
font-bold
|
||||
hover:bg-gray-500
|
||||
}
|
||||
}
|
||||
|
|
@ -1,17 +1,21 @@
|
|||
<div class="displaybox">
|
||||
<div class="mainboxDisplay" id="mainbox">
|
||||
<button class="btn-style absolute top-4 left-6" id="historyBtn">History</button>
|
||||
<button class="btn-style absolute top-4 right-6" id="JoinQueueBtn">Join Queue</button>
|
||||
<h1 class="text-3xl font-bold text-gray-800">
|
||||
Tic-tac-toe Box<span id="t-username"></span>
|
||||
</h1><br>
|
||||
<div class="grid grid-cols-[auto_1fr_auto_1fr_auto] items-center rounded-lg px-4 py-3">
|
||||
<div class="text-7xl text-gray-800 mx-4 font-bold" id="playerX">
|
||||
X
|
||||
<div class="base-box displaybox">
|
||||
<div class="game-mainboxDisplay rounded-elem white-color" id="mainbox">
|
||||
<div class="grid grid-cols-[1fr_2fr_1fr] items-center">
|
||||
<div class="flex flex-col gap-2 p-8">
|
||||
<button class="dflt-btn-style fit-all gray-color rounded-elem" id="historyBtn">History</button>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<h1 class="page-title">Tic-tac-toe Box<span id="t-username"></span></h1>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2 p-8 items-end">
|
||||
<button class="dflt-btn-style fit-all gray-color rounded-elem" id="JoinQueueBtn">Join Queue</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-[auto_1fr_auto_1fr_auto] items-center px-4 py-3">
|
||||
<div class="text-7xl text-gray-800 mx-4 font-bold" id="playerX">X</div>
|
||||
<div class="text-left">
|
||||
<div class="font-semibold text-gray-800" id="playerX-name"></div>
|
||||
<div class="text-lg text-gray-800" id="playerX-timer"></div>
|
||||
<div class="player-name" id="playerX-name"></div>
|
||||
<div class="player-timer" id="playerX-timer"></div>
|
||||
</div>
|
||||
|
||||
<div class="text-center text-sm text-gray-800 px-4 whitespace-nowrap">
|
||||
|
|
@ -20,18 +24,15 @@
|
|||
</div>
|
||||
|
||||
<div class="text-right">
|
||||
<div class="font-semibold text-gray-800" id="playerO-name"></div>
|
||||
<div class="text-lg text-gray-800" id="playerO-timer"></div>
|
||||
</div>
|
||||
<div class="text-7xl text-gray-800 mx-4 font-bold" id="playerO">
|
||||
O
|
||||
<div class="player-name" id="playerO-name"></div>
|
||||
<div class="player-timer" id="playerO-timer"></div>
|
||||
</div>
|
||||
<div class="text-7xl text-gray-800 mx-4 font-bold" id="playerO">O</div>
|
||||
</div>
|
||||
<div class="grid-box mt-2">
|
||||
<div class="grid-layout relative rounded-lg overflow-hidden">
|
||||
<div class="absolute inset-0 flex flex-col items-center justify-center z-10 bg-gray-900/85 text-white hidden"
|
||||
id="ttt-end-screen">
|
||||
outcome
|
||||
<div class="rounded-elem white-color p-8 mt-2">
|
||||
<div class="ttt-play-area">
|
||||
<div class="absolute inset-0 flex items-center justify-center">
|
||||
<div class="focus-elem white-color rounded-elem hidden" id="ttt-end-screen">outcome</div>
|
||||
</div>
|
||||
<div class="ttt-cell" id="cell1"></div>
|
||||
<div class="ttt-cell" id="cell2"></div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue