Proiect de Diplomă

Aplicație Web pentru jocul de șah
UNIVERSITATEA POLITEHNICĂ BUCUREȘTI

FACULTATEA DE AUTOMATICĂ ȘI CALCULATOARE
DEPARTAMENTUL CALCULATOARE
PROIECT DE DIPLOMĂ
Bükkӧsi George-Daniel
Coordonator științific:
Prof. dr. ing. Cornel Popescu
BUCUREŞTI
2021
1
CUPRINS
Sinopsis ....................................................................................................................................... 4
Abstract ...................................................................................................................................... 4
Multumiri.................................................................................................................................... 5
Acknoledgements ....................................................................................................................... 5
1 Introducere ......................................................................................................................... 6
1.1 Context ........................................................................................................................ 6
1.2 Problema...................................................................................................................... 6
1.3 Obiective ...................................................................................................................... 6
1.4 Structura lucrării .......................................................................................................... 6
2 Analiza și specificarea cerințelor......................................................................................... 7
3 Studiu de piață / Abordări existente................................................................................... 9
4 Soluția propusă ................................................................................................................. 12
4.1 Mediul de dezvoltare ................................................................................................. 12
4.2 Framework-ul Bootstrap 4.0...................................................................................... 13
4.3 Framework-ul Django ................................................................................................ 13
4.4 Modele de date și relaționarea lor ............................................................................ 15
5 Detalii de implementare ................................................................................................... 21
5.1 Front-End ................................................................................................................... 21
5.2 Back-End .................................................................................................................... 24
5.2.1 Creare cont și configurare profil......................................................... 24
5.2.2 Căutarea jucătorilor și plasarea lor în joc ........................................... 26
5.2.3 Jocul de șah și sincronizarea cu Front-End ......................................... 26
5.2.4 Modul spectator ................................................................................. 29
5.2.5 Rating și divizii .................................................................................... 30
5.2.6 Clasamente ......................................................................................... 31
5.2.7 Realizări .............................................................................................. 33
6 Studiu de caz / evaluarea rezultatelor .............................................................................. 35

7 Concluzii ............................................................................................................................ 36
7.1 Implementări ulterioare / Oportunități de marketing .............................................. 36
2
8 Bibliografie ........................................................................................................................ 38
3
SINOPSIS
Această lucrare arată procesul de dezvoltare a unei aplicații web pentru jocul de șah,
activitate pe care am practicat-o ca hobby încă de tânăr. Am ales această temă de proiect deoarece
însumează un set de abilități răspândite pe o arie largă a dezvoltării produselor software.
În urma îmbinării unei interfețe cu utilizatorul pe web cu partea de server si de baze de date,
am obținut o aplicație funcțională care permite crearea unui cont și practicarea șahului impotriva
altor jucatori clasati in divizii de nivel asemănător, vizualizarea de diferite statistici ale jucătorilor, dar
și obținerea unor trofee pentru diferite realizări.
ABSTRACT
This paper shows the process of developing a web application for the game of chess, an
activity that I practiced as a hobby since I was young. I chose this project theme because it sums up a
set of skills spread over a wide area of software development.
After combining a web user interface with the server side and database, I obtained a
functional application that allows you to create an account and practice chess against other players
ranked in similar level divisions, viewing different statistics of the players, but also unlocking different
achievements.
4
MULTUMIRI
Doresc să mulțumesc profesorului meu îndrumător, domnului Cornel Popescu, care m-a
susținut pe parcursul realizării proiectului și m-a sfătuit la nevoie, dar și tuturor profesorilor din
cadrul Facultății de Automatică și Calculatoare, fără de care nu aș fi ajuns in punctul in care mă aflu
azi, prezentând proiectul care marchează procesul a patru ani de dezvoltare ca inginer. De asemenea,
doresc să le mulțumesc celor care au participat la sondajul de opinie, dar și celor experimentați cu
care am discutat despre platformele de șah. Nu în ultimul rând, mulțumesc familiei și celor mai
apropiați care mi-au fost alături de-a lungul acestui parcurs frumos.
ACKNOLEDGEMENTS
First of all, I would like to thank my diploma coordinator, professor doctor Cornel Popescu,
for backing me up throughout this project and offering me the best advice that i needed. Then, of
course, I would like to thank all the professors from the Faculty of Automatic Control and Computers,
without whom I wouldn’t be here today, presenting the project that sets this important milestone in
my engineering career. Not only would I like to thank everyone involved in helping me gather data
for my thesis survey, but also would I like to thank those who spent time debating other chess web
applications with me. Nevertheless, I would like to thank my family and my closest ones that stood
by my side during this beautiful process
5
1 INTRODUCERE
1.1 Context
Odată cu tehnologizarea din ce în ce mai abundentă a lumii în care trăim, dar și a vieții noi la
care a trebuit să ne adaptăm datorită perioadei nefaste în care ne aflăm, foarte multe activități, dar și
bussines-uri s-au mutat in mediul online. Dezvoltarea de aplicații web trebuie și ea să țină pasul,
astfel încât să poată oferi produselor o înfățișare și în mediul online. Având în vedere aceste aspecte,
un simplu joc de șah este mai aproape ca niciodată de orice individ care dispune de un calculator cu
acces la internet.
1.2 Problema
Această lucrare propune dezvoltarea unei aplicații web pentru jocul de șah, care ii oferă
utilizatorului posibilitatea de a-și crea un cont prin care va putea accesa aplicația web și practica jocul
de șah în rețea cu alți utilizatori. De asemenea, utilizatorul beneficiază de un mecanism de
plasament, astfel încât să joace cu jucători de același nivel cu el, dar și de un clasament asupra căruia
pot fi aplicate diferite sortări. Mai mult de atât, acesta va putea să îsi monitorizeze toată evoluția
printr-un clasament in 7 divizii diferite și se va bucura de diverse realizări obținute.
1.3 Obiective
Soluția oferită dorește să vină cu îmbunătățiri pentru experiența utilizatorului cu o astfel de

platformă, dorind să simplifice și să concentreze elementele esențiale unui mediu competitiv, dar și
propice relaxării în același timp.
1.4 Structura lucrării
Lucrarea este împărțită în mai multe capitole pe care urmează să le descriu pe scurt în acest
paragraf.
6
Analiza și specificarea cerințelor este capitolul în care se delimitează funcționalitățile care

urmează a fi implementate, pe baza unor interviuri cu oameni care împărtășesc această pasiune
pentru șah, dar și pe baza unui sondaj de opinie completat de către colegi si apropiați.
In cele ce urmează, studiul de piață reprezintă un o analiză atât personală a produselor de

același tip existente pe piață, cât și niste concluzii trase pe baza discuțiilor cu alți pasionați de șah.
În cel de-al patrulea capitol este prezentată soluția și arhitectura sa, împreună cu diagrame
ce facilitează înțelegerea relaționării tehnologiilor utilizate în dezvoltarea produsului.
În capitolul ce il precede urmează să detaliez implementarea oferită, descriind clar toate

funcțiile, toți pașii și algoritmii utilizați. În cele din urmă voi studia rezultatul obținut prin comparati
cu obiectivul initial propus, dar și prin comparație cu alte soluții deja existente. De asemenea, voi
trage concluzii pe baza experienței personale din procesul de dezvoltare.
În ultimul capitol voi discuta despre implementări ulterioare ce pot imbunătăți produsul, dar
și despre posibilitatea de a fi monetizată. În cele din urmă, ultimul capitol îl reprezintă bibliografia
lucrării mele.
2 ANALIZA ȘI SPECIFICAREA CERINȚELOR
Pentru a determina cât mai exact nevoile consumatorului, am alcătuit un chestionar

