From f9d46c9b8f068086fd4697dc3a2867bceb6d5ec3 Mon Sep 17 00:00:00 2001
From: Alex Zinkevych <alexdarkmm@gmail.com>
Date: Sun, 14 Jan 2024 17:46:58 +0200
Subject: [PATCH] feat: traits on the champion avatars + minor restyling

---
 src/assets/icons/hexes/default.svg            |  4 +++
 src/assets/styles/_theme.scss                 |  2 +-
 .../ChampionAvatar/ChampionAvatar.module.scss | 10 +++++++
 .../dumb/ChampionAvatar/ChampionAvatar.tsx    | 13 ++++++++--
 .../dumb/ChampionSplash/ChampionSplash.tsx    |  2 +-
 .../dumb/TraitHex/TraitHex.module.scss        |  9 ++++++-
 src/components/dumb/TraitHex/TraitHex.tsx     |  7 +++--
 .../dumb/TraitStats/TraitStats.module.scss    |  5 ++++
 src/components/dumb/TraitStats/TraitStats.tsx |  3 ++-
 .../dumb/TraitTitle/TraitTitle.module.scss    | 14 ++++++++++
 src/components/dumb/TraitTitle/TraitTitle.tsx | 26 +++++++++++++++++++
 src/components/dumb/TraitTitle/index.ts       |  1 +
 src/components/smart/Shop/Shop.module.scss    |  6 ++---
 13 files changed, 90 insertions(+), 12 deletions(-)
 create mode 100644 src/assets/icons/hexes/default.svg
 create mode 100644 src/components/dumb/TraitTitle/TraitTitle.module.scss
 create mode 100644 src/components/dumb/TraitTitle/TraitTitle.tsx
 create mode 100644 src/components/dumb/TraitTitle/index.ts

diff --git a/src/assets/icons/hexes/default.svg b/src/assets/icons/hexes/default.svg
new file mode 100644
index 0000000..05d0b99
--- /dev/null
+++ b/src/assets/icons/hexes/default.svg
@@ -0,0 +1,4 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 0L2 9.5912V26.4088L18 36L34 26.4088V9.5912L18 0Z" fill="black"/>
+<path d="M3.65 25.5748V10.4252L18 1.75933L32.35 10.4252V25.5748L18 34.2407L3.65 25.5748Z" fill="#424242" stroke="#000000" stroke-width="0.5"/>
+</svg>
diff --git a/src/assets/styles/_theme.scss b/src/assets/styles/_theme.scss
index b830a03..c08bbd1 100644
--- a/src/assets/styles/_theme.scss
+++ b/src/assets/styles/_theme.scss
@@ -1,7 +1,7 @@
 @use 'sass:color';
 
 $colorsByTier: (
-  1: #9e9e9e,
+  1: #455a64,
   2: #4caf50,
   3: #2196f3,
   4: #9c27b0,
diff --git a/src/components/dumb/ChampionAvatar/ChampionAvatar.module.scss b/src/components/dumb/ChampionAvatar/ChampionAvatar.module.scss
index 38fdb97..367e066 100644
--- a/src/components/dumb/ChampionAvatar/ChampionAvatar.module.scss
+++ b/src/components/dumb/ChampionAvatar/ChampionAvatar.module.scss
@@ -23,6 +23,16 @@
 .championSplash {
   width: 100%;
   flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: end;
+  overflow: hidden;
+  gap: 5%;
+  padding: 2%;
+}
+
+.traitTitle {
+  height: 25%;
 }
 
 .footer {
diff --git a/src/components/dumb/ChampionAvatar/ChampionAvatar.tsx b/src/components/dumb/ChampionAvatar/ChampionAvatar.tsx
index 7f78fb3..e0c2b26 100644
--- a/src/components/dumb/ChampionAvatar/ChampionAvatar.tsx
+++ b/src/components/dumb/ChampionAvatar/ChampionAvatar.tsx
@@ -7,6 +7,7 @@ import { DndItemChampion, DndItemType } from '@src/state';
 import { ReactComponent as IconCoin } from '@src/assets/icons/common/coin.svg';
 
 import { ChampionSplash } from '../ChampionSplash';
+import { TraitTitle } from '../TraitTitle';
 
 import styles from './ChampionAvatar.module.scss';
 
@@ -18,7 +19,7 @@ export type ChampionAvatarProps = {
 };
 
 const ChampionAvatarBase: React.FC<ChampionAvatarProps> = (props) => {
-  const { tier } = CHAMPIONS_MAP[props.name];
+  const { classTraits, originTraits, tier } = CHAMPIONS_MAP[props.name];
 
   const [{ isDragging }, dragRef] = useDrag<
     DndItemChampion,
@@ -53,7 +54,15 @@ const ChampionAvatarBase: React.FC<ChampionAvatarProps> = (props) => {
       ref={dragRef}
       onClick={handleClick}
     >
-      <ChampionSplash className={styles.championSplash} name={props.name} />
+      <ChampionSplash className={styles.championSplash} name={props.name}>
+        {originTraits.map((trait) => (
+          <TraitTitle className={styles.traitTitle} key={trait} trait={trait} />
+        ))}
+        {classTraits.map((trait) => (
+          <TraitTitle className={styles.traitTitle} key={trait} trait={trait} />
+        ))}
+      </ChampionSplash>
+
       <div className={styles.footer}>
         <div className={styles.name}>{props.name}</div>
         <div className={styles.cost}>
diff --git a/src/components/dumb/ChampionSplash/ChampionSplash.tsx b/src/components/dumb/ChampionSplash/ChampionSplash.tsx
index 3302c14..26ad186 100644
--- a/src/components/dumb/ChampionSplash/ChampionSplash.tsx
+++ b/src/components/dumb/ChampionSplash/ChampionSplash.tsx
@@ -19,7 +19,7 @@ const ChampionSplashBase: React.FC<ChampionSplashProps> = (props) => {
         backgroundImage: `url("https://cdn.lolchess.gg/images/lol/champion-splash-modified/${championUrlName}.jpg")`,
       }}
       {...restProps}
-    ></div>
+    />
   );
 };
 
diff --git a/src/components/dumb/TraitHex/TraitHex.module.scss b/src/components/dumb/TraitHex/TraitHex.module.scss
index bd09c80..d00a197 100644
--- a/src/components/dumb/TraitHex/TraitHex.module.scss
+++ b/src/components/dumb/TraitHex/TraitHex.module.scss
@@ -16,9 +16,16 @@
 }
 
 .childrenWrapper {
+  width: 100%;
+  height: 100%;
   position: relative;
-  padding: 6px;
+  padding: 15%;
   display: flex;
   justify-content: center;
   align-items: center;
+
+  & > * {
+    width: 100%;
+    height: 100%;
+  }
 }
