new: usr: add new profile charts and stats - & add new logo to the tech stack #5

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;

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;

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>
   );