feat: [#304] Refactored XpBar component

annabranco · Apr 8, 2021 · c571b18 · c571b18
1 parent 51bca3c
commit c571b18
Show file tree

Hide file tree

Showing 16 changed files with 415 additions and 207 deletions.
diff --git a/src/components/Sections/PlayersSection/CharacterSheet/index.js b/src/components/Sections/PlayersSection/CharacterSheet/index.js
diff --git a/src/components/Sections/PlayersSection/index.js b/src/components/Sections/PlayersSection/index.js
@@ -201,7 +201,6 @@ import {
   ExtraActivationImage,
   FirstPlayerToken,
   FirstPlayerWrapper,
-  HighestXpTag,
   IndicatorsWrapper,
   LevelIndicator,
   MainButton,
@@ -219,9 +218,10 @@ import {
   SelectButton,
   TopActionsLabelWrapper,
   WoundedSign,
-  WoundedWrapper,
-  XpIcon
+  WoundedWrapper
 } from './styles';
+import XpBar from '../../elements/XpBar';
+import MovementsBar from '../../elements/MovementsBar';
 
 const PlayersSection = ({
   damageMode,
@@ -1811,61 +1811,27 @@ const PlayersSection = ({
       {character.name && (
         <>
           {/* ----- XP BAR ----- */}
-          {!trade && character.wounded !== KILLED && !objectivesAchieved && (
-            <IndicatorsWrapper header>
-              {xpCounter &&
-                xpCounter.map((level, index) => (
-                  <XpIcon
-                    activeColor={
-                      (level <= character.experience ||
-                        xpCounter[index - 1] < character.experience) &&
-                      getXpColor(level, xpCounter[index - 1], true)
-                    }
-                    color={getXpColor(level, xpCounter[index - 1])}
-                    currentXp={character.experience === level}
-                    device={device.current}
-                    highestXp={highestXp.xp === level}
-                    key={`xp-${level}-${xpCounter[index - 1]}`}
-                    onClick={
-                      setupMode
-                        ? () =>
-                            setCustomXp(
-                              level,
-                              xpCounter[index - 1],
-                              xpCounter[index + 1]
-                            )
-                        : () => null
-                    }
-                    setupMode={setupMode}
-                    size={xpCounter.length}
-                    type={level}
-                  >
-                    {level}
-                    {highestXp.xp === level &&
-                      highestXp.name !== character.name && (
-                        <HighestXpTag xp={highestXp.xp}>
-                          {highestXp.name}
-                        </HighestXpTag>
-                      )}
-                  </XpIcon>
-                ))}
-            </IndicatorsWrapper>
-          )}
+          <XpBar
+            currentXp={character.xp}
+            charIsAlive={character.wounded !== KILLED}
+            device={device.current}
+            gameHasEnded={gameOver}
+            setupMode={setupMode}
+            xpCounter={xpCounter}
+            tradeModeActive={trade}
+            setCustomXp={setCustomXp}
+            highestXp={highestXp}
+            characterName={character.name}
+          />
 
           {/* ----- MOVEMENTS BAR ----- */}
-          {!trade && character.wounded !== KILLED && !objectivesAchieved && (
-            <IndicatorsWrapper>
-              {actionsCount.map((action, index) => (
-                <MovementIcon
-                  color={getActionColor(action)}
-                  key={`${action}-${index}`} // eslint-disable-line react/no-array-index-key
-                  type={action}
-                >
-                  {action}
-                </MovementIcon>
-              ))}
-            </IndicatorsWrapper>
-          )}
+          <MovementsBar
+            actionsCount={actionsCount}
+            charIsAlive={character.wounded !== KILLED}
+            gameHasEnded={gameOver}
+            setupMode={setupMode}
+            tradeModeActive={trade}
+          />
 
           {/* ----- MAIN SECTION ----- */}
           {trade ? (

diff --git a/src/components/Sections/PlayersSection/styles.js b/src/components/Sections/PlayersSection/styles.js
@@ -1126,35 +1126,6 @@ export const FirstPlayerWrapper = styled.div`
 `;
 FirstPlayerWrapper.displayName = 'FirstPlayerWrapper';
 
-export const HighestXpTag = styled.span`
-  label: HighestXpTag;
-  z-index: 15;
-  position: absolute;
-  top: 10px;
-  left: 50%;
-  transform: translate(-50%, 0);
-  font-family: ${TEXT_FONT};
-  text-transform: uppercase;
-  font-size: 0.5rem;
-  color: black;
-  font-weight: 900;
-  user-select: none;
-
-  @media all and (min-width: 701px) {
-    top: 20px;
-    font-size: 0.7rem;
-    color: white;
-
-    ${({ xp }) =>
-      xp <= 4 &&
-      css`
-        font-size: 0.5rem;
-        top: -8px;
-      `}
-  }
-`;
-HighestXpTag.displayName = 'HighestXpTag';
-
 export const IndicatorsWrapper = styled.div`
   label: IndicatorsWrapper;
   z-index: 10;
@@ -1372,49 +1343,6 @@ export const ModalSignText = styled.p`
 `;
 ModalSignText.displayName = 'ModalSignText';
 
-export const MovementIcon = styled.div`
-  label: MovementIcon;
-  position: relative;
-  left: 0.75em;
-  width: ${({ type }) => (typeof type === 'number' ? '20px' : '70px')};
-  height: 14px;
-  text-align: center;
-  background: ${({ color }) => color};
-  color: ${({ type }) => (typeof type === 'number' ? 'white' : 'black')};
-  font-weight: 700;
-  line-height: 1.3;
-  letter-spacing: 0.001rem;
-  font-size: 0.8rem;
-  font-family: ${TITLE_FONT};
-  text-transform: uppercase;
-
-  &:not(:first-of-type) {
-    margin-left: 15px;
-  }
-
-  &:after {
-    content: '';
-    position: absolute;
-    left: 100%;
-    width: 10px;
-    height: 14px;
-    clip-path: polygon(50% 50%, -50% -50%, 0 100%);
-    background: ${({ color }) => color};
-  }
-  &:before {
-    content: '';
-    position: absolute;
-    left: 1px;
-    top: 0;
-    width: 10px;
-    height: 14px;
-    clip-path: polygon(100% 0, 100% 100%, 0% 100%, 50% 50%, 0% 0%);
-    transform: translateX(-100%);
-    background: ${({ color }) => color};
-  }
-`;
-MovementIcon.displayName = 'MovementIcon';
-
 export const NavIcons = styled.img`
   label: NavIcons;
   z-index: 15;
@@ -1772,80 +1700,3 @@ export const WoundedWrapper = styled.div`
   overflow: hidden;
 `;
 WoundedWrapper.displayName = 'WoundedWrapper';
-
-export const XpIcon = styled(MovementIcon)`
-  label: XpIcon;
-  width: 25px;
-  left: 0;
-  user-select: none;
-  /* color: black; */
-  color: black;
-  font-size: ${({ currentXp, device, highestXp }) => {
-    if (device === MOBILE) {
-      if (currentXp) {
-        return '1.1rem';
-      }
-      if (highestXp) {
-        return '0.6rem';
-      }
-    } else if (currentXp || highestXp) {
-      return '1.1rem';
-    }
-    return null;
-  }};
-  line-height: ${({ currentXp, highestXp }) =>
-    currentXp || highestXp ? '1' : '1.2'};
-
-  background: ${({ activeColor }) => activeColor && activeColor};
-  opacity: ${({ activeColor }) => activeColor && 1};
-  height: ${({ currentXp, highestXp }) =>
-    currentXp || highestXp ? '18px' : '14px'};
-  width: ${({ currentXp, highestXp, size }) =>
-    currentXp || highestXp
-      ? `calc(100% / ${size} + 10px) `
-      : `calc(100% / ${size} )`};
-
-  &:not(:first-of-type) {
-    margin-left: 8px;
-  }
-
-  &:after {
-    content: '';
-    position: absolute;
-    left: 100%;
-    width: 6px;
-    height: ${({ currentXp, highestXp }) =>
-      currentXp || highestXp ? '18px' : '14px'};
-    clip-path: polygon(50% 50%, -50% -50%, 0 100%);
-    background: ${({ activeColor }) => activeColor && activeColor};
-  }
-  &:before {
-    content: '';
-    position: absolute;
-    /* left: 10px; */
-    top: 0;
-    width: 6px;
-    height: ${({ currentXp, highestXp }) =>
-      currentXp || highestXp ? '18px' : '14px'};
-    clip-path: polygon(100% 0, 100% 100%, 0% 100%, 50% 50%, 0% 0%);
-    transform: translateX(-100%);
-    background: ${({ activeColor }) => activeColor && activeColor};
-  }
-
-  &:first-of-type:before {
-    clip-path: none;
-  }
-  &:last-of-type:after {
-    clip-path: none;
-  }
-
-  ${({ setupMode }) =>
-    setupMode &&
-    css`
-      cursor: pointer;
-    `}
-
-  @media all and (min-width: 701px) {
-  }
-`;
-XpIcon.displayName = 'XPIcon';
diff --git a/src/components/elements/AbilitiesArea/index.js b/src/components/elements/AbilitiesArea/index.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import { string, func, bool, oneOfType } from 'prop-types';
+
+const CharacterFace = ({ big }) => {
+  return <CharacterFaceWrapper big={big}>...</CharacterFaceWrapper>;
+};
+
+CharacterFace.propTypes = {
+  big: bool
+};
+
+CharacterFace.defaultProps = {
+  big: false
+};
+
+export default CharacterFace;
diff --git a/src/components/elements/ActionsArea/index.js b/src/components/elements/ActionsArea/index.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import { string, func, bool, oneOfType } from 'prop-types';
+
+const CharacterFace = ({ big }) => {
+  return <CharacterFaceWrapper big={big}>...</CharacterFaceWrapper>;
+};
+
+CharacterFace.propTypes = {
+  big: bool
+};
+
+CharacterFace.defaultProps = {
+  big: false
+};
+
+export default CharacterFace;
diff --git a/src/components/elements/CharId/index.js b/src/components/elements/CharId/index.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import { string, func, bool, oneOfType } from 'prop-types';
+
+const CharacterFace = ({ big }) => {
+  return <CharacterFaceWrapper big={big}>...</CharacterFaceWrapper>;
+};
+
+CharacterFace.propTypes = {
+  big: bool
+};
+
+CharacterFace.defaultProps = {
+  big: false
+};
+
+export default CharacterFace;
diff --git a/src/components/elements/CharItems/index.js b/src/components/elements/CharItems/index.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import { string, func, bool, oneOfType } from 'prop-types';
+
+const CharacterFace = ({ big }) => {
+  return <CharacterFaceWrapper big={big}>...</CharacterFaceWrapper>;
+};
+
+CharacterFace.propTypes = {
+  big: bool
+};
+
+CharacterFace.defaultProps = {
+  big: false
+};
+
+export default CharacterFace;
diff --git a/src/components/elements/Indicators/index.js b/src/components/elements/Indicators/index.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import { string, func, bool, oneOfType } from 'prop-types';
+
+const CharacterFace = ({ big }) => {
+  return <CharacterFaceWrapper big={big}>...</CharacterFaceWrapper>;
+};
+
+CharacterFace.propTypes = {
+  big: bool
+};
+
+CharacterFace.defaultProps = {
+  big: false
+};
+
+export default CharacterFace;
diff --git a/src/components/elements/Items/ItemsArea/index.js b/src/components/elements/Items/ItemsArea/index.js
@@ -7,8 +7,8 @@ import {
   logger,
   useStateWithLabel
 } from '../../../../utils';
-import ActionButton from '../../../elements/ActionButton';
-import SoundBlock from '../../../elements/SoundBlock';
+import ActionButton from '../../ActionButton';
+import SoundBlock from '../../SoundBlock';
 import ZombieFace from '../../../../assets/images/zombieFace.png';
 import {
   DROP,