Merge pull request #56 from Tvick22/main

Leaderboard Paging Feature

_sass/minima/dracula/platformer-styles.scss

@@ -83,15 +83,15 @@
   z-index: 3; // Position on Top of other elements, as well as ID buttons above
   // left: 0; // set the sidebar to be on the left side of the page
   top: 0; // calculated to be below the header and submenu
-  padding-top: 5px;
-  padding-bottom: 5px;
+  padding-top: 0px;
+  padding-bottom: 0px;
   overflow-x: hidden; /* Disable horizontal scroll */
   transition: 0.5s; /* 0.5-second transition effect to slide in the sidebar */
   // following are changed by JavaScript
   width: 0px;
   padding-left: 0px;
   padding-right: 0px;
-  height: 75%;
+  height: 80%;
   scroll-behavior: auto;
 }
 

assets/js/platformer3x/Chat.js

@@ -1,10 +1,6 @@
-import Multiplayer from './Multiplayer.js'
+import Multiplayer from './Multiplayer.js';
 import createSound from './Sound.js';
-/**
- * Prevents players from typing no-no words in the chat.
- * If these words are detected, a pre-written message 
- * will be displayed instead
- */
+
 class Chat {
     constructor(wordsToAdd){
         this.prohibitedWords = ['westview', 'pee', 'poo', 
@@ -13,34 +9,32 @@ class Chat {
         '911', 'die', 'luigi', 'peach', 'bowser', 'mario', 
         'mr.mortensen', 'mr. mortensen', 'mortensen', 'lopez', 
         'mr.lopez', 'mr. lopez','mister mortensen', 'mister lopez', 
-        'aws', 'amazonwebservices', 'amazon', 'amazonweb'];
+        'aws', 'amazonwebservices', 'amazon', 'amazonweb',
+        'shit', 'fuck', 'bitch', 'ass', 'asshole',
+        'piss', 'penis', 'kill yourself', 'kys'];
 
-        this.prohibitedWords.concat(wordsToAdd);
+        this.prohibitedWords = this.prohibitedWords.concat(wordsToAdd);
     }
 
     soundSource = "/game_levels_mp/assets/audio/discord-ping.mp3";
     soundArray = [];
 
-    sendMessage(message){
+    sendMessage(message, color = "black"){
         message = this.parseMessage(message);  
-        Multiplayer.sendData("message",message);
+        Multiplayer.sendData("message", { message, color });
     }
 
     parseMessage(message){
         this.prohibitedWords.forEach(word => {
             const regex = new RegExp('\\b' + word + '\\b', 'gi');
-            message = message.replace(regex, 'I Love CSSE! '.repeat(word.length));
+            message = message.replace(regex, 'Erm...you can\'t say that here! This is a safe space! o_o ');
         });
         return message;
     }
-/**
- * Sets up primary chat interfaces and quality of life features, 
- * like usernames, buttons, or message placeholders
- * 
- */
+
     get chatBoxContainer(){
         const div = document.createElement("div");
-        div.className = ""; //create a class for the chatBox
+        div.className = "";
         div.id = "chatBoxContainer";
 
         const div2 = document.createElement("div");
@@ -51,58 +45,77 @@ class Chat {
         input.type = "text";
         input.placeholder = "Type your message...";
 
+        const colorSelect = document.createElement("select");
+        colorSelect.id = "colorSelect";
+        colorSelect.innerHTML = `
+            <option value="black">Black</option>
+            <option value="blue">Blue</option>
+            <option value="green">Green</option>
+            <option value="red">Red</option>
+            <option value="purple">Purple</option>
+            <option value="pink">Pink</option>
+            <option value="yellow">Yellow</option>
+            <option value="orange">Orange</option>
+        `;
+
         const button = document.createElement("button");
         button.id = "chatButton";
         button.innerText = "Send";
 
-        function addMessage(message,name){
+        function addMessage(message, name, color){
             const div3 = document.createElement("div");
             const para = document.createElement("p");
-            para.innerHTML = "<b>"+name+":</b>"+" "+message;
-            para.style.color = "black";
+            para.innerHTML = `<b style="color:${color};">${name}:</b> ${message}`;
             div3.append(para);
             div2.append(div3);
         }
 
-        function onMessage(){
-                Multiplayer.removeListener("onMessage")
-                Multiplayer.createListener("onMessage",(data)=>{
-                    var message = this.parseMessage(data.message);
-                    addMessage(message,data.name?data.name:data.id);
-                    this.soundArray.forEach((d)=>{
-                        if (d[1]==true){ //sound can be played
-                            d[0].play();
-                            d[1]=false;
-                            return;
-                        }
-                    });
-                    var sound = createSound(this.soundSource);
-                    var arrayToAdd = [sound,true];
-                    this.soundArray.push(arrayToAdd);
-                    sound.addEventListener("ended",()=>{
-                        arrayToAdd[1]=true;
-                    })
-                    sound.play();
-                })
-                var message = input.value;
-                message = this.parseMessage(message);
-                addMessage(message,"you");
-                this.sendMessage(message);
-            }
-        button.addEventListener("click",onMessage.bind(this));
+        const onMessage = () => {
+            Multiplayer.removeListener("onMessage");
+            Multiplayer.createListener("onMessage", (data) => {
+                const message = this.parseMessage(data.message.message);
+                addMessage(message, data.name ? data.name : data.id, data.message.color);
+                this.soundArray.forEach((d) => {
+                    if (d[1] == true) { 
+                        d[0].play();
+                        d[1] = false;
+                        return;
+                    }
+                });
+                const sound = createSound(this.soundSource);
+                const arrayToAdd = [sound, true];
+                this.soundArray.push(arrayToAdd);
+                sound.addEventListener("ended", () => {
+                    arrayToAdd[1] = true;
+                });
+                sound.play();
+            });
+
+            let message = input.value;
+            const color = colorSelect.value;
+            message = this.parseMessage(message);
+            addMessage(message, "you", color);
+            this.sendMessage(message, color);
 
-        function KeyCheck(e){
-            //console.log(this)
-            if(e.key == "Enter"){
-                onMessage.bind(this)()
+            input.value = '';
+        };
+
+        button.addEventListener("click", onMessage);
+
+        const keyCheck = (e) => {
+            if (e.key == "Enter") {
+                onMessage();
             }
-        }
-        window.addEventListener("keypress",KeyCheck.bind(this));
+        };
+
+        window.addEventListener("keypress", keyCheck);
 
         div.append(div2);
         div.append(input);
+        div.append(colorSelect);
         div.append(button);
         return div;
     }
 }
+
 export default Chat;

assets/js/platformer3x/Coin.js

@@ -1,3 +1,4 @@
+import GameControl from './GameControl.js';
 import GameEnv from './GameEnv.js';
 import GameObject from './GameObject.js';
 
@@ -52,6 +53,7 @@ export class Coin extends GameObject {
         // check player collision
         if (this.collisionData.touchPoints.other.id === "player") {
             this.destroy();
+            GameControl.gainCoin(5)
             GameEnv.playSound("coin");
         }
     }

assets/js/platformer3x/GameControl.js

@@ -91,8 +91,19 @@ const GameControl = {
             if (document.getElementById('timeScore')) {
                 document.getElementById('timeScore').textContent = (time/1000).toFixed(2) 
             }
-    },    
-
+    },   
+    updateCoinDisplay() {
+        const coins = GameEnv.coinScore
+        const coinDisplay = document.getElementById('coinScore')
+        if (!coinDisplay) {
+            console.error("COIN DISPLAY DOES NOT EXIST");
+        }
+        coinDisplay.textContent = coins
+    },     
+    gainCoin(value) {
+        GameEnv.coinScore += value;
+        this.updateCoinDisplay()
+    },
     /**
      * Starts the game timer.
      * @function startTimer
@@ -121,7 +132,7 @@ const GameControl = {
         GameEnv.timerActive = false
         GameEnv.time = 0;
         GameEnv.coinScore = 0;
-
+        this.updateCoinDisplay()
         clearInterval(this.intervalID)
     },