TicTacToe

Projektet gick ut på att utveckla ett multiplayerspel i form av ett TicTacToe-system där två användare kan spela mot varandra i realtid. Systemet är byggt med ASP.NET Core MVC som ramverk och använder Entity Framework Core för databashantering. Gränssnittet är uppbyggt med Razor Views och JavaScript(AJAX), vilket möjliggör interaktivt spel och dynamiska uppdateringar utan att hela sidan behöver laddas om.

ER-Schema

ER-schemat har använts under utvecklingen för att strukturera systemet och se relationerna mellan användare, spelare, inbjudningar och drag.

Spelomgången bygger på att varje drag sparas i databasen och används för att återskapa det aktuella spelbrädet. Vid varje drag kontrolleras att rätt spelare gör sitt drag och att rutan är ledig, varefter systemet kontrollerar om spelet är vunnet eller oavgjort. AJAX används för att uppdatera spelbrädet automatiskt så att båda spelarna kan se nya drag i realtid.

När en spelare gör ett drag kontrolleras först att spelet är aktivt, att det är spelarens tur och att den valda rutan inte redan är upptagen. Därefter skapas ett nytt Move-objekt som sparas i databasen. Efter draget kontrolleras om spelaren har vunnit eller om alla nio rutor är fyllda.

Flödesdiagram

Interaktionsflöde

Exempel 1: Registrera och logga in

Databassystemet består av fyra tabeller: Users, Game, Move och Invitations. Tabellen Users lagrar användarinformation och säkerhetsrelaterade uppgifter för lösenord. Övriga tabeller hanterar spel, spelarnas drag samt spelinbjudningar.

Inloggning & registrering

Systemet hanterar användarnas registrering, inloggning och kontohantering genom ASP.NET Core MVC. Vid registrering hashas användarens lösenord med ett unikt salt innan informationen sparas i databasen, och vid inloggning verifieras lösenordet mot den lagrade hashen. När användaren är inloggad används en session för att hålla reda på användarens identitet och ge tillgång till spelets funktioner. Användaren kan även redigera sina uppgifter, byta lösenord, radera sitt konto eller logga ut, där ändringar och borttagning uppdateras i databasen.

För att inte lagra användarnas lösenord i klartext implementerade jag lösenordshashning med ett unikt salt. Vid registrering skapas en hash av lösenordet och både hashen och saltet sparas i databasen. Vid inloggning kan lösenordet sedan verifieras genom att skapa en ny hash med samma salt och jämföra resultatet med den lagrade hashen.

När en användare väljer att radera sitt konto tas inte bara användaren bort, utan även relaterade spel, spelarnas drag och inbjudningar. Först hämtas användarens spel och deras tillhörande drag, därefter tas inbjudningar kopplade till användaren bort. Slutligen raderas spelet och användaren från databasen och sessionen rensas.

Spelinbjudningsfunktionen gör det möjligt för användare att bjuda in varandra till en ny spelomgång. När en inbjudan skickas skapas en ny post i databasen med status Pending, och mottagaren kan se inbjudan direkt på startsidan. För att uppdatera listan med inbjudningar utan att användaren behöver ladda om sidan används AJAX, som hämtar nya inbjudningar automatiskt med jämna mellanrum. När en inbjudan accepteras skapas ett nytt spel i databasen, medan en avböjd inbjudan uppdateras med status Declined och tas bort från listan

För att mottagaren skulle kunna se nya spelinbjudningar utan att behöva ladda om sidan implementerade jag en AJAX-funktion som regelbundet hämtar aktuella inbjudningar från servern. Funktionen anropar en endpoint som returnerar inbjudningarna som JSON och uppdaterar listan på sidan dynamiskt.