From 0102f9b106917c36c8a49cd29df636a94ca44fab Mon Sep 17 00:00:00 2001
From: Francisco Pessano <franpessano1@gmail.com>
Date: Mon, 27 Dec 2021 15:04:07 -0300
Subject: [PATCH] Added some style logic

---
 index.html                                    |  9 ++--
 .../addEmojiPickerBackgroundFunction.js       |  5 +-
 .../disableEnterInputs.js                     | 27 +++++++++++
 .../emojiPickerFunctionality.js               |  4 +-
 .../addStartButtonFunctionality.js            |  6 +++
 script/game-functions/checkInputs.js          | 47 +++++++++++++++++++
 script/game-functions/hidePlayerSelection.js  | 12 +++++
 script/game-functions/showTicTacToe.js        | 11 +++++
 script/index.js                               | 24 +++++++++-
 styles/game.scss                              | 10 ++++
 styles/playerSelection.scss                   | 26 +++++++++-
 styles/styles.css                             | 27 ++++++++++-
 styles/styles.css.map                         |  2 +-
 styles/styles.scss                            |  4 ++
 14 files changed, 200 insertions(+), 14 deletions(-)
 create mode 100644 script/emoji-picker-functions/disableEnterInputs.js
 create mode 100644 script/game-functions/addStartButtonFunctionality.js
 create mode 100644 script/game-functions/checkInputs.js
 create mode 100644 script/game-functions/hidePlayerSelection.js
 create mode 100644 script/game-functions/showTicTacToe.js
diff --git a/index.html b/index.html
index 1e3386e..9d1d4f0 100644
--- a/index.html
+++ b/index.html
@@ -11,8 +11,8 @@
     <script src="./script/index.js" type="module"></script>
 </head>
 <body>
-<!-- 
-    <div class="player-selection">
+
+    <div class="player-selection animate__animated">
         <h1>Player selection</h1>
         <form>
             <div class="player player-1">
@@ -37,9 +37,10 @@
 
     <div class="emoji-picker-container hidden">
         <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-2"></div>
         <div class="box" id="box-3"></div>
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