online(de tipul Google Form), pe care l-am trimis colegilor mei, dar și apropiaților, selectând primele
100 de răspunsuri. Am dorit să aflu care este tangeța lor cu jocul de șah, dar și ce părere au despre
cele mai cunoscute platforme deja existente pe piață. Intrebările la care au răspuns cei 100 de
participanți au fost următoarele:
 „Ați jucat vreodată șah?” (răspuns da/nu)

 „Ați accesat vreodată o platformă online de șah?” (răspuns da/nu)
 „Ce feature-uri vi se par utile la o platformă online de șah?” (alegere multiplă)
 „Ați auzit de Lichess.com sau Chess24.com sau Chess.com?”(alegere multiplă)
 ” Vă rog accesați măcar una dintre platformele menționate in întrebarea anterioară și
remarcați o posibilă îmbunătățire pe care aceasta ar putea să o ofere. Ce v-ar atrage mai
mult? (răspuns liber)
7
Fig. 1
Pentru prima întrebare(Fig.1), 24% dintre cei chestionați au raspuns negativ, ceea ce
inseamnă că aproximativ 3 din 4 persoane au jucat măcar o data șah, fie in mediul real, fie in cel
virtual. Rezultatul este unul așteptat, având în vedere comunitatea inginerească în care sondajul a
fost realizat, procentajul real pe un eșantion mai diversificat putând să difere destul de mult.
Fig. 2
La cea de-a doua întrebare(Fig.2), doar 41% din cei ce au jucat șah au accesat o platformă
online. Acest fapt demonstrează că un joc cu o tradiție atât de mare încă are o posibilitate de a mai
ascende și în mediul online.
Fig. 3
Din lista de facilități ale aplicației prezentă la întrebarea numărul 3(Fig. 3) reiese faptul că
majoritatea oamenilor doresc un cont de utilizator configurabil. Această tendință poate fi explicată
8
de obisnuința oamenilor cu conturile de socializare, unde doresc să își personalizeze profilul cât mai
mult.
De asemenea, mulți au ales și caracteristici precum un top (Leaderboard) cu diferite sortări,

o pagină cu varii realizări ale utilizatorului (Achievements), deoarece le oferă un mediu competitiv și
îi recompensează pentru progresul realizat.
Cele mai nepopulare alegeri sunt tutorialele, regulamentul, chat-ul in timpul jocului si
forumul. Cu toate acestea, 70% au optat pentru un antrenor virtual. Aceste rezultate denotă faptul că
majoritatea celor ce accesează o astfel de platformă stăpânesc bazele șahului și îi cunosc regulile
fundamentale, însă doresc să se poată perfecționa și prin antrenarea împotriva unui antrenor virtual.
Chat-ul nu ar avea o reală utilitate în timpul unui joc de șah, deoarece acesta se joacă contra
cronometrului, iar scopul jocului este construirea unei strategii cât mai solide împotriva adversarului.
O altă facilitate care a fost aleasă de către 62% dintre participanții la chestionar o reprezintă
posibilitatea de a fi spectator la jocurile altor jucatori. Consider că este o facilitate dorită, deoarece
jucătorii au oportunitatea de a invăța si de la cei mai buni de pe această platformă.
3 STUDIU DE PIAȚĂ / ABORDĂRI EXISTENTE
În momentul de față există mai multe platforme de șah online, printre cele mai celebre
numărându-se:
 Chess.com
 Lichess
 Chess24.com
În sondajul realizat la capitolul anterior, la întrebarea numărul patru, 55 din 100 de

participanți au răspuns că au auzit de Chess24, Lichess sau Chess.com. Interpretând acest rezultat
deducem că până și câțiva dintre cei care nu au tangențe cu șahul au auzit de aceste aplicații web.
Aceste platforme au cel mai mare număr de utilizatori și înglobează numeroase

funcționalități, printre care se numară și următoarele:
 Joc împotriva unui jucator

 Joc împotriva AI
9
 Joc în modul turneu

 Puzzle-uri de șah
 Lecții de șah
 Analiză a jocurilor de șah
 Articole
 Video-uri despre șah
 Știri din lumea șahului
 Top-uri cu jucătorii de șah
 Magazin pentru fanii șahului
 Listă de prieteni
 Mesaje între prieteni
 Profil utilizator
 Găsire antrenor de șah
Pentru a identifica oportunitatea cea mai bună de a face concurență acestor platforme, a fost
nevoie să discut cu câteva persoane care au mult mai multă experiență decât mine în acest domeniu
al șahului. Părerile lor au fost sintetizate, reformulate și/sau traduse dintr-un limbaj colocvial într-un
limbaj academic și urmează să le prezint mai jos, insă identitatea lor va rămâne anonimă, ca și în
cazul participanților la sondajul de opinie.
Fostă campioană și vicecampioană națională: „Cel mai important aspect este ca jocul să fie
funcțional, algoritmul să fie bine scris, să nu existe mutări imposibile. Un alt detaliu important este ca
fiecare jucător să aibă un rating, care să crească sau să scadă în funcție de rezultatul partidelor”
Prieten din străinătate, joacă șah profesionist(traducere din engleză): „Încearcă să menții
interfața cu utilizatorul cât mai simplă. Multe aplicații de genul acesta au o interfață încărcată. De-
asta mie personal îmi place Lichess. Este foarte curat. Încearcă să realizezi un sistem de rating bun,
deoarece e important ca jucătorii să nu se frustreze datorită plasării lor neprecise. De asemenea,
timpul reglabil și jocul pe echipă pot fi foarte distractive”.
10
Pe lângă aceste discuții, ultima intrebare din chestionarul realizat a sintetizat următoarele
răspunsuri:
Fig. 4 Fig. 5
Se poate observa așadar o tendință pentru o interfață simplificată, cât mai prietenoasă cu
utilizatorii și cu începătorii. Din punct de vedere tehnic, se dorește un sistem de plasare a jucătorilor
(matchmaking) care să funcționeze cât mai bine, pentru a oferi o experiență plăcută, potrivită pentru
nivelul de joc al utilizatorului. Mai mult de atât, sunt dorite funcționalități care să urmărească
progresul jucătorului și să îl determine să își continue parcursul pe platformă.
În urma analizării acestor rezultate, am ajuns la concluzia că următoarele funcționalități sunt

cele mai importante pentru o platformă minimalistă de șah, acestea urmând a fi implementate in
aplicația mea:
 Cont de utilizator
 Personalizare cont utilizator (tara de provenienta, varsta, sex, motto, etc.)
 Joc împotriva unui jucător
 Sistem de clasare a jucătorilor
 Sistem de găsire si potrivire a jucătorilor pentru crearea partidelor
 Joc cu timp limitat
 Modul spectator
 Listă de prieteni și posibilitatea invitării lor la o partidă de șah
 Vizualizarea profilurilor altor utilizatori
11
 Mecanism de acordare a anumitor realizări pentru progres

 Realizarea unui top al jucătorilor care poate fi sortat în funcție de diferite criterii
4 SOLUȚIA PROPUSĂ
În acest capitol voi prezenta succint tehnologiile și algoritmii utilizați în procesul de dezvoltare
al produsului, dar și principalele tabele din baza de date, și modul în care acestea relaționează.
4.1 Mediul de dezvoltare
În dezvoltarea aplicației web, pe partea de back-end am lucrat în mediul Linux, deoarece

oferă suport nativ pentru Python, limbajul în care partea de back-end a aplicației este scrisă. Ca
editor de text am utilizat VSCode, fiindcă dispune de un plug-in(o extensie) pentru Atlassian, dar și de
consolă, permițându-mi să fac acțiuni pe repository-ul în care am lucrat.
Am folosit BitBucket ca sistem de control al versiunii, deoarece am dorit să am un mediu

organizat de lucru și garanția că nu risc să pierd fisiere. Mult mai important decât acestea este
avantajul revenirii la o versiune anterioară a codului, în cazul in care cea actuala prezintă probleme.
Pentru GIT, am folosit urmatoarele standarde de denumire a ramurilor, vizibile și în Fig. 6:
 feat_{nume_componenta}
 fix_{nume_componenta}
