chg: pkg: new version release !skipChangelog

CHANGELOG.md

@@ -2,11 +2,12 @@ Changelog
 =========
 
 
-v2026.01 (2026-04-14)
----------------------
+(unreleased)
+------------
 
 New
 ~~~
+- Add timer for the acceptance of the challenge #4. [Lang]
 - Registered users have avatars next to the timer #4. [Lang]
 - Add opportunity to use profile picture. #4. [Lang]
 - Add more stats and a dialog for the recent battle that can be
@@ -18,6 +19,12 @@ New
 
 Changes
 ~~~~~~~
+- Protect the gameplay with recaptcha #4. [Lang]
+- The waiting dialog is uncloseable until the time is up #4. [Lang]
+- Add share button to the overlay when the game ends #4. [Lang]
+- Make fancy og tags - and create a special one for battle sharing #4.
+  [Lang]
+- The user's avatar will be saved as a uuid.extension #4. [Lang]
 - Fix missing favicon #4. [Lang]
 - Add modern Webauthn authentication #4. [Lang]
 - Refactor all forms to have Symfony Form Types & Validation
@@ -57,6 +64,11 @@ Changes
 - Doc in README.md #3. [Lang]
 - Gitignore a js.map file #2. [Lang]
 
+Fix
+~~~
+- Missing font-awesome icons on bare-metal environment #4. [Lang]
+- Quickfix for email sending #4. [Lang]
+
 Other
 ~~~~~
 - Hg: pkg: new version release !skipChangelog. [Lang]

Dockerfile

@@ -22,6 +22,8 @@ RUN install-php-extensions \
     apcu \
     sodium
 
+RUN apt-get update && apt-get install -y --no-install-recommends fonts-dejavu-core && rm -rf /var/lib/apt/lists/*
+
 RUN mv "$PHP_INI_DIR/php.ini-production" "$PHP_INI_DIR/php.ini"
 RUN printf '[opcache]\nopcache.enable=1\nopcache.memory_consumption=256\nopcache.max_accelerated_files=20000\nopcache.validate_timestamps=0\n' \
     > "$PHP_INI_DIR/conf.d/opcache.ini"

assets/css/_fontawesome-config.scss

@@ -7,7 +7,7 @@
  * file that was distributed with this source code.
  */
 
-$font-path: "/webfonts";
+$font-path: "/build/webfonts";
 
 @import '@fortawesome/fontawesome-free/scss/fontawesome';
 @import '@fortawesome/fontawesome-free/scss/brands';

assets/css/mineseeker/_overlay.scss

@@ -471,58 +471,122 @@
 }
 
 #mine-wrapper .game-wrapper .game-overlay .game-overlay-window .share-copy-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 9px;
