Added some style logic

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')
     })

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
+                }
+            })
+        })
+
+    })
+
+}

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')
 
     })
 

script/game-functions/addStartButtonFunctionality.js

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

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
+    }
+}

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)
+}

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);
+}

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()
+function game() {
+
+    if(checkInputs()) {
+
+        return
+    }
+    
+    hidePlayerSelection()
+    showTicTacToe()
+}
+
+window.onload = () => main(game)