Fig. 6
De exemplu, dacă urma să introduc o funcționalitate în modulul „Leaderboards” al aplicației,

lucram pe branch-ul(ramura) „feat_leaderboards”, iar dacă doream să repar o problemă în modulul
„Play” al aplicației, lucram pe branch-ul „fix_play”. Fiecare commit a beneficiat de specificații clare a
modificărilor făcute, iar comentarii din cod au fost prezente pretutindeni.
12
Pentru partea de front-end am lucrat cu JavaScript, HTML si CSS, dar și framework-ul

Bootstrap.
4.2 Framework-ul Bootstrap 4.0
Acest Framework pentru partea de front-end a aplicației facilitează organizarea în pagină a

elementelor, dar și afișarea diverselor elemente de tipul bară de navigație, subsol sau butoane,
nefiind nevoie să le desenez de la zero. Prin simpla adăugare de clase predefinite (Bootstrap)[1] și
proprietăți de stil la elementele din HTML, acestea își modifică aspectul.
Un exemplu îl reprezintă următoarele 2 figuri(7a și 7b), unde acest buton roșu a fost randat
folosind clasele „btn btn-sm btn-danger”, care reprezintă un buton de dimensiune mică(small) pe
culoarea predefinită roșie(notată danger în Bootstrap). În mod asemănător au fost stilizate și restul
elementelor de pe website.
Fig. 7a și 7b
4.3 Framework-ul Django
Am ales ca mediu de realizare a acestei aplicații web framework-ul Django, care are la baza
limbajul Python, datorită simplității utilizării sale și a modelului MVT (Model View Template),
propice aplicației pe care o dezvolt.
Modelul reprezintă o clasă ce conține câmpuri și metode esențiale și este asociat cu o singură
tabelă în baza de date. Acesta este descris întotdeauna în fișierul models.py. După crearea oricărui
model, acesta trebuie înregistrat în fișierul settings.py al proiectului.
13
View-ul face referire la o funcție Python care efectuează o anumită bucată din logica de back-
end a aplicației și întoarce un răspuns de tipul HTTPResponse către utilizator . Acesta poate fi ori sub
forma unei randări (render) a unei pagini HTML, ori sub forma unei redirectări către o altă pagină
HTML, ori sub forma unei erori. Un view este apelat printr-o cerere a unui utilizator (HTTPRequest),
de aceea va primi întotdeauna ca parametru un request pe baza căruia va opera răspunsul.
În cele ce urmează voi detalia pașii prin care se procesează o cerere a unei pagini:
 Se parcurge fișierul urls.py pentru găsirea path-ului corespunzător în urlpatterns

 Odată gasit un path corespunzator, Django cheamă funcția sa specifică (sau view-ul, mai
precis), care primește ca argument un obiect de tipul HttpRequest
 In cazul in care nu se găsește niciun URL corespunzător, Django afișează o eroare de tipul
400/403/404/500 (Django Project)[2]
Întreaga relaționare utilizator – aplicație web prin framework-ul Django este descrisă în următoarea
diagramă.
Fig. 8
14
4.4 Modele de date și relaționarea lor
Aplicația definește 6 modele de date, care generează tabelele aferente lor:
 Profile
 Game
 Achievement
 Unlock_Achievement
 Game_Invitation
 Friend_Request
Fiecare user reprezintă o intrare în tabela Profile, iar fiecare joc creat în urma plasării a doi
jucători reprezintă o intrare in tabela Game.
Modelul Profile conține o cheie straină către modelul Game, care descrie jocul curent în care
se află jucătorul. De asemenea, modelul Game conține numele celor 2 jucători, pentru a putea obține
o referință către oricare dintre ei, în vederea modificării diferitelor statistici cum ar fi elo personal,
castiguri, pierderi, remize, rată de câștig.
Modelul Friend_Request modelează relația dintre doi useri care își trimit o cerere de prietenie,
conținând chei străine către ambii utilizatori.
Modelul Game_Invitation funcționează asemănător cu Friend_Request, descriind acțiunea de

invitație la joc.
Modelul Unlock_Achievement a fost creat pentru a realiza o modelare a relatiei N:N intre
profilurile utilizatorilor și realizările ce pot fi deblocate, având chei străine către modelele Profile și
Achievement.
Modelul Achievement conține date despre un anumit tip de realizare posibilă în joc. În această
tabelă nu se introduc date decât o singură dată, când se definesc Achievement-urile pentru toți
jucătorii, nefiind modificată decât de către administratorul bazei de date.
15
Fig. 9
Se poate observa in Fig. 9 că modelul Profile dispune de următoarele câmpuri, ce au

următoarele semnificații în cadrul aplicației:
 id : Primary Key → cheie primară predefinită a modelului

 user : (User model) → moștenirea modelului User din modelele Django
 game : ForeignKey(Game model) → referință către jocul în care se află jucătorul
 country : CountryField → atribut disponibil personalizării profilului, contribuie și la sortările
din leaderboards; accesibil userului din pagina de profil
 age : PositiveIntegerField → un alt atribut disponibil personalizării profilului; accesibil
userului din pagina de profil
 motto: CharField → câmp disponibil personalizării profilului; accesibil userului din pagina de
profil
 rating : PositiveIntegerField → reprezintă elo-ul(ratingul) jucatorului; câmp necesar logicii de
potrivire și plasare în joc a jucătorilor; nu poate fi modificat de către utilizator; acesta este
calculat pe baza algoritmului lui Arpad Elo, care urmează sa fie detaliat in Cap. 5 (Detalii de
implementare)
 division : CharField → Reprezintă divizia în care este clasat jucătorul momentan; este
inaccesibil utilizatorului și este modificabil doar de către logica de actualizare a ratingului și a
diviziei jucătorilor
16
 rank : PositiveIntegerField → atribut ce indică poziționarea jucătorului în clasamentul global;

inaccesibil utilizatorului; modificabil în logica realizării top-urilor
 gamecount : PositiveIntegerField → atribut utilizat la afișarea statisticilor pe pagina de profil;
nu poate fi modificat de către utilizator și este actualizat în logica de finalizare a unui joc;
 wins : PositiveIntegerField → atribut utilizat tot în afișarea statisticilor, modificabil doar în
logica de finalizare a jocului
 losses : PositiveIntegerField → analog Wins
 draws : PositiveIntegerField → analog Wins/Losses
 winrate : PositiveIntegerField → analog Wins / Losses/Draws
 winstreak : PositiveIntegerField → atribut folosit în deblocarea anumitor realizări pentru
profilul utilizatorului; este modificat în logica de finalizare a jocului și este inaccesibil
utilizatorului
 friends : ManyToManyField → reprezintă o listă de modele Profile cu prietenii utilizatorului;
este utilizată pentru a afișa link-uri către fiecare prieten în pagina de profil și este modificată
în cazul în care o cerere de prietenie este acceptată sau un prieten este scos din lista de
prieteni
 achievements : PositiveIntegerField → un atribut folosit în calcularea statisticilor
utilizatorului pentru realizări; inaccesibil utilizatorului
 invitations : ManyToManyField → asemănător listei Friends, este utilizată pentru a afișa
invitațiile la joc disponibile pe pagina de profil a utilizatorului; se actualizează în momentul in
care o invitație la joc este primită sau refuzată
 in_game : BooleanField → atribut True/False utilizat pentru logica plasării jucătorilor în joc;
inaccesibil de către utilizator
 in_queue : BooleanField → asemănător in_game
 color : CharField → culoarea cu care va juca jucătorul partida; este actualizată în momentul
creării obiectului Game
 image : ImageField → atribut utilizat la configurarea profilului jucătorului, acesta având
