mirror of
https://github.com/MaciejkaG/statki.git
synced 2024-11-30 07:42:54 +01:00
MaciejkaG
a212161733
- Improved PWA support on mobile. - Added Vs. AI game menu. - Added the first AI algorithm. - Vs. AI is now available with every option leading to simple bot - Fixed a bug where placing ships in certain rotation around the boundaries of the board would wrongly colour them when sunk. - Improved code clarity and comments - Added an option in the settings to change your nickname - Added version display in the settings - Slightly improved box scaling and layout - Made multiple improvements to the PWA support - Added multiple minor features - Brought back full SPA URL functionality, now if you copy a URL to specific view/page in the menu and go into it, you will actually arrive at that page if it's not restricted.
443 lines
7.7 KiB
CSS
443 lines
7.7 KiB
CSS
.container {
|
|
display: none;
|
|
transition: opacity 0.175s;
|
|
}
|
|
|
|
@keyframes OutAnim {
|
|
from {transform: translateY(0)}
|
|
to {transform: translateY(5%);}
|
|
}
|
|
|
|
@keyframes InAnim {
|
|
from {transform: translateY(-5%)}
|
|
to {transform: translateY(0%);}
|
|
}
|
|
|
|
.bshipstoast {
|
|
background: rgba(0, 0, 0, 0.6);
|
|
backdrop-filter: blur(15px);
|
|
color: white;
|
|
padding: 0.75rem 1rem;
|
|
border-radius: 15px;
|
|
border: solid 2px white;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
nav {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 0.7rem;
|
|
margin: 0.5rem;
|
|
font-family: 'Roboto Mono', monospace;
|
|
}
|
|
|
|
nav span {
|
|
cursor: pointer;
|
|
user-select: none;
|
|
padding: 0.2rem;
|
|
}
|
|
|
|
nav span:hover {
|
|
text-decoration: underline;
|
|
|
|
}
|
|
|
|
.header {
|
|
text-align: center;
|
|
}
|
|
|
|
/* index */
|
|
#mainMenuView .modes {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 2rem;
|
|
}
|
|
|
|
#mainMenuView .modes div {
|
|
height: 10rem;
|
|
width: 10rem;
|
|
background-color: black;
|
|
border: solid 1px white;
|
|
border-radius: 15px;
|
|
padding: 0.5rem 1rem;
|
|
user-select: none;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
#mainMenuView .modes div:hover {
|
|
background-color: white;
|
|
color: black;
|
|
}
|
|
|
|
/* PvP/index */
|
|
#pvpMenuView .modes {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 2rem;
|
|
}
|
|
|
|
#pvpMenuView .modes div {
|
|
height: 10rem;
|
|
width: 10rem;
|
|
background-color: black;
|
|
border: solid 1px white;
|
|
border-radius: 15px;
|
|
padding: 0.5rem 1rem;
|
|
user-select: none;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
#pvpMenuView .modes div:hover {
|
|
background-color: white;
|
|
color: black;
|
|
}
|
|
|
|
/* PvP/create */
|
|
#pvpCreateView .modes {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 2rem;
|
|
}
|
|
|
|
#pvpCreateView .modes div {
|
|
width: 15rem;
|
|
background-color: black;
|
|
border: solid 1px white;
|
|
border-radius: 15px;
|
|
user-select: none;
|
|
padding: 2rem 3rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
#pvpCreateView input, #pvpCreateView button {
|
|
background-color: black;
|
|
color: white;
|
|
border-radius: 15px;
|
|
border: 1px solid white;
|
|
font-size: 1.5rem;
|
|
text-align: center;
|
|
padding: 0.5rem 2rem;
|
|
outline: none;
|
|
transition: opacity 0.2s;
|
|
}
|
|
|
|
#pvpCreateView button {
|
|
cursor: pointer;
|
|
font-size: 1rem;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
#pvpCreateView button:hover {
|
|
background-color: white;
|
|
color: black;
|
|
}
|
|
|
|
/* PvP/join */
|
|
#pvpJoinView .modes {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 2rem;
|
|
}
|
|
|
|
#pvpJoinView .modes div {
|
|
height: 7rem;
|
|
width: 15rem;
|
|
background-color: black;
|
|
border: solid 1px white;
|
|
border-radius: 15px;
|
|
user-select: none;
|
|
padding: 2rem 3rem;
|
|
}
|
|
|
|
#pvpJoinView form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2rem;
|
|
}
|
|
|
|
#pvpJoinView form input {
|
|
background-color: black;
|
|
color: white;
|
|
border-radius: 15px;
|
|
border: 1px solid white;
|
|
font-size: 1.5rem;
|
|
text-align: center;
|
|
padding: 0.5rem 2rem;
|
|
outline: none;
|
|
}
|
|
|
|
#pvpJoinView form input[type=submit] {
|
|
cursor: pointer;
|
|
font-size: 1rem;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
#pvpJoinView form input[type=submit]:hover {
|
|
background-color: white;
|
|
color: black;
|
|
}
|
|
|
|
/* Preparation */
|
|
#preparingGame .modes {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 2rem;
|
|
}
|
|
|
|
#preparingGame .modes div {
|
|
height: 13rem;
|
|
width: 11rem;
|
|
background-color: black;
|
|
border: solid 1px white;
|
|
border-radius: 15px;
|
|
user-select: none;
|
|
padding: 1rem 3rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
#preparingGame .modes div * {
|
|
margin: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Profile */
|
|
#profileView {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
#profileView .profile {
|
|
display: flex;
|
|
margin: 3rem;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
width: 45vw;
|
|
justify-content: space-between;
|
|
|
|
gap: 1rem;
|
|
}
|
|
|
|
#profileView .stats {
|
|
display: flex;
|
|
gap: 1rem;
|
|
width: 60vw;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
#profileView .matchList {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2rem;
|
|
flex: 2;
|
|
}
|
|
|
|
#profileView .matchList::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
#profileView .matchList .match {
|
|
background-color: rgba(24, 24, 24, 1);
|
|
border-radius: 15px;
|
|
cursor: pointer;
|
|
padding: 0.7rem;
|
|
|
|
height: 5rem;
|
|
overflow: hidden;
|
|
|
|
transition: height 0.3s;
|
|
}
|
|
|
|
#profileView .matchList .match .statsButton {
|
|
background-image: linear-gradient(to right, rgb(255, 255, 255, 1) 20%, rgba(0, 0, 0, 0) 40%);
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
|
|
margin: 0;
|
|
margin-bottom: 1rem;
|
|
|
|
background-position: 60%;
|
|
background-size: 400%;
|
|
background-repeat: no-repeat;
|
|
transition: background-position 0.9s;
|
|
}
|
|
|
|
#profileView .matchList .match:hover {
|
|
height: 12rem;
|
|
}
|
|
|
|
#profileView .matchList .match:hover .statsButton {
|
|
background-position: 0%;
|
|
}
|
|
|
|
#profileView .matchList .match div h1 {
|
|
margin: 0;
|
|
}
|
|
|
|
#profileView .matchList .match div {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
justify-content: center;
|
|
gap: 1rem;
|
|
margin-bottom: 1.5rem;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
#profileView .matchlist .match div span {
|
|
color: white;
|
|
font-size: 0.8rem;
|
|
line-height: 1rem;
|
|
}
|
|
|
|
#profileView .periodal {
|
|
flex: 1;
|
|
}
|
|
|
|
#profileView .periodal .stat {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
#profileView .periodal .stat h1 {
|
|
margin: 0.5rem;
|
|
}
|
|
|
|
.tippyTemplate {
|
|
display: none;
|
|
}
|
|
|
|
#settingsView label {
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
#settingsView select {
|
|
padding: 0.5rem 1rem;
|
|
padding: 0.5rem 2rem;
|
|
font-size: 1rem;
|
|
background-color: black;
|
|
border: solid 1px white;
|
|
color: white;
|
|
border-radius: 15px;
|
|
outline: none;
|
|
margin-left: 2rem;
|
|
}
|
|
|
|
#settingsView a {
|
|
text-decoration: none;
|
|
color: var(--dynamic);
|
|
|
|
transition: opacity 0.3s;
|
|
}
|
|
|
|
#settingsView a:hover {
|
|
opacity: 0.6;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
#settingsView .versionInfo {
|
|
margin-top: 3rem;
|
|
font-family: 'Roboto Mono', monospace;
|
|
font-size: 15px;
|
|
}
|
|
|
|
#settingsView button {
|
|
background-color: black;
|
|
color: white;
|
|
border-radius: 15px;
|
|
border: 1px solid white;
|
|
text-align: center;
|
|
padding: 0.5rem 2rem;
|
|
outline: none;
|
|
cursor: pointer;
|
|
font-size: 1rem;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
#settingsView button:hover {
|
|
background-color: white;
|
|
color: black;
|
|
}
|
|
|
|
#logout {
|
|
color: var(--danger);
|
|
cursor: pointer;
|
|
|
|
transition: opacity 0.3s;
|
|
}
|
|
|
|
#logout:hover {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
/* PvE */
|
|
#vsAiView .modes {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 2rem;
|
|
}
|
|
|
|
#vsAiView .modes div {
|
|
/* height: 7rem; */
|
|
width: 15rem;
|
|
background-color: black;
|
|
border: solid 1px white;
|
|
border-radius: 15px;
|
|
user-select: none;
|
|
padding: 2rem 3rem;
|
|
}
|
|
|
|
#vsAiView form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
#vsAiView form input {
|
|
background-color: black;
|
|
color: white;
|
|
border-radius: 15px;
|
|
border: 1px solid white;
|
|
font-size: 1.5rem;
|
|
text-align: center;
|
|
padding: 0.5rem 2rem;
|
|
outline: none;
|
|
}
|
|
|
|
#vsAiView form input[type=submit] {
|
|
cursor: pointer;
|
|
font-size: 1rem;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
#vsAiView form input[type=submit]:hover {
|
|
background-color: white;
|
|
color: black;
|
|
}
|
|
|
|
#vsAiView select {
|
|
padding: 0.5rem 1rem;
|
|
padding: 0.5rem 2rem;
|
|
font-size: 1rem;
|
|
background-color: black;
|
|
border: solid 1px white;
|
|
color: white;
|
|
border-radius: 15px;
|
|
outline: none;
|
|
} |