diff --git a/script/emoji-picker-functions/addEmojiPickerBackgroundFunction.js b/script/emoji-picker-functions/addEmojiPickerBackgroundFunction.js
index 185e943..58699a0 100644
--- a/script/emoji-picker-functions/addEmojiPickerBackgroundFunction.js
+++ b/script/emoji-picker-functions/addEmojiPickerBackgroundFunction.js
@@ -1,8 +1,9 @@
export default function addEmojiPickerBackgroundFunction() {
+ const emojiPickerBackground = document.getElementsByClassName('emoji-picker-background')[0]
const emojiPickerContainer = document.getElementsByClassName('emoji-picker-container')[0]
-
- emojiPickerContainer.addEventListener('click', () => {
+
+ emojiPickerBackground.addEventListener('click', () => {
emojiPickerContainer.classList.add('hidden')
})
diff --git a/script/emoji-picker-functions/disableEnterInputs.js b/script/emoji-picker-functions/disableEnterInputs.js
new file mode 100644
index 0000000..e8a1b73
--- /dev/null
+++ b/script/emoji-picker-functions/disableEnterInputs.js
@@ -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
+ }
+ })
+ })
+
+ })
+
+}
\ No newline at end of file
diff --git a/script/emoji-picker-functions/emojiPickerFunctionality.js b/script/emoji-picker-functions/emojiPickerFunctionality.js
index 1efe14d..6aa429b 100644
--- a/script/emoji-picker-functions/emojiPickerFunctionality.js
+++ b/script/emoji-picker-functions/emojiPickerFunctionality.js
@@ -19,8 +19,8 @@ export default function emojiPickerFunctionality() {
input.value = event.detail.unicode
- const emojiPickerContainer = document.getElementsByClassName('emoji-picker-container')[0]
- emojiPickerContainer.classList.add('hidden')
+ // const emojiPickerContainer = document.getElementsByClassName('emoji-picker-container')[0]
+ // emojiPickerContainer.classList.add('hidden')
})
diff --git a/script/game-functions/addStartButtonFunctionality.js b/script/game-functions/addStartButtonFunctionality.js
new file mode 100644
index 0000000..ebffd92
--- /dev/null
+++ b/script/game-functions/addStartButtonFunctionality.js
@@ -0,0 +1,6 @@
+export default function addStartButtonFunctionality(game) {
+
+ const button = document.getElementById('start')
+
+ button.addEventListener('click', game)
+}
\ No newline at end of file
diff --git a/script/game-functions/checkInputs.js b/script/game-functions/checkInputs.js
new file mode 100644
index 0000000..8f62080
--- /dev/null
+++ b/script/game-functions/checkInputs.js
@@ -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
+ }
+}
\ No newline at end of file
diff --git a/script/game-functions/hidePlayerSelection.js b/script/game-functions/hidePlayerSelection.js
new file mode 100644
index 0000000..1c94b32
--- /dev/null
+++ b/script/game-functions/hidePlayerSelection.js
@@ -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)
+}
\ No newline at end of file
diff --git a/script/game-functions/showTicTacToe.js b/script/game-functions/showTicTacToe.js
new file mode 100644
index 0000000..fb3e060
--- /dev/null
+++ b/script/game-functions/showTicTacToe.js
@@ -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);
+}
\ No newline at end of file
diff --git a/script/index.js b/script/index.js
index 7542238..d29a37a 100644
--- a/script/index.js
+++ b/script/index.js
@@ -1,12 +1,32 @@
import addEmojiPickerToButtons from './emoji-picker-functions/addEmojiPickerToButtons.js'
import addEmojiPickerBackgroundFunction from './emoji-picker-functions/addEmojiPickerBackgroundFunction.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()
addEmojiPickerBackgroundFunction()
emojiPickerFunctionality()
+
+ disableEnterInputs()
+
+ addStartButtonFunctionality(game)
}
-window.onload = () => main()
\ No newline at end of file
+function game() {
+
+ if(checkInputs()) {
+
+ return
+ }
+
+ hidePlayerSelection()
+ showTicTacToe()
+}
+
+window.onload = () => main(game)
\ No newline at end of file
diff --git a/styles/game.scss b/styles/game.scss
index bfc11e4..7deaa03 100644
--- a/styles/game.scss
+++ b/styles/game.scss
@@ -72,6 +72,16 @@
}
}
+.game.hidden {
+
+ opacity: 0%;
+
+ position: absolute;
+
+ top: -100%;
+}
+
+
@media (max-width: 900px) {
.game {
diff --git a/styles/playerSelection.scss b/styles/playerSelection.scss
index 0255e03..2be379e 100644
--- a/styles/playerSelection.scss
+++ b/styles/playerSelection.scss
@@ -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;
opacity: 100%;
@@ -149,6 +154,18 @@
display: flex;
justify-content: 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 {
@@ -159,4 +176,9 @@
background-color: rgb(221, 121, 121);
transition: 0.4s ease-in-out;
+}
+
+emoji-picker {
+
+ z-index: 100;
}
\ No newline at end of file
diff --git a/styles/styles.css b/styles/styles.css
index bb59f68..05b7a68 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -81,8 +81,12 @@
box-shadow: none;
}
+.player-selection.hidden {
+ position: absolute;
+ top: -100%;
+}
+
.emoji-picker-container {
- background-color: rgba(0, 0, 0, 0.404);
transition: 0.4s ease-in-out;
opacity: 100%;
height: 100%;
@@ -92,6 +96,13 @@
justify-content: 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 {
opacity: 0%;
@@ -100,6 +111,10 @@
transition: 0.4s ease-in-out;
}
+emoji-picker {
+ z-index: 100;
+}
+
.game {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
@@ -142,6 +157,12 @@
border-right: 0px;
}
+.game.hidden {
+ opacity: 0%;
+ position: absolute;
+ top: -100%;
+}
+
@media (max-width: 900px) {
.game {
width: 80vw;
@@ -171,4 +192,8 @@ button {
cursor: pointer;
}
+.animate__animated.animate__fadeOutDown {
+ --animate-duration: 1s;
+}
+
/*# sourceMappingURL=styles.css.map */
diff --git a/styles/styles.css.map b/styles/styles.css.map
index a85fe51..16eeaf8 100644
--- a/styles/styles.css.map
+++ b/styles/styles.css.map
@@ -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"}
\ No newline at end of file
+{"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"}
\ No newline at end of file
diff --git a/styles/styles.scss b/styles/styles.scss
index 99fce47..739a739 100644
--- a/styles/styles.scss
+++ b/styles/styles.scss
@@ -25,4 +25,8 @@ body {
button {
cursor: pointer;
+}
+
+.animate__animated.animate__fadeOutDown {
+ --animate-duration: 1s;
}
\ No newline at end of file