[ENG/ITA] SplinterRoi: Do You Like Icons? I do!

yesterday

La versione italiana si trova sotto quella inglese

The italian version is under the english one

SplinterRoi: Do You Like Icons? I do!

Knowing that at least two people have used — and found useful!!! — my little website convinced me to challenge the unbearable heat of these days, which doesn't let up even at night, and sit down to code and try to add a few more small upgrades to SplinterROI.

And among the things I absolutely wanted to do — since the very beginning of this project — was to add next to each card's name a set of icons identifying the edition, type, rarity, and color of each card returned by my script.

This for two main reasons:

Not everyone knows the cards well enough to match a name to its actual card: having a whole set of indicators next to it will allow anyone to identify each card much more quickly, so you can immediately tell if you're looking at, for example, an Archon, a Legendary card, or one from the Untamed set;
Icons are cool and look professional.

The second one was obviously the reason closest to my heart 🤣

And here they are!

Pulled directly from the official website, the icons represent:

edition,
type (Archon or Monster),
rarity, and
color
of each displayed card.

Even without knowing each of those cards, just by looking at the icons next to them, I can tell they’re all Archons from the Rebellion and Conclave Arcana editions.

And for each one, I can instantly understand its rarity and color, without needing to search them one by one on the official website or on some market.

It would be awesome to also have a small preview icon of the actual card itself, but implementing these icons alone was no easy feat — so I think the card preview can wait for now.

In short, compared to the dull, boring, and anonymous list that was shown before, the result is now much more appealing and clear.

I'd really love to also change the selection filters, adding these same icons alongside the current labels: that way the selection menu would work kind of like a legend, making it even easier to match each icon to its meaning.

I mean, I wonder how many people know that the aqua-green icon represents Archons... I didn't!

Easy? Not So Much for Me!

Surely, anyone who knows how to code probably thinks this little addition took me 5–10 minutes...

...and they’d be dead wrong! 🤣

Reaching the final result took a few hours of work, mostly because I wanted to keep my code as clean and reusable as possible, so the icons would only show up exactly where and when I needed them.

The first step was easy and involved creating a few dictionaries with all the icon URLs I needed:

URL = "https://d36mxiodymuqjm.cloudfront.net/website/"

color_icons = {
  "Red": f"{URL}collection/icon_element_fire.svg",
  "Blue": f"{URL}collection/icon_element_water_inactive.svg",
  "Green": f"{URL}collection/icon_element_earth_inactive.svg",
  "White": f"{URL}collection/icon_element_life_inactive.svg",
  "Black": f"{URL}collection/icon_element_death_inactive.svg",
  "Gold": f"{URL}collection/icon_element_dragon_inactive.svg",
  "Gray": f"{URL}collection/icon_element_neutral_inactive.svg",
}


rarity_icons = {
  1: f"{URL}create_team/icon_rarity_common_new.svg", 
  2: f"{URL}create_team/icon_rarity_rare_new.svg", 
  3: f"{URL}create_team/icon_rarity_epic_new.svg", 
  4: f"{URL}create_team/icon_rarity_legendary_new.svg",
}


card_type_icons = {
  "Summoner": f"{URL}collection/icon_filter_archons.svg", 
  "Monster": f"{URL}collection/icon_filter_units.svg",
}


edition_icons = {
    "0.1": f"{URL}icons/icon-edition-alpha.svg",
    "2": f"{URL}icons/icon-edition-promo.svg",
    "1": f"{URL}icons/icon-edition-beta.svg",
    "3": f"{URL}icons/icon-edition-reward.svg",
    "4": f"{URL}icons/icon-edition-untamed.svg",
    "5": f"{URL}icons/icon-edition-dice.svg",
    "7": f"{URL}icons/icon-edition-chaos.svg",
    "10": f"{URL}icons/icon-edition-chaos.svg",
    "8": f"{URL}icons/icon-edition-rift.svg",
    "12": f"{URL}icons/icon-edition-rebellion.svg",
    "13": f"{URL}icons/icon-edition-rebellion.svg",
    "14": f"{URL}icons/icon-edition-conclave-arcana.svg",
}

