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

Added some style logic

Browse Source
This commit is contained in:
Francisco Pessano
2021-12-27 15:04:07 -03:00
parent 70e6ddcedb
commit 0102f9b106
14 changed files with 200 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
index.html
View File

@@ -11,8 +11,8 @@
<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 animate__animated">
<h1>Player selection</h1> <h1>Player selection</h1>
<form> <form>
<div class="player player-1"> <div class="player player-1">
@@ -37,9 +37,10 @@
<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="emoji-picker-background"></div>
</div>
<div class="game"> <div class="game hidden animate__animated">
<div class="box" id="box-1"></div> <div class="box" id="box-1"></div>
<div class="box" id="box-2"></div> <div class="box" id="box-2"></div>
<div class="box" id="box-3"></div> <div class="box" id="box-3"></div>

3
script/emoji-picker-functions/addEmojiPickerBackgroundFunction.js
View File

@@ -1,8 +1,9 @@
export default function addEmojiPickerBackgroundFunction() { export default function addEmojiPickerBackgroundFunction() {
const emojiPickerBackground = document.getElementsByClassName('emoji-picker-background')[0]
const emojiPickerContainer = document.getElementsByClassName('emoji-picker-container')[0] const emojiPickerContainer = document.getElementsByClassName('emoji-picker-container')[0]
emojiPickerContainer.addEventListener('click', () => { emojiPickerBackground.addEventListener('click', () => {
emojiPickerContainer.classList.add('hidden') emojiPickerContainer.classList.add('hidden')
}) })

27
script/emoji-picker-functions/disableEnterInputs.js Normal file
View File

@@ -0,0 +1,27 @@
export default function disableEnterInputs() {
const player1 = document.getElementsByClassName('player player-1')[0]
const player2 = document.getElementsByClassName('player player-2')[0]
const inputsPlayer1 = [player1.children[0], player1.children[1].children[1]]
const inputsPlayer2 = [player2.children[0], player2.children[1].children[0]]
const inputsPlayers = [inputsPlayer1, inputsPlayer2]
inputsPlayers.forEach(inputsArray => {
inputsArray.forEach(input => {
input.addEventListener('keypress', e => {
if (e.keyCode === 13 || e.which === 13) {
e.preventDefault()
return false
}
})
})
})
}

4
script/emoji-picker-functions/emojiPickerFunctionality.js
View File

@@ -19,8 +19,8 @@ export default function emojiPickerFunctionality() {
input.value = event.detail.unicode input.value = event.detail.unicode
const emojiPickerContainer = document.getElementsByClassName('emoji-picker-container')[0] // const emojiPickerContainer = document.getElementsByClassName('emoji-picker-container')[0]
emojiPickerContainer.classList.add('hidden') // emojiPickerContainer.classList.add('hidden')
}) })

6
script/game-functions/addStartButtonFunctionality.js Normal file
View File

@@ -0,0 +1,6 @@
export default function addStartButtonFunctionality(game) {
const button = document.getElementById('start')
button.addEventListener('click', game)
}

47
script/game-functions/checkInputs.js Normal file
View File

@@ -0,0 +1,47 @@
export default function checkInputs() {
const player1 = document.getElementsByClassName('player player-1')[0]
const player2 = document.getElementsByClassName('player player-2')[0]
const inputsPlayer1 = [player1.children[0], player1.children[1].children[1]]
const inputsPlayer2 = [player2.children[0], player2.children[1].children[0]]
const inputsEmptys = []
inputsPlayer1.forEach(input => {
if (input.value === '') {
inputsEmptys.push(' ' + input.className + ' (player 1)')
}
})
inputsPlayer2.forEach(input => {
if (input.value === '') {
inputsEmptys.push(' ' + input.className + ' (player 2)')
}
})
if (inputsEmptys.length) {
alert('Please fill the inputs: ' + inputsEmptys)
return true
}
if (inputsPlayer1[0].value === inputsPlayer2[0].value) {
alert('Same usernames')
return true
}
if (inputsPlayer1[1].value === inputsPlayer2[1].value) {
alert('Same symbol')
return true
}
}

12
script/game-functions/hidePlayerSelection.js Normal file
View File

@@ -0,0 +1,12 @@
export default function hidePlayerSelection() {
const playerSelection = document.getElementsByClassName('player-selection')[0]
playerSelection.classList.add('animate__fadeOutDown')
setTimeout(() => {
playerSelection.classList.add('hidden')
}, 1000)
}

11
script/game-functions/showTicTacToe.js Normal file
View File

@@ -0,0 +1,11 @@
export default function showTicTacToe() {
const game = document.getElementsByClassName('game')[0]
setTimeout(() => {
game.classList.remove('hidden')
game.classList.add('animate__fadeInDown')
}, 1000);
}

24
script/index.js
View File

