YuGiOh Deck Builder

[TWDcarlos]

Project Name / Title

YuGiOh Deck Builder

Your Name / Title

Carlos

Project Description

Users can quickly build, edit and delete Decks for YuGiOh.

• https://github.com/TWDcarlos/YuGiOh-Deck-Builder

What 3rd Party Web API do you plan to use?

• YGO Pro DB - https://db.ygoprodeck.com/api-guide/

Which of the following describes you:

• [x] YouTube Subscriber
• [x] Twitch Follower
• [ ] Patreon Patron
• [ ] Superchat Donor
• [ ] Streamlabs Donor
• [ ] Coding Garden Moderator

[mertcanekiz]

Damn, I wish I knew about this API so I could do it instead... I don't think there are a lot of YGO players here though, so let me know if you need help with testing or want some feedback. Good luck :+1:

[TWDcarlos]

I'm waiting... i don't know if i can already start on it! thanks

[TWDcarlos]

Home - WireFrame

[TWDcarlos]

App - WireFrame

[w3cj]

Description looks okay. To save user deck configurations, you will need something like local storage, index db or web sql. Determine which one you will use and update the project description.

For the second wireframe, it might help to show the application in multiple states (multiple wireframes) and describe how the user will navigate between the screens i.e. searching, adding to deck, single card view, deck stats view etc.

Also, I'd like you to think through and write out how the user will interact with the app. Maybe these questions will help you, (you don't have to answer all of them, and the app does not have to be that complicated, but I think it will help you to focus on what this app will do):

• How will the user search for a card to add to the deck? By name? By type? By amount of attack / defense? (could be all of these, but which are top priority?)
• How will the user know when their deck is finished? A certain number of cards added? A certain number of cards of certain types added? Will you show counters?
• Will you show stats about the deck, like percentage of each type of card, percentage of attack focused card vs defense cards (I don't know much about YuGiOh, so sorry if those are not accurate metrics, but metrics of some kind would be good).
• Will you show an alert if a certain card has already been added to the deck?
• Will you show pre-built / configured decks that the user can use as a base to modify?

Sorry if that is information overload, but it seems like there are a lot of different directions you can take this app. I would like you to have a clear vision before getting started!

Please update your description and then comment here when you get started or if you'd like more feedback.

[TWDcarlos]

To save users decks i will use Local Storage.

I don't really understand the second question. You mean add like a Tab with screen to Deck, Search Card, Deck Stats ?

How will the user search for a card to add to the deck ?

For now i'll stick with just search by card name. but later on i can add filters to type, atk, def etc.

How will the user know when their deck is finished ?

On YuGiOh the deck is finished when you have 40 or more card and 60 or less cards. one deck also contain a extra deck (for fusion, etc) and a side deck (for cards for quick change), but i will leave it as a stretch for now.

Will you show stats about the deck ?

Maybe as a stretch

Will you show an alert if a certain card has already been added to the deck ?

Some kind of message should pop up when this happen. there are cards on YuGiOh that you can only add 1 or 2, the normal is 3.

Will you show pre-built / configured decks that the user can use as a base to modify ?

Maybe as a stretch

[TWDcarlos]

I Start to use Bulma as my CSS Framework, but I got frustrated and Bulma Docs don't have a search bar. So i will change to bootstrap. CSS is my nemesis.

[w3cj]

Yeah a lot of those things I mentioned would be stretch goals, but I wanted to be clear what the base functionality will be.

Feel free to get started!

[TWDcarlos]

I can't find a free loading gif!

[w3cj]

Here are a few I found on giphy:

https://media.giphy.com/media/wQn3SlhHnVmaQ/source.gif

https://media.giphy.com/media/OVRmUzOHzorLy/source.gif

You can also find free ones here: https://loading.io/ and here: http://loadinggif.com/

[w3cj]

Any updates to share?

[TWDcarlos]

I'm trying to make a router. When the user go to 'app#deck' they see deck view. When go to 'app#dashboard' they can search cards.

[mahendrjy]

Helpful Resources

• Vanilla JS MVC by CJ
• Building a single page application with vanilla js
• Making a Single Page App in ye good olde JS (ES6)

Simple Solution for SPA

HTML

<nav></nav>
<main>
  <section class="page-1">
    <div id="dashboard"></div>
  </section>

  <section></section>

  <section class="page-2">
    <div id="deck"></div>
  </section>
</main>
<footer></footer>

CSS

.none {
  display: none;
}

JavaScript

const page1 = document.querySelector('.page-1');
const page2 = document.querySelectorAll('.page-2');

const showPage1 = () => {
  page1.style.display = '';
  page2.style.display = 'none';
};

const showPage2 = () => {
  page1.style.display = 'none';
  page2.style.display = '';
}
};

showPage1();

// dashBoardButton.addEventListener('click', showPage1);
// deckButton.addEventListener('click, showPage2);

[TWDcarlos]

I'm sorry, i don't see this and i make the router using the url.

the project is deployed here

[mahendrjy]

It's ok :+1:

[w3cj]

Deployed site looks good! Would you like a code review or ui review?

[TWDcarlos]

Code Review please, I already know that the UI of the site is ugly.