Lucrare de licent ,a [607120]

UNIVERSITATEA DIN BUCURES ,TI
FACULTATEA DE MATEMATIC ˘A S ,I INFORMATIC ˘A
SPECIALIZAREA INFORMATIC ˘A
Lucrare de licent ,˘a
Idleville – Board Game Online – joc ˆın
browser
Coordonator s ,tiint ,ific: Student: [anonimizat] ,tean Ioana Grafu Marius George
Bucures ,ti, Rom ˆania
Septembrie 2020

Cuprins
Introducere 3
Motivat ,ia alegerii . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Obiectivele lucr ˘arii . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Structura lucr ˘arii . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Conceperea aplicat ,iei . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1 Tehnologii folosite 9
1.1 JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
1.1.1 React.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
1.1.2 Redux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
1.1.3 Node.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
1.1.4 MongoDB . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
1.1.5 Socket.IO . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
1.1.6 bcrypt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
1.1.7 Parcel.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
1.1.8 Babel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
1.1.9 Gulp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
1.1.10 Chance.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
1.2 HTML – Hypertext Markup Language . . . . . . . . . . . . . . . . . . . . . . 12
1.3 SCSS – Syntactically Awesome Style Sheets . . . . . . . . . . . . . . . . . . . 12
1.4 SVG – Scalable Vector Graphics . . . . . . . . . . . . . . . . . . . . . . . . . 13
2 Structura fis ,ierelor 15
3 Prezentarea aplicat ,iei 18
3.1 Clasele din client . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
3.2 Modelele din baza de date . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
3.3 ˆInregistrarea ˆın platform ˘a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
3.4 Character Editor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
3.5 Logarea ˆın cont . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
3.6 Uitarea parolei s ,i modificarea acesteia . . . . . . . . . . . . . . . . . . . . . . 28
4 Sect ,iune 30
Concluzii 31
List˘a de figuri
1 Elemente alea Creatorului de Avatare. Desene mai vechi f ˘acute pentru o alt ˘a
ˆıncercare de proiect. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
2 Versiune mai veche a h ˘art,ii. Acest aspect a fost inspirat de h ˘art,i vechi, dar s ,i de
jocuri precum Red Dead Redemption 2 [29] . . . . . . . . . . . . . . . . . . . 6
3 Versiune mai recent ˘a a h ˘art,ii. Se poate observa s ,i structura aplicat ,iei pl ˘anuit ˘a
ˆın Adobe XD. De data asta un aspect mai modern, inspirat de jocuri precum
Grand Theft Auto V [12] . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
4 Harta jocului. Ultima versiune a h ˘art,ii, v˘azut˘a din aplicat ,ia Adobe XD. . . . . . 8
1

