franpcode/Tic-Tac-Toe-Game
1
0
Fork 0
mirror of https://github.com/FranP-code/Tic-Tac-Toe-Game.git synced 2025-10-12 23:52:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

Emoji picker logic done

Browse Source
This commit is contained in:
Francisco Pessano
2021-12-27 00:22:34 -03:00
parent f19d8553e2
commit 45227c5596
7 changed files with 76 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
View File

@@ -8,6 +8,7 @@
<link rel="stylesheet" href="./styles/styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<script type="module" src="https://cdn.jsdelivr.net/npm/emoji-picker-element@^1/index.js"></script>
<script src="./script/index.js" type="module"></script>
</head>
<body>
<div class="player-selection">

28
package-lock.json generated
View File

@@ -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=="
}
}
}

14
package.json
View File

@@ -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"
}
}

9
script/emoji-picker-functions/addEmojiPickerBackgroundFunction.js Normal file
View File

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

26
script/emoji-picker-functions/addEmojiPickerToButtons.js Normal file
View File

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

28
script/emoji-picker-functions/emojiPickerFunctionality.js Normal file
View File

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

12
script/index.js
View File

@@ -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()