v0.5.0

package.json

@@ -1,7 +1,7 @@
 {
   "name": "marvel-lcg-draft",
   "description": "Prepare 2 decks for Marvel Champions: Draft rules",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "private": false,
   "license": "MIT",
   "type": "module",

src/app.tsx

@@ -66,7 +66,7 @@ export function App() {
   };
 
   return (
-    <div id="main-app" className="flex flex-col h-screen">
+    <div id="main-app" className="flex flex-col h-screen overflow-hidden">
       <Toolbar onCollection={handleShowCollection} />
       <main className="flex flex-grow">
         {appState() === "player-selection" && (

src/components/__snapshots__/toolbar.test.tsx.snap

@@ -7,25 +7,33 @@ exports[`<Toolbar /> renders 1`] = `
     id="Toolbar"
   >
     <button
+      aria-label="Collection"
       class="px-8 py-4 rounded-md text-xl"
     >
-      <div>
+      <div
+        class="relative"
+      >
         <svg
           aria-hidden="true"
-          class="svg-inline--fa fa-bars "
+          class="svg-inline--fa fa-list "
           color="white"
-          data-icon="bars"
+          data-icon="list"
           data-prefix="fas"
           focusable="false"
           role="img"
-          viewBox="0 0 448 512"
+          viewBox="0 0 512 512"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"
+            d="M40 48C26.7 48 16 58.7 16 72v48c0 13.3 10.7 24 24 24H88c13.3 0 24-10.7 24-24V72c0-13.3-10.7-24-24-24H40zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zM16 232v48c0 13.3 10.7 24 24 24H88c13.3 0 24-10.7 24-24V232c0-13.3-10.7-24-24-24H40c-13.3 0-24 10.7-24 24zM40 368c-13.3 0-24 10.7-24 24v48c0 13.3 10.7 24 24 24H88c13.3 0 24-10.7 24-24V392c0-13.3-10.7-24-24-24H40z"
             fill="currentColor"
           />
         </svg>
+        <div
+          class="opacity-0 absolute z-10 bg-gray-800 text-white text-sm py-1 px-2 rounded-md top-full left-1/2 transform -translate-x-1/2 show-up-transition pointer-events-none"
+        >
+          Collection
+        </div>
       </div>
     </button>
   </nav>

src/components/collection-dialog.tsx

@@ -1,5 +1,7 @@
-import { useCollectionContext } from "contexts/collection-context";
+import { faCheck } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { groupPackagesByWaves } from "app-domain";
+import { useCollectionContext } from "contexts/collection-context";
 import { Dialog } from "elements/dialog";
 
 import type { CardPackage } from "services/cards";
@@ -15,9 +17,11 @@ export function CollectionDialog({ onClose }: CollectionDialogProps) {
 
   return (
     <Dialog>
-      <div className="flex justify-between items-center">
+      <div className="flex justify-between items-center pr-8">
         <h2 className="text-2xl font-semibold">Collection</h2>
-        <button onClick={onClose}>X</button>
+        <button onClick={onClose}>
+          <FontAwesomeIcon color="green" icon={faCheck} size="xl" />
+        </button>
       </div>
       <div>
         {Object.keys(PACKAGES_GROUPED_BY_WAVE).map((key) => {

src/components/deck.tsx

@@ -1,9 +1,10 @@
-import { useState } from "react";
 import c from "classnames";
 
 import type { DeckCard, Player, PlayerDeck } from "app-domain";
 import type { Card, CardFaction, CardType } from "services/cards";
 
+import { Tooltip } from "elements/tooltip";
+import { useBool } from "hooks/use-bool";
 import "./deck.css";
 
 type Props = {
@@ -75,37 +76,20 @@ function sortDeckByType(deckCards: DeckCard[]) {
 }
 
 function DeckCard({ card }: { card: Card }) {
-  const [showTooltip, setShowTooltip] = useState(false);
-
-  const toggleTooltip = () => {
-    setShowTooltip(!showTooltip);
-  };
+  const [showImage, toggleImage] = useBool();
 
   return (
     <div
       className="relative inline-block"
-      onMouseEnter={toggleTooltip}
-      onMouseLeave={toggleTooltip}
+      onMouseEnter={toggleImage}
+      onMouseLeave={toggleImage}
     >
       <div className="w-4 h-4 bg-gray-200 rounded-full"></div>
-      {showTooltip && (
-        <div
-          className={c(
-            "absolute top-0 left-0",
-            "bg-gray-800 rounded-md",
-            "p-2 w-[120px]",
-            "z-10"
-          )}
-        >
-          <div className="flex flex-col justify-center">
-            <img
-              src={`/${card.code}.png`}
-              className="mx-auto"
-              alt={card.name}
-            />
-          </div>
+      <Tooltip show={showImage}>
+        <div className="flex flex-col justify-center p-2 w-[120px]">
+          <img src={`/${card.code}.png`} className="mx-auto" alt={card.name} />
         </div>
-      )}
+      </Tooltip>
     </div>
   );
 }

src/components/draft.tsx

@@ -163,7 +163,7 @@ function Card({
         "min-w-[300px]",
         "shadow-md hover:shadow-lg transition duration-300",
         isSelected ? "border-white border-transition" : "border-transparent",
-        isDiscarded && "blur-sm blur-transition"
+        isDiscarded && "blur-sm"
       )}
       onClick={() => onClick(card)}
     >

src/components/toolbar.tsx

@@ -1,21 +1,32 @@
+import { faList } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faBars } from "@fortawesome/free-solid-svg-icons";
 
 import "./toolbar.css";
+import { Tooltip } from "elements/tooltip";
+import { useBool } from "hooks/use-bool";
 
 type Props = {
   onCollection: () => void;
 };
 
 export function Toolbar({ onCollection }: Props) {
+  const [collectionTooltip, toggleCollectionTooltip] = useBool();
+
   return (
     <nav
       id="Toolbar"
       className="bg-gray-100 w-full p-2 flex items-end justify-end"
     >
-      <button className="px-8 py-4 rounded-md text-xl" onClick={onCollection}>
-        <div>
-          <FontAwesomeIcon color="white" icon={faBars} />
+      <button
+        className="px-8 py-4 rounded-md text-xl"
+        aria-label="Collection"
+        onClick={onCollection}
+        onMouseEnter={toggleCollectionTooltip}
+        onMouseLeave={toggleCollectionTooltip}
+      >
+        <div className="relative">
+          <FontAwesomeIcon color="white" icon={faList} />
+          <Tooltip show={collectionTooltip}>Collection</Tooltip>
         </div>
       </button>
     </nav>

src/contexts/__mocks__/local-storage.ts

@@ -0,0 +1,7 @@
+export function readCollectionFromLocalStorage() {
+  return null;
+}
+
+export function writeCollectionToLocalStorage() {
+  return;
+}

src/contexts/collection-context.test.tsx

@@ -4,6 +4,8 @@ import {
   useCollectionContext,
 } from "./collection-context";
 
+jest.mock("./local-storage");
+
 describe("useCollectionContext()", () => {
   test("provides packages{} to children", () => {
     const { result } = renderHook(() => useCollectionContext(), {

src/contexts/collection-context.tsx

@@ -1,9 +1,16 @@
-import { createContext, useContext, useState } from "react";
+import { createContext, useContext, useEffect, useState } from "react";
 import { cardPackages } from "services/cards";
+import {
+  readCollectionFromLocalStorage,
+  writeCollectionToLocalStorage,
+} from "./local-storage";
+
 import type { CardPackage } from "services/cards";
 
+type Collection = Record<CardPackage, boolean>;
+
 type CollectionContextType = {
-  packages: Record<CardPackage, boolean>;
+  packages: Collection;
   togglePackage: (pkg: CardPackage) => void;
 };
 
@@ -12,7 +19,7 @@ const defaultPackages = cardPackages.reduce((acc, pkg) => {
     return { ...acc, [pkg]: true };
   }
   return { ...acc, [pkg]: false };
-}, {} as Record<CardPackage, boolean>);
+}, {} as Collection);
 
 const CollectionContext = createContext<CollectionContextType>({
   packages: defaultPackages,
@@ -24,11 +31,19 @@ interface Props {
 }
 
 export function CollectionContextProvider({ children }: Props): JSX.Element {
-  const [packages, setPackages] =
-    useState<Record<CardPackage, boolean>>(defaultPackages);
+  const [packages, setPackages] = useState<Collection>(defaultPackages);
+
+  useEffect(() => {
+    const savedPackages = readCollectionFromLocalStorage();
+    if (savedPackages) {
+      setPackages(savedPackages);
+    }
+  }, []);
 
   const togglePackage = (pkg: CardPackage) => {
-    setPackages((prev) => ({ ...prev, [pkg]: !prev[pkg] }));
+    const collection = { ...packages, [pkg]: !packages[pkg] };
+    setPackages(collection);
+    writeCollectionToLocalStorage(collection);
   };
 
   return (

src/contexts/local-storage.ts

@@ -0,0 +1,22 @@
+import type { CardPackage } from "services/cards";
+
+const LOCAL_STORAGE_KEY = "collection";
+
+export function readCollectionFromLocalStorage() {
+  const savedPackages = localStorage.getItem(LOCAL_STORAGE_KEY);
+  let collection: Record<CardPackage, boolean> | null = null;
+  if (savedPackages) {
+    try {
+      collection = JSON.parse(savedPackages);
+    } catch (e) {
+      console.error(e);
+    }
+  }
+  return collection;
+}
+
+export function writeCollectionToLocalStorage(
+  collection: Record<CardPackage, boolean>
+) {
+  localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(collection));
+}

src/elements/dialog.tsx

@@ -13,12 +13,12 @@ export function Dialog({ children }: Props) {
     >
       <div
         className={c(
-          "bg-white rounded-lg p-6 w-full max-w-screen-md overflow-y-auto",
-          "scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-gray-100"
+          "bg-white rounded-lg p-6 w-full max-w-screen-md",
+          "overflow-y-auto no-scrollbar"
         )}
         style={{
           width: "90%",
-          maxHeight: "80%",
+          maxHeight: "70%",
         }}
       >
         {children}

src/elements/tooltip.tsx

@@ -0,0 +1,22 @@
+import c from "classnames";
+
+type Props = {
+  show: boolean;
+  children: React.ReactNode;
+};
+
+export function Tooltip({ show, children }: Props) {
+  return (
+    <div
+      className={c(
+        show ? "opacity-1" : "opacity-0",
+        "absolute z-10",
+        "bg-gray-800 text-white text-sm py-1 px-2 rounded-md",
+        "top-full left-1/2 transform -translate-x-1/2",
+        "show-up-transition pointer-events-none"
+      )}
+    >
+      {children}
+    </div>
+  );
+}

src/hooks/use-bool.ts

@@ -0,0 +1,7 @@
+import { useCallback, useState } from "react";
+
+export function useBool(): [boolean, () => void] {
+  const [value, setValue] = useState(false);
+  const toggle = useCallback(() => setValue((v) => !v), []);
+  return [value, toggle];
+}

src/index.css

@@ -2,6 +2,21 @@
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 
+@layer utilities {
+  @variants responsive {
+    /* Hide scrollbar for Chrome, Safari and Opera */
+    .no-scrollbar::-webkit-scrollbar {
+      display: none;
+    }
+
+    /* Hide scrollbar for IE, Edge and Firefox */
+    .no-scrollbar {
+      -ms-overflow-style: none; /* IE and Edge */
+      scrollbar-width: none; /* Firefox */
+    }
+  }
+}
+
 body {
   font-family: "Exo 2", sans-serif;
   background-color: var(--dark-blue);
@@ -14,3 +29,11 @@ body {
   --medium-dark-blue: #0f191f;
   --white: #ffffff;
 }
+
+.show-up-transition {
+  transition: opacity 0.3s ease-in-out;
+}
+
+.border-transition {
+  transition: border-color 0.3s ease-in-out;
+}