Change UI for played cards, player cards and scores

arielger · Mar 29, 2019 · c15442f · c15442f
1 parent 9615816
commit c15442f
Show file tree

Hide file tree

Showing 10 changed files with 371 additions and 109 deletions.
diff --git a/client/src/components/Card/Card.js b/client/src/components/Card/Card.js
@@ -20,7 +20,8 @@ export default function Card({
   isHidden,
   isDisabled,
   card,
-  onClick
+  onClick = () => {},
+  style
 }) {
   if (isHidden || isPlaceholder) {
     return (
@@ -36,11 +37,12 @@ export default function Card({
             : {}),
           ...(isPlaceholder
             ? {
-                border: "1px dashed white",
+                border: "1px dashed rgba(255,255,255,0.2)",
                 background: "none",
                 width: cardSize.width - 2
               }
-            : {})
+            : {}),
+          ...style
         }}
       />
     );
@@ -62,7 +64,8 @@ export default function Card({
           ? `${-1 * cardSize.width}px ${-4 * cardSize.height}px`
           : `${(cardNumber - 1) * -cardSize.width}px ${-stepCardYOffset[
               cardStep
-            ] * cardSize.height}px`
+            ] * cardSize.height}px`,
+        ...style
       }}
     />
   );

diff --git a/client/src/screens/Match/Match.js b/client/src/screens/Match/Match.js
@@ -6,7 +6,9 @@ import gql from "graphql-tag";
 import Modal from "react-modal";
 
 import styles from "./Match.module.scss";
+
 import PlayerCards from "./PlayerCards";
+import PlayedCards from "./PlayedCards";
 import Scores from "./Scores";
 
 const trucoActions = ["TRUCO", "RETRUCO", "VALE_CUATRO"];
@@ -117,63 +119,66 @@ const MatchInner = ({
   const notPlayedCards = R.reject(R.prop("played"), data.match.myCards);
   const playedCards = R.pipe(
     R.find(R.propEq("playerId", user.id)),
-    R.prop("cards")
+    R.prop("cards"),
+    R.defaultTo([])
   )(data.match.cardsPlayedByPlayer);
 
   const currentHand = playedCards.length + 1;
 
   const otherPlayers = R.reject(R.propEq("id", user.id), data.match.players);
 
-  const trucoAvailableActions = R.cond([
-    [
-      R.pipe(
-        // Don't show any action if...
-        R.anyPass([
-          // it's not your turn and you are not answering
-          R.both(
-            R.always(data.match.nextPlayer !== user.id),
-            ({ status }) => status !== "PENDING"
-          ),
-          // are waiting for response of the other team
-          R.both(R.propEq("status", "PENDING"), R.propEq("team", "we")),
-          // the other team accepted truco the last time
-          R.both(R.propEq("status", "ACCEPTED"), R.propEq("team", "them")),
-          // you accepted truco in the same hand (prevent saying truco + action in sequence)
-          R.allPass([
-            R.propEq("status", "ACCEPTED"),
-            R.propEq("team", "we"),
-            R.propEq("hand", currentHand)
+  const trucoAvailableActions =
+    data.match.status === "playing" &&
+    R.cond([
+      [
+        R.pipe(
+          // Don't show any action if...
+          R.anyPass([
+            // it's not your turn and you are not answering
+            R.both(
+              R.always(data.match.nextPlayer !== user.id),
+              ({ status }) => status !== "PENDING"
+            ),
+            // are waiting for response of the other team
+            R.both(R.propEq("status", "PENDING"), R.propEq("team", "we")),
+            // the other team accepted truco the last time
+            R.both(R.propEq("status", "ACCEPTED"), R.propEq("team", "them")),
+            // you accepted truco in the same hand (prevent saying truco + action in sequence)
+            R.allPass([
+              R.propEq("status", "ACCEPTED"),
+              R.propEq("team", "we"),
+              R.propEq("hand", currentHand)
+            ])
           ])
-        ])
-      ),
-      R.always([])
-    ],
-    // If is answering show accept, reject and next type
-    [
-      R.propEq("status", "PENDING"),
-      R.pipe(
-        R.prop("type"),
-        type => (type ? [nextPossibleAction(type)] : []),
-        R.filter(Boolean),
-        R.concat(["ACCEPT", "REJECT"])
-      )
-    ],
-    // Otherwise, show only next type
-    [
-      R.T,
-      R.pipe(
-        R.prop("type"),
-        nextPossibleAction,
-        R.of,
-        R.filter(Boolean)
-      )
-    ]
-  ])({
-    type: R.path(["truco", "type"])(data.match),
-    status: R.path(["truco", "status"])(data.match),
-    team: R.path(["truco", "team"])(data.match),
-    hand: R.path(["truco", "hand"])(data.match)
-  });
+        ),
+        R.always([])
+      ],
+      // If is answering show accept, reject and next type
+      [
+        R.propEq("status", "PENDING"),
+        R.pipe(
+          R.prop("type"),
+          type => (type ? [nextPossibleAction(type)] : []),
+          R.filter(Boolean),
+          R.concat(["ACCEPT", "REJECT"])
+        )
+      ],
+      // Otherwise, show only next type
+      [
+        R.T,
+        R.pipe(
+          R.prop("type"),
+          nextPossibleAction,
+          R.of,
+          R.filter(Boolean)
+        )
+      ]
+    ])({
+      type: R.path(["truco", "type"])(data.match),
+      status: R.path(["truco", "status"])(data.match),
+      team: R.path(["truco", "team"])(data.match),
+      hand: R.path(["truco", "hand"])(data.match)
+    });
 
   return (
     <div className={styles["match-inner"]}>
@@ -201,17 +206,23 @@ const MatchInner = ({
       {data.match.status === "playing" && (
         <Fragment>
           <Scores
+            moreThanTwoPlayers={data.match.players.length > 2}
             matchPoints={data.match.points}
             myPoints={data.match.myPoints}
             theirPoints={data.match.theirPoints}
           />
           <Mutation mutation={PLAY_TRUCO}>
             {playTruco => (
               <div
-                style={{ display: "flex", flexDirection: "column", width: 200 }}
+                style={{
+                  display: "flex",
+                  flexDirection: "column",
+                  width: 200
+                }}
               >
                 {trucoAvailableActions.map(action => (
                   <button
+                    key={action}
                     disabled={!data.match.nextPlayer === user.id}
                     onClick={() =>
                       playTruco({
@@ -225,12 +236,17 @@ const MatchInner = ({
               </div>
             )}
           </Mutation>
+          <PlayedCards
+            cardsPlayedByPlayer={data.match.cardsPlayedByPlayer}
+            userId={user.id}
+          />
           {otherPlayers.map(player => (
             <PlayerCards
+              key={player.id}
               position="top" //@todo: Refactor to handle 4 and 6 players
               playedCards={R.pipe(
                 R.find(R.propEq("playerId", player.id)),
-                R.prop("cards")
+                R.propOr("cards")
               )(data.match.cardsPlayedByPlayer)}
             />
           ))}

diff --git a/client/src/screens/Match/PlayedCards/PlayedCards.js b/client/src/screens/Match/PlayedCards/PlayedCards.js
@@ -0,0 +1,55 @@
+import React from "react";
+import * as R from "ramda";
+import cs from "classnames";
+
+import Card from "../../../components/Card";
+import cards from "../../../utils/cards";
+
+import styles from "./PlayedCards.module.scss";
+
+const getCardZIndex = ({ card, cardsByPlayer, index }) => {
+  return R.pipe(
+    R.map(R.path(["cards", index])),
+    () => R.find(R.propEq("card", card))(cards),
+    R.prop("score")
+  )(cardsByPlayer);
+};
+
+export default function PlayedCards({ cardsPlayedByPlayer, userId }) {
+  // Put current player last in the list
+  const cardsByPlayer = R.pipe(
+    R.map(
+      R.when(R.propEq("playerId", userId), R.assoc("isCurrentPlayer", true))
+    ),
+    R.sortWith([R.ascend(R.propOr(false, "isCurrentPlayer"))])
+  )(cardsPlayedByPlayer);
+
+  return (
+    <div className={styles.playedCards}>
+      {cardsByPlayer.map(({ playerId, cards, isCurrentPlayer }) => (
+        <div
+          key={playerId}
+          className={cs(styles.playerCards, {
+            [styles.isCurrentPlayer]: isCurrentPlayer
+          })}
+        >
+          {cards.map((card, index) => (
+            <Card
+              key={card}
+              card={card}
+              style={{
+                zIndex: getCardZIndex({ card, cardsByPlayer, index }),
+                margin: 0
+              }}
+            />
+          ))}
+          {Array(3 - cards.length)
+            .fill(undefined)
+            .map((_, i) => (
+              <Card key={i} isPlaceholder style={{ margin: 0 }} />
+            ))}
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/client/src/screens/Match/PlayedCards/PlayedCards.module.scss b/client/src/screens/Match/PlayedCards/PlayedCards.module.scss
@@ -0,0 +1,19 @@
+.playedCards {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  height: 244px;
+}
+
+.playerCards {
+  display: flex;
+  justify-content: space-between;
+  width: 500px;
+
+  &.isCurrentPlayer {
+    position: relative;
+    top: -120px;
+    left: 40px;
+  }
+}
diff --git a/client/src/screens/Match/PlayedCards/index.js b/client/src/screens/Match/PlayedCards/index.js
@@ -0,0 +1,3 @@
+import PlayedCards from "./PlayedCards";
+
+export default PlayedCards;
diff --git a/client/src/screens/Match/PlayerCards/PlayerCards.js b/client/src/screens/Match/PlayerCards/PlayerCards.js
@@ -15,35 +15,23 @@ export default function PlayerCards({
 }) {
   return (
     <div
-      className={cs(styles.playerCards, {
-        [styles[position]]: true
+      className={cs(styles.cards, {
+        [styles[position]]: true,
+        [styles.disabled]: !enablePlayCards
       })}
     >
-      <div className={styles.playedCards}>
-        {playedCards.map(card => (
-          <Card key={card} card={card} />
-        ))}
-        {Array(3 - playedCards.length)
-          .fill(undefined)
-          .map((_, i) => (
-            <Card key={i} isPlaceholder={true} />
-          ))}
-      </div>
-      <div className={styles.notPlayedCards}>
-        {isCurrentUser
-          ? notPlayedCards.map(({ id, card }) => (
-              <Card
-                key={card}
-                isDisabled={!enablePlayCards}
-                card={card}
-                onClick={() => enablePlayCards && handlePlayCard(id)}
-              />
-            ))
-          : R.times(
-              i => <Card key={i} isHidden={true} />,
-              3 - playedCards.length
-            )}
-      </div>
+      {isCurrentUser
+        ? notPlayedCards.map(({ id, card }) => (
+            <Card
+              key={card}
+              card={card}
+              onClick={() => enablePlayCards && handlePlayCard(id)}
+            />
+          ))
+        : R.times(
+            i => <Card key={i} isHidden={true} />,
+            3 - playedCards.length
+          )}
     </div>
   );
 }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import PlayedCards from "./PlayedCards";

		export default PlayedCards;