mirror of
https://github.com/AndrioCelos/TableturfBattleApp.git
synced 2026-03-22 01:44:12 -05:00
656 lines
13 KiB
CSS
656 lines
13 KiB
CSS
/* Fonts */
|
|
|
|
@font-face {
|
|
font-family: 'Splatoon 1';
|
|
src: url('assets/splatoon1.woff2') format('woff2');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Splatoon 2';
|
|
src: url('assets/splatoon2.woff2') format('woff2');
|
|
}
|
|
|
|
/* Body */
|
|
|
|
body {
|
|
color: white;
|
|
background: black;
|
|
font-family: 'Splatoon 2', sans-serif;
|
|
/* Default colours - normally the game data sent from the server will override these */
|
|
--primary-colour-1 : hsl(63, 99%, 49%);
|
|
--special-colour-1 : hsl(38, 100%, 49%);
|
|
--special-accent-colour-1: hsl(60, 95%, 55%);
|
|
--primary-colour-2 : hsl(234, 97%, 64%);
|
|
--special-colour-2 : hsl(184, 99%, 50%);
|
|
--special-accent-colour-2: hsl(180, 17%, 86%);
|
|
--primary-colour-3 : hsl(306, 95%, 50%);
|
|
--special-colour-3 : hsl(270, 95%, 50%);
|
|
--special-accent-colour-3: hsl(285, 95%, 85%);
|
|
--primary-colour-4 : hsl(155, 95%, 50%);
|
|
--special-colour-4 : hsl(120, 95%, 50%);
|
|
--special-accent-colour-4: hsl(135, 95%, 85%);
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-family: 'Splatoon 1', sans-serif;
|
|
font-weight: normal;
|
|
}
|
|
|
|
/* Start section */
|
|
|
|
#preGameSection {
|
|
text-align: center;
|
|
}
|
|
|
|
#logo {
|
|
height: 8em;
|
|
}
|
|
|
|
footer {
|
|
font-family: sans-serif;
|
|
}
|
|
|
|
#preGameImplicitSubmitButton {
|
|
position: absolute;
|
|
left: -9999px;
|
|
}
|
|
|
|
/* Lobby page */
|
|
|
|
#lobbySection:not([hidden]) {
|
|
display: grid;
|
|
grid-template-columns: 27em 1fr;
|
|
}
|
|
|
|
#lobbyPlayerListSection {
|
|
overflow-y: auto;
|
|
height: calc(100vh - 16px);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
#lobbyStageSection, #lobbyDeckSection {
|
|
overflow-y: scroll;
|
|
height: calc(100vh - 16px);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
#playerList {
|
|
padding-left: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
#playerList li {
|
|
width: calc(100% - 3em);
|
|
margin: 0.5em 1em;
|
|
background: #111;
|
|
border-radius: 0.5em;
|
|
padding: 0.5em;
|
|
text-shadow: 1px 1px black;
|
|
}
|
|
|
|
#playerList .filled {
|
|
background: var(--special-colour-1);
|
|
position: relative;
|
|
animation: 0.33s linear playerListFlyIn;
|
|
}
|
|
|
|
#playerList .ready::after {
|
|
content: '\2714';
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0.5em;
|
|
font-weight: bold;
|
|
font-size: x-large;
|
|
}
|
|
|
|
@keyframes playerListFlyIn {
|
|
from { left: -100%; }
|
|
to { left: 0; }
|
|
}
|
|
|
|
/* Stages */
|
|
|
|
#stageList {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.stage, .stageRandom {
|
|
width: 12rem;
|
|
height: 18rem;
|
|
border: 1px solid grey;
|
|
position: relative;
|
|
text-align: center;
|
|
display: flex;
|
|
flex-flow: column;
|
|
margin: 5px;
|
|
}
|
|
|
|
:is(.stage, .stageRandom) input {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.stageBody {
|
|
flex-grow: 1;
|
|
display: flex;
|
|
flex-flow: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
.stageGrid {
|
|
margin: 0 auto;
|
|
border-spacing: 0;
|
|
}
|
|
|
|
.stageGrid td {
|
|
width: 0.5em;
|
|
height: 0.5em;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.stageGrid td.Empty { border: 1px solid grey; }
|
|
.stageGrid td.Start1 { background: var(--special-colour-1); }
|
|
.stageGrid td.Start2 { background: var(--special-colour-2); }
|
|
.stageGrid td.Start3 { background: var(--special-colour-3); }
|
|
.stageGrid td.Start4 { background: var(--special-colour-4); }
|
|
|
|
:is(.stage, .stageRandom):is(:hover, :focus-within):not(.checked, .disabled) {
|
|
background: #80808040;
|
|
}
|
|
:is(.stage, .stageRandom).checked {
|
|
background: #FFFFFF40;
|
|
}
|
|
|
|
/* Cards */
|
|
|
|
.cardBack {
|
|
width: 10rem;
|
|
height: 13rem;
|
|
border: 1px solid grey;
|
|
border-radius: 0.5rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: large;
|
|
}
|
|
|
|
.card {
|
|
font-family: 'Splatoon 1', 'Arial Black', sans-serif;
|
|
font-weight: 599;
|
|
display: inline-block;
|
|
border: 1px solid var(--colour);
|
|
border-radius: 0.5em;
|
|
width: 10em;
|
|
margin: 5px;
|
|
position: relative;
|
|
}
|
|
|
|
.card.common {
|
|
--colour: rgb(89, 49, 255);
|
|
}
|
|
|
|
.card.rare {
|
|
--colour: rgb(231, 180, 39);
|
|
}
|
|
|
|
.card.fresh {
|
|
--colour: white;
|
|
}
|
|
|
|
.cardHeader {
|
|
height: 2.5em;
|
|
display: flex;
|
|
position: relative;
|
|
align-items: center;
|
|
padding: 0 5px;
|
|
justify-content: center;
|
|
}
|
|
|
|
.card input {
|
|
position: absolute;
|
|
z-index: -1;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.cardNumber {
|
|
display: none;
|
|
}
|
|
|
|
|
|
.cardName {
|
|
text-align: center;
|
|
line-height: 1.25em;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.card.common .cardName {
|
|
color: var(--colour);
|
|
}
|
|
.card.rare .cardName {
|
|
background: var(--colour);
|
|
background: linear-gradient(90deg, rgb(255, 242, 129) 0%, rgb(255, 255, 224) 15%, rgb(231, 180, 39) 50%, rgb(255, 255, 224) 85%, rgb(255, 242, 129) 100%);
|
|
background-clip: text;
|
|
color: transparent;
|
|
}
|
|
.card.fresh .cardName {
|
|
background: var(--colour);
|
|
background: linear-gradient(120deg, rgba(253, 217, 169, 1) 0%, rgba(200, 58, 141, 1) 50%, rgba(55, 233, 207, 1) 100%);
|
|
background-clip: text;
|
|
color: transparent;
|
|
flex-grow: 0;
|
|
}
|
|
|
|
.cardGrid {
|
|
margin: 0 auto;
|
|
}
|
|
.cardGrid td {
|
|
width: 0.5em;
|
|
height: 0.5em;
|
|
border: 1px solid gray;
|
|
}
|
|
.cardGrid td.ink { background: hsl(63, 99%, 49%); }
|
|
.cardGrid td.special { background: hsl(38, 100%, 49%); }
|
|
|
|
.cardFooter {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 2.5em;
|
|
}
|
|
|
|
.cardSize {
|
|
display: inline-block;
|
|
width: 2em;
|
|
text-align: center;
|
|
}
|
|
|
|
.cardSpecialCost {
|
|
display: inline-flex;
|
|
width: 6em;
|
|
flex-wrap: wrap-reverse;
|
|
row-gap: 4px;
|
|
}
|
|
|
|
.cardSpecialPoint {
|
|
display: inline-block;
|
|
color: transparent;
|
|
background: var(--special-colour-1);
|
|
width: 1ch;
|
|
height: 1ch;
|
|
margin-right: 0.3em;
|
|
}
|
|
|
|
.card::before {
|
|
/* If it exists */
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: -2;
|
|
opacity: 0.25;
|
|
}
|
|
.card:is(:hover, :focus-within):not(.checked, .disabled)::before {
|
|
content: '';
|
|
background: grey;
|
|
}
|
|
.card.checked::before {
|
|
content: '';
|
|
background: var(--colour);
|
|
}
|
|
|
|
.card.disabled {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/* Board */
|
|
|
|
#gameBoard {
|
|
height: 98vh;
|
|
aspect-ratio: var(--board-width)/var(--board-height);
|
|
table-layout: fixed;
|
|
border-spacing: 0;
|
|
}
|
|
|
|
#gameBoard td { border: 1px solid grey; }
|
|
#gameBoard td.OutOfBounds { border-color: transparent; }
|
|
#gameBoard td.Wall { background: grey; }
|
|
#gameBoard td.Ink1 { background: var(--primary-colour-1); }
|
|
#gameBoard td.Ink2 { background: var(--primary-colour-2); }
|
|
#gameBoard td.Ink3 { background: var(--primary-colour-3); }
|
|
#gameBoard td.Ink4 { background: var(--primary-colour-4); }
|
|
#gameBoard td.SpecialInactive1 { background: var(--special-colour-1); }
|
|
#gameBoard td.SpecialInactive2 { background: var(--special-colour-2); }
|
|
#gameBoard td.SpecialInactive3 { background: var(--special-colour-3); }
|
|
#gameBoard td.SpecialInactive4 { background: var(--special-colour-4); }
|
|
#gameBoard td.SpecialActive1 { background: radial-gradient(circle, var(--special-accent-colour-1) 25%, var(--special-colour-1) 75%); }
|
|
#gameBoard td.SpecialActive2 { background: radial-gradient(circle, var(--special-accent-colour-2) 25%, var(--special-colour-2) 75%); }
|
|
#gameBoard td.SpecialActive3 { background: radial-gradient(circle, var(--special-accent-colour-3) 25%, var(--special-colour-3) 75%); }
|
|
#gameBoard td.SpecialActive4 { background: radial-gradient(circle, var(--special-accent-colour-4) 25%, var(--special-colour-4) 75%); }
|
|
|
|
#gameBoard td.hover {
|
|
position: relative;
|
|
}
|
|
|
|
#gameBoard td.hover::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
#gameBoard td.hover1:not(.hoverillegal)::after { background: var(--primary-colour-1); }
|
|
#gameBoard td.hover2:not(.hoverillegal)::after { background: var(--primary-colour-2); }
|
|
#gameBoard td.hover3:not(.hoverillegal)::after { background: var(--primary-colour-3); }
|
|
#gameBoard td.hover4:not(.hoverillegal)::after { background: var(--primary-colour-4); }
|
|
#gameBoard td.hoverspecial.hover1:not(.hoverillegal)::after { background: var(--special-colour-1); }
|
|
#gameBoard td.hoverspecial.hover2:not(.hoverillegal)::after { background: var(--special-colour-2); }
|
|
#gameBoard td.hoverspecial.hover3:not(.hoverillegal)::after { background: var(--special-colour-3); }
|
|
#gameBoard td.hoverspecial.hover4:not(.hoverillegal)::after { background: var(--special-colour-4); }
|
|
|
|
#gameBoard td.hoverillegal::after { background: grey; }
|
|
|
|
/* Card list */
|
|
|
|
#cardList {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* Game UI */
|
|
|
|
#gameSection:not([hidden]) {
|
|
display: flex;
|
|
}
|
|
|
|
#sidebarSection {
|
|
width: 24em;
|
|
display: flex;
|
|
flex-flow: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.playerBar {
|
|
border-left: 4px solid var(--colour);
|
|
padding-left: 10px;
|
|
}
|
|
.playerBar[data-index="0"] { --colour: var(--primary-colour-1); --special-colour: var(--special-colour-1); }
|
|
.playerBar[data-index="1"] { --colour: var(--primary-colour-2); --special-colour: var(--special-colour-2); }
|
|
.playerBar[data-index="2"] { --colour: var(--primary-colour-3); --special-colour: var(--special-colour-3); }
|
|
.playerBar[data-index="3"] { --colour: var(--primary-colour-4); --special-colour: var(--special-colour-4); }
|
|
|
|
.name {
|
|
font-size: x-large;
|
|
font-weight: bold;
|
|
margin: 0.5em 0;
|
|
}
|
|
|
|
.specialPoints div {
|
|
display: inline-block;
|
|
width: 1em;
|
|
height: 1em;
|
|
border: 1px solid;
|
|
text-align: center;
|
|
}
|
|
|
|
.playerBar .specialPoint {
|
|
color: transparent;
|
|
background: var(--special-colour);
|
|
}
|
|
|
|
.specialPoints div {
|
|
margin-right: 0.25em;
|
|
}
|
|
|
|
.specialPoint:nth-of-type(5n) {
|
|
margin-right: 0.5em;
|
|
}
|
|
|
|
.result {
|
|
font-family: 'Splatoon 1';
|
|
color: var(--colour);
|
|
text-transform: uppercase;
|
|
}
|
|
.result.win {
|
|
font-size: larger;
|
|
}
|
|
|
|
.playerStats {
|
|
margin: 0 1em;
|
|
background: rgba(64, 64, 64);
|
|
color: white;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
text-align: center;
|
|
}
|
|
#gameSection:not(.gameEnded) .playerStats {
|
|
display: none;
|
|
}
|
|
|
|
.statValue {
|
|
font-family: 'Splatoon 1';
|
|
font-size: x-large;
|
|
line-height: 1.5em;
|
|
}
|
|
|
|
#midGameContainer {
|
|
height: 28em;
|
|
}
|
|
|
|
/* Score bar */
|
|
|
|
#scoreSection {
|
|
display: grid;
|
|
grid-template-rows: 1fr 2fr 1fr;
|
|
place-items: center;
|
|
margin: 0 2em;
|
|
}
|
|
|
|
#turnNumberContainer {
|
|
width: 5em;
|
|
height: 5em;
|
|
background: radial-gradient(circle, rgb(128, 128, 128) 0%, rgb(128, 128, 128) 70%, rgba(0, 0, 0, 0) 70%);
|
|
font-family: 'Splatoon 1', sans-serif;
|
|
}
|
|
|
|
#turnNumberContainer p {
|
|
text-align: center;
|
|
margin: 0;
|
|
font-size: small;
|
|
}
|
|
|
|
#turnNumberLabel {
|
|
text-align: center;
|
|
font-size: x-large;
|
|
}
|
|
#turnNumberLabel.nowOrNever {
|
|
color: red;
|
|
}
|
|
|
|
#pointsContainers {
|
|
grid-row: 2;
|
|
}
|
|
|
|
.pointsContainer {
|
|
width: 5em;
|
|
height: 5em;
|
|
}
|
|
|
|
.pointsContainer:not([hidden]) {
|
|
position: relative;
|
|
display: flex;
|
|
font-family: 'Splatoon 1', sans-serif;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.points {
|
|
font-size: xx-large;
|
|
}
|
|
|
|
.pointsToContainer {
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
}
|
|
|
|
.pointsContainer[data-index="0"] { --colour: var(--primary-colour-1); }
|
|
.pointsContainer[data-index="1"] { --colour: var(--primary-colour-2); }
|
|
.pointsContainer[data-index="2"] { --colour: var(--primary-colour-3); }
|
|
.pointsContainer[data-index="3"] { --colour: var(--primary-colour-4); }
|
|
|
|
.pointsContainer::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
opacity: 0.5;
|
|
z-index: -1;
|
|
background: radial-gradient(circle, var(--colour) 0%, var(--colour) 70%, rgba(0, 0, 0, 0) 70%);
|
|
}
|
|
|
|
.pointsContainer {
|
|
color: var(--colour);
|
|
margin: 2em 0;
|
|
}
|
|
|
|
.pointsDelta {
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 1em;
|
|
}
|
|
|
|
/* Board section */
|
|
|
|
#boardSection {
|
|
position: relative;
|
|
}
|
|
|
|
#redrawModal {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: #000000C0;
|
|
}
|
|
|
|
#redrawModel:not([hidden]) {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-flow: column;
|
|
}
|
|
|
|
#redrawBox {
|
|
/* display: flex; */
|
|
border: 1px solid grey;
|
|
width: 15em;
|
|
height: 10em;
|
|
background: black;
|
|
text-align: center;
|
|
margin-top: 12em;
|
|
}
|
|
|
|
#playsSection {
|
|
display: flex;
|
|
flex-flow: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
/* Error UI */
|
|
|
|
#errorModal {
|
|
background: #00000080;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
#errorModal:not([hidden]) {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
#errorModalBox {
|
|
width: 20em;
|
|
background: black;
|
|
height: 12em;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 1px solid gray;
|
|
}
|
|
|
|
|
|
.specialAttack, .specialAttack::after {
|
|
box-shadow: 0px 0 8px 4px var(--player-colour);
|
|
}
|
|
|
|
.specialAttack::after {
|
|
content: 'Special Attack!';
|
|
position: absolute;
|
|
left: -2em;
|
|
top: 5em;
|
|
right: -2em;
|
|
height: 2em;
|
|
background: var(--player-colour);
|
|
color: black;
|
|
text-align: center;
|
|
font-size: large;
|
|
border-radius: 0.5em;
|
|
animation: 3s forwards specialAttackAnimation;
|
|
}
|
|
|
|
@keyframes specialAttackAnimation {
|
|
from {
|
|
transform: scale(0);
|
|
opacity: 0;
|
|
}
|
|
15% {
|
|
transform: scale(0.9);
|
|
opacity: 1;
|
|
}
|
|
85% {
|
|
transform: scale(1.1);
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
transform: scale(1.1);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.playContainer[data-index="0"] { --player-colour: var(--primary-colour-1); }
|
|
.playContainer[data-index="1"] { --player-colour: var(--primary-colour-2); }
|
|
.playContainer[data-index="2"] { --player-colour: var(--primary-colour-3); }
|
|
.playContainer[data-index="3"] { --player-colour: var(--primary-colour-4); }
|
|
|
|
.passLabel {
|
|
font-family: 'Splatoon 2', sans-serif;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
display: flex;
|
|
background: #00000080;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: large;
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Score section */
|