Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Deck Editor added #96

Closed
wants to merge 28 commits into from
Closed

Deck Editor added #96

Show file tree
Hide file tree
Changes from 24 commits
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
0318460
Added activity diagram to flow.md
eviterin Dec 30, 2023
79afbd8
Deck editor created
eviterin Jan 1, 2024
9cb871d
Big card now shows card hovered, not selected
eviterin Jan 1, 2024
28835c5
added glow when selecting a card in the editor
eviterin Jan 1, 2024
cae165f
Removed Flowchart
eviterin Jan 2, 2024
e0a07fc
Activity diagram of New Game added
eviterin Jan 2, 2024
5482243
Made card details on hover instead of on click
eviterin Jan 2, 2024
c794314
added panel for decks in the collections view.
eviterin Jan 2, 2024
822b8a9
Pressing New Deck in collections now redirects to editor
eviterin Jan 2, 2024
2187df8
Moved test decks to app file
eviterin Jan 2, 2024
bc3dc49
Save deck implemented
eviterin Jan 2, 2024
045ce8b
same card gap in both collection and editor
eviterin Jan 2, 2024
271334e
Enabled possibility to load a deck from collection into editor
eviterin Jan 3, 2024
5bbbeae
Indentation fix
eviterin Jan 3, 2024
49e85f0
Merge branch 'DiagramUpdate'
eviterin Jan 3, 2024
ff2ea69
Revert "Merge branch 'DiagramUpdate'"
eviterin Jan 3, 2024
6fe6933
Removed the clear button
eviterin Jan 4, 2024
77ffa85
Auto populate the deck name when editing it
eviterin Jan 4, 2024
3ad3998
Replaced cards in a deck with just the name
eviterin Jan 4, 2024
1599a24
Overwrite decks of same name, if already exists
eviterin Jan 4, 2024
4e97c5c
Rename deck to remove old deck
eviterin Jan 5, 2024
524a567
Added cancel button that gets you back to collection
eviterin Jan 5, 2024
2d9f8a9
prevent empty decks from being saved
eviterin Jan 5, 2024
162d929
Merge branch 'CollectionOverhaul'
eviterin Jan 5, 2024
66af583
Removed semicolons;
eviterin Jan 6, 2024
89f9aaf
Changed index to deckID. Added some css to cards in deck display
eviterin Jan 6, 2024
0b2d7a1
Merge branch 'master' into master
eviterin Jan 7, 2024
f13a346
Merge branch 'master' into master
eviterin Jan 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 8 additions & 2 deletions packages/webapp/src/pages/_app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { NextPage } from "next"
import type { AppType } from "next/app"
import Head from "next/head"
import { useAccount, WagmiConfig } from "wagmi"

import { useState } from "react"
import { ensureLocalAccountIndex, wagmiConfig } from "src/chain"
import jotaiDebug from "src/components/lib/jotaiDebug"
import { GlobalErrorModal } from "src/components/modals/globalErrorModal"
Expand All @@ -31,6 +31,7 @@ export type FablePage = NextPage<{ isHydrated: boolean }>
// =================================================================================================

