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

game styles done

Browse Source
This commit is contained in:
Francisco Pessano
2021-12-27 11:39:49 -03:00
parent 45227c5596
commit 70e6ddcedb
6 changed files with 338 additions and 184 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
index.html
View File

@@ -11,6 +11,7 @@
<script src="./script/index.js" type="module"></script> <script src="./script/index.js" type="module"></script>
</head> </head>
<body> <body>
<!--
<div class="player-selection"> <div class="player-selection">
<h1>Player selection</h1> <h1>Player selection</h1>
<form> <form>
@@ -32,11 +33,22 @@
</div> </div>
</form> </form>
<button id="start">Start</button> <button id="start">Start</button>
</div> </div>
<div class="emoji-picker-container hidden"> <div class="emoji-picker-container hidden">
<emoji-picker class="animate__animated animate__fadeInUp"></emoji-picker> <emoji-picker class="animate__animated animate__fadeInUp"></emoji-picker>
</div> -->
<div class="game">
<div class="box" id="box-1"></div>
<div class="box" id="box-2"></div>
<div class="box" id="box-3"></div>
<div class="box" id="box-4"></div>
<div class="box" id="box-5"></div>
<div class="box" id="box-6"></div>
<div class="box" id="box-7"></div>
<div class="box" id="box-8"></div>
<div class="box" id="box-9"></div>
</div> </div>
</body> </body>
</html> </html>

88
styles/game.scss Normal file
View File

@@ -0,0 +1,88 @@
.game {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
.box {
width: 10vw;
height: 10vw;
border: 2px #fff solid;
box-sizing: border-box;
cursor: pointer;
}
}
.game {
.box {
&#box-1 {
border-top: 0px;
border-left: 0px;
}
&#box-2{
border-top: 0px;
}
&#box-3 {
border-top: 0px;
border-right: 0px;
}
&#box-4 {
border-left: 0px;
}
&#box-5 {
}
&#box-6 {
border-right: 0px;
}
&#box-7 {
border-bottom: 0px;
border-left: 0px;
}
&#box-8 {
border-bottom: 0px;
}
&#box-9 {
border-bottom: 0px;
border-right: 0px;
}
}
}
@media (max-width: 900px) {
.game {
width: 80vw;
height: 80vw;
.box {
width: 100%;
height: 100%;
}
}
}

162
styles/playerSelection.scss Normal file
View File

@@ -0,0 +1,162 @@
.player-selection {
background-color: #fff;
height: 33vh;
width: 50vw;
border-radius: 6px;
display: flex;
flex-direction: column;
align-items: center;
box-shadow: 0px 3px 10px #000;
h1 {
user-select: none;
}
form {
display: flex;
// justify-content: space-around;
width: 100%;
.player {
// display: flex;
// flex-direction: column;
width: 40%;
input {
height: 5vh;
box-sizing: content-box;
outline: none;
font-size: 14pt;
}
.name-input {
width: 100%;
}
.symbol-input{
margin-top: 1vh;
width: 5vw;
}
.symbol-container {
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
margin-top: 1vh;
}
button {
box-sizing: content-box;
height: 5vh;
}
}
.player.player-1 {
padding-left: 10%;
padding-right: 2.5%;
.symbol-container {
width: 103%;
display: flex;
align-items: center;
justify-content: flex-end;
margin-top: 1vh;
.symbol-input {
margin-top: 0px;
margin-left: 1vw;
}
}
}
.player.player-2 {
padding-right: 10%;
padding-left: 2.5%;
.symbol-container {
.symbol-input {
margin-top: 0px;
margin-right: 1vw;
}
}
}
}
button#start {
width: 50%;
height: 6vh;
margin-top: 1vh;
background-color: rgb(166, 255, 106);
color: rgba(0, 0, 0, 0.72);
font-size: 14pt;
border: none;
box-shadow: 0px 3px rgb(85, 85, 85);
transition: 0.3s ease-in-out;
}
button#start.pressed {
transition: 0.3s ease-in-out;
box-shadow: none;
}
}
.emoji-picker-container {
background-color: rgba(0, 0, 0, 0.404);
transition: 0.4s ease-in-out;
opacity: 100%;
height: 100%;
width: 100%;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
}
.emoji-picker-container.hidden {
opacity: 0%;
transform: translateY(100vh);
background-color: rgb(221, 121, 121);
transition: 0.4s ease-in-out;
}

90
styles/styles.css
View File

