Address review comments

apps/client/src/components/dealtcard/dealtcard.tsx

@@ -11,14 +11,12 @@ interface DealtCardProps {
 const DealtCard: React.FC<DealtCardProps> = ({ gameMode, card }) => {
   const roundedClass =
     gameMode === GameMode.CUMULUS ? `card-rounded-cumulus` : `card-rounded`;
-  const translationClass =
-    gameMode === GameMode.EOMLSEC ? `card-translate-left` : ``;
   return (
     <div
       className={`playing-card ${getCardCssClass(
         gameMode,
         card,
-      )} active ${roundedClass} scaled-big ${translationClass}`}
+      )} active ${roundedClass} scaled-big aligned-right`}
     />
   );
 };

apps/client/src/components/footer/footer.tsx

@@ -12,7 +12,7 @@ type FooterProps = {
 };
 
 const Footer: FC<FooterProps> = ({ short = false }) => (
-  <small className="text-white-50">
+  <small className="text-black-50">
     v{packageJson.version}
     {!short && (
       <>

apps/client/src/components/randomcarddisplay/randomCardDisplay.tsx

@@ -1,62 +1,39 @@
 import React from 'react';
-import { Card, CARD_DECKS, GameMode, Suit } from '@eop/shared';
-import { FC, useEffect, useState } from 'react';
+import { CARD_DECKS, GameMode, SUITS } from '@eop/shared';
+import { FC, useState } from 'react';
 import DealtCard from '../dealtcard/dealtcard';
-import './randomCardDisplay.css';
+import classes from './randomCardDisplay.module.css';
 import { Button, FormGroup, Input, Label } from 'reactstrap';
 
-type SelectableCard = {
-  card: Card;
-  gameMode: GameMode;
-};
-
-const suites: Suit[] = ['A', 'B', 'C', 'D', 'E', 'T'];
-
+const allDecks = Object.keys(CARD_DECKS) as GameMode[];
 const RandomCardDisplay: FC = () => {
-  const allDecks = Object.keys(CARD_DECKS) as GameMode[];
   const [selectedDecks, setSelectedDecks] = useState<GameMode[]>(allDecks);
-  const [selectedCard, setSelectedCard] = useState<SelectableCard | undefined>(
-    undefined,
-  );
-  const selectableCards: SelectableCard[] = [];
-
-  selectedDecks.forEach((deck) =>
-    suites.forEach((suit) => {
-      selectableCards.push(
-        ...CARD_DECKS[deck][suit].cards.map((card) => ({
-          card,
-          gameMode: deck,
-        })),
-      );
-    }),
+  const selectableCards = selectedDecks.flatMap((deck) =>
+    SUITS.flatMap((suit) =>
+      CARD_DECKS[deck][suit].cards.map((card) => ({
+        card,
+        gameMode: deck,
+      })),
+    ),
   );
-
-  const selectCard = () =>
-    setSelectedCard(
-      selectableCards[Math.floor(Math.random() * selectableCards.length)],
+  const getRandomSelectableCard = () =>
+    selectableCards[Math.floor(Math.random() * selectableCards.length)];
+  const [selectedCard, setSelectedCard] = useState(getRandomSelectableCard());
+  const selectCard = () => setSelectedCard(getRandomSelectableCard());
+  const toggleCardDeck = (deck: GameMode) =>
+    setSelectedDecks((selectedDecks) =>
+      selectedDecks.includes(deck)
+        ? selectedDecks.filter((selectedDeck) => selectedDeck !== deck)
+        : [...selectedDecks, deck],
     );
 
-  useEffect(() => {
-    selectCard();
-  }, []);
-
-  const toggleCardDeck = (deck: GameMode) => {
-    if (selectedDecks.includes(deck)) {
-      setSelectedDecks(
-        selectedDecks.filter((selectedDeck) => selectedDeck !== deck),
-      );
-    } else {
-      setSelectedDecks(selectedDecks.concat(deck));
-    }
-  };
-
   return (
     <>
-      <FormGroup check className="card-deck-selector-container">
+      <FormGroup check className={classes['card-deck-selector-container']}>
         {allDecks.map((deck) => (
           <Label
             check
-            className="card-deck-selection"
+            className={classes['card-deck-selection']}
             key={`card-deck-selector-${deck}`}
           >
             <Input
@@ -70,7 +47,7 @@ const RandomCardDisplay: FC = () => {
         ))}
       </FormGroup>
       {selectedCard && (
-        <div className="card-container">
+        <div className={classes['card-container']}>
           <DealtCard
             gameMode={selectedCard.gameMode}
             card={selectedCard.card}

apps/client/src/components/sidebar/sidebar.css

@@ -34,3 +34,12 @@
   margin-top: 3%;
   margin-bottom: 1%;
 }
+
+.dealt-card-container {
+  position: relative;
+}
+
+.aligned-right {
+  position: absolute;
+  right: 0;
+}

apps/client/src/components/sidebar/sidebar.tsx

@@ -1,4 +1,4 @@
-import { getDealtCard, ModelType, SPECTATOR } from '@eop/shared';
+import { GameMode, getDealtCard, ModelType, SPECTATOR } from '@eop/shared';
 import React from 'react';
 import { Button } from 'reactstrap';
 
@@ -54,7 +54,7 @@ const Sidebar: FC<SidebarProps> = ({
           secret={secret}
           block
           size="lg"
-          color="success"
+          color="secondary"
           apiEndpoint="download"
         >
           Download Model
@@ -66,7 +66,7 @@ const Sidebar: FC<SidebarProps> = ({
         secret={secret}
         block
         size="lg"
-        color="warning"
+        color="secondary"
         apiEndpoint="download/text"
       >
         Download Threats
@@ -96,8 +96,13 @@ const Sidebar: FC<SidebarProps> = ({
           Pass
         </Button>
       )}
-
-      <DealtCard card={dealtCard} gameMode={G.gameMode} />
+      <div className="dealt-card-container">
+        <DealtCard
+          card={dealtCard}
+          gameMode={G.gameMode}
+          isShiftedLeft={G.gameMode === GameMode.EOMLSEC}
+        />
+      </div>
     </div>
   );
 };

apps/client/src/pages/create.tsx

@@ -269,20 +269,6 @@ class Create extends React.Component<CreateProps, CreateState> {
     const cardBody = !this.state.created ? (
       <div>
         <Banner />
-        <Button
-          block
-          size="lg"
-          color="primary"
-          onClick={() => (window.location.href = `/random-card`)}
-        >
-          Draw a random card
-        </Button>
-        <hr />
-        <p className="space-top">
-          <center>
-            <strong>Or create a new game:</strong>
-          </center>
-        </p>
         <Form>
           <FormGroup row>
             <Label for="players" sm={2}>
@@ -488,18 +474,26 @@ class Create extends React.Component<CreateProps, CreateState> {
           <Button
             block
             size="lg"
-            color="danger"
+            color="primary"
             disabled={this.state.creating || !this.isFormValid()}
             onClick={this.createGame.bind(this)}
           >
             Proceed
           </Button>
         </Form>
         <hr />
-        <small className="text-secondary">
-          Players will be able to join the game with the links that are
-          generated after you proceed.
-        </small>
+        <p className="centered">
+          Alternatively, if you do not want to play a full game you can just
+          select a few random cards.
+        </p>
+        <Button
+          block
+          size="lg"
+          color="secondary"
+          onClick={() => (window.location.href = `/random-card`)}
+        >
+          Draw a random card
+        </Button>
       </div>
     ) : (
       <div>
@@ -549,7 +543,12 @@ class Create extends React.Component<CreateProps, CreateState> {
           </tbody>
         </Table>
         <hr />
-        <CopyButton text={this.formatAllLinks()} color="light" block size="lg">
+        <CopyButton
+          text={this.formatAllLinks()}
+          color="secondary"
+          block
+          size="lg"
+        >
           Copy All
         </CopyButton>
         <hr />

apps/client/src/styles/about.css

@@ -1,3 +1,3 @@
 html body {
-  background-color: #000;
+  background-color: #fff;
 }

apps/client/src/styles/cards.css

@@ -24,10 +24,6 @@
   border-radius: 25px;
 }
 
-.card-translate-left {
-  margin-left: -5rem;
-}
-
 .playingCardsContainer {
   position: fixed;
   bottom: 0;

apps/client/src/styles/create.css

@@ -1,5 +1,5 @@
 html body {
-  background-color: #000;
+  background-color: #fff;
 }
 
 table {
@@ -19,3 +19,7 @@ table {
 .space-top {
   margin-top: 2rem;
 }
+
+.centered {
+  text-align: center;
+}

apps/client/src/styles/random-card.css

@@ -0,0 +1,3 @@
+html body {
+  background-color: #fff;
+}

packages/shared/src/utils/cardDefinitions.ts

@@ -1,7 +1,8 @@
 import { GameMode } from './GameMode';
 
 export type Card = string;
-export type Suit = 'A' | 'B' | 'C' | 'D' | 'E' | 'T';
+export const SUITS = ['A', 'B', 'C', 'D', 'E', 'T'] as const;
+export type Suit = (typeof SUITS)[number];
 
 interface SuitDetails {
   name?: string;