mirror of
https://github.com/FranP-code/Tic-Tac-Toe-Game.git
synced 2025-10-12 23:52:39 +00:00
game styles done
This commit is contained in:
14
index.html
14
index.html
@@ -11,6 +11,7 @@
|
||||
<script src="./script/index.js" type="module"></script>
|
||||
</head>
|
||||
<body>
|
||||
<!--
|
||||
<div class="player-selection">
|
||||
<h1>Player selection</h1>
|
||||
<form>
|
||||
@@ -32,11 +33,22 @@
|
||||
</div>
|
||||
</form>
|
||||
<button id="start">Start</button>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="emoji-picker-container hidden">
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
88
styles/game.scss
Normal file
88
styles/game.scss
Normal 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
162
styles/playerSelection.scss
Normal 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;
|
||||
}
|
||||
@@ -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 {
|
||||
background-color: #fff;
|
||||
height: 33vh;
|
||||
@@ -119,4 +100,75 @@ button {
|
||||
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 */
|
||||
|
||||
@@ -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"}
|
||||
@@ -1,3 +1,6 @@
|
||||
@import './playerSelection.scss';
|
||||
@import './game.scss';
|
||||
|
||||
html, body {
|
||||
|
||||
height: 100%;
|
||||
@@ -22,167 +25,4 @@ body {
|
||||
button {
|
||||
|
||||
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;
|
||||
}
|
||||
Reference in New Issue
Block a user