feat: Removed cartridge avatar & Added crown to Skull icon (#201)

* 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 <[email protected]>
cartridge-gg · Oct 6, 2023 · d29aabb · d29aabb · vercel · Oct 6, 2023
1 parent dead1cb
commit d29aabb
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 148 deletions.
diff --git 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
diff --git 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
@@ -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
@@ -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" />