diff --git a/src/components/dumb/TraitHex/TraitHex.tsx b/src/components/dumb/TraitHex/TraitHex.tsx
index 2c6578c..bc784e0 100644
--- a/src/components/dumb/TraitHex/TraitHex.tsx
+++ b/src/components/dumb/TraitHex/TraitHex.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import clsx from 'clsx';
 
+import { ReactComponent as Default } from '@src/assets/icons/hexes/default.svg';
 import { ReactComponent as Disabled } from '@src/assets/icons/hexes/disabled.svg';
 import { ReactComponent as Bronze } from '@src/assets/icons/hexes/bronze.svg';
 import { ReactComponent as Silver } from '@src/assets/icons/hexes/silver.svg';
@@ -10,6 +11,7 @@ import { ReactComponent as Chromatic } from '@src/assets/icons/hexes/chromatic.s
 import styles from './TraitHex.module.scss';
 
 export enum TraitHexType {
+  Default = 'Default',
   Disabled = 'Disabled',
   Bronze = 'Bronze',
   Silver = 'Silver',
@@ -18,6 +20,7 @@ export enum TraitHexType {
 }
 
 const HEX_ICON = {
+  [TraitHexType.Default]: Default,
   [TraitHexType.Disabled]: Disabled,
   [TraitHexType.Bronze]: Bronze,
   [TraitHexType.Silver]: Silver,
@@ -28,11 +31,11 @@ const HEX_ICON = {
 export type TraitHexProps = {
   className?: string;
   children?: React.ReactNode;
-  hexType: TraitHexType;
+  hexType?: TraitHexType;
 };
 
 const TraitHexBase: React.FC<TraitHexProps> = (props) => {
-  const Icon = HEX_ICON[props.hexType];
+  const Icon = HEX_ICON[props.hexType || TraitHexType.Default];
   return (
     <div className={clsx(styles.rootTraitHex, props.className)}>
       <div className={styles.iconWrapper}>
diff --git a/src/components/dumb/TraitStats/TraitStats.module.scss b/src/components/dumb/TraitStats/TraitStats.module.scss
index b71f550..505c87b 100644
--- a/src/components/dumb/TraitStats/TraitStats.module.scss
+++ b/src/components/dumb/TraitStats/TraitStats.module.scss
@@ -17,6 +17,10 @@
   }
 }
 
+.traitHex {
+  max-width: 20%;
+}
+
 .traitIcon {
   .activated & {
     color: #000;
@@ -35,6 +39,7 @@
 }
 
 .activationsWrapper {
+  flex: 1;
 }
 
 .traitName {
diff --git a/src/components/dumb/TraitStats/TraitStats.tsx b/src/components/dumb/TraitStats/TraitStats.tsx
index c928a74..ba41ad9 100644
--- a/src/components/dumb/TraitStats/TraitStats.tsx
+++ b/src/components/dumb/TraitStats/TraitStats.tsx
@@ -26,11 +26,12 @@ const TraitStatsBase: React.FC<TraitStatsProps> = (props) => {
         props.className,
       )}
     >
-      <TraitHex hexType={hexType}>
+      <TraitHex className={styles.traitHex} hexType={hexType}>
         <TraitIcon className={styles.traitIcon} trait={props.trait} />
       </TraitHex>
 
       <div className={styles.amount}>{props.champions.length}</div>
+
       <div className={styles.activationsWrapper}>
         <div className={styles.traitName}>{props.trait}</div>
         {activated ? (
diff --git a/src/components/dumb/TraitTitle/TraitTitle.module.scss b/src/components/dumb/TraitTitle/TraitTitle.module.scss
new file mode 100644
index 0000000..6cbfbae
--- /dev/null
+++ b/src/components/dumb/TraitTitle/TraitTitle.module.scss
@@ -0,0 +1,14 @@
+@use 'src/assets/styles/theme';
+
+.rootTraitTitle {
+  display: flex;
+  align-items: center;
+  gap: 3%;
+  color: theme.$colorTextMain;
+  text-shadow: 0.1em 0.1em 0.2em #000, 0.1em -0.1em 0.2em #000,
+    -0.1em 0.1em 0.2em #000, -0.1em -0.1em 0.2em #000;
+}
+
+.traitHex {
+  height: 100%;
+}
diff --git a/src/components/dumb/TraitTitle/TraitTitle.tsx b/src/components/dumb/TraitTitle/TraitTitle.tsx
new file mode 100644
index 0000000..a9fe4fb
--- /dev/null
+++ b/src/components/dumb/TraitTitle/TraitTitle.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import clsx from 'clsx';
+
+import { TraitIcon } from '@src/components/dumb/TraitIcon';
+import { TraitHex } from '@src/components/dumb/TraitHex';
+
+import styles from './TraitTitle.module.scss';
+
+export type TraitTitleProps = {
+  className?: string;
+  trait: string;
+};
+
+const TraitTitleBase: React.FC<TraitTitleProps> = (props) => {
+  return (
+    <div className={clsx(styles.rootTraitTitle, props.className)}>
+      <TraitHex className={styles.traitHex}>
+        <TraitIcon trait={props.trait} />
+      </TraitHex>
+
+      <span className={styles.traitName}>{props.trait}</span>
+    </div>
+  );
+};
+
+export const TraitTitle = React.memo(TraitTitleBase);
diff --git a/src/components/dumb/TraitTitle/index.ts b/src/components/dumb/TraitTitle/index.ts
new file mode 100644
index 0000000..998fda9
--- /dev/null
+++ b/src/components/dumb/TraitTitle/index.ts
@@ -0,0 +1 @@
+export * from './TraitTitle';
diff --git a/src/components/smart/Shop/Shop.module.scss b/src/components/smart/Shop/Shop.module.scss
index e67c25d..4e74b6c 100644
--- a/src/components/smart/Shop/Shop.module.scss
+++ b/src/components/smart/Shop/Shop.module.scss
@@ -4,17 +4,15 @@
   left: 13%;
   height: 20%;
   width: 65%;
-  display: flex;
-  flex-direction: column;
 }
 
 .topBar {
-  flex: 1;
+  height: 25%;
   display: flex;
 }
 
 .bottomBar {
-  flex: 3;
+  height: 75%;
   display: flex;
 }