From 956c3cfe24f3feecfb1d826a2609c2decd3dcb1e Mon Sep 17 00:00:00 2001 From: Manu Artero Anguita Date: Fri, 6 Oct 2023 12:34:32 +0200 Subject: [PATCH 1/6] feat: collection is read/write from local storage --- src/contexts/__mocks__/local-storage.ts | 7 ++++++ src/contexts/collection-context.test.tsx | 2 ++ src/contexts/collection-context.tsx | 27 ++++++++++++++++++------ src/contexts/local-storage.ts | 22 +++++++++++++++++++ 4 files changed, 52 insertions(+), 6 deletions(-) create mode 100644 src/contexts/__mocks__/local-storage.ts create mode 100644 src/contexts/local-storage.ts diff --git a/src/contexts/__mocks__/local-storage.ts b/src/contexts/__mocks__/local-storage.ts new file mode 100644 index 0000000..9a11de4 --- /dev/null +++ b/src/contexts/__mocks__/local-storage.ts @@ -0,0 +1,7 @@ +export function readCollectionFromLocalStorage() { + return null; +} + +export function writeCollectionToLocalStorage() { + return; +} diff --git a/src/contexts/collection-context.test.tsx b/src/contexts/collection-context.test.tsx index 315d243..470c650 100644 --- a/src/contexts/collection-context.test.tsx +++ b/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(), { diff --git a/src/contexts/collection-context.tsx b/src/contexts/collection-context.tsx index cc7b1c3..e463932 100644 --- a/src/contexts/collection-context.tsx +++ b/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; + type CollectionContextType = { - packages: Record; + 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); +}, {} as Collection); const CollectionContext = createContext({ packages: defaultPackages, @@ -24,11 +31,19 @@ interface Props { } export function CollectionContextProvider({ children }: Props): JSX.Element { - const [packages, setPackages] = - useState>(defaultPackages); + const [packages, setPackages] = useState(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 ( diff --git a/src/contexts/local-storage.ts b/src/contexts/local-storage.ts new file mode 100644 index 0000000..7898f6b --- /dev/null +++ b/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 | null = null; + if (savedPackages) { + try { + collection = JSON.parse(savedPackages); + } catch (e) { + console.error(e); + } + } + return collection; +} + +export function writeCollectionToLocalStorage( + collection: Record +) { + localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(collection)); +} From a00d966d77818aef178f406c9fcd8a92d024905a Mon Sep 17 00:00:00 2001 From: Manu Artero Anguita Date: Fri, 6 Oct 2023 14:09:24 +0200 Subject: [PATCH 2/6] visual: hide scrollbar from --- src/app.tsx | 2 +- src/elements/dialog.tsx | 6 +++--- src/index.css | 24 ++++++++++++++++++++++++ 3 files changed, 28 insertions(+), 4 deletions(-) diff --git a/src/app.tsx b/src/app.tsx index 28e785f..1b7fb99 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -66,7 +66,7 @@ export function App() { }; return ( -
+
{appState() === "player-selection" && ( diff --git a/src/elements/dialog.tsx b/src/elements/dialog.tsx index 2f87c1b..41659ee 100644 --- a/src/elements/dialog.tsx +++ b/src/elements/dialog.tsx @@ -13,12 +13,12 @@ export function Dialog({ children }: Props) { >
{children} diff --git a/src/index.css b/src/index.css index 2cd7fdd..c512f3c 100644 --- a/src/index.css +++ b/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,12 @@ body { --medium-dark-blue: #0f191f; --white: #ffffff; } + +.show-up-transition { + opacity: 1; + transition: opacity 0.8s ease-in-out; +} + +.border-transition { + transition: border-color 0.3s ease-in-out; +} From acdad896793fd97d9270f0d0c173bd7fffceda44 Mon Sep 17 00:00:00 2001 From: Manu Artero Anguita Date: Fri, 6 Oct 2023 14:12:50 +0200 Subject: [PATCH 3/6] new component ; change icon at menu for collection fix a .css transition not being applied --- src/components/collection-dialog.tsx | 10 +++++++--- src/components/draft.css | 8 -------- src/components/draft.tsx | 2 +- src/components/toolbar.tsx | 19 +++++++++++++++---- src/elements/tooltip.tsx | 22 ++++++++++++++++++++++ src/index.css | 3 +-- 6 files changed, 46 insertions(+), 18 deletions(-) delete mode 100644 src/components/draft.css create mode 100644 src/elements/tooltip.tsx diff --git a/src/components/collection-dialog.tsx b/src/components/collection-dialog.tsx index 52a04ad..240fa35 100644 --- a/src/components/collection-dialog.tsx +++ b/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 ( -
+

Collection

- +
{Object.keys(PACKAGES_GROUPED_BY_WAVE).map((key) => { diff --git a/src/components/draft.css b/src/components/draft.css deleted file mode 100644 index 8f201e8..0000000 --- a/src/components/draft.css +++ /dev/null @@ -1,8 +0,0 @@ -.blur-transition { - filter: blur(0); - transition: filter 0.5s ease-in-out; -} - -.border-transition { - transition: border-color 0.5s ease-in-out; -} diff --git a/src/components/draft.tsx b/src/components/draft.tsx index b82d86e..75ea450 100644 --- a/src/components/draft.tsx +++ b/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)} > diff --git a/src/components/toolbar.tsx b/src/components/toolbar.tsx index 6672f92..e30e629 100644 --- a/src/components/toolbar.tsx +++ b/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 { useState } from "react"; type Props = { onCollection: () => void; }; export function Toolbar({ onCollection }: Props) { + const [collectionTooltip, setCollectionTooltip] = useState(false); + return ( diff --git a/src/elements/tooltip.tsx b/src/elements/tooltip.tsx new file mode 100644 index 0000000..fa97bd7 --- /dev/null +++ b/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 ( +
+ {children} +
+ ); +} diff --git a/src/index.css b/src/index.css index c512f3c..844288e 100644 --- a/src/index.css +++ b/src/index.css @@ -31,8 +31,7 @@ body { } .show-up-transition { - opacity: 1; - transition: opacity 0.8s ease-in-out; + transition: opacity 0.3s ease-in-out; } .border-transition { From 11edd995a5aac33faa4f6920bf31d58b178df078 Mon Sep 17 00:00:00 2001 From: Manu Artero Anguita Date: Fri, 6 Oct 2023 14:22:33 +0200 Subject: [PATCH 4/6] chore: remove duplicated code (toolbar, useBool) --- src/components/deck.tsx | 34 +++++++++------------------------- src/components/toolbar.tsx | 8 ++++---- src/hooks/use-bool.ts | 7 +++++++ 3 files changed, 20 insertions(+), 29 deletions(-) create mode 100644 src/hooks/use-bool.ts diff --git a/src/components/deck.tsx b/src/components/deck.tsx index 9442091..2754a53 100644 --- a/src/components/deck.tsx +++ b/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 (
- {showTooltip && ( -
-
- {card.name} -
+ +
+ {card.name}
- )} +
); } diff --git a/src/components/toolbar.tsx b/src/components/toolbar.tsx index e30e629..45f8d3a 100644 --- a/src/components/toolbar.tsx +++ b/src/components/toolbar.tsx @@ -3,14 +3,14 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import "./toolbar.css"; import { Tooltip } from "elements/tooltip"; -import { useState } from "react"; +import { useBool } from "hooks/use-bool"; type Props = { onCollection: () => void; }; export function Toolbar({ onCollection }: Props) { - const [collectionTooltip, setCollectionTooltip] = useState(false); + const [collectionTooltip, toggleCollectionTooltip] = useBool(); return (