Add a join game modal

definitely-not-codenames/src/actions/modalActions.js

@@ -3,4 +3,9 @@ const setSendRoomModal = (isOpen) => ({
   isOpen,
 });
 
-export {setSendRoomModal};
+const setJoinRoomModal = (isOpen) => ({
+  type: 'SET_JOIN_ROOM_MODAL',
+  isOpen,
+});
+
+export {setSendRoomModal, setJoinRoomModal};

definitely-not-codenames/src/components/GameEndModal.js

@@ -33,7 +33,7 @@ const GameEndModal = () => {
           type="button"
           onClick={handleCloseModal}
         >
-          X
+          ✕
         </button>
         <h2 className="modal__title--winner">Winner!</h2>
         <h2 className="modal__title--winner">{`${mode}`}</h2>

definitely-not-codenames/src/components/GamePage.js

@@ -10,7 +10,6 @@ import HintContainer from './HintContainer';
 import GameEndModal from './GameEndModal';
 import {gameStartedSelector} from '../selectors/gameSelectors';
 import SendRoomModal from './SendRoomModal';
-import SendRoomModalButton from './SendRoomModalButton';
 
 const GamePage = () => {
   const {roomID} = useParams();

definitely-not-codenames/src/components/HomePage.js

@@ -3,17 +3,19 @@ import RequestRoom from './RequestRoom';
 import JoinRoom from './JoinRoom';
 import GameCardDisabled from './GameCardDisabled';
 import CARDS from '../constants/homePage';
+import JoinRoomModal from './JoinRoomModal';
 
 const HomePage = () => {
   return (
     <div>
+      <JoinRoomModal />
       <div className="hint WHITE">
         <p className="hint__home-page-title">Codenames</p>
       </div>
       <div className="game-grid__container">
         {CARDS.map((card, i) => {
           switch (i) {
-            case 11:
+            case 11: // The card index
               return <RequestRoom />;
             case 13:
               return <JoinRoom />;

definitely-not-codenames/src/components/JoinRoom.js

@@ -1,11 +1,20 @@
 import React from 'react';
-import {useHistory} from 'react-router-dom';
+import {useDispatch} from 'react-redux';
+import {setJoinRoomModal} from '../actions/modalActions';
 
 const JoinRoom = () => {
-  const history = useHistory();
+  const dispatch = useDispatch();
+
+  const handleJoinRoomClick = () => {
+    dispatch(setJoinRoomModal(true));
+  };
 
   return (
-    <button className="game-grid__card--home-page-button--RED" type="button">
+    <button
+      className="game-grid__card--home-page-button--RED"
+      type="button"
+      onClick={handleJoinRoomClick}
+    >
       Join Room
     </button>
   );

definitely-not-codenames/src/components/JoinRoomModal.js

@@ -0,0 +1,63 @@
+import React, {useState} from 'react';
+import {useSelector, useDispatch} from 'react-redux';
+import Modal from 'react-modal';
+import {useHistory} from 'react-router-dom';
+import {NORMAL_TIME} from '../constants/animation';
+import {setJoinRoomModal} from '../actions/modalActions';
+
+const JoinRoomModal = () => {
+  const dispatch = useDispatch();
+  const history = useHistory();
+
+  const isOpen = useSelector((state) => state.modals.joinRoom);
+
+  const [gameID, setGameID] = useState('');
+
+  const handleGameIDChange = (e) => {
+    setGameID(e.target.value);
+  };
+
+  const handleGameIDSubmit = (e) => {
+    e.preventDefault();
+    history.push(`/game/${gameID}`);
+  };
+
+  const handleCloseModal = () => {
+    dispatch(setJoinRoomModal(false));
+  };
+
+  return (
+    <Modal
+      className="modal modal--TAN"
+      isOpen={isOpen}
+      closeTimeoutMS={NORMAL_TIME}
+      onRequestClose={handleCloseModal}
+      ariaHideApp={false}
+    >
+      <div>
+        <button
+          className="modal__close-button"
+          type="button"
+          onClick={handleCloseModal}
+        >
+          ✕
+        </button>
+        <form onSubmit={handleGameIDSubmit} className="modal__sub-container">
+          <h2 className="modal__title">Input Game ID</h2>
+          <input
+            className="modal__input--join"
+            type="text"
+            onChange={handleGameIDChange}
+            value={gameID}
+            autoFocus
+          />
+          <button type="submit" className="modal__button--join">
+            Join Game
+          </button>
+        </form>
+      </div>
+    </Modal>
+  );
+};
+
+export default JoinRoomModal;

definitely-not-codenames/src/components/SendRoomModal.js

@@ -33,7 +33,7 @@ const SendRoomModal = () => {
           type="button"
           onClick={handleCloseModal}
         >
-          X
+          ✕
         </button>
         <h2 className="modal__title">Send Invite</h2>
         <h2 className="modal__sub-title">

definitely-not-codenames/src/constants/homePage.js

@@ -126,7 +126,7 @@ const cards = [
   },
 ];
 
-const modifiedCards = cards.map((card, i) => {
+const modifiedCards = cards.map((card) => {
   const newCard = {...card};
   newCard.word = '';
   if (Math.random() < 0.33) {

definitely-not-codenames/src/reducers/modalReducer.js

@@ -2,12 +2,16 @@ import {createReducer} from '@reduxjs/toolkit';
 
 const intialState = {
   sendRoom: false,
+  joinRoom: false,
 };
 
 const modalReducer = createReducer(intialState, {
   SET_SEND_ROOM_MODAL: (state, action) => {
     state.sendRoom = action.isOpen;
   },
+  SET_JOIN_ROOM_MODAL: (state, action) => {
+    state.joinRoom = action.isOpen;
+  },
 });
 
 export default modalReducer;

definitely-not-codenames/src/styles/components/_modal.scss

@@ -120,6 +120,13 @@
   }
 }
 
+.modal__button--join {
+  @extend .modal__button;
+  background-color: $light-tan;
+  color: black;
+  width: 10rem;
+}
+
 .modal__close-button {
   background-color: unset;
   border: none;
@@ -129,7 +136,7 @@
   position: absolute;
   top: 50%;
   left: 50%;
-  transform: translate(13rem, -9.8rem);
+  transform: translate(12.8rem, -9.8rem);
 }
 
 .modal__input {
@@ -145,6 +152,12 @@
   width: 18rem;
 }
 
+.modal__input--join {
+  @extend .modal__input;
+  color: black;
+  border-color: black;
+}
+
 .modal__top-left-triangle {
   position: absolute;
   width: 0;