5 Tabel compatibilitate – versiunea minim ˘a a browserelor care permit aceast ˘a
act,iune (surs ˘a:https://www.w3schools.com/css/css3_variables.asp [37]) 12
6 Fragment de cod ce exemplific ˘a un mixin – ˆIn partea de sus se poate observa
declararea mixin-ului, iar ˆın partea de jos folosirea acestuia ˆın cadrul unei com-
ponente. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
7 Exemple iconit ,e. 12 iconit ,e din pachetul de aproximativ 60 de iconit ,e folosit ˆın
proiect. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
8 Exemplu mapare variabile din state Redux ˆın props React . . . . . . . . . . . . 18
9 Prima pagin ˘a – pentru utilizatori nelogat ,i . . . . . . . . . . . . . . . . . . . . . 24
10 Pagina de ˆInregistrare a contului – pentru utilizatori nelogat ,i . . . . . . . . . . 25
11 C ˆamp de tip parol ˘a – cu text ascuns (sus) s ,i text vizibil (jos) . . . . . . . . . . . 25
12 C ˆamp input cu eroare . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
13 Exemplu de mai multe culori ce pot fi afis ,ateˆın previzualizarea unui tip de culoare 27
14 Exemplu de selector de elemente ˆın cadrul creatorului de avatare . . . . . . . . 27
15 Exemplu de slider pentru opacitate ˆın cadrul creatorului de avatare . . . . . . . 27
16 Exemplu de avatar creat de creator de avatare . . . . . . . . . . . . . . . . . . 28
17 Exemplu eroare comun ˘aˆın pagina de login . . . . . . . . . . . . . . . . . . . 28
18 C ˆamp cu adres ˘a de email cenzurat ˘aˆın cadrul formularului de uitare a parolei . 29
19 Exemplu figur ˘a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
List˘a de tabele
2

Introducere
Motivat ,ia alegerii
Am ales ca tem ˘a a lucr ˘arii de licent ,˘a s˘a fac un joc ˆın browser deoarece ˆımbin ˘a motivul pentru
care am dorit ˆınc˘a din liceu s ˘a studiez informatic ˘a, s ,i anume s ˘a reus ,esc s ˘a creez un joc, cu
mediul ˆın care am ˆınv˘at,atˆın ultimii ani s ˘a lucrez, s ,i anume web. Am considerat c ˘a acest subiect
va include destul de multe caracteristici c ˆat s˘a m˘a ajute s ˘aˆımi dezvolt cunos ,tint ,ele, iar ˆın final
voi avea un produs interactiv. Aceast ˘a lucrare reprezint ˘a totodat ˘a suma cunos ,tint ,elor adunate
dinˆıncerc ˘ari din trecut pentru a face un astfel de joc.
Obiectivele lucr ˘arii
Aceast ˘a aplicat ,ie reprezint ˘a un joc ˆın browser, de tip board-game. Inspirat ,ia principal ˘a vine din
faimosul joc Monopoly. Aplicat ,ia cont ,ine s ,i o platform ˘a cu utilizatori, unde lumea poate veni,
crea noi prietenii s ,i juca al ˘aturi de alt ,i juc˘atori.
Un utilizator se identific ˘a dup ˘a un nume unic pe platform ˘a ales la ˆınregistrarea ˆın platform ˘a. Va
avea totus ,i posibilitatea de a-s ,i schimba numele mai t ˆarziu, ˆıns˘a tot cu unul unic. La ˆınregistrare
utilizatorului i se va cere s ,i o adres ˘a de e-mail. Aplicat ,ia nu ˆıs,i propune s ˘a p˘astreze date per-
sonale ale utilizatorilor ei, as ,a c˘a adresa va fi salvat ˘aˆın form ˘a criptat ˘a (s ,i o form ˘a obfuscat ˘a,
care cont ,ine doar primele caractere ale mail-ului s ,i ale domeniului, pentru a putea fi totus ,i recu-
noscut de c ˘atre utilizator). Adresa de e-mail este salvat ˘a pentru a fi folosit ˘aˆın cazul ˆın care un
utilizator s ,i-a uitat parola: el va fi nevoit s ˘a introduc ˘a numele de utilizator al contului s ,i adresa
de e-mail de la ˆınregistrare.
Un utilizator beneficiaz ˘a de asemenea s ,i de un avatar. La ˆınregistrare un nou avatar va fi creat,
reprezentat de un personaj construit modular pe baza elementelor numite ˆın cadrul platformei
Comune (Common), urm ˆand ca mai t ˆarziu s ˘a poat ˘a modifica acest avatar cu alte elemente pe
care le va primi juc ˆand pe platform ˘a.
Fiecare utilizator det ,ine s ,i un Titlu de Juc ˘ator (Player Title), put ˆand primi mai multe pe parcur-
sul jocului. Utilizatorul va punea selecta titlul pe care s ˘a-l afis ,ezeˆın platform ˘a fat ,˘a de ceilalt ,i
juc˘atori.
Platforma cont ,ine s ,i un sistem de prieteni. Utilizatorii pot c ˘auta alt ,i juc ˘atori s ,i trimite cereri
de prietenie, iar destinatarii cererilor ˆın cauz ˘a vor fi notificat ,iˆın timp real ˆın cadrul aplicat ,iei.
De asemenea, prietenile vor putea fi anulate de c ˘atre juc ˘atori.
ˆIntre utilizatorii prieteni exist ˘a s,i un sistem de mesagerie. Se pot trimite mesaje de la un juc ˘ator
c˘atre altul iar acesta le va primi relativ instantaneu.
ˆIn aplicat ,ie se g ˘asesc s ,i formulare pentru trimitere de feedback s ,i pentru raportat bug-uri c ˘atre
staff. Acestea pot fi v ˘azute doar de c ˘atre autori s ,i staff.
Exist ˘a s,i un sistem de lobby-uri, camere virtuale ˆın care juc ˘atorii se pot aduna ˆınaintea unui
meci. Un lobby poate fi privat sau public. Un lobby privat nu apare ˆın lista de lobby-uri, ci
doar cu invitat ,ie din partea unui membru. Membrii lobby-ului pot trimite invitat ,ii c˘atre ceilalt ,i
juc˘atori, iar aces ,tia vor fi anunt ,at,iˆın timp real ˆın cadrul platformei. ˆIn cadrul lobby-ului se
g˘ases ,te s ,i un chat, prin care membri pot trimite mesaje pe care doar ei le pot vedea. Liderul ( ˆın
general persoana care pornes ,te lobby-ul) lobby-ului poate revendica dreptul altor membri de a
folosi chat-ul, s ,i chiar ˆıi poate da afar ˘a din lobby. Odat ˘a un membru dat afar ˘a din lobby de c ˘atre
3

lider, el nu se mai poate ˆıntoarce.
Liderul poate decide s ,i lungimea jocului care urmeaz ˘a s˘a fie jucat, select ˆand num ˘arul de runde
care vor fi jucate.
Fiecare membru poate ap ˘asa un buton pentru a spune c ˘a este preg ˘atit de joc (Ready), iar c ˆand
tot,i juc˘atorii sunt preg ˘atit,i, liderul poate ˆıncepe jocul.
Pagina jocului poate fi v ˘azut˘a doar de c ˘atre utilizatorii aflat ,iˆıntr-un joc activ. Fiecare juc ˘ator
are acces la informat ,ii despre statutul lor. Pot vedea harta jocului ˆın orice moment, o pot mis ,ca
s,i pot inspecta locat ,ii. Pe aceast ˘a pagin ˘a juc ˘atorilor li se ofer ˘a s,i un buton cu care pot deschide
o fereastr ˘a modal ˘a cu instruct ,iuni despre joc. De asemenea, s ,i aici exist ˘a un chat, prin care
juc˘atorii pot comunica.
Jocul este turn-based, deci fiecare juc ˘ator trebuie s ˘aˆıs,i as ,tepte r ˆandul. C ˆand r ˆandul clientului
(utilizatorul logat curent) vine, acesta va putea da cu zarul, s ,i se va putea muta pe hart ˘aˆın ce
direct ,ie dores ,te,ˆın funct ,ie de zar. Dac ˘a ajunge l ˆang˘a o locat ,ie (o cl ˘adire), poate interact ,iona cu
aceasta (de exemplu s ˘a o cumpere). Unele propriet ˘at,i din joc ˆıl vor fort ,a pe juc ˘ator s ˘a pl˘ateasc ˘a
”chirie” atunci c ˆand acesta poposes ,te lˆang˘a ele. Banii respectivi vor merge c ˘atre proprietarul
cl˘adirii.
Rundele din joc sunt numite ”zile” (days). O rund ˘a trece dup ˘a ce fiecare juc ˘ator s ,i-a jucat tura.
La finalul fiec ˘arei runde, fiecare juc ˘ator va pl ˘ati taxe – exist ˘a o valoare minim ˘a pe care fiecare
juc˘ator o pl ˘ates ,te, la care se adaug ˘a o port ,iune din propriet ˘at,ile det ,inute.
La finalul jocului, juc ˘atorii vor primi diverse elemente pentru modificarea avatarului sau titluri
de membru, numite ˆın cadrul jocului ”drops”. Utilizatorul poate p ˘ar˘asi oric ˆand jocul, ˆıns˘a dac ˘a
ˆıl p˘ar˘ases ,teˆınainte ca jocul s ˘a se termine, nu va mai putea c ˆas,tiga nimic. Dac ˘a juc ˘atorul d ˘a
faliment, va fi considerat pierz ˘ator. Are ˆınc˘a dreptul la a c ˆas,tiga ”drops”, ˆıns˘a probabilitatea
este destul de mic ˘a. Daca juc ˘atorul este ultimul r ˘amas care nu a dat faliment, el va fi numit
cˆas,tig˘ator, s ,i are s ,anse mari de a primi ”drops”. Dac ˘a num ˘arul de runde decis la ˆınceputul jocu-
lui se atinge, jocul va fi considerat remiz ˘aˆıntre juc ˘atorii r ˘amas ,i. Tot ,i cei r ˘amas ,i vor putea primi
”drops”.
Platforma cont ,ine s ,i o parte administrativ ˘a, de unde staff-ul poate modifica anumite aspecte ale
jocului. Staff-ul poate edita utilizatorii, rolurile, titlurile de membru (poate ad ˘auga sau scoate),
elementele avatarelor, poate interact ,iona cu rapoartele de bug-uri postate de utilizatori s ,i poate
edita nodurile h ˘art,ii jocului.
Platforma poate fi trecut ˘a s,iˆıntr-un mod ”Offline”, acest lucru limit ˆand accesul la platform ˘a
doar utilizatorilor din Staff. Acest mod este menit pentru a fi folosit ˆın cazuri de mentenant ,˘a.
S,i mai multe aspecte pot fi editate prin intermediul unui fis ,ier de constante aflat pe server.
Structura lucr ˘arii
—-
Conceperea aplicat ,iei
De faptul c ˘a pentru acest proiect voiam s ˘a fac un joc, am fost sigur de la ˆınceput. Ca platform ˘a
s,tiam c ˘a vreau s ˘a dezolvt ˆın web, datorit ˘a experient ,ei pe care deja o aveam, dar s ,i a faptului
c˘a oricine are un browser, deci ˆın teorie oricine ar dori va putea juca. Problema a venit c ˆand
a trebuit s ˘a g˘asesc idei s ,i un concept destul de atr ˘ag˘ator care s ˘a stea la baza acestui joc. Ideea
4

init ,ial˘a a fost inspirat ˘a din primul astfel de joc la care am lucrat ˆımpreun ˘a cu un coleg ˆın liceu, s ,i
anume, un joc de tipul Idle. Primul exemplu de astfel de jocuri care ˆımi vine ˆın minte de fiecare
dat˘a cˆand m ˘a gˆandesc la acest subiect, este jocul Cookie Clicker [5]. Ilustr ˆand calit ˘at,ile de baz ˘a
ale unui joc Idle, scopul jocului era unul simplu, colectatul de o anume ”moned ˘a”,ˆın cazul
Cookie Clicker, pr ˘ajituri. D ˆand click pe o pr ˘ajitur ˘a aflat ˘a pe ecran, primeai o pr ˘ajitur ˘a, put ˆand
apoi s ˘a investes ,ti pr˘ajiturile respective ˆın diverse act ,iuni care duceau la crearea de pr ˘ajituri f ˘ar˘a
input din partea juc ˘atorului (de exemplu cump ˘arai un ”cursor” care s ˘a dea click ˆın locul t ˘au,
sau o bunicut ,˘a care s ˘a le g ˘ateasc ˘a). De aici s ,i numele de joc Idle – cuv ˆantul ”idle” ˆın englez ˘a
ˆınseamn ˘a ”inactiv”.
Doream s ˘a duc ideea de astfel de joc, un nivel mai sus, s ,i anume s ˘a creez o platform ˘a, deghizat ˘a
ˆıntr-un oras ,(inspirat ,ia din spatele numelui ”Idleville”), ˆın care s ˘a existe o astfel de moned ˘a care
s˘a poat ˘a fi minat ˘a de c ˘atre juc ˘atori. Juc ˘atorii ar interact ,iona ˆıntre ei s ,i ar putea s ˘a cumpere robot ,i
care s ˘a mineze ˆın locul lor. ˆIn cadrul acestui or ˘as,el,ˆıt,i puteai crea s ,i propriul cet ˘at,ean, idee din
care a evoluat creatorul de avatare (f ˘acut dintr-o idee mai veche, c ˆand am mai ˆıncercat s ˘a fac un
astfel de creator, s ,iˆınc˘a aveam elementele respective ce pot fi v ˘azute s ,iˆın Figura 1).
Figura 1: Elemente alea Creatorului de Avatare. Desene mai vechi f ˘acute pentru o alt ˘aˆıncercare
de proiect.
Urma apoi s ˘a proiectez aspectul unui astfel de oras ,. Astfel harta jocul a cunoscut mai multe
aspecte, unele ajunse ˆıntr-un stadiu mai ˆınaintat ˆınainte de a fi abandonate. Versiuni mai vechi
ale h ˘art,ii pot fi v ˘azute ˆın Figurile 2 s ,i 3.
5

Figura 2: Versiune mai veche a h ˘art,ii. Acest aspect a fost inspirat de h ˘art,i vechi, dar s ,i de jocuri
precum Red Dead Redemption 2 [29]
Figura 3: Versiune mai recent ˘a a h ˘art,ii. Se poate observa s ,i structura aplicat ,iei pl ˘anuit ˘aˆın
Adobe XD. De data asta un aspect mai modern, inspirat de jocuri precum Grand Theft Auto V
[12]
Ajung ˆandˆın acest stadiu, am ˆınceput s ˘aˆımi pierd ˆıncrederea ˆın conceptul ales. Nu credeam
c˘a va funct ,iona la acest nivel de joc Online, cu mai mult ,i juc ˘atori. Ca un astfel de joc s ˘a fie
destul de bine f ˘acut, as ,fi avut nevoie de mult mai mult timp. Astfel, a trebuit s ˘a g˘asesc un nou
concept, dorind s ˘a p˘astrez c ˆat mai mult din elementele deja construite. Ideea la care am ajuns, a
fost una mai veche. Doream s ˘a fac un board-game care s ˘a poat ˘a fi jucat online. Am mai ˆıncercat
aceast ˘a idee s ,iˆımpreun ˘a cu alt ,i colegi ˆın cadrul materiei Metode de Dezvoltare Software. Nici
atunci nu reus ,isem s ˘a ajungem chiar p ˆan˘aˆın punctul ˆın care ne doream, dar s ,tiam c ˘a astfel am
6

deja r ˘aspuns pentru ˆıntreb ˘ari precum: ”Cum va funct ,iona jocul?”, ”Cum vor ˆıncepe jocurile?”.
Am ajuns astfel la ideea de a face un joc de tip Monopoly [18]. Din Monopoly am ˆımprumutat
idei precum propriet ˘at,ile de pe hart ˘a s,i chiria ce trebuia pl ˘atit˘a cˆand un juc ˘ator ajunge ˆın vizit ˘a.
De asemenea, similar Monopoly, ca un juc ˘ator s ˘a se deplaseze pe hart ˘a, el trebuie s ˘a dea cu za-
rul, urm ˆand apoi s ˘a se mis ,teˆın funct ,ie de valoarea dat ˘a. Am evoluat aceste idei, aduc ˆand plans ,ei
jocului un aspect mai apropiat de cel al unei h ˘art,i, f˘acˆand c ˘aile pe care le pot lua juc ˘atorii s ˘a
se bifurce, ˆıncerc ˆand s ˘a ofer s ,i posibilitatea juc ˘atorilor de a luat decizii. Aceast ˘a idee a fost
discutat ˘a s,i cu unul dintre colegii din grupul pentru Metode de Dezvoltare Software. Aspectul
de hart ˘a a jocului a dus s ,i la alte noi aspecte ale jocului: de exemplu, un punct de oprire al
juc˘atorilor (numit nod) se putea afla la o intersect ,ie, ceea ce ˆınseamn ˘a c˘a juc ˘atorul poate avea
acces la mai multe cl ˘adiri ˆın acelas ,i timp. Acest lucru a adus mai multe ˆıntreb ˘ari, precum: ”Ce
seˆıntˆampl ˘a dac ˘aˆın acel nod sunt mai multe propriet ˘at,i det ,inute de mai mult ,i juc˘atori? Va trebui
s˘a le pl ˘ateasc ˘a tuturor chirie?”. Am ales ˆın schimb s ˘a construiesc un sistem de alegere, oferind
juc˘atorului posibilitatea de a alege cui vrea s ˘a pl˘ateasc ˘a, cre ˆand astfel s ,i noi scenarii: de exem-
plu, un alt juc ˘ator poate achizit ,iona o cl ˘adire cu acces din acelas ,i nod, pentru a crea concurent ,˘a
celuilalt. Mai multe detalii despre aceste sisteme voi da ˆın cadrul capitolului destinat lor.
Acest nou concept al jocului, a dus s ,i la proiectarea unei noi h ˘art,i. Ultima versiune la care
ajunsesem era mult prea mare pentru acest tip de joc, am crezut c ˘a poate deveni mult prea con-
fuz˘a pentru juc ˘atori s ,i chiar mult prea monoton ˘aˆın cazul unor jocuri repetate. Doream o hart ˘a
mai mic ˘a, s˘a aib ˘a mai put ,ine locat ,ii,ˆıncerc ˆand astfel s ˘a reduc s ,i durata unui meci. Doream me-
ciuri scurte, juc ˘atorii opt ˆand eventual s ˘a joace mai multe la r ˆand dac ˘a sunt de p ˘arere c ˘a meciul
a durat prea put ,in, dec ˆat s˘a par ˘a o ideea rea s ˘aˆıncepi un joc, pentru c ˘a nu crezi c ˘a ai destul timp
la dispozit ,ie, sau crezi c ˘a te-ai plictisi. Acest lucru este s ,i unul din faptele pe care personal nu
le g˘asesc bune ˆın jocul ce a inspirat Idleville, Monopoly. Durata jocului m ˘a opres ,te din a dori
s˘a joc, s ,i am s ,tiut c ˘a voi vrea s ˘a schimb acest lucru ˆın jocul meu.
Am ajuns astfel la aspectul actual al h ˘art,ii, care poate fi v ˘azutˆın Figura 4. ˆIn hart ˘a sunt prezente
s,i anumite str ˘azi care par s ˘a duc ˘aˆın afara h ˘art,ii, motivate de dorint ,a de a extinde jocul pe viitor,
prin ad ˘augarea de noi h ˘art,i, care s ˘a o completeze pe aceasta. Durata jocului tot nu ar fi modifi-
cat˘a, deoarece juc ˘atorii ar avea de ales pe ce hart ˘a doresc s ˘a joace (un lucru destul de comun ˆın
jocurile din ziua de azi).
Am prezentat astfel c ˆat,iva pas ,i care au dus la ideea de Idleville.
7

Figura 4: Harta jocului. Ultima versiune a h ˘art,ii, v˘azut˘a din aplicat ,ia Adobe XD.
8

1 Tehnologii folosite
1.1 JavaScript
Am ales drept limbaj de programare, limbajul JavaScript. Motivat ,ia din spatele acestei decizii
este familiaritatea pe care o am cu acest limbaj, folosindu-l ˆın diverse scopuri de c ˆat,iva ani, c ˆat
s,i us ,urint ,a cu care pot ,i dezvolta pentru Web, exist ˆand o multitudine de libr ˘arii precum React.js
sau jQuery, fiind foarte potrivit platformei de dezvoltare aleas ˘a, Browser-ul.
Ca un mic istoric al limbajului, el a fost creat de c ˘atre Brendan Eich ˆın anul 1995, pe c ˆand
lucra la Netscape, av ˆand ca inspirat ,ie Java, Scheme s ,i Self, conform articolului ”A brief history
of JavaScript” publicat online de c ˘atre Ben Aston pe site-ul Medium.com [38].
ˆIn ciuda numelui asem ˘an˘ator, nu are nicio leg ˘atur˘a cu limbajul Java. Dup ˘a cum este ment ,ionat
s,iˆın articolul lui Aston, Brendan Eich s-a folosit de acest nume pentru a da ˆıncredere limbajului
asem ˘anˆandu-l cu unul deja primit de c ˘atre public.
Este un limbaj interpretat s ,i orientat pe obiecte. Acesta urmeaz ˘a standardul ECMAScript con-
ceput de Brendan Eich s ,i Ecma International. JavaScript poate fi folosit at ˆat pe partea de Front-
End (client) c ˆat s,i pe partea de Back-End (server).
1.1.1 React.js
React [24] este o libr ˘arie open-source pentru creat User Interfaces creat ˘a de Facebook s ,i lansat ˘a
ˆın 2013. Ofer ˘a un mod us ,or s ,i modular de a construi interfet ,e vizuale cu utilizatorul, fiind
s,i motivul principal pentru care am ales s ˘a o folosesc. React ofer ˘a un nou mod de a scrie
JavaScript, ˆımbinat s ,i cu structura cu tag-uri folosit ˘a de HTML s ,i XML, numit JSX. Structura
codului se bazeaz ˘a pe Componente. Acestea sunt clase JavaScript cu anumite metode ce se
ocup ˘a de: montarea componentei respective ˆın pagin ˘a (componentDidMount), ascultarea de
modific ˘ari aduse state-urilor sau propriet ˘at,ilor pasate (componentDidUpdate) sau ce ar trebui s ˘a
seˆıntˆample c ˆand acestea sunt ˆınchise de pe pagin ˘a (componentWillUnmount). Au la baz ˘a state-
uri, un obiect JavaScript ˆın care este cont ,inut˘a informat ,ie legat ˘a de component ˘a, iar modificarea
unui state duce la re-render-uirea componentei. Componentele pot fi folosite s ,iˆın cadrul altor
componente, iar comunicarea ˆıntre ele se face cu ajutorul unor propriet ˘at,i ce pot fi pasate de la
p˘arinte c ˘atre copil, numite ˆın React ”props”. Faptul c ˘a informat ,ia este t ,inut˘a mereu la curent in
fat,a utilizatorului, face aceast ˘a libr ˘arie ideal ˘a pentru One-Page-Applications, precum Idleville.
1.1.2 Redux
ˆIn ajutorul React am adus Redux [30]. Este o libr ˘arie de JavaScript creat ˘a de Dan Abramov
s,i Andrew Clark, menit ˘a s˘a ajute cu gestionarea state-urilor unei aplicat ,ii. Aceast ˘a libr ˘arie a
venit ˆın continuarea state-urilor prezente deja ˆın React care erau doar pe componente, f ˘acˆand
posibil ˘a gestionarea mai multor componente cu ajutorul unor state-uri. De exemplu, salv ˆand
date despre client (utilizatorul logat curent) ˆıntr-un state Redux, am avut acces la aceste date ˆın
toat˘a aplicat ,ia.
9

1.1.3 Node.js
Pe partea de Back-End (server) am folosit Node.js [19], un framework JavaScript open-source
folosit pentru a rula JavaScript ˆın afara browser-ului. Mozilla, ˆın documentat ,ia [9] oferit ˘a pentru
Node numes ,te printre beneficiile sale:
Performant ,a
Faptul c ˘a este scris ˆın JavaScript, uniformiz ˆand astfel limbajul scris pe Front-End cu cel
de pe Back-End
Node Package Manager (NPM), un serviciu ce faciliteaz ˘a instalarea pachetelor JavaS-
cript, numit ˆın articol, cel mai bun c ˆand vine vorba de tratarea dependent ,elor dintre pa-
chete
Portabilitatea, fiind disponibil pe diverse sisteme de operare printre care s ,i: Microsoft
Windows, macOS, Linux, OpenBSD.
1.1.4 MongoDB
Ca baz ˘a de date am folosit MongoDB [15], o baz ˘a de date NoSQL ce salveaz ˘a documentele si-
milar unui JSON. Lucratul cu MongoDB a fost facilitat de libr ˘aria mongoosejs [17], ce ˆınveles ,te
Mongo oferind o interact ,iune mai us ,or de ˆınt,eles cu baza de date. Simplitatea prin care pot ,i face
query-uri mult ,umit ˘a mongoose a fost un motiv cheie ˆın alegerea acestei tehnologii. Prezint ˘a s,i
metode precum ”populate” pentru a facilita act ,iuni precum join-uri de tabele ( ˆın acest context,
numite colect ,ii) care au fost utile pe parcursul dezvolt ˘arii aplicat ,iei. De exemplu, ˆın cadrul
entit˘at,ii User, exist ˘a cˆampul ”role”, salvat drept ”mongoose.Schema.Types.ObjectId” (ObjectId
este tipul de date folosit de mongoose pentru a face referint ,eˆıntre entit ˘at,i, este un id unic de-
semnat fiec ˘areia), cu referint ,˘a c˘atre modelul ”Role”; astfel, c ˆand doresc s ˘a fac o cerere (query)
care s ˘aˆımi includ ˘a s,i rolul utilizatorului, pot apela :populate (”role”)ˆın query iar asta ˆımi va
ad˘auga automat detaliile rolului det ,inut de utilizatorul ˆın cauz ˘a. Aceasta are la baz ˘a:
Scheme – structura unei entit ˘at,i a bazei de date, ˆın care sunt de asemenea definite tipurile
cˆampurilor, dar unde se pot crea si metode, similar unei clase.
Modele – entit ˘at,ileˆın sine, create pe baza schemelor.
Colect ,ii – grupuri de modele de acelas ,i tip.
1.1.5 Socket.IO
Pentru comunicarea dintre client s ,i server am folosit Socket.IO [33]. Aceast ˘a libr ˘arie, ce ˆıl are
ca autor pe Guillermo Rauch, ofer ˘a comunicare ˆın timp real, cu ajutorul Web Sockets, at ˆat de la
server c ˘atre client c ˆat s ,i invers. Am ales aceast ˘a libr ˘arie deoarece aveam nevoie ca informat ,ia
dintre juc ˘atori ˆın timpul unui meci s ˘a poat ˘a fi transmis ˘aˆın timp real. De asemenea, cu aceast ˘a
tehnologie am reusit s ˘a adaug s ,i alte feature-uri, precum Chat, notific ˘arile sistemului de prieteni,
cˆat s,i sistemul de invitat ,ii c˘atre lobby-uri.
10

1.1.6 bcrypt
Pentru criptarea unor informat ,ii precum parole s ,i e-mail-uri, am folosit libr ˘aria bcrypt [3] ce
implementeaz ˘a algoritmul cu acelas ,i nume. Algoritmul are la baz ˘a cifrul Blowfish s ,i este con-
ceput pentru a fi lent, ceea ce ˆıl ajut ˘aˆımpotriva atacurilor. Foloses ,te salt-uri (secvent ,e aleatorii
de date) pentru a asigura unicitatea hash-urilor provenite din criptarea aceluias ,i text clar. De-
criptarea hash-ului s ˘au este imposibil ˘a, astfel libr ˘aria ofer ˘a o metod ˘a de criptare (hash) a unui
text clar, s ,i una de verificare (compare) ce are nevoie at ˆat de text-ul in clar c ˆat s ,i de cel criptat
pentru a testa dac ˘a acestea corespund.
1.1.7 Parcel.js
Pentru un astfel de proiect este nevoie s ,i de un bundler. Un bundler ˆın JavaScript proceseaz ˘a
fis,ierele s ,i preg ˘ates ,te un pachet care s ˘a funct ,ioneze ˆın client, dup ˘a cum prezint ˘a s,i Alberto
Gimeno ˆın articolul ”How JavaScript bundler work” [40], ocup ˆandu-se de lucruri precum:
Ad˘augarea ˆıntr-un singur fis ,ier a mai multora de pe partea de Front-End, gestion ˆand astfel
import ˘arile din cod. Permite astfel un mod de lucru mai modular, put ˆand astfel s ˘aˆımpart
codul ˆın mai multe fis ,iere pe care s ˘a le importez mai t ˆarziu unde aveam nevoie.
Compilarea fis ,ierelor .SCSS ˆın fis ,iere .CSS pentru a putea fi ˆınt,elese de browser
Preg˘ates ,te imaginile de care partea de Front-End are nevoie
Drept bundler, am folosit Parcel [22]. Creat de Devon Govett, acest bundler se remarc ˘a prin
viteza sa, dup ˘a cum este prezentat s ,i pe site, reus ,ind s ˘a termine acelas ,i proces ˆın 9.98 secunde
(2.64 secunde chiar, dac ˘a exista deja cache) ˆın comparat ,ie cu un alt bundler, webpack, care
a avut nevoie de 20.71 secunde. Un mare motiv pentru care am ales Parcel este us ,urint ,aˆın
configurare, av ˆand o documentat ,ie us ,or de ˆınt,eles iar act ,iuni precum procesarea fis ,ierelor SCSS
s,i chiar ad ˘augarea Hot Module Replacement (pentru a vedea ˆın development modific ˘arile f ˘acute
ˆın cod pe partea de client ˆın timp real) au fost simplu de setat.
1.1.8 Babel
Babel [1] este un compilator de cod JavaScript. El ne permite s ˘a folosim versiuni mai recente de
cod JS (de exemplu arrow functions), urm ˆand ca el s ˘a transforme acest cod ˆıntr-unul compatibil.
1.1.9 Gulp
Pentru crearea font-icon-urilor (un font ce foloses ,te iconit ,e SVG – Scalable Vector Graphics;
alte astfel de font-icons mai sunt: Font Awesome [10] sau Material Icons [14]) folosite pe
partea de Front-End am folosit Gulp [13], un toolkit de JavaScript creat de Eric Schoffstall
folosit ˆın automatizarea unor procese. ˆIn acest scop eu am aplicat tutorialul g ˘asitˆın repo-ul
”gulp-iconfont-css” creat de Thomas Jaggi (”backflip”) de pe Github [39].
1.1.10 Chance.js
Pentru generarea de numere aleatorii am folosit libr ˘aria Chance.js [4], deoarece prezenta diverse
metode interesante, de la alegerea unui num ˘arˆıntreg p ˆan˘a la alegerea unui element aleatoriu
dintr-un set dat sau chiar metode de ales valoarea unui zar (av ˆand metode specifice pentru tipuri
de zar: d6, d12, etc). Principalul loc ˆın care m-am g ˆandit c ˘a voi avea nevoie de el fiind aruncatul
zarurilor din cadrul jocului, a fost libr ˘aria care mi-a venit prima ˆın minte.
11

1.2 HTML – Hypertext Markup Language
Dup˘a cum chiar numele o spune, HTML este un limbaj de tip Markup, ˆınsemn ˆand c ˘a acesta are
la baz ˘a tag-uri, definite prin scrierea lor ˆıntre paranteze ascut ,ite (< >). Aceast ˘a tehnologie nu
a fost neap ˘arat aleas ˘a, pe c ˆat a venit cu proiectul ˆın sine, fiind limbajul de baz ˘a cˆand vine vorba
de scris site-uri web. Se folosesc aceste tag-uri pentru a plasa informat ,iaˆın pagin ˘a, put ˆand fi
vizualizat ˘a mai departe de c ˘atre client ˆın browser. Exist ˘a s,i tag-uri ce definesc act ,iuni speciale,
de exemplu tag-ul ancor ˘a (anchor tag) folosit pentru link-uri (d ˘a posibilitatea de a redirect ,iona
clientul c ˘atre url-ul setat ˆın atributul ”href” al tag-ului). Tag-urilor li se mai pot ad ˘auga alte atri-
bute prin care se poate face referint ,˘a c˘atre ele din alte limbaje ce interact ,ioneaz ˘a cu browserul
(JavaScript sau CSS), atribute precum ”id” sau ”class”.
Des ,i proiectul cont ,ine doar un singur fis ,ier .html, principiile au fost folosite ˆın partea de JSX
din React.
1.3 SCSS – Syntactically Awesome Style Sheets
Pentru stilizarea p ˘art,ii de Front-End am folosit SCSS [32], un preprocesor CSS (Cascading
Style Sheets) creat de Natalie Wezenbaum s ,i Chris Eppstein, ce aduce mai multe funct ,ionalit ˘at,i
CSS-ului de baz ˘a, precum:
Variabile – majoritatea culorilor, grosimea font-urilor, dar s ,i numele fontului utilizat ˆın
proiect sunt salvate drept variabile, f ˘acˆand moficiarea lor mult mai us ,oar˘a. Variabilele
sunt disponibile s ,iˆın versiunea de baz ˘a a CSS3, ˆıns˘a compatibilitatea, conform w3schools
[6], este ceva mai limitat ˘a, dup ˘a cum putem vedea s ,iˆın tabelul de pe w3schools ilustrat
s,iˆın Figura 5.
Figura 5: Tabel compatibilitate – versiunea minim ˘a a browserelor care permit aceast ˘a act ,iune
(surs ˘a:https://www.w3schools.com/css/css3_variables.asp [37])
Funct ,ii – permit salvarea unor act ,iuni ce sunt folosite mai des drept funct ,ii, pentru a putea
fi folosite mai des.
Mixins – numele dat unor p ˘art,i de cod ce pot fi create s ,i incluse ˆın diverse locuri unde este
nevoie. Putem scrie un stil o dat ˘a, iar apoi refolosi ˆın mai multe locuri, unde avem nevoie,
dup˘a cum se poate observa s ,iˆın Figura fig:mixinExample. Acest lucru s-ar fi putut face
s,i cu versiunea de baz ˘a a CSS cu put ,in ajutor din partea HTML, s ,i anume am fi putut de
exemplu defini acest stil unei clase, iar apoi s ˘a atas ,˘am acea clas ˘a celorlalte elemente care
doream s ˘aˆımpart ˘a acest stil. SCSS ˆıns˘a ofer ˘a un mod mai elegant de a include p ˘art,i de
cod s ,i face ca problema s ˘a fie rezolvat ˘a exclusiv ˆın partea de stilizare, f ˘ar˘a s˘a mai depind ˘a
de alte clase incluse ˆın HTML.
12

Figura 6: Fragment de cod ce exemplific ˘a un mixin – ˆIn partea de sus se poate observa declararea
mixin-ului, iar ˆın partea de jos folosirea acestuia ˆın cadrul unei componente.
Un dezavantaj al SCSS poate fi faptul c ˘a este nevoie ca acesta s ˘a fie compilat, ˆıntr-un final fiind
nevoie de un fis ,ier CSS. Pentru a face aceast ˘a tranzit ,ie m-am folosit de bundler-ul Parcel. Pre-
cum CSS, este folosit pentru a stiliza pagini s ,i componente web, de la culoare de fundal, p ˆan˘a
la aspectul fonturilor, as ,ezare ˆın pagin ˘a cˆat s,i animat ,ii.
1.4 SVG – Scalable Vector Graphics
Scalable Vector Graphics sunt imagini care au la baz ˘a vectori, diferit de alte formaturi de ima-
gini (precum .png sau .jpeg) care au la baz ˘a pixeli. Astfel SVG-urile pot fi scalate at ˆat la
dimensiuni foarte mici c ˆat s,i foarte mari f ˘ar˘a a pierde claritatea init ,ial˘a. De asemenea, structura
lorˆın cod este similar ˘a cu cea a HTML-ului (SVG-urile de altfel pot fi folosite direct ˆın HTML),
s,i permite stilizarea lor cu CSS. SVG-urile prezente ˆın aplicat ,ie au fost f ˘acute cu aplicat ,ii pre-
cum Adobe Illustrator s ,i Adobe XD. Deoarece structura init ,ial˘a a lor trebuie modificat ˘a pentru
a fi recunoscut ˘a corect de React (mai precis JSX), am folosit site-urile SVG2JSX [35] s ,i React
SVGR [28] pentru a converti formatul din SVG ˆın JSX.
SVG a jucat un rol esent ,ialˆın sistemul de creare al avatarelor. Elementele ce intr ˘aˆın component ,a
avatarelor au fost f ˘acute cu SVG, iar posibilitatea stiliz ˘arii prin cod a SVG a ajutat la modifica-
rea culorilor s ,i a opacit ˘at,ii unor elemente pentru a oferi s ,i mai multe opt ,iuni utilizatorilor ˆıntr-un
mod mai us ,or. De exemplu, ˆın cadrul cre ˘arii avatarului, utilizatorul poate alege un model de
p˘ar s ,i o nuant ,˘a pentru acesta. Folosind SVG, a fost necesar ˘a un singur element SVG pentru un
model, iar culoarea put ˆand fi ad ˘augat ˘a prin cod. Cu PNG sau JPEG acest proces ar fi necesitat
fie mai multe elemente pentru un singur model, fiecare ˆın culoarea dorit ˘a, sau decurgerea la
anumite trucuri CSS care ar fi putut afecta performant ,a. Componentele de la baza avatarelor
pot fi v ˘azute s ,iˆın Figura 1.
Iconit ,ele prezente ˆın aplicat ,ie sunt SVG-uri, transformate ˆın icon-font cu ajutorul Gulp. C ˆateva
exemple de astfel de iconit ,e sunt prezente ˆın Figura 7.
13

Figura 7: Exemple iconit ,e. 12 iconit ,e din pachetul de aproximativ 60 de iconit ,e folosit ˆın
proiect.
Harta jocului este un alt bun exemplu de SVG. Am ales ca harta jocului s ˘a fie f ˘acut˘a cu
SVG, pentru a putea fi scalat ˘a f˘ar˘a a pierde din calitate. Versiunea final ˘a a h ˘art,ii poate vi v ˘azut˘a
ˆın Figura 4.
14

2 Structura fis ,ierelor
Aplicat ,ia are dou ˘a p˘art,i principale: cea de server s ,i cea de client. La baza ierarhiei se g ˘asesc
fis,iere ce t ,in de server s ,i de aplicat ,ieˆın sine:
.gitignore – Proiectul se foloseste de git iar acest fis ,ier este necesar pentru a ment ,iona
fis,ierele/folderele ce nu trebuiesc urcate pe git. Mai multe detalii se g ˘asesc ˆın documentat ,ia
git [11].
package.json – Fiind un proiect NodeJS, acesta are nevoie de un astfel de fis ,ier,ˆın care sunt
trecute date despre proiect. Aceste date variaz ˘a, de la date precum versiunea aplicat ,iei s ,i
autorul, p ˆan˘a la dependent ,ele de alte libr ˘arii prezente ˆın aplicat ,ie s ,i chiar configur ˘ari ale
unora. Pachetele sunt trecute automat aici c ˆand un nou pachet este instalat prin comanda
”npm i <nume pachet >”, s ,i este s ,ters prin comanda ”npm uninstall <nume pachet >”.
Mai multe detalii pot fi g ˘asite ˆın documentat ,ia package.json oferit ˘a de npmjs [20].
.babelrc – ˆIn acest fis ,ier se g ˘ases ,te configurarea pentru Babel. Mai multe detalii se g ˘asesc
ˆın documentat ,ia Babel [2].
gulpfile.js – ˆIn acest fis ,ier se afl ˘a codul necesar pentru crearea icon-fontului. Codul este
preluat din repository-ul gulp-icon-font [39].
.env – Acest fis ,ier este necesar libr ˘ariei dotenv [8]. Din acest fis ,ier sunt preluate variabilele
folosite prin cadrul libr ˘ariei ˆın cod. De aici poate fi modificat ”hostname”-ul, c ˆat s,i datele
de logare pentru adresa de e-mail folosit ˘aˆın trimiterea mailurilor pentru utilizatorii care
s,i-au uitat parola. Acest fis ,ier este exclus din git ( ˆın mare parte pentru ca datele de logare
s˘a nu ajung ˘aˆıntr-un domeniu public). Mai multe detalii pot fi g ˘asite ˆın documentat ,ia
pachetului [8].
server.js – Aici se g ˘ases ,te codul ce ruleaz ˘a pe server. De aici se preg ˘ates ,te s ,i pachetul
pentru client, cu ajutorul Parcel.js, s ,i se fac conexiunile cu baza de date s ,i socket. Detalii
legate de crearea pachetului pentru client se g ˘asesc ˆın documentat ,ia parceljs [21]. Pentru
detalii legate de conexiunea la baza de date, consultat ,i documentat ,ia mongoose [16].
Pentru detalii legate de conexiunea cu socket consultat ,i documentat ,ia socketio [34].
Act ,iunile primite de socket sunt tratate de funct ,ia din fis ,ierul SocketManager :jsaflat ˆın folderul
socket . Aceast ˘a funct ,ie este apelat ˘aˆın fis ,ierul server :js.
ˆIn folderul server se g˘asesc fis ,ierele:
constants.js – Aici sunt definite mai multe constante folosite pe server. Modificarea aces-
tor constante necesit ˘a recompilarea proiectului.
InitializeDatabase.js – Este definit ˘a o funct ,ie care s ˘a init ,ializeze baza de date ˆın cazul unei
prime rul ˘ari. Modul ˆın care se verific ˘a acest lucru este existent ,a colect ,iei de roluri ˆın baza
de date.
recoveryEmailTemplate.js – Cont ,ine template-ul ˆın HTML ce este trimis prin e-mail uti-
lizatorilor care s ,i-au uitat parola. Este salvat drept funct ,ie, aceasta primes ,te drept para-
metru un obiect cu hostname s,iresetCode pentru a fi folosite ˆın crearea link-ului trimis
utilizatorului.
15

ˆIn folderul node modules apar pachetele instalate ˆın proiect. Acestea sunt ad ˘augate automat
aici c ˆand un pachet este instalat cu npm. Acest folder este exclus din git. ˆIn cazul unei prime
rul˘ari, este necesar ˘a comanda ”npm i” pentru a instala pachetele incluse ˆınpackage :json.
ˆIn folderul models se g˘asesc modelele necesare bazei de date, fiecare salvate ˆın cˆate un fis ,ier:js.
Se g˘ases ,te s ,i un fis ,ierindex :jsce include referint ,e la toate modelele din folder, pentru a putea
fi mai us ,or inclus s ,i folosit ˆın cadrul proiectului. Pentru detalii legate de structura schemelor ce
formeaz ˘a un model, consultat ,i documentat ,ia mongoose [16].
ˆIn folderul assets =icons se g˘asesc elemente ce stau la baza cre ˘arii icon-fontului folosit ˆın
aplicat ,ie. Fis ,ierul template :scss este preluat de pe repo-ul gulp-iconfont [39] s ,i este s ,ablonul
dup˘a care gulp va crea fis ,ierul disponibil icon-fontului. ˆIn folderul svgse g˘asesc iconit ,eleˆın
format :svgcare urmeaz ˘a a fi transformate.
ˆIn folderul client se g˘asesc fis ,ierele s ,i folderele care urmeaz ˘a s˘a fie ˆımpachetate de Parcel s ,i
care vor ajunge la client.
folderul assets – Acesta este un folder static ,ˆınsemn ˆand c ˘a doar va fi copiat as ,a cum este
de c˘atre Parcel. Mai multe detalii se g ˘asesc ˆın documentat ,ia pachetului parcel-plugin-
static-files [23].
folderul actions – Cont ,ine act ,iunile ce se pot face cu Redux ˆın cadrul aplicat ,iei. Acestea
sunt salvate ˆıntr-un fis ,ierindex :js. Mai multe detalii legate de act ,iuniˆın Redux se g ˘asesc
ˆın documentat ,ia libr ˘ariei [31] la sect ,iunea Actions .
folderul reducers – Cont ,ine obiectele pe care le salv ˘am cu Redux. Fiecare reducer se
afl˘aˆın fis ,ierul s ˘au, exist ˆand s ,i un fis ,ierindex :jsˆın care sunt incluse referint ,e c˘atre toate.
Pentru detalii legate de reducers consultat ,i documentat ,ia Redux [31], sect ,iunea Reducers .
fis,ierul store :js- Este necesar Redux, pentru a stoca reducers . Mai multe detalii se g ˘asesc
ˆın documentat ,ia Redux [31] la sect ,iunea Store .
folderul classes – Cont ,ine clase folosite ˆın Front-End. Clasa Util cont ,ine metode sta-
tice folosite ˆın mai multe locuri ˆın interiorul aplicat ,iei. Tot aici se g ˘ases ,te s ,i metoda
templateFill folosit ˘aˆın completarea unui string cu valori date (de exemplu pentru pere-
chea templateString = ”X = $fxg” s,i obiectul templateVariables =fx : 10g, ar returna
stringul ”X = 10”. Aceast ˘a metod ˘a este folosit ˘aˆın cadrul creatorului de avatare s ,i a fost
preluat ˘a din repo-ul dynamic-template [41]. Celelalte clase prezente ˆın acest folder sunt
folosite at ˆatˆın logica jocului s ,i a platformei c ˆat s,i pentru stocarea de date venite din server
s,i vor fi discutate mai t ˆarziu.
folderul components – Cont ,ine componentele React ce stau la baza aplicat ,iei Front-End.
Tot aici se g ˘asesc s ,i fis ,ierele SCSS ce stilizeaz ˘a aceste componente. La baz ˘a, se g ˘ases ,te
componenta App care este folosit ˘a pentru a monta aplicat ,ia – de aici sunt incluse alte com-
ponente. Se g ˘asesc s ,i fis ,ierele main :scss – care cont ,ine stilizarea unor elemente comune
(precum body sauinput ) s,ivariables :scss – care cont ,ine variabile prezente ˆın partea de
SCSS a aplicat ,iei (acest fis ,ier este inclus ˆın alte fis ,iere SCSS pentru a avea acces la aceste
variabile). Celelalte componente sunt salvate ˆın foldere diferite dup ˘a funct ,ia lor s ,i vor fi
prezentate ulterior.
16

fis,ierul index :html – Este pagina HTML trimis ˘a clientului. Partea de body a paginii
cont ,ine s ,i elementul cu id root folosit de React pentru a include aplicat ,ia. Tot aici este
inclus s ,i fis ,ierul index :jscare urmeaz ˘a s˘a modifice pagina.
fis,ierul index :js- Aici sunt init ,ializat ,ireducerii Redux s ,i se face conexiunea cu Socket.
Este folosit ˘a s,i pachetul reactdevicedetect [25] pentru a verifica dac ˘a clientul acce-
seaz˘a pagina dintr-o versiune Desktop sau nu. Momentan aplicat ,ia este disponibil ˘a doar
pentru Desktop, deci ˆın caz de mobil, este afis ,at˘a o component ˘a ce anunt ,˘a c˘a aplicat ,ia
nu este disponibil ˘a.ˆIn caz de Desktop, este printat ˘a componenta App ˆınvelit ˘aˆın com-
ponenta Provider din pachetul reactredux [26]. Din acest fis ,ier se poate modifica s ,i
adresa serverului pe care ruleaz ˘a Socket.
ˆIn folderul distse g˘ases ,te pachetul f ˘acut de Parcel pentru client. Aici este prelucrat cont ,inutul
folderului client .ˆIn˘auntru se g ˘ases ,te folderul static assets – tot aici sunt ad ˘augate s ,i noile avatare
create de server. Pe l ˆang˘a acest folder se g ˘asesc fis ,ierele generate de Parcel.
17

3 Prezentarea aplicat ,iei
Partea de client, fiind scris ˘aˆın React s ,i Redux este structurat ˘aˆın componente. Redux permite
stocarea a diverse obiecte care pot fi apoi referent ,iate oriunde ˆın aplicat ,ie prin cadrul props a
React. Exemplu de cod ce face leg ˘atura din st ˘ari Redux ˆın props React se g ˘ases ,teˆın Figura
8. Este nevoie de dou ˘a funct ,iimapStateToProps s,imapDispatchToProps . Prima primes ,te ca
parametru state -ul Redux s ,i construies ,te un obiect al c ˘arui cont ,inut va fi ad ˘augat la props . Cea
de-a doua construies ,te un obiect cu funct ,ii care apeleaz ˘a act ,iunile definite pentru Redux (tratate
ˆın fis ,ierele din folderul reducers ), care urmeaz ˘a s,i el s ˘a fie atas ,atˆınprops . Conectarea propriu
zis˘a este apoi f ˘acut˘a de funct ,iaconnect din pachetul reactredux . Pentru mai multe detalii
legate de conectarea st ˘arilor Redux ˆın React consultat ,i documentat ,ia React-Redux [27].
Figura 8: Exemplu mapare variabile din state Redux ˆın props React
Au fost stocate ˆın Redux diverse date despre client, precum un obiect Client (cu date des-
pre utilizatorul logat curent), un obiect Socket (care permite comunicarea cu serverul), un
obiect LobbyClient (care cont ,ine date despre lobby-ul ˆın care se afl ˘a clientul), un array de
erori (aici sunt introduse erorile ce trebuiesc afis ,ate pe ecran – act ,iune tratat ˘a de componenta
ErrorMessages ), un obiect Plat f ormDetails (cu date despre platform ˘a) s ,i un obiect de Game
(cu detalii despre jocul curent).
Structura componentelor urmeaz ˘a un aspect similar. Dac ˘a o component ˘a are nevoie de date
de la server (care de obicei sunt preluate prin cereri c ˘atre baza de date), acea component ˘a se
foloses ,te de obiectul socket stocat ˆın Redux pentru a face cererea. Datele sunt primite apoi s ,i
stocate ˆınstate -ul componentei.
3.1 Clasele din client
Pe partea de client a aplicat ,iei se reg ˘asesc s ,apte clase esent ,iale:
Util – Cont ,ine metode statice, utile pentru diverse act ,iuni ale platformei.
–Metoda templateFill a fost prezentat ˘a deja ˆıntr-un capitol trecut.
–Metoda clamp primes ,te ca parametri value ,min,max s,iˆıntoarce value , dac ˘a aceasta
se afl ˘aˆıntre mins,imax sau cap ˘atul mai apropiat de valoare, dac ˘a nu.
–Metoda f ormatDate primes ,te ca parametri o dat ˘a s,i formatul ˆın care acesta s ˘a apar ˘a
(formatul este opt ,ional). Pentru formatarea d ˘at,ii, s-a folosit pachetul dateformat [7].
18

–Metoda processLocationDetails primes ,te ca parametru detaliile unei locat ,ii de pe
hart˘a, s,i se asigur ˘a c˘a fiecare c ˆamp al acestui obiect det ,ine o valoare (fie cea primit ˘a
din parametru, fie una prestabilit ˘a), apoi returneaz ˘a obiectul modificat.
–Metoda characterItemRarityName primes ,te ca parametru o valoare numeric ˘a ce
reprezint ˘a raritatea unui obiect det ,inut de juc ˘ator (element din avatar sau titlu de
juc˘ator) s ,iˆıntoarce numele acestei rarit ˘at,i drept text. De exemplu, pentru rarityValue
= 1, va ˆıntoarce ”Uncommon”.
Plat f ormDetails – Cont ,ine date despre platform ˘a s,i este stocat ˘a prin Redux.
–socket – Cont ,ine referint ,a c˘atre obiectul socket stocat ˆın Redux.
–ready – Dac ˘a acest obiect a fost init ,ializat sau nu.
–isOnline – Dac ˘a platforma este disponibil ˘a publicului sau nu.
–o f f lineMessage – Dac ˘a platforma nu este disponibil ˘a publicului, aici se g ˘ases ,te
mesajul ce va fi afis ,at.
–Metoda update – Actualizeaz ˘a datele salvate ˆın Redux.
–Metoda handleErrors – Apeleaz ˘a act ,iunea ”ADD ERROR” din Redux.
–Metoda updateFromOb ject – Actualizeaz ˘a obiectul curent ( this) cu datele din obiec-
tul primit ca parametru.
–Metoda re f resh – Cere datele de la server.
–Metoda init- Apeleaz ˘a metoda re f resh pentru a init ,ializa datele.
User – Cont ,ine detalii despre un utilizator. Constructorului clasei poate fi pasat un idde
utilizator, ˆıns˘a acesta este opt ,ional.
–socket – Cont ,ine referint ,a c˘atre obiectul socket stocat ˆın Redux.
–name – Numele utilizatorului.
–joinDate – Data ˆınregistr ˘arii utilizatorului.
–id- Id-ul utilizatorului, unic ˆın cadrul platformei.
–role- Obiect cu detalii despre rolul det ,inut de utilizator (conform cele ale modelului
Role din baza de date).
–lobbyId – Id-ul lobby-ului ˆın care se afl ˘a. Sau null dac˘a nu se afl ˘aˆıntr-un lobby.
–playerTitle – Titlul de juc ˘ator echipat de c ˘atre utilizator.
–avatarId – Id-ul avatarului echipat de utilizator.
–Metoda update – Metod ˘a apelat ˘a pentru a actualiza datele ˆın cazul ˆın care un obiect
de tipul User trebuie stocat ˆın Redux. Init ,ial este o funct ,ie goal ˘a.
–Metoda re f reshUser – Cere informat ,ii despre utilizator de la server ˆın funct ,ie de id
s,i actualizeaz ˘a detaliile. Apeleaz ˘a apoi metoda update .
–Metoda checkPermissions – Primes ,te ca parametru numele unei permisiuni (sau un
array cu mai multe nume de permisiuni) s ,i verific ˘a dac ˘a rolul utilizatorului det ,ine
permisiunea respectiv ˘a. Dac ˘a rolul det ,inut are atributul isAdmin setat true, aceast ˘a
funct ,ieˆıntoarce true indiferent de alte permisiuni. Dac ˘a rolul nu permite vreo per-
misiune din cele date ca parametru, funct ,iaˆıntoarce f alse .
19

Client – Aceast ˘a clas ˘a extinde clasa User s,i se axeaz ˘a doar pe utilizatorul logat.
–ready – Dac ˘a clientul a fost sau nu init ,ializat.
–Metoda update – Aceast ˘a metod ˘a suprascrie metoda din clasa p ˘arinte, s ,i foloses ,te
metoda dispatch a Redux pentru a actualiza obiectul.
–Metoda login – Primes ,te ca parametri userId ,userHash s,i (opt ,ional) cb(callback) s ,i
seteaz ˘aˆın Local Storage userId s,iuserHash . Pentru ca un utilizator s ˘a fie considerat
logat, el trebuie s ˘a aib ˘auserId s,iuserHash setate s ,i valide.
–Metoda logout – Aceast ˘a metod ˘a s,terge c ˆampurile setate de metoda login ˆın Local
Storage s ,i redirect ,ioneaz ˘a utilizatorul c ˘atre pagina principal ˘a.
–Metoda init- Aceast ˘a metod ˘a preia datele salvate ˆın Local Storage. Dac ˘a ambele
(userId s ,i userHash) sunt setate, se va emite prin socket mesajul registersocket care
primes ,te s,i datele din Local Storage. Pe server vor fi verificate aceste date pentru a fi
valide – adic ˘a atˆat id-ul c ˆat s,i hash-ul apart ,in aceluias ,i cont. Dac ˘a datele nu sunt va-
lide, datele locale vor fi s ,terse. Dac ˘a datele sunt valide, pe server se va face leg ˘atura
dintre socket-ul trimis de c ˘atre client s ,i id-ul utilizatorului. Acest lucru ajut ˘a la co-
municarea ulterioar ˘a cu clientul, deoarece vom putea g ˘asi socket-ul utilizatorului cu
ajutorul id-ului.
–Metoda isLogged – Verific ˘a dac ˘a utilizatorul este sau nu logat. Un utilizator nelogat
este numit vizitator (guest).
Lobby – Aceast ˘a clas ˘a cont ,ine informat ,ii despre un lobby. Constructorul poate primi
(opt ,ional) un obiect cu detalii despre lobby.
–socket – Cont ,ine referint ,a c˘atre obiectul socket stocat ˆın Redux.
–id- Id-ul unic ˆın platform ˘a a lobby-ului.
–isPrivate – Dac ˘a lobby-ul este privat sau nu.
–leader – Detalii despre liderul lobby-ului.
–startDate – Data la care a fost creat lobby-ul.
–membersLimit – Un array care pe prima pozit ,ie are num ˘arul minim de membri pe
care ˆıl poate avea un lobby, iar pe a doua pozit ,ie num ˘arul maxim.
–gameActive – Dac ˘a este true, atunci acest lobby are un joc activ.
–members – Array cu detalii despre membri din lobby (date din modelul LobbyMember
din baza de date, la care se adaug ˘a date din modelul User ).
–kickedList – Array cu id-urile utilizatorilor dat ,i afar ˘a din lobby s ,i care nu se mai pot
ˆıntoarce.
–gameMaxRounds – Num ˘arul maxim de runde care se va juca ˆın cadrul jocului.
–Metoda updateFromOb ject – Aceast ˘a metod ˘a actualizeaz ˘a obiectul curent cu date
din obiectul primit ca parametru.
–Getter-ul id- Este un alias pentru valoarea id.
–Metoda handleErrors – Apeleaz ˘a act ,iunea ”ADD ERROR” din Redux.
–Metoda getName -ˆIntoarce numele lobby-ului. Numele este construit pe baza nu-
melui liderului. Acesta este ˆın limba englez ˘a s,i sunt tratate s ,i cazuri atunci c ˆand
numele se termmin ˘aˆıns(de exemplu, pentru utilizatorul Marius, va ˆıntoarce ”Ma-
rius’ lobby”, dar pentru utilizatorul George, va ˆıntoarce ”George’s lobby”).
20

–Metoda isUserInLobby – Primes ,te ca parametru id-ul unui utilizator s ,i verific ˘a dac ˘a
printre members se reg ˘ases ,te un membru cu acel id.
–Metoda getMember -ˆIntoarce membru cu id-ul dat ca parametru. Dac ˘a nu g ˘ases ,te
acel membru, ˆıntoarce null.
–Metoda canStartGame – Verific ˘a dac ˘a se poate ˆıncepe un joc cu lobby-ul curent. S ,i
anume dac ˘a toat ˘a lumea din lobby este Ready (preg ˘atit˘a) s ,i dac ˘a num ˘arul de juc ˘atori
seˆıncadreaz ˘aˆın limite.
–Metoda isLeader – Primes ,te ca parametru un id de utilizator s ,iˆıntoarce true dac˘a
acesta ˆıi corespunde liderului, altfel f alse .
LobbyClient – Aceast ˘a clas ˘a extinde Lobby s,i se axeaz ˘a pe lobby-ul ˆın care se afl ˘a clientul.
–Metoda update – Folosit ˘a pentru a actualiza obiectul stocat ˆın Redux.
–Metoda reset – Folosit ˘a pentru a reseta obiectul stocat ˆın Redux.
–Metoda re f resh – Cere date de la server legate de lobby-ul ˆın care se afl ˘a utilizatorul
curent. Apeleaz ˘a s,i metoda update la final.
–Metoda create – Emite un mesaj prin socket c ˘atre server pentru a crea un nou lobby
cu clientul drept lider. Dac ˘a act ,iunea a avut succes, se va apela metoda re f resh ce
va cere acum datele lobby-ului proasp ˘at creat.
–Metoda togglePrivacy – Emite prin socket schimbarea atributului isPrivate . Pe ser-
ver se va verifica dac ˘a acest mesaj a venit de la liderul lobby-ului.
–Metoda inviteUser – Emite c ˘atre server un mesaj ce va genera o invitat ,ie pentru
utilizatorului al c ˘aruiideste trimis ca parametru.
–Metoda startGame – Emite c ˘atre server un mesaj de ˆıncepere de joc. Pe server se
va verifica dac ˘a acest mesaj a venit de la liderul lobby-ului s ,i dac ˘a act ,iunea este
posibil ˘a (similar cu canStartGame din cadrul Lobby ).
Game – Aceast ˘a clas ˘a cont ,ine informat ,ii despre jocul ˆın care se afl ˘a clientul, dar s ,i logica
jocului. Aceast ˘a clas ˘a va fi descris ˘aˆıntr-un capitol destinat ei.
3.2 Modelele din baza de date
Baza de date este format ˘a din mai multe modele (entit ˘at,i). Modelele sunt formate pe baza
unor Scheme Mongoose. Fiecare Schem ˘a, pe l ˆang˘a atributele ce vor fi prezentate, cont ,ine s ,i un
atribut id(unic) de tipul ObjectId (un tip din Mongoose). Acest atribut este folosit drept cheie
principal ˘a.
User – Acest model reprezint ˘a conturile f ˘acute pe platform ˘a.
–name – Numele utilizatorului. Acest c ˆamp este obligatoriu.
–password – Parola utilizatorului. Va fi salvat ˘a criptat (cu ajutorul bcrypt). Acest
cˆamp este obligatoriu.
–hash – O valoare unic ˘a fiec ˘arui utilizator. Folosit ˆın pereche cu idpentru a salva ˆın
client datele utilizatorului logat.
–email – Adresa de email a utilizatorului, salvat ˘aˆın mod criptat.
–emailText – Parte a adresei de email. (primele 3 caractere din nume s ,i domeniu)
21

–avatarId – Un UUID (Universally Unique Identifier – generat cu pachetul uuid [36])
care apart ,ine avatarului curent al utilizatorului.
–role – Referint ,˘a c˘atreRole . Salvat drept ObjectId, pentru a se putea face populate
pe cˆamp.
–characterDetails – Referint ,˘a c˘atreCharacterDetails . Salvat drept ObjectId.
–playerTitle – Referint ,˘a c˘atrePlayerTitle . Salvat drept ObjectId.
–isOnline – Boolean care indic ˘a dac ˘a utilizatorul este sau nu online. Este setat true
cˆand utilizatorul ˆınregistreaz ˘a un socket cu mesajul registersocket s,i trecut f alse
cˆand utilizatorul p ˘ar˘ases ,te platforma (de exemplu ˆınchide tab-ul din browser).
–joinDate – Data la care a fost ˆınregistrat contul.
–resetPasswordCode – Un UUID care reprezint ˘a codul necesar schimb ˘arii parolei ˆın
cazul ˆın care utilizatorul a uitat-o.
–resetPasswordDate – Data la care utilizatorul a init ,ializat procesul de schimbare a
parolei (c ˆand se trimite s ,i mail-ul).
–Metoda findByName -ˆIntoarce utilizatorii cu numele dat ca parametru.
–Metoda findOneByName -ˆIntoarce un singur utilizator cu numele dat ca parametru.
–Metoda generateHash – Apeleaz ˘a metoda hash dinbcrypt s,iˆıntoarce mesajul primit
ca parametru criptat.
–Metoda validPassword – Foloses ,te metoda compare dinbcrypt ca s˘a verifice dac ˘a
parametrul dat ˆın text-clar este parola salvat ˘a (text-criptat).
–Metoda validEmail – Similar cu validPassword , dar pentru email .
Role – Cont ,ine detalii despre rolurile din platform ˘a.
Plat f ormDetails – Acest model defines ,te detalii despre platform ˘a.
SupportSubmission – Acest model defines ,te mesajele de feedback s ,i rapoartele de bug-uri
l˘asate de c ˘atre utilizatori, cu referint ,˘a c˘atre autor.
SupportSubmissionReply – Acest model defines ,te r˘aspunsurile l ˘asate pentru SupportSubmission .
Modelul defines ,te referint ,e c˘atre Mesajul (SupportSubmission) de care apart ,ine dar s ,i
c˘atre autorul r ˘aspunsului.
PlayerTitle – Acest model defines ,te detalii despre titlurile de juc ˘ator disponibile ˆın plat-
form ˘a.
CharacterItem – Acest model defines ,te elementele ce intr ˘aˆın crearea avatarelor, cu referint ,˘a
c˘atre modelul Color .
Color – Model ce defines ,te o culoare. Folosit pentru elementele ce formeaz ˘a avatare.
CharacterDetails – Acest model defines ,te detaliile unui avatar salvat de c ˘atre un utilizator.
Cuprinde referint ,e c˘atreCharacterItem s,iColor .
Conversation – Modelul reprezint ˘a conversat ,iile dintre utilizatori. Cont ,ine referint ,e c˘atre
cei doi utilizatori ( User ) din conversat ,ie s ,i un Array de referint ,e c˘atre mesajele ce t ,in de
conversat ,ie (ConversationMessage ).
22

ConversationMessage – Modelul reprezint ˘a mesajele din cadrul unei conversat ,ii dintre
doi utilizatori.
FriendRequest – Reprezint ˘a o cerere de prietenie, cu referint ,e c˘atre expeditor s ,i destinatar.
Friendship – Reprezint ˘a o prietenie dintre doi utilizatori, cu referint ,e c˘atre cei doi prieteni.
Lobby – Cont ,ine date despre lobby.
LobbyInvite – Reprezint ˘a o invitat ,ie pentru un utilizator c ˘atre lobby. Cont ,ine referint ,e
c˘atre lobby-ul c ˘atre care se face invitat ,ia (Lobby ), dar s ,i c˘atre expeditor s ,i destinatar.
LobbyMember – Detalii despre membrul unui lobby. Cont ,ine referint ,e c˘atre lobby dar s ,i
c˘atre user.
MapLocation – Reprezint ˘a o locat ,ie de pe hart ˘a, cu referint ,e c˘atre nodurile ( MapNode )
din care aceasta este disponibil ˘a.
MapNode – Reprezint ˘a un nod de pe hart ˘a, cu locat ,ia trebuie plasat.
MapNodeNeighbors – Marcheaz ˘a adiacent ,a dintre dou ˘a noduri cu referint ,e c˘atre cele
dou˘a noduri.
OwnedCharacterItem – Cont ,ineCharacterItems det,inute de c ˘atre un utilizator. Cu referint ,e
c˘atreCharacterItem s,iUser .
OwnedPlayerTitle – Similar cu OwnedCharacterItem dar pentru titluri de juc ˘ator.
AuditLog – Loguri create de diferite act ,iuni, cu referint ,e c˘atre autori.
3.3 ˆInregistrarea ˆın platform ˘a
Pentru ca cineva s ˘a aib ˘a acces la platform ˘a are nevoie de un cont. Singurele pagini la care
un vizitator are acces sunt: pagina init ,ial˘a, pagina de ˆınregistrare (cale: =register ), pagina de
logare ˆın cont (cale: =login ), pagina pe care ajunge atunci c ˆand spune c ˘a a uitat parola (cale:
/forgot-password ) s,i pagina de schimbare a parolei atunci c ˆand ea este uitat ˘a (cale: /password-
recovery/ <resetCode >). Crearea unui cont este simpl ˘a. Pornind de la pagina init ,ial˘a pe care o
vede orice vizitator nelogat, care se poate vedea s ,iˆın Figura 9, ap ˘as˘amRegister .
23

Figura 9: Prima pagin ˘a – pentru utilizatori nelogat ,i
Butonul de Register va redirect ,iona pe pagina =register . Aceast ˘a pagin ˘a, dup ˘a cum se poate
observa s ,iˆın Figura 10 poate fi ˆımp˘art,it˘aˆın dou ˘a:ˆın partea st ˆang˘a avem formularul cu detaliile
contului, iar ˆın partea dreapt ˘a creatorul de avatare (componenta CharacterEditor a aplicat ,iei).
Formularul este format din mai multe componente FormInput . Acestea sunt construite pe baza
elementului HTML input . Pentru a face folosirea lor mai us ,oar˘a, componenta prezint ˘a props
(parametri ce pot fi transmis ,i componentelor React) precum:
type – Tipul inputului. Este transmis direct elementului HTML input s,i reprezint ˘a tipul
din HTML pe care s ˘aˆıl aib ˘a inputul (de exemplu textsaupassword ).
onChance – Aceasta este o funct ,ie ce va fi apelat ˘a atunci c ˆand textul din interiorul inpu-
tului se va schimba. Prin acest mod ˆın React se t ,ine cont de valoarea inputului.
placeholder – Textul care s ˘a apar ˘aˆın interiorul inputului c ˆand utilizatorul nu a introdus
ˆınca o valoare. Acesta este opt ,ional.
label – Numele acestui c ˆamp.
description – Descrierea acestui c ˆamp. Este opt ,ional ˘a.
darkTheme – Dac ˘a s˘a primeasc ˘a un aspect ˆıntunecat din stilizarea CSS.
disabled – Dac ˘a acest prop are valoarea true atunci utilizatorul nu poate interact ,iona cu
inputul.
error – Dac ˘a acest prop este completat, componenta va printa s ,i un mesaj de eroare ˆın
dreptul inputului.
name – Atribut HTML pasat inputului pentru a putea fi recunoscut prin cod.
autoComplete – Atribut HTML pasat inputului. Dac ˘a acesta are valoarea true, acesta
nu se va completa automat (de exemplu dac ˘a browser-ul recunoas ,te un input format din
text s ,i parol ˘a, va ˆıncerca s ˘a completeze automat datele recunoscute ca fiind cont pentru
domeniul respectiv).
24

Propriet ˘at,ilelabel ,description s,ierror sunt trimise mai departe componentei FormGroup care
ˆınveles ,teinputul acestei componente.
Figura 10: Pagina de ˆInregistrare a contului – pentru utilizatori nelogat ,i
ˆIn cazul ˆın care inputul este de tip password , inputul va ap ˘area init ,ial drept buline iarˆın
partea dreapt ˘a este prezent ˘a o iconit ,˘a cu un ochi. Cu ajutorul acestei iconit ,e, utilizatorul poate
trece din acest mod de afis ,areˆın unul citibil, s ,iˆınapoi. Acest lucru se face prin a supra-scrie
tipul inputului. Browser-ul deja face ca inputul de tip password s˘a apar ˘a astfel, componenta
doar transform ˘a inputul din tip password ˆın tip text. Iconit ,a este de asemenea schimbat ˘a, pentru
a oferi un feedback vizual utilizatorului. Acest comportament este exemplificat ˆın Figura 11.
Figura 11: C ˆamp de tip parol ˘a – cu text ascuns (sus) s ,i text vizibil (jos)
Dup˘a trimiterea datelor, pe server se fac anumite verific ˘ari.ˆIn primul r ˆand se verific ˘a toate
inputurile au cont ,inutˆın ele, apoi dac ˘a sunt valide. Se caut ˘a sa nu mai existe ˆınc˘a un utilizator
cu acelas ,iusername , se verific ˘a lungimile inputurilor (ce pot fi setate din fis ,ierul constants :js
de pe server), ca s ˘a satisfac ˘a cerint ,ele, s ,i se testeaz ˘a adresa de email pentru a fi valid ˘a. Pentru
validarea adresei a fost folosit codul prezentat ˆın articolul How to validate an email address in
JavaScript [42]. Toate valid ˘arile se fac pe server, pentru a asigura c ˘a utilizatorul nu a reus ,itˆın
vreun fel s ˘ap˘ac˘aleasc ˘avalidarea local ˘a. Dac ˘a apar probleme la validare, acestea vor fi trimise
ˆınapoi clientului, s ,i vor fi afis ,ate lˆang˘a input, dup ˘a cum este exemplificat s ,iˆın Figura 12. Dac ˘a
25

totul a fost ˆın regul ˘a, se va crea un nou cont, cu datele trimise s ,i se va crea un nou avatar, cu
elementele selectate ˆın cadrul editorului de avatare. Utilizatorul va fi logat ˆın noul cont (cu
ajutorul metodei login dinClient ) s,i redirect ,ionat apoi c ˘atre prima pagin ˘a, care va ar ˘ata altfel
acum.
Figura 12: C ˆamp input cu eroare
3.4 Character Editor
Acesta este creatorul de avatare al utilizatorilor. C ˆand componenta este montat ˘aˆın pagin ˘a, ea
va cere de la server elementele disponibile cre ˘arii avatarului (aceste elemente pot fi gestionate
de c˘atre Staff). Cererea elementelor se face ˆın funct ,ie de variabila onlyOwned (adic ˘a dac ˘a ele-
mentele dorite s ˘a fie doar cele pe care utilizatorul le det ,ine, sau sunt comune tuturor) primit ˘a ca
prop . Dac ˘a aceast ˘a valoare este f alse , vor fi primite toate elementele (folosit ˆın cazul ˆın care
un avatar este editat de c ˘atre un administrator, acesta ar trebui s ˘a aib ˘a acces la toate elementele).
Dac˘a valoarea este true, vor fi primite toate elementele de raritate 0 (comune), s ,i cele care sunt
det,inute de c ˘atre utilizator (din colect ,ia din baza de date OwnedCharacterItem ).
Creatorul de avatare t ,ine cont de urm ˘atoarele alegeri: genul ales (masculin sau feminin), forma
aleas ˘a, culoarea pielii, tipul de ochi, culoarea ochilor, tipul de nas, tipul de gur ˘a, modelul de
p˘ar, culoarea p ˘arului, opacitatea p ˘arului, modelul de barb ˘a, culoarea s ,i opacitatea b ˘arbii, tipul de
ochelari, detaliile ochelarilor, tipul de p ˘al˘arie, detaliile p ˘al˘ariei, tipul de hain ˘a, detaliile hainei,
tipul de jachet ˘a, detaliile ei, s ,i tipul pozei (pozit ,iaˆın care personajul va ap ˘areaˆın avatar). Aceste
detalii sunt salvate drept indecs ,i din array-urile de elemente primite la montarea componentei,
s,i sunt init ,ializate cu prima pozit ,ie din array, iar ˆın cazul opacit ˘at,ilor, acestea sunt setate la 1 (cu
except ,ia ochelarilor, care este setat ˘a la 0.2). Opacitatea ia valori ˆıntre 0 s ,i 1. Schimbarea de gen
duce la reinit ,ializarea avatarului.
Pentru selectarea valorilor ment ,ionate, au fost create componente ajut ˘atoare.
Select ,ie de culoare – Trece printr-o list ˘a de culori date (prin props ) s,i le afis ,eaz˘a. Culorile
sunt salvate ˆın obiecte de tipul fnume culoare : valoare culoareg(de exemplu pentru
tipuri de corp avem fskin : ”#EDB188”, outline : ”#632618” g- ce definesc culorile
pe care ar trebui s ˘a le aib ˘a elementele SVG-ului (cele care reprezint ˘askin s,ioutline )
din interiorul modelului). Tot prin props se poate pasa s ,iob jectField care numes ,te ce
cˆampuri ale obiectului de culoare (de exemplu skin s,ioutline ) ar trebui s ˘a fie folosite ˆın
previzualizarea culorii. Un chenar de culoare poate ar ˘ata p ˆan˘a la patru astfel de c ˆampuri
dup˘a cum se poate vedea s ,iˆın Figura 13. Culoarea selectat ˘a va ap ˘area cu un outline. O
culoare poate fi selectat ˘a prin click.
26

Figura 13: Exemplu de mai multe culori ce pot fi afis ,ateˆın previzualizarea unui tip de culoare
Select ,ie de element – Trece printr-o list ˘a de elemente dat ˘a, s,i ofer ˘a dou ˘a s˘aget ,i (de ˆınainte
s,iˆınapoi) cu ajutorul c ˘arora utilizatorul poate trece prin elemente cu principiul unei liste
circulare (urm ˘atorul dup ˘a ultimul element este primul element al listei). Dac ˘aˆın lista
dat˘a se g ˘ases ,te un singur element, butoanele de ˆınainte s ,iˆınapoi sunt dezactivate. Aceast ˘a
component ˘a poate fi v ˘azut˘aˆın Figura 14.
Figura 14: Exemplu de selector de elemente ˆın cadrul creatorului de avatare
Ajustor de opacitate – Pentru componentele ce au s ,i opt ,iunea de a seta opacitatea, este
folosit ˘a s,i o component ˘a creat ˘a pe baza elementului HTML input de tip range . Astfel
utilizatorul poate ajusta opacitatea cu ajutorul unui slider, dup ˘a cum se poate observa s ,i
ˆın Figura 15.
Figura 15: Exemplu de slider pentru opacitate ˆın cadrul creatorului de avatare
Selectarea elementelor a fost ˆımp˘art,it˘a apoi ˆın cinci panouri: de corp, fat ,˘a, p˘ar, haine s ,i pozit ,ie.
Avatarul ˆın sine este afis ,at prin intermediul componentei CharacterAvatar. Aceast ˘a component ˘a
cere elementele de avatar de la server pe care le salveaz ˘aˆınstate s,i primes ,te select ,ia f˘acut˘a de
utilizator ˆın cadrul componentei CharacterEditor. Construies ,te pe baza select ,iei un SVG. Un
exemplu de astfel de avatar poate fi observat ˆın Figura 16.
27

Figura 16: Exemplu de avatar creat de creator de avatare
3.5 Logarea ˆın cont
Pagina de logare ˆın cont este similar ˘a cu cea de ˆınregistrare, av ˆand la baz ˘a acelas ,i tip de compo-
nente. Lipses ,teˆıns˘a de aici creatorul de avatare, bine ˆınteles. De asemenea, aici vizitatorul are s ,i
opt,iunea de a spune c ˘a a uitat parola. Username-ul introdus este caseinsensitive ,ˆınsemn ˆand
c˘a nu conteaz ˘a cum este introdus numele, cu litere mari sau mici (de exemplu ”MaRiUs” este
echivalent cu ”Marius” care este echivalent cu ”marius”). Ap ˘asˆand linkul cu ”I forgot my pa-
ssword”, va fi redirect ,ionat c ˘atre pagina ”/forgot-password”. ˆIn cazul ˆın care datele trimise nu
apart ,in unui cont, va fi trimis ˘aˆınapoi o eroare ”comun ˘a” (s ,i anume nu specific ˘a unui c ˆamp
anume, precum ˆın pagina de ˆInregistrare) ce va anunt ,a vizitatorul c ˘ausername -ul introdus sau
parola sunt gres ,ite, dup ˘a cum se poate observa s ,iˆın Figura 17.
Figura 17: Exemplu eroare comun ˘aˆın pagina de login
3.6 Uitarea parolei s ,i modificarea acesteia
Pe pagina de login se g˘ases ,te un link ce redirect ,ioneaz ˘a c˘atre pagina de ”/forgot-password”. Pe
aceast ˘a pagin ˘a seˆıntˆampl ˘a procesul propriu-zis, care este ˆıntocmit din urm ˘atorii pas ,i:
28

Introducerea username -ului atas ,at contului respectiv. Acest pas este necesar pentru a
c˘auta ulterior contul ˆın baza de date. S ,tim de la ˆınregistrare c ˘a doar username este unic.
Dup˘a introducerea unui nume valid, utilizatorului i se va cere s ˘a introduc ˘a adresa de email
folosit ˘a la crearea contului. Pentru a i se aduce aminte utilizatorului adresa folosit ˘a, se
foloses ,te versiunea cenzurat ˘aa emailului, dup ˘a cum se poate vedea s ,iˆın Figura 18
Figura 18: C ˆamp cu adres ˘a de email cenzurat ˘aˆın cadrul formularului de uitare a parolei
29

4 Sect ,iune
Figura 19: Exemplu figur ˘a
30

Concluzii
31

Bibliografie
[1] Babel. https://babeljs.io/ .
[2] Babel documentation. https://babeljs.io/docs/en/ .
[3] bcrypt. https://www.npmjs.com/package/bcrypt .
[4] Chance js. https://chancejs.com/ .
[5] Cookie clicker. https://orteil.dashnet.org/cookieclicker/ .
[6] Css custom properties (variables). https://www.w3schools.com/css/css3_
variables.asp .
[7] dateformat. https://www.npmjs.com/package/dateformat .
[8] dotenv. https://www.npmjs.com/package/dotenv .
[9] Express/node introduction. https://developer.mozilla.org/en-US/docs/Learn/
Server-side/Express_Nodejs/Introduction .
[10] Font awesome. https://fontawesome.com/ .
[11] Git documentation. https://git-scm.com/docs .
[12] Grand theft auto 5. https://www.rockstargames.com/V/ .
[13] Gulp. https://gulpjs.com/ .
[14] Material icons. https://material.io/resources/icons/ .
[15] Mongo db. https://www.mongodb.com/ .
[16] Mongoose documentation. https://mongoosejs.com/docs/ .
[17] Mongoose js. https://mongoosejs.com/ .
[18] Monopoly. https://monopoly.hasbro.com/en-us .
[19] Node js. https://nodejs.org/en/ .
[20] Package.json documentation. https://docs.npmjs.com/files/package.json .
[21] Parcel documentation. https://parceljs.org/getting_started.html .
[22] Parcel js. https://parceljs.org/ .
[23] Parcel static files. https://www.npmjs.com/package/
parcel-plugin-static-files-copy .
[24] React. https://reactjs.org/ .
[25] React device detect. https://www.npmjs.com/package/react-device-detect .
[26] React redux. https://www.npmjs.com/package/react-redux .
32

[27] React redux documentation. https://react-redux.js.org/api/ .
[28] React svgr. https://react-svgr.com/playground/ .
[29] Red dead redemption 2. https://www.rockstargames.com/reddeadredemption2/ .
[30] Redux. https://redux.js.org/ .
[31] Redux documentation. https://redux.js.org/basics/basic-tutorial .
[32] Scss – syntactically awesome style sheets. https://sass-lang.com/ .
[33] Socket io. https://socket.io/ .
[34] Socket.io documentation. https://socket.io/docs/ .
[35] Svg2jsx. https://svg2jsx.com/ .
[36] uuid. https://www.npmjs.com/package/uuid .
[37] w3schools. https://www.w3schools.com/ .
[38] Ben Aston. A brief history of javascript. https://medium.com/@_benaston/
lesson-1a-the-history-of-javascript-8c1ce3bffb17 , 2015.
[39] Thomas Jaggi ”backflip”. gulp-iconfont-css. https://github.com/backflip/
gulp-iconfont-css .
[40] Alberto Gimeno. How javascript bundlers work. https://medium.com/@gimenete/
how-javascript-bundlers-work-1fc0d0caf2da , 2016.
[41] Mike MacCana. Dynamic template. https://github.com/mikemaccana/
dynamic-template/blob/master/index.js .
[42] Tyler McGinnis. How to validate an email address in javascript – ui.dev. https://ui.
dev/validate-email-address-javascript/ .
33