Add paint bar config

Author: TheApplePieGod

client/src/client-config.tsx

@@ -14,6 +14,7 @@ const DEFAULT_CONFIG = {
     showAllRobotRadii: false,
     showTimelineMarkers: true,
     showHealthBars: true,
+    showPaintBars: false,
     showPaintMarkers: true,
     showMapXY: true,
     enableFancyPaint: true,
@@ -28,6 +29,7 @@ const configDescription: Record<keyof ClientConfig, string> = {
     showAllRobotRadii: 'Show all robot view and attack radii',
     showTimelineMarkers: 'Show user-generated markers on the timeline',
     showHealthBars: 'Show health bars below all robots',
+    showPaintBars: 'Show paint bars below all robots',
     showPaintMarkers: 'Show paint markers created using mark()',
     showMapXY: 'Show X,Y when hovering a tile',
     enableFancyPaint: 'Enable fancy paint rendering',

client/src/playback/Bodies.ts

@@ -274,6 +274,9 @@ export class Body {
             if (focused || config.showHealthBars) {
                 this.drawHealthBar(match, overlayCtx)
             }
+            if (focused || config.showPaintBars) {
+                this.drawPaintBar(match, overlayCtx, config.showHealthBars)
+            }
         }
     }
 
@@ -435,6 +438,21 @@ export class Body {
         ctx.fillRect(hpBarX, hpBarY, hpBarWidth * (this.hp / this.maxHp), hpBarHeight)
     }
 
+    private drawPaintBar(match: Match, ctx: CanvasRenderingContext2D, healthVisible: boolean): void {
+        const dimension = match.currentRound.map.staticMap.dimension
+        const interpCoords = this.getInterpolatedCoords(match)
+        const renderCoords = renderUtils.getRenderCoords(interpCoords.x, interpCoords.y, dimension)
+        const paintBarWidth = 0.8
+        const paintBarHeight = 0.1
+        const paintBarYOffset = 0.4 + (healthVisible ? 0.11 : 0)
+        const paintBarX = renderCoords.x + 0.5 - paintBarWidth / 2
+        const paintBarY = renderCoords.y + 0.5 + paintBarYOffset
+        ctx.fillStyle = 'rgba(0,0,0,.3)'
+        ctx.fillRect(paintBarX, paintBarY, paintBarWidth, paintBarHeight)
+        ctx.fillStyle = '#c515ed'
+        ctx.fillRect(paintBarX, paintBarY, paintBarWidth * (this.paint / this.maxPaint), paintBarHeight)
+    }
+
     protected drawLevel(match: Match, ctx: CanvasRenderingContext2D) {
         if (this.level <= 1) return