feat: made moves by rating graph and MoveMap graph response on mobile devices

Author: kevinjosethomas

src/components/Analysis/AnalysisGameList.tsx

@@ -81,7 +81,7 @@ export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
   }, [selected])
 
   return analysisTournamentList ? (
-    <div className="flex h-full flex-col items-start justify-start overflow-hidden rounded bg-background-1">
+    <div className="flex h-full flex-col items-start justify-start overflow-hidden bg-background-1 md:rounded">
       <div className="flex h-full w-full flex-col">
         <div className="grid select-none grid-cols-5 border-b-2 border-white border-opacity-10">
           <Header

src/components/Analysis/ConfigurableScreens.tsx

@@ -35,7 +35,7 @@ export const ConfigurableScreens: React.FC<Props> = ({
   const [screen, setScreen] = useState(screens[0])
 
   return (
-    <div className="flex w-full flex-1 flex-col overflow-hidden rounded bg-background-1/60 md:w-auto">
+    <div className="flex w-full flex-1 flex-col overflow-hidden bg-background-1/60 md:w-auto md:rounded">
       <div className="flex flex-row border-b border-white/10">
         {screens.map((s) => {
           const selected = s.id === screen.id

src/components/Analysis/MoveMap.tsx

@@ -9,9 +9,11 @@ import {
   CartesianGrid,
   ResponsiveContainer,
 } from 'recharts'
+import { useContext } from 'react'
 import { ColorSanMapping } from 'src/types'
 import type { Key } from 'chessground/types'
 import type { DrawShape } from 'chessground/draw'
+import { WindowSizeContext } from 'src/contexts'
 import { ContentType } from 'recharts/types/component/Label'
 
 interface Props {
@@ -26,6 +28,8 @@ export const MoveMap: React.FC<Props> = ({
   colorSanMapping,
   setHoverArrow,
 }: Props) => {
+  const { isMobile } = useContext(WindowSizeContext)
+
   const onMouseEnter = (move: string) => {
     setHoverArrow({
       orig: move.slice(0, 2) as Key,
@@ -38,7 +42,7 @@ export const MoveMap: React.FC<Props> = ({
   }
 
   return (
-    <div className="flex h-64 max-h-full flex-col overflow-hidden rounded bg-background-1/60 md:h-full">
+    <div className="flex h-64 max-h-full flex-col overflow-hidden bg-background-1/60 md:h-full md:rounded">
       <p className="p-3 text-primary md:text-lg">Move Map</p>
       <div className="flex h-full w-full flex-col">
         <ResponsiveContainer width="100%" height="100%">
@@ -52,10 +56,10 @@ export const MoveMap: React.FC<Props> = ({
                 value: 'SF Loss',
                 fill: '#76ADDD',
                 position: 'insideBottom',
-                fontSize: 18,
+                fontSize: isMobile ? 14 : 18,
                 fontWeight: 600,
                 offset: -8,
-                dx: -12,
+                dx: isMobile ? -6 : -12,
               }}
               tickCount={5}
               tickLine={false}
@@ -71,7 +75,7 @@ export const MoveMap: React.FC<Props> = ({
                 fontSize={12}
                 fontWeight={500}
                 dy={10}
-                dx={-18}
+                dx={isMobile ? -40 : -18}
               />
               <Label
                 value="Best Moves →"
@@ -92,10 +96,10 @@ export const MoveMap: React.FC<Props> = ({
                 fill: '#FE7F6D',
                 position: 'insideLeft',
                 angle: -90,
-                fontSize: 16,
+                fontSize: isMobile ? 14 : 16,
                 fontWeight: 600,
-                dx: 10,
-                dy: 32,
+                dx: isMobile ? 5 : 10,
+                dy: isMobile ? 20 : 32,
               }}
               tickCount={4}
               tick={{
@@ -113,7 +117,7 @@ export const MoveMap: React.FC<Props> = ({
                 angle={-90}
                 fontSize={12}
                 fontWeight={500}
-                dy={140}
+                dy={isMobile ? 100 : 140}
                 position="insideLeft"
                 fill="#BF5F52"
               />
@@ -125,14 +129,14 @@ export const MoveMap: React.FC<Props> = ({
                 dx={10}
                 angle={-90}
                 fontWeight={500}
-                dy={-56}
+                dy={isMobile ? -30 : -56}
               />
             </YAxis>
             <Scatter name="Moves" data={moveMap}>
               <LabelList
                 dataKey="move"
                 position="top"
-                fontSize={12}
+                fontSize={isMobile ? 10 : 12}
                 fill="white"
                 content={
                   (({
@@ -151,10 +155,12 @@ export const MoveMap: React.FC<Props> = ({
                         x={x}
                         y={y}
                         key={index}
-                        fontSize={12}
+                        fontSize={isMobile ? 10 : 12}
                         textAnchor="middle"
-                        dx={x < 100 ? 22 : -15}
-                        dy={8}
+                        dx={
+                          x < 100 ? (isMobile ? 15 : 22) : isMobile ? -10 : -15
+                        }
+                        dy={isMobile ? 6 : 8}
                         fill={colorSanMapping[value]?.color ?? '#fff'}
                       >
                         {colorSanMapping[value]?.san ?? value}

src/components/Analysis/MovesByRating.tsx

@@ -8,7 +8,9 @@ import {
   CartesianGrid,
   ResponsiveContainer,
 } from 'recharts'
+import { useContext } from 'react'
 import { ColorSanMapping } from 'src/types'
+import { WindowSizeContext } from 'src/contexts'
 
 interface Props {
   moves: { [key: string]: number }[] | undefined
@@ -19,6 +21,8 @@ export const MovesByRating: React.FC<Props> = ({
   moves,
   colorSanMapping,
 }: Props) => {
+  const { isMobile } = useContext(WindowSizeContext)
+
   const maxValue = moves
     ? Math.max(
         ...moves.flatMap((move) =>
@@ -36,7 +40,15 @@ export const MovesByRating: React.FC<Props> = ({
     <div className="flex h-64 w-full flex-col rounded bg-background-1/60 md:h-full">
       <p className="p-3 text-primary md:text-lg">Moves by Rating</p>
       <ResponsiveContainer width="100%" height="100%">
-        <AreaChart data={moves} margin={{ left: 0, right: 50, bottom: 0 }}>
+        <AreaChart
+          data={moves}
+          margin={{
+            left: 0,
+            right: isMobile ? 40 : 50,
+            bottom: 0,
+            top: isMobile ? 5 : 0,
+          }}
+        >
           <CartesianGrid strokeDasharray="3 3" stroke="#3C3C3C" />
           <XAxis
             dataKey="rating"
@@ -46,7 +58,11 @@ export const MovesByRating: React.FC<Props> = ({
               fontSize: 11,
             }}
             tickMargin={4}
-            ticks={[1100, 1200, 1300, 1400, 1500, 1600, 1700, 1800, 1900]}
+            ticks={
+              isMobile
+                ? [1100, 1300, 1500, 1700, 1900]
+                : [1100, 1200, 1300, 1400, 1500, 1600, 1700, 1800, 1900]
+            }
           />
           <YAxis
             yAxisId="left"
@@ -67,8 +83,8 @@ export const MovesByRating: React.FC<Props> = ({
               fontWeight: 600,
               fontSize: 14,
             }}
-            tickCount={5}
-            tickMargin={2}
+            tickCount={isMobile ? 4 : 5}
+            tickMargin={isMobile ? 1 : 2}
             tickLine={false}
             tickFormatter={(value) => `${value}%`}
           />
@@ -144,13 +160,13 @@ export const MovesByRating: React.FC<Props> = ({
                     yAxisId="left"
                     dataKey={move}
                     dot={{
-                      r: 3,
+                      r: isMobile ? 2 : 3,
                       stroke: colorSanMapping[move]?.color ?? '#fff',
-                      strokeWidth: 3,
+                      strokeWidth: isMobile ? 2 : 3,
                     }}
                     stroke={colorSanMapping[move]?.color ?? '#fff'}
                     fill={`url(#color${move})`}
-                    strokeWidth={3}
+                    strokeWidth={isMobile ? 2 : 3}
                     animationDuration={300}
                     name={san}
                     label={(props: {
@@ -179,7 +195,7 @@ export const MovesByRating: React.FC<Props> = ({
                       )
 
                       let adjustment = 0
-                      const minLabelHeight = 16
+                      const minLabelHeight = isMobile ? 14 : 16
 
                       if (currentIndex > 0) {
                         const prevEndPoint =
@@ -200,9 +216,9 @@ export const MovesByRating: React.FC<Props> = ({
 
                       return (
                         <text
-                          x={props.x + 10}
+                          x={props.x + (isMobile ? 6 : 10)}
                           y={props.y - adjustment}
-                          dy={4}
+                          dy={isMobile ? 3 : 4}
                           fontSize={11}
                           fontWeight={600}
                           fill={colorSanMapping[move]?.color ?? '#fff'}
@@ -260,7 +276,11 @@ export const MovesByRating: React.FC<Props> = ({
           <Legend
             align="right"
             verticalAlign="top"
-            wrapperStyle={{ top: -14, right: 20, fontSize: 14 }}
+            wrapperStyle={{
+              top: isMobile ? -10 : -14,
+              right: isMobile ? 10 : 20,
+              fontSize: 14,
+            }}
             iconSize={0}
             formatter={(value) => {
               return colorSanMapping[value as string]?.san ?? value

src/pages/analysis/[...id].tsx

@@ -474,23 +474,11 @@ const Analysis: React.FC<Props> = ({
             <span className="font-medium text-primary/80">½-½</span>
           ) : (
             <span className="font-medium">
-              <span
-                className={
-                  analyzedGame.termination.winner === 'white'
-                    ? 'text-engine-3'
-                    : 'text-primary/70'
-                }
-              >
+              <span className="text-primary/70">
                 {analyzedGame.termination.winner === 'white' ? '1' : '0'}
               </span>
               <span className="text-primary/70">-</span>
-              <span
-                className={
-                  analyzedGame.termination.winner === 'black'
-                    ? 'text-engine-3'
-                    : 'text-primary/70'
-                }
-              >
+              <span className="text-primary/70">
                 {analyzedGame.termination.winner === 'black' ? '1' : '0'}
               </span>
             </span>