more work on UI, added range title, board selection, update screenshot

frontend/src/apollo.ts

@@ -4,8 +4,7 @@ import { setContext } from '@apollo/client/link/context';
 const httpLink = createHttpLink({
     uri: `http://localhost:3535/graphql/query${localStorage.getItem('csrf') ? '?csrf=' + localStorage.getItem('csrf') : ''}`
 });
-
-
+
 const authLink = setContext((_, { headers }) => {
     // get the authentication token from local storage if it exists
     const token = localStorage.getItem('jwt');
@@ -19,11 +18,10 @@ const authLink = setContext((_, { headers }) => {
     }
     return headers;
 });
-
 
 const client = new ApolloClient({
     link: authLink.concat(httpLink),
     cache: new InMemoryCache()
 });
 
-export default client;
+export default client;

frontend/src/components/BoardSelector.tsx

@@ -1,9 +1,11 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
-import { shadow } from '../styles';
+import { shadow, colors } from '../styles';
 
 import { AiOutlinePlus } from 'react-icons/ai';
 
+import { RANK_TO_CHAR, SUIT_TO_CHAR, TEXT_SUIT_TO_CHAR, suitColor } from '../redux/range/HandRange';
+
 import Modal from './Modal';
 
 const BoardSelectorStyle = styled.div`
@@ -50,8 +52,98 @@ const BoardSelectorStyle = styled.div`
       height: 30px;
     }
   }
+  .cards {
+      display: grid;
+      grid-template-rows: repeat(4, auto);
+      grid-template-columns: repeat(13, auto);
+      grid-template-areas:
+          'twos threes fours fives sixs sevens eights nines tens jacks queens kings aces'
+          'twoh threeh fourh fiveh sixh sevenh eighth nineh tenh jackh queenh kingh aceh'
+          'twoc threec fourc fivec sixc sevenc eightc ninec tenc jackc queenc kingc acec'
+          'twod threed fourd fived sixd sevend eightd nined tend jackd queend kingd aced';
+      grid-gap: 1em;
+      .card {
+        width: 40px;
+        height: 40px;
+        background: rgba(0, 0, 0, 0.05);
+        line-height: 40px;
+        text-align: center;
+        border-radius: 2px;
+        cursor: pointer;
+        margin: 0 auto;
+        &:hover {
+            box-shadow: ${shadow[1]};
+        }
+      }
+      .card-selected {
+          background: ${colors.primary};
+          color: #fff;
+      }
+  }
+  @media only screen and (max-width: 800px) {
+      .cards {
+        grid-template-rows: repeat(13, auto);
+        grid-template-columns: repeat(4, auto);
+        grid-gap: .5em;
+        grid-template-areas:
+            'twos twoh twoc twod'
+            'threes threeh threec threed'
+            'fours fourh fourc fourd'
+            'fives fiveh fivec fived'
+            'sixs sixh sixc sixd'
+            'sevens sevenh sevenc sevend'
+            'eights eighth eightc eightd'
+            'nines nineh ninec nined'
+            'tens tenh tenc tend'
+            'jacks jackh jackc jackd'
+            'queens queenh queenc queend'
+            'kings kingh kingc kingd'
+            'aces aceh acec aced';
+      }
+  }
 `;
 
+function rankToString(rank: number): string {
+    switch(rank) {
+        case 0: return 'two';
+        case 1: return 'three';
+        case 2: return 'four';
+        case 3: return 'five';
+        case 4: return 'six';
+        case 5: return 'seven';
+        case 6: return 'eight';
+        case 7: return 'nine';
+        case 8: return 'ten';
+        case 9: return 'jack';
+        case 10: return 'queen';
+        case 11: return 'king';
+        case 12: return 'ace';
+        default: return '';
+    }
+}
+
+function Cards(): React.ReactElement {
+    return (
+        <div className="cards">
+            {new Array(52).fill(0).map((_, index) => {
+                const rank = index % 13;
+                const suit = Math.floor(index / 13);
+                const gridArea = `${rankToString(rank)}${TEXT_SUIT_TO_CHAR[suit]}`;
+                return (
+                    <div key={index} className="card" style={{ gridArea }}>
+                      <span>
+                      {RANK_TO_CHAR[rank]}
+                      </span>
+                      <span style={{ fontFamily: 'Hiragino Sans', color: suitColor(suit) }}>
+                        {SUIT_TO_CHAR[suit]}
+                      </span>
+                  </div>
+                );
+            })}
+        </div>
+    );
+}
+
 type BoardSelectorProps = {
   className?: string;
 };
@@ -66,9 +158,7 @@ function BoardSelector(props: BoardSelectorProps): React.ReactElement {
           shown={modalShown}
           closeModal={() => setModalShown(false)}
       >
-          <div className="card-list">
-              OK
-          </div>
+        <Cards/>
       </Modal>
       <div className="board-selector">
         <div className="board-title">BOARD</div>

frontend/src/components/Button.tsx

@@ -25,6 +25,7 @@ const ButtonStyle = styled.button<{ size: string; block: boolean, variant: strin
   display: flex;
   flex-direction: row;
   align-items: center;
+  justify-content: center;
   box-shadow: ${shadow[0]};
   transition: transform .1s ease;
   width: ${props => props.block ? '100%': 'fit-content'};

frontend/src/components/Modal.tsx

@@ -3,6 +3,8 @@ import styled from 'styled-components';
 
 import Button from './Button';
 
+import { FiX } from 'react-icons/fi';
+
 type ModalProps = {
     shown: boolean;
     closeModal: () => void;
@@ -13,15 +15,23 @@ type ModalProps = {
 
 const ModalStyle = styled.div`
     position: fixed;
