feat(laning): expand laning analysis and match graphs

src/actions/analyzeMatch.ts

@@ -2,6 +2,48 @@ import { skillshots } from "dotaconstants";
 import { isSupport, getObsWardsPlaced, isRoshHero } from "../utility";
 import store from "../store";
 
+/**
+ * Derives player advice using the active language dictionary from the store.
+ * @param match Match data used to evaluate advice checks.
+ * @param _pm Player data evaluated by each check.
+ * @returns An object keyed by check name: eff, farm_drought, skillshot, late_courier,
+ * wards, roshan, and rune_control. Each result contains a translated name, measured
+ * value, validity flag, reference target (top), score function, and optional grade flag.
+ * All checks are returned, including invalid ones. Score functions are not called here.
+ * @example
+ * ```ts
+ * const match = { duration: 1200 };
+ * const _pm = {
+ *   hero_id: 1,
+ *   lane_role: 2,
+ *   lane_efficiency: 0.65,
+ *   gold_t: Array.from({ length: 12 }, (_, minute) => minute * 300),
+ *   obs_log: [],
+ *   purchase: {},
+ *   first_purchase_time: { flying_courier: 300 },
+ *   runes: { 0: 5 },
+ * };
+ * ```
+ * With the store’s active language set to English:
+ * ```ts
+ * const advice = analyzeMatch(match, _pm);
+ * advice.eff; // { grade: true, name: "Lane efficiency", value: 0.65, top: 0.6, valid: true, score(raw) { return raw; } }
+ * advice.farm_drought.value; // 300
+ * advice.farm_drought.valid; // true
+ * advice.skillshot.value; // undefined
+ * advice.skillshot.valid; // false
+ * advice.late_courier.value; // 120
+ * advice.wards.value; // 0
+ * advice.wards.valid; // false
+ * advice.roshan.value; // 0
+ * advice.roshan.valid; // false
+ * advice.rune_control.value; // 5
+ * advice.rune_control.top; // 5
+ * advice.rune_control.valid; // true
+ * advice.eff.score(advice.eff.value); // 0.65
+ * advice.rune_control.score(advice.rune_control.value); // 1
+ * ```
+ */
 export default function analyzeMatch(match: any, _pm: any) {
   const { strings } = store.getState().app;
   // define condition check for each advice point

src/components/App/App.tsx

@@ -32,6 +32,11 @@ const Explorer = React.lazy(() => import("../Explorer/Explorer"));
 const darkTheme = createTheme({
   palette: {
     mode: "dark",
+    primary: { main: "#C8A45D", light: "#E0BF7D", dark: "#92733B" },
+    secondary: { main: "#B8A4D9" },
+    background: { default: "#101012", paper: "#1B1B1F" },
+    text: { primary: "#E8E2D6", secondary: "#A6A29A" },
+    divider: "#443A28",
   },
   components: {
     MuiButton: {
@@ -122,7 +127,7 @@ const Back2Top = styled.button<Back2TopStylesProps>`
   transition: opacity 0.3s ease-in-out;
 
   &:hover {
-    background-color: rgb(26, 108, 239);
+    background-color: var(--od-accent-hover);
   }
 
   #back2TopTxt {

src/components/Container/Container.tsx

@@ -6,6 +6,7 @@ import { Spacer } from "../Spacer/Spacer";
 
 type ContainerProps = {
   title?: string;
+  titleActions?: React.ReactNode;
   subtitle?: string | React.ReactNode;
   style?: any;
   className?: string;
@@ -21,6 +22,7 @@ type ContainerProps = {
 
 const Container = ({
   title,
+  titleActions,
   subtitle,
   style,
   className,
@@ -35,7 +37,12 @@ const Container = ({
 }: ContainerProps) =>
   !hide ? (
     <div className={className} style={{ ...style }}>
-      {title && <Heading title={title} subtitle={subtitle} titleTo={titleTo} />}
+      {title && (titleActions ? (
+        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12 }}>
+          <Heading title={title} subtitle={subtitle} titleTo={titleTo} />
+          {titleActions}
+        </div>
+      ) : <Heading title={title} subtitle={subtitle} titleTo={titleTo} />)}
       {error && (
         <>
           <Spacer variant="1" />

src/components/Header/Header.tsx

@@ -15,7 +15,7 @@ import SearchIcon from "@mui/icons-material/Search";
 import { Toolbar } from "@mui/material";
 import React, { useCallback, useEffect, useState, useRef } from "react";
 import { useSelector } from "react-redux";
-import { Link } from "react-router-dom";
+import { NavLink } from "react-router-dom";
 import styled from "styled-components";
 
 import config from "../../config";
@@ -105,23 +105,43 @@ const MenuLogoWrapper = styled.div`
   padding: 24px 0;
 `;
 
-const DrawerLink = styled(Link)`
+const DrawerLink = styled(NavLink)`
   color: ${constants.textColorPrimary};
 
+  &.active {
+    color: ${constants.primaryLinkColor};
+  }
+  &.active li {
+    background: var(--od-accent-soft);
+    box-shadow: inset 3px 0 0 ${constants.primaryLinkColor};
+  }
+
   & li:hover {
     background-color: rgba(0, 0, 0, 0.08);
     transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   }
 
   span {
     font-family: ${constants.fontFamilyFuturistic};
-    font-size: ${constants.fontSizeSmall};
+    font-size: ${constants.fontSizeMedium};
   }
 `;
 
-const LinkGroupLink = styled(Link)`
+const LinkGroupLink = styled(NavLink)`
   font-family: ${constants.fontFamilyFuturistic};
-  font-size: ${constants.fontSizeSmall} !important;
+  font-size: ${constants.fontSizeMedium} !important;
+  padding: 8px 0;
+  border-bottom: 2px solid transparent;
+
+  &.active {
+    color: ${constants.primaryLinkColor};
+    border-bottom-color: ${constants.primaryLinkColor};
+  }
+
+  &.active:hover {
+    color: ${constants.primaryLinkColor};
+    opacity: 1;
+  }
 `;
 
 const LinkGroup = ({ navbarPages }: { navbarPages: any[] }) => (

src/components/Home/Why.tsx

@@ -32,7 +32,7 @@ const StyledDiv = styled.div`
       & svg {
         width: 48px;
         height: 48px;
-        fill: ${constants.colorBlue};
+        fill: ${constants.colorGolden};
       }
 
       & .headline {

src/components/LoadingOverlay/LoadingOverlayBase.tsx

@@ -3,12 +3,14 @@ import Spinner from "../Spinner/Spinner";
 
 interface LoadingOverlayBaseProps {
   text?: string;
+  textSize?: number;
   paddingTop?: string;
   alignItems?: "center" | "flex-start" | "flex-end";
 }
 
 const LoadingOverlayBase: React.FC<LoadingOverlayBaseProps> = ({
   text,
+  textSize,
   paddingTop = "30%",
   alignItems = "flex-start",
 }) => (
@@ -21,7 +23,7 @@ const LoadingOverlayBase: React.FC<LoadingOverlayBaseProps> = ({
       justifyContent: "center",
     }}
   >
-    <Spinner text={text} />
+    <Spinner text={text} textSize={textSize} />
   </div>
 );
 

src/components/LoadingOverlay/LoadingOverlayUpper30.tsx

@@ -3,10 +3,12 @@ import { LoadingOverlayBase } from "./LoadingOverlayBase";
 
 interface LoadingOverlayUpper30Props {
   text?: string;
+  textSize?: number;
 }
 
 const LoadingOverlayUpper30: React.FC<LoadingOverlayUpper30Props> = ({
   text,
-}) => <LoadingOverlayBase text={text} paddingTop="15%" />;
+  textSize,
+}) => <LoadingOverlayBase text={text} textSize={textSize} paddingTop="15%" />;
 
 export { LoadingOverlayUpper30 };