diff --git a/index.html b/index.html index 473b572..0e86fbe 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,7 @@ +
diff --git a/package-lock.json b/package-lock.json deleted file mode 100644 index f4edadc..0000000 --- a/package-lock.json +++ /dev/null @@ -1,28 +0,0 @@ -{ - "name": "tic-tac-toe-game", - "version": "1.0.0", - "lockfileVersion": 2, - "requires": true, - "packages": { - "": { - "name": "tic-tac-toe-game", - "version": "1.0.0", - "license": "ISC", - "dependencies": { - "emoji-picker-element": "^1.8.2" - } - }, - "node_modules/emoji-picker-element": { - "version": "1.8.2", - "resolved": "https://registry.npmjs.org/emoji-picker-element/-/emoji-picker-element-1.8.2.tgz", - "integrity": "sha512-XNSuntOOz1+JBklOqj+tqJqbInp88i12JXv0ZyQNCaHlkAlUf7Ak9e857S/uVTFlVtA6pJ6qeXLxvMdrL0ngFQ==" - } - }, - "dependencies": { - "emoji-picker-element": { - "version": "1.8.2", - "resolved": "https://registry.npmjs.org/emoji-picker-element/-/emoji-picker-element-1.8.2.tgz", - "integrity": "sha512-XNSuntOOz1+JBklOqj+tqJqbInp88i12JXv0ZyQNCaHlkAlUf7Ak9e857S/uVTFlVtA6pJ6qeXLxvMdrL0ngFQ==" - } - } -} diff --git a/package.json b/package.json deleted file mode 100644 index 2cb6e39..0000000 --- a/package.json +++ /dev/null @@ -1,14 +0,0 @@ -{ - "name": "tic-tac-toe-game", - "version": "1.0.0", - "description": "", - "main": "index.html", - "scripts": { - "test": "echo \"Error: no test specified\" && exit 1" - }, - "author": "Francisco Pessano", - "license": "ISC", - "dependencies": { - "emoji-picker-element": "^1.8.2" - } -} diff --git a/script/emoji-picker-functions/addEmojiPickerBackgroundFunction.js b/script/emoji-picker-functions/addEmojiPickerBackgroundFunction.js new file mode 100644 index 0000000..185e943 --- /dev/null +++ b/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') + }) +} \ No newline at end of file diff --git a/script/emoji-picker-functions/addEmojiPickerToButtons.js b/script/emoji-picker-functions/addEmojiPickerToButtons.js new file mode 100644 index 0000000..c01eee5 --- /dev/null +++ b/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 + } + + }) + }) +} \ No newline at end of file diff --git a/script/emoji-picker-functions/emojiPickerFunctionality.js b/script/emoji-picker-functions/emojiPickerFunctionality.js new file mode 100644 index 0000000..1efe14d --- /dev/null +++ b/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') + + }) + + +} \ No newline at end of file diff --git a/script/index.js b/script/index.js index e69de29..7542238 100644 --- a/script/index.js +++ b/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() \ No newline at end of file