From 3ca95da70414ddc204c94c916b86825f2b6b56c8 Mon Sep 17 00:00:00 2001 From: gocivici Date: Thu, 5 Oct 2023 14:52:43 +0300 Subject: [PATCH] added emoji support --- backend.js | 3 ++- public/ghost2.png | Bin 2128 -> 2507 bytes public/index.html | 14 ++++++++++- public/index.js | 2 +- public/popup.js | 28 ++++++++++++++++++++++ public/style.css | 59 ++++++++++++++++++++++++++++++++++++++++------ 6 files changed, 96 insertions(+), 10 deletions(-) create mode 100644 public/popup.js diff --git a/backend.js b/backend.js index f9e33d5..63434b7 100644 --- a/backend.js +++ b/backend.js @@ -75,7 +75,8 @@ io.on('connection', (socket)=>{ socket.on('message',(message)=>{ let timeoutId; clearTimeout(bPlayers[socket.id].timeoutId); - bPlayers[socket.id].message = filter.clean(message) + // bPlayers[socket.id].message = filter.clean(message) + bPlayers[socket.id].message = message function startTimer() { timeoutId = setTimeout(() => { diff --git a/public/ghost2.png b/public/ghost2.png index f020105101272f518784009607bbb1fd9df16317..e80c1cf4b78ca1f47d01fd0bddf36206b2d68a38 100644 GIT binary patch delta 2485 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 delta 2103 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 diff --git a/public/index.html b/public/index.html index 0fa158a..e9d5d9b 100644 --- a/public/index.html +++ b/public/index.html @@ -30,8 +30,12 @@ +
+ @@ -56,16 +60,21 @@
+
+
- +
+ +
+
@@ -109,5 +118,8 @@ + + + \ No newline at end of file diff --git a/public/index.js b/public/index.js index 2f23fa7..0b9e212 100644 --- a/public/index.js +++ b/public/index.js @@ -18,7 +18,7 @@ let pageVisible = true; let debugMode = false; let timeoutHandle; - +//emoji picker code // let atPosition = true; // img.src = 'demaSprite.png'; diff --git a/public/popup.js b/public/popup.js new file mode 100644 index 0000000..720a8f7 --- /dev/null +++ b/public/popup.js @@ -0,0 +1,28 @@ +import * as Popper from 'https://cdn.jsdelivr.net/npm/@popperjs/core@^2/dist/esm/index.js' +import insertText from 'https://cdn.jsdelivr.net/npm/insert-text-at-cursor@0.3.0/index.js' +// import tr from 'emoji-picker-element/i18n/tr'; + + +const emojiButton = document.querySelector('#emojiButton') +const tooltip = document.querySelector('.tooltip') +Popper.createPopper(emojiButton, tooltip,{ + placement: 'top', +}) + +document.querySelector('#emojiButton').onclick = () => { + tooltip.classList.toggle('shown') +// window.addEventListener('click', function(e){ +// if (document.querySelector('emoji-picker').contains(e.target)){ +// // Clicked in box +// } else{ +// tooltip.classList.toggle('shown') +// } +// }); +} + +document.querySelector('emoji-picker').addEventListener('emoji-click', e => { + insertText(document.querySelector('input'), e.detail.unicode) + tooltip.classList.toggle('shown') + + }) + diff --git a/public/style.css b/public/style.css index 38c6021..76538ba 100644 --- a/public/style.css +++ b/public/style.css @@ -1,4 +1,8 @@ +html { + overflow: -moz-scrollbars-vertical; + overflow-y: scroll; +} :root { --header-image: url('./bgHOME4.png'); @@ -107,27 +111,68 @@ and change the media query according to the comment! */ } #input { + border:2px solid grey; + border-right: none; + /* box-shadow: inset -1px -1px #fff, inset 1px 1px grey, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a; */ margin: 0px; - width: 83%; - margin-right: 5px; + width: 530px; + margin-right:0px; font-size: 18px; - height: 100%; - margin-top: 10px; + height: 34px; + /* margin-top: 10px; */ padding: 5px 5px; - margin-bottom: 10px; + /* margin-bottom: 10px; */ + /* vertical-align: middle; */ + vertical-align: middle; } #textInput > button{ font-size: 18px; width: 16%; padding: 5px 5px; - margin-top: 10px; - margin-right: 0px; + /* margin-top: 10px; */ + vertical-align: middle; + /* margin-right: 5px; */ height: 34px; /* padding: 1px 2px; */ /* all:initial; */ } + #textInput{ + margin-top: 10px; + margin-bottom: 10px; + /* vertical-align: middle; */ + } + + .tooltip:not(.shown) { + display: none; + } + + #emojiButton{ + border:2px solid grey; + /* border-left: none; */ + vertical-align: middle; + font-family: Arial, Helvetica, sans-serif; + font-size: 1.5em !important; + background-color: white; + /* border: none; */ + margin-right: 5px; + min-width: 20px !important; + width: 40px !important; + height: 34px !important; + box-shadow: none; + color: black !important; + padding:0px !important; + border-width: 2px; + + /* padding: 0px !important; */ + } + + .tooltip{ + z-index:999; + position: absolute; + data-popper-placement:top; + } /* the area below is for all links on your page EXCEPT for the navigation */ #container a {