Merge branch 'hotfix/242_iphone_issues' into develop

src/components/ActionButton/index.js

@@ -163,8 +163,6 @@ const ActionButton = ({
         setIconType('fas fa-sign-out-alt');
         sound.current = new Audio(SOUNDS[`${actionType}-${type}`]);
         sound2.current = new Audio(SOUNDS[type2]);
-        console.log('$$$ sound.current', sound.current);
-        console.log('$$$ ${actionType}-${type}', `${actionType}-${type}`);
         break;
 
       case LOCK_ACTION:
@@ -265,6 +263,10 @@ const ActionButton = ({
             changeActionLabel(`${disabled ? CANNOT_BE_USED : label}`)
           }
           manyButtons={isMobile && manyButtons}
+          special={
+            (isMobile && actionType === EXPLOSION_ACTION) ||
+            actionType === END_TURN_ACTION
+          }
           type={type}
         />
       )}

src/components/ActionButton/styles.js

@@ -7,6 +7,7 @@ import {
   CAR_MOVE_ACTION,
   COMBINE_ACTION,
   END_TURN_ACTION,
+  EXPLOSION_ACTION,
   GIVE_ORDERS_ACTION,
   LEAVE_GAME_ACTION,
   MOVE_ACTION,
@@ -126,20 +127,21 @@ export const ActionIcon = styled.i`
         display: none;
         background: none;
         position: absolute;
-        top: 80px;
+        top: 5vh;
         left: 50%;
         transform: translate(-50%, 0);
         width: auto;
         padding: 0;
         line-height: 0.9;
         border: none;
-        font-size: 7rem;
+        font-size: 5rem;
         color: rgba(255, 255, 255, 0.85);
         -webkit-text-stroke: 1px black;
         border: 0;
         box-shadow: none;
       `;
     }
+
     return null;
   }}
 
@@ -206,6 +208,25 @@ export const ActionIcon = styled.i`
       }
     `}
 
+  ${({ special, actionType, manyButtons }) => {
+    if (special) {
+      if (actionType === EXPLOSION_ACTION) {
+        return css`
+          position: absolute;
+          left: 0;
+          opacity: 0.65;
+        `;
+      }
+      if (actionType === END_TURN_ACTION && manyButtons) {
+        return css`
+          position: absolute;
+          right: 15vw;
+          line-height: 1.3;
+        `;
+      }
+    }
+    return null;
+  }}
 
   @media (min-width: 1024px) and (min-height: 1300px) {
     height: 60px;

src/components/App/index.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect } from 'react';
 import { HashRouter, Switch, Route } from 'react-router-dom';
 import { Global } from '@emotion/core';
 import { cloneDeep } from 'lodash';
@@ -9,8 +9,6 @@ import MainScreen from '../MainScreen';
 import ControllerLayer from '../ControllerLayer';
 import ErrorBoundary from '../ErrorBoundary';
 import ErrorComponent from '../ErrorBoundary/ErrorComponent';
