- add new sprites

- add 2D character option
- new desciptive text

public/classes/Player.js

@@ -1,6 +1,6 @@
 
 class Player extends Sprite {
-    constructor({position,clickX,clickY,incrementX,incrementY,userId,username,skin,message,atPosition,animationColumn,imageSrc,frames,center,sprites}){
+    constructor({position,clickX,clickY,incrementX,incrementY,userId,username,skin,message,atPosition,isCharacter2D,animationColumn,imageSrc,frames,center,sprites}){
         super({position,imageSrc,frames,center,atPosition,sprites,skin})
         // super({imageSrc})
         this.clickX = clickX
@@ -10,6 +10,7 @@ class Player extends Sprite {
         this.incrementY = incrementY
         this.userId = userId
         this.username = username
+        this.isCharacter2D = isCharacter2D
         this.message = message
         this.messageSent = false
 
@@ -82,10 +83,18 @@ class Player extends Sprite {
         
             this.atPosition=false
 
+            if(this.isCharacter2D){
+                // console.log(this.angleDeg)
+            if(90<this.angleDeg && this.angleDeg<270){this.image = this.Left}else{this.image = this.Right}
+
+            }else{
+
             if(225<this.angleDeg && this.angleDeg<315){this.image = this.Up}else
             if(45<this.angleDeg && this.angleDeg<135){this.image = this.Down}else
             if(135<this.angleDeg && this.angleDeg<225){this.image = this.Left}else{this.image = this.Right}
 
+        }
+
             this.position.x+=this.incrementX;
             this.position.y+=this.incrementY;
             // console.log('goingtolocation')

public/classes/Sprite.js

@@ -21,7 +21,7 @@ class Sprite{
         this.Left = new Image()
         this.Right = new Image()
         this.Up.src = sprites.up
-        this.Down.src = sprites.down 
+        this.Down.src = sprites.down
         this.Left.src = sprites.left
         this.Right.src = sprites.right
     }

public/css/cafe.css

@@ -23,7 +23,7 @@ of the container */
     font-size: 12px;
 }
     .loungeText ul{
-        font-size: 16px;
+        font-size: 15px;
         padding-left: 15px;
         margin: 0px;
     }

public/index.html

@@ -150,6 +150,7 @@
  <ul>
   <li>Click anywhere in the box to <strong>move</strong></li>
   <li>Write <code>/name</code> followed by your name in the text box to <strong>change your name</strong></li>
+  <li>You can change your character with <code>/dino</code> followed by <code>1,2,3,4</code> eg. <code>/dino 2</code> </li>
   <li>Use the textbox to <strong>chat</strong> and the emoji button to send <strong>emojis</strong></li>
   <li>Be nice & Have fun!</li>
    <div class="credits"> Dino sprites by <a href="https://arks.itch.io/dino-characters" target="_blank">@ScissorMarks</a> </div>

public/index.js

@@ -81,18 +81,15 @@ socket.on('updatePlayers', (bPlayers) =>{
                 skin:bPlayer.skin,
                 message:'',
                 atPosition:true,
+                isCharacter2D:true,
                 animationColumn:0,
                 imageSrc:'characterSprites/' + bPlayer.skin + '/Down.png',
                 frames: 7,
                 center:true,
-                sprites:{
-                    down:'characterSprites/' + bPlayer.skin + '/Down.png',
-                    up:'characterSprites/' + bPlayer.skin + '/Up.png',
-                    right:'characterSprites/' + bPlayer.skin + '/Right.png',
-                    left:'characterSprites/' + bPlayer.skin + '/Left.png'
-                }
+                sprites:spriteFunction(bPlayer.skin)
                 
             })
+            // console.log(fPlayers[id])
             fPlayers[socket.id].username = localStorage.getItem('username')
             socket.emit('username',fPlayers[socket.id].username);
             
@@ -102,7 +99,9 @@ socket.on('updatePlayers', (bPlayers) =>{
             fPlayers[id].clickY = bPlayer.clickY
             fPlayers[id].message = bPlayer.message
             fPlayers[id].username = bPlayer.username
-            fPlayers[id].skin = bPlayer.skin
+            spriteFunctionUpdate(fPlayers[id],bPlayer.skin)
+            // fPlayers[id].sprites = spriteFunction(bPlayer.skin)
+            // console.log(fPlayers[id])
 
             //update player position without animation if tab is inactive
             if (document.hidden) {
@@ -207,8 +206,24 @@ document.querySelector('#textInput').addEventListener('submit',(event)=>{
     }else if(inputValue==='/debug'){
         if(debugMode) {debugMode=false;}else{debugMode=true;}
         
-    }else if(inputValue==='/red'){
-        fPlayers[socket.id].skin = "Red";
+    }else if(inputValue.includes("/dino ")){
+        console.log(inputValue.slice(6,7));
+        switch(inputValue.slice(6,7)) {
+            case '1':
+                fPlayers[socket.id].skin = "Green";
+              break;
+            case '2':
+                fPlayers[socket.id].skin = "Red";
+              break;
+            case '3':
+                fPlayers[socket.id].skin = "Orange";
+              break;
+            case '4':
+                fPlayers[socket.id].skin = "Blue";
+              break;
+            default:
+                fPlayers[socket.id].skin = "Green";
+          }    
         socket.emit('skin',fPlayers[socket.id].skin);
     }else{
     fPlayers[socket.id].message=document.querySelector('#input').value
@@ -218,4 +233,22 @@ document.querySelector('#textInput').addEventListener('submit',(event)=>{
     fPlayers[socket.id].messageSent = true;
 }
     document.querySelector('#textInput').reset();
-})
+})
+
+function spriteFunction(skin) {
+    return {
+        down:'characterSprites/' + skin + '/Down.png',
+        up:'characterSprites/' + skin + '/Up.png',
+        right:'characterSprites/' + skin + '/Right.png',
+        left:'characterSprites/' + skin + '/Left.png'
+    };
+  }
+
+  function spriteFunctionUpdate(obj,skin) {
+    
+        obj.Down.src='characterSprites/' + skin + '/Down.png';
+        obj.Up.src='characterSprites/' + skin + '/Up.png';
+        obj.Left.src='characterSprites/' + skin + '/Left.png';
+        obj.Right.src='characterSprites/' + skin + '/Right.png';
+    
+  }