posibilitatea să își modifice imaginea de profil de pe pagina sa de profil;
Fiecare utlizator al aplicației are un profil individual atribuit după crearea unui cont. Utilizarea
aplicației este dependentă de existența unui cont de utilizator. La începutul fiecărui joc, variabilele de
stare ale jucătorului sunt actualizate, iar la finalul fiecărui joc, cele ce țin de statistica jucătorului, care
va fi afișată atât pe pagina de profil, cât și în cea a clasamentelor.
17
Modelul Game nu este accesibil de către niciun utilizator, el fiind actualizat doar de către
logica de schimbare a turei și de finalizare a jocului. În figura de mai jos(Fig. 9) se poate observa
modelul Game, cu atributele sale aferente:
Fig. 10
 id : PrimaryKey → cheie primară predefinită a modelului

 player1 : CharField → câmp care conține numele primului jucător atribuit jocului
 player2 : CharField : CharField → câmp care conține numele celui de-al doilea jucător plasat
în joc
 turn : CharField → atribut care stochează culoarea jucătorului al cărui rând este
 gamestate → atribut de tip string care conține starea tablei de șah codificate; aceasta va fi
detaliată in Cap. 5 (Detalii de implementare)
 elo → atribut care conține media rating-urilor actualizate ale jucatorilor; este utilizat in
sortarea jocurilor disponibile în modul spectator pe pagina principală a aplicației;
 endstate → atribut care descrie în ce fel se termină jocul: poate lua valorile
„ended”/”timeout”
 timer1 → atribut ce stochează timpul rămas primului jucător pentru a își efectua mutările
 timer2 → asemănător timer1, dar pentru cel de-al doilea jucător
 timestamp1 → atribut care conține momentul la care primul jucator si-a finalizat tura
 timestamp2 → asemănător timestamp1, dar pentru cel de-al doilea jucător
 latency1 → latența care se ia în calcul pentru efectuarea turei și verificarea timeout-ului
18
 latency2 → asemănător latency1, dar pentru player2

 without_capture → atribut care verifică câte ture au trecut fără a fi capturată vreo piesă
 threefold → atribut care verifică de câte ori s-a repetat aceeași poziție in timpul jocului
Fig. 11
În figura precedentă(Fig. 11) se observă modelul Achievement, care conține următoarele

atribute:

 name : CharField → numele realizării respective
 description : CharField → atribut care conține descrierea cerinței ce trebuie indeplinită
pentru a debloca un astfel de Achievement
 points : PositiveIntegerField → atribut ce conține numărul de puncte aferent realizării
respective care vor fi acordate jucătorului care îl deblochează; este utilizat în afișarea de pe
pagina Achievements
Fig. 12
În Fig. 12 se regăsește modelul Unlock_Achievement necesar modelării relației N:N dintre

profiluri și achievement-uri. Acest model conține următoarele câmpuri:
19

 user : ForeignKey(Profile model) → cheie străina necesară modelării N:1 între profiluri și
unlock_achievement-uri
 achievement : ForeignKey(Achievement model) → cheie straina necesara modelării 1:N între
unlock_achievement-uri și achievement-uri
 progress : PositiveIntegerField → atribut care reprezintă progresul unui jucător în cadrul
realizării respective; dacă acesta a deblocat realizarea respectivă deja, progress ia valoarea
100 in cadrul obiectului corespunzător
Modelarea relației N:N dintre profiluri si realizări este N:1:N, după cum se poate observa in
Figura 13:
Fig. 13
Celelalte două tabele cu date temporare, Friend_Request si Game_Invitation au următoarea

structură, conținând chei străine către modelul Profile:
Fig. 14
20
5 DETALII DE IMPLEMENTARE
5.1 Front-End
Interfața cu utilizatorul este unul dintre cele mai importante aspecte ale unei aplicații web,
deoarece este primul contact pe care acesta îl are cu produsul. Din acest motiv am ales să construiesc
o interfață intuitivă și cât mai simplu de utilizat. În momentul accesării site-ului, utilizatorul va ajunge
pe pagina principală, unde va regăsi partidele disponibile modului spectator. În partea de sus a
paginii se află bara de navigație. Aceasta este vizibilă si rămâne neschimbată pe orice pagină accesată
din aplicație. Singura excepție o constituie statutul de autentificat, care modifică cele două butoane
„Register” si „Log in” in „Profile” si „Log out”, dar și apariția link-ului „Achievements”.
Bara de navigație conține butoane către următoarele pagini:
 Home
 Leaderboards
 Achievements
 Play
 Register/Profile
 Log In/Log Out
Aceasta este împărțită în două părți: partea din stânga conține butoanele Home,
Leaderboards și Play, iar cea din dreapta se ocupă de funcționalitățile de profil al utilizatorului și
autentificare.
Pentru a evita duplicarea codului în realizarea paginilor HTML, am folosit metoda de

moștenire a template-urilor pe care o oferă Django. În cazul de față, am creat un document
base.html pe care toate paginile site-ului îl moștenesc, deoarece doresc să am pe fiecare pagină bara
de navigație, dar și framework-ul Bootstrap disponibile. Fișierul de bază conține în <body> un modul
{% block content %} , care este înlocuit în fiecare pagină ce îl moștenește cu conținutul care se
dorește a fi afișat pe respectiva pagină.
Fig. 15
21
În Django, fișierele HTML sunt regăsite în directorul templates al fiecărei aplicații din cadrul
proiectului. În cazul meu, proiectul este alcătuit din două aplicații:
 Users -> aplicație care se ocupă de funcționalitățile de logare și resetare a parolei,

interacțiuni între useri și deblocarea achievement-urilor
 Chessapp -> aplicație care se ocupă de funcționalitățile jocului de șah
În cele ce urmează voi descrie conținutul fiecărei pagini pe care utilizatorul o poate accesa:
 Home → pagina principală a platformei, unde se pot găsi jocurile disponibile modului
spectator
 Leaderboards →pagină pe care utilizatorul poate sorta toți jucătorii în funcție de anumite
criterii (tara de provenienta, rating, rată de câștig sau număr de partide jucate); de
asemenea, utilizatorul poate vizita paginile de profil ale altor utilizatori pentru afla mai multe
date despre ei
 Play → pagină ce se va incărca după ce sistemul de potrivire a jucătorilor a găsit doi jucători
eligibili pentru a forma o partidă; este pagina unde va fi afișată tabla de șah, timpul disponibil
fiecărui jucător, și piesele capturate
 Achievements -> pagină unde utilizatorul poate vedea ce realizări a avut de-a lungul
parcursului său pe platforma de șah
 X’s profile → pagină cu scurte detalii despre profilul utilizatorului vizitat din pagina
Leaderboards
 Profile → pagină care conține datele utilizatorului; acestea pot fi modificate de către acesta
în orice moment al accesării paginii
 Register-> pagină care oferă funcționalitatea inregistrării unui nou utilizator în baza de date
prin completarea unui simplu formular
 Log In → pagina pe care utilizatorul poate face actiunea de log-in folosind credențialele cu
care și-a creat contul
 Log Out → funcționează ca un simplu buton, deloghează utilizatorul și îl redirecționează către
o pagină în care are opțiunea să se logheze din nou sau să-și schimbe parola
 Reset password → pagină la care se ajunge din ecranul de login, în cazul în care utilizatorul
