feat(web): add dashboard pixel arts per level

Author: kemuru

web/src/assets/pngs/dashboard/aristoteles.png

@@ -1,15 +1,20 @@
 import React from "react";
-import styled from "styled-components";
-import { useAccount } from "wagmi";
+import styled, { css } from "styled-components";
+import { landscapeStyle } from "styles/landscapeStyle";
 import { CircularProgress } from "@kleros/ui-components-library";
 import WithHelpTooltip from "../WithHelpTooltip";
-import { useUserQuery } from "queries/useUser";
 
 const Container = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 4px;
+
+  ${landscapeStyle(
+    () => css`
+      gap: 0;
+    `
+  )}
 `;
 
 const tooltipMsg =
@@ -18,44 +23,33 @@ const tooltipMsg =
   " using the number of times you have been coherent and the total cases you" +
   " have been in.";
 
-const levelTitles = [
-  { scoreRange: [0, 20], level: 0, title: "Diogenes" },
-  { scoreRange: [20, 40], level: 1, title: "Pythagoras" },
-  { scoreRange: [40, 60], level: 2, title: "Socrates" },
-  { scoreRange: [60, 80], level: 3, title: "Plato" },
-  { scoreRange: [80, 100], level: 4, title: "Aristotle" },
-];
-
-const Coherency: React.FC = () => {
-  const { address } = useAccount();
-  const { data } = useUserQuery(address?.toLowerCase());
-  const totalCoherent = data?.user ? parseInt(data?.user?.totalCoherent) : 0;
-  const totalResolvedDisputes = data?.user ? parseInt(data?.user?.totalResolvedDisputes) : 1;
-  const coherencyScore = calculateCoherencyScore(totalCoherent, totalResolvedDisputes);
-  const roundedCoherencyScore = Math.round(coherencyScore * 100);
-  const { level, title } =
-    levelTitles.find(({ scoreRange }) => {
-      return roundedCoherencyScore >= scoreRange[0] && roundedCoherencyScore < scoreRange[1];
-    }) ?? levelTitles[0];
+interface ICoherency {
+  userLevelData: {
+    scoreRange: number[];
+    level: number;
+    title: string;
+  };
+  score: number;
+  totalCoherent: number;
+  totalResolvedDisputes: number;
+}
 
+const Coherency: React.FC<ICoherency> = ({ userLevelData, score, totalCoherent, totalResolvedDisputes }) => {
   return (
     <Container>
-      <small>{title}</small>
-      <label>Level {level}</label>
+      <small>{userLevelData.title}</small>
+      <label>Level {userLevelData.level}</label>
       <CircularProgress
         progress={parseFloat(((totalCoherent / Math.max(totalResolvedDisputes, 1)) * 100).toFixed(2))}
       />
       <WithHelpTooltip place="left" {...{ tooltipMsg }}>
         <label>
           Coherency Score:
-          <small> {coherencyScore.toFixed(2)} </small>
+          <small> {score.toFixed(2)} </small>
         </label>
       </WithHelpTooltip>
     </Container>
   );
 };
 
-const calculateCoherencyScore = (totalCoherent: number, totalDisputes: number): number =>
-  totalCoherent / (Math.max(totalDisputes, 1) + 10);
-
 export default Coherency;

web/src/assets/pngs/dashboard/diogenes.png

@@ -0,0 +1,42 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+import Skeleton from "react-loading-skeleton";
+import diogenesImage from "assets/pngs/dashboard/diogenes.png";
+import pythagorasImage from "assets/pngs/dashboard/pythagoras.png";
+import socratesImage from "assets/pngs/dashboard/socrates.png";
+import platoImage from "assets/pngs/dashboard/plato.png";
+import aristotelesImage from "assets/pngs/dashboard/aristoteles.png";
+
+const StyledImage = styled.img<{ show: boolean }>`
+  width: 189px;
+  height: 189px;
+  display: ${({ show }) => (show ? "block" : "none")};
+`;
+
+const StyledSkeleton = styled(Skeleton)`
+  width: 189px;
+  height: 189px;
+`;
+
+const images = [diogenesImage, pythagorasImage, socratesImage, platoImage, aristotelesImage];
+
+interface IPixelArt {
+  level: number;
+}
+
+const PixelArt: React.FC<IPixelArt> = ({ level }) => {
+  const [imageLoaded, setImageLoaded] = useState(false);
+  return (
+    <div>
+      {!imageLoaded && <StyledSkeleton />}
+      <StyledImage
+        src={images[level]}
+        alt="Pixel Art per Level"
+        onLoad={() => setImageLoaded(true)}
+        show={imageLoaded}
+      />
+    </div>
+  );
+};
+
+export default PixelArt;

web/src/assets/pngs/dashboard/plato.png

@@ -4,6 +4,9 @@ import { landscapeStyle } from "styles/landscapeStyle";
 import { Card as _Card } from "@kleros/ui-components-library";
 import Coherency from "./Coherency";
 import JurorRewards from "./JurorRewards";
+import PixelArt from "./PixelArt";
+import { useAccount } from "wagmi";
+import { useUserQuery } from "queries/useUser";
 // import StakingRewards from "./StakingRewards";
 
 const Container = styled.div``;
@@ -13,37 +16,61 @@ const Header = styled.h1`
 `;
 
 const Card = styled(_Card)`
-  width: 100%;
-  height: auto;
-`;
-
-const Layout = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
 
-  gap: 24px;
-  width: auto;
-  margin: 16px 32px;
+  gap: 40px;
+  width: 100%;
+  height: auto;
+  padding: 24px 0;
 
   ${landscapeStyle(
     () => css`
       flex-direction: row;
-      gap: 48px;
+      gap: calc(24px + (64 - 24) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+      height: 236px;
     `
   )}
 `;
 
+const levelTitles = [
+  { scoreRange: [0, 20], level: 0, title: "Diogenes" },
+  { scoreRange: [20, 40], level: 1, title: "Pythagoras" },
+  { scoreRange: [40, 60], level: 2, title: "Socrates" },
+  { scoreRange: [60, 80], level: 3, title: "Plato" },
+  { scoreRange: [80, 100], level: 4, title: "Aristotle" },
+];
+
+const calculateCoherencyScore = (totalCoherent: number, totalDisputes: number): number =>
+  totalCoherent / (Math.max(totalDisputes, 1) + 10);
+
 const JurorInfo: React.FC = () => {
+  const { address } = useAccount();
+  const { data } = useUserQuery(address?.toLowerCase());
+  const totalCoherent = data?.user ? parseInt(data?.user?.totalCoherent) : 0;
+  const totalResolvedDisputes = data?.user ? parseInt(data?.user?.totalResolvedDisputes) : 1;
+
+  const coherencyScore = calculateCoherencyScore(totalCoherent, totalResolvedDisputes);
+  const roundedCoherencyScore = Math.round(coherencyScore * 100);
+  const userLevelData =
+    levelTitles.find(({ scoreRange }) => {
+      return roundedCoherencyScore >= scoreRange[0] && roundedCoherencyScore < scoreRange[1];
+    }) ?? levelTitles[0];
+
   return (
     <Container>
       <Header>Juror Dashboard</Header>
       <Card>
-        <Layout>
-          <Coherency />
-          <JurorRewards />
-        </Layout>
+        <PixelArt level={userLevelData.level} />
+        <Coherency
+          userLevelData={userLevelData}
+          score={coherencyScore}
+          totalCoherent={totalCoherent}
+          totalResolvedDisputes={totalResolvedDisputes}
+        />
+        <JurorRewards />
       </Card>
     </Container>
   );