fbpx

The Grinding Lands – React+AntDesign=❤️

Eccomi di nuovo con un articolo su un progetto basato su un gioco (ancora?!).

The Grinding Lands è un progetto semplice, nato in pochissimo tempo, ma che ha attirato l’attenzione di moltissimi nella scena online di Monster Hunter (il gioco su cui è basato questo sito).

The Grinding Lands nasce per sopperire alla mancanza di informazioni e guide di Monster Hunter World presenti sul web : solitamente frammentate e mescolate tra centinaia di ads, siti che caricano lentamente, articoli con contenuti errati o non aggiornati.

Da qui è nata la mia idea: prendere tutte le informazioni presenti sui siti più autorevoli (le wikis) e raggrupparli tutti sotto un unico sito.

La scelta del metodo di sviluppo

React o Vanilla JS

Considerato che, di primo acchito, pensavo che il progetto fosse molto semplice e senza molte pretese pensai di farlo in Vanilla JS.
Prima di scegliere mi son fatto un giro online per cercare qualche UI library come faccio sempre. Mi ero ripromesso di provarne una diversa per ogni progetto per riuscire a trovare la mia preferita.

Ed è qui che ho trovato AntDesign. 

Quasi per caso trovo un topic su Reddit con una lista di tutte le UI Library, le più affidabili e le più aggiornate. Ed è qui che ho trovato AntDesign.

Vi consiglio di passare dal sito per vedere nel dettaglio i componenti, la UI, la semplicità di implementazione e la qualità del codice. Per comodità vi inserisco qui di seguito i loro proclamati punti di forza:

  • 🌈  Enterprise-class UI designed for web applications.
  • 📦  A set of high-quality React components out of the box.
  • 🌍  Internationalization support for dozens of languages.
  • 🎨  Powerful theme customization in every detail.

Guardando i loro componenti mi vennero subito in mente dei modi con cui rendere la, piccola e semplice, web app che volevo fare perfetta.

Una semplice tabella responsive, la possibilità di utilizzare altri componenti direttamente nelle celle, poter utilizzare una ricerca per filtrare i risultati. Poter utilizzare dei menu a tendina per dar la possibilità all’utente di scegliere la lingua. Tutto era perfetto e chiaro.

The Grinding Lands - Screenshot della schermata principale
Screenshot della schermata principale della webapp

La gestione dei dati salvati

Dopo aver scelto la UI era il momento di scegliere come salvare i dati ottenuti dalle wikis online. Ho deciso di creare un semplice file JSON, considerando quanti pochi dati avrei dovuto gestire (sotto le migliaia).

Ho quindi ottenuto una lista di tutti i “mostri” da gestire e ho assegnato a ognuno di essi un ID univoco.

Per potervi spiegare questo passaggio devo prima fare una piccola spiegazione di come funziona il gioco saltando la trama e andando direttamente al punto.

Ogni mostro:

  • ha la possibilità di farvi trovare altri 4 / 5 mostri (predefiniti, non random);
  • dopo esser stato sconfitto, darà un oggetto (o un secondo in base alla sua difficoltà);
  • potrà essere trovato solo in determinati biomi;

La soluzione:

Ho quindi creato una relazione tra un mostro e l’altro creando un campo relations inserendo qui un array di IDs (IDs che sono dei mostri che possono essere trovati dal determinato mostro).

Ho aggiunto la proprietà items composta da un oggetto con due proprietà normal tempered (le due variabili di difficoltà del mostro).

Infine ho aggiunto la proprietà locations composta da un array di oggetti composti da ID:int e levels:array di stringhe.

Lo sviluppo con React

Purtroppo è impossibile dare una spiegazione a ogni singola decisione fatta nello sviluppo dei componenti.

Come sempre però i miei progetti sono su Github, potete quindi passare da li e vedervi ogni singolo componente per capire cosa fa e perché ho scelto di usarlo in quel modo.

Links utili:

Marco Giannini

Marco Giannini

Ciao! Piacere, sono Marco Giannini e sono un Full-Stack Developer. Sto lavorando un sacco con PHP e WordPress ma AMO JavaScript e React. Ogni tanto pusho su Github qualcuno dei miei assurdi progetti

Condividi l'articolo

Condividi su facebook
Facebook
Condividi su linkedin
LinkedIn
Condividi su telegram
Telegram
Condividi su whatsapp
WhatsApp
Condividi su email
Email

Sfoglia le categorie

Condividi 6Magazine

Condividi su facebook
Facebook
Condividi su linkedin
LinkedIn
Condividi su email
Email
Condividi su whatsapp
WhatsApp

Vuoi rimettere mano alla tua comunicazione?