@@ -91,7 +36,44 @@ const BonusStatsDialog = ({ open, onClose, red, blue }) => (
Bonus points are awarded alongside the main score for skillful play.
-
+
);
+const StyledDialog = styled(Dialog)({
+ '& .MuiDialog-paper': {
+ background: '#07090d',
+ backgroundImage: `
+ linear-gradient(rgba(35, 111, 135, 0.08) 1px, transparent 1px),
+ linear-gradient(90deg, rgba(35, 111, 135, 0.08) 1px, transparent 1px)
+ `,
+ backgroundSize: '46px 46px',
+ border: '1px solid rgba(35, 111, 135, 0.4)',
+ borderRadius: '12px',
+ boxShadow: '0 0 80px rgba(35, 111, 135, 0.15), 0 32px 80px rgba(0, 0, 0, 0.9)',
+ width: '560px',
+ maxWidth: '94vw',
+ overflow: 'hidden',
+ color: '#fff',
+ },
+ '& .MuiBackdrop-root': {
+ background: 'rgba(2, 4, 8, 0.88)',
+ backdropFilter: 'blur(4px)',
+ },
+});
+
export default BonusStatsDialog;
+
+BonusStatsDialog.propTypes = {
+ open: bool.isRequired,
+ onClose: func.isRequired,
+ red: shape({
+ name: string,
+ bonusPoints: number,
+ bonusStats: object,
+ }).isRequired,
+ blue: shape({
+ name: string,
+ bonusPoints: number,
+ bonusStats: object,
+ }).isRequired,
+};
diff --git a/assets/js/mine-seeker/components/CaptchaOverlay.jsx b/assets/js/mine-seeker/components/CaptchaOverlay.jsx
index 22e4ad7..78c3669 100644
--- a/assets/js/mine-seeker/components/CaptchaOverlay.jsx
+++ b/assets/js/mine-seeker/components/CaptchaOverlay.jsx
@@ -7,7 +7,8 @@
* file that was distributed with this source code.
*/
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
+import { func, node, string } from 'prop-types';
const CAPTCHA_STORAGE_KEY = 'mineseeker_captcha_verified';
const CAPTCHA_TOKEN_KEY = 'mineseeker_captcha_token';
@@ -87,7 +88,7 @@ const CaptchaOverlay = ({ siteKey, onVerified, children }) => {
};
if (verified) {
- return <>{children};
+ return
{children};
}
return (
@@ -114,3 +115,9 @@ const CaptchaOverlay = ({ siteKey, onVerified, children }) => {
};
export default CaptchaOverlay;
+
+CaptchaOverlay.propTypes = {
+ siteKey: string.isRequired,
+ onVerified: func,
+ children: node,
+};
diff --git a/assets/js/mine-seeker/components/ChallengeCountdown.jsx b/assets/js/mine-seeker/components/ChallengeCountdown.jsx
index 6719d98..523cf80 100644
--- a/assets/js/mine-seeker/components/ChallengeCountdown.jsx
+++ b/assets/js/mine-seeker/components/ChallengeCountdown.jsx
@@ -7,6 +7,7 @@
* file that was distributed with this source code.
*/
import { Fragment, useEffect, useState } from 'react';
+import { func, number } from 'prop-types';
const ChallengeCountdown = ({ onAccept, onDecline, seconds = 30 }) => {
const [countdown, setCountdown] = useState(seconds);
@@ -39,3 +40,9 @@ const ChallengeCountdown = ({ onAccept, onDecline, seconds = 30 }) => {
};
export default ChallengeCountdown;
+
+ChallengeCountdown.propTypes = {
+ onAccept: func.isRequired,
+ onDecline: func.isRequired,
+ seconds: number,
+};
diff --git a/assets/js/mine-seeker/components/GameBoard.jsx b/assets/js/mine-seeker/components/GameBoard.jsx
index 76b21dc..8782831 100644
--- a/assets/js/mine-seeker/components/GameBoard.jsx
+++ b/assets/js/mine-seeker/components/GameBoard.jsx
@@ -12,6 +12,7 @@ import { useGame } from '@mine-contexts';
import { useServerCommunication } from '@mine-hooks';
import CaptchaOverlay from './CaptchaOverlay';
import GridControl from './grid/GridControl';
+import { bool, string } from 'prop-types';
export const GameBoard = ({ gameAssoc, gameInherited, opponentName = '', isEnvDev }) => {
const { gridReady } = useGame();
@@ -42,3 +43,10 @@ export const GameBoard = ({ gameAssoc, gameInherited, opponentName = '', isEnvDe
/>
);
};
+
+GameBoard.propTypes = {
+ gameAssoc: string.isRequired,
+ gameInherited: bool.isRequired,
+ opponentName: string,
+ isEnvDev: bool,
+};
diff --git a/assets/js/mine-seeker/components/GameTimer.jsx b/assets/js/mine-seeker/components/GameTimer.jsx
index c384262..b6d5415 100644
--- a/assets/js/mine-seeker/components/GameTimer.jsx
+++ b/assets/js/mine-seeker/components/GameTimer.jsx
@@ -7,22 +7,10 @@
* file that was distributed with this source code.
*/
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { BonusBox, BonusStatsDialog, Avatar } from '@mine-components';
+import { formatTime } from '@global-utils/format';
import { useGame } from '@mine-contexts';
-import BonusBox from './BonusBox';
-import BonusStatsDialog from './BonusStatsDialog';
-
-const renderAvatar = player => {
- if (!player.registered) return null;
- return (
-
- {player.avatar
- ?
- :
{player.name.slice(0, 2).toUpperCase()}
- }
-
- );
-};
const GameTimer = () => {
const { overlay, connectionLost, endRef, activePlayer, red, blue } = useGame();
@@ -85,84 +73,61 @@ const GameTimer = () => {
}
}, [activePlayer, isRunning]);
+ const syncTimes = useCallback(() => {
+ let currentRedTime = pausedRedTimeRef.current;
+ let currentBlueTime = pausedBlueTimeRef.current;
+
+ if (!activePlayer && redStartTimeRef.current) {
+ currentRedTime += Math.floor((Date.now() - redStartTimeRef.current) / 1000);
+ } else if (activePlayer && blueStartTimeRef.current) {
+ currentBlueTime += Math.floor((Date.now() - blueStartTimeRef.current) / 1000);
+ }
+
+ setRedTime(currentRedTime);
+ setBlueTime(currentBlueTime);
+ }, [activePlayer]);
+
useEffect(() => {
if (!isRunning) {
- if (timerIntervalRef.current) {
- clearInterval(timerIntervalRef.current);
- }
+ if (timerIntervalRef.current) clearInterval(timerIntervalRef.current);
return;
}
- timerIntervalRef.current = setInterval(() => {
- let currentRedTime = pausedRedTimeRef.current;
- let currentBlueTime = pausedBlueTimeRef.current;
-
- if (!activePlayer && redStartTimeRef.current) {
- currentRedTime += Math.floor((Date.now() - redStartTimeRef.current) / 1000);
- } else if (activePlayer && blueStartTimeRef.current) {
- currentBlueTime += Math.floor((Date.now() - blueStartTimeRef.current) / 1000);
- }
-
- setRedTime(currentRedTime);
- setBlueTime(currentBlueTime);
- }, 100);
+ timerIntervalRef.current = setInterval(syncTimes, 100);
return () => {
- if (timerIntervalRef.current) {
- clearInterval(timerIntervalRef.current);
- }
+ if (timerIntervalRef.current) clearInterval(timerIntervalRef.current);
};
- }, [isRunning, activePlayer]);
+ }, [isRunning, activePlayer, syncTimes]);
useEffect(() => {
const handleFocus = () => {
- if (isRunning) {
- let currentRedTime = pausedRedTimeRef.current;
- let currentBlueTime = pausedBlueTimeRef.current;
-
- if (!activePlayer && redStartTimeRef.current) {
- currentRedTime += Math.floor((Date.now() - redStartTimeRef.current) / 1000);
- } else if (activePlayer && blueStartTimeRef.current) {
- currentBlueTime += Math.floor((Date.now() - blueStartTimeRef.current) / 1000);
- }
-
- setRedTime(currentRedTime);
- setBlueTime(currentBlueTime);
- }
+ if (isRunning) syncTimes();
};
-
window.addEventListener('focus', handleFocus);
return () => window.removeEventListener('focus', handleFocus);
- }, [isRunning, activePlayer]);
+ }, [isRunning, activePlayer, syncTimes]);
useEffect(() => () => {
if (timerIntervalRef.current) clearInterval(timerIntervalRef.current);
}, []);
- const formatTime = seconds => {
- const mins = Math.floor(seconds / 60);
- const secs = seconds % 60;
- return `${String(mins).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
- };
-
- const openBonusDialog = () => setBonusDialogOpen(true);
- const closeBonusDialog = () => setBonusDialogOpen(false);
return (
-
+
setBonusDialogOpen(true)} />
- {renderAvatar(red)}
+
{formatTime(redTime)}
- {renderAvatar(blue)}
+
{formatTime(blueTime)}
);
};
diff --git a/assets/js/mine-seeker/components/OnlinePlayersDialog.jsx b/assets/js/mine-seeker/components/OnlinePlayersDialog.jsx
index 1b45bed..6ee30ba 100644
--- a/assets/js/mine-seeker/components/OnlinePlayersDialog.jsx
+++ b/assets/js/mine-seeker/components/OnlinePlayersDialog.jsx
@@ -8,37 +8,11 @@
*/
import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { formatSince } from '@global-utils/format';
import Dialog from '@mui/material/Dialog';
+import { styled } from '@mui/material/styles';
import { useLobbyDataProvider } from '@mine-hooks';
-
-const DIALOG_SX = {
- '& .MuiDialog-paper': {
- background: '#07090d',
- backgroundImage: `
- linear-gradient(rgba(35, 111, 135, 0.08) 1px, transparent 1px),
- linear-gradient(90deg, rgba(35, 111, 135, 0.08) 1px, transparent 1px)
- `,
- backgroundSize: '46px 46px',
- border: '1px solid rgba(35, 111, 135, 0.4)',
- borderRadius: '12px',
- boxShadow: '0 0 80px rgba(35, 111, 135, 0.15), 0 32px 80px rgba(0, 0, 0, 0.9)',
- width: '500px',
- maxWidth: '94vw',
- overflow: 'hidden',
- color: '#fff',
- },
- '& .MuiBackdrop-root': {
- background: 'rgba(2, 4, 8, 0.88)',
- backdropFilter: 'blur(4px)',
- },
-};
-
-const formatSince = isoStr => {
- const diff = Math.floor((Date.now() - new Date(isoStr)) / 60000);
- if (1 > diff) return 'just now';
- if (1 === diff) return '1 min ago';
- return `${diff} min ago`;
-};
+import { bool, func, string } from 'prop-types';
const OnlinePlayersDialog = ({ open, onClose, currentGameAssoc, isEnvDev = false }) => {
const [players, setPlayers] = useState([]);
@@ -171,10 +145,9 @@ const OnlinePlayersDialog = ({ open, onClose, currentGameAssoc, isEnvDev = false
}
return (
-