From d29aabb1eee466e09e71d8b10d2ec135b78adb57 Mon Sep 17 00:00:00 2001
From: akhercha <adelkherchache@gmail.com>
Date: Fri, 6 Oct 2023 14:21:07 +0200
Subject: [PATCH] feat: Removed cartridge avatar & Added crown to Skull icon
 (#201)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat(skull_with_crown): Removed Cartridge avatar + Added crown to skull icon

* feat(skull_with_crown): Added skull color to end-game screen

* feat(skull_with_crown): Refactor of the Skull icon from code review

* feat(skull_with_crown): Removed the <svg> tag for 💀

---------

Co-authored-by: akhercha <akherchache@pm.me>
---
 web/src/components/Leaderboard.tsx            |  11 +-
 .../components/avatar/avatars/Catridge.tsx    | 136 ------------------
 web/src/components/avatar/avatars/index.tsx   |   2 -
 web/src/components/icons/Skull.tsx            |  30 +++-
 web/src/pages/[gameId]/end.tsx                |   2 +-
 5 files changed, 33 insertions(+), 148 deletions(-)
 delete mode 100644 web/src/components/avatar/avatars/Catridge.tsx

diff --git a/web/src/components/Leaderboard.tsx b/web/src/components/Leaderboard.tsx
index cf25391b4..ed606c7db 100644
--- a/web/src/components/Leaderboard.tsx
+++ b/web/src/components/Leaderboard.tsx
@@ -120,7 +120,7 @@ const Leaderboard = ({
                 >
                   <HStack mr={3}>
                     <Text
-                      w={["10px","30px"]}
+                      w={["10px", "30px"]}
                       fontSize={["10px", "16px"]}
                       flexShrink={0}
                       // display={["none", "block"]}
@@ -130,7 +130,7 @@ const Leaderboard = ({
                     </Text>
                     <Box flexShrink={0} style={{ marginTop: "-8px" }}>
                       {score.dead ? (
-                        <Skull color={color} />
+                        <Skull color={avatarColor} hasCrown={index === 0} />
                       ) : (
                         <Avatar
                           name={genAvatarFromAddress(score.address)}
@@ -158,13 +158,12 @@ const Leaderboard = ({
                       backgroundRepeat="repeat-x"
                       flexGrow={1}
                       color="transparent"
-
                     >
                       {"."}
                     </Text>
-                    <Text flexShrink={0}
-                      fontSize={["12px", "16px"]}
-                    >{formatCash(score.cash)}</Text>
+                    <Text flexShrink={0} fontSize={["12px", "16px"]}>
+                      {formatCash(score.cash)}
+                    </Text>
                   </HStack>
                 </ListItem>
               );
diff --git a/web/src/components/avatar/avatars/Catridge.tsx b/web/src/components/avatar/avatars/Catridge.tsx
deleted file mode 100644
index edb104786..000000000
--- a/web/src/components/avatar/avatars/Catridge.tsx
+++ /dev/null
@@ -1,136 +0,0 @@
-import { AvatarPathProps } from "../Avatar";
-
-export const Catridge = ({ color, hasCrown }: AvatarPathProps) => {
-  let path;
-  switch (color) {
-    // Green color
-    case "green":
-      path = hasCrown ? (
-        <g>
-          <path d="M15 15.5249H20V20.5249H15V15.5249Z" fill="#11ED83" />
-          <path d="M20 15.5249H25V20.5249H20V15.5249Z" fill="#11ED83" />
-          <path d="M20 10.5249H25V15.5249H20V10.5249Z" fill="#11ED83" />
-          <path d="M25 15.5249H30V20.5249H25V15.5249Z" fill="#11ED83" />
-          <path d="M30 15.5249H35V20.5249H30V15.5249Z" fill="#11ED83" />
-          <path d="M20 35.5249H25V40.5249H20V35.5249Z" fill="#11ED83" />
-          <path d="M35 35.5249H40V40.5249H35V35.5249Z" fill="#11ED83" />
-          <path d="M10 30.5249H15V35.5249H10V30.5249Z" fill="#11ED83" />
-          <path d="M45 35.5249H50V40.5249H45V35.5249Z" fill="#11ED83" />
-          <path d="M45 30.5249H50V35.5249H45V30.5249Z" fill="#11ED83" />
-          <path d="M10 35.5249H15V40.5249H10V35.5249Z" fill="#11ED83" />
-          <path d="M25 45.5249H30V50.5249H25V45.5249Z" fill="#11ED83" />
-          <path d="M25 40.5249H30V45.5249H25V40.5249Z" fill="#11ED83" />
-          <path d="M30 45.5249H35V50.5249H30V45.5249Z" fill="#11ED83" />
-          <path d="M30 40.5249H35V45.5249H30V40.5249Z" fill="#11ED83" />
-          <path d="M25 25.5249H30V30.5249H25V25.5249Z" fill="#11ED83" />
-          <path d="M30 25.5249H35V30.5249H30V25.5249Z" fill="#11ED83" />
-          <path d="M35 15.5249H40V20.5249H35V15.5249Z" fill="#11ED83" />
-          <path d="M35 10.5249H40V15.5249H35V10.5249Z" fill="#11ED83" />
-          <path d="M20 20.5249H25V25.5249H20V20.5249Z" fill="#11ED83" />
-          <path d="M35 20.5249H40V25.5249H35V20.5249Z" fill="#11ED83" />
-          <path d="M40 15.5249H45V20.5249H40V15.5249Z" fill="#11ED83" />
-          <path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M12.475 5.5249H47.525V25.5249H12.475V5.5249ZM42.5093 10.5324H37.5136V15.5299H32.4979V10.5324H27.5021V15.5299H22.4864V10.5324H17.4907V20.5174H42.5093V10.5324Z"
-            fill="#172217"
-          />
-          <path
-            d="M22.5029 10.5225H17.4885V20.5275H42.5206V10.5225H37.5062V15.52H32.5118V10.5225H27.4973V15.52H22.5029V10.5225Z"
-            fill="#11ED83"
-          />
-        </g>
-      ) : (
-        <g>
-          <path d="M15 15.5249H20V20.5249H15V15.5249Z" fill="#11ED83" />
-          <path d="M20 15.5249H25V20.5249H20V15.5249Z" fill="#11ED83" />
-          <path d="M20 10.5249H25V15.5249H20V10.5249Z" fill="#11ED83" />
-          <path d="M25 15.5249H30V20.5249H25V15.5249Z" fill="#11ED83" />
-          <path d="M30 15.5249H35V20.5249H30V15.5249Z" fill="#11ED83" />
-          <path d="M20 35.5249H25V40.5249H20V35.5249Z" fill="#11ED83" />
-          <path d="M35 35.5249H40V40.5249H35V35.5249Z" fill="#11ED83" />
-          <path d="M10 30.5249H15V35.5249H10V30.5249Z" fill="#11ED83" />
-          <path d="M45 35.5249H50V40.5249H45V35.5249Z" fill="#11ED83" />
-          <path d="M45 30.5249H50V35.5249H45V30.5249Z" fill="#11ED83" />
-          <path d="M10 35.5249H15V40.5249H10V35.5249Z" fill="#11ED83" />
-          <path d="M25 45.5249H30V50.5249H25V45.5249Z" fill="#11ED83" />
-          <path d="M25 40.5249H30V45.5249H25V40.5249Z" fill="#11ED83" />
-          <path d="M30 45.5249H35V50.5249H30V45.5249Z" fill="#11ED83" />
-          <path d="M30 40.5249H35V45.5249H30V40.5249Z" fill="#11ED83" />
-          <path d="M25 25.5249H30V30.5249H25V25.5249Z" fill="#11ED83" />
-          <path d="M30 25.5249H35V30.5249H30V25.5249Z" fill="#11ED83" />
-          <path d="M35 15.5249H40V20.5249H35V15.5249Z" fill="#11ED83" />
-          <path d="M35 10.5249H40V15.5249H35V10.5249Z" fill="#11ED83" />
-          <path d="M20 20.5249H25V25.5249H20V20.5249Z" fill="#11ED83" />
-          <path d="M35 20.5249H40V25.5249H35V20.5249Z" fill="#11ED83" />
-          <path d="M40 15.5249H45V20.5249H40V15.5249Z" fill="#11ED83" />
-        </g>
-      );
-      break;
-    // Yellow color
-    case "yellow":
-      path = hasCrown ? (
-        <g>
-          <path d="M15 15.0249H20V20.0249H15V15.0249Z" fill="#FBCB4A" />
-          <path d="M20 15.0249H25V20.0249H20V15.0249Z" fill="#FBCB4A" />
-          <path d="M20 10.0249H25V15.0249H20V10.0249Z" fill="#FBCB4A" />
-          <path d="M25 15.0249H30V20.0249H25V15.0249Z" fill="#FBCB4A" />
-          <path d="M30 15.0249H35V20.0249H30V15.0249Z" fill="#FBCB4A" />
-          <path d="M20 35.0249H25V40.0249H20V35.0249Z" fill="#FBCB4A" />
-          <path d="M35 35.0249H40V40.0249H35V35.0249Z" fill="#FBCB4A" />
-          <path d="M10 30.0249H15V35.0249H10V30.0249Z" fill="#FBCB4A" />
-          <path d="M45 35.0249H50V40.0249H45V35.0249Z" fill="#FBCB4A" />
-          <path d="M45 30.0249H50V35.0249H45V30.0249Z" fill="#FBCB4A" />
-          <path d="M10 35.0249H15V40.0249H10V35.0249Z" fill="#FBCB4A" />
-          <path d="M25 45.0249H30V50.0249H25V45.0249Z" fill="#FBCB4A" />
-          <path d="M25 40.0249H30V45.0249H25V40.0249Z" fill="#FBCB4A" />
-          <path d="M30 45.0249H35V50.0249H30V45.0249Z" fill="#FBCB4A" />
-          <path d="M30 40.0249H35V45.0249H30V40.0249Z" fill="#FBCB4A" />
-          <path d="M25 25.0249H30V30.0249H25V25.0249Z" fill="#FBCB4A" />
-          <path d="M30 25.0249H35V30.0249H30V25.0249Z" fill="#FBCB4A" />
-          <path d="M35 15.0249H40V20.0249H35V15.0249Z" fill="#FBCB4A" />
-          <path d="M35 10.0249H40V15.0249H35V10.0249Z" fill="#FBCB4A" />
-          <path d="M20 20.0249H25V25.0249H20V20.0249Z" fill="#FBCB4A" />
-          <path d="M35 20.0249H40V25.0249H35V20.0249Z" fill="#FBCB4A" />
-          <path d="M40 15.0249H45V20.0249H40V15.0249Z" fill="#FBCB4A" />
-          <path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M12.475 5.0249H47.525V25.0249H12.475V5.0249ZM42.5093 10.0324H37.5136V15.0299H32.4979V10.0324H27.5021V15.0299H22.4864V10.0324H17.4907V20.0174H42.5093V10.0324Z"
-            fill="#172217"
-          />
-          <path
-            d="M22.5029 10.0225H17.4885V20.0275H42.5206V10.0225H37.5062V15.02H32.5118V10.0225H27.4973V15.02H22.5029V10.0225Z"
-            fill="#FBCB4A"
-          />
-        </g>
-      ) : (
-        <g>
-          <path d="M15 15.5249H20V20.5249H15V15.5249Z" fill="#FBCB4A" />
-          <path d="M20 15.5249H25V20.5249H20V15.5249Z" fill="#FBCB4A" />
-          <path d="M20 10.5249H25V15.5249H20V10.5249Z" fill="#FBCB4A" />
-          <path d="M25 15.5249H30V20.5249H25V15.5249Z" fill="#FBCB4A" />
-          <path d="M30 15.5249H35V20.5249H30V15.5249Z" fill="#FBCB4A" />
-          <path d="M20 35.5249H25V40.5249H20V35.5249Z" fill="#FBCB4A" />
-          <path d="M35 35.5249H40V40.5249H35V35.5249Z" fill="#FBCB4A" />
-          <path d="M10 30.5249H15V35.5249H10V30.5249Z" fill="#FBCB4A" />
-          <path d="M45 35.5249H50V40.5249H45V35.5249Z" fill="#FBCB4A" />
-          <path d="M45 30.5249H50V35.5249H45V30.5249Z" fill="#FBCB4A" />
-          <path d="M10 35.5249H15V40.5249H10V35.5249Z" fill="#FBCB4A" />
-          <path d="M25 45.5249H30V50.5249H25V45.5249Z" fill="#FBCB4A" />
-          <path d="M25 40.5249H30V45.5249H25V40.5249Z" fill="#FBCB4A" />
-          <path d="M30 45.5249H35V50.5249H30V45.5249Z" fill="#FBCB4A" />
-          <path d="M30 40.5249H35V45.5249H30V40.5249Z" fill="#FBCB4A" />
-          <path d="M25 25.5249H30V30.5249H25V25.5249Z" fill="#FBCB4A" />
-          <path d="M30 25.5249H35V30.5249H30V25.5249Z" fill="#FBCB4A" />
-          <path d="M35 15.5249H40V20.5249H35V15.5249Z" fill="#FBCB4A" />
-          <path d="M35 10.5249H40V15.5249H35V10.5249Z" fill="#FBCB4A" />
-          <path d="M20 20.5249H25V25.5249H20V20.5249Z" fill="#FBCB4A" />
-          <path d="M35 20.5249H40V25.5249H35V20.5249Z" fill="#FBCB4A" />
-          <path d="M40 15.5249H45V20.5249H40V15.5249Z" fill="#FBCB4A" />
-        </g>
-      );
-      break;
-  }
-  return path;
-};
diff --git a/web/src/components/avatar/avatars/index.tsx b/web/src/components/avatar/avatars/index.tsx
index 8a768bc0e..aef861c34 100644
--- a/web/src/components/avatar/avatars/index.tsx
+++ b/web/src/components/avatar/avatars/index.tsx
@@ -1,4 +1,3 @@
-import { Catridge } from "./Catridge";
 import { PersonA } from "./PersonA";
 import { PersonB } from "./PersonB";
 import { PersonC } from "./PersonC";
@@ -13,7 +12,6 @@ import { PersonK } from "./PersonK";
 import { PersonL } from "./PersonL";
 
 export const avatars = {
-  Catridge: Catridge,
   PersonA: PersonA,
   PersonB: PersonB,
   PersonC: PersonC,
diff --git a/web/src/components/icons/Skull.tsx b/web/src/components/icons/Skull.tsx
index 78b869654..944080dc4 100644
--- a/web/src/components/icons/Skull.tsx
+++ b/web/src/components/icons/Skull.tsx
@@ -1,9 +1,33 @@
 import { Icon, IconProps } from ".";
+import { AvatarPathProps } from "@/components/avatar/Avatar";
 
-export const Skull = (props: IconProps) => {
+export const Skull = ({
+  hasCrown,
+  color,
+  ...props
+}: IconProps & AvatarPathProps) => {
   return (
-    <Icon viewBox="0 0 24 24" {...props}>
-      <path d="M19.0001 7.99998V6.99987H18.0001V5.99994H17.0002V5H6.99998V5.99994H6.00005V6.99987H5.00011V7.99981L4 7.99998V12.9997H4.99994V14.9995H5.99987V15.9995H6.99981V18.9993H8.99969V16.9994H10.9996V18.9993H12.9994V16.9994H14.9993V18.9993H16.9992V15.9995H17.9991V14.9995H18.9991V12.9997H19.999V9.99985L20 8.99992V7.99998L19.0001 7.99998ZM17.0002 12.9997H15.0003V11.9997H14.0004V9.99986H17.0002V12.9997ZM11.0002 14.9997V12.9998H13.0001V14.9997H11.0002ZM7.00015 11.9997V9.99986H9.99997V11.9997H9.0002V12.9997H7.00015V11.9997Z" />
+    <Icon {...props}>
+      <>
+        <path
+          d="M28.5001 13.5V11.9998H27.0002V10.4999H25.5003V9H10.5V10.4999H9.00007V11.9998H7.50016V13.4997L6 13.5V20.9995H7.49991V23.9993H8.99981V25.4992H10.4997V29.9989H13.4995V26.9991H16.4993V29.9989H19.4992V26.9991H22.499V29.9989H25.4988V25.4992H26.9987V23.9993H28.4986V20.9995H29.9985V16.4998L30 14.9999V13.5L28.5001 13.5ZM25.5003 20.9995H22.5005V19.4996H21.0006V16.4998H25.5003V20.9995ZM16.5004 23.9996V20.9998H19.5002V23.9996H16.5004ZM10.5002 19.4996V16.4998H14.9999V19.4996H13.5003V20.9995H10.5002V19.4996Z"
+          fill={color === "green" ? "#0FD976" : "#FBCB4A"}
+        />
+        {hasCrown && (
+          <>
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M9 3H30.03V15H9V3ZM27.0206 6.0045H24.0232V9.003H21.0137V6.0045H18.0163V9.003H15.0069V6.0045H12.0094V11.9955H27.0206V6.0045Z"
+              fill="#172217"
+            />
+            <path
+              d="M15.0168 5.99854H12.0082V12.0015H27.0274V5.99854H24.0188V8.99704H21.0221V5.99854H18.0135V8.99704H15.0168V5.99854Z"
+              fill={color === "green" ? "#11ED83" : "#FBCB4A"}
+            />
+          </>
+        )}
+      </>
     </Icon>
   );
 };
diff --git a/web/src/pages/[gameId]/end.tsx b/web/src/pages/[gameId]/end.tsx
index 7a2396f57..f7b241b86 100644
--- a/web/src/pages/[gameId]/end.tsx
+++ b/web/src/pages/[gameId]/end.tsx
@@ -117,7 +117,7 @@ export default function End() {
                 <Divider borderColor="neon.600" />
                 <StatsItem
                   text={`${playerEntity?.health} Health`}
-                  icon={isDead ? <Skull /> : <Heart />}
+                  icon={isDead ? <Skull color="green" /> : <Heart />}
                 />
                 {/* 
                 <Divider borderColor="neon.600" />