-import Intro from '../../assets/sounds/music/TheHorrorShowShort.mp3';
-import IntroEnd from '../../assets/sounds/intro/ding.mp3';
 import {
   CLEAR_LS,
   ERROR_TEXTS_404,
@@ -39,32 +37,6 @@ const App = () => {
   const [loadedGame, loadGame] = useStateWithLabel(null, 'loadedGame');
   const [context, updateContext] = useStateWithLabel({}, 'context');
 
-  const intro = useRef(new Audio(Intro));
-  const introEnd = useRef(new Audio(IntroEnd));
-
-  const playIntro = () => {
-    intro.current.currentTime = 0;
-    intro.current.volume = 0.4;
-    intro.current.loop = true;
-    intro.current.play();
-  };
-
-  const stopIntro = () => {
-    const fadeInterval = setInterval(() => {
-      if (intro.current.volume < 0.1) {
-        clearInterval(fadeInterval);
-        intro.current.pause();
-      } else if (intro.current.volume > 0) {
-        intro.current.volume -= 0.05;
-      }
-    }, 500);
-    setTimeout(() => {
-      introEnd.current.currentTime = 0;
-      introEnd.current.volume = 0.2;
-      introEnd.current.play();
-    }, 3500);
-  };
-
   useEffect(() => {
     const game = loadSavedGame();
     const rules = JSON.parse(localStorage.getItem(LOCAL_STORAGE_CONFIG_KEY));
@@ -86,7 +58,6 @@ const App = () => {
       localStorage.removeItem(LOCAL_STORAGE_KEY);
     }
     window.gameDebug = 'extended';
-    return () => stopIntro();
   }, [loadGame, updateContext]);
 
   return (
@@ -112,7 +83,6 @@ const App = () => {
               render={() => (
                 <NewGame
                   loadedGame={Boolean(loadedGame)}
-                  playIntro={playIntro}
                   setInitialCharacters={setInitialCharacters}
                 />
               )}
@@ -126,7 +96,6 @@ const App = () => {
                   initialCharacters={initialCharacters}
                   loadGame={loadGame}
                   loadedGame={loadedGame}
-                  stopIntro={stopIntro}
                   toggleDamageMode={toggleDamageMode}
                 />
               )}

src/components/EndGame/styles.js

@@ -152,7 +152,7 @@ export const EndingCharacterImage = styled.img`
   animation-fill-mode: forwards;
   opacity: 0;
   animation-name: ${ComeIn};
-  margin: 0 -45px;
+  margin: 0 -7px;
   max-width: 300px;
 
   ${({ number }) =>
@@ -190,20 +190,28 @@ export const EndingCharacterImage = styled.img`
   &:nth-of-type(10) {
     animation-delay: 21s;
   }
+
+  @media all and (min-width: 701px) {
+    margin: 0 -45px;
+  }
 `;
 EndingCharacterImage.displayName = 'EndingCharacterImage';
 
 export const EndingCharacters = styled.div`
   label: EndingCharacters;
   z-index: 14;
   position: absolute;
-  top: 50%;
+  top: 10%;
   transform: translate(0, -50%);
   width: 90%;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
+
+  @media all and (min-width: 701px) {
+    top: 50%;
+  }
 `;
 EndingCharacters.displayName = 'EndingCharacters';
 

src/components/Items/ItemsArea/index.js

@@ -288,6 +288,7 @@ const ItemsArea = ({
             setupMode={setupMode}
             slot={getSlotNumber(index)}
             slotType={slotType}
+            specificSound={ALL_WEAPONS[item].sound}
             spendAmmo={spendAmmo}
             trade={trade}
             type={itemsType}

src/components/MainMenu/index.js

@@ -3,7 +3,7 @@ import { func, arrayOf } from 'prop-types';
 import appInfo from '../../../package.json';
 import { AppContext } from '../../setup/rules';
 import { ZOMBIES_S1 } from '../../setup/zombies';
-import { logger, useStateWithLabel } from '../../utils';
+import { getMediaQuery, logger, useStateWithLabel } from '../../utils';
 import NightShiftIntro from './NighShift';
 import FogEffect from '../Fog';
 import { SOUNDS } from '../../assets/sounds';
@@ -13,6 +13,7 @@ import Logo from '../../assets/images/logo.png';
 import {
   CLICK_SOUND_TEST,
   CONTINUE,
+  DESKTOP,
   INTRO_IMG_LOADED,
   INTRO_NS_LOADED,
   LOG_TYPE_EXTENDED,
@@ -115,9 +116,11 @@ const MainMenu = ({ loadedGame, setInitialCharacters }) => {
         )}
       </ButtonsArea>
 
-      <TestButton onClick={() => toggleTestSound(!testSound)}>
-        {testSound ? STOP_SOUND : TEST_SOUND}
-      </TestButton>
+      {getMediaQuery() === DESKTOP && (
+        <TestButton onClick={() => toggleTestSound(!testSound)}>
+          {testSound ? STOP_SOUND : TEST_SOUND}
+        </TestButton>
+      )}
       <Version>{APP_VERSION}</Version>
     </MenuScreen>
   );

src/components/MainScreen/index.js

@@ -20,7 +20,6 @@ const MainScreen = ({
   initialCharacters,
   loadGame,
   loadedGame,
-  stopIntro,
   toggleDamageMode
 }) => {
   const [rounds, updateRounds] = useStateWithLabel([], 'round');
@@ -109,7 +108,6 @@ const MainScreen = ({
         setZombiesRound={zombies =>
           zombies ? changeActiveSide(ZOMBIES) : changeActiveSide(PLAYERS)
         }
-        stopIntro={stopIntro}
         time={formatedGameTime.current}
         toggleDamageMode={toggleDamageMode}
         toggleZombiesArePlaying={toggleZombiesArePlaying}
@@ -136,7 +134,6 @@ MainScreen.propTypes = {
   initialCharacters: arrayOf(CharacterType),
   loadGame: func.isRequired,
   loadedGame: arrayOf(CharacterType),
-  stopIntro: func.isRequired,
   toggleDamageMode: func.isRequired
 };
 

src/components/NewGame/index.js

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect } from 'react';
+import React, { useContext, useEffect, useRef } from 'react';
 import { Link } from 'react-router-dom';
 import { arrayOf, bool, func } from 'prop-types';
 import { cloneDeep } from 'lodash';
@@ -10,6 +10,8 @@ import {
 } from '../../utils';
 import SetupModal from '../SetupModal';
 import BG from '../../assets/images/background/background.jpg';
+import Intro from '../../assets/sounds/music/TheHorrorShowShort.mp3';
+import IntroEnd from '../../assets/sounds/intro/ding.mp3';
 import {
   CLICK_NEW_GAME,
   LOG_TYPE_CORE,
@@ -43,7 +45,6 @@ const NewGame = ({
   currentChars,
   dynamic,
   loadedGame,
-  playIntro,
   setInitialCharacters,
   setNewChar
 }) => {
@@ -64,6 +65,38 @@ const NewGame = ({
   );
 
   const { context } = useContext(AppContext);
+  const intro = useRef(new Audio(Intro));
+  const introEnd = useRef(new Audio(IntroEnd));
+
+  const playIntro = () => {
+    intro.current.currentTime = 0;
+    intro.current.volume = 0.4;
+    intro.current.loop = true;
+    intro.current.play();
+  };
+
+  const stopIntro = () => {
+    if (navigator.userAgent.match(/iPad|iPhone/i)) {
+      intro.current.pause();
+      introEnd.current.currentTime = 0;
+      introEnd.current.volume = 0.2;
+      introEnd.current.play();
+    } else {
+      const fadeInterval = setInterval(() => {
+        if (intro.current.volume < 0.1) {
+          clearInterval(fadeInterval);
+          intro.current.pause();
+        } else if (intro.current.volume > 0) {
+          intro.current.volume -= 0.05;
+        }
+      }, 500);
+      setTimeout(() => {
+        introEnd.current.currentTime = 0;
+        introEnd.current.volume = 0.2;
+        introEnd.current.play();
+      }, 3500);
+    }
+  };
 
   const addPlayer = newPlayerSelected => {
     setNewPlayer(newPlayerSelected);
@@ -82,7 +115,7 @@ const NewGame = ({
     });
     logger(LOG_TYPE_CORE, START_GAME, cloneDeep(newgameCharacters));
     logger(LOG_TYPE_INFO, PLAYER_NAMES, [...activePlayers].toString());
-
+    stopIntro();
     setInitialCharacters(newgameCharacters);
   };
   const onSelect = event => {
@@ -231,7 +264,6 @@ NewGame.propTypes = {
   currentChars: arrayOf(CharacterType),
   dynamic: bool,
   loadedGame: bool,
-  playIntro: func,
   setInitialCharacters: func,
   setNewChar: func
 };
@@ -240,7 +272,6 @@ NewGame.defaultProps = {
   currentChars: null,
   dynamic: false,
   loadedGame: null,
-  playIntro: () => null,
   setInitialCharacters: () => null,
   setNewChar: () => null
 };