Leaderboard CSS transitions never play due to innerHTML reset

[FlorentPoinsaut]

Description

The leaderboard render loop destroys and recreates all DOM elements on every WebSocket update:

elTopList.innerHTML = '';  // wipes all elements
// then recreates them from scratch

CSS transitions defined on .top-bar (width: 0.5s ease) never animate because the elements are brand new on each render — they have no previous state to transition from.

Fix

Replace innerHTML = '' with a keyed update strategy:

• Reuse existing <li> elements by data-word attribute when they already exist
• Only create new elements for words not yet in the list
• Update style.width directly on existing elements (allows CSS transition to play)

Alternatively, use element.textContent for text nodes and element.style.width for bar widths, which also eliminates the XSS risk (see issue #47).

Also

Player names (entry.user) are not shown in the leaderboard. Adding them would make the competition visible and more engaging. Medals (🥇🥈🥉) for ranks 1–3 would further improve readability.

Identified by

🎨 [Tech] UX Designer