chg: usr: add ReCaptcha overlay again to protect the game #7

assets/js/mine-seeker/components/CaptchaOverlay.jsx

@@ -6,7 +6,8 @@
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  */
-import React, { useCallback, useEffect, useState } from 'react';
+
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
 const CAPTCHA_STORAGE_KEY = 'mineseeker_captcha_verified';
 const CAPTCHA_TOKEN_KEY = 'mineseeker_captcha_token';
@@ -17,6 +18,23 @@ const CaptchaOverlay = ({ siteKey, onVerified, children }) => {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(false);
 
+  const handleToken = useCallback(token => {
+    const wrapper = document.getElementById('mine-wrapper');
+    if (wrapper) {
+      wrapper.dataset.captchaToken = token;
+    }
+    sessionStorage.setItem(CAPTCHA_TOKEN_KEY, token);
+    sessionStorage.setItem(CAPTCHA_STORAGE_KEY, Date.now().toString());
+    setVerified(true);
+    onVerified?.();
+  }, [onVerified]);
+
+  const buttonClasses = useMemo(() => [
+    'captcha-button',
+    error && 'captcha-button--error',
+    loading && 'captcha-button--loading',
+  ].filter(Boolean).join(' '), [error, loading]);
+
   useEffect(() => {
     const storedToken = sessionStorage.getItem(CAPTCHA_TOKEN_KEY);
     const storedTime = sessionStorage.getItem(CAPTCHA_STORAGE_KEY);
@@ -48,16 +66,6 @@ const CaptchaOverlay = ({ siteKey, onVerified, children }) => {
     }
   }, [siteKey, onVerified, handleToken]);
 
-  const handleToken = useCallback(token => {
-    const wrapper = document.getElementById('mine-wrapper');
-    if (wrapper) {
-      wrapper.dataset.captchaToken = token;
-    }
-    sessionStorage.setItem(CAPTCHA_TOKEN_KEY, token);
-    sessionStorage.setItem(CAPTCHA_STORAGE_KEY, Date.now().toString());
-    setVerified(true);
-    onVerified?.();
-  }, [onVerified]);
 
   const handleClick = () => {
     setLoading(true);
@@ -82,79 +90,18 @@ const CaptchaOverlay = ({ siteKey, onVerified, children }) => {
     return <>{children}</>;
   }
 
-  const overlayStyles = {
-    position: 'fixed',
-    top: 0,
-    left: 0,
-    width: '100%',
-    height: '100%',
-    background: 'rgba(7, 9, 13, 0.95)',
-    backdropFilter: 'blur(8px)',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    zIndex: 1000,
-  };
-
-  const contentStyles = {
-    textAlign: 'center',
-    color: '#fff',
-    maxWidth: '400px',
-    padding: '40px',
-  };
-
-  const iconStyles = {
-    fontSize: '64px',
-    color: '#236f87',
-    marginBottom: '24px',
-  };
-
-  const h1Styles = {
-    font: '800 32px Rajdhani, sans-serif',
-    margin: '0 0 16px',
-    letterSpacing: '1px',
-  };
-
-  const pStyles = {
-    color: 'rgba(149, 207, 245, 0.7)',
-    font: '400 16px Rajdhani, sans-serif',
-    margin: '0 0 32px',
-    letterSpacing: '0.5px',
-  };
-
-  const buttonStyles = {
-    background: error
-      ? 'linear-gradient(#8a2323 0%, #681a1a 100%)'
-      : loading
-        ? 'linear-gradient(#236f87 0%, #1a5068 100%)'
-        : 'linear-gradient(#236f87 0%, #1a5068 100%)',
-    border: `2px solid ${error ? '#9a2e2e' : loading ? '#2e7a9a' : '#2e7a9a'}`,
-    borderRadius: '8px',
-    color: '#e0f4ff',
-    cursor: loading ? 'wait' : 'pointer',
-    font: '800 18px Rajdhani, sans-serif',
-    letterSpacing: '2px',
-    padding: '16px 40px',
-    textTransform: 'uppercase',
-    transition: 'all 0.3s ease',
-    display: 'inline-flex',
-    alignItems: 'center',
-    gap: '12px',
-    opacity: loading ? 0.7 : 1,
-  };
-
   return (
-    <div style={overlayStyles}>
-      <div style={contentStyles}>
-        <div style={iconStyles}>
+    <div className="captcha-overlay">
+      <div className="captcha-content">
+        <div className="captcha-icon">
           <i className="fa fa-shield-halved" />
         </div>
-        <h1 style={h1Styles}>Ready to Play?</h1>
-        <p style={pStyles}>
+        <h1 className="captcha-title">Ready to Play?</h1>
+        <p className="captcha-description">
           Click below to verify you&apos;re human and start playing.
         </p>
         <button
-          style={buttonStyles}
+          className={buttonClasses}
           onClick={handleClick}
           disabled={loading}
         >

assets/js/mine-seeker/components/GameBoard.jsx

@@ -7,14 +7,18 @@
  * file that was distributed with this source code.
  */
 
-import React from 'react';
+import React, { useState } from 'react';
 import { useGame } from '@mine-contexts';
 import { useServerCommunication } from '@mine-hooks';
+import CaptchaOverlay from './CaptchaOverlay';
 import GridControl from './grid/GridControl';
 
 export const GameBoard = ({ gameAssoc, gameInherited, opponentName = '', isEnvDev }) => {
   const { gridReady } = useGame();
   const { onClick, resign } = useServerCommunication(gameAssoc, gameInherited, opponentName, isEnvDev);
+  const [captchaVerified, setCaptchaVerified] = useState(false);
+
+  const siteKey = document.getElementById('mine-wrapper')?.dataset.recaptchaSiteKey;
 
   if (!gridReady) {
     return (
@@ -24,6 +28,12 @@ export const GameBoard = ({ gameAssoc, gameInherited, opponentName = '', isEnvDe
     );
   }
 
+  if (!captchaVerified && siteKey) {
+    return (
+      <CaptchaOverlay siteKey={siteKey} onVerified={() => setCaptchaVerified(true)} />
+    );
+  }
+
   return (
     <GridControl
       gameAssoc={gameAssoc}

assets/js/mine-seeker/components/GameTimer.jsx

@@ -54,15 +54,11 @@ const GameTimer = () => {
   }, [activePlayer, overlay]);
 
   useEffect(() => {
-    if (endRef.current) {
-      setIsRunning(false);
-    }
+    if (endRef.current) setIsRunning(false);
   }, [endRef]);
 
   useEffect(() => {
-    if (connectionLost) {
-      setIsRunning(false);
-    }
+    if (connectionLost) setIsRunning(false);
   }, [connectionLost]);
 
   useEffect(() => {
@@ -140,9 +136,7 @@ const GameTimer = () => {
   }, [isRunning, activePlayer]);
 
   useEffect(() => () => {
-    if (timerIntervalRef.current) {
-      clearInterval(timerIntervalRef.current);
-    }
+    if (timerIntervalRef.current) clearInterval(timerIntervalRef.current);
   }, []);
 
   const formatTime = seconds => {

assets/js/mine-seeker/components/user/UserControl.jsx

@@ -13,11 +13,12 @@ import User from './User';
 import BonusStatsDialog from '../BonusStatsDialog';
 
 const UserControl = ({ resign }) => {
-  const { webPlayer, activePlayer, mines, foundMines, red, blue, onBombToggle } = useGame();
+  const { webPlayer, activePlayer, foundMines, red, blue, onBombToggle } = useGame();
   const [bonusDialogOpen, setBonusDialogOpen] = useState(false);
   const activeColor = activePlayer ? 'blue' : 'red';
   const resignClass = 'resign' + (activeColor !== webPlayer ? ' disabled' : '');
   const minesClass = 'active-mines' + (foundMines ? ' found-mine' : '');
+  const remainingMines = 51 - red.mines - blue.mines;
 
   const handleBombClick = (color, player) => {
     const p = 'red' === color ? red : blue;
@@ -41,7 +42,7 @@ const UserControl = ({ resign }) => {
         <div className="active-mines-container">
           <i className="fa fa-star" />
           <div className={minesClass}>
-            <div className="active-mines-nbr">{mines}</div>
+            <div className="active-mines-nbr">{remainingMines}</div>
             <div className="active-mines-shine" />
           </div>
           <i className="fa fa-star" />