Merge pull request #1023 from MarechJ/ui/maps

UI: Map settings

Author: FlorianSW

rcongui/package-lock.json

@@ -62,7 +62,7 @@
     "react-hook-form": "^7.53.0",
     "react-markdown": "^9.0.1",
     "react-router-dom": "^6.26.1",
-    "react-toastify": "^10.0.5",
+    "react-toastify": "^11.0.5",
     "react-window": "^1.8.10",
     "remark-gfm": "^4.0.0",
     "tiny-invariant": "^1.2.0",

rcongui/package.json

@@ -1,9 +1,9 @@
-import { useEffect } from "react";
 import { Skeleton, Stack, Typography } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import { useQuery } from "@tanstack/react-query";
 import { gameQueryOptions } from "@/queries/game-query";
 import dayjs from "dayjs";
+import { useGlobalStore } from "@/stores/global-state";
 
 const Wrapper = styled("div")(({ theme }) => ({
   color: theme.palette.text.primary,
@@ -20,23 +20,21 @@ const Wrapper = styled("div")(({ theme }) => ({
 }));
 
 const ServerStatus = ({ compact }) => {
-  const { data: status, isLoading } = useQuery({
-    ...gameQueryOptions.publicState(),
-  });
-
-  const name = status?.name?.short_name ?? "<Server Name>";
-  const numCurrentPlayers = status?.player_count ?? 0;
-  const maxPlayers = status?.max_player_count ?? 100;
-  const mapName = status?.current_map?.map?.pretty_name ?? "Unknown Map";
+  const serverState = useGlobalStore((state) => state.status)
+  const gameState = useGlobalStore((state) => state.gameState)
+  const name = serverState?.short_name ?? "<Server Name>";
+  const numCurrentPlayers = serverState?.current_players ?? 0;
+  const maxPlayers = serverState?.max_players ?? 100;
+  const mapName = gameState?.current_map?.pretty_name ?? "Unknown Map";
   const timeRemaining = dayjs
-    .duration(status?.time_remaining ?? 0, "seconds")
+    .duration(gameState?.time_remaining ?? 0, "seconds")
     .format("HH:mm:ss");
-  const balance = `${status?.player_count_by_team?.allied ?? 0}vs${
-    status?.player_count_by_team?.axis ?? 0
+  const balance = `${gameState?.num_allied_players ?? 0}vs${
+    gameState?.num_axis_players ?? 0
   }`;
-  const score = `${status?.score?.allied ?? 0}:${status?.score?.axis ?? 0}`;
+  const score = `${gameState?.allied_score ?? 0}:${gameState?.axis_score ?? 0}`;
 
-  if (isLoading) {
+  if (!(serverState && gameState)) {
     return (
       <Wrapper>
         <Stack

rcongui/src/components/Header/server-status.jsx

@@ -1,11 +1,8 @@
 import { useQuery } from "@tanstack/react-query";
 import { cmd } from "@/utils/fetchUtils";
-import {
-  Box,
-  Typography,
-} from "@mui/material";
-import { MapAvatar } from "@/components/MapManager/map-details";
+import { Divider, Stack } from "@mui/material";
 import ScrollableCard from "@/components/shared/card/ScrollableCard";
+import { MapDetailsCardCompact } from "@/pages/settings/maps/MapDetailsCard";
 
 const MapRotationCard = () => {
   const { data: mapRotation = [] } = useQuery({
@@ -15,20 +12,13 @@ const MapRotationCard = () => {
 
   return (
     <ScrollableCard sx={{ height: "100%" }} title="Map Rotation">
-      <Box component="ol" sx={{ listStylePosition: "inside", pl: 0 }}>
+      <Stack divider={<Divider sx={{ my: 0.2 }} />}>
         {mapRotation.map((map) => (
-          <Box
-            component="li"
-            key={map.id}
-            sx={{ display: "flex", alignItems: "center", gap: 1, mb: 0.25 }}
-          >
-            <MapAvatar mapLayer={map} sx={{ width: 24, height: 24 }} />
-            <Typography variant="subtitle2">{map.pretty_name}</Typography>
-          </Box>
+          <MapDetailsCardCompact key={map.id} mapLayer={map} />
         ))}
-      </Box>
+      </Stack>
     </ScrollableCard>
   );
 };
 
-export default MapRotationCard; 
+export default MapRotationCard;

rcongui/src/components/MapManager/map-autocomplete.jsx

@@ -0,0 +1,65 @@
+import { useClipboard } from "@/hooks/useClipboard";
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  Typography,
+  Tooltip,
+  IconButton,
+} from "@mui/material";
+import ContentCopyIcon from "@mui/icons-material/ContentCopy";
+import DoneAllIcon from "@mui/icons-material/DoneAll";
+import { useState } from "react";
+
+export default function CopyToClipboardButton({
+  text,
+  title,
+  iconOnly = false,
+  ...props
+}) {
+  const { isClipboardAvailable, isCopied, copyToClipboard } = useClipboard();
+  const [dialogOpen, setDialogOpen] = useState(false);
+
+  const handleClick = () => {
+    if (isClipboardAvailable) {
+      copyToClipboard(text);
+    } else {
+      setDialogOpen(true);
+    }
+  };
+
+  return (
+    <>
+      <Tooltip title={isCopied ? "Copied!" : (title ?? null)}>
+        {iconOnly ? (
+          <IconButton
+            variant="outlined"
+            color="warning"
+            onClick={handleClick}
+            {...props}
+          >
+            {isCopied ? <DoneAllIcon /> : <ContentCopyIcon />}
+          </IconButton>
+        ) : (
+          <Button
+            variant="outlined"
+            color="warning"
+            onClick={handleClick}
+            startIcon={isCopied ? <DoneAllIcon /> : <ContentCopyIcon />}
+            {...props}
+          >
+            {isCopied ? "Copied!" : "Copy"}
+          </Button>
+        )}
+      </Tooltip>
+      <Dialog open={dialogOpen} onClose={() => setDialogOpen(false)}>
+        <DialogContent>
+          <Typography>Copy to Clipboard only available with HTTPS</Typography>
+        </DialogContent>
+        <DialogContent>
+          <Typography>{text}</Typography>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}