franpcode/Tic-Tac-Toe-Game
1
0
Fork 0
mirror of https://github.com/FranP-code/Tic-Tac-Toe-Game.git synced 2025-10-12 23:52:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

Victory actions done

Browse Source
This commit is contained in:
Francisco Pessano
2021-12-27 20:25:33 -03:00
parent 2a866751f9
commit 658c5b2419
8 changed files with 236 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
styles/game.scss
View File

@@ -5,6 +5,9 @@
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
z-index: 100;
position: relative;
.box {
width: 10vw;
@@ -26,6 +29,39 @@
user-select: none;
color: #e7e7e7;
background-color: rgb(221, 121, 121);
&.winner-box {
background-color: rgba(255, 255, 255, 0);
&.black-letters {
color: rgb(48, 48, 48);
}
}
}
}
.game .background-winner-div {
background-color: rgba(95, 255, 62, 0.692);
position: absolute;
width: 80vw;
height: 80vw;
z-index: 10;
opacity: 0%;
transition: 1s ease-in-out;
&.show {
opacity: 100%;
transition: 1s ease-in-out;
}
}
@@ -94,17 +130,72 @@
.game .players-turn {
position: absolute;
// position: absolute;
top: -30%;
left: -20%;
// top: -30%;
// left: -20%;
margin-bottom: 5vh;
margin-left: -3vw;
span {
font-size: 30pt;
font-weight: bold;
color: #e7e7e7;
color: #ffffff;
}
}
.victory-message {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-weight: bold;
font-size: 30pt;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
color: #fff;
margin-top: 5vh;
button {
width: 30vw;
max-width: 330px;
height: 9vw;
max-height: 100px;
background: none;
border: 2px solid #fff;
border-radius: 10px;
color: #fff;
font-family:Arial, Helvetica, sans-serif;
font-size: 21pt;
font-weight: bold;
margin-top: 3vh;
transition: 0.4s ease-in-out;
&:hover {
background-color: rgba(0, 0, 0, 0.062);
transition: 0.4s ease-in-out;
}
}
&.hidden {
opacity: 0%;
}
}

3
styles/playerSelection.scss
View File

