Hearthstone card helper web application #1

hello explorers and welcome to another
video and today I’m going to talk a little bit about the side project that I
have the thought would be funny to implement and try some techniques out
I’ve done before but yeah I wanted to do it in a little bit larger scale but
still run quick and dirty so i will get the functionality that i need and not
spend too much time and what I wanted to do is as easy as I wanted to have
something where I could keep my decks in hearthstone on my disk and work with
them outside of the game and in order to do that I needed the cards so the first
thing I do in all of these projects is that I go out to google and search for
different resources that could help me develop this project so I found this
resource called hearthstone API dot-com which has all the cards and they are
willing to update all the core data for every iteration and release of hearthstone
and so I thought that would be a great resource to use as my starting point I
get cards into my database and also they actually had all the data at mashape
so in order to get the data I had to create account that mashape and then
you get an API key and you could load the data from there so let’s start with
the the prerequisites for this project I wanted to do something local easy so I
just installed the JSON server from npm and so this call here install -g
json-server is all that you need to get the json-server and then you run
that against your database db.json and my database start off
quite easy so let’s go to the code window here and my example file here
this is everything I need to have in my database I say there is an endpoint
called cards and in that endpoint i will put some cards so yet say an empty list
of cards is what i start up with and that’s everything I have to get going
with that and then i’m using polymer so here you have a lot of
different things that you need to use in order to run and work with the polymer
application in my case I just need this command polymer serves I run that as
well on my source directory and it would serve my application up so this little
repositories on my github it’s open so you can download it if you like and
let’s look at the final project the final product so this is what I created
I spent about two hours on it or something perhaps three and what I
wanted to do with this interface is make something easy where I can load all the
cards in the deck like this and i could see which card is owned by me and you
can actually own to version of the same card so i wanted to depict that as well
so in this case i actually owned the ancestral healing two instances of
that and innovate I own two instances of that too and in this interface i had
enters you can give it the mashape key click update cards and that’s the come
on that will download all the cards and put them into your database load card is
just to show the list again if you want to reload this current list that you are
viewing at the moment and then I also added some drops down so I can select
druid for instance I will never we see all the druid cards I could select cost
three that I would see all the costs three cards and as you see here I
haven’t clicked this costs three cards yet at least click the
cost zero and cost one just to get a feel of how good this interface is at
actually clicking the cards and then i can actually if I empty these and look at
all the cards that I own two instances of and all the cards i own at least one
is dissolve so here I will see all the cards in my deck that I’ve clicked
already so this is the small GUI that are built and it’s very quick and dirty
no really design thought into it I just wanted something that I could work with
fast and make my work easier for me so as I add functionality to this interface
I will add more bells and whistles to it as well and I have actually one more
feature in this interface and that’s a mouse pointer here i am so i can
actually open and close the different information that is in this database and
there’s quite a lot of information that you can use in order to show your cards
so that’s pretty much all that i wanted to show you with this interface so let’s
go over to the code again so this is the date of association it’s a lot of
information and then we go to the code that is actually using this first off we
start off with the index.html it’s something created by polymer so I
haven’t done that many things here i have added some information about the
littles we get the icon up in the toolbar I’ve added titles and some
description and i also have added some standard padding in with to the HTML and
body so they will show up a little bit nicer in the interface so the main
application is actually called app and in this application have some import and
this is a list that I will fill in all of their I get more things that this
interface will rely on or depend on and I also depend on my hearth-card which is
another small little piece that I’ve built a component that will actually
handle each of these separate cards into the interface and then we have some
styling here nothing imported some flex layouts I added some
styling to make the drop downs a bit smaller and get some border radius and
on those and so on so they looked a little bit nicer then I have three
different iron-ajax and this is just to keep it very simple I wanted to have one
ajax end point where I could call for the cards from the mashape API and I
wanted a back-end call where I could do all the gets and only get information
and different queries and then I have an update command so I separate where I
send my updates and where I get my information so those are the endpoints I
use at the moment and here we have the input for the mashape key we have two
buttons as we saw in the interface we I use the paper drop-down menu light it’s
a little bit nicer to work with then the large implementation of paper drop-down
menu and but they are very similar the lite version will make a little bit less
HTML and I’m not really sure if the other version has more
functionality to it and but it’s quite enough for me I set a label on these and
in my case I actually tell it to not float the label because I wanted my drop
downs to be small and actually fit into the bar at the top and if I have a float
label the layout will push them down a bit and it will look funky and I also
removed all animations because for some reason I got an error
with the animations even though i actually have looked at
all the dependencies and everything should be in place so i’m not really
sure if they have anything wrong there and the error message is actually that
they try to set the target on an event when I do the animation or when the
animation ends and that’s not a valid command for javascript you can’t change
an event that is sent I’m not really sure what they are trying to accomplish
there and then the full api list or the full list is these five lines i have a
list div which will fix the Flex layout and then I just have a template which will
iterate all over all cards and display this card components the application
down here is also small we have ajax headers which is actually not required
because I set them on my own I have the mashape key cards player class cost
owned and play cards cost and owned or the properties for the drop downs so
those I will use later on the cards is self-explanatory then i have it to
listeners so my card implementation will not do the actual click change it will
just fire an event and i will do the clicked logic in my application
that is not a good way to do a composition because you should have
separation of concerns but in my case I wanted to do something quick and
dirty so this works for me and then I implemented an observer that will
observe the values of player class costs and owned and if any of those
change it will trigger so that will do all the different changes if we move any
of the drop downs and the function down here is also very easy I set up a get on
this back-end method I set some standard parameters here I want all the
collectible and I don’t want the hero cards so that will remove some debug
cards and the actual hero cards because they come ask cards as well and I don’t
want them in my collection and then if I have a player class I will set that else
I will keep that off my parameter list and if I have a cost of seven I will
actually take everything greater than 7 and i will also sort these by name this
is something that I put in just so to make the clicking easier for if I want
to click all the costs one card say they actually come sorted in the list in the
application so it was easier to follow along and actually find them and this is
the logic to handle if I have 1 2 or none of them clicks and then i set the body
because the body is used when i patch information so i wanted to clear that if
there is any information in that already and then i generate the request so then
we have this little function here if I get this fire event for that the owner
of one has changed then i will send that information over to this owner changed
function and i do the same with two the only difference is the actual data and
in this owners changed I do this patch command where I said send the body up
and will actually set the values true and false on the backend server and the
nice thing here is they have a JSON local DB which is just a JSON file and
all the updates with the post push a post, patch or put will be done for
me also delete will work fine and I’m not going to think about the backend
stuff I just build the front-end logic and I get all the backend for free and
the update cards I just set the header of mash key and send that off and it
will fetch all the cards for me load cards as i said before i get all the
collectibles and not hero cards so that’s a an empty API call so it might
not be required anymore but I had the button from the start because I don’t
didn’t have all the drop downs so I wanted to load all the cards and just
see what I got during development and on-card update response is actually
when I get the response back from the call to mashape I want to handle that
response and post it into my collection so this is where I post all the
different objects or all the different cards into my database and then I have
some small debug information here I all errors are handled by console logging
them so if I get an error I will see it in the log when develop
things and the card response is just to see that when I post something into the
database it will actually log card response for that toast so during the
update cycle i can see when it writes down all the cards and when it writes
5,000 cards it’s good to see that that value updates you see and how much of
the data has actually been downloaded in the future I might do some progress bar
or something is to handle that a little bit nicer and let’s go over and look at
the card it’s quite easy here also some small CSS to decide how large the image
should be and how these box card content should look I add the two check boxes

Danny Hutson

Leave a Reply

Your email address will not be published. Required fields are marked *