mirror of
https://github.com/AndrioCelos/TableturfBattleApp.git
synced 2026-03-21 17:34:28 -05:00
1253 lines
26 KiB
CSS
1253 lines
26 KiB
CSS
@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, dialog {
|
|
color: white;
|
|
background: black;
|
|
}
|
|
body {
|
|
margin: 0;
|
|
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%);
|
|
--player-primary-colour: var(--primary-colour-1);
|
|
--player-special-colour: var(--special-colour-1);
|
|
--player-special-accent-colour: var(--special-accent-colour-1);
|
|
--player-ui-base-colour: var(--player-primary-colour);
|
|
--player-ui-highlight-colour: var(--player-special-colour);
|
|
--player-ui-highlight2-colour: var(--player-special-accent-colour);
|
|
}
|
|
|
|
#gamePage[data-ui-base-colour-is-special-colour="true"] {
|
|
--player-ui-base-colour: var(--player-special-colour);
|
|
--player-ui-highlight-colour: var(--player-primary-colour);
|
|
}
|
|
#gamePage[data-my-player-index="1"] {
|
|
--player-primary-colour: var(--primary-colour-2);
|
|
--player-special-colour: var(--special-colour-2);
|
|
--player-special-accent-colour: var(--special-accent-colour-2);
|
|
}
|
|
#gamePage[data-my-player-index="2"] {
|
|
--player-primary-colour: var(--primary-colour-3);
|
|
--player-special-colour: var(--special-colour-3);
|
|
--player-special-accent-colour: var(--special-accent-colour-3);
|
|
}
|
|
#gamePage[data-my-player-index="3"] {
|
|
--player-primary-colour: var(--primary-colour-4);
|
|
--player-special-colour: var(--special-colour-4);
|
|
--player-special-accent-colour: var(--special-accent-colour-4);
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-family: 'Splatoon 1', sans-serif;
|
|
font-weight: 599;
|
|
}
|
|
|
|
.error {
|
|
border: 1px solid red;
|
|
background: #ff000040;
|
|
padding: 0 0.5em;
|
|
}
|
|
|
|
/* Home page */
|
|
|
|
#preGamePage {
|
|
text-align: center;
|
|
}
|
|
|
|
#logo {
|
|
height: 8em;
|
|
}
|
|
|
|
footer {
|
|
font-family: sans-serif;
|
|
}
|
|
|
|
#preGameImplicitSubmitButton {
|
|
position: absolute;
|
|
left: -9999px;
|
|
}
|
|
|
|
/* Lobby page */
|
|
|
|
#lobbyPage:not([hidden]) {
|
|
display: grid;
|
|
grid-template-columns: 27em 1fr;
|
|
}
|
|
|
|
.submitButtonContainer {
|
|
display: flex;
|
|
gap: 0.5em;
|
|
align-items: center;
|
|
}
|
|
|
|
#lobbyPlayerListSection {
|
|
overflow-y: auto;
|
|
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; }
|
|
}
|
|
|
|
dialog {
|
|
text-align: center;
|
|
}
|
|
dialog::backdrop {
|
|
background: black;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
#qrCode {
|
|
background: white;
|
|
border: 1em solid white;
|
|
}
|
|
|
|
/* Stages */
|
|
|
|
#stageList {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.stage, .stageRandom {
|
|
width: 12em;
|
|
height: 18em;
|
|
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;
|
|
z-index: -1;
|
|
}
|
|
|
|
.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 */
|
|
|
|
.card, .cardBack {
|
|
box-sizing: border-box;
|
|
width: 10em;
|
|
height: 12em;
|
|
border: 1px solid var(--colour);
|
|
border-radius: 0.5em;
|
|
}
|
|
|
|
.cardBack {
|
|
--colour: grey;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.card {
|
|
position: relative;
|
|
font-family: 'Splatoon 1', 'Arial Black', sans-serif;
|
|
font-weight: 599;
|
|
display: inline-block;
|
|
margin: 0.5em;
|
|
}
|
|
|
|
.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[data-card-number="166"] .cardName {
|
|
position: absolute;
|
|
left: -1em;
|
|
right: -1em;
|
|
transform: scaleX(0.8);
|
|
}
|
|
|
|
.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;
|
|
border-spacing: 0;
|
|
}
|
|
.cardGrid td {
|
|
width: 0.5em;
|
|
height: 0.5em;
|
|
border: 1px solid grey;
|
|
}
|
|
.cardGrid td.ink { background: var(--player-primary-colour); border: 1px solid var(--player-primary-colour);}
|
|
.cardGrid td.special { background: var(--player-special-colour); border: 1px solid var(--player-special-colour);}
|
|
|
|
.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(--player-special-colour);
|
|
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: calc(3.5% * var(--board-height));
|
|
aspect-ratio: var(--board-width)/var(--board-height);
|
|
table-layout: fixed;
|
|
border-spacing: 0;
|
|
margin: auto;
|
|
}
|
|
|
|
#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;
|
|
overflow-y: scroll;
|
|
grid-row: 2;
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
/* Game page */
|
|
|
|
#gamePage:not([hidden]) {
|
|
display: grid;
|
|
grid-template-columns: 11em 11em [score-column] 1fr [board-column] auto 1fr [play-column-1] 10em [play-column-2] 10em;
|
|
grid-template-rows: [player-row-1] auto [player-row-3] auto [hand-row] 1fr [player-row-2] auto [player-row-0] auto;
|
|
height: 100vh;
|
|
}
|
|
#gamePage:where([data-players="2"]):not([hidden]) {
|
|
grid-template-columns: 11em 11em [score-column] 1fr [board-column] auto 1fr [play-column-1 play-column-2] 20em;
|
|
}
|
|
|
|
.playerBar[data-index="0"] {
|
|
--colour: var(--primary-colour-1);
|
|
--special-colour: var(--special-colour-1);
|
|
grid-row: player-row-0;
|
|
}
|
|
.playerBar[data-index="1"] {
|
|
--colour: var(--primary-colour-2);
|
|
--special-colour: var(--special-colour-2);
|
|
grid-row: player-row-1;
|
|
}
|
|
.playerBar[data-index="2"] {
|
|
--colour: var(--primary-colour-3);
|
|
--special-colour: var(--special-colour-3);
|
|
grid-row: player-row-2;
|
|
}
|
|
.playerBar[data-index="3"] {
|
|
--colour: var(--primary-colour-4);
|
|
--special-colour: var(--special-colour-4);
|
|
grid-row: player-row-3;
|
|
}
|
|
|
|
.playerBar {
|
|
grid-column: 1 / span 2;
|
|
margin: 0 10px;
|
|
border-left: 8px solid var(--colour);
|
|
padding-left: 10px;
|
|
}
|
|
#gamePage:not([data-players="2"]) .playerBar:is([data-index="1"], [data-index="2"]) {
|
|
text-align: right;
|
|
border-right: 8px solid var(--colour);
|
|
padding-right: 10px;
|
|
}
|
|
|
|
#scoreSection {
|
|
grid-column: score-column;
|
|
grid-row: 2 / -2;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
#playControls, #resultContainer, #replayControls {
|
|
grid-column: 1 / span 2;
|
|
grid-row: hand-row;
|
|
align-self: center;
|
|
}
|
|
#playControls:not([hidden]) {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-template-rows: [hand-row] auto [button-row] auto;
|
|
}
|
|
|
|
#handContainer {
|
|
grid-column: 1 / -1;
|
|
grid-row: hand-row;
|
|
text-align: center;
|
|
}
|
|
|
|
#playControls > label {
|
|
grid-row: button-row;
|
|
margin: 0.5em;
|
|
padding: 0 0.5em;
|
|
text-align: center;
|
|
background: var(--player-ui-base-colour);
|
|
text-shadow: 0 0 4px black;
|
|
border-radius: 0.5em;
|
|
}
|
|
#playControls > label input {
|
|
position: absolute;
|
|
left: -333px;
|
|
}
|
|
#playControls > label:hover { background: var(--player-ui-highlight-colour); }
|
|
#playControls > label:focus-within { outline: 2px solid var(--player-ui-highlight2-colour); }
|
|
#playControls > label:is(:active, .checked) { background: var(--player-ui-highlight2-colour); }
|
|
#playControls > label.disabled { background: grey; }
|
|
|
|
#showDeckContainer {
|
|
grid-column: 1 / span 3;
|
|
grid-row: 2 / -2;
|
|
background: black;
|
|
z-index: 2;
|
|
}
|
|
#showDeck {
|
|
display: flex;
|
|
flex-flow: column;
|
|
height: 100%;
|
|
text-align: center;
|
|
}
|
|
#showDeckList {
|
|
display: grid;
|
|
grid-template-columns: auto auto auto;
|
|
list-style-type: none;
|
|
font-size: smaller;
|
|
overflow-y: auto;
|
|
padding: 0;
|
|
margin: 0;
|
|
justify-items: center;
|
|
}
|
|
#showDeckList > li {
|
|
margin: 0.25em;
|
|
border-radius: 0.5em;
|
|
text-align: center;
|
|
}
|
|
#showDeckList > li.inHand {
|
|
outline: 0.25em solid var(--player-ui-highlight-colour);
|
|
}
|
|
#showDeckList > li.used {
|
|
opacity: 0.35;
|
|
}
|
|
#showDeckCloseButton {
|
|
border: none;
|
|
font-family: inherit;
|
|
color: inherit;
|
|
width: 40%;
|
|
grid-row: button-row;
|
|
margin: 1em;
|
|
padding: 0 0.5em;
|
|
text-align: center;
|
|
background: var(--player-ui-base-colour);
|
|
text-shadow: 0 0 4px black;
|
|
border-radius: 0.5em;
|
|
}
|
|
#showDeckCloseButton:hover { background: var(--player-ui-highlight-colour); }
|
|
#showDeckCloseButton:focus-within { outline: 2px solid var(--player-ui-highlight2-colour); }
|
|
#showDeckCloseButton:active { background: var(--player-ui-highlight2-colour); }
|
|
|
|
.playContainer { text-align: center; }
|
|
|
|
.playContainer[data-index="0"] { grid-column: play-column-1; grid-row: 2 / -1; align-self: end; }
|
|
.playContainer[data-index="1"] { grid-column: play-column-2; grid-row: 1 / 4; align-self: start; }
|
|
.playContainer[data-index="2"] { grid-column: play-column-2; grid-row: 2 / -1; align-self: end; }
|
|
.playContainer[data-index="3"] { grid-column: play-column-1; grid-row: 1 / 4; align-self: start; }
|
|
|
|
.playContainer .card {
|
|
margin: 0;
|
|
}
|
|
|
|
#gameButtonsContainer {
|
|
grid-column: score-column;
|
|
grid-row: 1 / -1;
|
|
align-self: end;
|
|
flex-flow: column;
|
|
align-items: center;
|
|
z-index: 1;
|
|
}
|
|
#gameButtonsContainer:not([hidden]) {
|
|
display: flex;
|
|
}
|
|
|
|
#gameButtonsContainer button {
|
|
background: none;
|
|
border: none;
|
|
color: var(--player-ui-base-colour);
|
|
opacity: 0.5;
|
|
font-size: 400%;
|
|
width: 1.5em;
|
|
height: 1.5em;
|
|
}
|
|
#gameButtonsContainer button:is(:hover, :focus) {
|
|
opacity: 1;
|
|
}
|
|
#gameButtonsContainer button:active {
|
|
opacity: 1;
|
|
color: var(--player-ui-highlight-colour);
|
|
}
|
|
|
|
#boardSection {
|
|
grid-column: board-column;
|
|
grid-row: 1 / -1;
|
|
align-self: center;
|
|
position: relative;
|
|
height: min(100vh, calc(100vw - 30em));
|
|
aspect-ratio: 19 / 26;
|
|
display: flex;
|
|
}
|
|
|
|
/* Player bars */
|
|
|
|
.name {
|
|
font-size: 150%;
|
|
font-weight: 599;
|
|
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;
|
|
}
|
|
#gamePage:not(.gameEnded) .playerStats {
|
|
display: none;
|
|
}
|
|
|
|
.statValue {
|
|
font-family: 'Splatoon 1';
|
|
font-size: 150%;
|
|
line-height: 1.5em;
|
|
}
|
|
|
|
#midGameContainer {
|
|
height: 28em;
|
|
}
|
|
|
|
/* Score bar */
|
|
|
|
#turnNumberContainer {
|
|
grid-column: score-column;
|
|
grid-row: 1 / 4;
|
|
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;
|
|
justify-self: center;
|
|
margin-top: 2em;
|
|
}
|
|
|
|
#turnNumberContainer p {
|
|
text-align: center;
|
|
margin: 0;
|
|
font-size: smaller;
|
|
}
|
|
|
|
#turnNumberLabel {
|
|
text-align: center;
|
|
font-size: 150%;
|
|
}
|
|
#turnNumberLabel.nowOrNever {
|
|
color: red;
|
|
}
|
|
|
|
.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: 200%;
|
|
}
|
|
|
|
.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 */
|
|
|
|
#redrawModal {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: #000000C0;
|
|
}
|
|
|
|
#redrawModal:not([hidden]) {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
#redrawBox {
|
|
border: 1px solid grey;
|
|
width: 15em;
|
|
height: 10em;
|
|
background: black;
|
|
text-align: center;
|
|
}
|
|
|
|
#playsSection {
|
|
display: flex;
|
|
flex-flow: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
/* Error UI */
|
|
|
|
#errorDialog[open] {
|
|
width: 20em;
|
|
height: 12em;
|
|
display: flex;
|
|
flex-flow: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
|
|
.specialAttack, .specialAttack::after {
|
|
box-shadow: 0px 0 8px 4px var(--player-colour);
|
|
}
|
|
|
|
.specialAttack::after {
|
|
content: 'Special Attack!';
|
|
position: absolute;
|
|
left: -2em;
|
|
top: 4em;
|
|
right: -2em;
|
|
height: 2em;
|
|
background: var(--player-colour);
|
|
color: black;
|
|
text-align: center;
|
|
font-size: larger;
|
|
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: larger;
|
|
}
|
|
|
|
/* Deck editor */
|
|
|
|
:is(#deckListPage, #deckEditPage):not([hidden]) {
|
|
height: 100vh;
|
|
display: grid;
|
|
grid-template-columns: auto auto;
|
|
}
|
|
|
|
.deckList > label, #addDeckControls > button {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-family: inherit;
|
|
color: inherit;
|
|
font-size: inherit;
|
|
border: inherit;
|
|
text-shadow: 0 0 4px black;
|
|
}
|
|
.deckList > * {
|
|
width: 20rem;
|
|
height: 3rem;
|
|
margin: 0.5em;
|
|
}
|
|
.deckList > label { background: var(--primary-colour-2); }
|
|
.deckList > label:hover { background: var(--special-colour-2); }
|
|
.deckList > label:focus-within { outline: 2px solid var(--special-accent-colour-2); }
|
|
.deckList > label:is(:active, .checked) { background: var(--special-accent-colour-2); }
|
|
.deckList > label.disabled { background: grey; }
|
|
#addDeckControls {
|
|
display: flex;
|
|
align-items: stretch;
|
|
gap: 1em;
|
|
}
|
|
#addDeckControls > button {
|
|
flex-grow: 1;
|
|
background: black;
|
|
border: 0.25em solid var(--primary-colour-2);
|
|
}
|
|
#addDeckControls > button:hover { border-color: var(--special-colour-2); }
|
|
#addDeckControls > button:focus-within { outline: 2px solid var(--special-accent-colour-2); }
|
|
#addDeckControls > button:is(:active, .checked) { border-color: var(--special-accent-colour-2); }
|
|
|
|
.deckList {
|
|
display: flex;
|
|
flex-flow: column;
|
|
}
|
|
|
|
.deckList input {
|
|
position: absolute;
|
|
left: -333px;
|
|
}
|
|
|
|
.card.emptySlot {
|
|
--colour: dimgrey;
|
|
}
|
|
|
|
#deckCardListView, #deckCardListEdit {
|
|
display: grid;
|
|
grid-template-columns: auto auto auto;
|
|
justify-content: center;
|
|
grid-column: 2;
|
|
grid-row: 1 / 5;
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
#deckEditorDeckViewSection:not([hidden]), #deckEditordeckEditPage {
|
|
display: grid;
|
|
grid-template-columns: minmax(min-content, auto) min-content;
|
|
grid-template-rows: auto auto auto 1fr;
|
|
height: 100vh;
|
|
}
|
|
|
|
#deckViewBackButton, #deckCardListBackButton {
|
|
display: none;
|
|
}
|
|
|
|
#deckName, #deckName2 {
|
|
grid-column: 1;
|
|
grid-row: 1;
|
|
}
|
|
|
|
:is(#deckEditorDeckViewSection, #deckEditordeckEditPage) > h3 + div {
|
|
grid-row: 2;
|
|
grid-column: 1;
|
|
}
|
|
|
|
.deckSizeContainer {
|
|
grid-column: 1;
|
|
grid-row: 3;
|
|
}
|
|
|
|
#deckEditorCardListSection {
|
|
height: 100vh;
|
|
display: grid;
|
|
grid-template-rows: auto 1fr;
|
|
grid-template-columns: auto 1fr;
|
|
gap: 1em;
|
|
}
|
|
|
|
#deckEditorCardListSection > label {
|
|
grid-column: 2;
|
|
grid-row: 1;
|
|
}
|
|
|
|
#deckEditorCardListBackdrop {
|
|
display: none;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: black;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/* Small display layout */
|
|
@media (max-width: 89rem) or (max-height: 42rem) {
|
|
#gamePage, #deckCardListView, #deckCardListEdit {
|
|
font-size: small;
|
|
}
|
|
#cardList {
|
|
font-size: 75%;
|
|
grid-row: 2;
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
#gamePage:not([hidden]) {
|
|
grid-template-columns: 11em 11em [score-column] 1fr [board-column] auto 1fr [play-column-1 play-column-2] 10em;
|
|
}
|
|
|
|
.playContainer { position: relative; }
|
|
#gamePage:not([data-players="2"]) .playContainer[data-index="0"] {
|
|
left: -3em;
|
|
}
|
|
#gamePage:not([data-players="2"]) .playContainer[data-index="2"] {
|
|
top: -3em;
|
|
}
|
|
#gamePage:not([data-players="2"]) .playContainer[data-index="3"] {
|
|
left: -3em;
|
|
top: 3em;
|
|
}
|
|
.playerBar[data-index="0"] {
|
|
grid-row: player-row-0;
|
|
}
|
|
.playerBar[data-index="1"] {
|
|
grid-row: player-row-1;
|
|
}
|
|
.playerBar[data-index="2"] {
|
|
grid-row: player-row-0;
|
|
}
|
|
.playerBar[data-index="3"] {
|
|
grid-row: player-row-1;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 40rem) {
|
|
.card {
|
|
margin: 0;
|
|
width: auto;
|
|
}
|
|
|
|
/* Lobby - Mobile layout */
|
|
|
|
#lobbyPage:not([hidden]) {
|
|
grid-template-rows: auto 1fr;
|
|
grid-template-columns: initial;
|
|
height: 100vh;
|
|
}
|
|
|
|
#lobbyStageSection, #lobbyDeckSection {
|
|
height: initial;
|
|
}
|
|
|
|
#stageList {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
font-size: x-small;
|
|
}
|
|
|
|
.stage, .stageRandom {
|
|
width: auto;
|
|
}
|
|
|
|
/* Game - Mobile layout */
|
|
|
|
#gamePage:not([hidden]) {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr 1fr;
|
|
grid-template-rows: auto 1fr auto auto auto;
|
|
height: 100vh;
|
|
}
|
|
|
|
.playerBar[data-index="0"] { grid-column: 1 / span 4; grid-row: 3; }
|
|
.playerBar[data-index="1"] { grid-column: 1 / span 4; grid-row: 1; }
|
|
.playerBar[data-index="2"] { grid-column: 1 / span 4; grid-row: 3; }
|
|
.playerBar[data-index="3"] { grid-column: 1 / span 4; grid-row: 1; }
|
|
|
|
#boardSection {
|
|
grid-column: 2 / -1;
|
|
grid-row: 2;
|
|
height: initial;
|
|
align-self: stretch;
|
|
}
|
|
|
|
#gameBoard {
|
|
height: min(calc(min(3.5%, calc(75vw / var(--board-width))) * var(--board-height)));
|
|
margin: auto;
|
|
}
|
|
|
|
#playControls:not([hidden]) {
|
|
grid-template-rows: [button-row] auto [hand-row] auto;
|
|
}
|
|
|
|
#playControls, #resultContainer, #replayControls {
|
|
grid-column: 1 / -1;
|
|
grid-row: 5;
|
|
width: initial;
|
|
}
|
|
|
|
#scoreSection {
|
|
grid-column: 1;
|
|
grid-row: 2;
|
|
grid-template-rows: 1fr;
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
#turnNumberContainer {
|
|
grid-column: 1;
|
|
grid-row: 2;
|
|
margin: 0;
|
|
}
|
|
|
|
.pointsContainer {
|
|
margin: 0.5em 0;
|
|
}
|
|
|
|
#handContainer {
|
|
font-size: x-small;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr 1fr;
|
|
grid-template-rows: auto;
|
|
width: 100vw;
|
|
overflow: scroll visible;
|
|
}
|
|
|
|
#showDeckContainer {
|
|
grid-column: 1 / -1;
|
|
grid-row: 2 / -1;
|
|
}
|
|
#showDeckList .card {
|
|
width: 30vw;
|
|
}
|
|
|
|
.playContainer:is([data-index="0"], [data-index="1"], [data-index="2"], [data-index="3"]) {
|
|
font-size: x-small;
|
|
grid-column: 1 / -1;
|
|
z-index: -1;
|
|
display: flex;
|
|
}
|
|
.playContainer[data-index="0"] { grid-row: 2 / span 2; justify-content: start; margin: 0 0 2em 1em; }
|
|
.playContainer[data-index="1"] { grid-row: 1 / span 2; justify-content: end; margin: 2em 1em 0 0; }
|
|
#gamePage[data-players="2"] .playContainer[data-index="0"],
|
|
.playContainer[data-index="2"] { grid-row: 2 / span 2; justify-content: end; margin: 0 1em 2em 0; }
|
|
.playContainer[data-index="3"] { grid-row: 1 / span 2; justify-content: start; margin: 2em 0 0 1em; }
|
|
|
|
#gameButtonsContainer {
|
|
grid-column: 1;
|
|
grid-row: 2;
|
|
}
|
|
|
|
#gameButtonsContainer button {
|
|
font-size: 250%;
|
|
}
|
|
|
|
/* Deck editor - Mobile layout */
|
|
|
|
:is(#deckListPage, #deckEditPage):not([hidden]) {
|
|
display: block;
|
|
}
|
|
|
|
:is(#deckListPage, #deckEditPage) section {
|
|
position: absolute;
|
|
background: black;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
}
|
|
|
|
#deckEditorDeckViewSection:not([hidden]) {
|
|
z-index: 10;
|
|
grid-template-columns: auto 1fr 1fr;
|
|
grid-template-rows: auto auto 1fr;
|
|
}
|
|
|
|
#deckViewBackButton {
|
|
display: block;
|
|
grid-column: 1;
|
|
grid-row: 1;
|
|
}
|
|
|
|
#deckCardListBackButton {
|
|
display: block;
|
|
grid-column: 1;
|
|
grid-row: 1;
|
|
}
|
|
|
|
#deckName {
|
|
grid-column: 2;
|
|
}
|
|
|
|
:is(#deckEditorDeckViewSection, #deckEditordeckEditPage) > h3 + div {
|
|
grid-row: 1;
|
|
grid-column: -2;
|
|
}
|
|
|
|
.deckSizeContainer {
|
|
grid-column: 1 / -1;
|
|
grid-row: 2;
|
|
justify-self: end;
|
|
}
|
|
|
|
#deckCardListView, #deckCardListEdit {
|
|
grid-column: 1 / -1;
|
|
grid-row: 3;
|
|
overflow-y: scroll;
|
|
font-size: 80%;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
}
|
|
|
|
#deckEditorCardListSection:not(.selecting) {
|
|
display: none;
|
|
}
|
|
|
|
#deckEditorCardListSection.selecting + #deckEditorCardListBackdrop {
|
|
display: block;
|
|
}
|
|
|
|
#deckEditPage #deckEditorCardListSection {
|
|
z-index: 1;
|
|
top: 4em;
|
|
height: calc(100vh - 4em);
|
|
}
|
|
|
|
#cardList {
|
|
font-size: 50%;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr 1fr;
|
|
}
|
|
|
|
#cardList .card {
|
|
height: 13em;
|
|
}
|
|
}
|
|
|
|
/* Loading spinner - based on loading.io */
|
|
|
|
.loadingContainer:not([hidden]) {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 0.5em;
|
|
}
|
|
.lds-ripple {
|
|
--border-width: 0.15em;
|
|
position: relative;
|
|
width: 1.5em;
|
|
height: 1.5em;
|
|
display: inline-block;
|
|
}
|
|
.lds-ripple div {
|
|
position: absolute;
|
|
border: var(--border-width) solid #fff;
|
|
opacity: 1;
|
|
border-radius: 50%;
|
|
animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
|
|
}
|
|
.lds-ripple div:nth-child(2) {
|
|
animation-delay: -0.5s;
|
|
}
|
|
@keyframes lds-ripple {
|
|
0% {
|
|
top: calc(50% - var(--border-width));
|
|
left: calc(50% - var(--border-width));
|
|
right: calc(50% - var(--border-width));
|
|
bottom: calc(50% - var(--border-width));
|
|
opacity: 0;
|
|
}
|
|
4.9% {
|
|
top: calc(50% - var(--border-width));
|
|
left: calc(50% - var(--border-width));
|
|
right: calc(50% - var(--border-width));
|
|
bottom: calc(50% - var(--border-width));
|
|
opacity: 0;
|
|
}
|
|
5% {
|
|
top: calc(50% - var(--border-width));
|
|
left: calc(50% - var(--border-width));
|
|
right: calc(50% - var(--border-width));
|
|
bottom: calc(50% - var(--border-width));
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
opacity: 0;
|
|
}
|
|
}
|