Add DPI scaling & config

Author: TheApplePieGod

client/src/client-config.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect } from 'react'
 import { useAppContext } from './app-context'
 import { GameRenderer } from './playback/GameRenderer'
+import { NumInput } from './components/forms'
 
 export type ClientConfig = typeof DEFAULT_CONFIG
 
@@ -15,7 +16,8 @@ const DEFAULT_CONFIG = {
     showMapXY: true,
     streamRunnerGames: true,
     profileGames: false,
-    validateMaps: false
+    validateMaps: false,
+    resolutionScale: 100
 }
 
 const configDescription: Record<keyof ClientConfig, string> = {
@@ -25,14 +27,17 @@ const configDescription: Record<keyof ClientConfig, string> = {
     showMapXY: 'Show X,Y when hovering a tile',
     streamRunnerGames: 'Stream each round from the runner live as the game is being played',
     profileGames: 'Enable saving profiling data when running games',
-    validateMaps: 'Validate maps before running a game'
+    validateMaps: 'Validate maps before running a game',
+    resolutionScale: 'Resolution scale for the game area. Decrease to help performance.'
 }
 
 export function getDefaultConfig(): ClientConfig {
     const config: ClientConfig = { ...DEFAULT_CONFIG }
     for (const key in config) {
         const value = localStorage.getItem('config' + key)
-        if (value) config[key as keyof ClientConfig] = JSON.parse(value)
+        if (value) {
+            ;(config[key as keyof ClientConfig] as any) = JSON.parse(value)
+        }
     }
     return config
 }
@@ -55,7 +60,7 @@ export const ConfigPage: React.FC<Props> = (props) => {
 
 const ConfigBooleanElement: React.FC<{ configKey: keyof ClientConfig }> = ({ configKey }) => {
     const context = useAppContext()
-    const value = context.state.config[configKey]
+    const value = context.state.config[configKey] as boolean
     return (
         <div className={'flex flex-row items-center mb-2'}>
             <input
@@ -68,7 +73,7 @@ const ConfigBooleanElement: React.FC<{ configKey: keyof ClientConfig }> = ({ con
                     }))
                     localStorage.setItem('config' + configKey, JSON.stringify(e.target.checked))
                     // hopefully after the setState is done
-                    setTimeout(() => GameRenderer.render(), 10)
+                    setTimeout(() => GameRenderer.fullRender(), 10)
                 }}
             />
             <div className={'ml-2 text-xs'}>{configDescription[configKey] ?? configKey}</div>
@@ -82,8 +87,29 @@ const ConfigStringElement: React.FC<{ configKey: string }> = ({ configKey }) =>
     return <div className={'flex flex-row items-center'}>Todo</div>
 }
 
-const ConfigNumberElement: React.FC<{ configKey: string }> = ({ configKey }) => {
+const ConfigNumberElement: React.FC<{ configKey: keyof ClientConfig }> = ({ configKey }) => {
     const context = useAppContext()
-    const value = context.state.config[configKey as keyof ClientConfig]
-    return <div className={'flex flex-row items-center'}>Todo</div>
+    const value = context.state.config[configKey as keyof ClientConfig] as number
+    return (
+        <div className={'flex flex-row items-center mb-2'}>
+            <NumInput
+                value={value}
+                changeValue={(newVal) => {
+                    context.setState((prevState) => ({
+                        ...prevState,
+                        config: { ...context.state.config, [configKey]: newVal }
+                    }))
+                    localStorage.setItem('config' + configKey, JSON.stringify(newVal))
+                    // hopefully after the setState is done
+                    setTimeout(() => {
+                        // Trigger canvas dimension update to ensure resolution is updated
+                        GameRenderer.onMatchChange()
+                    }, 10)
+                }}
+                min={10}
+                max={100}
+            />
+            <div className={'ml-2 text-xs'}>{configDescription[configKey] ?? configKey}</div>
+        </div>
+    )
 }

client/src/components/forms.tsx

@@ -88,7 +88,7 @@ export const NumInput: React.FC<NumInputProps> = (props) => {
     return (
         <input
             className={
-                'border border-white bg-light py-0.5 pl-1 rounded-md w-12 ' +
+                'border border-white bg-light py-0.5 pl-1 rounded-md w-14 ' +
                 (props.disabled ? 'opacity-50 ' : '') +
                 (props.className ?? '')
             }

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

@@ -21,7 +21,13 @@ interface LineChartProps {
     resolution?: number
 }
 
-export const QuickLineChart: React.FC<LineChartProps> = ({ data, width, height, margin, resolution = 1 }) => {
+export const QuickLineChart: React.FC<LineChartProps> = ({
+    data,
+    width,
+    height,
+    margin,
+    resolution = window.devicePixelRatio ?? 1
+}) => {
     const canvasRef = useRef<HTMLCanvasElement | null>(null)
 
     useEffect(() => {
@@ -58,11 +64,11 @@ export const QuickLineChart: React.FC<LineChartProps> = ({ data, width, height,
             margin,
             {
                 range: { min: 0, max: data.length },
-                options: {}
+                options: { textColor: 'white', lineColor: 'white' }
             },
             {
                 range: { min: 0, max: max },
-                options: {}
+                options: { textColor: 'white', lineColor: 'white' }
             }
         )
     }, [data.length, height, margin, width])

client/src/playback/GameRenderer.ts

@@ -115,9 +115,11 @@ class GameRendererClass {
 
     private updateCanvasDimensions(dims: Vector) {
         for (const canvas of Object.values(this.canvases)) {
-            canvas.width = dims.x * TILE_RESOLUTION
-            canvas.height = dims.y * TILE_RESOLUTION
-            canvas.getContext('2d')?.scale(TILE_RESOLUTION, TILE_RESOLUTION)
+            const dpi = window.devicePixelRatio ?? 1
+            const resolution = TILE_RESOLUTION * dpi * (GameConfig.config.resolutionScale / 100)
+            canvas.width = dims.x * resolution
+            canvas.height = dims.y * resolution
+            canvas.getContext('2d')?.scale(resolution, resolution)
         }
     }