From a1dfc39e759bdafc18360b99e8a86ea5d17b092c Mon Sep 17 00:00:00 2001
From: Aidan Blum Levine <aidanblumlevine@gmail.com>
Date: Tue, 14 Nov 2023 20:24:14 -0500
Subject: [PATCH] To be discussed, controllable graph refresh rate

---
 .../src/components/sidebar/game/d3-line-chart.tsx |  3 +--
 .../components/sidebar/game/resource-graph.tsx    | 15 +++++++++++++--
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/client2/src/components/sidebar/game/d3-line-chart.tsx b/client2/src/components/sidebar/game/d3-line-chart.tsx
index a98da8fc..d91ca0e6 100644
--- a/client2/src/components/sidebar/game/d3-line-chart.tsx
+++ b/client2/src/components/sidebar/game/d3-line-chart.tsx
@@ -23,8 +23,6 @@ export const D3LineChart: React.FC<LineChartProps> = ({ data, width, height, mar
     const svgRef = useRef<SVGSVGElement | null>(null)
 
     useEffect(() => {
-        if (data.length === 0) return
-
         // The topleft of this container is the origin of everything. Nothing
         // can be drawn outside this container.
         const svg = d3
@@ -86,6 +84,7 @@ export const D3LineChart: React.FC<LineChartProps> = ({ data, width, height, mar
         const tooltip = svg.append('g')
 
         function pointerMoved(event: MouseEvent) {
+            if (data.length === 0) return
             if (
                 d3.pointer(event)[0] < margin.left ||
                 d3.pointer(event)[0] > width - margin.right ||
diff --git a/client2/src/components/sidebar/game/resource-graph.tsx b/client2/src/components/sidebar/game/resource-graph.tsx
index c2d745dd..5f8135ad 100644
--- a/client2/src/components/sidebar/game/resource-graph.tsx
+++ b/client2/src/components/sidebar/game/resource-graph.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useState } from 'react'
+import React, { useContext, useRef, useState } from 'react'
 import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts'
 import { AppContext, useAppContext } from '../../../app-context'
 import { useListenEvent, EventType } from '../../../app-events'
@@ -42,7 +42,18 @@ export const ResourceGraph: React.FC<Props> = (props: Props) => {
     const appContext = useAppContext()
     const forceUpdate = useForceUpdate()
 
-    useListenEvent(EventType.TURN_PROGRESS, forceUpdate)
+    const target_update_ms = 1000 / 15 // 15 fps
+    const delayedUpdate = useRef<NodeJS.Timeout | undefined>(undefined)
+    const lastUpdateTime = useRef<number>(0)
+    useListenEvent(EventType.TURN_PROGRESS, () => {
+        if (delayedUpdate.current !== undefined) clearTimeout(delayedUpdate.current)
+        if (Date.now() - lastUpdateTime.current < target_update_ms) {
+            delayedUpdate.current = setTimeout(forceUpdate, target_update_ms - (Date.now() - lastUpdateTime.current))
+        } else {
+            lastUpdateTime.current = Date.now()
+            forceUpdate()
+        }
+    })
 
     return (
         <div className="mt-2 px-2 w-full">