GithubHelp home page GithubHelp logo

doriongilmore / mtggenerator Goto Github PK

View Code? Open in Web Editor NEW
2.0 2.0 0.0 3.1 MB

This app brings together several tools to easily create Magic decks.

Home Page: http://doriongilmore.fr/mtgBuilder/

License: MIT License

JavaScript 53.59% HTML 0.37% Vue 45.89% CSS 0.15%
magic-the-gathering scryfall-sdk

mtggenerator's People

Contributors

dependabot[bot] avatar doriongilmore avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar

mtggenerator's Issues

[Advanced Search] Close Info popup

Describe the bug

Close Info popup should display search form again

To Reproduce

Steps to reproduce the behavior:

  1. Go to 'Create a deck'
  2. Click on the eye to display advanced search form
  3. Click on 'Info'
  4. Close popup
  5. Error: search form doesn't appear

Expected behavior

Search form should come back once Info popup is closed.

Additional context
In console, following error :

Error in callback for watcher "modalName": "Error: Opening a modal when animating"

[Card] display symbols in oracle text

All symbols (mana, tap, etc.) are saved as {something}, they are processed and displayed correctly everywhere else in the app, but not in the oracle text.

MTG Arena

Describe the wanted format

Qte Name (set) ArenaId

Additional context

https://magic.wizards.com/fr/mtgarena

Export example:

Deck
2 Riddlemaster Sphinx (ANB) 31
2 Soulblade Djinn (ANB) 34
3 Warden of Evos Isle (ANB) 38
2 Wall of Runes (ANB) 37
2 Sworn Guardian (ANB) 35
3 Waterkin Shaman (ANB) 39
3 Cloudkin Seer (ANB) 25
2 Octoprophet (ANB) 29
2 Windstorm Drake (ANB) 42
3 Unsummon (ANB) 36
2 Glint (ANB) 28
2 Winged Words (ANB) 43
3 Waterknot (ANB) 40
1 Sleep (ANB) 33
25 Island (ANB) 113
1 Overflowing Insight (ANB) 30
1 Windreader Sphinx (ANB) 41
1 Frilled Sea Serpent (ANB) 27

Sideboard
4 Zephyr Gull (ANB) 44
3 Armored Whirl Turtle (ANB) 24
2 River's Favor (ANB) 32

Integration of bootstrap

"easily" achieved with bootstrap-vue, some refacto is needed :

Modals, personal Icons and Button components now obsolete, better handled by boostrap, list to update :

  • Menu
  • Home Page
  • Deck List Page
  • Deck Edition Page
  • Various Buttons
  • Modals
    • Confirmation
    • Import
    • Export
    • Card
    • Search
    • HomeFeature won't be used anymore

Deck Boxes in Deck Lists page should display a card art

Describe the solution you'd like

With bootstrap a "deck row" now looks like this :
image

It's quite easy to add an image at the top of these boxes, would be nice to display card art of user choice.
Since we use scryfall API, a lot of work is already done : https://scryfall.com/docs/api/images
"art_crop" property is exactly what we need, we will also need the "artist" property as stated in guidelines : "List the artist name and copyright elsewhere in the same interface presenting the art crop"

  • keep art_crop and artist properties in memory
  • In settings tab of Deck Edition page - choose a card to display
  • Update DeckList to display an image (and its artist) for each deck where configured

Additional context

Render on Untap.in : In our case the artist could be displayed in the badge instead of the deck price

Untap image

Settings

Is your feature request related to a problem? Please describe.

