Merge pull request #288 from dataforgoodfr/feat/redesign-synthesis

Feat/redesign synthesis

packages/client/src/lib/array.ts

@@ -50,7 +50,7 @@ const indexArrayBy = <
 >(
   arr: T[],
   key: U
-): Record<T[U], T> => {
+): Record<KeyUnknownGuard<T[U]>, T> => {
   return Object.fromEntries(arr.map((item) => [get(item, key), item]));
 };
 
@@ -83,10 +83,12 @@ type DeepPathRecursive<
 
 type TemplatableTypes = string | number | bigint | boolean | null | undefined;
 
-type Head<T extends any[]> = T extends [infer THead, ...infer _]
+type Head<T extends unknown[]> = T extends [infer THead, ...infer _]
   ? THead
   : never;
 
-type Tail<T extends any[]> = T extends [infer _, ...infer TTail]
+type Tail<T extends unknown[]> = T extends [infer _, ...infer TTail]
   ? TTail
   : never;
+
+type KeyUnknownGuard<T> = T extends string | number | symbol ? T : any;

packages/client/src/lib/formatter.ts

@@ -3,6 +3,8 @@ import { userLocale } from "../modules/translations";
 export {
   formatBudget,
   formatCarbonFootprint,
+  formatConsumption,
+  formatPercentage,
   formatPoints,
   formatProduction,
   formatProductionGw,
@@ -26,6 +28,26 @@ function formatProductionGw(value?: number) {
   return value?.toFixed(1) || "";
 }
 
+function formatConsumption(
+  value: number,
+  { fractionDigits = 0 }: { fractionDigits?: number } = {}
+) {
+  return formatNumber(value, {
+    minimumFractionDigits: fractionDigits,
+    maximumFractionDigits: fractionDigits,
+  });
+}
+
+function formatPercentage(
+  value?: number,
+  { fractionDigits = 1 }: { fractionDigits?: number } = {}
+) {
+  return formatNumber(value, {
+    minimumFractionDigits: fractionDigits,
+    maximumFractionDigits: fractionDigits,
+  });
+}
+
 function formatProduction({
   fractionDigits = 2,
 }: { fractionDigits?: number } = {}) {

packages/client/src/modules/common/components/Card/Card.tsx

@@ -0,0 +1,12 @@
+import { Box, styled } from "@mui/material";
+
+export { Card };
+
+const Card = styled(Box)(({ theme }) => ({
+  borderRadius: "10px",
+  border: "2px solid",
+  borderColor: "#ffffff",
+  backgroundColor: theme.palette.primary.main,
+  color: "#ffffff",
+  overflow: "hidden",
+}));

packages/client/src/modules/common/components/Card/index.ts

@@ -0,0 +1 @@
+export { Card } from "./Card";

packages/client/src/modules/common/components/Flex/Flex.tsx

@@ -0,0 +1,15 @@
+import { styled } from "@mui/material/styles";
+import { getStyledProps } from "../../../../utils/theme";
+
+export { FlexRow };
+
+const FlexRow = styled(
+  "div",
+  getStyledProps("gap")
+)<{ gap?: number }>(({ theme, gap = 2 }) => ({
+  display: "flex",
+  gap: theme.spacing(gap),
+  [theme.breakpoints.down("md")]: {
+    flexDirection: "column",
+  },
+}));

packages/client/src/modules/common/components/Flex/index.ts

@@ -0,0 +1 @@
+export { FlexRow } from "./Flex";

packages/client/src/modules/common/components/Icon/Icon.tsx

@@ -28,22 +28,29 @@ import { SvgIconProps } from "@mui/material";
 import PersonPinRounded from "@mui/icons-material/PersonPinRounded";
 import {
   Badge,
+  Bolt,
   Close,
   Computer,
   ConnectingAirports,
   ContentCopy,
   DirectionsCar,
+  DoNotDisturb,
   DryCleaning,
   HistoryEdu,
   Home,
+  LocalMovies,
   Lock,
   LockOpen,
   LunchDining,
   Microwave,
+  North,
+  PieChart,
   RocketLaunch,
   Shield,
+  South,
   TipsAndUpdates,
   Train,
+  Whatshot,
 } from "@mui/icons-material";
 
 export { Icon };
@@ -60,6 +67,7 @@ const ICONS = {
   budget: Paid,
   car: DirectionsCar,
   "carbon-footprint": Cloud,
+  "chart-pie": PieChart,
   "check-circle": CheckCircle,
   "check-doubled": DoneAll,
   clothes: DryCleaning,
@@ -68,20 +76,25 @@ const ICONS = {
   consumption: ShoppingCart,
   copy: ContentCopy,
   draft: HistoryEdu,
+  energy: Bolt,
   "form-draft": HistoryEdu,
   "form-pending-validation": SettingsSuggestIcon,
   "form-unfilled": Cancel,
   "form-validated": CheckCircle,
   food: LunchDining,
   helper: HelpIcon,
   house: Home,
+  impactful: Whatshot,
   information: Info,
   "info-card": IconImgFactory({ asset: "info_icon.svg" }),
   launch: RocketLaunch,
   lock: Lock,
   "lock-open": LockOpen,
   "mark-circle": Cancel,
   microwave: Microwave,
+  missed: DoNotDisturb,
+  "number-increase": North,
+  "number-decrease": South,
   "open-in-new-tab": OpenInNew,
   plane: ConnectingAirports,
   "player-finished": HowToReg,
@@ -93,6 +106,7 @@ const ICONS = {
   "rank-1st": IconImgFactory({ asset: "medal_1.png" }),
   "rank-2nd": IconImgFactory({ asset: "medal_2.png" }),
   "rank-3rd": IconImgFactory({ asset: "medal_3.png" }),
+  scenario: LocalMovies,
   settings: SettingsSuggestIcon,
   star: Star,
   synthesis: AutoGraphRoundedIcon,

packages/client/src/modules/common/components/Tabs/Tabs.tsx

@@ -1,9 +1,15 @@
-import React, { ReactNode, useMemo, useState } from "react";
+import { ReactNode, useMemo, useState } from "react";
 import { CustomTab, CustomTabs } from "./Tabs.styles";
+import { Box } from "@mui/material";
+import { Icon, IconName } from "../Icon";
 
 export { Tabs };
 
-function Tabs({ tabs }: { tabs: { label: string; component: ReactNode }[] }) {
+function Tabs({
+  tabs,
+}: {
+  tabs: { label: string; iconName?: IconName; component: ReactNode }[];
+}) {
   const [selectedTabIdx, setSelectedTabIdx] = useState(0);
 
   const currentTab = useMemo(() => {
@@ -22,7 +28,14 @@ function Tabs({ tabs }: { tabs: { label: string; component: ReactNode }[] }) {
           <CustomTab
             className={`tabs__tab ${selectedTabIdx === index ? "active" : ""}`}
             key={tab.label}
-            label={tab.label}
+            label={
+              <Box display="flex" alignItems="center">
+                {tab.iconName && (
+                  <Icon name={tab.iconName} sx={{ height: "1rem" }} />
+                )}
+                {tab.label}
+              </Box>
+            }
           />
         ))}
       </CustomTabs>

packages/client/src/modules/common/components/Tag/Tag.tsx

@@ -0,0 +1,47 @@
+import { styled } from "@mui/material";
+import { ReactNode } from "react";
+
+export { Tag };
+
+function Tag({
+  type,
+  color,
+  icon,
+  children,
+}: {
+  type?: "success" | "error" | "secondary";
+  color?: string;
+  icon?: ReactNode;
+  children: ReactNode;
+}) {
+  const className = type || "";
+
+  return (
+    <TagStyled className={className} sx={{ backgroundColor: color }}>
+      {icon}
+      {children}
+    </TagStyled>
+  );
+}
+
+const TagStyled = styled("span")(({ theme }) => {
+  return {
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(0.5),
+    flexGrow: 0,
+    flexShrink: 0,
+    padding: theme.spacing(0.5),
+    borderRadius: "10px",
+    color: "#ffffff",
+    "&.success": {
+      backgroundColor: theme.palette.status.success,
+    },
+    "&.error": {
+      backgroundColor: theme.palette.status.error,
+    },
+    "&.secondary": {
+      backgroundColor: "hsl(0, 50%, 100%)",
+    },
+  };
+});

packages/client/src/modules/common/components/Tag/index.ts

@@ -0,0 +1 @@
+export { Tag } from "./Tag";

packages/client/src/modules/common/components/TagNumber/TagNumber.tsx

@@ -0,0 +1,60 @@
+import { useMemo } from "react";
+import { Icon } from "../Icon";
+import { Tag } from "../Tag";
+import { Typography } from "../Typography";
+
+export { TagNumber };
+
+function TagNumber({
+  value,
+  successDirection = "increase",
+  formatter,
+}: {
+  value: number;
+  successDirection?: "increase" | "decrease";
+  formatter: (nb: number) => string;
+}) {
+  const tagType = useMemo(() => {
+    const directionFactor = successDirection === "increase" ? 1 : -1;
+    if (value * directionFactor > 0) {
+      return "success";
+    }
+    if (value * directionFactor < 0) {
+      return "error";
+    }
+    return "secondary";
+  }, [successDirection, value]);
+
+  const icon = useMemo(() => {
+    if (value > 0) {
+      return (
+        <Icon name="number-increase" sx={{ width: "1rem", height: "1rem" }} />
+      );
+    }
+    if (value < 0) {
+      return (
+        <Icon name="number-decrease" sx={{ width: "1rem", height: "1rem" }} />
+      );
+    }
+    return "•";
+  }, [value]);
+
+  const sign = useMemo(() => {
+    if (value > 0) {
+      return "+";
+    }
+    if (value < 0) {
+      return "-";
+    }
+    return "";
+  }, [value]);
+
+  return (
+    <Tag type={tagType} icon={icon}>
+      <Typography as="span">
+        {sign}
+        {formatter(Math.abs(value))}
+      </Typography>
+    </Tag>
+  );
+}

packages/client/src/modules/common/components/TagNumber/index.ts

@@ -0,0 +1 @@
+export { TagNumber } from "./TagNumber";

packages/client/src/modules/play/context/hooks/player/index.ts

@@ -1,2 +1,3 @@
 export * from "./useCurrentPlayer";
+export * from "./useMostImpactfulActions";
 export * from "./usePersona";

packages/client/src/modules/play/context/hooks/player/useCurrentPlayer.ts

@@ -29,10 +29,15 @@ function useCurrentPlayer() {
       ),
     [game.step, team.actions, productionActionById]
   );
+  const personalization = useMemo(
+    () => player?.profile?.personalization || {},
+    [player?.profile?.personalization]
+  );
 
   return {
     player,
     profile: player.profile,
+    personalization,
     playerActions: player.actions,
     actionPointsAvailableAtCurrentStep: STEPS[game.step].availableActionPoints,
     teamActions: team.actions,