@@ -49,6 +49,9 @@
margin-top: 1vh;
width: 5vw;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
font-weight: bold;
}
.symbol-container {

66
styles/styles.css
View File

@@ -30,6 +30,8 @@
.player-selection form .player .symbol-input {
margin-top: 1vh;
width: 5vw;
font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
font-weight: bold;
}
.player-selection form .player .symbol-container {
width: 100%;
@@ -119,6 +121,8 @@ emoji-picker {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
z-index: 100;
position: relative;
}
.game .tic-tac-toe .box {
width: 10vw;
@@ -134,6 +138,27 @@ emoji-picker {
align-items: center;
user-select: none;
color: #e7e7e7;
background-color: #dd7979;
}
.game .tic-tac-toe .box.winner-box {
background-color: rgba(255, 255, 255, 0);
}
.game .tic-tac-toe .box.winner-box.black-letters {
color: #303030;
}
.game .background-winner-div {
background-color: rgba(95, 255, 62, 0.692);
position: absolute;
width: 80vw;
height: 80vw;
z-index: 10;
opacity: 0%;
transition: 1s ease-in-out;
}
.game .background-winner-div.show {
opacity: 100%;
transition: 1s ease-in-out;
}
.game .tic-tac-toe .box#box-1 {
@@ -172,14 +197,47 @@ emoji-picker {
}
.game .players-turn {
position: absolute;
top: -30%;
left: -20%;
margin-bottom: 5vh;
margin-left: -3vw;
}
.game .players-turn span {
font-size: 30pt;
font-weight: bold;
color: #e7e7e7;
color: #ffffff;
}
.victory-message {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
font-weight: bold;
font-size: 30pt;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
color: #fff;
margin-top: 5vh;
}
.victory-message button {
width: 30vw;
max-width: 330px;
height: 9vw;
max-height: 100px;
background: none;
border: 2px solid #fff;
border-radius: 10px;
color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: 21pt;
font-weight: bold;
margin-top: 3vh;
transition: 0.4s ease-in-out;
}
.victory-message button:hover {
background-color: rgba(0, 0, 0, 0.062);
transition: 0.4s ease-in-out;
}
.victory-message.hidden {
opacity: 0%;
}
@media (max-width: 900px) {

2
styles/styles.css.map
View File

@@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["playerSelection.scss","game.scss","styles.scss"],"names":[],"mappings":"AAAA;EAEI;EAEA;EACA;EAEA;EAEA;EACA;EACA;EAEA;;AAEA;EAEG;;AAGH;EAEI;EAEA;;AAEA;EAKI;;AAEA;EAEI;EACA;EACA;EAEA;;AAGJ;EAEI;;AAGJ;EAEI;EACA;;AAGJ;EAEI;EAEA;EACA;EACA;EAEA;;AAGJ;EAEI;EACA;;AAIR;EAEI;EACA;;AAEA;EAEI;EAEA;EACA;EACA;EAEA;;AAEA;EAEI;EACA;;AAKZ;EAEI;EACA;;AAII;EAEI;EACA;;AAMhB;EAEI;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EAEA;;AAGJ;EAEI;EAEA;;;AAIR;EAEI;EAEA;;;AAGJ;EAEI;EACA;EAEA;EACA;EAEA;EAEA;EACA;EACA;;AAEA;EAEI;EAEA;EAEA;EAEA;EACA;;;AAIR;EAEI;EACA;EAEA;EAEA;;;AAGJ;EAEI;;;ACtLJ;EAEI;EAEA;EACA;;AAEA;EAEI;EACA;EAEA;EACA;EACA;EAEA;EAEA;EAEA;EAEA;EACA;EACA;EAEA;EACA;;;AAQA;EAEI;EACA;;AAGJ;EAEI;;AAGJ;EAEI;EACA;;AAGJ;EAEI;;AAOJ;EAEI;;AAGJ;EAEI;EACA;;AAGJ;EAEI;;AAGJ;EAEI;EACA;;;AAKZ;EAEI;EAEA;EAEA;;;AAGJ;EAEI;EAEA;EACA;;AAEA;EAEI;EACA;EAEA;;;AAKR;EAEI;IAEI;IACA;;EAEA;IAEI;IACA;;;EAIR;IAEI;IACA;;;AC7HR;EAEI;EAEA;EAEA;;;AAGJ;EAEI;EACA;EAEA;EAEA;EACA;EACA;;;AAGJ;EAEI;;;AAGJ;EACI","file":"styles.css"}
{"version":3,"sourceRoot":"","sources":["playerSelection.scss","game.scss","styles.scss"],"names":[],"mappings":"AAAA;EAEI;EAEA;EACA;EAEA;EAEA;EACA;EACA;EAEA;;AAEA;EAEG;;AAGH;EAEI;EAEA;;AAEA;EAKI;;AAEA;EAEI;EACA;EACA;EAEA;;AAGJ;EAEI;;AAGJ;EAEI;EACA;EAEA;EACA;;AAGJ;EAEI;EAEA;EACA;EACA;EAEA;;AAGJ;EAEI;EACA;;AAIR;EAEI;EACA;;AAEA;EAEI;EAEA;EACA;EACA;EAEA;;AAEA;EAEI;EACA;;AAKZ;EAEI;EACA;;AAII;EAEI;EACA;;AAMhB;EAEI;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EAEA;;AAGJ;EAEI;EAEA;;;AAIR;EAEI;EAEA;;;AAGJ;EAEI;EACA;EAEA;EACA;EAEA;EAEA;EACA;EACA;;AAEA;EAEI;EAEA;EAEA;EAEA;EACA;;;AAIR;EAEI;EACA;EAEA;EAEA;;;AAGJ;EAEI;;;ACzLJ;EAEI;EAEA;EACA;EAEA;EACA;;AAEA;EAEI;EACA;EAEA;EACA;EACA;EAEA;EAEA;EAEA;EAEA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EAEI;;AAEA;EAEI;;;AAMhB;EAEI;EAEA;EAEA;EACA;EAEA;EAEA;EAEA;;AAEA;EAEI;EACA;;;AAQA;EAEI;EACA;;AAGJ;EAEI;;AAGJ;EAEI;EACA;;AAGJ;EAEI;;AAOJ;EAEI;;AAGJ;EAEI;EACA;;AAGJ;EAEI;;AAGJ;EAEI;EACA;;;AAKZ;EAEI;EAEA;EAEA;;;AAGJ;EAOI;EACA;;AAEA;EAEI;EACA;EAEA;;;AAIR;EAEI;EACA;EACA;EAEA;EACA;EACA;EAEA;EAEA;EAEA;;AAEA;EAEI;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EAEA;EAEA;EACA;EAEA;EAEA;;AAEA;EAEI;EAEA;;AAIR;EAEI;;;AAKR;EAEI;IAEI;IACA;;EAEA;IAEI;IACA;;;EAIR;IAEI;IACA;;;ACxNR;EAEI;EAEA;EAEA;;;AAGJ;EAEI;EACA;EAEA;EAEA;EACA;EACA;;;AAGJ;EAEI;;;AAGJ;EACI","file":"styles.css"}