își uită parola sau dorește să o schimbe
22
Un alt aspect care ține de partea de front-end a aplicației este mutarea pieselor de șah și
verificarea validității mutărilor. Acestea sunt prezente în fișierul chess.js, care se regăsește împreună
cu fișierul main.css(cel în care este rezolvată partea de stilizare a aspectului site-ului) în fișierele
statice din ierarhia Django, mai exact în chessapp/static/chessapp. Voi descrie principalele
funcționalități din fișierul chess.js. Pentru a evita supraîncărcarea paginii cu jocul de șah, deoarece
verificarea șahului mat si cea a cazului de egalitate sunt cele mai complete operații, am hotarat ca
acestea să aibă loc pe back-end.
Starea tablei de șah se transmite între front-end si back-end ca un string, care este
decodificat în fiecare parte. Operațiile descrise mai jos au loc pe o matrice de pe front-end,
chessboard_matrix.
In tabelul de mai jos am descris fiecare funcție folosită in fisierul chess.js pentru a
implementa validarea mutărilor, dar și randarea la poziția corectă a pieselor de joc.
Funcție Utilitate
getSquareCenterPosition(x, y) Întoarce poziția centrului căsuței în funcție de
poziția în matrice
getSquareFromPosition(posx, posy) Întoarce poziția în matrice în funcție de pixeli
movePiece() Schimbă poziția unei piese
undoLastMove() Revine la poziția anterioară
resetBoard() Resetează tabla de șah la poziția inițială
emptyBoard() Golește tabla de șah
flipBoard() Inversează tabla de șah, este folosită în funcție
de culoarea jucătorului (ne dorim ca întotdeauna
utilizatorul să fie în partea de jos a ecranului)
dragElement(elmnt) Face posibilă mutarea unui element cu mouse-ul
snapPiecesToBoard() Centrează și așează piesele pe tabla de șah
isValidPath(start_pos, end_pos) Verifică dacă o cale este validă
isPathClear(start_pos, end_pos) Verifică dacă o cale este liberă
isValidMove(start_pos, end_pos, piece) Verifică dacă o mișcare este validă
isTakeable(attacker_pos, victim_pos) Verifică dacă o piesă poate fi luată
findMyKing() Întoarce poziția regelui
isCheck() Verifică dacă utilizatorul este in șah
sendRequest() Funcție care se ocupă de polling pentru aflarea
turei
decodeGameStateString(string) Funcție care decodifică string-ul cu starea jocului
în matricea chessboard_matrix
endturn() Funcție care încheie tura
isCastle(start_pos, end_pos) Verifică dacă se poate face rocada
getGameStateString Funcție care codifică matricea în string-ul ce
urmeaza să fie trimis la back-end
Tabel 1
23
5.2 Back-End
În această secțiune voi descrie tot ce ține de partea de back-end a aplicației, de la

mecanismul de creare a unui cont, până la sincronizarea cu front-end-ul în cazul unui joc de șah.
5.2.1 Creare cont și configurare profil
Primul mecanism al back-end-ului cu care interacționează utilizatorul este sistemul de

înregistrare a unui utilizator. Pentru realizarea acestuia a fost creată o rută in urls.py, care cheamă
funcția register(request) din views.py . În această funcție este creat un formular de tipul
UserRegistrationForm , care va fi randat pe ecranul utilizatorului. După crearea contului, utilizatorul
va avea atribuit un obiect de tipul Profile în baza de date. De asemenea, utilizatorul are posibilitatea
modificării parolei prin accesarea link-ului „Forgot your password?” din ruta de login. Acesta va primi
pe mail un link pentru alegerea unei noi parole.
Odată creat profilul, userul îl poate vizualiza accesând pagina „Profile” din bara de navigație,
care duce la apelarea rutei profile(request) din views.py.
Pagina de profil arată ca în Figura 16:
Fig.16
Utilizatorul își poate configura contul, adăugându-și o altă poză de profil decât cea
predefinită, dar și alte detalii personale cum ar fi țara de proveniență, vârsta sau un motto personal.
24
După adăugarea altor informații pentru configurarea profilului, utilizatorul are posibilitatea
de a face update la date, acestea fiind modificate in baza de date. Odată facută această actualizare,
următorul mesaj este afișat la începutul paginii:
Fig. 17
Pentru o mai bună experiență a utilizatorilor, am ales să afișez astfel de mesaje de feedback
atât pentru acțiunile de succes, cât și pentru cele de eșec.
În afară de butonul de update, acesta are și posibilitatea de a-și șterge contul. Aceste două
butoane se situează în josul paginii, după secțiunea de actualizare a profilului:
Fig. 18
Ne dorim ca ștergerea contului să nu creeze probleme în funcționarea aplicației sau să lase

date redundante în baza de date, așa că aceasta atrage după sine și ștergerea tuturor obiectelor ce
relaționează cu profilul său din baza de date, adică:
 Obiectele Game
 Obiectele Unlock_Achievement
 Cererile de prietenie
 Invitațiile la joc
Pe pagina de profil se poate observa că sunt afișate și invitațiile la joc, cererile de prietenie și
prietenii disponibili. In Fig. 16 se poate vedea cum utilizatorul nu are nicio cerere de prietenie
primită, caz in care mesajul „No friend requests” este afișat, însă are disponibilă o invitație la joc din
partea altui utilizator, pe care o poate accepta sau refuza. Aceste acțiuni cheamă rute precum
accept_friend_request, decline_friend_request, accept_game_invitation sau
decline_game_invitation.
25
Asemănător, în partea dreaptă a paginii de profil se află prietenii utilizatorului, al căror profil
poate fi accesat printr-un click pe numele lor. În cazul in care se dorește eliminarea unui prieten din
lista de prieteni, se va apăsa pe butonul „Remove” din dreptul numelui său. Odată eliminat un
prieten din lista de prieteni, acesta va fi scos și din lista friends de pe modelul Profile al utilizatorului
care face cererea. Aceste acțiuni intră pe rutele friend_profile și remove_friend.
5.2.2 Căutarea jucătorilor și plasarea lor în joc
Pentru a forma o partidă de șah, este necesară găsirea a doi jucători cu un rating cât mai
apropiat. Așadar, fiecare jucător care apasă pe butonul de „Play” este redirecționat către o pagină
de așteptare, cât timp se găsește un oponent similar pentru el.
Pe această pagină de așteptare are loc un polling (developer.mozilla.org)[3] către server, în

care se dorește să se afle dacă s-a format un joc ce îl conține pe utilizator încă sau nu. Acest polling
are loc pe ruta pollgame. Pentru utilizatorul în așteptare, atributul in_queue este setat pe True, iar
request-ul acestuia este introdus într-o listă de request-uri ce trebuie procesate.
De asemenea, la fiecare apăsare a butonului de „Play” se verifică dacă în lista cu request-uri