-    z-index: 999;
-    background: rgba(0, 0, 0, 0.65);
     width: 100%;
     height: 100%;
     left: 0;
     top: 0;
     display: flex;
     justify-content: center;
     align-items: center;
+    z-index: 999;
+    .modal-bg {
+        background: rgba(0, 0, 0, 0.65);
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        z-index: -1;
+    }
     .modal {
         background: #fff;
         border-radius: 2px;
@@ -77,6 +87,7 @@ function Modal(props: ModalProps): React.ReactElement {
     }
     return (
         <ModalStyle>
+            <div onClick={closeModal} className="modal-bg"/>
             <div className="modal">
                 <div className="modal-top">
                     <div className="modal-title">
@@ -87,7 +98,7 @@ function Modal(props: ModalProps): React.ReactElement {
                     {children}
                 </div>
                 <div className="modal-bottom">
-                    <Button onClick={closeModal}>CLOSE</Button>
+                    <Button onClick={closeModal}>Close</Button>
                     {actionButtons}
                 </div>
             </div>

frontend/src/components/Nav.tsx

@@ -1,9 +1,13 @@
 import React from 'react';
 import styled from 'styled-components';
+import { connect, ConnectedProps } from 'react-redux';
 import { Link, useHistory } from 'react-router-dom';
+import { RootState } from '../redux';
 
 import { colors, shadow } from '../styles';
 
+import { logout } from '../redux/auth/actions';
+
 const NavStyle = styled.nav`
     height: 70px;
     width: 100%;
@@ -51,12 +55,29 @@ const NavStyle = styled.nav`
     }
 `;
 
-function Nav(): React.ReactElement {
+function mapStateToProps(state: RootState) {
+    return {
+        isLoggedIn: state.auth.isLoggedIn
+    };
+}
+
+function mapDispatchToProps() {
+    return {
+        logout
+    };
+}
+
+const connector = connect(mapStateToProps, mapDispatchToProps);
+
+type PropsFromRedux = ConnectedProps<typeof connector>;
+
+type NavProps = PropsFromRedux;
+
+function Nav(props: NavProps): React.ReactElement {
+    const { isLoggedIn, logout } = props;
     let history = useHistory();
-    const isAuthenticated = localStorage.getItem('jwt') && localStorage.getItem('csrf');
-    function logout() {
-        localStorage.removeItem('jwt');
-        localStorage.removeItem('csrf');
+    function onLogout() {
+        logout();
         history.push('/');
     }
     return (
@@ -65,8 +86,8 @@ function Nav(): React.ReactElement {
                 <Link to="/" className="nav-title">Holdem Tools</Link>
             </div>
             <div className="nav-right">
-                { isAuthenticated ? (
-                    <button onClick={logout} className="nav-link">Logout</button>
+                { isLoggedIn ? (
+                    <button onClick={onLogout} className="nav-link">Logout</button>
                 ) : (
                     <>
                         <Link className="nav-link" to="/login">Sign In</Link>
@@ -78,4 +99,4 @@ function Nav(): React.ReactElement {
     );
 }
 
-export default Nav;
+export default connector(Nav);

frontend/src/components/RangeFilter.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import { colors, shadow } from '../styles';
+import { colors, shadow, makeOpaque } from '../styles';
 
 const MADE_HAND_CATEGORIES = [
   {
@@ -15,16 +15,39 @@ const MADE_HAND_CATEGORIES = [
     class: 'Flush',
     percent: '0.2%',
   },
+  { class: 'Straight',
+    percent: '0.2%'
+  },
   {
-    class: '3 of a kind',
+    class: 'Set',
     percent: '0.2%',
   },
   {
     class: 'Two pair',
     percent: '0.1%',
   },
   {
-    class: 'One pair',
+    class: 'Overpair',
+    percent: '0.01%',
+  },
+  {
+    class: 'Top pair',
+    percent: '0.01%',
+  },
+  {
+    class: 'PP below top',
+    percent: '0.01%',
+  },
+  {
+    class: 'Middle pair',
+    percent: '0.01%',
+  },
+  {
+    class: 'Weak pair',
+    percent: '0.01%',
+  },
+  {
+    class: 'Ace high',
     percent: '0.01%',
   },
 ];
@@ -34,13 +57,32 @@ const DRAW_HAND_CATEGORIES = [
     class: '2 card fd',
     percent: '0.02%',
   },
+  {
+    class: 'Nut fd (1 card)',
+    percent: '0.02%',
+  },
   {
     class: 'OESD',
     percent: '0.02%',
   },
+  {
+    class: 'Gutshot',
+    percent: '0.02%',
+  },
+  {
+    class: 'Overcards',
+    percent: '0.02%',
+  },
 ];
 
 const RangeFilterStyle = styled.div`
+  .range-filter-header {
+      background: rgba(0, 0, 0, 0.05);
+      padding: 0.5em 1em;
+      font-size: 12px;
+      font-weight: 500;
+      color: rgba(0, 0, 0, 0.45);
+  }
   .range-filter-container {
     background: white;
     box-shadow: ${shadow[0]};
@@ -50,10 +92,14 @@ const RangeFilterStyle = styled.div`
     width: 100%;
     overflow-y: auto;
     .range-filter-table-item {
+      font-size: 12px;
       &:hover {
-        background: rgba(0, 0, 0, 0.05);
+        background: ${makeOpaque(colors.primary, 0.05)};
       }
     }
+    .range-filter-table-body {
+        overflow-y: auto;
+    }
     .range-filter-select {
       > div {
         width: 1em;
@@ -79,6 +125,9 @@ function RangeFilter(props: RangeFilterProps): React.ReactElement {
   return (
     <RangeFilterStyle className={className}>
       <div className="range-filter-container">
+        <div className="range-filter-header">
+            FILTERS
+        </div>
         <table className="range-filter-table">
           <thead>
             <tr>
@@ -87,7 +136,7 @@ function RangeFilter(props: RangeFilterProps): React.ReactElement {
               <th>% OF RANGE</th>
             </tr>
           </thead>
-          <tbody>
+          <tbody className="range-filter-table-body">
             <tr>
               <th className="hand-class-label" colSpan={3}>
                 MADE HANDS