feat: [#176] Implemented NS characters

annabranco · Mar 4, 2021 · 07ad3d6 · 07ad3d6
2 parents 8e3e100 + bd468a4
commit 07ad3d6
Show file tree

Hide file tree

Showing 16 changed files with 1,012 additions and 541 deletions.
diff --git a/src/components/ActionButton/index.js b/src/components/ActionButton/index.js
@@ -3,6 +3,7 @@ import { bool, func, string } from 'prop-types';
 import { checkForNoiseOpeningDoor, useStateWithLabel } from '../../utils';
 import { SOUNDS } from '../../assets/sounds';
 import {
+  BLITZ_ACTION,
   CANNOT_BE_USED,
   CAR_ATTACK_ACTION,
   CAR_ENTER_ACTION,
@@ -13,6 +14,7 @@ import {
   EXPLOSION_ACTION,
   GIVE_ORDERS_ACTION,
   HEAL_ACTION,
+  HIT_N_RUN_ACTION,
   LEAVE_GAME_ACTION,
   LOCK_ACTION,
   MAKE_NOISE_ACTION,
@@ -118,6 +120,11 @@ const ActionButton = ({
 
   useEffect(() => {
     switch (actionType) {
+      case BLITZ_ACTION:
+        setIconType2('fas fa-skull-crossbones');
+        setIconType('fas fa-running');
+        sound.current = new Audio(SOUNDS[`move-${type}`]);
+        break;
       case CAR_ATTACK_ACTION:
         setIconSize('medium');
         setIconType('fas fa-child');
@@ -158,6 +165,12 @@ const ActionButton = ({
       case HEAL_ACTION:
         setIconType('fas fa-hand-holding-medical');
         break;
+      case HIT_N_RUN_ACTION:
+        setIconType('fas fa-skull-crossbones');
+        setIconType2('fas fa-running');
+        sound.current = new Audio(SOUNDS[`move-${type}`]);
+        break;
+
       case LEAVE_GAME_ACTION:
         setIconType2('fas fa-running');
         setIconType('fas fa-sign-out-alt');

diff --git a/src/components/ActionButton/styles.js b/src/components/ActionButton/styles.js
@@ -1,6 +1,7 @@
 import styled from '@emotion/styled';
 import { css } from '@emotion/core';
 import {
+  BLITZ_ACTION,
   CAR_ATTACK_ACTION,
   CAR_ENTER_ACTION,
   CAR_EXIT_ACTION,
@@ -9,6 +10,7 @@ import {
   END_TURN_ACTION,
   EXPLOSION_ACTION,
   GIVE_ORDERS_ACTION,
+  HIT_N_RUN_ACTION,
   LEAVE_GAME_ACTION,
   MOVE_ACTION,
   OBJECTIVE_ACTION,
@@ -342,6 +344,19 @@ export const PrimaryIcon = styled.i`
         transform: rotateY(180deg);
       `;
     }
+    if (actionType === BLITZ_ACTION) {
+      return css`
+        font-size: 1.5rem;
+        color: gray;
+      `;
+    }
+    if (actionType === HIT_N_RUN_ACTION) {
+      return css`
+        font-size: 2.2rem;
+        margin-left: -2px;
+        transform: rotateY(180deg);
+      `;
+    }
     return null;
   }}
 
@@ -396,6 +411,18 @@ export const SecondaryIcon = styled.i`
         margin-left: -2px;
       `;
     }
+    if (actionType === BLITZ_ACTION) {
+      return css`
+        font-size: 2.2rem;
+        margin-left: -2px;
+      `;
+    }
+    if (actionType === HIT_N_RUN_ACTION) {
+      return css`
+        font-size: 1.3rem;
+        color: maroon;
+      `;
+    }
     return null;
   }}
 

diff --git a/src/components/Fog/index.js b/src/components/Fog/index.js
@@ -16,7 +16,7 @@ const FogEffect = ({ inChar }) => {
   const canvasHeight = 200;
   const pCollection = [];
   const puffs = 1;
-  const particlesPerPuff = 1000;
+  const particlesPerPuff = 500;
   const smokeImage = new Image();
   let pCount = 0;
 

diff --git a/src/components/Items/ItemsArea/index.js b/src/components/Items/ItemsArea/index.js
@@ -10,7 +10,7 @@ import {
 import SoundBlock from '../../SoundBlock';
 import ActionButton from '../../ActionButton';
 import ZombieFace from '../../../assets/images/zombieFace.png';
-import { BonusDicesType } from '../../../interfaces/types';
+import { BonusDiceType } from '../../../interfaces/types';
 import { AppButton } from '../../Sections/PlayersSection/styles';
 import {
   DROP,
@@ -43,10 +43,9 @@ import {
 } from './styles';
 
 const ItemsArea = ({
-  actionsLeft,
   activateDualEffect,
   allSlotsAreEmpty,
-  bonusDices,
+  bonusDice,
   canAttack,
   canBeDeflected,
   canCombine,
@@ -102,16 +101,16 @@ const ItemsArea = ({
     if (ALL_WEAPONS[item].dice === SPECIAL) {
       gainCustomXp(BURNEM_ALL);
     } else {
-      const totalDices = calculateTotalDices();
+      const totalDice = calculateTotalDice();
       const currentPool = killButtons.length;
-      const newArray = [...Array(totalDices).keys()].map(
+      const newArray = [...Array(totalDice).keys()].map(
         value => value + currentPool
       );
 
       toggleFiredDual(true);
 
       if (dualWeaponEffect) {
-        activateDualEffect(totalDices);
+        activateDualEffect(totalDice);
       }
 
       clearTimeout(killButtonsTimer.current);
@@ -126,20 +125,20 @@ const ItemsArea = ({
     }
   };
 
-  const calculateTotalDices = () => {
-    const { combat, melee, ranged } = bonusDices;
-    let totalDices;
+  const calculateTotalDice = () => {
+    const { combat, melee, ranged } = bonusDice;
+    let totalDice;
 
-    totalDices = dice + combat;
+    totalDice = dice + combat;
 
     if (ALL_WEAPONS[item].attack === MELEE) {
-      totalDices += melee;
+      totalDice += melee;
     } else if (ALL_WEAPONS[item].attack === RANGED) {
-      totalDices += ranged;
+      totalDice += ranged;
     } else if (ALL_WEAPONS[item].attack === MELEE_RANGED) {
-      totalDices = totalDices + ranged + melee;
+      totalDice = totalDice + ranged + melee;
     }
-    return totalDices;
+    return totalDice;
   };
   const checkIfReloadIsNeeded = () =>
     ALL_WEAPONS[item] && ALL_WEAPONS[item].needsReloading;
@@ -247,11 +246,17 @@ const ItemsArea = ({
   }, [forcedKillButtons]);
 
   useEffect(() => {
+    clearTimeout(killButtonsTimer.current);
+    clearTimeout(dualTimer.current);
+    toggleFiredDual();
+    changeKillButtons([]);
     return () => {
       clearTimeout(killButtonsTimer.current);
       clearTimeout(dualTimer.current);
+      toggleFiredDual();
+      changeKillButtons([]);
     };
-  }, []);
+  }, [changeKillButtons, charName, item, toggleFiredDual]);
 
   return (
     <ItemWrapper
@@ -272,6 +277,7 @@ const ItemsArea = ({
             canBeDeflected={canBeDeflected}
             canCombine={canCombine && canCombine.includes(item)}
             charCanDeflect={charCanDeflect}
+            charName={charName}
             combineItemSelected={combineItemSelected}
             combinePair={combinePair}
             damageMode={damageMode}
@@ -365,10 +371,9 @@ const ItemsArea = ({
 };
 
 ItemsArea.propTypes = {
-  actionsLeft: number,
   activateDualEffect: func,
   allSlotsAreEmpty: bool,
-  bonusDices: BonusDicesType,
+  bonusDice: BonusDiceType,
   canAttack: bool,
   canBeDeflected: bool,
   canCombine: oneOfType([arrayOf(string), bool]),
@@ -407,10 +412,9 @@ ItemsArea.propTypes = {
 };
 
 ItemsArea.defaultProps = {
-  actionsLeft: null,
   activateDualEffect: () => null,
   allSlotsAreEmpty: false,
-  bonusDices: null,
+  bonusDice: null,
   canAttack: false,
   canBeDeflected: false,
   canCombine: null,