Merge branch 'master' into release-config

client/src-tauri/tauri.conf.json

@@ -42,10 +42,10 @@
     "windows": [
       {
         "fullscreen": false,
-        "height": 720,
+        "height": 760,
         "resizable": true,
         "title": "Battlecode Client",
-        "width": 960
+        "width": 1200
       }
     ]
   }

client/src/components/basic-dialog.tsx

@@ -0,0 +1,94 @@
+import React, { PropsWithChildren } from 'react'
+import { useAppContext } from '../app-context'
+import { useKeyboard } from '../util/keyboard'
+
+interface Props {
+    open: boolean
+    title: string
+    description?: string
+    className?: string
+    onCancel?: () => void
+    onConfirm?: () => void
+    leftButtonDisabled?: boolean
+    rightButtonDisabled?: boolean
+    leftText?: string
+    rightText?: string
+    width?: 'sm' | 'md' | 'lg' | 'full'
+}
+
+export const BasicDialog: React.FC<PropsWithChildren<Props>> = (props) => {
+    const context = useAppContext()
+    const keyboard = useKeyboard()
+
+    React.useEffect(() => {
+        if (!props.open) return
+
+        if (props.onCancel && keyboard.keyCode === 'Escape') {
+            props.onCancel()
+        }
+    }, [props.open, keyboard.keyCode])
+
+    React.useEffect(() => {
+        context.setState((prevState) => ({ ...prevState, disableHotkeys: props.open }))
+    }, [props.open])
+
+    if (!props.open) return <></>
+
+    const leftText = props.leftText ?? 'Cancel'
+    const rightText = props.rightText ?? 'Confirm'
+    const widthType = props.width ?? 'md'
+    const widthStyle =
+        widthType == 'sm'
+            ? 'w-4/6 md:w-3/5 lg:w-6/12'
+            : widthType == 'md'
+            ? 'w-5/6 md:w-3/4 lg:w-7/12'
+            : widthType == 'lg'
+            ? 'w-5/6 md:w-4/5 lg:w-9/12'
+            : widthType == 'full'
+            ? 'w-5/6 md:w-5/6 lg:w-11/12'
+            : ''
+    return (
+        <div className="fixed flex flex-col items-center justify-center w-full h-full top-0 left-0 bg-gray-500 bg-opacity-50 z-50">
+            <div
+                className={
+                    'flex flex-col flex-between items-center bg-white border border-black shadow-lg rounded-xl py-4 px-6 ' +
+                    widthStyle
+                }
+            >
+                <div className="flex flex-row items-center justify-between w-full">
+                    <div className="font-display text-2xl font-medium">{props.title}</div>
+                </div>
+                {props.description && <div className="text-md w-full mt-3">{props.description}</div>}
+                <div className="w-full my-4 overflow-y-auto">{props.children}</div>
+                <div className="flex flex-row justify-between items-center w-full">
+                    {props.onCancel ? (
+                        <button
+                            disabled={props.leftButtonDisabled}
+                            onClick={() => props.onCancel && props.onCancel()}
+                            className="hover:brightness-90 transition cursor-pointer text-md font-display rounded-[6px] px-5 py-1.5"
+                            style={{ opacity: props.leftButtonDisabled ? 0.5 : 1.0 }}
+                        >
+                            {leftText}
+                        </button>
+                    ) : (
+                        <div />
+                    )}
+                    {props.onConfirm ? (
+                        <button
+                            disabled={props.rightButtonDisabled}
+                            onClick={() => props.onConfirm && props.onConfirm()}
+                            className={`bg-gradient-to-tr from-purple-gradient-light-start to-purple-gradient-light-end p-[1px] rounded-[7px]`}
+                            style={{ opacity: props.rightButtonDisabled ? 0.5 : 1.0 }}
+                        >
+                            <div className="hover:brightness-90 transition cursor-pointer text-md font-display rounded-[6px] px-5 py-1.5">
+                                {rightText}
+                            </div>
+                        </button>
+                    ) : (
+                        <div />
+                    )}
+                </div>
+            </div>
+        </div>
+    )
+}

client/src/components/confirm-dialog.tsx

@@ -1,52 +1,19 @@
 import React, { PropsWithChildren } from 'react'
-import { useAppContext } from '../app-context'
+import { BasicDialog } from './basic-dialog'
 
 interface Props {
     open: boolean
-    onClose: (confirm: boolean) => void
+    onConfirm: () => void
+    onCancel: () => void
     title: string
     description?: string
     className?: string
 }
 
 export const ConfirmDialog: React.FC<PropsWithChildren<Props>> = (props) => {
-    const context = useAppContext()
-
-    React.useEffect(() => {
-        context.setState((prevState) => ({ ...prevState, disableHotkeys: props.open }))
-    }, [props.open])
-
-    if (!props.open) return <></>
-
     return (
-        <div className="fixed flex flex-col items-center justify-center w-full h-full top-0 left-0 bg-gray-500 bg-opacity-50 z-50">
-            <div className="flex flex-col flex-between items-center bg-white border border-black shadow-lg w-5/6 md:w-3/4 lg:w-7/12 rounded-xl py-4 px-6">
-                <div className="flex flex-row items-center justify-between w-full">
-                    <div className="font-display text-2xl font-medium">{props.title}</div>
-                    <span
-                        onClick={() => props.onClose(false)}
-                        className="cursor-pointer icon-[mingcute--close-line] h-7 w-7"
-                    ></span>
-                </div>
-                {props.description && <div className="text-md w-full mt-3">{props.description}</div>}
-                {props.children}
-                <div className="flex flex-row justify-between items-center w-full mt-8">
-                    <button
-                        onClick={() => props.onClose(false)}
-                        className="hover:brightness-90 transition cursor-pointer text-md font-display rounded-[6px] px-5 py-1.5"
-                    >
-                        Cancel
-                    </button>
-                    <button
-                        onClick={() => props.onClose(true)}
-                        className={`bg-gradient-to-tr from-purple-gradient-light-start to-purple-gradient-light-end p-[1px] rounded-[7px]`}
-                    >
-                        <div className="hover:brightness-90 transition cursor-pointer text-md font-display rounded-[6px] px-5 py-1.5">
-                            Confirm
-                        </div>
-                    </button>
-                </div>
-            </div>
-        </div>
+        <BasicDialog {...props} onCancel={() => props.onCancel()} onConfirm={() => props.onConfirm()}>
+            {props.children}
+        </BasicDialog>
     )
 }

