Emoji picker logic done

script/emoji-picker-functions/addEmojiPickerBackgroundFunction.js

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

script/emoji-picker-functions/addEmojiPickerToButtons.js

@@ -0,0 +1,26 @@
+export default function addEmojiPickerToButtons() {
+           
+    let buttons = document.querySelectorAll('.player .symbol-container button')
+        buttons = [...buttons]
+    
+    const emojiPickerContainer = document.getElementsByClassName('emoji-picker-container')[0]
+
+    buttons.forEach(button => {
+
+        button.addEventListener('click', (event) => {
+
+            event.preventDefault()
+            
+            const player = button.parentElement.parentElement.className
+
+            sessionStorage.setItem('actualPlayer', player)
+
+            if (emojiPickerContainer.classList.contains('hidden')) {
+                emojiPickerContainer.classList.remove('hidden')
+                
+                return
+            }
+
+        })
+    })
+}

script/emoji-picker-functions/emojiPickerFunctionality.js

@@ -0,0 +1,28 @@
+export default function emojiPickerFunctionality() {
+
+    const emojiPicker = document.querySelector('emoji-picker')
+    
+    emojiPicker.addEventListener('emoji-click', event => {
+        
+        const player = sessionStorage.getItem('actualPlayer')
+        
+        let input = document.getElementsByClassName(player)[0].children[1]
+    
+        if (player.includes('player-1')) {
+    
+            input = input.children[1]
+        
+        } else {
+    
+            input = input.children[0]
+        }
+        
+        input.value = event.detail.unicode
+
+        const emojiPickerContainer = document.getElementsByClassName('emoji-picker-container')[0]
+        emojiPickerContainer.classList.add('hidden')
+
+    })
+
+    
+}

script/index.js

@@ -0,0 +1,12 @@
+import addEmojiPickerToButtons from './emoji-picker-functions/addEmojiPickerToButtons.js'
+import addEmojiPickerBackgroundFunction from './emoji-picker-functions/addEmojiPickerBackgroundFunction.js'
+import emojiPickerFunctionality from './emoji-picker-functions/emojiPickerFunctionality.js'
+
+function main() {
+
+    addEmojiPickerToButtons()
+    addEmojiPickerBackgroundFunction()
+    emojiPickerFunctionality()
+}
+
+window.onload = () => main()