Merge branch 'master' into public-release

client/package.json

@@ -129,11 +129,9 @@
     "homepage": "https://github.com/battlecode/battlecode25#readme",
     "dependencies": {
         "@headlessui/react": "^2.2.0",
-        "@types/d3": "^7.4.2",
         "assert": "^2.0.0",
         "battlecode-schema": "file:../schema",
         "child_process": "^1.0.2",
-        "d3": "^7.8.5",
         "electron-fetch": "^1.9.1",
         "electron-is-dev": "^2.0.0",
         "fs": "^0.0.1-security",

client/src/components/sidebar/game/quick-line-chart.tsx

@@ -1,11 +1,12 @@
 import React, { useEffect, useRef } from 'react'
 import { Colors, currentColors } from '../../../colors'
 import { drawAxes, getAxes, setCanvasResolution } from '../../../util/graph-util'
+import { useGame } from '../../../playback/GameRunner'
 
 export interface LineChartDataPoint {
     round: number
-    brown: number
-    white: number
+    team0: number
+    team1: number
 }
 
 interface LineChartProps {
@@ -29,6 +30,7 @@ export const QuickLineChart: React.FC<LineChartProps> = ({
     resolution = window.devicePixelRatio ?? 1
 }) => {
     const canvasRef = useRef<HTMLCanvasElement | null>(null)
+    const game = useGame()
 
     useEffect(() => {
         if (!canvasRef.current) return
@@ -38,22 +40,22 @@ export const QuickLineChart: React.FC<LineChartProps> = ({
 
         setCanvasResolution(canvas, width, height, resolution)
 
-        const max = Math.max(...data.map((d) => Math.max(d.brown, d.white)))
+        const max = Math.max(...data.map((d) => Math.max(d.team0, d.team1)))
         const { xScale, yScale, innerWidth, innerHeight } = getAxes(width, height, margin, { x: data.length, y: max })
 
         context.clearRect(0, 0, width, height)
 
         if (data.length > 0) {
-            context.strokeStyle = currentColors[Colors.TEAM_ONE]
+            context.strokeStyle = game?.teams[0].color ?? 'black'
             context.beginPath()
-            context.moveTo(xScale(data[0].round), yScale(data[0].white))
-            for (let i = 1; i < data.length; i++) context.lineTo(xScale(data[i].round), yScale(data[i].white))
+            context.moveTo(xScale(data[0].round), yScale(data[0].team0))
+            for (let i = 1; i < data.length; i++) context.lineTo(xScale(data[i].round), yScale(data[i].team0))
             context.stroke()
 
-            context.strokeStyle = currentColors[Colors.TEAM_TWO]
+            context.strokeStyle = game?.teams[1].color ?? 'black'
             context.beginPath()
-            context.moveTo(xScale(data[0].round), yScale(data[0].brown))
-            for (let i = 1; i < data.length; i++) context.lineTo(xScale(data[i].round), yScale(data[i].brown))
+            context.moveTo(xScale(data[0].round), yScale(data[0].team1))
+            for (let i = 1; i < data.length; i++) context.lineTo(xScale(data[i].round), yScale(data[i].team1))
             context.stroke()
         }
 

client/src/components/sidebar/game/resource-graph.tsx

@@ -1,9 +1,8 @@
 import React from 'react'
-import { D3LineChart, LineChartDataPoint } from './d3-line-chart'
 import assert from 'assert'
 import { useRound } from '../../../playback/GameRunner'
 import Round from '../../../playback/Round'
-import { QuickLineChart } from './quick-line-chart'
+import { LineChartDataPoint, QuickLineChart } from './quick-line-chart'
 
 interface Props {
     active: boolean
@@ -26,8 +25,8 @@ function getChartData(round: Round, property: string): LineChartDataPoint[] {
     return values[0].slice(0, round.roundNumber).map((value, index) => {
         return {
             round: index + 1,
-            white: value as number,
-            brown: values[1][index] as number
+            team0: value as number,
+            team1: values[1][index] as number
         }
     })
 }

client/src/constants.ts

@@ -1,4 +1,4 @@
-export const CLIENT_VERSION = '1.3.1'
+export const CLIENT_VERSION = '1.3.2'
 export const SPEC_VERSION = '1'
 export const BATTLECODE_YEAR: number = 2025
 export const MAP_SIZE_RANGE = {

client/src/playback/Game.ts

@@ -96,6 +96,10 @@ export default class Game {
         this.id = nextID++
     }
 
+    get complete() {
+        return this.winner !== null
+    }
+
     /*
      * Adds a new game event to the game.
      */

client/src/playback/Match.ts

@@ -292,10 +292,16 @@ export default class Match {
      */
     public _jumpToRound(roundNumber: number): void {
         if (!this.game.playable) return
+        if (this.snapshots.length === 0) return
 
         this._roundSimulation()
 
-        roundNumber = Math.max(1, Math.min(roundNumber, this.maxRound))
+        // Determine the maximum round we are allowed to jump to. If the game is
+        // incomplete (still being updated with rounds), prevent jumping to the last
+        // round to prevent issues (TODO: investigate why, but this seems to fix it)
+        const maxRound = this.maxRound - (this.game.complete ? 0 : 1)
+
+        roundNumber = Math.max(1, Math.min(roundNumber, maxRound))
         if (roundNumber == this.currentRound.roundNumber) return
 
         // Select the closest snapshot round, or mutate the current round if we can

client/src/util/graph-util.ts

@@ -1,5 +1,3 @@
-import { Axis } from 'd3'
-
 export function getAxes(
     width: number,
     height: number,