fix double frame request

tank-frontend/src/ClientScreen.tsx

@@ -119,10 +119,13 @@ export default function ClientScreen({theme, player}: {
     useEffect(() => {
         if (lastMessage === null)
             return;
-        if (canvasRef.current === null)
+
+        let ignore = false;
+        const start = async () => {
+            const canvas = canvasRef.current;
+            if (canvas === null)
                 throw new Error('canvas null');
 
-        const canvas = canvasRef.current;
             const drawContext = canvas.getContext('2d');
             if (!drawContext)
                 throw new Error('could not get draw context');
@@ -134,6 +137,9 @@ export default function ClientScreen({theme, player}: {
                 pixels = pixels.slice(0, observerMessageSize);
             }
 
+            if (ignore)
+                return;
+
             drawPixelsToCanvas({
                 context: drawContext,
                 width: canvas.width,
@@ -145,7 +151,17 @@ export default function ClientScreen({theme, player}: {
                 playerColor: normalizeColor(drawContext, hslToString(theme.secondary)),
                 otherTanksColor: normalizeColor(drawContext, hslToString(theme.tertiary))
             });
+
+            if (ignore)
+                return;
+
             sendMessage('');
+        };
+
+        start();
+        return () => {
+            ignore = true;
+        };
     }, [lastMessage, canvasRef.current, theme]);
 
     return <canvas ref={canvasRef} id="screen" width={pixelsPerRow} height={pixelsPerCol}/>;