@@ -1,22 +1,3 @@
html, body {
height: 100%;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
overflow-y: hidden;
}
body {
margin: 0;
padding: 0;
background-color: #dd7979;
display: flex;
justify-content: center;
align-items: center;
}
button {
cursor: pointer;
}
.player-selection { .player-selection {
background-color: #fff; background-color: #fff;
height: 33vh; height: 33vh;
@@ -119,4 +100,75 @@ button {
transition: 0.4s ease-in-out; transition: 0.4s ease-in-out;
} }
.game {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
}
.game .box {
width: 10vw;
height: 10vw;
border: 2px #fff solid;
box-sizing: border-box;
cursor: pointer;
}
.game .box#box-1 {
border-top: 0px;
border-left: 0px;
}
.game .box#box-2 {
border-top: 0px;
}
.game .box#box-3 {
border-top: 0px;
border-right: 0px;
}
.game .box#box-4 {
border-left: 0px;
}
.game .box#box-6 {
border-right: 0px;
}
.game .box#box-7 {
border-bottom: 0px;
border-left: 0px;
}
.game .box#box-8 {
border-bottom: 0px;
}
.game .box#box-9 {
border-bottom: 0px;
border-right: 0px;
}
@media (max-width: 900px) {
.game {
width: 80vw;
height: 80vw;
}
.game .box {
width: 100%;
height: 100%;
}
}
html, body {
height: 100%;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
overflow-y: hidden;
}
body {
margin: 0;
padding: 0;
background-color: #dd7979;
display: flex;
justify-content: center;
align-items: center;
}
button {
cursor: pointer;
}
/*# sourceMappingURL=styles.css.map */ /*# sourceMappingURL=styles.css.map */

2
styles/styles.css.map
View File

@@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":"AAAA;EAEI;EAEA;EAEA;;;AAGJ;EAEI;EACA;EAEA;EAEA;EACA;EACA;;;AAGJ;EAEI;;;AAGJ;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;EACA;EAEA;EACA;EAEA;EAEA;EACA;EACA;;;AAGJ;EAEI;EACA;EAEA;EAEA","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;;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;EACA;EAEA;EACA;EAEA;EAEA;EACA;EACA;;;AAGJ;EAEI;EACA;EAEA;EAEA;;;AChKJ;EAEI;EAEA;EACA;;AAEA;EAEI;EACA;EAEA;EAEA;EAEA;;;AAQA;EAEI;EACA;;AAGJ;EAEI;;AAGJ;EAEI;EACA;;AAGJ;EAEI;;AAOJ;EAEI;;AAGJ;EAEI;EACA;;AAGJ;EAEI;;AAGJ;EAEI;EACA;;;AAKZ;EAEI;IAEI;IACA;;EAEA;IAEI;IACA;;;ACjFZ;EAEI;EAEA;EAEA;;;AAGJ;EAEI;EACA;EAEA;EAEA;EACA;EACA;;;AAGJ;EAEI","file":"styles.css"}

166
styles/styles.scss
View File

@@ -1,3 +1,6 @@
@import './playerSelection.scss';
@import './game.scss';
html, body { html, body {
height: 100%; height: 100%;
@@ -22,167 +25,4 @@ body {
button { button {
cursor: pointer; cursor: pointer;
}
.player-selection {
background-color: #fff;
height: 33vh;
width: 50vw;
border-radius: 6px;
display: flex;
flex-direction: column;
align-items: center;
box-shadow: 0px 3px 10px #000;
h1 {
user-select: none;
}
form {
display: flex;
// justify-content: space-around;
width: 100%;
.player {
// display: flex;
// flex-direction: column;
width: 40%;
input {
height: 5vh;
box-sizing: content-box;
outline: none;
font-size: 14pt;
}
.name-input {
width: 100%;
}
.symbol-input{
margin-top: 1vh;
width: 5vw;
}
.symbol-container {
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
margin-top: 1vh;
}
button {
box-sizing: content-box;
height: 5vh;
}
}
.player.player-1 {
padding-left: 10%;
padding-right: 2.5%;
.symbol-container {
width: 103%;
display: flex;
align-items: center;
justify-content: flex-end;
margin-top: 1vh;
.symbol-input {
margin-top: 0px;
margin-left: 1vw;
}
}
}
.player.player-2 {
padding-right: 10%;
padding-left: 2.5%;
.symbol-container {
.symbol-input {
margin-top: 0px;
margin-right: 1vw;
}
}
}
}
button#start {
width: 50%;
height: 6vh;
margin-top: 1vh;
background-color: rgb(166, 255, 106);
color: rgba(0, 0, 0, 0.72);
font-size: 14pt;
border: none;
box-shadow: 0px 3px rgb(85, 85, 85);
transition: 0.3s ease-in-out;
}
button#start.pressed {
transition: 0.3s ease-in-out;
box-shadow: none;
}
}
.emoji-picker-container {
background-color: rgba(0, 0, 0, 0.404);
transition: 0.4s ease-in-out;
opacity: 100%;
height: 100%;
width: 100%;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
}
.emoji-picker-container.hidden {
opacity: 0%;
transform: translateY(100vh);
background-color: rgb(221, 121, 121);
transition: 0.4s ease-in-out;
} }