improve styling of cards

tom-james-watson · Oct 29, 2021 · 43375f2 · 43375f2
1 parent e394e4b
commit 43375f2
Show file tree

Hide file tree

Showing 6 changed files with 143 additions and 146 deletions.
diff --git a/components/hearts.tsx b/components/hearts.tsx
@@ -9,7 +9,7 @@ interface HeartProps {
 function Heart(props: HeartProps) {
   const { have } = props;
   const { opacity } = useSpring({
-    opacity: have ? 1 : 0.2,
+    opacity: have ? 1 : 0.4,
     config: { duration: 300 },
   });
   const { scale } = useSpring({
@@ -20,7 +20,7 @@ function Heart(props: HeartProps) {
 
   return (
     <animated.img
-      className={`${styles.heart} ${styles.used}`}
+      className={styles.heart}
       style={{ opacity, scale }}
       src="/images/heart.svg"
     />

diff --git a/components/item-card.tsx b/components/item-card.tsx
@@ -6,31 +6,30 @@ import { Item, PlayedItem } from "../types/item";
 import { createWikimediaImage } from "../lib/image";
 import styles from "../styles/item-card.module.scss";
 
-interface Props {
+type Props = {
   draggable?: boolean;
   flippedId?: null | string;
   index: number;
   item: Item | PlayedItem;
-  played?: true;
   setFlippedId?: (flippedId: string | null) => void;
-}
+};
 
 const datePropIdMap: { [datePropId: string]: string } = {
-  P575: "discovery or invention",
-  P7589: "assent",
-  P577: "publication",
-  P1191: "first performance",
-  P1619: "official opening",
-  P571: "creation",
-  P1249: "earliest written record",
-  P576: "end of",
-  P8556: "extinction",
-  P6949: "announcement",
+  P575: "discovered", // or invented
+  P7589: "date of assent",
+  P577: "published",
+  P1191: "first performed",
+  P1619: "officially opened",
+  P571: "created",
+  P1249: "earliest record",
+  P576: "ended",
+  P8556: "became extinct",
+  P6949: "announced",
   P1319: "earliest",
-  P569: "birth",
-  P570: "death",
-  P582: "end",
-  P580: "start",
+  P569: "born",
+  P570: "died",
+  P582: "ended",
+  P580: "started",
   P7125: "latest one",
   P7124: "first one",
 };
@@ -40,18 +39,16 @@ function capitalize(str: string): string {
 }
 
 export default function ItemCard(props: Props) {
-  const { draggable, flippedId, index, item, played, setFlippedId } = props;
+  const { draggable, flippedId, index, item, setFlippedId } = props;
 
   const flipped = item.id === flippedId;
 
-  const { transform, opacity } = useSpring({
+  const cardSpring = useSpring({
     opacity: flipped ? 1 : 0,
     transform: `perspective(600px) rotateY(${flipped ? 180 : 0}deg)`,
     config: { mass: 5, tension: 750, friction: 100 },
   });
 
-  const fadeProps = useSpring({ opacity: 1, from: { opacity: 0 } });
-
   const type = React.useMemo(() => {
     const safeDescription = item.description.replace(/ \(.+\)/g, "");
 
@@ -68,90 +65,90 @@ export default function ItemCard(props: Props) {
 
   return (
     <Draggable draggableId={item.id} index={index} isDragDisabled={!draggable}>
-      {(provided) => (
-        <div
-          className={classNames(styles.itemCard, {
-            [styles.played]: played,
-            [styles.flipped]: flipped,
-          })}
-          ref={provided.innerRef}
-          {...provided.draggableProps}
-          {...provided.dragHandleProps}
-          onClick={() => {
-            if (played && setFlippedId) {
-              if (flipped) {
-                setFlippedId(null);
-              } else {
-                setFlippedId(item.id);
+      {(provided, snapshot) => {
+        return (
+          <div
+            className={classNames(styles.itemCard, {
+              [styles.played]: "played" in item,
+              [styles.flipped]: flipped,
+              [styles.dragging]: snapshot.isDragging,
+            })}
+            ref={provided.innerRef}
+            {...provided.draggableProps}
+            {...provided.dragHandleProps}
+            onClick={() => {
+              if ("played" in item && setFlippedId) {
+                if (flipped) {
+                  setFlippedId(null);
+                } else {
+                  setFlippedId(item.id);
+                }
               }
-            }
-          }}
-        >
-          <animated.div
-            className={styles.front}
-            style={{ opacity: opacity.to((o) => 1 - o), transform }}
+            }}
           >
-            <div className={styles.top}>
-              <div className={styles.label}>{capitalize(item.label)}</div>
-              <div className={styles.description}>{capitalize(type)}</div>
-            </div>
-            <div
-              className={styles.bottom}
+            <animated.div
+              className={styles.front}
               style={{
-                backgroundImage: `url("${createWikimediaImage(item.image)}")`,
+                opacity: cardSpring.opacity.to((o) => 1 - o),
+                transform: cardSpring.transform,
               }}
             >
-              {played ? (
-                <animated.div style={fadeProps} className={styles.playedInfo}>
-                  <span
-                    className={classNames(styles.date, {
-                      [styles.correct]: "played" in item && item.played.correct,
-                      [styles.incorrect]:
-                        "played" in item && !item.played.correct,
-                    })}
-                  >
-                    {item.year < -10000
+              <div className={styles.top}>
+                <div className={styles.label}>{capitalize(item.label)}</div>
+                <div className={styles.description}>{capitalize(type)}</div>
+              </div>
+              <div
+                className={styles.image}
+                style={{
+                  backgroundImage: `url("${createWikimediaImage(item.image)}")`,
+                }}
+              ></div>
+              <animated.div
+                className={classNames(styles.bottom, {
+                  [styles.correct]: "played" in item && item.played.correct,
+                  [styles.incorrect]: "played" in item && !item.played.correct,
+                })}
+              >
+                <span>
+                  {"played" in item
+                    ? item.year < -10000
                       ? item.year.toLocaleString()
-                      : item.year.toString()}
-                  </span>
-                </animated.div>
-              ) : (
-                <div className={styles.dateProp}>
-                  {datePropIdMap[item.date_prop_id]}
-                </div>
-              )}
-            </div>
-          </animated.div>
-          <animated.div
-            className={styles.back}
-            style={{
-              opacity,
-              transform: transform.to(
-                (t) => `${t} rotateX(180deg) rotateZ(180deg)`
-              ),
-            }}
-          >
-            <span className={styles.label}>{capitalize(item.label)}</span>
-            <span className={styles.date}>
-              {capitalize(datePropIdMap[item.date_prop_id])}: {item.year}
-            </span>
-            <span className={styles.description}>{item.description}.</span>
-            <a
-              href={`https://www.wikipedia.org/wiki/${encodeURIComponent(
-                item.wikipedia_title
-              )}`}
-              className={styles.wikipedia}
-              target="_blank"
-              rel="noopener noreferrer"
-              onClick={(e) => {
-                e.stopPropagation();
+                      : item.year.toString()
+                    : datePropIdMap[item.date_prop_id]}
+                </span>
+              </animated.div>
+            </animated.div>
+            <animated.div
+              className={styles.back}
+              style={{
+                opacity: cardSpring.opacity,
+                transform: cardSpring.transform.to(
+                  (t) => `${t} rotateX(180deg) rotateZ(180deg)`
+                ),
               }}
             >
-              Wikipedia
-            </a>
-          </animated.div>
-        </div>
-      )}
+              <span className={styles.label}>{capitalize(item.label)}</span>
+              <span className={styles.date}>
+                {capitalize(datePropIdMap[item.date_prop_id])}: {item.year}
+              </span>
+              <span className={styles.description}>{item.description}.</span>
+              <a
+                href={`https://www.wikipedia.org/wiki/${encodeURIComponent(
+                  item.wikipedia_title
+                )}`}
+                className={styles.wikipedia}
+                target="_blank"
+                rel="noopener noreferrer"
+                onClick={(e) => {
+                  e.stopPropagation();
+                }}
+              >
+                Wikipedia
+              </a>
+            </animated.div>
+          </div>
+        );
+      }}
     </Draggable>
   );
 }
diff --git a/components/played-item-list.tsx b/components/played-item-list.tsx
@@ -42,7 +42,6 @@ export default function PlayedItemList(props: PlayedItemListProps) {
                     index={index}
                     item={item}
                     key={item.id}
-                    played
                     setFlippedId={setFlippedId}
                   />
                 ))}

diff --git a/styles/hearts.module.scss b/styles/hearts.module.scss
@@ -6,11 +6,7 @@
   margin-top: 20px;
 
   .heart {
-    height: 30px;
+    height: 50px;
     margin: 10px;
-
-    &.used {
-      opacity: 0.2;
-    }
   }
 }
diff --git a/styles/item-card.module.scss b/styles/item-card.module.scss
@@ -19,12 +19,32 @@
     left: 0;
     bottom: 0;
     border-radius: 5px;
-    background: white;
-    // use this one whilst dragged
-    // box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
     box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px,
       rgba(0, 0, 0, 0.23) 0px 6px 6px;
+    background-color: #ffffff;
     will-change: transform, opacity;
+
+    &::after {
+      content: "";
+      position: absolute;
+      z-index: -1;
+      width: 100%;
+      height: 100%;
+      opacity: 0;
+      border-radius: 5px;
+      box-shadow: rgba(0, 0, 0, 0.65) 0px 10px 25px,
+        rgba(0, 0, 0, 0.75) 0px 6px 12px;
+      transition: opacity 0.3s ease-in-out;
+    }
+  }
+
+  &.dragging {
+    .front,
+    .back {
+      &::after {
+        opacity: 1;
+      }
+    }
   }
 
   &.played {
@@ -49,57 +69,43 @@
       padding: 10px;
     }
 
-    .bottom {
+    .image {
       display: flex;
       flex-direction: column;
       justify-content: flex-end;
       flex-grow: 1;
       min-height: 0;
-      border-radius: 0 0 5px 5px;
+      // border-radius: 0 0 5px 5px;
       background-color: $background-alt;
       background-repeat: no-repeat;
       background-size: cover;
       background-position: 50% 25%;
       padding: 10px;
       padding-bottom: 0;
       color: $text-light;
+    }
+
+    .bottom {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      line-height: 30px;
+      font-weight: 700;
+      background-color: $primary;
+      color: $text-light;
+      border-radius: 0 0 5px 5px;
+      transition: background-color 5s ease-in-out;
+
+      &:hover {
+        background-color: #ad310b;
+      }
 
-      .playedInfo {
-        display: flex;
-        flex-direction: column;
-        flex-grow: 1;
-        min-height: 0;
-        justify-content: flex-end;
-
-        .date {
-          font-weight: bold;
-          margin-top: 10px;
-          margin-bottom: 5px;
-          text-align: center;
-          padding: 5px 10px;
-          margin: 0 auto;
-          border-radius: 5px 5px 0 0;
-
-          &.correct {
-            background: $correct;
-          }
-
-          &.incorrect {
-            background: $incorrect;
-          }
-        }
+      &.correct {
+        background-color: $correct;
       }
 
-      .dateProp {
-        font-weight: bold;
-        margin-top: 10px;
-        margin-bottom: 5px;
-        text-align: center;
-        font-size: 12px;
-        padding: 5px 10px;
-        background: $primary;
-        margin: 0 auto;
-        border-radius: 5px 5px 0 0;
+      &.incorrect {
+        background-color: $incorrect;
       }
     }
   }