Merge branch 'release/v1.4.1'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "smash-tier-list",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "🎮🎯 Tier List application for Super Smash Bros series",
   "main": "src/index.js",
   "repository": "https://github.com/desko27/smash-tier-list.git",

src/components/Filter.jsx

@@ -17,16 +17,18 @@ const Filter = ({
   eye,
   onChange,
   onEyeClick,
+  noMatch,
 }) => (
   <Wrapper>
-    <InputWrapper>
+    <InputWrapper noMatch={noMatch}>
       <Input
         id="filter-box"
         autoComplete="off"
         type="text"
         value={value}
         onChange={onChange}
         placeholder="Search characters..."
+        noMatch={noMatch}
       />
       <IconButtons>
         <Tooltip
@@ -55,6 +57,7 @@ Filter.propTypes = {
   eye: PropTypes.bool.isRequired,
   onChange: PropTypes.func.isRequired,
   onEyeClick: PropTypes.func.isRequired,
+  noMatch: PropTypes.bool.isRequired,
 };
 
 export default Filter;

src/components/Filter.styles.js

@@ -5,7 +5,10 @@ import media from 'common/media';
 import { theme } from './layout/Header.styles';
 
 const { height } = theme;
-const backgroundColor = '#e0dddd';
+const bg = '#e0dddd';
+const bgFail = '#ffc5c5';
+const fcFail = '#c33a3a';
+
 const color = '#9b9b9b';
 const darkColor = '#2a2a2a';
 
@@ -21,7 +24,7 @@ export const InputWrapper = styled.div`
 
   :before {
     content: '';
-    border-right: ${height}px solid ${backgroundColor};
+    border-right: ${height}px solid ${({ noMatch }) => (noMatch ? bgFail : bg)};
     border-top: ${height}px solid transparent;
   }
 
@@ -40,12 +43,13 @@ export const Input = styled.input`
   display: block;
   border: none;
   width: 100%;
-  background: ${backgroundColor};
+  background: ${({ noMatch }) => (noMatch ? bgFail : bg)};
   border-top-right-radius: 100px;
   border-bottom-right-radius: 100px;
 
   padding-left: 8px;
 
+  color: ${({ noMatch }) => (noMatch ? fcFail : 'inherit')};
   font-size: 1em;
   font-weight: 300;
 

src/components/NoMatch.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import { Wrapper, EmojiWrapper } from './NoMatch.styles';
+
+const Emoji = () => (
+  // eslint-disable-next-line
+  <EmojiWrapper role="img" aria-label="cry">
+    👀
+  </EmojiWrapper>
+);
+
+const NoMatch = () => (
+  <Wrapper>
+    No match <Emoji />
+  </Wrapper>
+);
+
+export default NoMatch;

src/components/NoMatch.styles.js

@@ -0,0 +1,27 @@
+import styled from 'styled-components';
+
+import media from 'common/media';
+
+export const Wrapper = styled.div`
+  flex-grow: 1;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  color: #9b9b9b;
+  font-size: 70px;
+  font-weight: 300;
+
+  ${media.lessThan('mobile')`
+    font-size: 40px;
+  `}
+`;
+
+export const EmojiWrapper = styled.span`
+  margin-left: 20px;
+
+  ${media.lessThan('mobile')`
+    margin-left: 12px;
+  `}
+`;

src/components/layout/Main.styles.js

@@ -3,4 +3,8 @@ import styled from 'styled-components';
 export const MainWrapper = styled.main`
   flex-grow: 1;
   padding-bottom: 30px;
+
+  /* for possible messages to be displayed at center */
+  display: flex;
+  flex-direction: column;
 `;

src/components/layout/common.styles.js

@@ -2,4 +2,9 @@ import styled from 'styled-components';
 
 export const Container = styled.div`
   padding: 0 30px;
+
+  /* for possible messages to be displayed at center */
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
 `;

src/containers/Game.jsx

@@ -3,15 +3,18 @@ import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 
 import { currentGameSelector } from '../redux/app/selectors';
-import { visibleRosterGroupedByTierSelector, allRosterGroupedByTierSelector }
+import { visibleRosterGroupedByTierSelector, allRosterGroupedByTierSelector, noMatchSelector }
   from '../redux/game/selectors';
 
 import Roster from '../components/Roster';
+import NoMatch from '../components/NoMatch';
 
 // eslint-disable-next-line
 class Game extends Component {
   render() {
-    const { currentGame, eyeFilter } = this.props;
+    const { currentGame, eyeFilter, noMatch } = this.props;
+
+    if (noMatch) return <NoMatch />;
 
     const charactersByTier = eyeFilter
       ? allRosterGroupedByTierSelector(currentGame)
@@ -33,11 +36,13 @@ class Game extends Component {
 Game.propTypes = {
   currentGame: PropTypes.object.isRequired,
   eyeFilter: PropTypes.bool.isRequired,
+  noMatch: PropTypes.bool.isRequired,
 };
 
 export default connect(
   state => ({
     currentGame: currentGameSelector(state),
     eyeFilter: state.eyeFilter,
+    noMatch: noMatchSelector(currentGameSelector(state)),
   }),
 )(Game);

src/containers/SmashTierList.jsx

@@ -26,6 +26,7 @@ import gamesData from '../games-data';
 import { selectGame, setEyeFilter } from '../redux/app/actions';
 import { addGame, filterByName } from '../redux/game/actions';
 import { currentGameSelector, prevGameSelector, nextGameSelector } from '../redux/app/selectors';
+import { noMatchSelector } from '../redux/game/selectors';
 
 // layout components & styles
 import { Wrapper } from './SmashTierList.styles';
@@ -182,6 +183,7 @@ class SmashTierList extends React.Component {
       route,
       currentFilter,
       eyeFilter,
+      noMatch,
     } = this.props;
 
     const isBrowser = typeof document !== 'undefined';
@@ -198,6 +200,7 @@ class SmashTierList extends React.Component {
           eye={eyeFilter}
           onChange={this._handleFilterChange}
           onEyeClick={this._handleFilterEyeClick}
+          noMatch={noMatch}
         />
         <HeaderIcon
           svgPath={exclamationCircleSrc}
@@ -302,6 +305,7 @@ SmashTierList.propTypes = {
   nextGame: PropTypes.object.isRequired,
   currentFilter: PropTypes.string.isRequired,
   eyeFilter: PropTypes.bool.isRequired,
+  noMatch: PropTypes.bool.isRequired,
 };
 
 export default withSiteData(withRouter(
@@ -313,6 +317,7 @@ export default withSiteData(withRouter(
       nextGame: nextGameSelector(state),
       currentFilter: state.currentFilter,
       eyeFilter: state.eyeFilter,
+      noMatch: noMatchSelector(currentGameSelector(state)),
     }),
   )(SmashTierList),
 ));

src/redux/game/selectors.js

@@ -3,7 +3,7 @@ import { createSelector } from 'reselect';
 const tiersSelector = gameState => gameState.tiers;
 const rosterSelector = gameState => gameState.roster;
 
-export const rosterGroupedByTier = ({ onlyVisible = true } = {}) => theState => (
+export const rosterGroupedByTier = ({ onlyVisible = true } = {}) => gameState => (
   createSelector(
     tiersSelector,
     rosterSelector,
@@ -15,8 +15,15 @@ export const rosterGroupedByTier = ({ onlyVisible = true } = {}) => theState =>
         ),
       }),
     ).filter(t => t.characters.length > 0),
-  )(theState)
+  )(gameState)
 );
 
 export const allRosterGroupedByTierSelector = rosterGroupedByTier({ onlyVisible: false });
 export const visibleRosterGroupedByTierSelector = rosterGroupedByTier();
+
+export const noMatchSelector = gameState => (
+  createSelector(
+    rosterSelector,
+    roster => !roster.find(c => c.visible),
+  )(gameState)
+);