mirror of
https://github.com/Cockatrice/Cockatrice.git
synced 2026-07-14 22:42:14 -07:00
auto lint fixes
This commit is contained in:
parent
9f85845973
commit
9b6c806c00
5 changed files with 42 additions and 40 deletions
|
|
@ -50,22 +50,22 @@ export const RefreshGuardModal: React.FC<RefreshGuardModalProps> = ({
|
|||
{title}
|
||||
</Box>
|
||||
</DialogTitle>
|
||||
|
||||
|
||||
<DialogContent>
|
||||
<Alert severity="warning" sx={{ mb: 2 }}>
|
||||
<Typography variant="body1" id="refresh-guard-description">
|
||||
{message}
|
||||
</Typography>
|
||||
</Alert>
|
||||
|
||||
|
||||
<Typography variant="body2" color="textSecondary">
|
||||
Your browser may also show a confirmation dialog. Both dialogs are asking the same thing -
|
||||
Your browser may also show a confirmation dialog. Both dialogs are asking the same thing -
|
||||
whether you want to leave the page and lose your current progress.
|
||||
</Typography>
|
||||
</DialogContent>
|
||||
|
||||
|
||||
<DialogActions>
|
||||
<Button
|
||||
<Button
|
||||
onClick={onClose}
|
||||
variant="contained"
|
||||
color="primary"
|
||||
|
|
@ -73,7 +73,7 @@ export const RefreshGuardModal: React.FC<RefreshGuardModalProps> = ({
|
|||
>
|
||||
{cancelButtonText}
|
||||
</Button>
|
||||
<Button
|
||||
<Button
|
||||
onClick={onConfirm}
|
||||
variant="outlined"
|
||||
color="error"
|
||||
|
|
@ -83,4 +83,4 @@ export const RefreshGuardModal: React.FC<RefreshGuardModalProps> = ({
|
|||
</DialogActions>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import React from "react";
|
||||
import { useGameGuard } from "hooks";
|
||||
import { RefreshGuardModal } from "../RefreshGuardModal/RefreshGuardModal";
|
||||
import React from 'react';
|
||||
import { useGameGuard } from 'hooks';
|
||||
import { RefreshGuardModal } from '../RefreshGuardModal/RefreshGuardModal';
|
||||
|
||||
interface RefreshGuardProviderProps {
|
||||
children: React.ReactNode;
|
||||
|
|
@ -34,8 +34,8 @@ export const RefreshGuardProvider: React.FC<RefreshGuardProviderProps> = ({
|
|||
onClose={handleCancelNavigation}
|
||||
onConfirm={handleConfirmNavigation}
|
||||
message={navigationMessage}
|
||||
title={isInActiveGame ? "Active Game Warning" : "Connection Warning"}
|
||||
confirmButtonText={isInActiveGame ? "Leave Game" : "Leave Anyway"}
|
||||
title={isInActiveGame ? 'Active Game Warning' : 'Connection Warning'}
|
||||
confirmButtonText={isInActiveGame ? 'Leave Game' : 'Leave Anyway'}
|
||||
cancelButtonText="Stay"
|
||||
/>
|
||||
|
||||
|
|
@ -45,7 +45,7 @@ export const RefreshGuardProvider: React.FC<RefreshGuardProviderProps> = ({
|
|||
onClose={handleCancelRefresh}
|
||||
onConfirm={handleConfirmRefresh}
|
||||
message={refreshMessage}
|
||||
title={isInActiveGame ? "Page Refresh Warning" : "Connection Warning"}
|
||||
title={isInActiveGame ? 'Page Refresh Warning' : 'Connection Warning'}
|
||||
confirmButtonText="Refresh Anyway"
|
||||
cancelButtonText="Stay on Page"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -13,14 +13,14 @@ interface UseGameGuardReturn {
|
|||
handleConfirmNavigation: () => void;
|
||||
handleCancelNavigation: () => void;
|
||||
navigationMessage: string;
|
||||
|
||||
|
||||
// Refresh guard (browser refresh)
|
||||
showRefreshModal: boolean;
|
||||
setShowRefreshModal: (show: boolean) => void;
|
||||
handleConfirmRefresh: () => void;
|
||||
handleCancelRefresh: () => void;
|
||||
refreshMessage: string;
|
||||
|
||||
|
||||
// Guard state
|
||||
isInActiveGame: boolean;
|
||||
isConnected: boolean;
|
||||
|
|
@ -30,7 +30,7 @@ interface UseGameGuardReturn {
|
|||
/**
|
||||
* Combined hook that guards against page refresh (browser dialog) and SPA navigation (custom modal)
|
||||
* when user is in an active game or has an active connection.
|
||||
*
|
||||
*
|
||||
* - Browser refresh/navigation: Shows native browser dialog only
|
||||
* - SPA navigation: Shows custom modal with detailed warning
|
||||
*/
|
||||
|
|
@ -39,17 +39,17 @@ export const useGameGuard = (): UseGameGuardReturn => {
|
|||
const connectionStatus = useSelector(ServerSelectors.getState);
|
||||
const joinedGameIds = useSelector(RoomsSelectors.getJoinedGameIds);
|
||||
const joinedRoomIds = useSelector(RoomsSelectors.getJoinedRoomIds);
|
||||
|
||||
|
||||
// Determine if user is in an active state that should be guarded
|
||||
const isConnected = connectionStatus === StatusEnum.LOGGED_IN;
|
||||
const isInActiveGame = Object.values(joinedGameIds).some(roomGames =>
|
||||
const isInActiveGame = Object.values(joinedGameIds).some(roomGames =>
|
||||
Object.keys(roomGames).length > 0
|
||||
);
|
||||
const isInRoom = Object.keys(joinedRoomIds).length > 0;
|
||||
|
||||
|
||||
// Guard conditions
|
||||
const shouldGuard = isConnected && (isInActiveGame || isInRoom);
|
||||
|
||||
|
||||
// Messages based on current state
|
||||
const getMessage = (): string => {
|
||||
if (isInActiveGame) {
|
||||
|
|
@ -72,7 +72,7 @@ export const useGameGuard = (): UseGameGuardReturn => {
|
|||
// Note: Specific game leave commands would be implemented here
|
||||
// For now, we'll just disconnect the WebSocket
|
||||
}
|
||||
|
||||
|
||||
// Disconnect from server
|
||||
webClient.disconnect();
|
||||
} catch (error) {
|
||||
|
|
@ -109,7 +109,7 @@ export const useGameGuard = (): UseGameGuardReturn => {
|
|||
},
|
||||
handleCancelNavigation: navigationGuard.handleCancelNavigation,
|
||||
navigationMessage: navigationGuard.guardMessage,
|
||||
|
||||
|
||||
// Refresh guard (browser refresh)
|
||||
showRefreshModal: refreshGuard.showModal,
|
||||
setShowRefreshModal: refreshGuard.setShowModal,
|
||||
|
|
@ -121,10 +121,10 @@ export const useGameGuard = (): UseGameGuardReturn => {
|
|||
refreshGuard.setShowModal(false);
|
||||
},
|
||||
refreshMessage: refreshGuard.guardMessage,
|
||||
|
||||
|
||||
// State
|
||||
isInActiveGame,
|
||||
isConnected,
|
||||
shouldGuard
|
||||
};
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ interface UseNavigationGuardReturn {
|
|||
/**
|
||||
* Hook to guard against navigation within the SPA when user has unsaved changes.
|
||||
* Works with React Router to block navigation and show confirmation dialog.
|
||||
*
|
||||
*
|
||||
* @param options Configuration for the navigation guard
|
||||
* @returns Modal state controls and navigation handlers
|
||||
*/
|
||||
|
|
@ -30,11 +30,11 @@ export const useNavigationGuard = ({
|
|||
}: UseNavigationGuardOptions): UseNavigationGuardReturn => {
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const [pendingLocation, setPendingLocation] = useState<string | null>(null);
|
||||
|
||||
|
||||
// Safely get React Router hooks - they might not be available
|
||||
let navigate: ReturnType<typeof useNavigate> | null = null;
|
||||
let location: ReturnType<typeof useLocation> | null = null;
|
||||
|
||||
|
||||
try {
|
||||
navigate = useNavigate();
|
||||
location = useLocation();
|
||||
|
|
@ -64,9 +64,11 @@ export const useNavigationGuard = ({
|
|||
const handleLinkClick = (event: Event) => {
|
||||
const target = event.target as HTMLElement;
|
||||
const link = target.closest('a');
|
||||
|
||||
if (!link) return;
|
||||
|
||||
|
||||
if (!link) {
|
||||
return;
|
||||
}
|
||||
|
||||
const href = link.getAttribute('href');
|
||||
if (!href || href.startsWith('#') || href.startsWith('http') || href.startsWith('mailto:')) {
|
||||
return; // Allow external links, anchors, and mailto links
|
||||
|
|
@ -75,11 +77,11 @@ export const useNavigationGuard = ({
|
|||
// Check if this is a React Router navigation
|
||||
if (href !== location.pathname) {
|
||||
event.preventDefault();
|
||||
|
||||
|
||||
if (onBeforeNavigate) {
|
||||
onBeforeNavigate(href);
|
||||
}
|
||||
|
||||
|
||||
setPendingLocation(href);
|
||||
setShowModal(true);
|
||||
}
|
||||
|
|
@ -89,15 +91,15 @@ export const useNavigationGuard = ({
|
|||
if (shouldGuard) {
|
||||
// Browser back/forward button pressed
|
||||
event.preventDefault();
|
||||
|
||||
|
||||
const targetPath = window.location.pathname;
|
||||
if (onBeforeNavigate) {
|
||||
onBeforeNavigate(targetPath);
|
||||
}
|
||||
|
||||
|
||||
setPendingLocation(targetPath);
|
||||
setShowModal(true);
|
||||
|
||||
|
||||
// Restore current URL in history
|
||||
window.history.pushState(null, '', location.pathname);
|
||||
}
|
||||
|
|
@ -129,4 +131,4 @@ export const useNavigationGuard = ({
|
|||
handleCancelNavigation,
|
||||
guardMessage: message
|
||||
};
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ interface UseRefreshGuardReturn {
|
|||
/**
|
||||
* Hook to guard against accidental page refresh or navigation away from the site.
|
||||
* Shows both browser's native beforeunload dialog and a custom modal for better UX.
|
||||
*
|
||||
*
|
||||
* @param options Configuration for the refresh guard
|
||||
* @returns Modal state controls and current guard message
|
||||
*/
|
||||
|
|
@ -35,7 +35,7 @@ export const useRefreshGuard = ({
|
|||
// Show browser's native dialog first
|
||||
event.preventDefault();
|
||||
event.returnValue = ''; // Required for Chrome
|
||||
|
||||
|
||||
// Schedule custom modal to show after browser dialog is dismissed
|
||||
// This only happens if user chooses "Stay" on the browser dialog
|
||||
setTimeout(() => {
|
||||
|
|
@ -43,7 +43,7 @@ export const useRefreshGuard = ({
|
|||
setShowModal(true);
|
||||
}
|
||||
}, 100);
|
||||
|
||||
|
||||
return ''; // Required for other browsers
|
||||
};
|
||||
|
||||
|
|
@ -78,4 +78,4 @@ export const useRefreshGuard = ({
|
|||
setShowModal,
|
||||
guardMessage: message
|
||||
};
|
||||
};
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue