chg: pkg: upgrade fe deps #5

new: usr: add new profile charts and stats - & add new logo to the tech stack #5
chg: usr: improve the Battle reports to change unnecessary data with interesting data #5
2026-04-18 22:12:20 +02:00 · 2026-04-18 22:12:07 +02:00 · 2026-04-18 17:56:50 +02:00 · 2026-04-18 17:53:02 +02:00 · 2026-04-18 13:45:10 +02:00
16 changed files with 369 additions and 105 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,17 @@
 # Changelog


+## v2026.2.3-0 (2026-04-18)
+
+### New
+
+* Add initialization bonus points' system to the gameplay #5. [Lang]
+
+### Changes
+
+* Add extended data to battle reports and sharing image to make viewable bonus points #5. [Lang]
+
+
 ## v2026.2.2-9 (2026-04-18)

 ### New
--- a/assets/css/homepage/_profile.scss
+++ b/assets/css/homepage/_profile.scss
@@ -210,11 +210,43 @@
    }
  }

-  &--best {
-    border-color: rgba(255, 215, 0, 0.15);
+  &--bonus {
+    border-color: rgba(255, 215, 0, 0.18);

    &:hover {
-      border-color: rgba(255, 215, 0, 0.4);
+      border-color: rgba(255, 215, 0, 0.45);
+    }
+  }
+
+  &--avg-bonus {
+    border-color: rgba(230, 184, 60, 0.18);
+
+    &:hover {
+      border-color: rgba(230, 184, 60, 0.45);
+    }
+  }
+
+  &--chain {
+    border-color: rgba(94, 232, 154, 0.15);
+
+    &:hover {
+      border-color: rgba(94, 232, 154, 0.4);
+    }
+  }
+
+  &--blind {
+    border-color: rgba(255, 140, 90, 0.15);
+
+    &:hover {
+      border-color: rgba(255, 140, 90, 0.4);
+    }
+  }
+
+  &--edge {
+    border-color: rgba(168, 210, 255, 0.15);
+
+    &:hover {
+      border-color: rgba(168, 210, 255, 0.4);
    }
  }
 }
@@ -248,8 +280,24 @@
    color: rgba(80, 200, 220, 0.35);
  }

-  .profile-stat--best & {
-    color: rgba(255, 215, 0, 0.3);
+  .profile-stat--bonus & {
+    color: rgba(255, 215, 0, 0.35);
+  }
+
+  .profile-stat--avg-bonus & {
+    color: rgba(230, 184, 60, 0.3);
+  }
+
+  .profile-stat--chain & {
+    color: rgba(94, 232, 154, 0.3);
+  }
+
+  .profile-stat--blind & {
+    color: rgba(255, 140, 90, 0.3);
+  }
+
+  .profile-stat--edge & {
+    color: rgba(168, 210, 255, 0.3);
  }
 }

@@ -289,9 +337,25 @@
    color: #50c8dc;
  }

-  .profile-stat--best & {
+  .profile-stat--bonus & {
    color: #ffd700;
  }
+
+  .profile-stat--avg-bonus & {
+    color: #e6b83c;
+  }
+
+  .profile-stat--chain & {
+    color: #5ee89a;
+  }
+
+  .profile-stat--blind & {
+    color: #ff8c5a;
+  }
+
+  .profile-stat--edge & {
+    color: #a8d2ff;
+  }
 }

 .profile-stat__label {
@@ -464,18 +528,17 @@
 }

 .profile-charts {
-  display: flex;
-  flex-wrap: wrap;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
  gap: 20px;
 }

 .profile-chart-block {
-  flex: 1 1 300px;
+  min-width: 0;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(35, 111, 135, 0.2);
  border-radius: 10px;
  padding: 24px 20px 16px;
-  backdrop-filter: blur(4px);
  box-shadow: 0 8px 48px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
@@ -484,12 +547,25 @@
  .profile-section__title {
    margin: 0;
  }
+
+  &--wide {
+    grid-column: 1 / -1;
+
+    .profile-chart-inner {
+      justify-content: stretch;
+      overflow: hidden;
+
+      > * {
+        width: 100% !important;
+      }
+    }
+  }
 }

 .profile-chart-inner {
  display: flex;
  justify-content: center;
-  overflow: auto;
+  overflow: hidden;

  svg text {
    font-family: 'Rajdhani', sans-serif !important;
--- a/assets/css/homepage/_responsive.scss
+++ b/assets/css/homepage/_responsive.scss
@@ -24,6 +24,10 @@
        grid-template-columns: repeat(2, 1fr);
    }

+    .profile-charts {
+        grid-template-columns: 1fr;
+    }
+
    .profile-header {
        flex-direction: column;
        text-align: center;
--- a/assets/js/components/BattleDialog.jsx
+++ b/assets/js/components/BattleDialog.jsx
@@ -198,6 +198,24 @@ export default function BattleDialog({ games }) {
    : 'Points';
  const shareUrl = `${window.location.origin}/battle/${game.uuid}`;

+  const formatDuration = (from, to) => {
+    if (!from || !to) return null;
+    const diffMs = new Date(to.replace(' ', 'T')) - new Date(from.replace(' ', 'T'));
+    if (isNaN(diffMs) || 0 >= diffMs) return null;
+    const totalSec = Math.floor(diffMs / 1000);
+    const h = Math.floor(totalSec / 3600);
+    const m = Math.floor((totalSec % 3600) / 60);
+    const s = totalSec % 60;
+    if (0 < h) return `${h}h ${m}m ${s}s`;
+    if (0 < m) return `${m}m ${s}s`;
+    return `${s}s`;
+  };
+  const duration = formatDuration(game.created, game.date);
+  const pointDiff = Math.abs((game.redPoints ?? 0) - (game.bluePoints ?? 0));
+  const winnerColor = (game.redPoints ?? 0) > (game.bluePoints ?? 0) ? '#f67d52'
+    : (game.bluePoints ?? 0) > (game.redPoints ?? 0) ? '#95cff5'
+      : 'rgba(255,255,255,0.45)';
+
  const handleShare = () => {
    navigator.clipboard.writeText(shareUrl).then(() => {
      setCopied(true);
@@ -261,15 +279,21 @@ export default function BattleDialog({ games }) {
          <div className="bd-stats">
            <StatRow icon="fa-calendar" label="Date" value={game.date ?? '—'} />
            <StatRow icon="fa-flag-checkered" label="End reason" value={endReason} />
+            {duration && (
+              <StatRow icon="fa-hourglass-half" label="Match duration" value={duration} />
+            )}
+            {0 < pointDiff && (
+              <StatRow icon="fa-balance-scale" label="Winning margin" value={`${pointDiff} mine${1 === pointDiff ? '' : 's'}`} valueColor={winnerColor} />
+            )}
            <StatRow
-              icon="fa-bomb" label="Red hit a mine"
+              icon="fa-bomb" label="Red used bomb"
              value={game.redExplodedBomb ? 'Yes' : 'No'}
              valueColor={game.redExplodedBomb ? '#f67d52' : 'rgba(255,255,255,0.45)'}
            />
            <StatRow
-              icon="fa-bomb" label="Blue hit a mine"
+              icon="fa-bomb" label="Blue used bomb"
              value={game.blueExplodedBomb ? 'Yes' : 'No'}
-              valueColor={game.blueExplodedBomb ? '#f67d52' : 'rgba(255,255,255,0.45)'}
+              valueColor={game.blueExplodedBomb ? '#95cff5' : 'rgba(255,255,255,0.45)'}
            />
            {game.created && game.date && game.created !== game.date && (
              <StatRow icon="fa-clock-o" label="Started" value={game.created} />
--- a/assets/js/components/ProfileCharts.jsx
+++ b/assets/js/components/ProfileCharts.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { BarChart } from '@mui/x-charts/BarChart';
+import { LineChart } from '@mui/x-charts/LineChart';
 import { PieChart } from '@mui/x-charts/PieChart';
 import { createTheme, ThemeProvider } from '@mui/material/styles';

@@ -16,6 +17,8 @@ const darkTheme = createTheme({
 const WIN_COLOR = '#5ee89a';
 const LOSS_COLOR = '#f67d52';
 const DRAW_COLOR = '#95cff5';
+const MINES_COLOR = '#f67d52';
+const BONUS_COLOR = '#ffd700';

 const axisStyle = {
  tickLabelStyle: { fill: 'rgba(255,255,255,0.4)', fontSize: 11, fontFamily: '\'Rajdhani\', sans-serif' },
@@ -23,10 +26,12 @@ const axisStyle = {
 };

 export default function ProfileCharts({ chartData }) {
-  const { months, wins, losses, draws, pieWins, pieLosses, pieDraws } = chartData;
+  const { months, wins, losses, draws, pieWins, pieLosses, pieDraws, recentGames } = chartData;
  const total = pieWins + pieLosses + pieDraws;

  const hasBars = wins.some(v => 0 < v) || losses.some(v => 0 < v) || draws.some(v => 0 < v);
+  const hasRecent = recentGames
+    && (recentGames.mines?.some(v => 0 < v) || recentGames.bonus?.some(v => 0 < v));

  return (
    <ThemeProvider theme={darkTheme}>
@@ -97,6 +102,36 @@ export default function ProfileCharts({ chartData }) {
            </div>
          </div>
        )}
+
+        {hasRecent && (
+          <div className="profile-chart-block profile-chart-block--wide">
+            <h2 className="profile-section__title">
+              <i className="fa fa-line-chart" /> Last {recentGames.labels.length} games — mines & bonus
+            </h2>
+            <div className="profile-chart-inner">
+              <LineChart
+                xAxis={[{ scaleType: 'band', data: recentGames.labels, ...axisStyle }]}
+                yAxis={[{ ...axisStyle }]}
+                series={[
+                  { data: recentGames.mines, label: 'Mines hit', color: MINES_COLOR },
+                  { data: recentGames.bonus, label: 'Bonus points', color: BONUS_COLOR },
+                ]}
+                slotProps={{
+                  legend: {
+                    labelStyle: {
+                      fill: 'rgba(255,255,255,0.55)',
+                      fontSize: 13,
+                      fontFamily: '\'Rajdhani\', sans-serif',
+                    },
+                  },
+                }}
+                borderRadius={3}
+                height={220}
+                margin={{ top: 10, bottom: 30, left: 40, right: 140 }}
+              />
+            </div>
+          </div>
+        )}
      </div>
    </ThemeProvider>
  );
--- a/bun.lock
+++ b/bun.lock
@@ -110,7 +110,7 @@

    "@fontsource/changa-one": ["@fontsource/changa-one@5.2.8", "http://registry.npmjs.org/@fontsource/changa-one/-/changa-one-5.2.8.tgz", {}, "sha512-gagiU8sMWLs9ejh41NmrYlGdgasSYWFegz5/+22WqYdJVS9HZbaUEXj/6jj3ZKgi+dQZT0kYI+Nha2UQGbO/mA=="],

-    "@fontsource/open-sans": ["@fontsource/open-sans@5.2.7", "", {}, "sha512-8yfgDYjE5O0vmTPdrcjV35y4yMnctsokmi9gN49Gcsr0sjzkMkR97AnKDe6OqZh2SFkYlR28fxOvi21bYEgMSw=="],
+    "@fontsource/open-sans": ["@fontsource/open-sans@5.2.7", "http://registry.npmjs.org/@fontsource/open-sans/-/open-sans-5.2.7.tgz", {}, "sha512-8yfgDYjE5O0vmTPdrcjV35y4yMnctsokmi9gN49Gcsr0sjzkMkR97AnKDe6OqZh2SFkYlR28fxOvi21bYEgMSw=="],

    "@fontsource/rajdhani": ["@fontsource/rajdhani@5.2.7", "http://registry.npmjs.org/@fontsource/rajdhani/-/rajdhani-5.2.7.tgz", {}, "sha512-7Gy10U688fCdeFfYKebUF2TZotdgH/ghKyMsseXPmB60lpaUHC8aoCSJl5/OpZ+KHKSU2TqBfKfteVkcIXxTAQ=="],

@@ -146,11 +146,11 @@

    "@mui/utils": ["@mui/utils@9.0.0", "http://registry.npmjs.org/@mui/utils/-/utils-9.0.0.tgz", { "dependencies": { "@babel/runtime": "^7.29.2", "@mui/types": "^9.0.0", "@types/prop-types": "^15.7.15", "clsx": "^2.1.1", "prop-types": "^15.8.1", "react-is": "^19.2.4" }, "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-bQcqyg/gjULUqTuyUjSAFr6LQGLvtkNtDbJerAtoUn9kGZ0hg5QJiN1PLHMLbeFpe3te1831uq7GFl2ITokGdg=="],

-    "@mui/x-charts": ["@mui/x-charts@9.0.1", "http://registry.npmjs.org/@mui/x-charts/-/x-charts-9.0.1.tgz", { "dependencies": { "@babel/runtime": "^7.28.6", "@mui/utils": "9.0.0", "@mui/x-charts-vendor": "^9.0.0", "@mui/x-internal-gestures": "^9.0.0", "@mui/x-internals": "^9.0.0", "bezier-easing": "^2.1.0", "clsx": "^2.1.1", "prop-types": "^15.8.1", "reselect": "^5.1.1", "use-sync-external-store": "^1.6.0" }, "peerDependencies": { "@emotion/react": "^11.9.0", "@emotion/styled": "^11.8.1", "@mui/material": "^7.3.0 || ^9.0.0", "@mui/system": "^7.3.0 || ^9.0.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@emotion/react", "@emotion/styled"] }, "sha512-0LyhlGhUm07wGJY0d0U+hSljGS1EHKWgPBsTJ/lBNGDrNc4DI9zSbp4h802LN/eLwMUVXJSI7DH2W3Ef3WsqnQ=="],
+    "@mui/x-charts": ["@mui/x-charts@9.0.2", "", { "dependencies": { "@babel/runtime": "^7.28.6", "@mui/utils": "9.0.0", "@mui/x-charts-vendor": "^9.0.0", "@mui/x-internal-gestures": "^9.0.2", "@mui/x-internals": "^9.0.0", "bezier-easing": "^2.1.0", "clsx": "^2.1.1", "prop-types": "^15.8.1", "reselect": "^5.1.1", "use-sync-external-store": "^1.6.0" }, "peerDependencies": { "@emotion/react": "^11.9.0", "@emotion/styled": "^11.8.1", "@mui/material": "^7.3.0 || ^9.0.0", "@mui/system": "^7.3.0 || ^9.0.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@emotion/react", "@emotion/styled"] }, "sha512-bKgjGD+uJbDN/g7tMjVmlNdm+iM4UkCJoYruQmgpQ0l+cip8Kn4kmn1iD//rZ35an+LdWaUZ4MHvMzV76D6EJw=="],

    "@mui/x-charts-vendor": ["@mui/x-charts-vendor@9.0.0", "http://registry.npmjs.org/@mui/x-charts-vendor/-/x-charts-vendor-9.0.0.tgz", { "dependencies": { "@babel/runtime": "^7.28.6", "@types/d3-array": "^3.2.2", "@types/d3-color": "^3.1.3", "@types/d3-format": "^3.0.4", "@types/d3-interpolate": "^3.0.4", "@types/d3-path": "^3.1.1", "@types/d3-scale": "^4.0.9", "@types/d3-shape": "^3.1.8", "@types/d3-time": "^3.0.4", "@types/d3-time-format": "^4.0.3", "@types/d3-timer": "^3.0.2", "d3-array": "^3.2.4", "d3-color": "^3.1.0", "d3-format": "^3.1.2", "d3-interpolate": "^3.0.1", "d3-path": "^3.1.0", "d3-scale": "^4.0.2", "d3-shape": "^3.2.0", "d3-time": "^3.1.0", "d3-time-format": "^4.1.0", "d3-timer": "^3.0.1", "flatqueue": "^3.0.0", "internmap": "^2.0.3" } }, "sha512-Do91i+fZiNj/4LN5oaGpJoutolzDBDwdfw6tHrx2LKXDMCRlaImCfreLbdbkk7dFsi9fuIP7hWiMV4vDJKPJTA=="],

-    "@mui/x-internal-gestures": ["@mui/x-internal-gestures@9.0.0", "http://registry.npmjs.org/@mui/x-internal-gestures/-/x-internal-gestures-9.0.0.tgz", { "dependencies": { "@babel/runtime": "^7.28.6" } }, "sha512-+fW1EUai25GJbivGRsi3GX4GYsSvzFPvUEjmMgB4POkRBDjrEZNaLdVWfapT6DlWv/Vfbi08bYSuyvhPXGMZjw=="],
+    "@mui/x-internal-gestures": ["@mui/x-internal-gestures@9.0.2", "", { "dependencies": { "@babel/runtime": "^7.28.6" } }, "sha512-xCp99a7cSb7iH1bj4G524ooMOFe92H8m/rONCUiKyj7LvV1YUGzTfHgJysQgDCZJqHYaW7YAGLvwMUyEMZVzqQ=="],

    "@mui/x-internals": ["@mui/x-internals@9.0.0", "http://registry.npmjs.org/@mui/x-internals/-/x-internals-9.0.0.tgz", { "dependencies": { "@babel/runtime": "^7.28.6", "@mui/utils": "9.0.0", "reselect": "^5.1.1", "use-sync-external-store": "^1.6.0" }, "peerDependencies": { "react": "^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-E/4rdg69JjhyybpPGypCjAKSKLLnSdCFM+O6P/nkUg47+qt3uftxQEhjQO53rcn6ahHl6du/uNZ9BLgeY6kYxQ=="],

@@ -230,9 +230,9 @@

    "@stylistic/eslint-plugin": ["@stylistic/eslint-plugin@4.4.1", "http://registry.npmjs.org/@stylistic/eslint-plugin/-/eslint-plugin-4.4.1.tgz", { "dependencies": { "@typescript-eslint/utils": "^8.32.1", "eslint-visitor-keys": "^4.2.0", "espree": "^10.3.0", "estraverse": "^5.3.0", "picomatch": "^4.0.2" }, "peerDependencies": { "eslint": ">=9.0.0" } }, "sha512-CEigAk7eOLyHvdgmpZsKFwtiqS2wFwI1fn4j09IU9GmD4euFM4jEBAViWeCqaNLlbX2k2+A/Fq9cje4HQBXuJQ=="],

-    "@tanstack/query-core": ["@tanstack/query-core@5.97.0", "http://registry.npmjs.org/@tanstack/query-core/-/query-core-5.97.0.tgz", {}, "sha512-QdpLP5VzVMgo4VtaPppRA2W04UFjIqX+bxke/ZJhE5cfd5UPkRzqIAJQt9uXkQJjqE8LBOMbKv7f8HCsZltXlg=="],
+    "@tanstack/query-core": ["@tanstack/query-core@5.99.0", "", {}, "sha512-3Jv3WQG0BCcH7G+7lf/bP8QyBfJOXeY+T08Rin3GZ1bshvwlbPt7NrDHMEzGdKIOmOzvIQmxjk28YEQX60k7pQ=="],

-    "@tanstack/react-query": ["@tanstack/react-query@5.97.0", "http://registry.npmjs.org/@tanstack/react-query/-/react-query-5.97.0.tgz", { "dependencies": { "@tanstack/query-core": "5.97.0" }, "peerDependencies": { "react": "^18 || ^19" } }, "sha512-y4So4eGcQoK2WVMAcDNZE9ofB/p5v1OlKvtc1F3uqHwrtifobT7q+ZnXk2mRkc8E84HKYSlAE9z6HXl2V0+ySQ=="],
+    "@tanstack/react-query": ["@tanstack/react-query@5.99.0", "", { "dependencies": { "@tanstack/query-core": "5.99.0" }, "peerDependencies": { "react": "^18 || ^19" } }, "sha512-OY2bCqPemT1LlqJ8Y2CUau4KELnIhhG9Ol3ZndPbdnB095pRbPo1cHuXTndg8iIwtoHTgwZjyaDnQ0xD0mYwAw=="],

    "@tybys/wasm-util": ["@tybys/wasm-util@0.10.1", "http://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.1.tgz", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg=="],

@@ -500,7 +500,7 @@

    "hoist-non-react-statics": ["hoist-non-react-statics@3.3.2", "http://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", { "dependencies": { "react-is": "^16.7.0" } }, "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw=="],

-    "howler": ["howler@2.1.2", "http://registry.npmjs.org/howler/-/howler-2.1.2.tgz", {}, "sha512-oKrTFaVXsDRoB/jik7cEpWKTj7VieoiuzMYJ7E/EU5ayvmpRhumCv3YQ3823zi9VTJkSWAhbryHnlZAionGAJg=="],
+    "howler": ["howler@2.2.4", "", {}, "sha512-iARIBPgcQrwtEr+tALF+rapJ8qSc+Set2GJQl7xT1MQzWaVkFebdJhR3alVlSiUf5U7nAANKuj3aWpwerocD5w=="],

    "ignore": ["ignore@5.3.2", "http://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz", {}, "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g=="],

@@ -690,7 +690,7 @@

    "prelude-ls": ["prelude-ls@1.2.1", "http://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz", {}, "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g=="],

-    "prop-types": ["prop-types@15.7.2", "http://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz", { "dependencies": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", "react-is": "^16.8.1" } }, "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ=="],
+    "prop-types": ["prop-types@15.8.1", "http://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", { "dependencies": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", "react-is": "^16.13.1" } }, "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg=="],

    "punycode": ["punycode@2.3.1", "http://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz", {}, "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg=="],

@@ -830,18 +830,6 @@

    "@eslint/eslintrc/globals": ["globals@14.0.0", "http://registry.npmjs.org/globals/-/globals-14.0.0.tgz", {}, "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ=="],

-    "@mui/material/prop-types": ["prop-types@15.8.1", "http://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", { "dependencies": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", "react-is": "^16.13.1" } }, "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg=="],
-
-    "@mui/private-theming/prop-types": ["prop-types@15.8.1", "http://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", { "dependencies": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", "react-is": "^16.13.1" } }, "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg=="],
-
-    "@mui/styled-engine/prop-types": ["prop-types@15.8.1", "http://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", { "dependencies": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", "react-is": "^16.13.1" } }, "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg=="],
-
-    "@mui/system/prop-types": ["prop-types@15.8.1", "http://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", { "dependencies": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", "react-is": "^16.13.1" } }, "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg=="],
-
-    "@mui/utils/prop-types": ["prop-types@15.8.1", "http://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", { "dependencies": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", "react-is": "^16.13.1" } }, "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg=="],
-
-    "@mui/x-charts/prop-types": ["prop-types@15.8.1", "http://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", { "dependencies": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", "react-is": "^16.13.1" } }, "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg=="],
-
    "@typescript-eslint/typescript-estree/minimatch": ["minimatch@10.2.5", "http://registry.npmjs.org/minimatch/-/minimatch-10.2.5.tgz", { "dependencies": { "brace-expansion": "^5.0.5" } }, "sha512-MULkVLfKGYDFYejP07QOurDLLQpcjk7Fw+7jXS2R2czRQzR56yHRveU5NDJEOviH+hETZKSkIk5c+T23GjFUMg=="],

    "@typescript-eslint/typescript-estree/semver": ["semver@7.7.4", "http://registry.npmjs.org/semver/-/semver-7.7.4.tgz", { "bin": { "semver": "bin/semver.js" } }, "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA=="],
@@ -850,38 +838,18 @@

    "babel-plugin-macros/resolve": ["resolve@1.22.12", "http://registry.npmjs.org/resolve/-/resolve-1.22.12.tgz", { "dependencies": { "es-errors": "^1.3.0", "is-core-module": "^2.16.1", "path-parse": "^1.0.7", "supports-preserve-symlinks-flag": "^1.0.0" }, "bin": { "resolve": "bin/resolve" } }, "sha512-TyeJ1zif53BPfHootBGwPRYT1RUt6oGWsaQr8UyZW/eAm9bKoijtvruSDEmZHm92CwS9nj7/fWttqPCgzep8CA=="],

-    "eslint-plugin-react/prop-types": ["prop-types@15.8.1", "http://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", { "dependencies": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", "react-is": "^16.13.1" } }, "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg=="],
-
    "fast-glob/glob-parent": ["glob-parent@5.1.2", "http://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", { "dependencies": { "is-glob": "^4.0.1" } }, "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="],

    "hoist-non-react-statics/react-is": ["react-is@16.13.1", "http://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", {}, "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="],

    "micromatch/picomatch": ["picomatch@2.3.2", "http://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz", {}, "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA=="],

-    "prop-types/react-is": ["react-is@16.11.0", "http://registry.npmjs.org/react-is/-/react-is-16.11.0.tgz", {}, "sha512-gbBVYR2p8mnriqAwWx9LbuUrShnAuSCNnuPGyc7GJrMVQtPDAh8iLpv7FRuMPFb56KkaVZIYSz1PrjI9q0QPCw=="],
-
-    "react-transition-group/prop-types": ["prop-types@15.8.1", "http://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", { "dependencies": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", "react-is": "^16.13.1" } }, "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg=="],
+    "prop-types/react-is": ["react-is@16.13.1", "http://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", {}, "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="],

    "rolldown/@rolldown/pluginutils": ["@rolldown/pluginutils@1.0.0-rc.15", "http://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-rc.15.tgz", {}, "sha512-UromN0peaE53IaBRe9W7CjrZgXl90fqGpK+mIZbA3qSTeYqg3pqpROBdIPvOG3F5ereDHNwoHBI2e50n1BDr1g=="],

-    "@mui/material/prop-types/react-is": ["react-is@16.13.1", "http://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", {}, "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="],
-
-    "@mui/private-theming/prop-types/react-is": ["react-is@16.13.1", "http://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", {}, "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="],
-
-    "@mui/styled-engine/prop-types/react-is": ["react-is@16.13.1", "http://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", {}, "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="],
-
-    "@mui/system/prop-types/react-is": ["react-is@16.13.1", "http://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", {}, "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="],
-
-    "@mui/utils/prop-types/react-is": ["react-is@16.13.1", "http://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", {}, "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="],
-
-    "@mui/x-charts/prop-types/react-is": ["react-is@16.13.1", "http://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", {}, "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="],
-
    "@typescript-eslint/typescript-estree/minimatch/brace-expansion": ["brace-expansion@5.0.5", "http://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.5.tgz", { "dependencies": { "balanced-match": "^4.0.2" } }, "sha512-VZznLgtwhn+Mact9tfiwx64fA9erHH/MCXEUfB/0bX/6Fz6ny5EGTXYltMocqg4xFAQZtnO3DHWWXi8RiuN7cQ=="],

-    "eslint-plugin-react/prop-types/react-is": ["react-is@16.13.1", "http://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", {}, "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="],
-
-    "react-transition-group/prop-types/react-is": ["react-is@16.13.1", "http://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", {}, "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="],
-
    "@typescript-eslint/typescript-estree/minimatch/brace-expansion/balanced-match": ["balanced-match@4.0.4", "http://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz", {}, "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA=="],
  }
 }
--- a/package.json
+++ b/package.json
@@ -21,24 +21,24 @@
    "@fontsource/rajdhani": "^5.2.7",
    "@fortawesome/fontawesome-free": "^7.2.0",
    "@mui/material": "^9.0.0",
-    "@mui/x-charts": "^9.0.1",
-    "@tanstack/react-query": "^5.0.0",
-    "howler": "^2.1.2",
+    "@mui/x-charts": "^9.0.2",
+    "@tanstack/react-query": "^5.99.0",
+    "howler": "^2.2.4",
    "lodash": "^4.18.1",
-    "prop-types": "^15.7.2",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "prop-types": "^15.8.1",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5"
  },
  "devDependencies": {
    "@eslint/eslintrc": "^3.3.5",
-    "@eslint/js": "^9.0.0",
-    "@stylistic/eslint-plugin": "^4.0.0",
+    "@eslint/js": "^9.39.4",
+    "@stylistic/eslint-plugin": "^4.4.1",
    "@vitejs/plugin-react": "^6.0.1",
-    "eslint": "^9.0.0",
-    "eslint-plugin-react": "^7.0.0",
-    "eslint-plugin-react-hooks": "^5.0.0",
-    "globals": "^15.0.0",
-    "sass": "^1.77.0",
+    "eslint": "^9.39.4",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "globals": "^15.15.0",
+    "sass": "^1.99.0",
    "vite": "^8.0.8",
    "vite-plugin-symfony": "^8.2.4"
  },
--- a/public/images/technologies/postgresql.svg
+++ b/public/images/technologies/postgresql.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="576.095" height="593.844" viewBox="0 0 432.071 445.383"><g style="fill-rule:nonzero;clip-rule:nonzero;fill:none;stroke:#fff;stroke-width:12.4651;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4"><path d="M323.205 324.227c2.833-23.601 1.984-27.062 19.563-23.239l4.463.392c13.517.615 31.199-2.174 41.587-7 22.362-10.376 35.622-27.7 13.572-23.148-50.297 10.376-53.755-6.655-53.755-6.655 53.111-78.803 75.313-178.836 56.149-203.322-52.27-66.789-142.748-35.206-144.262-34.386l-.482.089c-9.938-2.062-21.06-3.294-33.554-3.496-22.761-.374-40.032 5.967-53.133 15.904 0 0-161.408-66.498-153.899 83.628 1.597 31.936 45.777 241.655 98.47 178.31 19.259-23.163 37.871-42.748 37.871-42.748 9.242 6.14 20.307 9.272 31.912 8.147l.897-.765c-.281 2.876-.157 5.689.359 9.019-13.572 15.167-9.584 17.83-36.723 23.416-27.457 5.659-11.326 15.734-.797 18.367 12.768 3.193 42.305 7.716 62.268-20.224l-.795 3.188c5.325 4.26 4.965 30.619 5.72 49.452.756 18.834 2.017 36.409 5.856 46.771 3.839 10.36 8.369 37.05 44.036 29.406 29.809-6.388 52.6-15.582 54.677-101.107" style="fill:#000;stroke:#000;stroke-width:37.3953;stroke-linecap:butt;stroke-linejoin:miter"/><path stroke="none" d="M402.395 271.23c-50.302 10.376-53.76-6.655-53.76-6.655 53.111-78.808 75.313-178.843 56.153-203.326-52.27-66.785-142.752-35.2-144.262-34.38l-.486.087c-9.938-2.063-21.06-3.292-33.56-3.496-22.761-.373-40.026 5.967-53.127 15.902 0 0-161.411-66.495-153.904 83.63 1.597 31.938 45.776 241.657 98.471 178.312 19.26-23.163 37.869-42.748 37.869-42.748 9.243 6.14 20.308 9.272 31.908 8.147l.901-.765c-.28 2.876-.152 5.689.361 9.019-13.575 15.167-9.586 17.83-36.723 23.416-27.459 5.659-11.328 15.734-.796 18.367 12.768 3.193 42.307 7.716 62.266-20.224l-.796 3.188c5.319 4.26 9.054 27.711 8.428 48.969s-1.044 35.854 3.147 47.254 8.368 37.05 44.042 29.406c29.809-6.388 45.256-22.942 47.405-50.555 1.525-19.631 4.976-16.729 5.194-34.28l2.768-8.309c3.192-26.611.507-35.196 18.872-31.203l4.463.392c13.517.615 31.208-2.174 41.591-7 22.358-10.376 35.618-27.7 13.573-23.148z" style=""/><path d="M215.866 286.484c-1.385 49.516.348 99.377 5.193 111.495 4.848 12.118 15.223 35.688 50.9 28.045 29.806-6.39 40.651-18.756 45.357-46.051 3.466-20.082 10.148-75.854 11.005-87.281M173.104 38.256S11.583-27.76 19.092 122.365c1.597 31.938 45.779 241.664 98.473 178.316 19.256-23.166 36.671-41.335 36.671-41.335M260.349 26.207c-5.591 1.753 89.848-34.889 144.087 34.417 19.159 24.484-3.043 124.519-56.153 203.329"/><path d="M348.282 263.953s3.461 17.036 53.764 6.653c22.04-4.552 8.776 12.774-13.577 23.155-18.345 8.514-59.474 10.696-60.146-1.069-1.729-30.355 21.647-21.133 19.96-28.739-1.525-6.85-11.979-13.573-18.894-30.338-6.037-14.633-82.796-126.849 21.287-110.183 3.813-.789-27.146-99.002-124.553-100.599-97.385-1.597-94.19 119.762-94.19 119.762" style="stroke-linejoin:bevel"/><path d="M188.604 274.334c-13.577 15.166-9.584 17.829-36.723 23.417-27.459 5.66-11.326 15.733-.797 18.365 12.768 3.195 42.307 7.718 62.266-20.229 6.078-8.509-.036-22.086-8.385-25.547-4.034-1.671-9.428-3.765-16.361 3.994"/><path d="M187.715 274.069c-1.368-8.917 2.93-19.528 7.536-31.942 6.922-18.626 22.893-37.255 10.117-96.339-9.523-44.029-73.396-9.163-73.436-3.193-.039 5.968 2.889 30.26-1.067 58.548-5.162 36.913 23.488 68.132 56.479 64.938"/><path d="M172.517 141.7c-.288 2.039 3.733 7.48 8.976 8.207 5.234.73 9.714-3.522 9.998-5.559.284-2.039-3.732-4.285-8.977-5.015-5.237-.731-9.719.333-9.996 2.367z" style="fill:#fff;stroke-width:4.155;stroke-linecap:butt;stroke-linejoin:miter"/><path d="M331.941 137.543c.284 2.039-3.732 7.48-8.976 8.207-5.238.73-9.718-3.522-10.005-5.559-.277-2.039 3.74-4.285 8.979-5.015s9.718.333 10.002 2.368z" style="fill:#fff;stroke-width:2.0775;stroke-linecap:butt;stroke-linejoin:miter"/><path d="M350.676 123.432c.863 15.994-3.445 26.888-3.988 43.914-.804 24.748 11.799 53.074-7.191 81.435"/></g></svg>
--- a/src/Controller/ProfileController.php
+++ b/src/Controller/ProfileController.php
@@ -112,16 +112,22 @@ class ProfileController extends AbstractController

        $months = array_column(array_values($monthlyData), 'label');

+        $bonus = $this->repo->findBonusStatsForUser($user);
+
        return $this->render('Security/profile.html.twig', [
            'stats'     => [
-                'total'     => $total,
-                'wins'      => $wins,
-                'losses'    => $losses,
-                'draws'     => $draws,
-                'bombs'     => $this->repo->countBombsForUser($user),
-                'winRate'   => $total > 0 ? (int)round($wins / $total * 100) : 0,
-                'avgScore'  => $this->repo->findAvgScoreForUser($user),
-                'bestScore' => $this->repo->findBestScoreForUser($user),
+                'total'       => $total,
+                'wins'        => $wins,
+                'losses'      => $losses,
+                'draws'       => $draws,
+                'minesHit'    => $this->repo->findTotalMinesForUser($user),
+                'winRate'     => $total > 0 ? (int)round($wins / $total * 100) : 0,
+                'avgScore'    => $this->repo->findAvgScoreForUser($user),
+                'bonusPoints' => $bonus['totalBonusPoints'],
+                'avgBonus'    => $bonus['avgBonusPoints'],
+                'bestChain'   => $bonus['bestChain'],
+                'blindHits'   => $bonus['totalBlindHits'],
+                'edgeMines'   => $bonus['totalEdgeMines'],
            ],
            'recent'    => ($recent = $this->repo->findRecentFinishedForUser($user)),
            'gamesData' => array_map(function (PlayedGame $game) use ($userId, $cacheManager): array {
@@ -170,17 +176,41 @@ class ProfileController extends AbstractController
                ];
            }, $recent),
            'chartData' => [
-                'months'    => $months,
-                'wins'      => array_column(array_values($monthlyData), 'wins'),
-                'losses'    => array_column(array_values($monthlyData), 'losses'),
-                'draws'     => array_column(array_values($monthlyData), 'draws'),
-                'pieWins'   => $wins,
-                'pieLosses' => $losses,
-                'pieDraws'  => $draws,
+                'months'      => $months,
+                'wins'        => array_column(array_values($monthlyData), 'wins'),
+                'losses'      => array_column(array_values($monthlyData), 'losses'),
+                'draws'       => array_column(array_values($monthlyData), 'draws'),
+                'pieWins'     => $wins,
+                'pieLosses'   => $losses,
+                'pieDraws'    => $draws,
+                'recentGames' => $this->buildRecentGamesSeries($user, $userId),
            ],
        ]);
    }

+    /**
+     * Build per-game data for the last 15 finished games, oldest → newest.
+     *
+     * @return array{labels:string[],mines:int[],bonus:float[]}
+     */
+    private function buildRecentGamesSeries(User $user, int $userId): array
+    {
+        $recent = $this->repo->findRecentFinishedForUser($user, 15);
+        $recent = array_reverse($recent);
+
+        $labels = [];
+        $mines = [];
+        $bonus = [];
+        foreach ($recent as $i => $game) {
+            $isRed = $game->getRed()?->getId() === $userId;
+            $labels[] = '#' . ($i + 1);
+            $mines[] = (int) ($isRed ? $game->getRedPoints() : $game->getBluePoints());
+            $bonus[] = (float) ($isRed ? $game->getRedBonusPoints() : $game->getBlueBonusPoints()) ?: 0;
+        }
+
+        return ['labels' => $labels, 'mines' => $mines, 'bonus' => $bonus];
+    }
+
    #[Route(
        '/battle/{uuid}',
        name: 'MineSeekerBundle_battle_share',
--- a/src/Repository/PlayedGameRepository.php
+++ b/src/Repository/PlayedGameRepository.php
@@ -260,6 +260,21 @@ class PlayedGameRepository extends ServiceEntityRepository
        }
    }

+    public function findTotalMinesForUser(User $user): int
+    {
+        $conn = $this->getEntityManager()->getConnection();
+
+        $result = $conn->executeQuery(
+            'SELECT
+                COALESCE(SUM(CASE WHEN g.red_id = :uid THEN g.red_points ELSE g.blue_points END), 0) AS total_pts
+             FROM played_game g
+             WHERE (g.red_id = :uid OR g.blue_id = :uid)',
+            ['uid' => $user->getId()],
+        )->fetchAssociative();
+
+        return (int) ($result['total_pts'] ?? 0);
+    }
+
    public function findAvgScoreForUser(User $user): int
    {
        $conn = $this->getEntityManager()->getConnection();
@@ -284,6 +299,49 @@ class PlayedGameRepository extends ServiceEntityRepository
        return (int) round((float) $result['total_pts'] / (int) $result['total_games']);
    }

+    /**
+     * Aggregates bonus points and bonus stats across all finished games for a user.
+     *
+     * @return array{totalBonusPoints:float,avgBonusPoints:float,bestChain:int,totalBlindHits:int,totalEdgeMines:int}
+     */
+    public function findBonusStatsForUser(User $user): array
+    {
+        $userId = $user->getId();
+        $qb = $this->createQueryBuilder('g');
+        $qb->where($qb->expr()->orX(
+            $qb->expr()->eq('g.red', ':u'),
+            $qb->expr()->eq('g.blue', ':u'),
+        ))->setParameter('u', $user);
+
+        /** @var PlayedGame[] $games */
+        $games = $qb->getQuery()->getResult();
+
+        $totalBonusPoints = 0.0;
+        $bestChain = 0;
+        $totalBlindHits = 0;
+        $totalEdgeMines = 0;
+        $gameCount = 0;
+
+        foreach ($games as $game) {
+            $isRed = $game->getRed()?->getId() === $userId;
+            $totalBonusPoints += (float) (($isRed ? $game->getRedBonusPoints() : $game->getBlueBonusPoints()) ?? 0.0);
+
+            $stats = ($isRed ? $game->getRedBonusStats() : $game->getBlueBonusStats()) ?? [];
+            $bestChain = max($bestChain, (int) ($stats['chainBest'] ?? 0));
+            $totalBlindHits += (int) ($stats['blindHits'] ?? 0);
+            $totalEdgeMines += (int) ($stats['edgeMines'] ?? 0);
+            $gameCount++;
+        }
+
+        return [
+            'totalBonusPoints' => round($totalBonusPoints, 1),
+            'avgBonusPoints'   => 0 < $gameCount ? round($totalBonusPoints / $gameCount, 1) : 0.0,
+            'bestChain'        => $bestChain,
+            'totalBlindHits'   => $totalBlindHits,
+            'totalEdgeMines'   => $totalEdgeMines,
+        ];
+    }
+
    public function findBestScoreForUser(User $user): int
    {
        try {
--- a/templates/Game/battle_share.html.twig
+++ b/templates/Game/battle_share.html.twig
@@ -111,6 +111,23 @@
          <span class="bshare-player__side">Blue</span>
        </div>
      </div>
+      {% set durationSec = (game.created and game.updated) ? (game.updated|date('U') - game.created|date('U')) : 0 %}
+      {% set durationStr = '' %}
+      {% if durationSec > 0 %}
+        {% set h = (durationSec / 3600)|round(0, 'floor') %}
+        {% set m = ((durationSec % 3600) / 60)|round(0, 'floor') %}
+        {% set s = durationSec % 60 %}
+        {% if h > 0 %}
+          {% set durationStr = h ~ 'h ' ~ m ~ 'm ' ~ s ~ 's' %}
+        {% elseif m > 0 %}
+          {% set durationStr = m ~ 'm ' ~ s ~ 's' %}
+        {% else %}
+          {% set durationStr = s ~ 's' %}
+        {% endif %}
+      {% endif %}
+      {% set pointDiff = (redPts|default(0) - bluePts|default(0))|abs %}
+      {% set winnerName = redPts|default(0) > bluePts|default(0) ? redName : (bluePts|default(0) > redPts|default(0) ? blueName : null) %}
+
      <div class="bshare-details">
        {% if resign %}
          <div class="bshare-detail">
@@ -118,16 +135,28 @@
            <span>{{ resign|capitalize }} resigned</span>
          </div>
        {% endif %}
+        {% if durationStr %}
+          <div class="bshare-detail">
+            <i class="fas fa-hourglass-half"></i>
+            <span>Match duration: {{ durationStr }}</span>
+          </div>
+        {% endif %}
+        {% if pointDiff > 0 and winnerName %}
+          <div class="bshare-detail">
+            <i class="fas fa-balance-scale"></i>
+            <span>{{ winnerName }} won by {{ pointDiff }} mine{{ pointDiff == 1 ? '' : 's' }}</span>
+          </div>
+        {% endif %}
        {% if game.redExplodedBomb %}
          <div class="bshare-detail bshare-detail--bomb">
            <i class="fas fa-bomb"></i>
-            <span>{{ redName }} hit a mine</span>
+            <span>{{ redName }} used their bomb</span>
          </div>
        {% endif %}
        {% if game.blueExplodedBomb %}
          <div class="bshare-detail bshare-detail--bomb">
            <i class="fas fa-bomb"></i>
-            <span>{{ blueName }} hit a mine</span>
+            <span>{{ blueName }} used their bomb</span>
          </div>
        {% endif %}
        {% if game.updated %}
--- a/templates/Game/index.html.twig
+++ b/templates/Game/index.html.twig
@@ -225,10 +225,13 @@
      <a href="https://vitejs.dev" target="_blank" rel="noopener" class="tech-link">
        <img src="{{ asset('images/technologies/vite.svg') }}" alt="Vite"/>
      </a>
-      <a href="https://bun.sh" target="_blank" rel="noopener" class="tech-link">
-        <img src="{{ asset('images/technologies/bun.svg') }}" alt="Bun"/>
-      </a>
-      <a href="https://www.jetbrains.com/phpstorm" target="_blank" rel="noopener" class="tech-link">
+       <a href="https://bun.sh" target="_blank" rel="noopener" class="tech-link">
+         <img src="{{ asset('images/technologies/bun.svg') }}" alt="Bun"/>
+       </a>
+       <a href="https://www.postgresql.org" target="_blank" rel="noopener" class="tech-link">
+         <img src="{{ asset('images/technologies/postgresql.svg') }}" alt="PostgreSQL"/>
+       </a>
+       <a href="https://www.jetbrains.com/phpstorm" target="_blank" rel="noopener" class="tech-link">
        <img src="{{ asset('images/technologies/phpstorm.svg') }}" alt="PHPStorm"/>
      </a>
      <a href="https://archlinux.org" target="_blank" rel="noopener" class="tech-link">
--- a/templates/Official/contact.html.twig
+++ b/templates/Official/contact.html.twig
@@ -128,7 +128,7 @@
 {% block javascripts %}
  {{ parent() }}
  <script src="https://www.google.com/recaptcha/api.js?render={{ recaptcha_site_key }}" async defer></script>
-  {{ vite_entry_script_tags('contact') }}
+  {{ vite_entry_script_tags('contact', { dependency: 'react' }) }}
  <div id="contact-form-wrapper"
       data-site-key="{{ recaptcha_site_key }}"
       data-recaptcha-field-id="{{ form.recaptcha.vars.id }}">
--- a/templates/Security/login.html.twig
+++ b/templates/Security/login.html.twig
@@ -136,5 +136,5 @@

  </script>

-  {{ vite_entry_script_tags('passkey') }}
+  {{ vite_entry_script_tags('passkey', { dependency: 'react' }) }}
 {% endblock %}
--- a/templates/Security/profile.html.twig
+++ b/templates/Security/profile.html.twig
@@ -1,5 +1,10 @@
 {% extends 'Game/index.html.twig' %}

+{% macro stat_val(value, suffix) %}
+  {%- set abbr = value >= 1000 -%}
+  <span class="profile-stat__value"{% if abbr %} title="{{ value }}"{% endif %}>{% if abbr %}{{ (value / 1000)|round(1, 'floor') }}k{% else %}{{ value }}{% endif %}{% if suffix %}<small>{{ suffix }}</small>{% endif %}</span>
+{% endmacro %}
+
 {% block title %} - Profile{% endblock %}

 {% block metas %}
@@ -45,44 +50,64 @@
    <div class="profile-stats">
      <div class="profile-stat">
        <i class="fas fa-gamepad profile-stat__icon"></i>
-        <span class="profile-stat__value">{{ stats.total }}</span>
+        {{ _self.stat_val(stats.total) }}
        <span class="profile-stat__label">Games played</span>
      </div>
      <div class="profile-stat profile-stat--win">
        <i class="fas fa-trophy profile-stat__icon"></i>
-        <span class="profile-stat__value">{{ stats.wins }}</span>
+        {{ _self.stat_val(stats.wins) }}
        <span class="profile-stat__label">Victories</span>
      </div>
      <div class="profile-stat profile-stat--loss">
        <i class="fas fa-flag profile-stat__icon"></i>
-        <span class="profile-stat__value">{{ stats.losses }}</span>
+        {{ _self.stat_val(stats.losses) }}
        <span class="profile-stat__label">Defeats</span>
      </div>
      <div class="profile-stat profile-stat--draw">
        <i class="fas fa-minus profile-stat__icon"></i>
-        <span class="profile-stat__value">{{ stats.draws }}</span>
+        {{ _self.stat_val(stats.draws) }}
        <span class="profile-stat__label">Draws</span>
      </div>
      <div class="profile-stat profile-stat--rate">
        <i class="fas fa-percent profile-stat__icon"></i>
-        <span class="profile-stat__value">{{ stats.winRate }}<small>%</small></span>
+        {{ _self.stat_val(stats.winRate, '%') }}
        <span class="profile-stat__label">Win rate</span>
      </div>
      <div class="profile-stat profile-stat--avg">
        <i class="fas fa-chart-line profile-stat__icon"></i>
-        <span class="profile-stat__value">{{ stats.avgScore }}</span>
+        {{ _self.stat_val(stats.avgScore) }}
        <span class="profile-stat__label">Avg score</span>
      </div>
-      <div class="profile-stat profile-stat--best">
-        <i class="fas fa-star profile-stat__icon"></i>
-        <span class="profile-stat__value">{{ stats.bestScore }}</span>
-        <span class="profile-stat__label">Best score</span>
-      </div>
      <div class="profile-stat profile-stat--bomb">
        <i class="fas fa-bomb profile-stat__icon"></i>
-        <span class="profile-stat__value">{{ stats.bombs }}</span>
+        {{ _self.stat_val(stats.minesHit) }}
        <span class="profile-stat__label">Mines hit</span>
      </div>
+      <div class="profile-stat profile-stat--bonus">
+        <i class="fas fa-star profile-stat__icon"></i>
+        {{ _self.stat_val(stats.bonusPoints) }}
+        <span class="profile-stat__label">Bonus points</span>
+      </div>
+      <div class="profile-stat profile-stat--avg-bonus">
+        <i class="fas fa-chart-simple profile-stat__icon"></i>
+        {{ _self.stat_val(stats.avgBonus) }}
+        <span class="profile-stat__label">Avg bonus</span>
+      </div>
+      <div class="profile-stat profile-stat--chain">
+        <i class="fas fa-link profile-stat__icon"></i>
+        {{ _self.stat_val(stats.bestChain) }}
+        <span class="profile-stat__label">Best chain</span>
+      </div>
+      <div class="profile-stat profile-stat--blind">
+        <i class="fas fa-bullseye profile-stat__icon"></i>
+        {{ _self.stat_val(stats.blindHits) }}
+        <span class="profile-stat__label">Blind hits</span>
+      </div>
+      <div class="profile-stat profile-stat--edge">
+        <i class="fas fa-border-style profile-stat__icon"></i>
+        {{ _self.stat_val(stats.edgeMines) }}
+        <span class="profile-stat__label">Edge mines</span>
+      </div>
    </div>

    {% if stats.total > 0 %}
@@ -154,5 +179,5 @@

 {% block javascripts %}
  {{ parent() }}
-  {{ vite_entry_script_tags('profile') }}
+  {{ vite_entry_script_tags('profile', { dependency: 'react' }) }}
 {% endblock %}
--- a/templates/Security/profile_security.html.twig
+++ b/templates/Security/profile_security.html.twig
@@ -133,5 +133,5 @@

 {% block javascripts %}
  {{ parent() }}
-  {{ vite_entry_script_tags('passkey') }}
+  {{ vite_entry_script_tags('passkey', { dependency: 'react' }) }}
 {% endblock %}
Author	SHA1	Message	Date
Lang	e5a22cdfe3	chg: pkg: upgrade fe deps #5 All checks were successful Deploy to Production / deploy (push) Successful in 17s Details	2026-04-18 22:12:20 +02:00
Lang	09b0d21621	new: usr: add new profile charts and stats - & add new logo to the tech stack #5	2026-04-18 22:12:07 +02:00
Lang	9aef27a0eb	chg: usr: improve the Battle reports to change unnecessary data with interesting data #5	2026-04-18 17:56:50 +02:00
Lang	c00ed57240	fix: dev: the react is crashing on some cases #5	2026-04-18 17:53:02 +02:00
Lang	ef4cf6ef69	chg: pkg: new version release !skipChangelog	2026-04-18 13:45:10 +02:00
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="576.095" height="593.844" viewBox="0 0 432.071 445.383"><g style="fill-rule:nonzero;clip-rule:nonzero;fill:none;stroke:#fff;stroke-width:12.4651;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4"><path d="M323.205 324.227c2.833-23.601 1.984-27.062 19.563-23.239l4.463.392c13.517.615 31.199-2.174 41.587-7 22.362-10.376 35.622-27.7 13.572-23.148-50.297 10.376-53.755-6.655-53.755-6.655 53.111-78.803 75.313-178.836 56.149-203.322-52.27-66.789-142.748-35.206-144.262-34.386l-.482.089c-9.938-2.062-21.06-3.294-33.554-3.496-22.761-.374-40.032 5.967-53.133 15.904 0 0-161.408-66.498-153.899 83.628 1.597 31.936 45.777 241.655 98.47 178.31 19.259-23.163 37.871-42.748 37.871-42.748 9.242 6.14 20.307 9.272 31.912 8.147l.897-.765c-.281 2.876-.157 5.689.359 9.019-13.572 15.167-9.584 17.83-36.723 23.416-27.457 5.659-11.326 15.734-.797 18.367 12.768 3.193 42.305 7.716 62.268-20.224l-.795 3.188c5.325 4.26 4.965 30.619 5.72 49.452.756 18.834 2.017 36.409 5.856 46.771 3.839 10.36 8.369 37.05 44.036 29.406 29.809-6.388 52.6-15.582 54.677-101.107" style="fill:#000;stroke:#000;stroke-width:37.3953;stroke-linecap:butt;stroke-linejoin:miter"/><path stroke="none" d="M402.395 271.23c-50.302 10.376-53.76-6.655-53.76-6.655 53.111-78.808 75.313-178.843 56.153-203.326-52.27-66.785-142.752-35.2-144.262-34.38l-.486.087c-9.938-2.063-21.06-3.292-33.56-3.496-22.761-.373-40.026 5.967-53.127 15.902 0 0-161.411-66.495-153.904 83.63 1.597 31.938 45.776 241.657 98.471 178.312 19.26-23.163 37.869-42.748 37.869-42.748 9.243 6.14 20.308 9.272 31.908 8.147l.901-.765c-.28 2.876-.152 5.689.361 9.019-13.575 15.167-9.586 17.83-36.723 23.416-27.459 5.659-11.328 15.734-.796 18.367 12.768 3.193 42.307 7.716 62.266-20.224l-.796 3.188c5.319 4.26 9.054 27.711 8.428 48.969s-1.044 35.854 3.147 47.254 8.368 37.05 44.042 29.406c29.809-6.388 45.256-22.942 47.405-50.555 1.525-19.631 4.976-16.729 5.194-34.28l2.768-8.309c3.192-26.611.507-35.196 18.872-31.203l4.463.392c13.517.615 31.208-2.174 41.591-7 22.358-10.376 35.618-27.7 13.573-23.148z" style=""/><path d="M215.866 286.484c-1.385 49.516.348 99.377 5.193 111.495 4.848 12.118 15.223 35.688 50.9 28.045 29.806-6.39 40.651-18.756 45.357-46.051 3.466-20.082 10.148-75.854 11.005-87.281M173.104 38.256S11.583-27.76 19.092 122.365c1.597 31.938 45.779 241.664 98.473 178.316 19.256-23.166 36.671-41.335 36.671-41.335M260.349 26.207c-5.591 1.753 89.848-34.889 144.087 34.417 19.159 24.484-3.043 124.519-56.153 203.329"/><path d="M348.282 263.953s3.461 17.036 53.764 6.653c22.04-4.552 8.776 12.774-13.577 23.155-18.345 8.514-59.474 10.696-60.146-1.069-1.729-30.355 21.647-21.133 19.96-28.739-1.525-6.85-11.979-13.573-18.894-30.338-6.037-14.633-82.796-126.849 21.287-110.183 3.813-.789-27.146-99.002-124.553-100.599-97.385-1.597-94.19 119.762-94.19 119.762" style="stroke-linejoin:bevel"/><path d="M188.604 274.334c-13.577 15.166-9.584 17.829-36.723 23.417-27.459 5.66-11.326 15.733-.797 18.365 12.768 3.195 42.307 7.718 62.266-20.229 6.078-8.509-.036-22.086-8.385-25.547-4.034-1.671-9.428-3.765-16.361 3.994"/><path d="M187.715 274.069c-1.368-8.917 2.93-19.528 7.536-31.942 6.922-18.626 22.893-37.255 10.117-96.339-9.523-44.029-73.396-9.163-73.436-3.193-.039 5.968 2.889 30.26-1.067 58.548-5.162 36.913 23.488 68.132 56.479 64.938"/><path d="M172.517 141.7c-.288 2.039 3.733 7.48 8.976 8.207 5.234.73 9.714-3.522 9.998-5.559.284-2.039-3.732-4.285-8.977-5.015-5.237-.731-9.719.333-9.996 2.367z" style="fill:#fff;stroke-width:4.155;stroke-linecap:butt;stroke-linejoin:miter"/><path d="M331.941 137.543c.284 2.039-3.732 7.48-8.976 8.207-5.238.73-9.718-3.522-10.005-5.559-.277-2.039 3.74-4.285 8.979-5.015s9.718.333 10.002 2.368z" style="fill:#fff;stroke-width:2.0775;stroke-linecap:butt;stroke-linejoin:miter"/><path d="M350.676 123.432c.863 15.994-3.445 26.888-3.988 43.914-.804 24.748 11.799 53.074-7.191 81.435"/></g></svg>