-  background: linear-gradient(to bottom, #236f87 0%, #1a5068 100%);
-  border: 2px solid #2e7a9a;
-  color: #e0f4ff;
-  font-family: 'Rajdhani', sans-serif;
-  font-size: 13px;
-  font-weight: 800;
-  letter-spacing: 1px;
-  text-transform: uppercase;
-  padding: 12px 24px;
-  border-radius: 8px;
-  cursor: pointer;
-  transition: all 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
-  width: 100%;
-  position: relative;
-  overflow: hidden;
-  box-shadow: 0 4px 12px rgba(35, 111, 135, 0.25);
+   display: inline-flex;
+   align-items: center;
+   justify-content: center;
+   gap: 9px;
+   background: linear-gradient(to bottom, #236f87 0%, #1a5068 100%);
+   border: 2px solid #2e7a9a;
+   color: #e0f4ff;
+   font-family: 'Rajdhani', sans-serif;
+   font-size: 13px;
+   font-weight: 800;
+   letter-spacing: 1px;
+   text-transform: uppercase;
+   padding: 12px 24px;
+   border-radius: 8px;
+   cursor: pointer;
+   transition: all 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
+   width: 100%;
+   position: relative;
+   overflow: hidden;
+   box-shadow: 0 4px 12px rgba(35, 111, 135, 0.25);
 
-  &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: -100%;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
-    transition: left 0.4s ease;
-  }
+   &::before {
+     content: '';
+     position: absolute;
+     top: 0;
+     left: -100%;
+     width: 100%;
+     height: 100%;
+     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+     transition: left 0.4s ease;
+   }
 
-  &:hover {
-    background: linear-gradient(to bottom, #2d8aa8 0%, #236f87 100%);
-    border-color: #5ba4d4;
-    color: #fff;
-    box-shadow: 0 8px 24px rgba(35, 111, 135, 0.4);
-    transform: translateY(-2px);
+   &:hover {
+     background: linear-gradient(to bottom, #2d8aa8 0%, #236f87 100%);
+     border-color: #5ba4d4;
+     color: #fff;
+     box-shadow: 0 8px 24px rgba(35, 111, 135, 0.4);
+     transform: translateY(-2px);
 
-    &::before {
-      left: 100%;
-    }
-  }
+     &::before {
+       left: 100%;
+     }
+   }
 
-  &:active {
-    transform: translateY(0);
-  }
+   &:active {
+     transform: translateY(0);
+   }
 
-  &.copied {
-    background: linear-gradient(to bottom, #1a6844 0%, #135233 100%);
-    border-color: #2a9e60;
-    color: #a0f0c0;
-    box-shadow: 0 4px 12px rgba(26, 104, 68, 0.4);
-  }
+   &.copied {
+     background: linear-gradient(to bottom, #1a6844 0%, #135233 100%);
+     border-color: #2a9e60;
+     color: #a0f0c0;
+     box-shadow: 0 4px 12px rgba(26, 104, 68, 0.4);
+   }
 }
+
+#mine-wrapper .game-wrapper .game-overlay .game-overlay-window .game-overlay-share {
+   display: flex;
+   align-items: center;
+   justify-content: center;
+   gap: 9px;
+   background: linear-gradient(to bottom, #236f87 0%, #1a5068 100%);
+   border: 2px solid #2e7a9a;
+   color: #e0f4ff;
+   font-family: 'Rajdhani', sans-serif;
+   font-size: 13px;
+   font-weight: 800;
+   letter-spacing: 1px;
+   text-transform: uppercase;
+   padding: 12px 24px;
+   border-radius: 8px;
+   cursor: pointer;
+   transition: all 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
+   width: 100%;
+   margin-top: 20px;
+   position: relative;
+   overflow: hidden;
+   box-shadow: 0 4px 12px rgba(35, 111, 135, 0.25);
+   z-index: 10;
+
+   &::before {
+     content: '';
+     position: absolute;
+     top: 0;
+     left: -100%;
+     width: 100%;
+     height: 100%;
+     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+     transition: left 0.4s ease;
+   }
+
+   &:hover {
+     background: linear-gradient(to bottom, #2d8aa8 0%, #236f87 100%);
+     border-color: #5ba4d4;
+     color: #fff;
+     box-shadow: 0 8px 24px rgba(35, 111, 135, 0.4);
+     transform: translateY(-2px);
+
+     &::before {
+       left: 100%;
+     }
+   }
+
+   &:active {
+     transform: translateY(0);
+   }
+
+   &.copied {
+     background: linear-gradient(to bottom, #1a6844 0%, #135233 100%);
+     border-color: #2a9e60;
+     color: #a0f0c0;
+     box-shadow: 0 4px 12px rgba(26, 104, 68, 0.4);
+   }
+
+   i {
+     font-size: 15px;
+   }
+}
+

assets/css/mineseeker/_waiting-dialog.scss

@@ -305,3 +305,43 @@
   padding-top: 14px;
   border-top: 1px solid rgba(35, 111, 135, 0.14);
 }
+
+.opd-header-actions {
+  .opd-refresh[disabled] {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  .opd-close[disabled] {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+}
+
+.opd-waiting {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 14px 16px;
+  margin-bottom: 16px;
+  background: rgba(35, 111, 135, 0.07);
+  border: 1px solid rgba(35, 111, 135, 0.28);
+  border-radius: 8px;
+  color: #95cff5;
+
+  i {
+    font-size: 16px;
+    animation: opd-hourglass 1s ease-in-out infinite;
+  }
+
+  p {
+    margin: 0;
+    font: 600 14px 'Rajdhani', sans-serif;
+    letter-spacing: 0.5px;
+  }
+}
+
+@keyframes opd-hourglass {
+  0%, 100% { transform: rotate(0deg); }
+  50% { transform: rotate(180deg); }
+}

assets/js/components/BattleDialog.jsx

@@ -134,8 +134,8 @@ function StatRow({ icon, label, value, valueColor }) {
 }
 
 export default function BattleDialog({ games }) {
-  const [open, setOpen]     = useState(false);
-  const [game, setGame]     = useState(null);
+  const [open, setOpen] = useState(false);
+  const [game, setGame] = useState(null);
   const [copied, setCopied] = useState(false);
 
   useEffect(() => {
@@ -156,18 +156,18 @@ export default function BattleDialog({ games }) {
     return <ThemeProvider theme={darkTheme}><Dialog open={false} sx={DIALOG_SX} /></ThemeProvider>;
   }
 
-  const meta      = RESULT_META[game.result] ?? RESULT_META.draw;
-  const resign    = game.resign;
+  const meta = RESULT_META[game.result] ?? RESULT_META.draw;
+  const resign = game.resign;
   const endReason = resign
-      ? `${resign.charAt(0).toUpperCase() + resign.slice(1)} resigned`
-      : 'Points';
-  const shareUrl  = `${window.location.origin}/battle/${game.id}`;
+    ? `${resign.charAt(0).toUpperCase() + resign.slice(1)} resigned`
+    : 'Points';
+  const shareUrl = `${window.location.origin}/battle/${game.uuid}`;
 
   const handleShare = () => {
-      navigator.clipboard.writeText(shareUrl).then(() => {
-          setCopied(true);
-          setTimeout(() => setCopied(false), 2200);
-      });
+    navigator.clipboard.writeText(shareUrl).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2200);
+    });
   };
 
   return (

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

@@ -0,0 +1,169 @@
+/**
+ * This file is part of the SplendidBear Websites' projects.
+ *
+ * Copyright (c) 2026 @ www.splendidbear.org
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+import React, { useEffect, useState } from 'react';
+
+const CAPTCHA_STORAGE_KEY = 'mineseeker_captcha_verified';
+const CAPTCHA_TOKEN_KEY = 'mineseeker_captcha_token';
+const RECAPTCHA_ACTION = 'mineseeker_play';
+
+const CaptchaOverlay = ({ siteKey, onVerified, children }) => {
+  const [verified, setVerified] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(false);
+
+  useEffect(() => {
+    const storedToken = sessionStorage.getItem(CAPTCHA_TOKEN_KEY);
+    const storedTime = sessionStorage.getItem(CAPTCHA_STORAGE_KEY);
+
+    if (storedToken && storedTime) {
+      const elapsed = (Date.now() - parseInt(storedTime)) / 1000;
+      if (110 > elapsed) {
+        const wrapper = document.getElementById('mine-wrapper');
+        if (wrapper) {
+          wrapper.dataset.captchaToken = storedToken;
+        }
+        setVerified(true);
+        onVerified?.();
+        return;
+      }
+    }
+
+    if (window.grecaptcha) {
+      window.grecaptcha.ready(() => {
+        window.grecaptcha
+          .execute(siteKey, { action: RECAPTCHA_ACTION })
+          .then(token => {
+            handleToken(token);
+          })
+          .catch(() => {
+            setError(true);
+          });
+      });
+    }
+  }, [siteKey, onVerified]);
+
+  const handleToken = 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?.();
+  };
+
+  const handleClick = () => {
+    setLoading(true);
+    setError(false);
+
+    window.grecaptcha.ready(() => {
+      window.grecaptcha
+        .execute(siteKey, { action: RECAPTCHA_ACTION })
+        .then(token => {
+          handleToken(token);
+          setLoading(false);
+        })
+        .catch(() => {
+          setLoading(false);
+          setError(true);
+          setTimeout(() => setError(false), 2000);
+        });
+    });
+  };
+
+  if (verified) {
+    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}>
+          <i className="fa fa-shield-halved" />
+        </div>
+        <h1 style={h1Styles}>Ready to Play?</h1>
+        <p style={pStyles}>
+          Click below to verify you&apos;re human and start playing.
+        </p>
+        <button
+          style={buttonStyles}
+          onClick={handleClick}
+          disabled={loading}
+        >
+          <i className={`fa ${loading ? 'fa-spinner fa-spin' : error ? 'fa-exclamation-circle' : 'fa-play'}`} />
+          {loading ? 'Verifying...' : error ? 'Try Again' : 'Start Playing'}
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default CaptchaOverlay;

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

@@ -0,0 +1,41 @@
+/**
+ * This file is part of the SplendidBear Websites' projects.
+ *
+ * Copyright (c) 2026 @ www.splendidbear.org
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+import { Fragment, useEffect, useState } from 'react';
+
+const ChallengeCountdown = ({ onAccept, onDecline, seconds = 30 }) => {
+  const [countdown, setCountdown] = useState(seconds);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCountdown(prev => {
+        if (1 >= prev) {
+          clearInterval(interval);
+          onDecline();
+          return 0;
+        }
+        return prev - 1;
+      });
+    }, 1000);
+    return () => clearInterval(interval);
+  }, [onDecline]);
+
+  return (
+    <Fragment>
+      <p style={{ textAlign: 'center', marginBottom: 20, color: '#95cff5' }}>
+        You have {countdown} second{1 === countdown ? '' : 's'} to answer to the challenge!
+      </p>
+      <div className="resign">
+        <a onClick={onAccept}>Accept</a>
+        <a onClick={onDecline}>Decline</a>
+      </div>
+    </Fragment>
+  );
+};
+
+export default ChallengeCountdown;

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

@@ -26,6 +26,7 @@ export const GameBoard = ({ gameAssoc, gameInherited, isEnvDev }) => {
 
   return (
     <GridControl
+      gameAssoc={gameAssoc}
       onClick={onClick}
       resign={resign}
     />

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

@@ -47,6 +47,7 @@ const OnlinePlayersDialog = ({ open, onClose, currentGameAssoc }) => {
   const [snapshotLoaded, setSnapshotLoaded] = useState(false);
   const [challengingGameAssoc, setChallengingGameAssoc] = useState(null);
   const [declinedMsg, setDeclinedMsg] = useState('');
+  const [waitingCountdown, setWaitingCountdown] = useState(0);
   const declinedTimerRef = useRef(null);
 
   const addPlayer = useCallback(entry => {
@@ -111,6 +112,7 @@ const OnlinePlayersDialog = ({ open, onClose, currentGameAssoc }) => {
       setChallengingGameAssoc(null);
       clearTimeout(declinedTimerRef.current);
       setDeclinedMsg('Challenge was not accepted.');
+      setWaitingCountdown(0);
       declinedTimerRef.current = setTimeout(() => setDeclinedMsg(''), 3500);
     };
     window.addEventListener('challenge-declined', handler);
@@ -120,15 +122,30 @@ const OnlinePlayersDialog = ({ open, onClose, currentGameAssoc }) => {
     };
   }, []);
 
+  useEffect(() => {
+    if (!waitingCountdown) return;
+    const interval = setInterval(() => {
+      setWaitingCountdown(prev => {
+        if (1 >= prev) return 0;
+        return prev - 1;
+      });
+    }, 1000);
+    return () => clearInterval(interval);
+  }, [waitingCountdown]);
+
   const handleChallenge = player => {
     if (challengingGameAssoc) return;
     setChallengingGameAssoc(player.gameAssoc);
     setDeclinedMsg('');
+    setWaitingCountdown(30);
     fetch('/api/game/challenge/' + player.gameAssoc, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ challengerGameAssoc: currentGameAssoc }),
-    }).catch(() => setChallengingGameAssoc(null));
+    }).catch(() => {
+      setChallengingGameAssoc(null);
+      setWaitingCountdown(0);
+    });
   };
 
   const visible = players
@@ -147,7 +164,12 @@ const OnlinePlayersDialog = ({ open, onClose, currentGameAssoc }) => {
   }
 
   return (
-    <Dialog open={open} onClose={onClose} sx={DIALOG_SX}>
+    <Dialog 
+      open={open} 
+      onClose={0 < waitingCountdown ? undefined : onClose} 
+      disableEscapeKeyDown={0 < waitingCountdown}
+      sx={DIALOG_SX}
+    >
       <div className="opd">
         <div className="opd-header">
           <div className="opd-header-text">
@@ -160,32 +182,44 @@ const OnlinePlayersDialog = ({ open, onClose, currentGameAssoc }) => {
           <div className="opd-header-actions">
             <button
               className={`opd-refresh${loading ? ' opd-refresh--spin' : ''}`}
-              onClick={() => setRefreshKey(k => k + 1)}
-              disabled={loading}
+              onClick={() => { if (0 === waitingCountdown) setRefreshKey(k => k + 1); }}
+              disabled={loading || 0 < waitingCountdown}
               aria-label="Refresh"
               title="Refresh list"
             >
               <i className="fa fa-refresh" />
             </button>
-            <button className="opd-close" onClick={onClose} aria-label="Close">
+            <button 
+              className="opd-close" 
+              onClick={() => { if (0 === waitingCountdown) onClose(); }} 
+              disabled={0 < waitingCountdown}
+              aria-label="Close"
+            >
               <i className="fa fa-times" />
             </button>
           </div>
         </div>
-        <div className="opd-search-wrap">
-          <i className="fa fa-search opd-search-icon" />
-          <input
-            className="opd-search"
-            placeholder="Search by username…"
-            value={search}
-            onChange={e => setSearch(e.target.value)}
-          />
-          {search && (
-            <button className="opd-search-clear" onClick={() => setSearch('')}>
-              <i className="fa fa-times" />
-            </button>
-          )}
-        </div>
+        {0 < waitingCountdown ? (
+          <div className="opd-waiting">
+            <i className="fa fa-hourglass-start" />
+            <p>Waiting {waitingCountdown} second{1 === waitingCountdown ? '' : 's'} for opponent's answer...</p>
+          </div>
+        ) : (
+          <div className="opd-search-wrap">
+            <i className="fa fa-search opd-search-icon" />
+            <input
+              className="opd-search"
+              placeholder="Search by username…"
+              value={search}
+              onChange={e => setSearch(e.target.value)}
+            />
+            {search && (
+              <button className="opd-search-clear" onClick={() => setSearch('')}>
+                <i className="fa fa-times" />
+              </button>
+            )}
+          </div>
+        )}
         <div className="opd-list">
           {loading && (
             <div className="opd-empty">

assets/js/mine-seeker/components/grid/GridControl.jsx

@@ -7,20 +7,31 @@
  * file that was distributed with this source code.
  */
 
-import React, { Fragment } from 'react';
+import React, { Fragment, useState } from 'react';
 import { useGame } from '@mine-contexts';
 import GridField from './GridField';
 import UserControl from '../user/UserControl';
 import GameTimer from '../GameTimer';
 import { BOMB_SYMBOLS, bombRadius } from '@mine-utils';
 
-const GridControl = ({ onClick, resign }) => {
+const GridControl = ({ gameAssoc, onClick, resign }) => {
   const {
     overlay, overlayTitle, overlaySubTitle,
     webPlayer, activePlayer, bombSelected,
-    cells, setCells,
+    cells, setCells, endRef,
   } = useGame();
 
+  const [copied, setCopied] = useState(false);
+  const shareUrl = gameAssoc ? `${window.location.origin}/battle/${gameAssoc}` : null;
+
+  const handleShare = () => {
+    if (!shareUrl) return;
+    navigator.clipboard.writeText(shareUrl).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2200);
+    });
+  };
+
   const handleHover = (row, col) => {
     if (!bombSelected) return;
     const activeColor = activePlayer ? 'blue' : 'red';
@@ -47,7 +58,22 @@ const GridControl = ({ onClick, resign }) => {
         <div className={`game-overlay${overlay ? '' : ' hide'}`}>
           <div className="game-overlay-window">
             <h1>{overlayTitle}</h1>
-            <h2>{overlaySubTitle}</h2>
+            {'string' === typeof overlaySubTitle ? (
+              <h2>{overlaySubTitle}</h2>
+            ) : (
+              overlaySubTitle
+            )}
+            {gameAssoc && endRef.current && (
+              <button
+                className={`game-overlay-share${copied ? ' copied' : ''}`}
+                onClick={handleShare}
+                title="Copy share link"
+                aria-label="Copy share link"
+              >
+                <i className={`fa ${copied ? 'fa-check' : 'fa-share-alt'}`} />
+                {copied ? 'Copied!' : 'Share Battle'}
+              </button>
+            )}
           </div>
         </div>
         <UserControl

assets/js/mine-seeker/components/index.js

@@ -10,6 +10,7 @@
 export { GameBoard } from './GameBoard';
 export { default as OnlinePlayersDialog } from './OnlinePlayersDialog';
 export { default as WaitingOverlayContent } from './WaitingOverlayContent';
+export { default as ChallengeCountdown } from './ChallengeCountdown';
 export { default as GameTimer } from './GameTimer';
 export { default as GridControl } from './grid/GridControl';
 export { default as GridField } from './grid/GridField';

assets/js/mine-seeker/contexts/GameProvider.jsx

@@ -41,6 +41,8 @@ export const GameProvider = ({ children }) => {
     connectionLost, setConnectionLost,
   } = useGameState();
 
+  const [gameUuid, setGameUuid] = React.useState(null);
+
   const sounds = useRef({
     click: new Howl({ src: ['/sound/click.mp3'] }),
     bomb: new Howl({ src: ['/sound/bomb.mp3'] }),
@@ -202,8 +204,11 @@ export const GameProvider = ({ children }) => {
     }
   };
 
-  const resignProcess = color => {
+  const resignProcess = (color, uuid = null) => {
     const wp = webPlayerRef.current;
+    if (uuid) {
+      setGameUuid(uuid);
+    }
     showOverlay(
       color === wp ? 'You have been give up' : 'Your opponent has been resigned',
       color === wp ? 'You LOSE!' : 'You WIN!',
@@ -225,9 +230,9 @@ export const GameProvider = ({ children }) => {
       value={{
         // State (for rendering)
         webPlayer, activePlayer, overlay, overlayTitle, overlaySubTitle,
-        mines, bombSelected, foundMines, red, blue, cells, gridReady, connectionLost,
+        mines, bombSelected, foundMines, red, blue, cells, gridReady, connectionLost, gameUuid,
         // Setters needed by useServerComm
-        setCells, setGridReady,
+        setCells, setGridReady, setGameUuid,
         // Refs (needed by useServerComm for async-safe reads)
         webPlayerRef, activePlayerRef, bombSelectedRef, connectionLostRef, endRef,
         // Sync helpers

assets/js/mine-seeker/hooks/useServerCommunication.jsx

@@ -14,13 +14,14 @@ import { DESC } from '@mine-utils';
 import useStepTimer from './useStepTimer';
 import { WaitingOverlayContent } from '@mine-components';
 
-/** Handles all server communication: SSE (Mercure), REST calls, and the initialization lifecycle. */
+import { ChallengeCountdown } from '@mine-components';
+
 const useServerCommunication = (gameAssoc, gameInherited, isEnvDev) => {
   const {
     /** Async-safe refs */
     webPlayerRef, activePlayerRef, bombSelectedRef, connectionLostRef, endRef,
     /** State setters */
-    setGridReady,
+    setGridReady, setGameUuid,
     /** Sync helpers */
     syncWebPlayer, syncActivePlayer, syncBombSelected, syncConnLost, syncRed, syncBlue,
     /** Game logic */
@@ -136,8 +137,10 @@ const useServerCommunication = (gameAssoc, gameInherited, isEnvDev) => {
 
   const wChallenge = payload => {
     const { challengerName, challengerGameAssoc } = payload;
+    let declineTimeout = null;
 
     const handleAccept = () => {
+      clearTimeout(declineTimeout);
       fetch('/api/game/challenge/respond/' + challengerGameAssoc, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
@@ -148,6 +151,7 @@ const useServerCommunication = (gameAssoc, gameInherited, isEnvDev) => {
     };
 
     const handleDecline = () => {
+      clearTimeout(declineTimeout);
       fetch('/api/game/challenge/respond/' + challengerGameAssoc, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
@@ -162,12 +166,11 @@ const useServerCommunication = (gameAssoc, gameInherited, isEnvDev) => {
       }).catch(() => {});
     };
 
+    declineTimeout = setTimeout(handleDecline, 30000);
+
     showOverlay(
       challengerName + ' wants to challenge you!',
-      <div className="resign">
-        <a onClick={handleAccept}>Accept</a>
-        <a onClick={handleDecline}>Decline</a>
-      </div>,
+      <ChallengeCountdown onAccept={handleAccept} onDecline={handleDecline} />,
     );
   };
 
@@ -193,9 +196,12 @@ const useServerCommunication = (gameAssoc, gameInherited, isEnvDev) => {
         }
 
         applyStep(payload.data);
+        if (payload.data.uuid && !endRef.current) {
+          setGameUuid(payload.data.uuid);
+        }
         makeGameEndIfItEnds(payload.data.bluePoints, payload.data.redPoints, false, payload.data.leftMines);
       } else {
-        resignProcess(payload.data.resign);
+        resignProcess(payload.data.resign, payload.data.uuid);
       }
     }
   };
@@ -312,6 +318,9 @@ const useServerCommunication = (gameAssoc, gameInherited, isEnvDev) => {
     try {
       const result = await stepMutation.mutateAsync(dataPack);
       applyStep(result);
+      if (result.uuid && !endRef.current) {
+        setGameUuid(result.uuid);
+      }
       makeGameEndIfItEnds(result.bluePoints, result.redPoints, false, result.leftMines);
     } catch (e) {
       isEnvDev && console.error('Step error', e);
@@ -321,8 +330,16 @@ const useServerCommunication = (gameAssoc, gameInherited, isEnvDev) => {
   const clickResign = () => {
     const color = activePlayerRef.current ? 'blue' : 'red';
     const stepElapsed = getStepElapsed(activePlayerRef.current, isGameRunningRef.current);
-    stepMutation.mutate({ resign: color, stepElapsed });
-    resignProcess(webPlayerRef.current);
+    stepMutation.mutate(
+      { resign: color, stepElapsed },
+      {
+        onSuccess: result => {
+          if (result?.uuid && !endRef.current) {
+            resignProcess(webPlayerRef.current, result.uuid);
+          }
+        },
+      }
+    );
   };
 
   const resign = () => {

composer.json

@@ -1,94 +1,95 @@
 {
-    "type": "project",
-    "license": "proprietary",
-    "require": {
-        "php": ">=8.5",
-        "ext-iconv": "*",
-        "ext-json": "*",
-        "doctrine/dbal": "^3.7",
-        "doctrine/doctrine-bundle": ">=2.11 <2.14",
-        "doctrine/doctrine-migrations-bundle": "^3.0",
-        "doctrine/orm": "^2.6",
-        "endroid/qr-code": "^6.1",
-        "league/flysystem-aws-s3-v3": "^3.0",
-        "league/flysystem-bundle": "^3.6",
-        "liip/imagine-bundle": "^2.13",
-        "pentatrion/vite-bundle": "^8.2",
-        "scheb/2fa-backup-code": "^8.5",
-        "scheb/2fa-bundle": "^8.5",
-        "scheb/2fa-totp": "^8.5",
-        "symfony/console": "7.4.*",
-        "symfony/flex": "^2.10.0",
-        "symfony/form": "7.4.*",
-        "symfony/framework-bundle": "7.4.*",
-        "symfony/http-client": "7.4.*",
-        "symfony/mailer": "7.4.*",
-        "symfony/mercure": "^0.6",
-        "symfony/mercure-bundle": "*",
-        "symfony/monolog-bundle": "^3.8",
-        "symfony/security-bundle": "7.4.*",
-        "symfony/translation": "7.4.*",
-        "symfony/twig-bundle": "7.4.*",
-        "symfony/validator": "7.4.*",
-        "symfony/yaml": "7.4.*",
-        "web-auth/webauthn-framework": "^5.2"
+  "type": "project",
+  "license": "proprietary",
+  "require": {
+    "php": ">=8.5",
+    "ext-iconv": "*",
+    "ext-json": "*",
+    "ext-gd": "*",
+    "doctrine/dbal": "^3.7",
+    "doctrine/doctrine-bundle": ">=2.11 <2.14",
+    "doctrine/doctrine-migrations-bundle": "^3.0",
+    "doctrine/orm": "^2.6",
+    "endroid/qr-code": "^6.1",
+    "league/flysystem-aws-s3-v3": "^3.0",
+    "league/flysystem-bundle": "^3.6",
+    "liip/imagine-bundle": "^2.13",
+    "pentatrion/vite-bundle": "^8.2",
+    "scheb/2fa-backup-code": "^8.5",
+    "scheb/2fa-bundle": "^8.5",
+    "scheb/2fa-totp": "^8.5",
+    "symfony/console": "7.4.*",
+    "symfony/flex": "^2.10.0",
+    "symfony/form": "7.4.*",
+    "symfony/framework-bundle": "7.4.*",
+    "symfony/http-client": "7.4.*",
+    "symfony/mailer": "7.4.*",
+    "symfony/mercure": "^0.6",
+    "symfony/mercure-bundle": "*",
+    "symfony/monolog-bundle": "^3.8",
+    "symfony/security-bundle": "7.4.*",
+    "symfony/translation": "7.4.*",
+    "symfony/twig-bundle": "7.4.*",
+    "symfony/validator": "7.4.*",
+    "symfony/yaml": "7.4.*",
+    "web-auth/webauthn-framework": "^5.2"
+  },
+  "require-dev": {
+    "firebase/php-jwt": "^7.0",
+    "roave/security-advisories": "dev-master",
+    "symfony/dotenv": "7.4.*",
+    "symfony/maker-bundle": "^1.5",
+    "symfony/stopwatch": "7.4.*",
+    "symfony/web-profiler-bundle": "7.4.*"
+  },
+  "config": {
+    "preferred-install": {
+      "*": "dist"
     },
-    "require-dev": {
-        "firebase/php-jwt": "^7.0",
-        "roave/security-advisories": "dev-master",
-        "symfony/dotenv": "7.4.*",
-        "symfony/maker-bundle": "^1.5",
-        "symfony/stopwatch": "7.4.*",
-        "symfony/web-profiler-bundle": "7.4.*"
-    },
-    "config": {
-        "preferred-install": {
-            "*": "dist"
-        },
-        "sort-packages": true,
-        "allow-plugins": {
-            "symfony/flex": true
-        }
-    },
-    "autoload": {
-        "psr-4": {
-            "App\\": "src/"
-        }
-    },
-    "autoload-dev": {
-        "psr-4": {
-            "App\\Tests\\": "tests/"
-        }
-    },
-    "replace": {
-        "symfony/polyfill-iconv": "*",
-        "symfony/polyfill-ctype": "*",
-        "symfony/polyfill-php73": "*",
-        "symfony/polyfill-php72": "*",
-        "symfony/polyfill-php71": "*",
-        "symfony/polyfill-php70": "*",
-        "symfony/polyfill-php56": "*"
-    },
-    "scripts": {
-        "auto-scripts": {
-            "cache:clear": "symfony-cmd",
-            "assets:install --symlink --relative %PUBLIC_DIR%": "symfony-cmd"
-        },
-        "post-install-cmd": [
-            "@auto-scripts"
-        ],
-        "post-update-cmd": [
-            "@auto-scripts"
-        ]
-    },
-    "conflict": {
-        "symfony/symfony": "*",
-        "doctrine/persistence": "<1.3"
-    },
-    "extra": {
-        "symfony": {
-            "allow-contrib": false,
-            "require": "7.4.*"
-        }
+    "sort-packages": true,
+    "allow-plugins": {
+      "symfony/flex": true
     }
+  },
+  "autoload": {
+    "psr-4": {
+      "App\\": "src/"
+    }
+  },
+  "autoload-dev": {
+    "psr-4": {
+      "App\\Tests\\": "tests/"
+    }
+  },
+  "replace": {
+    "symfony/polyfill-iconv": "*",
+    "symfony/polyfill-ctype": "*",
+    "symfony/polyfill-php73": "*",
+    "symfony/polyfill-php72": "*",
+    "symfony/polyfill-php71": "*",
+    "symfony/polyfill-php70": "*",
+    "symfony/polyfill-php56": "*"
+  },
+  "scripts": {
+    "auto-scripts": {
+      "cache:clear": "symfony-cmd",
+      "assets:install --symlink --relative %PUBLIC_DIR%": "symfony-cmd"
+    },
+    "post-install-cmd": [
+      "@auto-scripts"
+    ],
+    "post-update-cmd": [
+      "@auto-scripts"
+    ]
+  },
+  "conflict": {
+    "symfony/symfony": "*",
+    "doctrine/persistence": "<1.3"
+  },
+  "extra": {
+    "symfony": {
+      "allow-contrib": false,
+      "require": "7.4.*"
+    }
+  }
 }

config/services.yaml

@@ -25,6 +25,10 @@ services:
     resource: '../src/Controller'
     tags: [ 'controller.service_arguments' ]
 
+  App\Service\BattleCardGenerator:
+    arguments:
+      $cacheDir: '%kernel.project_dir%/var/og-cache'
+
   Aws\S3\S3Client:
     arguments:
       - version: 'latest'

src/Controller/ProfileController.php

@@ -10,20 +10,31 @@
 
 namespace App\Controller;
 
+use App\Entity\PlayedGame;
 use App\Entity\User;
 use App\Repository\PlayedGameRepository;
+use App\Service\BattleCardGenerator;
 use App\Service\WebAuthnService;
+use DateTime;
 use Doctrine\ORM\EntityManagerInterface;
+use League\Flysystem\FilesystemException;
 use League\Flysystem\FilesystemOperator;
 use Liip\ImagineBundle\Imagine\Cache\CacheManager;
+use Psr\Log\LoggerInterface;
+use RuntimeException;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
 use Symfony\Component\DependencyInjection\Attribute\Autowire;
+use Symfony\Component\HttpFoundation\BinaryFileResponse;
 use Symfony\Component\HttpFoundation\File\UploadedFile;
 use Symfony\Component\HttpFoundation\JsonResponse;
 use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\HttpFoundation\ResponseHeaderBag;
 use Symfony\Component\HttpKernel\Attribute\AsController;
 use Symfony\Component\Routing\Attribute\Route;
+use Symfony\Component\Uid\Uuid;
+use Throwable;
+use function count;
 
 /**
  * Class ProfileController
@@ -40,7 +51,8 @@ class ProfileController extends AbstractController
 {
     public function __construct(
         private readonly PlayedGameRepository $repo,
-        private readonly WebAuthnService      $webAuthnService
+        private readonly WebAuthnService      $webAuthnService,
+        private readonly LoggerInterface      $logger,
     ) {
     }
 
@@ -56,15 +68,15 @@ class ProfileController extends AbstractController
         $losses = $this->repo->countLossesForUser($user);
         $draws = $this->repo->countDrawsForUser($user);
 
-        // Build monthly buckets for the last 6 months
+        /** Build monthly buckets for the last 6 months */
         $monthlyData = [];
         for ($i = 5; $i >= 0; $i--) {
-            $dt = new \DateTime("first day of -$i months midnight");
+            $dt = new DateTime("first day of -$i months midnight");
             $key = $dt->format('Y-m');
             $monthlyData[$key] = ['label' => $dt->format('M'), 'wins' => 0, 'losses' => 0, 'draws' => 0];
         }
 
-        $since = new \DateTime('first day of -5 months midnight');
+        $since = new DateTime('first day of -5 months midnight');
         $recentGames = $this->repo->findFinishedForUserSince($user, $since);
         $userId = $user->getId();
 
@@ -112,7 +124,7 @@ class ProfileController extends AbstractController
                 'bestScore' => $this->repo->findBestScoreForUser($user),
             ],
             'recent'    => ($recent = $this->repo->findRecentFinishedForUser($user)),
-            'gamesData' => array_map(static function (\App\Entity\PlayedGame $game) use ($userId): array {
+            'gamesData' => array_map(static function (PlayedGame $game) use ($userId): array {
                 $isRed = $game->getRed()?->getId() === $userId;
                 $resign = $game->getResign();
                 $myColor = $isRed ? 'red' : 'blue';
@@ -130,6 +142,7 @@ class ProfileController extends AbstractController
 
                 return [
                     'id'               => $game->getId(),
+                    'uuid'             => $game->getUuid()?->toRfc4122(),
                     'redName'          =>
                         $game->getRed()?->getUsername() ?? $game->getRedAnon()?->getUserName() ?? 'Guest',
                     'blueName'         =>
@@ -159,16 +172,21 @@ class ProfileController extends AbstractController
         ]);
     }
 
-    #[Route('/battle/{id}', name: 'MineSeekerBundle_battle_share', requirements: ['id' => '\d+'], methods: ['GET'])]
-    public function battleShare(int $id): Response
+    #[Route(
+        '/battle/{uuid}',
+        name: 'MineSeekerBundle_battle_share',
+        requirements: ['uuid' => '[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}'],
+        methods: ['GET'],
+    )]
+    public function battleShare(Uuid $uuid): Response
     {
-        $game = $this->repo->find($id);
+        $game = $this->repo->findOneBy(['uuid' => $uuid]);
         if (!$game) {
             throw $this->createNotFoundException('Battle not found.');
         }
 
-        $redName = $game->getRed()?->getUsername() ?? $game->getRedAnon()?->getUserName() ?? 'Guest';
-        $blueName = $game->getBlue()?->getUsername() ?? $game->getBlueAnon()?->getUserName() ?? 'Guest';
+        $redName = $game->getRed()?->getUsername() ?? ($game->getRedAnon() !== null ? 'Anonymous' : 'Guest');
+        $blueName = $game->getBlue()?->getUsername() ?? ($game->getBlueAnon() !== null ? 'Anonymous' : 'Guest');
         $redPts = $game->getRedPoints();
         $bluePts = $game->getBluePoints();
         $resign = $game->getResign();
@@ -201,6 +219,29 @@ class ProfileController extends AbstractController
         ]);
     }
 
+    #[Route(
+        '/og/battle/{uuid}.png',
+        name: 'MineSeekerBundle_og_battle',
+        requirements: ['uuid' => '[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}'],
+        methods: ['GET'],
+    )]
+    public function battleOgImage(Uuid $uuid, BattleCardGenerator $generator): BinaryFileResponse
+    {
+        $game = $this->repo->findOneBy(['uuid' => $uuid]);
+        if (!$game) {
+            throw $this->createNotFoundException();
+        }
+
+        $path = $generator->generate($game);
+        $response = new BinaryFileResponse($path);
+        $response->headers->set('Content-Type', 'image/png');
+        $response->setContentDisposition(ResponseHeaderBag::DISPOSITION_INLINE);
+        $response->setMaxAge(86400 * 30);
+        $response->setPublic();
+
+        return $response;
+    }
+
     #[Route('/profile/avatar', name: 'MineSeekerBundle_profile_avatar', methods: ['POST'])]
     public function uploadAvatar(
         Request                                                             $request,
@@ -228,23 +269,27 @@ class ProfileController extends AbstractController
         }
 
         $ext = $file->guessExtension() ?? 'jpg';
-        $newPath = sprintf('avatar/%d.%s', $user->getId(), $ext);
+        $newPath = sprintf('avatar/%s.%s', Uuid::v4()->toRfc4122(), $ext);
         $oldPath = $user->getAvatarPath();
 
-        // Remove old file and any cached thumbnails
+        /** Remove old file and any cached thumbnails */
         if ($oldPath) {
-            if ($oldPath !== $newPath) {
-                try {
-                    $mediaStorage->delete($oldPath);
-                } catch (\Throwable) {
-                }
+            try {
+                $mediaStorage->delete($oldPath);
+            } catch (Throwable) {
+                $this->logger->error('Unable to delete old avatar: ' . $oldPath);
             }
             $cacheManager->remove($oldPath, 'avatar_thumb');
         }
 
-        // Upload original to MinIO media/avatar/
-        $stream = fopen($file->getPathname(), 'r');
-        $mediaStorage->writeStream($newPath, $stream);
+        /** Upload original to MinIO media/avatar/ */
+        $stream = fopen($file->getPathname(), 'rb');
+        try {
+            $mediaStorage->writeStream($newPath, $stream);
+        } catch (FilesystemException $e) {
+            $this->logger->error('Unable to write new avatar: ' . $e->getMessage());
+            throw new RuntimeException('Unable to write new avatar: ' . $e->getMessage());
+        }
         fclose($stream);
 
         $user->setAvatarPath($newPath);
@@ -275,7 +320,7 @@ class ProfileController extends AbstractController
         return $this->render('Security/profile_security.html.twig', [
             'credentials'      => $credentialsData,
             'isTotpEnabled'    => $user->isTotpAuthenticationEnabled(),
-            'backupCodesCount' => \count($user->getBackupCodes()),
+            'backupCodesCount' => count($user->getBackupCodes()),
         ]);
     }
 }

src/Entity/PlayedGame.php

@@ -23,6 +23,7 @@ use Doctrine\ORM\Mapping\JoinColumn;
 use Doctrine\ORM\Mapping\ManyToOne;
 use Doctrine\ORM\Mapping\OneToMany;
 use Doctrine\ORM\Mapping\OneToOne;
+use Symfony\Component\Uid\Uuid;
 
 /**
  * Class PlayedGame
@@ -40,6 +41,9 @@ class PlayedGame
     #[Id, GeneratedValue, Column]
     private ?int $id = null;
 
+    #[Column(type: 'uuid', unique: true)]
+    private ?Uuid $uuid = null;
+
     #[Column(length: 50)]
     private ?string $gameAssoc = null;
 
@@ -90,6 +94,7 @@ class PlayedGame
     public function __construct()
     {
         $this->steps = new ArrayCollection();
+        $this->uuid = Uuid::v4();
     }
 
     public function getId(): ?int
@@ -97,6 +102,16 @@ class PlayedGame
         return $this->id;
     }
 
+    public function getUuid(): ?Uuid
+    {
+        return $this->uuid;
+    }
+
+    public function setUuid(?Uuid $uuid): void
+    {
+        $this->uuid = $uuid;
+    }
+
     public function getGameAssoc(): ?string
     {
         return $this->gameAssoc;

src/Migrations/2026/04/Version20260414000000.php

@@ -0,0 +1,47 @@
+<?php declare(strict_types=1);
+/*
+ * This file is part of the SplendidBear Websites' projects.
+ *
+ * Copyright (c) 2026 @ www.splendidbear.org
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace App\Migrations;
+
+use Doctrine\DBAL\Schema\Schema;
+use Doctrine\Migrations\AbstractMigration;
+
+/**
+ * Class Version20260414000000
+ *
+ * @package  App\Migrations
+ * @author   Lang <https://www.splendidbear.org>
+ * @category Class
+ * @license  https://www.gnu.org/licenses/lgpl-3.0.en.html GNU Lesser General Public License
+ * @link     www.splendidbear.org
+ * @since    2026. 04. 14.
+ */
+final class Version20260414000000 extends AbstractMigration
+{
+    public function getDescription(): string
+    {
+        return 'Add uuid column to played_game for shareable URLs';
+    }
+
+    public function up(Schema $schema): void
+    {
+        $this->addSql('ALTER TABLE played_game ADD uuid UUID DEFAULT NULL');
+        $this->addSql('UPDATE played_game SET uuid = gen_random_uuid() WHERE uuid IS NULL');
+        $this->addSql('ALTER TABLE played_game ADD CONSTRAINT played_game_uuid_unique UNIQUE (uuid)');
+        $this->addSql('ALTER TABLE played_game ALTER COLUMN uuid SET NOT NULL');
+        $this->addSql('COMMENT ON COLUMN played_game.uuid IS \'(DC2Type:uuid)\'');
+    }
+
+    public function down(Schema $schema): void
+    {
+        $this->addSql('ALTER TABLE played_game DROP uuid');
+    }
+}
+

src/Service/BattleCardGenerator.php

@@ -0,0 +1,180 @@
+<?php declare(strict_types=1);
+/*
+ * This file is part of the SplendidBear Websites' projects.
+ *
+ * Copyright (c) 2026 @ www.splendidbear.org
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace App\Service;
+
+use App\Entity\PlayedGame;
+use Symfony\Component\Uid\Uuid;
+
+/**
+ * Class BattleCardGenerator
+ *
+ * Generates a 1200x630 PNG battle card for Open Graph sharing.
+ *
+ * @package  App\Service
+ * @author   Lang <https://www.splendidbear.org>
+ * @category Class
+ * @license  https://www.gnu.org/licenses/lgpl-3.0.en.html GNU Lesser General Public License
+ * @link     www.splendidbear.org
+ * @since    2026. 04. 14.
+ */
+class BattleCardGenerator
+{
+    private const W    = 1200;
+    private const H    = 630;
+    private const FONT = '/usr/share/fonts/truetype/dejavu/DejaVuSans-Bold.ttf';
+
+    public function __construct(private readonly string $cacheDir) { }
+
+    /** Returns a deterministic UUID v5 for the given battle ID — same battle always maps to the same filename. */
+    public function cachePath(int $battleId): string
+    {
+        $uuid = Uuid::v5(Uuid::fromString(Uuid::NAMESPACE_URL), 'mineseeker-battle-' . $battleId);
+
+        return $this->cacheDir . '/' . $uuid->toRfc4122() . '.png';
+    }
+
+    public function generate(PlayedGame $game): string
+    {
+        $path = $this->cachePath((int)$game->getId());
+
+        if (is_file($path)) {
+            return $path;
+        }
+
+        if (!is_dir($this->cacheDir)) {
+            mkdir($this->cacheDir, 0755, true);
+        }
+
+        $this->render($game, $path);
+
+        return $path;
+    }
+
+    private function render(PlayedGame $game, string $dest): void
+    {
+        $im = imagecreatetruecolor(self::W, self::H);
+
+        // Palette
+        $bg = imagecolorallocate($im, 13, 13, 28);
+        $dot = imagecolorallocate($im, 30, 30, 55);
+        $divider = imagecolorallocate($im, 40, 40, 70);
+        $white = imagecolorallocate($im, 230, 230, 240);
+        $muted = imagecolorallocate($im, 90, 90, 115);
+        $red = imagecolorallocate($im, 246, 125, 82);
+        $blue = imagecolorallocate($im, 149, 207, 245);
+        $gold = imagecolorallocate($im, 255, 200, 50);
+
+        // Background
+        imagefill($im, 0, 0, $bg);
+
+        // Dot-grid texture
+        for ($x = 40; $x < self::W; $x += 40) {
+            for ($y = 40; $y < self::H; $y += 40) {
+                imagesetpixel($im, $x, $y, $dot);
+            }
+        }
+
+        // Horizontal accent lines
+        imageline($im, 0, 90, self::W, 90, $divider);
+        imageline($im, 0, self::H - 60, self::W, self::H - 60, $divider);
+
+        // Vertical centre divider
+        imageline($im, self::W / 2, 110, self::W / 2, self::H - 80, $divider);
+
+        // Resolve names
+        $redName = $game->getRed()?->getUsername()
+            ?? ($game->getRedAnon() !== null ? 'Anonymous' : 'Guest');
+        $blueName = $game->getBlue()?->getUsername()
+            ?? ($game->getBlueAnon() !== null ? 'Anonymous' : 'Guest');
+        $redPts = $game->getRedPoints();
+        $bluePts = $game->getBluePoints();
+        $resign = $game->getResign();
+
+        // Winner
+        $winner = null;
+        if ($resign === 'red') {
+            $winner = 'blue';
+        } elseif ($resign === 'blue') {
+            $winner = 'red';
+        } elseif ($redPts !== null && $bluePts !== null) {
+            if ($redPts > $bluePts) $winner = 'red';
+            elseif ($bluePts > $redPts) $winner = 'blue';
+            else $winner = 'draw';
+        }
+
+        $this->centeredText($im, 'MineSeeker', 20, self::W / 2, 58, $muted);
+
+        $this->centeredText($im, 'RED', 16, self::W / 4, 130, $red);
+        $this->centeredText($im, 'BLUE', 16, self::W * 3 / 4, 130, $blue);
+
+        $redColor = $winner === 'red' ? $gold : ($winner === 'draw' ? $white : $red);
+        $blueColor = $winner === 'blue' ? $gold : ($winner === 'draw' ? $white : $blue);
+
+        $this->centeredTextFit($im, $redName, 48, self::W / 4, 265, $redColor, self::W / 2 - 80);
+        $this->centeredTextFit($im, $blueName, 48, self::W * 3 / 4, 265, $blueColor, self::W / 2 - 80);
+
+        $scoreText = $redPts !== null && $bluePts !== null ? $redPts . '  :  ' . $bluePts : 'VS';
+        $this->centeredText($im, $scoreText, 72, self::W / 2, 390, $white);
+
+        if ($winner === 'red') {
+            $resultText = $redName . ' wins';
+            $resultColor = $gold;
+        } elseif ($winner === 'blue') {
+            $resultText = $blueName . ' wins';
+            $resultColor = $gold;
+        } elseif ($winner === 'draw') {
+            $resultText = 'Draw';
+            $resultColor = $muted;
+        } else {
+            $resultText = '';
+            $resultColor = $muted;
+        }
+
+        if ($resultText !== '') {
+            $this->centeredText($im, $resultText, 30, self::W / 2, 460, $resultColor);
+        }
+
+        if ($resign) {
+            $this->centeredText($im, ucfirst($resign) . ' resigned', 18, self::W / 2, 498, $muted);
+        }
+
+        $this->centeredText($im, 'mineseeker.hu', 16, self::W / 2, self::H - 20, $muted);
+
+        imagepng($im, $dest);
+        imagedestroy($im);
+    }
+
+    /** Render text centered on $cx. */
+    private function centeredText(\GdImage $im, string $text, int $size, int $cx, int $y, int $color): void
+    {
+        $bbox = imagettfbbox($size, 0, self::FONT, $text);
+        $w = $bbox[2] - $bbox[0];
+        imagettftext($im, $size, 0, (int)($cx - $w / 2), $y, $color, self::FONT, $text);
+    }
+
+    /** Render text centered on $cx, shrinking font size to fit $maxWidth. */
+    private function centeredTextFit(
+        \GdImage $im,
+        string   $text,
+        int      $size,
+        int      $cx,
+        int      $y,
+        int      $color,
+        int      $maxWidth
+    ): void {
+        $bbox = imagettfbbox($size, 0, self::FONT, $text);
+        $w = $bbox[2] - $bbox[0];
+        if ($w > $maxWidth) {
+            $size = (int)($size * $maxWidth / $w);
+        }
+        $this->centeredText($im, $text, $size, $cx, $y, $color);
+    }
+}

src/Util/RpcManager.php

@@ -20,7 +20,9 @@ use Doctrine\ORM\EntityManagerInterface;
 use Exception;
 use JsonException;
 use Psr\Log\LoggerInterface;
+use Random\RandomException;
 use RuntimeException;
+use Symfony\Component\Uid\Uuid;
 
 /**
  * Class RpcManager
@@ -34,9 +36,9 @@ use RuntimeException;
  */
 class RpcManager implements RpcManagerInterface
 {
-    private const ROWS  = 16;
-    private const COLS  = 16;
-    private const MINES = 51;
+    private const int ROWS = 16;
+    private const int COLS  = 16;
+    private const int MINES = 51;
 
     public function __construct(
         private readonly EntityManagerInterface $entityManager,
@@ -99,6 +101,7 @@ class RpcManager implements RpcManagerInterface
             $this->entityManager->persist($grid);
 
             $playedGame->setGameAssoc($gameAssoc);
+            $playedGame->setUuid(Uuid::fromString($gameAssoc));
             $playedGame->setGrid($grid);
             $playedGame->setCreated(new DateTime());
             $playedGame->setUpdated(new DateTime());
@@ -117,25 +120,32 @@ class RpcManager implements RpcManagerInterface
      */
     private function generateGrid(): array
     {
-        // Build flat set: 51 mines ('m') + remaining water ('w')
+        /** Build flat set: 51 mines ('m') + remaining water ('w') */
         $set = array_merge(
             array_fill(0, self::MINES, 'm'),
             array_fill(0, self::ROWS * self::COLS - self::MINES, 'w'),
         );
 
-        // Fisher-Yates shuffle
+        /**
+         * Fisher-Yates shuffle
+         * @see https://en.wikipedia.org/wiki/Fisher%E2%80%93Yates_shuffle
+         */
         for ($i = count($set) - 1; $i > 0; $i--) {
-            $j = random_int(0, $i);
+            try {
+                $j = random_int(0, $i);
+            } catch (RandomException $e) {
+                throw new RuntimeException('Failed to generate random index: ' . $e->getMessage());
+            }
             [$set[$i], $set[$j]] = [$set[$j], $set[$i]];
         }
 
-        // Reshape to 2-D
+        /** Reshape to 2-D */
         $grid = [];
         for ($r = 0; $r < self::ROWS; $r++) {
             $grid[$r] = array_slice($set, $r * self::COLS, self::COLS);
         }
 
-        // Replace 'w' with adjacent-mine count
+        /** Replace 'w' with adjacent-mine count */
         $dirs = [[-1, -1], [-1, 0], [-1, 1], [0, -1], [0, 1], [1, -1], [1, 0], [1, 1]];
         for ($r = 0; $r < self::ROWS; $r++) {
             for ($c = 0; $c < self::COLS; $c++) {

templates/Game/battle_share.html.twig

@@ -3,32 +3,33 @@
 {% block title %} - Battle Report{% endblock %}
 
 {% block metas %}
-  {% set shareUrl = url('MineSeekerBundle_battle_share', { id: game.id }) %}
-  <meta property="og:url"         content="{{ shareUrl }}"/>
-  <meta property="og:type"        content="website"/>
-  <meta property="og:title"       content="{{ ogTitle }}"/>
+  {%- set shareUrl = url('MineSeekerBundle_battle_share', { uuid: game.uuid }) -%}
+  {%- set _ogImage = url('MineSeekerBundle_og_battle', { uuid: game.uuid }) -%}
+  <meta property="og:url" content="{{ shareUrl }}"/>
+  <meta property="og:type" content="article"/>
+  <meta property="og:site_name" content="MineSeeker"/>
+  <meta property="og:locale" content="en_US"/>
+  <meta property="og:title" content="{{ ogTitle }}"/>
   <meta property="og:description" content="{{ ogDesc }}"/>
-  <meta property="og:image"       content="{{ app.request.getSchemeAndHttpHost() }}{{ asset('images/mine-1600x627.png') }}"/>
-  <meta property="og:image:width"  content="1600"/>
+  <meta property="og:image" content="{{ _ogImage }}"/>
+  <meta property="og:image:width" content="1600"/>
   <meta property="og:image:height" content="627"/>
-  <meta name="twitter:card"        content="summary_large_image"/>
-  <meta name="twitter:title"       content="{{ ogTitle }}"/>
+  <meta property="og:image:alt" content="{{ ogTitle }}"/>
+  <meta name="twitter:card" content="summary_large_image"/>
+  <meta name="twitter:site" content="@MineSeeker"/>
+  <meta name="twitter:title" content="{{ ogTitle }}"/>
   <meta name="twitter:description" content="{{ ogDesc }}"/>
-  <meta name="twitter:image"       content="{{ app.request.getSchemeAndHttpHost() }}{{ asset('images/mine-1600x627.png') }}"/>
+  <meta name="twitter:image" content="{{ _ogImage }}"/>
+  <meta name="twitter:image:alt" content="{{ ogTitle }}"/>
 {% endblock %}
 
 {% block body %}
   <div class="bshare-page">
-
     <div class="bshare-card">
-
       <div class="bshare-card__eyebrow">
         <i class="fas fa-crosshairs"></i> Battle Report
       </div>
-
-      {# VS Header #}
       <div class="bshare-vs">
-
         <div class="bshare-player bshare-player--red">
           <div class="bshare-avatar bshare-avatar--red">
             {{ redName|slice(0,2)|upper }}
@@ -36,7 +37,6 @@
           <span class="bshare-player__name">{{ redName }}</span>
           <span class="bshare-player__side">Red</span>
         </div>
-
         <div class="bshare-vs__center">
           {% if redPts is not null and bluePts is not null %}
             <div class="bshare-score">
@@ -48,8 +48,6 @@
             <div class="bshare-score bshare-score--na">— : —</div>
           {% endif %}
           <div class="bshare-vs__label">VS</div>
-
-          {# Result badge #}
           {% if resign == 'red' %}
             <div class="bshare-badge bshare-badge--blue">
               <i class="fas fa-trophy"></i> Blue wins
@@ -74,7 +72,6 @@
             {% endif %}
           {% endif %}
         </div>
-
         <div class="bshare-player bshare-player--blue">
           <div class="bshare-avatar bshare-avatar--blue">
             {{ blueName|slice(0,2)|upper }}
@@ -82,10 +79,7 @@
           <span class="bshare-player__name">{{ blueName }}</span>
           <span class="bshare-player__side">Blue</span>
         </div>
-
       </div>
-
-      {# Details #}
       <div class="bshare-details">
         {% if resign %}
           <div class="bshare-detail">
@@ -112,7 +106,6 @@
           </div>
         {% endif %}
       </div>
-
       <div class="bshare-cta">
         <a href="{{ path('MineSeekerBundle_gamePlay') }}" class="bshare-btn">
           <i class="fas fa-play"></i> Play MineSeeker
@@ -121,8 +114,6 @@
           <i class="fas fa-house"></i> Homepage
         </a>
       </div>
-
     </div>
-
   </div>
-{% endblock %}
+{% endblock %}

templates/Game/index.html.twig

@@ -3,12 +3,23 @@
 {% block title %} - The Game{% endblock %}
 
 {% block metas %}
+  {%- set _ogImage = app.request.getSchemeAndHttpHost() ~ asset('images/mine-1600x627.png') -%}
   <meta property="og:url" content="{{ url('MineSeekerBundle_homepage') }}"/>
   <meta property="og:type" content="website"/>
-  <meta property="og:title" content="MineSeeker"/>
-  <meta property="og:description" content="A multiplayer minesweeper game"/>
-  <meta property="og:image"
-        content="{{ app.request.getSchemeAndHttpHost() }}{{ asset('images/mine-1600x627.png') }}"/>
+  <meta property="og:site_name" content="MineSeeker"/>
+  <meta property="og:locale" content="en_US"/>
+  <meta property="og:title" content="MineSeeker — Multiplayer Minesweeper"/>
+  <meta property="og:description"
+        content="Race a friend on a hidden minefield. Real-time 1v1 minesweeper in your browser — no account needed. Just play."/>
+  <meta property="og:image" content="{{ _ogImage }}"/>
+  <meta property="og:image:width" content="1600"/>
+  <meta property="og:image:height" content="627"/>
+  <meta property="og:image:alt" content="MineSeeker — Multiplayer Minesweeper"/>
+  <meta name="twitter:card" content="summary_large_image"/>
+  <meta name="twitter:title" content="MineSeeker — Multiplayer Minesweeper"/>
+  <meta name="twitter:description"
+        content="Race a friend on a hidden minefield. Real-time 1v1 minesweeper in your browser — no account needed. Just play."/>
+  <meta name="twitter:image" content="{{ _ogImage }}"/>
 {% endblock %}
 
 {% block header %}

templates/Game/play.html.twig

@@ -11,7 +11,8 @@
              data-env="{{ env }}"
              data-game-id="{{ app.request.get('gameAssoc') }}"
              data-mercure-hub-url="{{ mercure_hub_url }}"
-             data-mercure-subscriber-jwt="{{ mercure_subscriber_jwt }}">
+             data-mercure-subscriber-jwt="{{ mercure_subscriber_jwt }}"
+             data-recaptcha-site-key="{{ recaptcha_site_key }}">
         </div>
     </div>
 {% endblock %}
@@ -27,7 +28,6 @@
 
 {% block stylesheets %}
     {{ vite_entry_link_tags('mineseekerStyle') }}
-
     <style>
         .mine-container {
             background: url('/images/bg-mineseeker-{{ random(1) }}-outbg.jpg') no-repeat;
@@ -37,5 +37,6 @@
 
 {% block javascripts %}
     {{ parent() }}
+    <script src="https://www.google.com/recaptcha/api.js?render={{ recaptcha_site_key }}" async defer></script>
     {{ vite_entry_script_tags('mineseeker', { dependency: 'react' }) }}
 {% endblock %}

templates/Official/contact.html.twig

@@ -2,12 +2,26 @@
 
 {% block title %} - Contact{% endblock %}
 
-{% block body %}
-    <div class="txt">
-        <h2>Contact and user support</h2>
-
-        <h3>Under construction</h3>
-
-        <a href="mailto:langlasz@gmail.com">langlasz@gmail.com</a>
-    </div>
+{% block metas %}
+  {%- set _ogImage = app.request.getSchemeAndHttpHost() ~ asset('images/mine-1600x627.png') -%}
+  <meta property="og:url" content="{{ url('MineSeekerBundle_contact') }}"/>
+  <meta property="og:type" content="website"/>
+  <meta property="og:site_name" content="MineSeeker"/>
+  <meta property="og:title" content="Contact · MineSeeker"/>
+  <meta property="og:description" content="Get in touch with the MineSeeker team."/>
+  <meta property="og:image" content="{{ _ogImage }}"/>
+  <meta property="og:image:width" content="1600"/>
+  <meta property="og:image:height" content="627"/>
+  <meta name="twitter:card" content="summary_large_image"/>
+  <meta name="twitter:title" content="Contact · MineSeeker"/>
+  <meta name="twitter:description" content="Get in touch with the MineSeeker team."/>
+  <meta name="twitter:image" content="{{ _ogImage }}"/>
+{% endblock %}
+
+{% block body %}
+  <div class="txt">
+    <h2>Contact and user support</h2>
+    <h3>Under construction</h3>
+    <a href="mailto:langlasz@gmail.com">langlasz@gmail.com</a>
+  </div>
 {% endblock %}

templates/Official/privacy.html.twig

@@ -2,51 +2,67 @@
 
 {% block title %} - Privacy Policy{% endblock %}
 
-{% block body %}
-    <div class="txt">
-        <h2>MineSeeker Privacy Policy</h2>
-
-        <p>Your privacy is important to us.</p>
-
-        <p>It is MineSeeker's policy to respect your privacy regarding any information we may collect while operating
-            our
-            website. Accordingly, we have developed this privacy policy in order for you to understand how we collect,
-            use,
-            communicate, disclose and otherwise make use of personal information. We have outlined our privacy policy
-            below.</p>
-
-        <ul>
-            <li>We will collect personal information by lawful and fair means and, where appropriate, with the knowledge
-                or
-                consent of the individual concerned.
-            </li>
-            <li>Before or at the time of collecting personal information, we will identify the purposes for which
-                information is being collected.
-            </li>
-            <li>We will collect and use personal information solely for fulfilling those purposes specified by us and
-                for
-                other ancillary purposes, unless we obtain the consent of the individual concerned or as required by
-                law.
-            </li>
-            <li>Personal data should be relevant to the purposes for which it is to be used, and, to the extent
-                necessary
-                for those purposes, should be accurate, complete, and up-to-date.
-            </li>
-            <li>We will protect personal information by using reasonable security safeguards against loss or theft, as
-                well
-                as unauthorized access, disclosure, copying, use or modification.
-            </li>
-            <li>We will make readily available to customers information about our policies and practices relating to the
-                management of personal information.
-            </li>
-            <li>We will only retain personal information for as long as necessary for the fulfilment of those
-                purposes.
-            </li>
-        </ul>
-
-        <p>We are committed to conducting our business in accordance with these principles in order to ensure that the
-            confidentiality of personal information is protected and maintained. MineSeeker may change this privacy
-            policy
-            from time to time at MineSeeker's sole discretion.</p>
-    </div>
+{% block metas %}
+  {%- set _ogImage = app.request.getSchemeAndHttpHost() ~ asset('images/mine-1600x627.png') -%}
+  <meta property="og:url" content="{{ url('MineSeekerBundle_privacy') }}"/>
+  <meta property="og:type" content="website"/>
+  <meta property="og:site_name" content="MineSeeker"/>
+  <meta property="og:title" content="Privacy Policy · MineSeeker"/>
+  <meta property="og:description" content="Read how MineSeeker collects, uses and protects your personal data."/>
+  <meta property="og:image" content="{{ _ogImage }}"/>
+  <meta property="og:image:width" content="1600"/>
+  <meta property="og:image:height" content="627"/>
+  <meta name="twitter:card" content="summary_large_image"/>
+  <meta name="twitter:title" content="Privacy Policy · MineSeeker"/>
+  <meta name="twitter:description" content="Read how MineSeeker collects, uses and protects your personal data."/>
+  <meta name="twitter:image" content="{{ _ogImage }}"/>
+{% endblock %}
+
+{% block body %}
+  <div class="txt">
+    <h2>MineSeeker Privacy Policy</h2>
+
+    <p>Your privacy is important to us.</p>
+
+    <p>It is MineSeeker's policy to respect your privacy regarding any information we may collect while operating
+      our
+      website. Accordingly, we have developed this privacy policy in order for you to understand how we collect,
+      use,
+      communicate, disclose and otherwise make use of personal information. We have outlined our privacy policy
+      below.</p>
+
+    <ul>
+      <li>We will collect personal information by lawful and fair means and, where appropriate, with the knowledge
+        or
+        consent of the individual concerned.
+      </li>
+      <li>Before or at the time of collecting personal information, we will identify the purposes for which
+        information is being collected.
+      </li>
+      <li>We will collect and use personal information solely for fulfilling those purposes specified by us and
+        for
+        other ancillary purposes, unless we obtain the consent of the individual concerned or as required by
+        law.
+      </li>
+      <li>Personal data should be relevant to the purposes for which it is to be used, and, to the extent
+        necessary
+        for those purposes, should be accurate, complete, and up-to-date.
+      </li>
+      <li>We will protect personal information by using reasonable security safeguards against loss or theft, as
+        well
+        as unauthorized access, disclosure, copying, use or modification.
+      </li>
+      <li>We will make readily available to customers information about our policies and practices relating to the
+        management of personal information.
+      </li>
+      <li>We will only retain personal information for as long as necessary for the fulfilment of those
+        purposes.
+      </li>
+    </ul>
+
+    <p>We are committed to conducting our business in accordance with these principles in order to ensure that the
+      confidentiality of personal information is protected and maintained. MineSeeker may change this privacy
+      policy
+      from time to time at MineSeeker's sole discretion.</p>
+  </div>
 {% endblock %}

templates/Official/terms.html.twig

@@ -2,99 +2,115 @@
 
 {% block title %} - Terms of Service{% endblock %}
 
-{% block body %}
-    <div class="txt">
-        <h2>MineSeeker Terms of Service</h2>
-
-        <h3>1. Terms</h3>
-
-        <p>By accessing the website at <a href="https://www.mineseeker.hu">https://www.mineseeker.hu</a>, you are
-            agreeing to be bound by these terms of service, all applicable laws and regulations, and agree that you are
-            responsible for compliance with any applicable local laws. If you do not agree with any of these terms, you
-            are
-            prohibited from using or accessing this site. The materials contained in this website are protected by
-            applicable copyright and trademark law.</p>
-
-        <h3>2. Use License</h3>
-
-        <ol type="a">
-            <li>
-                Permission is granted to temporarily download one copy of the materials (information or software) on
-                MineSeeker's website for personal, non-commercial transitory viewing only. This is the grant of a
-                license,
-                not a transfer of title, and under this license you may not:
-
-                <ol type="i">
-                    <li>modify or copy the materials;</li>
-                    <li>use the materials for any commercial purpose, or for any public display (commercial or
-                        non-commercial);
-                    </li>
-                    <li>attempt to decompile or reverse engineer any software contained on MineSeeker's website;</li>
-                    <li>remove any copyright or other proprietary notations from the materials; or</li>
-                    <li>transfer the materials to another person or "mirror" the materials on any other server.</li>
-                </ol>
-            </li>
-            <li>This license shall automatically terminate if you violate any of these restrictions and may be
-                terminated by
-                MineSeeker at any time. Upon terminating your viewing of these materials or upon the termination of this
-                license, you must destroy any downloaded materials in your possession whether in electronic or printed
-                format.
-            </li>
-        </ol>
-
-        <h3>3. Disclaimer</h3>
-
-        <ol type="a">
-            <li>The materials on MineSeeker's website are provided on an 'as is' basis. MineSeeker makes no warranties,
-                expressed or implied, and hereby disclaims and negates all other warranties including, without
-                limitation,
-                implied warranties or conditions of merchantability, fitness for a particular purpose, or
-                non-infringement
-                of intellectual property or other violation of rights.
-            </li>
-            <li>Further, MineSeeker does not warrant or make any representations concerning the accuracy, likely
-                results, or
-                reliability of the use of the materials on its website or otherwise relating to such materials or on any
-                sites linked to this site.
-            </li>
-        </ol>
-
-        <h3>4. Limitations</h3>
-
-        <p>In no event shall MineSeeker or its suppliers be liable for any damages (including, without limitation,
-            damages
-            for loss of data or profit, or due to business interruption) arising out of the use or inability to use the
-            materials on MineSeeker's website, even if MineSeeker or a MineSeeker authorized representative has been
-            notified orally or in writing of the possibility of such damage. Because some jurisdictions do not allow
-            limitations on implied warranties, or limitations of liability for consequential or incidental damages,
-            these
-            limitations may not apply to you.</p>
-
-        <h3>5. Accuracy of materials</h3>
-
-        <p>The materials appearing on MineSeeker's website could include technical, typographical, or photographic
-            errors.
-            MineSeeker does not warrant that any of the materials on its website are accurate, complete or current.
-            MineSeeker may make changes to the materials contained on its website at any time without notice. However
-            MineSeeker does not make any commitment to update the materials.</p>
-
-        <h3>6. Links</h3>
-
-        <p>MineSeeker has not reviewed all of the sites linked to its website and is not responsible for the contents of
-            any
-            such linked site. The inclusion of any link does not imply endorsement by MineSeeker of the site. Use of any
-            such linked website is at the user's own risk.</p>
-
-        <h3>7. Modifications</h3>
-
-        <p>MineSeeker may revise these terms of service for its website at any time without notice. By using this
-            website
-            you are agreeing to be bound by the then current version of these terms of service.</p>
-
-        <h3>8. Governing Law</h3>
-
-        <p>These terms and conditions are governed by and construed in accordance with the laws of Budapest, Hungary and
-            you
-            irrevocably submit to the exclusive jurisdiction of the courts in that State or location.</p>
-    </div>
+{% block metas %}
+  {%- set _ogImage = app.request.getSchemeAndHttpHost() ~ asset('images/mine-1600x627.png') -%}
+  <meta property="og:url" content="{{ url('MineSeekerBundle_terms') }}"/>
+  <meta property="og:type" content="website"/>
+  <meta property="og:site_name" content="MineSeeker"/>
+  <meta property="og:title" content="Terms of Use · MineSeeker"/>
+  <meta property="og:description" content="Read the MineSeeker terms of use before playing."/>
+  <meta property="og:image" content="{{ _ogImage }}"/>
+  <meta property="og:image:width" content="1600"/>
+  <meta property="og:image:height" content="627"/>
+  <meta name="twitter:card" content="summary_large_image"/>
+  <meta name="twitter:title" content="Terms of Use · MineSeeker"/>
+  <meta name="twitter:description" content="Read the MineSeeker terms of use before playing."/>
+  <meta name="twitter:image" content="{{ _ogImage }}"/>
+{% endblock %}
+
+{% block body %}
+  <div class="txt">
+    <h2>MineSeeker Terms of Service</h2>
+
+    <h3>1. Terms</h3>
+
+    <p>By accessing the website at <a href="https://www.mineseeker.hu">https://www.mineseeker.hu</a>, you are
+      agreeing to be bound by these terms of service, all applicable laws and regulations, and agree that you are
+      responsible for compliance with any applicable local laws. If you do not agree with any of these terms, you
+      are
+      prohibited from using or accessing this site. The materials contained in this website are protected by
+      applicable copyright and trademark law.</p>
+
+    <h3>2. Use License</h3>
+
+    <ol type="a">
+      <li>
+        Permission is granted to temporarily download one copy of the materials (information or software) on
+        MineSeeker's website for personal, non-commercial transitory viewing only. This is the grant of a
+        license,
+        not a transfer of title, and under this license you may not:
+
+        <ol type="i">
+          <li>modify or copy the materials;</li>
+          <li>use the materials for any commercial purpose, or for any public display (commercial or
+            non-commercial);
+          </li>
+          <li>attempt to decompile or reverse engineer any software contained on MineSeeker's website;</li>
+          <li>remove any copyright or other proprietary notations from the materials; or</li>
+          <li>transfer the materials to another person or "mirror" the materials on any other server.</li>
+        </ol>
+      </li>
+      <li>This license shall automatically terminate if you violate any of these restrictions and may be
+        terminated by
+        MineSeeker at any time. Upon terminating your viewing of these materials or upon the termination of this
+        license, you must destroy any downloaded materials in your possession whether in electronic or printed
+        format.
+      </li>
+    </ol>
+
+    <h3>3. Disclaimer</h3>
+
+    <ol type="a">
+      <li>The materials on MineSeeker's website are provided on an 'as is' basis. MineSeeker makes no warranties,
+        expressed or implied, and hereby disclaims and negates all other warranties including, without
+        limitation,
+        implied warranties or conditions of merchantability, fitness for a particular purpose, or
+        non-infringement
+        of intellectual property or other violation of rights.
+      </li>
+      <li>Further, MineSeeker does not warrant or make any representations concerning the accuracy, likely
+        results, or
+        reliability of the use of the materials on its website or otherwise relating to such materials or on any
+        sites linked to this site.
+      </li>
+    </ol>
+
+    <h3>4. Limitations</h3>
+
+    <p>In no event shall MineSeeker or its suppliers be liable for any damages (including, without limitation,
+      damages
+      for loss of data or profit, or due to business interruption) arising out of the use or inability to use the
+      materials on MineSeeker's website, even if MineSeeker or a MineSeeker authorized representative has been
+      notified orally or in writing of the possibility of such damage. Because some jurisdictions do not allow
+      limitations on implied warranties, or limitations of liability for consequential or incidental damages,
+      these
+      limitations may not apply to you.</p>
+
+    <h3>5. Accuracy of materials</h3>
+
+    <p>The materials appearing on MineSeeker's website could include technical, typographical, or photographic
+      errors.
+      MineSeeker does not warrant that any of the materials on its website are accurate, complete or current.
+      MineSeeker may make changes to the materials contained on its website at any time without notice. However
+      MineSeeker does not make any commitment to update the materials.</p>
+
+    <h3>6. Links</h3>
+
+    <p>MineSeeker has not reviewed all of the sites linked to its website and is not responsible for the contents of
+      any
+      such linked site. The inclusion of any link does not imply endorsement by MineSeeker of the site. Use of any
+      such linked website is at the user's own risk.</p>
+
+    <h3>7. Modifications</h3>
+
+    <p>MineSeeker may revise these terms of service for its website at any time without notice. By using this
+      website
+      you are agreeing to be bound by the then current version of these terms of service.</p>
+
+    <h3>8. Governing Law</h3>
+
+    <p>These terms and conditions are governed by and construed in accordance with the laws of Budapest, Hungary and
+      you
+      irrevocably submit to the exclusive jurisdiction of the courts in that State or location.</p>
+  </div>
 {% endblock %}

templates/Security/2fa.html.twig

@@ -2,6 +2,17 @@
 
 {% block title %} - Two-Factor Authentication{% endblock %}
 
+{% block metas %}
+  <meta name="robots" content="noindex,nofollow"/>
+  <meta property="og:url" content="{{ app.request.uri }}"/>
+  <meta property="og:type" content="website"/>
+  <meta property="og:site_name" content="MineSeeker"/>
+  <meta property="og:title" content="Two-Factor Authentication · MineSeeker"/>
+  <meta property="og:description" content="Verify your identity to access your MineSeeker account."/>
+  <meta name="twitter:card" content="summary"/>
+  <meta name="twitter:title" content="Two-Factor Authentication · MineSeeker"/>
+{% endblock %}
+
 {% block body %}
   <div class="auth-page">
     <div class="auth-card">
@@ -51,4 +62,4 @@
       </form>
     </div>
   </div>
-{% endblock %}
+{% endblock %}

templates/Security/2fa_setup.html.twig

@@ -2,6 +2,17 @@
 
 {% block title %} - Enable Two-Factor Authentication{% endblock %}
 
+{% block metas %}
+  <meta name="robots" content="noindex,nofollow"/>
+  <meta property="og:url" content="{{ app.request.uri }}"/>
+  <meta property="og:type" content="website"/>
+  <meta property="og:site_name" content="MineSeeker"/>
+  <meta property="og:title" content="Enable 2FA · MineSeeker"/>
+  <meta property="og:description" content="Set up two-factor authentication to secure your MineSeeker account."/>
+  <meta name="twitter:card" content="summary"/>
+  <meta name="twitter:title" content="Enable 2FA · MineSeeker"/>
+{% endblock %}
+
 {% block body %}
   <div class="auth-page">
     <div class="auth-card auth-card--wide">

templates/Security/forgot_password.html.twig

@@ -2,6 +2,19 @@
 
 {% block title %} - Forgot Password{% endblock %}
 
+{% block metas %}
+  {%- set _ogImage = app.request.getSchemeAndHttpHost() ~ asset('images/mine-1600x627.png') -%}
+  <meta name="robots" content="noindex,nofollow"/>
+  <meta property="og:url" content="{{ app.request.uri }}"/>
+  <meta property="og:type" content="website"/>
+  <meta property="og:site_name" content="MineSeeker"/>
+  <meta property="og:title" content="Reset Password · MineSeeker"/>
+  <meta property="og:description" content="Reset your MineSeeker account password."/>
+  <meta property="og:image" content="{{ _ogImage }}"/>
+  <meta name="twitter:card" content="summary"/>
+  <meta name="twitter:title" content="Reset Password · MineSeeker"/>
+{% endblock %}
+
 {% block body %}
   <div class="auth-page">
     {% for email in app.flashes('reset_sent') %}
@@ -26,28 +39,28 @@
 
         {{ form_start(form, {attr: {class: 'auth-form'}}) }}
 
-          <div class="auth-field">
-            <label for="{{ form.email.vars.id }}" class="auth-label">Email</label>
-            <div class="auth-input-wrap">
-              <i class="fas fa-envelope auth-input-icon"></i>
-              {{ form_widget(form.email, {
-                attr: {
-                  class: 'auth-input' ~ (not form.email.vars.valid ? ' auth-input--error' : ''),
-                  autocomplete: 'email',
-                  autofocus: true,
-                }
-              }) }}
-            </div>
-            {% if not form.email.vars.valid %}
-              {% for error in form.email.vars.errors %}
-                <p class="auth-field-error"><i class="fas fa-circle-exclamation"></i> {{ error.message }}</p>
-              {% endfor %}
-            {% endif %}
+        <div class="auth-field">
+          <label for="{{ form.email.vars.id }}" class="auth-label">Email</label>
+          <div class="auth-input-wrap">
+            <i class="fas fa-envelope auth-input-icon"></i>
+            {{ form_widget(form.email, {
+              attr: {
+                class: 'auth-input' ~ (not form.email.vars.valid ? ' auth-input--error' : ''),
+                autocomplete: 'email',
+                autofocus: true,
+              }
+            }) }}
           </div>
+          {% if not form.email.vars.valid %}
+            {% for error in form.email.vars.errors %}
+              <p class="auth-field-error"><i class="fas fa-circle-exclamation"></i> {{ error.message }}</p>
+            {% endfor %}
+          {% endif %}
+        </div>
 
-          <button type="submit" class="auth-submit">
-            <i class="fas fa-paper-plane"></i> Send Reset Link
-          </button>
+        <button type="submit" class="auth-submit">
+          <i class="fas fa-paper-plane"></i> Send Reset Link
+        </button>
 
         {{ form_end(form) }}
 

templates/Security/login.html.twig

@@ -2,6 +2,25 @@
 
 {% block title %} - Sign In{% endblock %}
 
+{% block metas %}
+  {%- set _ogImage = app.request.getSchemeAndHttpHost() ~ asset('images/mine-1600x627.png') -%}
+  <meta name="robots" content="noindex,nofollow"/>
+  <meta property="og:url" content="{{ app.request.uri }}"/>
+  <meta property="og:type" content="website"/>
+  <meta property="og:site_name" content="MineSeeker"/>
+  <meta property="og:title" content="Sign In · MineSeeker"/>
+  <meta property="og:description"
+        content="Sign in to MineSeeker and keep track of your wins, stats and battle history."/>
+  <meta property="og:image" content="{{ _ogImage }}"/>
+  <meta property="og:image:width" content="1600"/>
+  <meta property="og:image:height" content="627"/>
+  <meta name="twitter:card" content="summary_large_image"/>
+  <meta name="twitter:title" content="Sign In · MineSeeker"/>
+  <meta name="twitter:description"
+        content="Sign in to MineSeeker and keep track of your wins, stats and battle history."/>
+  <meta name="twitter:image" content="{{ _ogImage }}"/>
+{% endblock %}
+
 {% block body %}
   <div class="auth-page">
     {% for message in app.flashes('success') %}

templates/Security/profile.html.twig

@@ -2,6 +2,25 @@
 
 {% block title %} - Profile{% endblock %}
 
+{% block metas %}
+  {%- set _ogImage = app.request.getSchemeAndHttpHost() ~ asset('images/mine-1600x627.png') -%}
+  <meta name="robots" content="noindex,nofollow"/>
+  <meta property="og:url" content="{{ url('MineSeekerBundle_profile') }}"/>
+  <meta property="og:type" content="profile"/>
+  <meta property="og:site_name" content="MineSeeker"/>
+  <meta property="og:title" content="{{ app.user.username }} · MineSeeker"/>
+  <meta property="og:description"
+        content="View {{ app.user.username }}'s battle stats, win rate and recent games on MineSeeker."/>
+  <meta property="og:image" content="{{ _ogImage }}"/>
+  <meta property="og:image:width" content="1600"/>
+  <meta property="og:image:height" content="627"/>
+  <meta name="twitter:card" content="summary_large_image"/>
+  <meta name="twitter:title" content="{{ app.user.username }} · MineSeeker"/>
+  <meta name="twitter:description"
+        content="View {{ app.user.username }}'s battle stats, win rate and recent games on MineSeeker."/>
+  <meta name="twitter:image" content="{{ _ogImage }}"/>
+{% endblock %}
+
 {% block body %}
   <div class="profile-page">
     <div class="profile-header">

templates/Security/profile_security.html.twig

@@ -2,6 +2,25 @@
 
 {% block title %} - Security Settings{% endblock %}
 
+{% block metas %}
+  {%- set _ogImage = app.request.getSchemeAndHttpHost() ~ asset('images/mine-1600x627.png') -%}
+  <meta name="robots" content="noindex,nofollow"/>
+  <meta property="og:url" content="{{ url('MineSeekerBundle_profile_security') }}"/>
+  <meta property="og:type" content="website"/>
+  <meta property="og:site_name" content="MineSeeker"/>
+  <meta property="og:title" content="Security Settings · MineSeeker"/>
+  <meta property="og:description"
+        content="Manage your MineSeeker account security — passkeys, two-factor authentication and more."/>
+  <meta property="og:image" content="{{ _ogImage }}"/>
+  <meta property="og:image:width" content="1600"/>
+  <meta property="og:image:height" content="627"/>
+  <meta name="twitter:card" content="summary_large_image"/>
+  <meta name="twitter:title" content="Security Settings · MineSeeker"/>
+  <meta name="twitter:description"
+        content="Manage your MineSeeker account security — passkeys, two-factor authentication and more."/>
+  <meta name="twitter:image" content="{{ _ogImage }}"/>
+{% endblock %}
+
 {% block body %}
   <div class="profile-page">
     <div class="profile-actions">

templates/Security/register.html.twig

@@ -2,6 +2,24 @@
 
 {% block title %} - Register{% endblock %}
 
+{% block metas %}
+  {%- set _ogImage = app.request.getSchemeAndHttpHost() ~ asset('images/mine-1600x627.png') -%}
+  <meta property="og:url" content="{{ app.request.uri }}"/>
+  <meta property="og:type" content="website"/>
+  <meta property="og:site_name" content="MineSeeker"/>
+  <meta property="og:title" content="Create Account · MineSeeker"/>
+  <meta property="og:description"
+        content="Join MineSeeker for free. Track your wins, relive your best battles and prove you're the better minesweeper."/>
+  <meta property="og:image" content="{{ _ogImage }}"/>
+  <meta property="og:image:width" content="1600"/>
+  <meta property="og:image:height" content="627"/>
+  <meta name="twitter:card" content="summary_large_image"/>
+  <meta name="twitter:title" content="Create Account · MineSeeker"/>
+  <meta name="twitter:description"
+        content="Join MineSeeker for free. Track your wins, relive your best battles and prove you're the better minesweeper."/>
+  <meta name="twitter:image" content="{{ _ogImage }}"/>
+{% endblock %}
+
 {% block body %}
   <div class="auth-page">
     {% for email in app.flashes('verify_email') %}

templates/Security/reset_password.html.twig

@@ -2,6 +2,17 @@
 
 {% block title %} - Reset Password{% endblock %}
 
+{% block metas %}
+  <meta name="robots" content="noindex,nofollow"/>
+  <meta property="og:url" content="{{ app.request.uri }}"/>
+  <meta property="og:type" content="website"/>
+  <meta property="og:site_name" content="MineSeeker"/>
+  <meta property="og:title" content="Set New Password · MineSeeker"/>
+  <meta property="og:description" content="Set a new password for your MineSeeker account."/>
+  <meta name="twitter:card" content="summary"/>
+  <meta name="twitter:title" content="Set New Password · MineSeeker"/>
+{% endblock %}
+
 {% block body %}
   <div class="auth-page">
     <div class="auth-card">