feat(websocket)!: Implement WebSocket connection and event handling
This commit is contained in:
@@ -14,37 +14,44 @@
|
||||
--bs-border-color: rgba(0, 0, 0, 0.125) !important;
|
||||
--bs-heading-color: var(--color) !important;
|
||||
}
|
||||
|
||||
@background-color: var(--background-color);
|
||||
@highlightcolor: var(--highlightscolor);
|
||||
@background-image: var(--background-image);
|
||||
@color: var(--color);
|
||||
@keyframes slideIn {
|
||||
0% { transform: translateX(-100vw); }
|
||||
100% { transform: translateX(0); }
|
||||
0% {
|
||||
transform: translateX(-100vw);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.game-field-background {
|
||||
background-image: @background-image;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
min-height: 100vh;
|
||||
}
|
||||
.lobby-background {
|
||||
background-color: @background-color;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-image: @background-image;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.navbar-header{
|
||||
text-align:center;
|
||||
.lobby-background {
|
||||
background-color: @background-color;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.navbar-header {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.navbar-toggle {
|
||||
float: none;
|
||||
margin-right:0;
|
||||
float: none;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.handcard :hover {
|
||||
box-shadow: 3px 3px 3px @highlightcolor;
|
||||
}
|
||||
@@ -52,7 +59,7 @@
|
||||
.inactive::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0; /* cover the whole container */
|
||||
inset: 0; /* cover the whole container */
|
||||
background: rgba(0, 0, 0, 0.50);
|
||||
z-index: 10;
|
||||
border-radius: 6px;
|
||||
@@ -73,26 +80,26 @@
|
||||
|
||||
/* Ensure body text color follows theme variable and works with Bootstrap */
|
||||
body {
|
||||
color: @color;
|
||||
color: @color;
|
||||
}
|
||||
|
||||
.footer {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: @color;
|
||||
padding: 0.5rem 0;
|
||||
flex-grow: 1; /* fill remaining vertical space as visual footer background */
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: @color;
|
||||
padding: 0.5rem 0;
|
||||
flex-grow: 1; /* fill remaining vertical space as visual footer background */
|
||||
}
|
||||
|
||||
.game-field {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
overflow: auto;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.navbar-drop-shadow {
|
||||
box-shadow: 0 1px 15px 0 #000000
|
||||
box-shadow: 0 1px 15px 0 #000000
|
||||
}
|
||||
|
||||
.ingame-side-shadow {
|
||||
@@ -100,126 +107,164 @@ body {
|
||||
}
|
||||
|
||||
#sessions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
h1 {
|
||||
animation: slideIn 0.5s ease-out forwards;
|
||||
animation-fill-mode: backwards;
|
||||
}
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
|
||||
h1 {
|
||||
animation: slideIn 0.5s ease-out forwards;
|
||||
animation-fill-mode: backwards;
|
||||
}
|
||||
}
|
||||
|
||||
#textanimation {
|
||||
animation: slideIn 0.5s ease-out forwards;
|
||||
animation-fill-mode: backwards;
|
||||
animation-delay: 1s;
|
||||
animation: slideIn 0.5s ease-out forwards;
|
||||
animation-fill-mode: backwards;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
#sessions a, #sessions h1, #sessions p {
|
||||
color: @color;
|
||||
font-size: 40px;
|
||||
font-family: Arial, serif;
|
||||
color: @color;
|
||||
font-size: 40px;
|
||||
font-family: Arial, serif;
|
||||
}
|
||||
|
||||
#ingame {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#ingame a, #ingame h1, #ingame p {
|
||||
color: @color;
|
||||
font-size: 40px;
|
||||
font-family: Arial, serif;
|
||||
color: @color;
|
||||
font-size: 40px;
|
||||
font-family: Arial, serif;
|
||||
}
|
||||
|
||||
.ingame-cards-slide {
|
||||
div {
|
||||
animation: slideIn 0.5s ease-out forwards;
|
||||
animation-fill-mode: backwards;
|
||||
&:nth-child(1) { animation-delay: 0.5s; }
|
||||
&:nth-child(2) { animation-delay: 1s; }
|
||||
&:nth-child(3) { animation-delay: 1.5s; }
|
||||
&:nth-child(4) { animation-delay: 2s; }
|
||||
&:nth-child(5) { animation-delay: 2.5s; }
|
||||
&:nth-child(6) { animation-delay: 3s; }
|
||||
&:nth-child(7) { animation-delay: 3.5s; }
|
||||
|
||||
&:nth-child(1) {
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
animation-delay: 1.5s;
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
animation-delay: 2s;
|
||||
}
|
||||
|
||||
&:nth-child(5) {
|
||||
animation-delay: 2.5s;
|
||||
}
|
||||
|
||||
&:nth-child(6) {
|
||||
animation-delay: 3s;
|
||||
}
|
||||
|
||||
&:nth-child(7) {
|
||||
animation-delay: 3.5s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#playedcardplayer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
#playedcardplayer p {
|
||||
font-size: 12px;
|
||||
height: 4%;
|
||||
font-size: 12px;
|
||||
height: 4%;
|
||||
}
|
||||
|
||||
#playedcardplayer img {
|
||||
height: 90%;
|
||||
height: 90%;
|
||||
}
|
||||
|
||||
#firstCard {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 20%;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 20%;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#firstCardObject {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-right: 4%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-right: 4%;
|
||||
}
|
||||
#firstCardObject img{
|
||||
height: 90%;
|
||||
|
||||
#firstCardObject img {
|
||||
height: 90%;
|
||||
}
|
||||
#firstCardObject p{
|
||||
height: 10%;
|
||||
font-size: 20px;
|
||||
|
||||
#firstCardObject p {
|
||||
height: 10%;
|
||||
font-size: 20px;
|
||||
|
||||
}
|
||||
|
||||
#nextPlayers {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
height: 0;
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
height: 0;
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#invisible {
|
||||
visibility: hidden;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
#selecttrumpsuit {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#rules {
|
||||
color: @color;
|
||||
font-size: 1.5em;
|
||||
font-family: Arial, serif;
|
||||
color: @color;
|
||||
font-size: 1.5em;
|
||||
font-family: Arial, serif;
|
||||
}
|
||||
|
||||
.score-table {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 8px;
|
||||
padding: 10px;
|
||||
margin-bottom: 20px;
|
||||
backdrop-filter: blur(8px);
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 8px;
|
||||
padding: 10px;
|
||||
margin-bottom: 20px;
|
||||
backdrop-filter: blur(8px);
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.score-header {
|
||||
font-weight: bold;
|
||||
color: #000000;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
|
||||
font-weight: bold;
|
||||
color: #000000;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.score-row {
|
||||
color: #000000;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
/* In-game centered stage and blurred sides overlay */
|
||||
@@ -243,12 +288,12 @@ body {
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
/* fallback: subtle vignette if backdrop-filter unsupported */
|
||||
background: radial-gradient(ellipse at center, rgba(0,0,0,0) 30%, rgba(0,0,0,0.35) 100%);
|
||||
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.35) 100%);
|
||||
}
|
||||
|
||||
@supports ((-webkit-backdrop-filter: blur(8px)) or (backdrop-filter: blur(8px))) {
|
||||
.blur-sides::before {
|
||||
background: rgba(0,0,0,0.08);
|
||||
background: rgba(0, 0, 0, 0.08);
|
||||
-webkit-backdrop-filter: blur(10px) saturate(110%);
|
||||
backdrop-filter: blur(10px) saturate(110%);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user