Then I created a function in my main script that "assembles" all the necessary icons for each individual card, so I’d have that data ready to use wherever I needed it:

def add_icons(edition, card_type, rarity, color):
    icons = []

    icons.append(f"<img src='{edition_icons[edition]}' width='20'>")
    icons.append(f"<img src='{card_type_icons[card_type]}' width='20'>")
    icons.append(f"<img src='{rarity_icons[rarity]}' width='20'>")
    icons.append(f"<img src='{color_icons[color]}' width='20'>")

    return " ".join(icons)

Lastly, in the file that handles the graphical part of my app, I added a for loop to attach each group of icons to the card name it refers to:

for d in data:
    d["Card"] = f"{d['icons']} - {d['name']}"

Now the d["Card"] variable is ready to be used in the DataFrame that builds the table.

As always, if you’re interested in checking out all the code, here’s the updated repo for the project:

https://github.com/Arc7icWolf/splinter-roi

And these are the previous posts I published about SplinterROI:

images owned by @splinterlands and/or their respective owners; cover edited with GIMP

to support the #OliodiBalena community, @balaenoptera is 3% beneficiary of this post

If you've read this far, thank you! If you want to leave an upvote, a reblog, a follow, a comment... well, any sign of life is really much appreciated!

If you are not registered on Splinterlands ... well, you are still in time to do the right thing.

And if you want to find out how much each card in Splinterlands yields on the rental market, you can now do so via SplinterROI.

drawing made by @ahmadmanga

Versione italiana

Italian version

SplinterRoi: Ti Piacciono le Icone? A me Sì!

Aver saputo che almeno due persone hanno utilizzato - e trovato utile!!! - il mio piccolo sito, mi ha convinto a sfidare il caldo tremendo di questi giorni, che non molla la presa nemmeno la notte, per mettermi a programmare e provare ad apportare qualche altro piccolo upgrade a SplinterROI.

E fra le cose che volevo assolutamente fare c'è, fin da quando questo progetto è nato, quello di aggiungere accanto al nome di ogni carta anche una serie di icone che identifichino l'edizione di appartenenza, il tipo, la rarità ed il colore di ogni carta restituita dal mio script.

Questo per due motivi principali:

Non tutti conoscono così bene le carte da riuscire a ricollegare un nome alla relativa carta: avere accanto tutta una serie di indicatori che la descrivono consentirà a chiunque di identificare molto più velocemente ogni carta, così da capire subito se si sta guardando, ad esempio, un Arconte, o una carta Leggendaria, o una carta del set Untamed;
Le icone sono fighe e professionali.

La seconda è ovviamente la ragione che mi stava più a cuore 🤣

Ed eccole qua sopra!

Prese direttamente dal sito ufficiale, le icone descrivono:

edizione,
tipo (Arconte o Mostro),
rarità e
colore
di ogni carta mostrata.

Anche senza conoscere ognuna di quelle carte, solo guardando le icone accanto posso vedere che sono tutti Arconti delle edizioni Rebellion e Conclave Arcana.

Di ognuna posso poi capire in un attimo la rarità ed il colore, senza bisogno di andarle a cercare una per una sul sito ufficiale o su un qualche market.

Il top sarebbe anche avere accanto una piccola icona che mostri un'anteprima della carta stessa, ma già implementare queste icone non è stata una passeggiata, per cui credo che per ora l'anteprima della carta possa aspettare.

Insomma, rispetto alla lista scialba, noiosa ed anonima che veniva mostrata prima, il risultato adesso è molto più accattivante e chiaro.

Ora mi piacerebbe molto cambiare anche i filtri di selezione, affiancando alle attuali scritte queste stesse icone: in questo modo il menù di selezione funzionerebbe come una sorta di legenda e diventerebbe ancora più semplice associare ogni icona al suo significato.