Drag and Drop can be difficult on mobile devices (more details in #23)
The Performance Graph can be implemented in many different ways and the actual one maybe is not the best (see #10)
Some parts of the settings proposed here are no solution to these problems, just nice settings to have.

Describe the solution you'd like

User should have some personnalisation choice implemented in :

  • Global Settings page - which generates a template
  • Settings tab in Deck Edition page - which can override the above

Anticipate that some settings may remain "global", like import/export format and favorite choices.
Also note that some "conditional configuration" should be available in global settings even if deactivated in order to have the template available in case it's activated for one deck. When user deactivates this kind of config (in global config), a toast message should explain the user why the rest of this config is still configurable.
(For example, "Type List Priority" is conditionned by "group by card type" config)

In order to remove drag and drop in Deck Edition, card list will be sorted automatically :

  • List order (by priority)
    • cmc
    • color
    • name
  • checkbox to group by card type
  • Type List Priority (in global settings, configurable even if above unchecked)

The perf graph can be configured in many different ways as we can see in this document

  • Performance Graph Config
    • checkbox to add noEffect category
    • checkbox to add allCards category
    • Neffects cards : "main" category config - radio buttons
      • counted in their N categories
      • only counted in 1st category found
    • Neffects cards : allCards category config - radio buttons (in global settings, configurable even if allCards category unchecked)
      • counted as N in allCards category (1 or N depending on previous config)
      • counted as 1 in allCards category
    • Possibility to define new searches
    • Possibility to deactivate any search
    • Possibility to prioritize the search (in global settings, configurable even if "only counted in 1st category found" unchecked)

Formats for Import/Export are actually hardcoded, user could create one himself :

  • Format name
  • Format type :
    • json : form proposing to choose several info and associate a key to each of them
    • text :
      • checkbox to export deck and list names
      • choice of a string to start comment lines (in global settings, configurable even if above unchecked)
      • checkboxes for quantity and set
      • choice between () [] {} for sets (in global settings, configurable even if set unchecked)
      • order choice

Favorite choices should be available for :

  • Card results display #24
  • Search default language
  • Ignore basic lands in Performance Graph (we know it does mana, maybe best considered as no effect)
  • Export format
  • Default deck background card (to display in deck list, see #26 ) :
    • checkbox to (de)activate this default background
    • choice between (in global settings, configurable even if above unchecked)
      • first card in the list
      • rarest card
      • most expensive card (in ccm)

Finally user should be able to save this configuration into a (json?) file.

Card results display

Is your feature request related to a problem? Please describe.

Most Magic sites have three dispositions to display card results during a search, the basic row actually implemented is not the favorite choice of every user.

Describe the solution you'd like

  • Three buttons (Implemented with only) one button to switch between following configurations:
    • Basic Information row
    • Detailed row with card miniature
    • Card only
  • This should be implemented in
    • Search Tab in Deck Edition
    • Card List in Deck Edition
    • Search page (when exists)
  • A favorite choice should be available in Settings Page

[Graph] performance stats improvement

The performance graph is inspired by https://github.com/lwardlegit/mtgbuild/blob/master/src/App.js#L71

I search in the oracle text for some keywords (see 'search' key) to increment a counter for each performance stat (see 'key' key)

Here is my search map at the moment, note that RegExp are supported :

  • { search: 'draw', key: 'draw' }
  • { search: 'token', key: 'token' }
  • { search: 'search', key: 'fetch' }
  • { search: 'add {', key: 'mana' }
  • { search: 'mana', key: 'mana' }
  • { search: 'at the beginning of', key: 'process' },
  • { search: 'at the end of', key: 'process' },
  • { search: 'when this', key: 'process' },
  • { search: 'lifelink', key: 'life' },
  • { search: /gains? ?[X\d]* life/, key: 'life' },
  • { search: 'tap target', key: 'control' },
  • { search: 'extra turn', key: 'control' }
  • { search: 'return target', key: 'control' }
  • { search: 'destroy target', key: 'control' }

This list can be improved, by changing any of them or adding new searches or new key performances, feel free to comment so we can discuss about it.

Example: Abzan Beastmaster has the following oracle text:

At the beginning of your upkeep, draw a card if you control the creature with the greatest toughness or tied for the greatest toughness.

This card will increment performances 'process' and 'draw' because it matches 'at the beginning of' and 'draw'

up-to-date version is stats.functionalities

Gives this kind of render :
image

Deck creation & edition

It should be easy to

  • change deck infos (name)
  • add cards from a basic search form
  • change number of cards
  • differentiate main list, token list etc
  • import/export a deck - boutons should be implemented here, actions will be implemented separatly.

Impression doesn't work anymore

Describe the bug

The button to print a deck doesn't work anymore.

To Reproduce

Steps to reproduce the behavior:

  1. Go to any deck (like Classic List)
  2. Click on the Print button
  3. Observe error - Alert displayed, detailed error inconsole

Expected behavior

The print action should be executed.

Desktop (please complete the following information):

  • OS: Windows 10
  • Browser Edge / Chrome / Chromium / Firefox
  • Version latest

Additional context
Log in console
Access to image at 'https://img.scryfall.com/cards/large/front/2/3/2398892d-28e9-4009-81ec-0d544af79d2b.jpg?1562902119' from origin 'http://localhost:4000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Remove drag and Drop

Is your feature request related to a problem? Please describe.

Drag and Drop can be difficult on mobile devices, especially when the scroll is available or user has big fingers

Describe the solution you'd like

  • Deck Card List : sorted automatically, following the settings
  • Deck Card List : Up/Down Buttons on top of each list
  • Deck Card List : Buttons on each card
    • add to list
    • change list
    • remove from list
  • Search Results : Button to add on a list; dropdown button with several levels :
  • This deck
    • Deck lists of cards
    • New list
  • Other deck
    • List of decks
      • Deck lists of cards
      • New list
  • New Deck

Describe alternatives you've considered

  • Possibility to drag and drop via a button instead of the complete card row

UX improvements

  • add a spinner for long actions (in code, search for 'todo add')
    • search
    • import list of cards
    • print
  • ask a confirmation when deleting a deck

Page 1 : list of decks

  • Button to create a new deck +
    table list with
  • deck name
  • detected colors
  • card count
  • creation date
  • modification date
  • deck action buttons to
    • print
    • update
    • delete
  • link to store and local storage
  • working buttons
    • print
    • update
    • delete

Search Page out of Deck Edition

Is your feature request related to a problem? Please describe.

If we only want to search for cards, we have to go to Deck Creation, it's like Windows, we need to click on Start to power off the computer ๐Ÿ˜ƒ

Describe the solution you'd like

  • A new Search Page should be created
  • The advanced search form should be available via a toggle button inside the page instead of in a modal
  • Set choice should be added in this form
  • We could display quick search links like 3 or 6 last published sets (Maybe in Home page instead of Search page)

UI Clean Up

  • GitHub button should not be present
  • Create Homepage
    • Display documentation
    • link to Github issues

New stats

Describe the solution you'd like

Some more information can be useful to add :

  • maximum colored cost by color
  • maximum devotion by color

The size of this info is too variable (depending on the colors in the deck) so a new tab called "More stats" could be necessary
If not, in order to display more info in the same place, one of the graph can be replaced by a basic table, Type Repartition graph seems to be the most appropriate.

Life Counter

Describe the solution you'd like

A page containing the following :

If no game in place :

  • team choice (fusion life/poison)
  • number of team (if above selected)
  • number of player (by team if selected)
  • starting life / max poison
  • button to start the game

If game started

  • buttons to start over the game or finish it (to configure a new one)
  • by team (or player if no team selected) :
    • life counter
    • poison counter
  • by player :
    • commander counter
    • mana counter

Page 2 : Detail Page of a deck (creation/edition)

This page should have three parts :

  • deck lists (top, half width)
  • card search (top, half width)
  • deck stats (bottom, whole width)

and contain following features :

  • deck list : deck name edition on top
  • deck list : buttons on top to :
    • import a list (open modal to have choices, add/replace/ignore edition etc.)
    • print the deck
    • save modifications
    • delete deck
  • deck list : possibility to have additionnal lists (tokens)
  • deck list : for each list
    • name should be editable
    • should have button to export
    • shoud display card count
  • deck list : for each card, should display
    • card name
    • mana cost ?
    • editable quantity (text and +/- buttons) like image on untap
    • editable border list : size for printing config (*reminder below)
  • card search : should be easy to search cards by name
  • card search : then drag one to drop it in one of the lists on the left
  • card search : should also propose several filters
    • text search instead of name search
    • card type
    • card subtype
    • card color
    • card ability
  • deck stats - following stats/graphs should be updated each time a deck list is updated.
    • color repartition
    • cmc repartition
  • link to store and local storage
  • working buttons
    • import a list
    • export a list
    • print the deck
    • save modifications
    • delete deck

*reminder about printing config
Real cards have a 3mm border, on internet, image do not always have a border, and it is not always complete, in vb macro 4 values were accepted to adapt size of the image, from 0 for 0mm border (none), to 3 for 3mm border (complete one).
The plan here is to have a similar choice with an additionnal value: don't print. Also it will be simpler to make the choice more explicit than vb macro
This choice would default to "complete border" for all cards except basic lands where it would default to "don't print". If not mistaken with this api almost all cards have complete borders so this choice probably won't be updated often.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.