StrafesNET/maps-service
4
Fork 4
Code Issues 18 Pull Requests Packages Projects Releases Wiki Activity

Deploy updates #291

Merged
Quaternions merged 28 commits from staging into master 2025-12-26 04:46:53 +00:00
Conversation 0 Commits 28 Files Changed 5 +35 -46
5 changed files with 35 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/app/_components/comments/CommentItem.tsx
View File

@@ -52,7 +52,7 @@ export default function CommentItem({ event, validatorUser }: CommentItemProps)
</Typography>
<DateDisplay date={event.Date} />
</Box>
<Typography variant="body2">{decodeAuditEvent(event)}</Typography>
<Typography variant="body2" sx={{ whiteSpace: 'pre-wrap' }}>{decodeAuditEvent(event)}</Typography>
</Box>
</Box>
);

30
web/src/app/_components/mapCard.tsx
View File

@@ -3,6 +3,7 @@ import {Explore, Person2} from "@mui/icons-material";
import {StatusChip} from "@/app/_components/statusChip";
import {Link} from "react-router-dom";
import {useAssetThumbnail, useUserThumbnail} from "@/app/hooks/useThumbnails";
import {useUsername} from "@/app/hooks/useUsername";
interface MapCardProps {
displayName: string;
@@ -20,6 +21,7 @@ interface MapCardProps {
export function MapCard(props: MapCardProps) {
const { thumbnailUrl: assetThumbnail, isLoading: assetLoading } = useAssetThumbnail(props.assetId);
const { thumbnailUrl: userThumbnail, isLoading: userLoading } = useUserThumbnail(props.authorId);
const { username, isLoading: usernameLoading } = useUsername(props.type === 'mapfix' ? props.authorId : undefined);
return (
<Card sx={{ height: '100%' }}>
@@ -100,18 +102,22 @@ export function MapCard(props: MapCardProps) {
</Box>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
<Person2 sx={{ fontSize: '1rem', color: '#8b5cf6' }} />
<Typography
variant="body2"
color="text.secondary"
fontSize="0.875rem"
sx={{
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
}}
>
{props.author}
</Typography>
{props.type === 'mapfix' && usernameLoading ? (
<Skeleton variant="text" width={80} />
) : (
<Typography
variant="body2"
color="text.secondary"
fontSize="0.875rem"
sx={{
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
}}
>
{props.type === 'mapfix' && username ? `@${username}` : props.author}
</Typography>
)}
</Box>
</Box>
</Box>

30
web/src/app/globals.scss
View File

@@ -8,39 +8,23 @@ $form-label-fontsize: 1.3rem;
}
:root {
color-scheme: light dark;
color-scheme: dark;
--header-height: 45px;
--page: white;
--page: rgb(15,15,15);
--header-grad-left: #363b40;
--header-grad-right: #353a40;
--header-button-left: white;
--header-button-right: #b4b4b4;
--header-button-hover: white;
--review-border: #c8c8c8;
--text-color: #1e1e1e;
--review-border: rgb(50,50,50);
--text-color: rgb(230,230,230);
--anchor-link-review: #008fd6;
--window-header: #f5f5f5;
--window-header: rgb(10,10,10);
--comment-highlighted: #ffffd7;
--comment-area: white;
--placeholder-text: rgb(150,150,150);
@media (prefers-color-scheme: dark) {
--page: rgb(15,15,15);
--header-grad-left: #363b40;
--header-grad-right: #353a40;
--header-button-left: white;
--header-button-right: #b4b4b4;
--header-button-hover: white;
--review-border: rgb(50,50,50);
--text-color: rgb(230,230,230);
--anchor-link-review: #008fd6;
--window-header: rgb(10,10,10);
--comment-highlighted: #ffffd7;
--comment-area: rgb(20,20,20);
--placeholder-text: rgb(80,80,80);
}
--comment-area: rgb(20,20,20);
--placeholder-text: rgb(80,80,80);
}
body {

7
web/src/app/lib/theme.tsx
View File

@@ -1,6 +1,13 @@
import {createTheme} from "@mui/material";
export const theme = createTheme({
cssVariables: {
colorSchemeSelector: 'class',
},
colorSchemes: {
dark: true,
},
defaultColorScheme: 'dark',
palette: {
mode: 'dark',
primary: {

12
web/src/app/maps/page.tsx
View File

@@ -1,5 +1,4 @@
import {useState, useEffect} from "react";
import {useNavigate} from "react-router-dom";
import Webpage from "@/app/_components/webpage";
import {
Box,
@@ -37,7 +36,6 @@ interface Map {
interface MapCardProps {
map: Map;
onClick: (mapId: number) => void;
formatDate: (timestamp: number) => string;
getGameName: (gameId: number) => string;
getGameLabelStyles: (gameId: number) => {
@@ -46,7 +44,7 @@ interface MapCardProps {
};
}
function MapCard({ map, onClick, formatDate, getGameName, getGameLabelStyles }: MapCardProps) {
function MapCard({ map, formatDate, getGameName, getGameLabelStyles }: MapCardProps) {
const { thumbnailUrl, isLoading } = useAssetThumbnail(map.ID, '420x420');
return (
@@ -63,7 +61,7 @@ function MapCard({ map, onClick, formatDate, getGameName, getGameLabelStyles }:
}
}}
>
<CardActionArea onClick={() => onClick(map.ID)}>
<CardActionArea component={Link} to={`/maps/${map.ID}`}>
<Box sx={{ position: 'relative', overflow: 'hidden' }}>
<Skeleton
variant="rectangular"
@@ -127,7 +125,6 @@ function MapCard({ map, onClick, formatDate, getGameName, getGameLabelStyles }:
export default function MapsPage() {
useTitle("Map Collection");
const navigate = useNavigate();
const [maps, setMaps] = useState<Map[]>([]);
const [loading, setLoading] = useState(true);
const [searchQuery, setSearchQuery] = useState("");
@@ -200,10 +197,6 @@ export default function MapsPage() {
window.scrollTo({top: 0, behavior: 'smooth'});
};
const handleMapClick = (mapId: number) => {
navigate(`/maps/${mapId}`);
};
const formatDate = (timestamp: number) => {
return new Date(timestamp * 1000).toLocaleDateString('en-US', {
year: 'numeric',
@@ -340,7 +333,6 @@ export default function MapsPage() {
<Grid size={{ xs: 12, sm: 6, md: 4}} key={map.ID}>
<MapCard
map={map}
onClick={handleMapClick}
formatDate={formatDate}
getGameName={getGameName}
getGameLabelStyles={getGameLabelStyles}