se află cel puțin două request-uri (condiție minimă pentru a putea forma un joc), după care se caută
în listă request-ul cu cel mai apropiat elo (rating) de cel al utilizatorului care a trimis cererea.
În momentul în care s-au găsit doi jucători compatibili, atributul in_queue trece pe False, iar
in_game pe True. Se creează un obiect nou de tipul Game, care conține numele celor doi jucători și
are timer1 și timer2 inițializate pe 180, adică 3 minute rămase pentru fiecare jucator. Se inițializează
și atributul elo pentru a putea afișa jocurile sortate după rating pe pagina de „Home” a aplicației.
Atributul turn este întotdeauna setat pe „white” la începutul jocului, deoarece albul mută primul. În
situația în care nu este găsit un oponent cu un rating suficient de apropiat (adică diferența dintre cei
doi este mai mare de 400 de puncte), jocul nu poate fi format, jucătorul rămânând în așteptare.
5.2.3 Jocul de șah și sincronizarea cu Front-End
Odată creat obiectul Game și setată starea jucătorilor pe profil, aceștia sunt redirecționați
către ruta currently_playing. Pe această rută este randată tabla de șah, împreună cu cele 32 de
piese, după cum se poate observa in Figura 19:
26
Fig. 19
În partea din dreapta a ecranului se afișează numele fiecărui jucător, dar și timpul rămas și
piesele capturate de către aceștia.
Fiecare jucător trece prin validarea mutării, realizată de funcțiile din Javascript, după care
cheamă ruta endturn, pentru a își finaliza rândul și a actualiza starea jocului în baza de date. Dupa ce
li se termină tura, aceștia intră într-o stare de polling, în care doresc să afle din nou când le vine
rândul, făcând request-uri repetate de tip GET către server. Acest lucru se întâmplă pe ruta pollturn,
unde se verifică dacă variabila turn de pe obiectul Game corespunzător jocului s-a modificat în
culoarea lor sau nu. De asemenea, pe această rută se verifică și dacă jocul s-a terminat prin șah mat,
remiză sau expirarea timpului de joc. În momentul în care un jucător își află rândul, acesta trebuie să
verifice trei posibile stări inainte de a putea muta normal:
 Dacă se află in șah mat

 Dacă este unul dintre cele 3 cazuri de egalitate (dacă se repetă aceeași poziție de trei ori,
dacă jucătorul nu se află în șah, dar nici nu poate efectua o mutare validă, sau dacă în 50 de
mutări consecutive nu s-a capturat nicio piesă) (FIDE, 2021)[4]
 Dacă s-a terminat timpul pentru unul dintre jucători
 Dacă jocul s-a terminat (cazul în care primul jucător a setat starea jocului pe ended, dar cel
de-al doilea nu a aflat încă)
În oricare dintre aceste situații, starea jocului este codificată și trimisă către front-end,
împreună cu unul dintre string-urile “ended”, “timeout”, “draw” sau “nocheckmate”. De asemenea,
27
în cazul în care se trimite “timeout” sau “ended”, trebuie trimis și câștigătorul jocului, pentru a putea
afișa pagina corectă HTML.
Pentru a codifica starea jocului, am utilizat următorul standard:
 Pozițiile neocupate din matricea ce reprezintă tabla de șah au fost reprezentate prin trei
zerouri in string-ul ce conține starea jocului
 Pozițiile care sunt ocupate de o piesă de șah sunt codificate după urmatorul standard, descris
în Tabelul 2:
Piesa Denumire in engleza Codificare

Pion alb White pawn pw1/pw2/pw3/pw4/pw5/pw6/pw7/pw8
Pion negru Black pawn pb1/pb2/pb3/pb4/pb5/pb6/pb7/pb8
Cal alb White knight kw1/kw2
Cal negru Black Knight kb1/kb2
Nebun alb White bishop bw1/bw2
Nebun negru Black bishop b1/bb2
Tura alba White rook rw1/rw2
Tura neagra Black rook rb1/rb2
Regina alba White queen qw1
Regina neagra Black queen qb1
Rege alb White king Kw1
Rege negru Black king Kb1
Tabel 2
Am ales această codificare, deoarece prima literă din codul piesei reprezintă tipul piesei, a
doua literă reprezintă culoarea, iar cea de-a treia reprezintă a câta piesă de acel tip este.
Așa arată un string complet care codifică starea jocului chiar la început, și cu care este
inițializat orice obiect de tipul Game care este introdus in baza de date.
gamestate='rb1kb1bb1Kb1qb1bb2kb2rb2pb1pb2pb3pb4pb5pb6pb7pb800000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000pw1pw2p
w3pw4pw5pw6pw7pw8rw1kw1bw1Kw1qw1bw2kw2rw2'
Când string-ul ce conține starea jocului și câștigătorul este primit de către front-end, în
Javascript se verifică stările “ended”/”timeout”/ ”draw”/”nocheckmate”. In cazul primelor trei, ruta
curentă este inlocuită cu o rută endgame_won, endgame_lost sau endgame_draw, unde se afișeaza
28
un mesaj pentru câștigător sau pentru pierzător, după caz. În cazul în care nu s-a dat șah, jocul
continuă natural, string-ul cu tabla de șah fiind decodificat în matricea chessboard_matrix.
Timpul este afișat cu ajutorul funcției startTimer de pe front-end, iar acesta este trimis către
back-end la fiecare endturn, împreună cu string-ul ce reprezintă starea jocului. De asemenea, se
trimite și timpul curent (timestamp) al mutării. Pe back-end, când aceste date sunt recepționate, se
calculează latența jucătorului folosind timestamp_backend – timestamp_frontend, care este luată în
considerare când se verifică timeout-ul. Fiecare jucător are la dispoziție 3 minute pentru a-și efectua
mutările.
5.2.4 Modul spectator
Un alt mod educativ și relaxant de utilizare a aplicației îl reprezintă modul spectator. Din
pagina de primire a aplicației, utilizatorul are posibilitatea de a accesa unul dintre cele douăzeci cele
mai bine clasate jocuri în funcție de ratingul lor, pentru a se delecta cu o partidă de șah de nivel înalt,
și, de ce nu, a învăța strategii noi de la cei mai buni jucători de pe platformă.
Pagina de primire, impreună cu jocurile disponibile pentru modul spectator pot fi văzute în
figura de mai jos(Fig.20):
Fig. 20
Realizarea modului spectator include tot o pagină de pe care se face polling către server, pe o
rută numită pollstate. În cazul modului spectator nu mai este necesară sincronizarea turelor,
29
deoarece perspectiva este una third party(din exterior), fără posibilitate de control, în care ne
interesează doar modificările asupra tablei de șah.
5.2.5 Rating și divizii
Fiecare jucător dispune de un rating personal, calculat după sistemul Elo (Elo, 1978)[5] , în
funcție de rezultatele obținute. Jucătorii încep cu un rating de bază în valoare de 1200 de puncte la
crearea contului. În cazul unei confruntări câștigate împotriva unui jucător mai valoros, aceștia vor
aduna mai multe puncte decât împotriva unui jucător mai slab, iar în cazul unei înfrângeri, vor pierde
mai puține, deoarece jucătorul are o probabilitate mai mică să câștige. În cazul unei înfrângeri
împotriva unui jucător mai slab insă, aceștia vor pierde mai multe puncte decât impotriva unuia mai
valoros, deoarece jucătorul era considera “avantajat”.
Algoritmul funcționează în felul următor:
 Se calculează probabilitățile fiecărui jucător de a câștiga meciul după formula:
Fig. 21
 Se alege factorul K potrivit, care urmează a fi folosit în formula de calculare a ratingului

o Dacă ratingurile jucătorilor sunt mai mari de 2400, iar aceștia au jucat cel puțin 30 de
partide, K=10
o Dacă ratingurile jucătorilor sunt mai mici decât 2400, K=20
o Dacă playerii nu au jucat măcar 30 de partide sau nu au împlinit vârsta de 18 ani, dar
au un rating mai mic decât 2300, K=40
 Se actualizează ratingurile jucătorilor în funcție de următoarea formulă:
Fig. 22
, unde Rn reprezintă ratingul calculat după partidă, Ro ratingul înainte de eveniment, K este factorul
calculat anterior, W este rezultatul partidei (1 pentru victorie, 0 pentru înfrângere), iar We este
rezultatul așteptat al partidei în funcție de Ro.
30
Actualizarea ratingului are loc după finalizarea jocului, adică în momentul în care primul
jucător află că jocul este finalizat. Algoritmul lui Elo este apelat in funcția updateElo.
În funcție de elo-ul fiecărui jucător, aceștia sunt clasați în 7 divizii:
 Bronze (1200-1400)
 Silver (1400-1600)
 Gold (1600-1800)
 Platinum (1800-2000)
 Diamond (2000-2200)
 Master (2200-2400)
 Grandmaster (>2400)
Actualizarea diviziei unui jucător are loc odată cu actualizarea elo-ului său de după partidă.
Așadar, updateDivision, funcția care realizează acest lucru, este apelată la finalul updateElo. Această
actualizare înseamnă modificarea atributului division al profilului jucătorului, dacă acesta
promovează într-o divizie superioară, sau dacă retrogradează într-o divizie inferioară. Segmentarea
parcursului în 7 divizii diferite face ca jucătorul să aibă un real sentiment al progresului, menținându-l
interesat și captivat de către platforma de șah.
5.2.6 Clasamente
Stârnirea competitivității jucătorilor pe o astfel de platformă este important de realizat atât