client/src/components/input-dialog.tsx

@@ -1,75 +1,40 @@
 import React, { PropsWithChildren } from 'react'
-import { useAppContext } from '../app-context'
+import { BasicDialog } from './basic-dialog'
 
 interface Props {
     open: boolean
     onClose: (val: string) => void
     title: string
-    placeholder?: string
-    defaultValue?: string
     description?: string
     className?: string
+    placeholder?: string
+    defaultValue?: string
 }
 
 export const InputDialog: React.FC<PropsWithChildren<Props>> = (props) => {
     const [value, setValue] = React.useState('')
 
-    const context = useAppContext()
-
     React.useEffect(() => {
-        context.setState((prevState) => ({ ...prevState, disableHotkeys: props.open }))
         if (props.open) {
             setValue(props.defaultValue ?? '')
         }
     }, [props.open])
 
-    if (!props.open) return <></>
-
     return (
-        <div className="fixed flex flex-col items-center justify-center w-full h-full top-0 left-0 bg-gray-500 bg-opacity-50 z-50">
-            <div className="flex flex-col flex-between items-center bg-white border border-black shadow-lg w-5/6 md:w-3/4 lg:w-7/12 rounded-xl py-4 px-6">
-                <div className="flex flex-row items-center justify-between w-full">
-                    <div className="font-display text-2xl font-medium">{props.title}</div>
-                    <span
-                        onClick={() => props.onClose('')}
-                        className="cursor-pointer icon-[mingcute--close-line] h-7 w-7"
-                    ></span>
-                </div>
-                {props.description && <div className="text-md w-full mt-3">{props.description}</div>}
-                <div
-                    className="w-full my-4 overflow-y-auto"
-                    style={{
-                        height: '50px'
-                    }}
-                >
-                    <input
-                        className="rounded-md px-4 py-2 bg-inherit border-[1px] border-black w-full"
-                        type={'text'}
-                        value={value}
-                        onChange={(e) => setValue(e.target.value)}
-                        placeholder={props.placeholder}
-                    />
-                </div>
-                {props.children}
-                <div className="flex flex-row justify-between items-center w-full">
-                    <button
-                        onClick={() => props.onClose('')}
-                        className="hover:brightness-90 transition cursor-pointer text-md font-display rounded-[6px] px-5 py-1.5"
-                    >
-                        Cancel
-                    </button>
-                    <button
-                        disabled={value == ''}
-                        onClick={() => props.onClose(value)}
-                        className={`bg-gradient-to-tr from-purple-gradient-light-start to-purple-gradient-light-end p-[1px] rounded-[7px]`}
-                        style={{ opacity: value == '' ? 0.5 : 1.0 }}
-                    >
-                        <div className="hover:brightness-90 transition cursor-pointer text-md font-display rounded-[6px] px-5 py-1.5">
-                            Confirm
-                        </div>
-                    </button>
-                </div>
-            </div>
-        </div>
+        <BasicDialog
+            {...props}
+            rightButtonDisabled={value == ''}
+            onCancel={() => props.onClose('')}
+            onConfirm={() => props.onClose(value)}
+        >
+            <input
+                className="rounded-md px-4 py-2 bg-inherit border-[1px] border-black w-full"
+                type={'text'}
+                value={value}
+                onChange={(e) => setValue(e.target.value)}
+                placeholder={props.placeholder}
+            />
+            {props.children}
+        </BasicDialog>
     )
 }

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

@@ -85,6 +85,8 @@ 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 ||

client/src/components/sidebar/map-editor/map-editor.tsx

@@ -78,9 +78,8 @@ export const MapEditorPage: React.FC<Props> = (props) => {
         })
     }
 
-    const clearMap = (clear: boolean) => {
+    const clearMap = () => {
         setClearConfirmOpen(false)
-        if (!clear) return
         setCleared(true)
         setMapParams({ ...mapParams, imported: null })
     }
@@ -208,12 +207,13 @@ export const MapEditorPage: React.FC<Props> = (props) => {
                 description="Enter a name for this map"
                 placeholder="Name..."
             >
-                {mapError && <div style={{ color: 'red' }}>{`Could not export map: ${mapError}`}</div>}
+                {mapError && <div className="text-[#ff0000] mt-4">{`Could not export map: ${mapError}`}</div>}
             </InputDialog>
 
             <ConfirmDialog
                 open={clearConfirmOpen}
-                onClose={clearMap}
+                onCancel={() => setClearConfirmOpen(false)}
+                onConfirm={clearMap}
                 title="Clear Map"
                 description="Are you sure you want to clear the map? This cannot be undone."
             />