Game Over: Match colors for tie scores.

[AhoyLemon]

Tiny thing, but a thought.

The color scheme for the game over screen is built on :nth-child() syntax. It would be cool if, as it populated the player scores and names, it would also insert a class based on what place that person was in, so in the case of a tie, two players would have the same color. Ex:

<li id="place1" class="first-place">
  <span id="namePlace1" class="player-name">Bill</span>
  <span id="scorePlace1" class="player-name">10</span>
</li>
<li id="place2" class="second-place">
  <span id="namePlace2" class="player-name">Bob</span>
  <span id="scorePlace2" class="player-name">7</span>
</li>
<li id="place3" class="second-place">
  <span id="namePlace3" class="player-name">Doug</span>
  <span id="scorePlace3" class="player-name">7</span>
</li>
<li id="place4" class="third-place">
  <span id="namePlace4" class="player-name">Carlos</span>
  <span id="scorePlace4" class="player-name">4</span>
</li>
<li id="place5" class="third-place">
  <span id="namePlace5" class="player-name">Pablo</span>
  <span id="scorePlace5" class="player-name">4</span>
</li>
<li id="place6" class="fourth-place">
  <span id="namePlace6" class="player-name">Ted Cruz</span>
  <span id="scorePlace6" class="player-name">0</span>
</li>

I think I can figure out a way to do this myself, but the result might be inelegant.

[AhoyLemon]

So, I tried something that I totally thought would work, but it broke the whole end game population, so I rolled back all the JS changes, but kept the css changes. Here's what I tried...

sockets, js, line 356

placeClasses=["first-place","second-place","third-place","fourth-place","fifth-place","sixth-place","seventh-place","eighth-place"];
var p=0;
for(i = 0; i < finalPlayerList.length; i++){
  $('#place' + (i+1)).removeClass('hidden');
  $('#namePlace' + (i+1)).text(scoresArray[i].name);
  $('#scorePlace' + (i+1)).text(scoresArray[i].score);
  if (scoresArray[i].score != scoresArray[i-1].score) {
    p++;
  }
  $('#place' + (i+1)).addClass(placeClasses[p]);
}

[AnotherDole]

That looks like what I was thinking of, except you would need to do the first player separately before the loop otherwise this line if (scoresArray[i].score != scoresArray[i-1].score) { will cause issues because scoresArray[-1] doesn't exist.

[AhoyLemon]

Oh! I figured out my other JS problem too, hang on, I'll get this.