prin intermediul jocului, cât și prin alte moduri mai puțin conștiente jucătorilor, cum ar fi o pagină de
clasamente a acestora, în care se pot compara cu cei mai buni. Momentan există patru criterii de
sortare a jucătorilor pe această pagină: după rating, după țara de proveniență, după numărul de
jocuri jucate sau după rata de câștig a jocurilor.
Deoarece pe această pagina au loc cele mai multe interogări ale bazei de date, în figura
următoare voi oferi un exemplu de interogare care are loc pentru a afișa jucătorii ascendent, după
rating. Obiectele de tip Profile se accesează cu .objects , iar ordonarea lor se face cu order_by.
Fig. 23
31
Afișarea listei cu jucătorii ordonati după cele patru criterii este una tabelară și se poate
observa în Figura 24:
Fig. 24
Utilizatorul are posibilitatea accesării unei pagini de vizualizare a profilului unui jucător din
clasament, dând click pe numele lui. O astfel de pagină este incărcată și de pe pagina de profil, la
acționarea unui click pe numele unui prieten. Figura 25 arată această pagină:
Fig. 25
32
De pe aceasta pagină, utilizatorul poate trimite o cerere de prietenie utilizatorului al cărei

pagini este vizualizată. În cazul acceptării cererii de prietenie, destinatarul va apărea in lista de
prieteni a expeditorului.
5.2.7 Realizări
Pentru a captiva jucătorul și mai mult și a-i oferi sentimentul de progres, am introdus 39 de
realizări (achievements) pe care acesta le poate debloca în cariera sa pe platformă. Inițial, în baza de
date, pentru fiecare jucător se vor regăsi obiectele Unlock_Achievement, cu atributul care indică
progresul setat pe 0. Când acest atribut ajunge la 100, respectiva realizare se consideră a fi
deblocată. În momentul în care un Achievement devine deblocat pentru jucător, atributul
achievements de pe profilul său este incrementat cu 1. În cele ce urmează voi descrie realizările
posibile, câte puncte valorează fiecare și ce necesită acestea pentru a fi deblocate.
 Welcome! → Crearea unui cont, 10 puncte

 Hey, handsome! → Modificarea pozei de profil, 10 puncte
 First game → Jucarea primului joc, 15 puncte
 First win → Câștigarea primului joc, 15 puncte
 Hot streak! → Câștigarea a trei jocuri la rând, 25 puncte
 Hotter streak! → Câștigarea a cinci jocuri la rând, 50 puncte
 Newbie → Promovarea în divizia Silver, 30 puncte
 Mr. Somebody → Promovarea în divizia Gold, 50 puncte
 Starting to shine → Promovarea în divizia Platinum, 75 puncte
 Among the best → Promovarea în divizia Diamond, 100 puncte
 Just a little bit more... → Promovarea în divizia Master, 250 puncte
 Grandmaster → Promovarea în divizia Grandmaster, 500 puncte
 Godlike → Clasarea pe locul I internațional, 500 puncte
 Local sensation → Clasarea pe locul I local (in țara de proveniență), 350 puncte
 Cool kids gang → Clasarea în top 10 global, 350 puncte
 In the hood → Clasarea în top 10 local, 150 puncte
 Trio → Castigarea a trei jocuri, 30 puncte
 Cinque → Castigarea a cinci jocuri, 50 puncte
 La decima → Castigarea a 10 jocuri la rând, 150 puncte
33
 Ten, baby! → Câștigarea a 10 jocuri, 75 puncte

 50 in the bag → Câștigarea a 50 jocuri, 100 puncte
 100 and counting → Câștigarea a 100 jocuri, 200 puncte
 Loyal → Câștigarea a 500 jocuri, 500 puncte
 ...and Royal! → Câștigarea a 1000 jocuri, 1000 puncte
 Solid Bronze! → Consolidarea unei rate de câștig de peste 55% în divizia Bronze, 50 puncte
 Solid Silver! → Consolidarea unei rate de câștig de peste 54% în divizia Silver, 50 puncte
 Solid Gold! → Consolidarea unei rate de câștig de peste 54% în divizia Gold, 100 puncte
 Solid Platinum! → Consolidarea unei rate de câștig de peste 53% în divizia Platinum, 250
puncte
 Solid Diamond! → Consolidarea unei rate de câștig de peste 53% în divizia Diamond, 500
puncte
 Solid Master! → Consolidarea unei rate de câștig de peste 52% în divizia Master, 1000 puncte
 Solid Grandmaster! → Consolidarea unei rate de câștig de peste 52% în divizia Grandmaster,
1000 puncte
 In it to win it! → Deblocarea a 5 realizări, 50 puncte
 Make it 10! → Deblocarea a 10 realizări, 100 puncte
 10 is cool, but how about 15? → Deblocarea a 15 realizări, 250 puncte
 Halfway through the grind → Deblocarea a 20 realizări, 350 puncte
 2+5=25 → Deblocarea a 25 realizări, 500 puncte
 Almost there! → Deblocarea a 30 realizări, 750 puncte
 Final grind → Deblocarea a 35 realizări, 1000 puncte
 I want it all. And I got it. → Deblocarea tuturor realizărilor disponibile, 1500 puncte
Achievement-urile deblocate sunt reprezentate de o bară de progres umplută cu albastru si

procentajul 100%, pe când cele care încă sunt în progres ori au o bară goală, în cazul în care jucătorul
nu a progresat deloc, ori o bară cu albastru direct proporțională cu progresul curent(Fig. 26)
Fig.26
34
In Figura 27 se poate observa pagina de realizari a jucătorului:
Fig. 27
6 STUDIU DE CAZ / EVALUAREA REZULTATELOR
În acest capitol voi prezenta rezultatul final obtinut, în comparație cu cerințele din Cap. 2, dar
și în raport cu aplicațiile deja existente pe piață.
Rezultatul final al acestui proiect reprezintă aplicația web într-un stadiu în care ar putea fi
lansată, conținând foarte puține probleme de implementare. Am urmărit și am obținut așadar, o
implementare minimalistă pentru o platformă de șah online, care are o interfață prietenoasă cu
utilizatorul și functionalități de bază care pot menține utilizatorul captivat. Acesta are la maxim 3
clicku-ri distanță orice facilitate a platformei. În cele ce urmează voi alcătui o listă a problemelor
cunoscute pe care platforma incă le are, dar care vor primi o rezolvare în viitorul apropiat, înainte de
implementarea altor facilități:
 Rândul jucătorului trece și în cazul în care o piesă este mutată pe poziția pe care se află deja
 În cazul unei reîncărcări a paginii în timpul jocului, comportamentul jocului de șah este
nedeterminat, uneori continuând normal, alteori tabla fiind resetată la pozițiile inițiale
35
 În cazul în care un jucător iese de pe pagina de șah în timpul partidei, aceasta nu se termină
până când timpul nu expiră
Comparativ cu platformele de șah deja existente, această platformă oferă facilitățile de bază
pe care un utilizator și le poate dori. Ea câștigă prin faptul că are o interfață primitoare și care nu este
supraîncărcată de informații, având totul sintetizat pe 5 pagini(Home, Play, Leaderboards,
Achievements, Profile).
De asemenea, sistemul de găsire si plasare a jucătorilor este realizat în strânsă legatură cu

standardele FIDE(Federația Internațională de Șah), găsind jucatorii de cea mai apropiată valoare. Mai
mult de atât, utilizatorul va rămâne captivat de către platforma, deoarece își poate urmări progresul
cu ajutorul realizărilor deblocate, dar și a diviziilor în care are posibilitatea de a accede.
7 CONCLUZII
În cele din urmă, voi descrie câteva dintre dificultățile întâlnite, dar și oportunitățile pe care
le poate atinge aplicația în viitor.
Realizarea acestui proiect a reprezentat un parcurs în care am învățat foarte multe, în special
din provocările pe care am reușit să le depășesc. De la adaptarea la framework-ul Django, până la
sincronizarea turelor de șah, de la transmiterea datelor între front-end și back-end până la gândirea
modelelor bazei de date astfel încât accesul la informație să fie cât mai facil.
Cea mai mare provocare a reprezentat-o implementarea turelor, deoarece redirecționarea la

