added gifs for eyes, mouth and character and included it in the js

client/res/.gitignore

-*.kra~
+*.kra*
\ No newline at end of file
+paintnet/*
+*.log
+

client/ui/SkribblMenu.js

@@ -23,7 +23,7 @@ export default class SkribblMenu extends HTMLElement {
 					border:none;
 					height:34px;
 					width:34px;
-					background: url('/res/selectArrows.png');
+					background: url('/res/selectArrows.gif');
 					background-size: 54px;
 					background-repeat: no-repeat;
 					cursor: pointer;
@@ -74,6 +74,11 @@ export default class SkribblMenu extends HTMLElement {
 					justify-content: center;
 					position: relative;
 				}
+				#avatar-container{
+					flex: 0 0 auto;
+					width:66px;
+					height:96px; 
+				}
 
 			
 

client/ui/SkribblPlayerIcon.js

@@ -15,20 +15,23 @@
 					border-radius: 5px;
 				}
 				.container-character{
-					border: 2px solid #777;
-					border-radius: 10px;
+					background:url("/res/pi.gif");
+					background-size:contain;
+					background-repeat: no-repeat;
 				}
                 .character-eyes{
 					height: 34px;
-					width: 34px;
-					background:url("/res/MouthsAndEyes.png");
-					background-position: 10px 0;
+					width: 68px;
+					background:url("/res/MouthsAndEyes.gif");
+					background-position: 25px 18px;
+					background-repeat: no-repeat;
 				}
 				.character-mouth{
 					height: 34px;
-					width: 34x;
-					background:url("/res/MouthsAndEyes.png");
-					background-position: 0px -52px;
+					width: 68x;
+					background:url("/res/MouthsAndEyes.gif");
+					background-position: 24px -32px;
+					background-repeat: no-repeat;
 				}
 			</style>
 
@@ -43,26 +46,31 @@
 
 	/** @param {boolean} toTheRight */
 	changeEye(toTheRight) {
-		let displacement = 80;
-
+		let displacement = 38;
 		if (toTheRight){
 			this.eyesDisplacement += displacement;
 		}else{
 			this.eyesDisplacement -= displacement;
 		}
+		if(this.eyesDisplacement>266){
+			this.eyesDisplacement = 10;
+		}
 		const eye = this.shadowRoot.getElementById("eyes");
 		eye.style.backgroundPositionX = this.eyesDisplacement+"px";
 	}
 
 	/** @param {boolean} toTheRight */
 	changeMouth(toTheRight) {
-		let displacement = 80;
+		let displacement = 38;
 
 		if (toTheRight){
 			this.mouthDisplacement += displacement;
 		}else{
 			this.mouthDisplacement -= displacement;
 		}
+		if(this.mouthDisplacement>266){
+			this.mouthDisplacement = 0;
+		}
 		const mouth = this.shadowRoot.getElementById("mouth");
 		mouth.style.backgroundPositionX = this.mouthDisplacement+"px";
 	}