add distance moved score

tank-frontend/src/PlayerInfo.tsx

@@ -75,6 +75,7 @@ export default function PlayerInfo({player}: { player: string }) {
             <ScoreRow name="walls destroyed" value={lastJsonMessage.scores.wallsDestroyed}/>
             <ScoreRow name="bullets fired" value={lastJsonMessage.scores.shotsFired}/>
             <ScoreRow name="power ups collected" value={lastJsonMessage.scores.powerUpsCollected}/>
+            <ScoreRow name="pixels moved" value={lastJsonMessage.scores.pixelsMoved}/>
 
             <ScoreRow name="score" value={lastJsonMessage.scores.overallScore}/>
             </tbody>

tank-frontend/src/Scoreboard.tsx

@@ -58,6 +58,11 @@ export default function Scoreboard({}: {}) {
                 visualize: p => p.scores.powerUpsCollected.toString(),
                 sorter: (a, b) => numberSorter(a.scores.powerUpsCollected, b.scores.powerUpsCollected)
             },
+            {
+                field: 'distance',
+                visualize: p => p.scores.pixelsMoved.toString(),
+                sorter: (a, b) => numberSorter(a.scores.pixelsMoved, b.scores.pixelsMoved)
+            },
             {
                 field: 'score',
                 visualize: p => p.scores.overallScore.toString(),

tank-frontend/src/serverCalls.tsx

@@ -9,6 +9,7 @@ export type Scores = {
     readonly shotsFired: number;
     readonly overallScore: number;
     readonly powerUpsCollected: number;
+    readonly pixelsMoved: number;
 };
 
 export type Player = {