name doesn't wrap, can go to player on leaderboard

src/client/graphics/TransformHandler.ts

@@ -122,9 +122,8 @@ export class TransformHandler {
     }
 
     onGoToPlayer(event: GoToPlayerEvent) {
-        let unused = null;
         this.clearTarget();
-        // [this.target, unused] = placeName(this.game, event.player);
+        this.target = new Cell(event.player.nameLocation().x, event.player.nameLocation().y)
         this.intervalID = setInterval(() => this.goTo(), 1)
     }
 

src/client/graphics/layers/Leaderboard.ts

@@ -6,7 +6,7 @@ import { ClientID } from '../../../core/Schemas';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { EventBus, GameEvent } from '../../../core/EventBus';
 import { renderNumber } from '../../Utils';
-import { GameView } from '../../../core/GameView';
+import { GameView, PlayerView } from '../../../core/GameView';
 
 interface Entry {
   name: string
@@ -14,11 +14,11 @@ interface Entry {
   score: string
   gold: string
   isMyPlayer: boolean
-  player: Player
+  player: PlayerView
 }
 
 export class GoToPlayerEvent implements GameEvent {
-  constructor(public player: Player) { }
+  constructor(public player: PlayerView) { }
 }
 
 @customElement('leader-board')
@@ -88,7 +88,7 @@ export class Leaderboard extends LitElement implements Layer {
     this.requestUpdate()
   }
 
-  private handleRowClick(player: Player) {
+  private handleRowClick(player: PlayerView) {
     this.eventBus.emit(new GoToPlayerEvent(player))
   }
 

src/client/graphics/layers/NameLayer.ts

@@ -140,7 +140,6 @@ export class NameLayer implements Layer {
             mainContex.canvas.width,
             mainContex.canvas.height
         )
-
     }
 
     private createPlayerElement(player: Player): HTMLDivElement {
@@ -152,9 +151,12 @@ export class NameLayer implements Layer {
         // Don't set initial transform, will be handled in renderPlayerInfo
 
         const nameDiv = document.createElement('div')
-        nameDiv.innerHTML = player.displayName()
+        nameDiv.innerHTML = player.name()
         nameDiv.style.color = this.theme.playerInfoColor(player.id()).toHex()
         nameDiv.style.fontFamily = this.theme.font()
+        nameDiv.style.whiteSpace = 'nowrap'
+        nameDiv.style.overflow = 'hidden'
+        nameDiv.style.textOverflow = 'ellipsis'
         element.appendChild(nameDiv)
 
         const troopsDiv = document.createElement('div')
@@ -270,7 +272,7 @@ export class NameLayer implements Layer {
 
         if (render.location != oldLocation) {
             // Handle all positioning in a single transform
-            render.element.style.transform = `translate(${render.location.x}px, ${render.location.y}px) translate(-50%, -50%) scale(${render.fontSize * 0.1})`
+            render.element.style.transform = `translate(${render.location.x}px, ${render.location.y}px) translate(-50%, -50%) scale(${render.fontSize * 0.07})`
         }
     }