Mi chiedo infatti quante persone sappiano che quell'icona verde-acqua rappresenta gli Arconti... io non lo sapevo!

Facile? Per me non tanto!

Sicuramente chiunque sappia programmare sicuramente penserà che implementare questa piccola aggiunta mi abbia richiesto 5-10 minuti...

... e si sbaglierebbe di grosso! 🤣

Arrivare al risultato finale ha chiesto qualche ora di lavoro, soprattutto perchè volevo cercare di mantenere il mio codice quanto più pulito possibile e riutilizzabile, così da mostrare le icone solo dove e quando mi servono.

Il primo step è stato facile ed è consistito nel creare una serie di dizionari con tutti i link delle icone di cui avevo bisogno:

URL = "https://d36mxiodymuqjm.cloudfront.net/website/"

color_icons = {
  "Red": f"{URL}collection/icon_element_fire.svg",
  "Blue": f"{URL}collection/icon_element_water_inactive.svg",
  "Green": f"{URL}collection/icon_element_earth_inactive.svg",
  "White": f"{URL}collection/icon_element_life_inactive.svg",
  "Black": f"{URL}collection/icon_element_death_inactive.svg",
  "Gold": f"{URL}collection/icon_element_dragon_inactive.svg",
  "Gray": f"{URL}collection/icon_element_neutral_inactive.svg",
}


rarity_icons = {
  1: f"{URL}create_team/icon_rarity_common_new.svg", 
  2: f"{URL}create_team/icon_rarity_rare_new.svg", 
  3: f"{URL}create_team/icon_rarity_epic_new.svg", 
  4: f"{URL}create_team/icon_rarity_legendary_new.svg",
}


card_type_icons = {
  "Summoner": f"{URL}collection/icon_filter_archons.svg", 
  "Monster": f"{URL}collection/icon_filter_units.svg",
}


edition_icons = {
    "0.1": f"{URL}icons/icon-edition-alpha.svg",
    "2": f"{URL}icons/icon-edition-promo.svg",
    "1": f"{URL}icons/icon-edition-beta.svg",
    "3": f"{URL}icons/icon-edition-reward.svg",
    "4": f"{URL}icons/icon-edition-untamed.svg",
    "5": f"{URL}icons/icon-edition-dice.svg",
    "7": f"{URL}icons/icon-edition-chaos.svg",
    "10": f"{URL}icons/icon-edition-chaos.svg",
    "8": f"{URL}icons/icon-edition-rift.svg",
    "12": f"{URL}icons/icon-edition-rebellion.svg",
    "13": f"{URL}icons/icon-edition-rebellion.svg",
    "14": f"{URL}icons/icon-edition-conclave-arcana.svg",
}

Poi ho creato nel mio script principale una funzione che si occupasse di "montare" per ogni singola carta tutte le icone necessarie, così da avere questo dato a disposizione e poterlo utilizzare dove mi serve:

def add_icons(edition, card_type, rarity, color):
    icons = []

    icons.append(f"<img src='{edition_icons[edition]}' width='20'>")
    icons.append(f"<img src='{card_type_icons[card_type]}' width='20'>")
    icons.append(f"<img src='{rarity_icons[rarity]}' width='20'>")
    icons.append(f"<img src='{color_icons[color]}' width='20'>")

    return " ".join(icons)

Da ultimo, nel file contenente la parte grafica della mia applicazione, ho inserito un for loop che unisse ogni gruppo di icone al nome della carta cui si riferiscono:

for d in data:
    d["Card"] = f"{d['icons']} - {d['name']}"

Adesso la variabile d["Card"] è pronta per essere utilizzata nel DataFrame che crea la tabella.

Come sempre, se vi interessa vedere tutto il codice, qui trovate la repo aggiornata del progetto:

