added emoji support

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(() => {

public/index.html

@@ -30,8 +30,12 @@
                     </ul>
                 </nav>    
             </div>
+            <div class="tooltip" role="tooltip">
+                <emoji-picker></emoji-picker>
+              </div>
 
             <div id="flex">
+
                 
                 <!-- <aside id="leftSidebar" style="margin-right: 10px;"> -->
                     <!-- <div class="title">Navigation</div> -->
@@ -56,16 +60,21 @@
                 </div>
             <div class="window-body">
 
+
                 <main>
                     <canvas id="canvas"></canvas>
 
                     <!-- <canvas id="canvas"></canvas> -->
+                    
                     <form id="textInput" action="" >
-                        <input placeholder="Say something" maxlength="20" required="required" id="input" autocomplete="off" /><button id="messageButton">Send</button>
+                        <input placeholder="Say something" maxlength="20" required="required" id="input" autocomplete="off" /><button type="button" id="emojiButton">🙂</button><button id="messageButton">Send</button>
                       </form>
+                      
+
 
                     
                 </main>
+                
             </div>
             </div>
            
@@ -109,5 +118,8 @@
 <script src="https://cdn.socket.io/4.6.1/socket.io.min.js"></script>
 <script src="./classes/Sprite.js"></script>
 <script src="./classes/Player.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/emoji-picker-element@^1/index.js"></script>
+<script type="module" src="popup.js"></script>
 <script src="index.js"></script>
+
 </html>

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';

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

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%;
+        width: 530px;
-        margin-right: 5px;
+        margin-right:0px;
         font-size: 18px;
-        height: 100%;
+        height: 34px;
-        margin-top: 10px;
+        /* 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-top: 10px; */
-        margin-right: 0px;
+        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 {