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}
         >