https://github.com/Arc7icWolf/splinter-roi

Mentre questi sono i precedenti post che ho pubblicato su SplinterROI:

immagini di proprietà di @splinterlands e dei rispettivi proprietari; cover da me editata con GIMP

a supporto della community #OliodiBalena, il 3% delle ricompense di questo post va a @balaenoptera

Se sei arrivato a leggere fin qui, grazie! Se hai voglia di lasciare un upvote, un reblog, un follow, un commento... be', un qualsiasi segnale di vita, in realtà, è molto apprezzato!

Se non sei registrato su Splinterlands... be', sei in tempo per rimediare.

E se vuoi scoprire quanto rende sul mercato dei noleggi ciascuna carta presente su Splinterlands, adesso puoi farlo tramite il sito SplinterROI.

disegno realizzato da @ahmadmanga

splinterlands dev python hivegc hive pimp pob hive-engine thgaming

0.29542464 BEE

6 comments

@tarabh54

yesterday

A great tool!, I find it very helpful for quickly focusing in on which cards to add into my rental account once it as build up enough rent from DEC to go shopping

0.00000113 BEE

@arc7icwolf74

1 hour ago

You are one of the two people that told me that tried it... thank you so much! It's so much more exciting to code something that someone actually uses :)

Next I'd like to add a feature that allows the user to put in their username, then the site compare all their rentals with the ones active on the market and shows the user where he/she is doing fine and where he/she might go with a higher price! Not sure if I can do it, but I'd like to try :)

0.00000025 BEE

@tarabh54

15 minutes ago

I like being able to see the number of cards rented, because it gives me an idea of how much volume there is in the rental market at any BCX qty, but I'm a bit confused by the "rental length" variable. As all rentals are for a min if 1 season , what is that variable selecting for ?

0.00000000 BEE

@davideownzall69

yesterday

le icone ci stanno tutte, i mi ricordo giusto le carte di chaos legion 😂

0.00000113 BEE

@arc7icwolf74

1 hour ago

Idem ahahah

comunque una bella legenda ci starebbe tutta, perchè anche alcune delle icone sono poco note (tipo quelle per Arconti e Mostri).

0.00000017 BEE

@libertycrypto2780

17 hours ago

Hai creato un tool utilissimo!
!PIMP
!discovery 30
@tipu curate 2

0.00000112 BEE

@tipu67

17 hours ago

Upvoted 👌 (Mana: 0/53) Liquid rewards.

0.00000000 BEE

@arc7icwolf74

1 hour ago

Grazie mille! Spero di riuscire a renderlo sempre migliore! Non sarà mai all'altezza di un sito professionale, ma voglio provare comunque ad alzare l'asticella... se riesco.

!LOL !PIZZA !HUG

0.00000000 BEE

@lolzbot71

1 hour ago

lolztoken.com

Why did Stalin only write in lowercase?
Because he hated capitalism.
_{Credit: reddit}
@libertycrypto27, I sent you an $LOLZ on behalf of arc7icwolf

(2/10)
Farm LOLZ tokens when you Delegate Hive or Hive Tokens.
Click to delegate: 10 - 20 - 50 - 100 HP

0.00000000 BEE

@splinterboost60

yesterday

This post has been supported by @Splinterboost with a 12% upvote! Delagate HP to Splinterboost to Earn Daily HIVE rewards for supporting the @Splinterlands community!

Delegate HP | Join Discord

0.00000000 BEE

@discovery-it67

17 hours ago

This post was shared and voted inside the discord by the curators team of discovery-it
Join our Community and follow our Curation Trail
Discovery-it is also a Witness, vote for us here
Delegate to us for passive income. Check our 80% fee-back Program

0.00000000 BEE

@pizzabot58

1 hour ago

PIZZA!

$PIZZA slices delivered:
@arc7icwolf_(1/10) tipped @libertycrypto27

_{Come get MOONed!}

0.00000000 BEE