🎡👧 Checkpoint

./script.js:18108132/2153
./style.css:18108127/135

script.js

@@ -90,7 +90,7 @@ playBtn.addEventListener("click", () => {
     currentUser = username;
     startTime = Date.now();
     
-    scoresController.setUserPlaying(username);
+    scoresController.createPlayingUser(username);
     
     shuffle(imgDivArray);
 
@@ -124,22 +124,25 @@ function scoreBarController(barId) {
   let scoresBar = document.getElementById(barId);
 
   return {
-    hasUser(username) {
-      return 
-    },
-
-    setUserPlaying(username) {
-      if (this.hasUser(username)) {
-        let userContainer = document.querySelector(
-          `.user-score-container[data-username=${username}]`
+    hasUser(username){
+       let userContainer = document.querySelector(
+          `.div[data-username=${username}]`
         );  
+      return userContainer !== null;
+    },
+    
+    createPlayingUser(username) {
+      if (this.hasUser(username)) {
+        let userContainer = document.querySelector(`.div[data-username=${username}]`);  
         userContainer.remove();
         userContainer.lastElementChild.textContent = "Currently playing...";
         scoresBar.insertAdjacentElement("afterbegin", userContainer);   
       } else {     
         let userContainer = createUserScoreDiv(username);
+        if(scoresBar.childElementCount == 5) {
+          scoresBar.lastElementChild.remove();
+        }
         scoresBar.insertAdjacentElement("afterbegin", userContainer);
-        users.push(username);
       }
     },
 
@@ -155,7 +158,6 @@ function scoreBarController(barId) {
 function createUserScoreDiv(username) {
   let container = document.createElement("div");
   container.setAttribute("data-username", username);
-  container.className = "user-score-container";
   container.innerHTML = `<h2>${username}</h2> <p>Currently playing...</p>`;
   return container;
 }

style.css

@@ -105,7 +105,7 @@ h2{
 .choose-username h1 {
   margin: 0;
   padding-bottom: 1rem;
-  color: hsla(208, 80%, 10%, .25);
+  color: hsla(208, 80%, 50%, .5);
 }
 
 input[type="text"] {
@@ -198,6 +198,7 @@ strong {
 
 .score-title {
   position: relative;
+  left: 20px;
   z-index: 2;
   color: white;
   transform: skew(0deg, -2deg);
@@ -216,6 +217,10 @@ strong {
   width: 35px;
 }
 
-.user-score-container {
-  color: hsla(208, 80%, 10%, .25);
+.user-scores h2 {
+  color: hsla(208, 80%, 60%, 1);
+}
+
+.user-scores {
+  text-align: center;
 }