@@ -1,12 +1,32 @@
import addEmojiPickerToButtons from './emoji-picker-functions/addEmojiPickerToButtons.js' import addEmojiPickerToButtons from './emoji-picker-functions/addEmojiPickerToButtons.js'
import addEmojiPickerBackgroundFunction from './emoji-picker-functions/addEmojiPickerBackgroundFunction.js' import addEmojiPickerBackgroundFunction from './emoji-picker-functions/addEmojiPickerBackgroundFunction.js'
import emojiPickerFunctionality from './emoji-picker-functions/emojiPickerFunctionality.js' import emojiPickerFunctionality from './emoji-picker-functions/emojiPickerFunctionality.js'
import addStartButtonFunctionality from './game-functions/addStartButtonFunctionality.js'
import checkInputs from './game-functions/checkInputs.js'
import disableEnterInputs from './emoji-picker-functions/disableEnterInputs.js'
import hidePlayerSelection from './game-functions/hidePlayerSelection.js'
import showTicTacToe from './game-functions/showTicTacToe.js'
function main() { function main(game) {
addEmojiPickerToButtons() addEmojiPickerToButtons()
addEmojiPickerBackgroundFunction() addEmojiPickerBackgroundFunction()
emojiPickerFunctionality() emojiPickerFunctionality()
disableEnterInputs()
addStartButtonFunctionality(game)
} }
window.onload = () => main() function game() {
if(checkInputs()) {
return
}
hidePlayerSelection()
showTicTacToe()
}
window.onload = () => main(game)

10
styles/game.scss
View File

@@ -72,6 +72,16 @@
} }
} }
.game.hidden {
opacity: 0%;
position: absolute;
top: -100%;
}
@media (max-width: 900px) { @media (max-width: 900px) {
.game { .game {

26
styles/playerSelection.scss
View File

@@ -134,9 +134,14 @@
} }
} }
.emoji-picker-container { .player-selection.hidden {
background-color: rgba(0, 0, 0, 0.404); position: absolute;
top: -100%
}
.emoji-picker-container {
transition: 0.4s ease-in-out; transition: 0.4s ease-in-out;
opacity: 100%; opacity: 100%;
@@ -149,6 +154,18 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
.emoji-picker-background {
position: absolute;
background-color: rgba(0, 0, 0, 0.404);
z-index: 10;
height: 100%;
width: 100%;
}
} }
.emoji-picker-container.hidden { .emoji-picker-container.hidden {
@@ -160,3 +177,8 @@
transition: 0.4s ease-in-out; transition: 0.4s ease-in-out;
} }
emoji-picker {
z-index: 100;
}

27
styles/styles.css
View File

@@ -81,8 +81,12 @@
box-shadow: none; box-shadow: none;
} }
.player-selection.hidden {
position: absolute;
top: -100%;
}
.emoji-picker-container { .emoji-picker-container {
background-color: rgba(0, 0, 0, 0.404);
transition: 0.4s ease-in-out; transition: 0.4s ease-in-out;
opacity: 100%; opacity: 100%;
height: 100%; height: 100%;
@@ -92,6 +96,13 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.emoji-picker-container .emoji-picker-background {
position: absolute;
background-color: rgba(0, 0, 0, 0.404);
z-index: 10;
height: 100%;
width: 100%;
}
.emoji-picker-container.hidden { .emoji-picker-container.hidden {
opacity: 0%; opacity: 0%;
@@ -100,6 +111,10 @@
transition: 0.4s ease-in-out; transition: 0.4s ease-in-out;
} }
emoji-picker {
z-index: 100;
}
.game { .game {
display: grid; display: grid;
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
@@ -142,6 +157,12 @@
border-right: 0px; border-right: 0px;
} }
.game.hidden {
opacity: 0%;
position: absolute;
top: -100%;
}
@media (max-width: 900px) { @media (max-width: 900px) {
.game { .game {
width: 80vw; width: 80vw;
@@ -171,4 +192,8 @@ button {
cursor: pointer; cursor: pointer;
} }
.animate__animated.animate__fadeOutDown {
--animate-duration: 1s;
}
/*# sourceMappingURL=styles.css.map */ /*# sourceMappingURL=styles.css.map */

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;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"} {"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;EAEA;EAEA;;;AAQA;EAEI;EACA;;AAGJ;EAEI;;AAGJ;EAEI;EACA;;AAGJ;EAEI;;AAOJ;EAEI;;AAGJ;EAEI;EACA;;AAGJ;EAEI;;AAGJ;EAEI;EACA;;;AAKZ;EAEI;EAEA;EAEA;;;AAIJ;EAEI;IAEI;IACA;;EAEA;IAEI;IACA;;;AC3FZ;EAEI;EAEA;EAEA;;;AAGJ;EAEI;EACA;EAEA;EAEA;EACA;EACA;;;AAGJ;EAEI;;;AAGJ;EACI","file":"styles.css"}

4
styles/styles.scss
View File

@@ -26,3 +26,7 @@ button {
cursor: pointer; cursor: pointer;
} }
.animate__animated.animate__fadeOutDown {
--animate-duration: 1s;
}