diferite rute a devenit dificil de depanat la un moment dat. Odată ce am învățat să implementez
acest mecanism de polling, realizarea modului spectator a fost mult mai simplă.
7.1 Implementări ulterioare / Oportunități de marketing
Cu toate că aplicația realizata este una funcțională, și gata de lansarea pe piață, întotdeauna
există loc de îmbunătățiri. În cele ce urmează voi prezenta câteva dintre ideile care ar putea schimba
radical produsul și atrage mai mulți utilizatori:
36
 Antrenor virtual (A.I.) → Oportunitatea de a juca împotriva calculatorului pentru a te antrena

înainte de a juca împotriva unor jucători reali le-ar oferi utilizatorilor un bonus de încredere
în abilitățile lor
 Analiza partidei → Acest mod presupune vizualizarea unui istoric al meciurilor, dar și al
mutărilor și cu câtă acuratețe au fost acestea executate în raport cu „mutările ideale” într-o
anumită situație
 Moduri noi de joc → Blitz/Șah pe echipa
 Regulament și mod pentru incepători → În momentul de față platforma se adresează celor
care au mai avut experiențe cu jocul de șah, însă nu este tocmai cea mai prietenoasă cu cei
ce sunt începători; posibilitatea de a citi regulamentul jocului și a parcurge un scurt tutorial
ar atrage mai multe persoane aflate la început de drum
 Conturi premium si deblocarea anumitor facilități precum aspecte diferite ale pieselor de șah
sau a tablei de șah, sau chiar un fundal diferit pentru aplicație în sine → Aceste elemente ar
personaliza și mai mult interfața cu utilizatorul și ar putea captiva jucătorul și mai mult
 Adăugarea unui magazin online → Prin vânzarea diferitelor produse ce au legătura cu șahul,
precum seturi de șah, cărți cu teoria șahului sau chiar articole vestimentare, aplicația ar
putea fi monetizată, iar grupul programatorilor ce ii oferă mentenanță și o îmbunătățesc ar
putea fi mărit
37
8 BIBLIOGRAFIE
[1]Documentație Bootstrap(2021). Disponibilă la: https://getbootstrap.com/docs/4.1
[2]Documentație Django Project. (2021). Preluat de pe http://djangoproject.com
[3]Request-uri web și mecanism de polling. Disponibile la: https://developer.mozilla.org/en-

US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest
[4]Regulament șah FIDE. (2021). Disponibil la: https://handbook.fide.com/
[5]Elo, A. (1978). The rating of chess players past and present. PDF disponibil la:
https://www.gwern.net/docs/statistics/comparison/1978-elo-
theratingofchessplayerspastandpresent.pdf
38

Proiect de Diplomă

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Proiect de Diplomă

Încărcat de

Drepturi de autor:

Formate disponibile

Aplicație Web pentru jocul de șah

UNIVERSITATEA POLITEHNICĂ BUCUREȘTI

5.2.2 Căutarea jucătorilor și plasarea lor în joc ........................................... 26

5.2.3 Jocul de șah și sincronizarea cu Front-End ......................................... 26

5.2.4 Modul spectator ................................................................................. 29

5.2.5 Rating și divizii .................................................................................... 30

5.2.6 Clasamente ......................................................................................... 31

5.2.7 Realizări .............................................................................................. 33

6 Studiu de caz / evaluarea rezultatelor .............................................................................. 35

Soluția oferită dorește să vină cu îmbunătățiri pentru experiența utilizatorului cu o astfel de

1.4 Structura lucrării

Analiza și specificarea cerințelor este capitolul în care se delimitează funcționalitățile care

In cele ce urmează, studiul de piață reprezintă un o analiză atât personală a produselor de

În capitolul ce il precede urmează să detaliez implementarea oferită, descriind clar toate

2 ANALIZA ȘI SPECIFICAREA CERINȚELOR

Pentru a determina cât mai exact nevoile consumatorului, am alcătuit un chestionar

 „Ați jucat vreodată șah?” (răspuns da/nu)

De asemenea, mulți au ales și caracteristici precum un top (Leaderboard) cu diferite sortări,

3 STUDIU DE PIAȚĂ / ABORDĂRI EXISTENTE

În sondajul realizat la capitolul anterior, la întrebarea numărul patru, 55 din 100 de

Aceste platforme au cel mai mare număr de utilizatori și înglobează numeroase

 Joc împotriva unui jucator

 Joc în modul turneu

În urma analizării acestor rezultate, am ajuns la concluzia că următoarele funcționalități sunt

 Mecanism de acordare a anumitor realizări pentru progres

4.1 Mediul de dezvoltare

În dezvoltarea aplicației web, pe partea de back-end am lucrat în mediul Linux, deoarece

Am folosit BitBucket ca sistem de control al versiunii, deoarece am dorit să am un mediu

Pentru GIT, am folosit urmatoarele standarde de denumire a ramurilor, vizibile și în Fig. 6:

De exemplu, dacă urma să introduc o funcționalitate în modulul „Leaderboards” al aplicației,

Pentru partea de front-end am lucrat cu JavaScript, HTML si CSS, dar și framework-ul

4.2 Framework-ul Bootstrap 4.0

Acest Framework pentru partea de front-end a aplicației facilitează organizarea în pagină a

4.3 Framework-ul Django

 Se parcurge fișierul urls.py pentru găsirea path-ului corespunzător în urlpatterns

4.4 Modele de date și relaționarea lor

Aplicația definește 6 modele de date, care generează tabelele aferente lor:

Modelul Game_Invitation funcționează asemănător cu Friend_Request, descriind acțiunea de

Se poate observa in Fig. 9 că modelul Profile dispune de următoarele câmpuri, ce au

 id : Primary Key → cheie primară predefinită a modelului

 rank : PositiveIntegerField → atribut ce indică poziționarea jucătorului în clasamentul global;

 id : PrimaryKey → cheie primară predefinită a modelului

 latency2 → asemănător latency1, dar pentru player2

În figura precedentă(Fig. 11) se observă modelul Achievement, care conține următoarele

 id : PrimaryKey → cheie primară predefinită a modelului

În Fig. 12 se regăsește modelul Unlock_Achievement necesar modelării relației N:N dintre

 id : PrimaryKey → cheie primară predefinită a modelului

Celelalte două tabele cu date temporare, Friend_Request si Game_Invitation au următoarea

Bara de navigație conține butoane către următoarele pagini:

Pentru a evita duplicarea codului în realizarea paginilor HTML, am folosit metoda de

 Users -> aplicație care se ocupă de funcționalitățile de logare și resetare a parolei,

În această secțiune voi descrie tot ce ține de partea de back-end a aplicației, de la

5.2.1 Creare cont și configurare profil

Primul mecanism al back-end-ului cu care interacționează utilizatorul este sistemul de

Pagina de profil arată ca în Figura 16:

Ne dorim ca ștergerea contului să nu creeze probleme în funcționarea aplicației sau să lase

5.2.2 Căutarea jucătorilor și plasarea lor în joc

Pe această pagină de așteptare are loc un polling (developer.mozilla.org)[3] către server, în

De asemenea, la fiecare apăsare a butonului de „Play” se verifică dacă în lista cu request-uri

5.2.3 Jocul de șah și sincronizarea cu Front-End

 Dacă se află in șah mat

Pentru a codifica starea jocului, am utilizat următorul standard:

Piesa Denumire in engleza Codificare