const MyApp: AppType = ({ Component, pageProps }) => {

return (
<>
<Head>
Expand Down Expand Up @@ -67,6 +68,11 @@ const ComponentWrapper = ({
const isHydrated = useIsHydrated()
const errorConfig = useErrorConfig()

// todo @eviterin: i've understood it so that decks are stored on chain. thus, below part is not going to be needed.
const testCards = [];
const [decks, setDecks] = useState<Deck[]>([]);
//

if (process.env.NODE_ENV === "development") { // constant
// eslint-disable-next-line react-hooks/rules-of-hooks
const router = useRouter()
Expand All @@ -87,7 +93,7 @@ const ComponentWrapper = ({
}

return <>
<Component { ...pageProps } isHydrated={isHydrated} />
<Component { ...pageProps } isHydrated={isHydrated} decks={decks} setDecks={setDecks}/>
{/* Global error modal for errors that don't have obvious in-flow resolutions. */}
{isHydrated && errorConfig && <GlobalErrorModal config={errorConfig} />}
</>
Expand Down
37 changes: 31 additions & 6 deletions packages/webapp/src/pages/collection.tsx
View file
Open in desktop
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have a feeling the collection and editor pages should probably be unified — make the editor part of the collection page. It'll probably require isolating some components to their own file to avoid a bloated source file though.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agreed. I'll get on that... at some point.

Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ import { useInventoryCardsCollectionGetCollection } from "src/generated"
import { Card } from "src/store/types"
import { Address } from "src/chain"
import { FablePage } from "src/pages/_app"
import Link from "next/link"
import { router } from 'next/router';

// NOTE(norswap & geniusgarlic): Just an example, when the game actually has effects & types,
// fetch those from the chain instead of hardcoding them here.
Expand All @@ -26,7 +28,7 @@ const initialEffectMap = Object.assign({}, ...effects.map(name => ({[name]: fals
const types = ['Creature', 'Magic', 'Weapon']
const initialTypeMap = Object.assign({}, ...types.map(name => ({[name]: false})))

const Collection: FablePage = ({ isHydrated }) => {
const Collection: FablePage = ({ decks, isHydrated }) => {

const { address } = useAccount()
const [ selectedCard, setSelectedCard ] = useState<Card|null>(null)
Expand Down Expand Up @@ -80,7 +82,6 @@ const Collection: FablePage = ({ isHydrated }) => {
<Head>
<title>0xFable: My Collection</title>
</Head>

{jotaiDebug()}
<main className="flex h-screen flex-col">
<Navbar />
Expand Down Expand Up @@ -141,22 +142,22 @@ const Collection: FablePage = ({ isHydrated }) => {
<div className="text-center m-2">{cardFlavor}</div>
</div>
</div>
</div>
</div>

{/* Card Collection Display */}
<div className="col-span-9 flex rounded-xl border overflow-y-auto">
<div className="col-span-7 flex rounded-xl border overflow-y-auto">
{ isHydrated && cards.length == 0 &&
<div className="flex flex-row w-full justify-center items-center">
<MintDeckModal callback={refetch} />
</div>}

{ isHydrated && cards.length > 0 &&
<div className="grid grid-cols-4 gap-4 overflow-y-auto pb-4">
<div className="grid grid-cols-4 overflow-y-auto pb-4">
{cards.map(card => (
<div className="m-4 bg-slate-900/50 hover:bg-slate-800 rounded-lg p-4 border-4 border-slate-900"
key={`${card.id}`}
style={{height: 'fit-content'}}
onClick={() => setSelectedCard(card)}>
onMouseEnter={() => setSelectedCard(card)}>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm sure I like this as a UX change.

Edit: I understand it in context, since clicking in the editor adds to / removes from the deck. See discussion in big comment.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll try to do some alternative experiments and see what sticks.

{/*TODO handle the image*/}
<Image src="/card_art/0.jpg" alt={card.lore.name} width={256} height={256} />
<div className="text-center">{card.lore.name}</div>
Expand All @@ -172,6 +173,30 @@ const Collection: FablePage = ({ isHydrated }) => {
))}
</div>}
</div>

{/* Deck Panel */}
<div className="col-span-2 flex rounded-xl border overflow-y-auto">
<div className="w-full flex flex-col items-center p-3">
{/* New Deck Button */}
<Link className="w-full px-4 py-2 mb-2 border rounded-md text-gray-100 bg-purple-900 hover:bg-gray-500 font-bold text-center focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" href={"/editor"}>
New Deck →
</Link>

{/* Deck Buttons */}
{decks.map((deck, index) => (
<button
key={index}
className="w-full px-4 py-2 mb-2 border rounded-md text-gray-100 bg-purple-900 hover:bg-gray-500 font-bold text-center focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
onClick={() => {
// Navigate to the editor view with the selected deck's index as a route parameter
router.push(`/editor?index=${index}`);
}}
>
{deck.name}
</button>
))}
</div>
</div>
</div>
</main>
</>
Expand Down
Loading