Silverlight Game Framework

Eötvös Loránd Tudományegyetem Informatikai Kar Silverlight Game Framework Nagyprogram dokumentáció Témavezető: Dr. Lőrincz András Beadta: Sebők Judit SEJIAAT.ELTE Programtervező matematikus szak Kezdés éve: 2002 Budapest, 2012. január

Tartalomjegyzék 1. Bevezető 3 1.1. A programról röviden........................... 3 1.2. A program telepítése........................... 4 2. Felhasználói dokumentáció 5 2.1. A program működéséről......................... 5 2.2. Játékosoknak............................... 5 2.2.1. Játékok megjelenése....................... 6 2.3. Adminisztrátoroknak........................... 8 2.3.1. Regisztráció............................ 10 2.3.2. Kép feltöltése........................... 11 2.3.3. Hangfájl feltöltése......................... 11 2.3.4. Játékok.............................. 12 2.3.5. Szerkesztés............................ 12 2.3.6. Validálás.............................. 16 2.3.7. Játéksorrend............................ 16 2.3.8. Játékok hangjai.......................... 17 2.3.9. Kilépés............................... 17 3. Fejlesztési dokumentáció 19 3.1. Feladatleírás................................ 19 3.2. A megoldás során felhasznált technikák................. 20 3.3. A rendszer szerkezete........................... 21 3.3.1. SQL adatbázis.......................... 21 Games adattábla......................... 21 EggGame adattábla........................ 21 OrderGame adattábla...................... 23 PlacerGame adattábla...................... 23 GroupGame adattábla...................... 25 Media adattábla......................... 28 MediaMp3 adattábla....................... 29

TARTALOMJEGYZÉK Users adattábla.......................... 29 LogsStats adattábla........................ 29 3.3.2. Silverlight alkalmazás....................... 30 Az sl projekt........................... 30 A login projekt.......................... 31 A mainpage projekt....................... 33 A mainmodel projekt....................... 38 A usermanagement projekt................... 39 A gameframeproject projekt.................. 42 A eggmodelproject projekt.................... 47 A ordermodelproject projekt................... 47 A placermodelproject projekt.................. 47 A groupmodelproject projekt.................. 47 3.3.3. ASP.NET oldal.......................... 47 3.4. A rendszer telepítése........................... 47 4. Összegzés 51 4.1. Tesztelés.................................. 51 4.2. Ismert bugok............................... 51 2

1. fejezet Bevezető 1.1. A programról röviden A cél egy olyan alkalmazás létrehozása aminek segítségével iskolás gyerekek feladatmegoldó képességeit lehet elemezni. A rendszer egyrészt képes a különböző játékokat megjeleníteni, az adott válaszokat értékelni, és a játék közben gyűjtött adatokat egy adatbázisban eltárolni. Másrészt az oktatóknak megadja a lehetőséget az egyes típusokhoz tartozó új játékok létrehozására, az ehhez szükséges médiaelemek feltöltésére, illetve új játékosok regisztrációjára. A rendszerben a következő játéktípusok találhatóak meg: kakukktojás játék: A játék célja több megjelenő kép közül kiválasztani a feladat helyes megoldását. Lásd: 2.3 ábra. sorrend játék: A játék célja hogy a játékos a megjelenő képeket a helyes sorrenbe rendezze. Lásd: 2.4 ábra. elhelyezős játék: A játék hasonló a kakukktojás játékhoz, a különbség az hogy itt a feladat leírásához egy kép is tartozik, az ezen a képen látható alakzatokhoz tartozó képet kell kiválasztania a játékosnak. Lásd: 2.5 ábra. csoportosítós játék: A játék célja a megjelenő képek csoportosítása több kategóriába a képen látható tárgyak valamely tulajdonsága alapján. A konkrét játékoknál a kategóriák eldöntése lehet a játékos feladata, de lehetőség van előre definiált kategóriák megadására is. Lásd: 2.6 ábra. A program használatához belépési azonosítóra van szükség. Az adminisztrátori jogokkal rendelkező felhasználók regisztrálhatnak új felhasználókat. Az alkalmazás indításához mindössze egy böngésző fog kelleni. Az alkalmazás első verizójának kipróbálása során felmerültek működési problémák illetve funkcionális hiányosságok (pl. szerkesztők nehéz kezelhetősége, vizuális

1.2. A PROGRAM TELEPÍTÉSE elemek megjelenése nem igazodik a különböző képernyőfelbontásokhoz). A jelen dokumentum és az elkészült alkalmazás kiindulási pontja a korábbi alkalmazás volt. Az eredeti struktúrából a projektek tagolása és az adatbázis tábláinak egyes részei megmaradtak, de az osztályszerkezet, a megjelenés hátterében meghúzódó kód és az adatbázis elérésére használt interfészek leírása jelentősen megváltozott. A felhasználói felület ezzel szemben csak indokolt esetben változott, ezzel is segítve a felhasználók átállását az új verzióra. 1.2. A program telepítése A program egy kliens-szerver alkalmazás. A szerver oldali telepítésre vonatkozó információkat a Fejlesztői dokumentáció 3.4 bekezdése tartalmazza, mivel a helyes működés beállítása többfajta erőforrás összehangolását igényli, amely a kód egyes részeit is érinti. A program kliens oldali használatához mindössze internet kapcsolatra és egy böngészőre van szükségünk amelyhez telepítve van a Silverlight plugin. 4

2. fejezet Felhasználói dokumentáció 2.1. A program működéséről Mint az az előző fejezetben említésre került, a felhasználókat két típusba soroljuk: játékos és adminisztrátor. A játékosok kizárólag a feladatokat látják, azokat is szekvenciálisan egymás után, visszalépni nem tudnak, előre lépni csak helyes válasz van lehetőségük. Ezzel szemben az adminisztrátorok belépéskor a főmenüt látják, ezt felhasználva lehetőségük van a szerkesztőket és a játékokat elérni. Az alkalmazás felépítésének és működésének leírását két külön alfejezetben tárgyaljuk. 2.2. A program használatáról játékosoknak Az alkalmazás elindításához szükségünk lesz a rendszer szerver oldalon telepített részének az elérési címére. Ezt egy böngészőbe beírva a bejelentkező képernyő jelenik meg (lásd: 2.1 ábra). Továbblépéshez meg kell adnunk a felhasználónevet és a jelszót. Ezeket az adminisztrátor jogokkal rendelkező felhasználók regisztrálhatják. Helytelen felhasználónév vagy jelszó esetén egy hibaüzenet jelenik meg, majd az oldal újra betölt. Sikeres belépés után a játékot elindító nyomógomb jelenik meg (lásd: 2.2 ábra), e mellett egy üdvözlő üzenetet tartalmazó hangfájl is lejátszásra kerül. A játék elindítása után sorban jelennek meg a feladatok, a játékos addig nem tud továbblépni amíg helyes választ nem adott meg. Minden alkalommal limitált számú feladatot kap, ez a program jelenlegi verziójában húsz darab játék. A játék végén lejátszódik egy gratulációt tartalmazó hangfájl és üres lap jelzi hogy ki lehet lépni a böngészőből.

2.2. JÁTÉKOSOKNAK 2.1. ábra. Bejelentkező képernyő 2.2. ábra. Játékot indító gomb 2.3. ábra. Példa kakukktojás játékra 2.2.1. A különböző játékok megjelenése A megjelenő feladatok minden típus esetén tartalmaznak egy fejlécet, amely tartalmazza a feladat sorszámát, a feladat szövegét, illetve két nyomógombot. A játékosok számára elérhető játékok sorba vannak rendezve az adatbázisban, a sorszám az ebben a listában elfoglalt indexüket jeleníti meg. A két nyomógomb verbális segítséget nyújt a feladatról, az első gomb (hangszóró) a feladat szövegét olvassa fel, míg a második (bagoly) a feladat típusára vonatkozó segítséget nyújt. A különböző típusú játékok működése: kakukktojás játék: A játék célja több megjelenő kép közül kiválasztani a feladat helyes megoldását. A játék rögtön véget ér amint a játékos rákattint egy képre. Példa kakukktojás játékra: 2.3 ábra. sorrend játék: A játék célja hogy a játékos a megjelenő képeket a helyes sorrenbe rendezze. A képeket mozgatni nyomógombokkal lehet. Először ki kell jelölni a mozgatni kívánt képet azzal hogy rákattintunk, majd a képek alatt elhelyezett nyilak segítségével a megfelelő irányba mozgathatjuk a kiválasztott elemet. A kijelölést meg lehet szüntetni a kijelölt képre való ismételt kattintással. A feladat megoldása után az értékelést a zöld pipát ábrázoló gombbal lehet 6

2.2. JÁTÉKOSOKNAK 2.4. ábra. Példa sorrend játékra 2.5. ábra. Példa elhelyezős játékra megkezdeni. Lásd: 2.4 ábra. elhelyezős játék: A játék hasonló a kakukktojás játékhoz, a különbség az hogy itt a feladat leírásához egy kép is tartozik, az ezen a képen látható alakzatokhoz tartozó képet kell kiválasztania a játékosnak. A játék rögtön véget ér amint a játékos rákattint egy képre. Lásd: 2.5 ábra. csoportosítós játék: A játék célja a megjelenő képek csoportosítása több kategóriába a képen látható tárgyak valamely tulajdonsága alapján. A feladatok képei a fejléc alatt jelennek meg egy vagy két sorban attól függően hány darab van belőle. A képek alatt láthatóak a különböző csoportok helyei. Minden csoporthoz tartozik két gomb aminek segítségével a kijelölt 7

2.3. ADMINISZTRÁTOROKNAK 2.6. ábra. Példa halmazos játékra képek betehetők vagy kivehetők a csoportból. A feladat megoldása után az értékelést a zöld pipát ábrázoló gombbal lehet megkezdeni. Amennyiben a játékos hagyott képeket a kiindulási helyen, azokat a megoldás értékelésénél egy csoportba tartozónak tekinti a program. A feladat leírása mellett egy kép is tartozhat a játékhoz (lásd: 2.7 ábra). Az egyes csoportokhoz meg lehet adni kategória-képeket is amelyek megszorítást jelentenek arra nézve mely tárgyaknak hol a helye (lásd: 2.8 ábra). Lásd: 2.6 ábra. A játékok kiértékelését elvégezve a program mind vizuálisan mind verbálisan visszajelez az eredményről. Helyes válasz esetén (lásd: 2.9 ábra) a játékos a megjelenő gomb lenyomásával léphet a következő feladatra. Hibás válasz esetén (lásd: 2.10 ábra) ugyanez a feladat jelenik meg újra. 2.3. A program használatáról adminisztrátoroknak Sikeres bejelentkezést (lásd: 2.1 ábra) követően az adminisztrátoroknak a főmenü jelenik meg (lásd: 2.11 ábra), melyen keresztül elérik a karbantartó és szerkesztő felületeit az alkalmazásnak. A továbbiakban ezek a felületek és használatuk kerül tárgyalásra. 8

2.3. ADMINISZTRÁTOROKNAK 2.7. ábra. Példa halmazos játékra segéd-képpel 2.8. ábra. Példa halmazos játékra kategória-képekkel 2.9. ábra. Helyes válasz esetén látható kép 2.10. ábra. Hibás válasz esetén látható kép 9

2.3. ADMINISZTRÁTOROKNAK 2.11. ábra. A főmenü 2.3.1. Regisztráció - Új játékos felvétele A Regisztráció gomb lenyomásának hatására megjelenik az az űrlap amelyet kitöltve új felhasználó adatait menthetjük el az adatbázisban. (lásd: 2.12 ábra) A mezők tartalma kitöltés közben ellenőrzésre kerül, hiba esetén oldalt a Követelmények címszó alatt megjelenik a probléma oka és a mező színe pirosra vált amíg a hiba javításra nem kerül. A következő követelményeknek kell megfelelni: A névnek és a felhasználónévnek legalább 5 karakter hosszú kell hogy legyen. Kötelező megadni a nevet és a felhasználónevet. Jelszót kötelező megadni, legalább 6 karakterből kell hogy álljon és a biztonság kedvéért kétszer kell begépelni. Választani kell egyet a felhasználó lehetséges típusai közül. Jelenleg a program három típust enged meg: adminisztrátor, kísérletvezető és játékos. Jelenleg az adminisztrátor és a kísérletvezető azonos hozzáférési jogokkal rendelkezik az alkalmazás funkcióinak tekintetében, a különválasztást az indokolta, hogy a későbbiekben a keretrendszer bővülthet olyan funkciókkal melyekhez csupán az adminisztrátorok kapnak hozzáférést. Helyes kitöltés után a regisztrál gombra kattintva menthetjük a játékos adatait az adatbázisban. Amennyiben az adatbázis-szerver nem elérhető, a program jelzi a mentés sikertelenségét. 10

2.3. ADMINISZTRÁTOROKNAK 2.12. ábra. Új felhasználó hozzáadására létrehozott űrlap 2.3.2. Kép feltöltése - Képek feltöltése az adatbázisba A Kép feltöltése gomb lenyomásának hatására megjelenik az az űrlap amelynek segítségével képeket tölthetünk fel a szerverre (lásd: 2.13 ábra). A játékok szerkesztése csupán a már feltöltött képek használatával lehetséges. A feltöltő képernyőn a Tallózás... gombra kattintva kiválaszthatjuk a feltölteni kívánt képeket. A képek sorban megjelennek egymás alatt egy listában. Minden listaelem tartalmazza a képet, annak nevét, illetve két beviteli mezőt. A felső beviteli mezőben megadhatunk a képhez tartozó kulcsszavakat, ezek alapján lehet a szerkesztőben keresni a képek között. Az alsó beviteli mező megjegyzések hozzáfűzésére szolgál. A listaelemek fölé állva oldalt megjelenik egy előnézet a képről. A Elem törlése gombbal a kijelölt listaelemet törölhetjük, míg a Lista ürítése gombbal a teljes lista törölhető. A Feltöltés gomb hatására a képek feltöltése megkezdődik, majd a befejezés után a program üzenetben jelzi ha a feltöltés sikerült, illetve hiba esetén a kiírja ha egy kép feltöltése sikertelen volt. A biztonsági okokból és a szerver oldali rész megszorításai miatt a maximális fájlméret 4MB, ennél nagyobb fájlokat nem enged feltölteni az alkalmazás. A feltöltendő képeknek a Silverlight által értelmezhető típusúaknak kell lenniüek, ezért csak JPEG és PNG képek feltöltésére van lehetőség. 2.3.3. Hangfájl feltöltése - Hangfájlok feltöltése az adatbázisba A Hangfájl feltöltése gomb lenyomásának hatására megjelenik az az űrlap amelynek segítségével képeket tölthetünk fel a szerverre. Az űrlap felépítése majdnem teljesen megegyezik a képek feltöltésére szolgáló űrlappal (lásd: 2.13 ábra). A betöltött 11

2.3. ADMINISZTRÁTOROKNAK 2.13. ábra. Képek feltöltésére létrehozott űrlap zenefájlok nevei megjelennek egy listában, minden fájlhoz megadhatunk egy leírást arra vonatkozóan mi hallható a fájl lejátszásakor. A maximális fájlméret a hangfájlok esetén is 4MB. 2.3.4. Játékok - Az adatbázisban szereplő játékok kipróbálása A Játékok gomb lenyomásának hatására megjelenik egy képpel ellátott nyomógombokból álló menü, amelynek segítségével kiválaszthatjuk milyen típusú játékot szeretnénk kipróbálni (lásd: 2.14ábra). A típus kiválasztása után listát kapunk az adatbázisban szereplő összes feladatról amely ebbe a típusba tartozik (lásd: 2.15ábra). A Játék indítása gombra kattintva betölt a játék. 2.3.5. Szerkesztés - Új játékok létrehozása A Szerkesztés gomb lenyomásának hatására megjelenik a játéktípus választó menü, amelynek segítségével kiválaszthatjuk milyen típusú játékot szeretnénk szerkeszteni (lásd: 2.14ábra). A játékok szerkesztése több lépésen keresztül történik, a lépések között Ok és Vissza gombokkal tudunk váltani. Minden játéktípus esetén ki kell választani bizonyos számú képet, erre a 2.16 ábrán látható menü szolgál, amely ha megjelenik a képernyőn, akkor a szerkesztő a felső részen kiírja milyen korlátok vonatkoznak a képek számára. Ez játékonként eltérő, a későbbiekben lesz róla szó melyik típusú játéknak mik a megszorításai. A menü felső részén található Szűrés tagekre mező, ezt használhatjuk képek keresésére a címkéik alapján. A szerkesztők egy másik előforduló lépésében a kiválaszott képek megjelenési 12

2.3. ADMINISZTRÁTOROKNAK 2.14. ábra. Játék típusának kiválasztására szolgáló menü 2.15. ábra. Példa a játéklista megjelenésére 13

2.3. ADMINISZTRÁTOROKNAK sorrendjének módosítására van lehetőség (lásd: 2.17 ábra). Itt a képeket kattintással kiválaszthatjuk és az elhelyezett jobbra, balra, fel és le nyilakkal átrendezhetjük őket. Miután a játékoknak megfelelő számú képet kiválasztottuk és a megjelenési sorrendet beállítottuk, meg kell adnunk a helyes megoldást. Ehhez a feladat hasonlóan jelenik meg mint játék közben, a helyes megoldás kiválasztása pedig a játék lejátszásával adható meg. Így kakukktojás és elhelyezős játék esetén rákattintunk arra a képre amit elfogadunk jó megoldásnak (kakukktojásnál több ilyen is lehet). Sorrend játék esetén a helyes sorrendbe állítjuk a képeket, a halmazos játék esetén pedig bepakoljuk a képeket a megfelelő halmazokba. A szerkesztés utolsó lépésében egy legördülő menüből ki kell választanunk a játék nehézségi szintjét és a Feladat szövege részhez be kell írni a feladatot ami a játékosnál a feladat fölött fog megjelenni. A Mentés gomb hatására a játék bekerül az adatbázisba, hiba esetén a program visszajelzést küld. A rendszerben jelenleg szereplő feladattípusokra a következő lépésekből áll az új játékok készítése: kakukktojás játék: Az első lépés a képek kiválasztása, ezekből kell legalább 2 de legfeljebb 9. Egy képet többször is beválaszthatunk, ebben az esetben több példány jelenik meg belőle, melyek azonosan viselkednek (vagy mind helyes válasz vagy egyik sem). Következő lépés a képek megjelenésének beállítása. Lehetőség van arra hogy a képek egy sorban jelenjenek meg, vagy pedig egy legfeljebb 3 soros és legfeljebb 3 oszlopos táblázatban. A harmadik lépés a helyes megoldások kiválasztása. Legalább egy jó megoldást meg kell adni, és legalább egy rossz megoldásnak is maradnia kell. Utolsó lépés a nehézségi szint és a feladat leírásának megadása. sorrend játék: Az első lépés a képek kiválasztása, ezekből kell legalább 3 de legfeljebb 10. Egy képet többször is beválaszthatunk, ebben az esetben több példány jelenik meg belőle. Következő lépés a képek megjelenési sorrendjének beállítása. A harmadik lépés a helyes megoldási sorrend megadása. Utolsó lépés a nehézségi szint és a feladat leírásának megadása. elhelyezős játék: Az első lépés a képek kiválasztása, ezekből kell legalább 2 de legfeljebb 8. Egy képet csak egyszer választhatunk, nem lehetnek köztük azonosak. Következő lépés a feladathoz tartozó segéd-kép kiválasztása, ezután jön a képek megjelenésének beállítása. A negyedik lépés a helyes megoldás kiválasztása, ennél a játéktípusnál ebből csak egy lehet. Utolsó lépés a nehézségi szint és a feladat leírásának megadása. csoportosítós játék: Az első lépés a képek kiválasztása, ezekből kell legalább 3 de legfeljebb 20. Egy képet csak egyszer választhatunk, nem lehetnek köztük 14

2.3. ADMINISZTRÁTOROKNAK 2.16. ábra. A játékszerkesztő rész kép-kiválasztó menüje azonosak. Következő lépés a képek megjelenési sorrendjének beállítása. A harmadik lépés a helyes megoldás megadása, ez olyan módon történik hogy a kirajzolt képeket halmazokba rendezzük, ahogy azt feladatmegoldás közben a játékosok is teszik. Legalább 2 legfeljebb 4 különböző halmaz lehet, a képek kiindzlási pozíciója is külön halmaznak számít. Minden halmazba legfeljebb 5 elem kerülhet. Miután a megoldást megadtuk a játék választ vár arra a kérdésre hogy akarunk-e kategória képet megadni a halmazokhoz (lásd: festékesvödrök a 2.8 ábrán). Igenlő válasz esetén megjelenik a képkiválasztó felület, itt pontosan annyi képet kell kiválasztanunk ahány csoportot létre hoztunk az elemekből, minden kép különböző kell hogy legyen. Ezek után megjelennek a halmazok, felettük a kiválasztott képek, melyeket a jobbra és balra nyilakkal cserélgethetünk amíg a megfelelő halmaz fölé nem kerülnek. A helyes sorrend kialakítása után a játék arra a kérdésre vár választ szeretnénke megadni egy segéd-képet a feladathoz (lásd: 2.7), igenlő válasz esetén ismét a képek kiválasztására létrehozott felület jelenik meg. A következő lépésben a játék kirajzolódik abban a formában ahogyan a játékos fogja látni. Ha nem vagyunk vele elégedettek a Vissza gombbal vissza tudunk lépni hogy módosításokat hajtsunk végre. Amennyiben megfelelőnek találtuk az elrendezést, az utolsó lépésben meg kell adnunk a nehézségi szintet és a feladat leírását. 15

2.3. ADMINISZTRÁTOROKNAK 2.17. ábra. A játékszerkesztő része, a képek megjelenési sorrendjének módosítására szolgál 2.3.6. Validálás - A létrehozott játékok jóváhagyása A Validálás gomb lenyomásának hatására megjelenik egy lista azokról a játékokról amelyeket létrehoztunk a játékszerkesztővel, de még nincsenek engedélyezve. Ez a funkció azért került a programba hogy a létrehozott játékokat használatba kerülés előtt más adminisztrátorok is ellenőrizhessék. A listában szereplő feladatokat ki lehet próbálni, majd a Játék validálás gombra kattintva engedélyezni lehet. 2.3.7. Játéksorrend - A feladatok megjelenési sorrendjének megváltoztatása A Validálás gomb lenyomásának hatására megjelenik az az oldal ahol a játékosok számára a feladatokat összeválogathatjuk és a megfelelő sorrendet beállíthatjuk (lásd 2.18 ábra). Az első oszlopban a feladatok láthatóak, a második oszlopban a többi játék szerepel, a megfelelő listaelem kiválasztásával és a balra illetve jobbra nyilakat ábrázoló gombokkal tudjuk a játékokat a listák között mozgatni. Az első oszlop elemeit kijelölve a fel illetve le nyilakkal tudjuk a játékok sorrendjét megváltoztatni. Az itt beállított sorrendben fognak a feladatok megjelenni a játékosok számára. Mindkét lista játékainak kipróbálására lehetőség van a listák alján található Játék indítása gombok segítségével. 16

2.3. ADMINISZTRÁTOROKNAK 2.18. ábra. A játékosok feladatainak összeállítására és sorbarendezésére szolgáló menü 2.3.8. Játékok hangjai - A játékok hangjainak módosítása A Szerkesztés gomb lenyomásának hatására megjelenik a játéktípus választó menü, amelynek segítségével kiválaszthatjuk milyen típusú játékot szeretnénk szerkeszteni (lásd: 2.14ábra). A típus kiválasztása után listát kapunk az adatbázisban szereplő összes feladatról amely ebbe a típusba tartozik. A lista tetszőleges elemét kiválasztva és a Játék hangjainak módosítása gombra kattintva bejön a játékhoz rendelt hangfájlok módosítására használható menü (lásd: 2.19 ábra). A képernyőn szereplő listából választhatunk hangfájlt, a képernyő felső részén találhatő Szűrés segítségével kereshetünk a hangfájlokhoz rendelt leírásokban. A kiválasztott fájlt kijelölés után a Hang a feladathoz és a Hang a segítséghez gombokkal rendelhetjük hozzá a játékhoz. A lista bal oldalán szerepelnek a kiválasztott fájlok azonosítói és zárójelben a neveik, az alattuk lévő lejátszás-gomb segítségével meg is hallgathatóak. A listában kijelölt hangfájl is meghallgatható a lista fölött található lejátszás-gombbal. Amennyiben elégedettek vagyunk a kiválasztott hangokkal a Mentés gombra kattintva az adatbázisban eltárolhatjuk a játék új beállításait. 2.3.9. Kilépés - Kilépés a programból A kilépés gomb hatására megjelenik egy ablak amelyben megerősíthetjük kilépési szándékunkat. A kilépést követően az oldal újra betöltődik és megjelenik a bejelentkező képernyő (lásd: 2.1 ábra). 17

2.3. ADMINISZTRÁTOROKNAK 2.19. ábra. A játékosok hangjainak módosítására szolgáló menü 18

3. fejezet Fejlesztési dokumentáció 3.1. Feladatleírás A feladat egy keretrendszer létrehozása volt amely különböző típusú játékos feladatok megjelenítésére képes. A játékokat a megfelelő adatbázisból be tudja tölteni, meg tudja jeleníteni, a felhasználó válaszait ki tudja értékelni, visszajelzést tud küldeni az eredményről, illetve azt az adatbázisban el tudja menteni. A rendszernek tartalmaznia kell egy-egy szerkesztőt minden egyes játéktípushoz, az ehhez szükséges médiaelemek (képke, hangfájlok) feltöltésére alkalmas űrlapokkal együtt. Ezek mellett legyen lehetőség a játékokat sorba rendezni és ebben a sorrendben végigjátszani, a sorrend legyen módosítható. Egy adott játékból a játékos addig nem léphet tovább amíg helyes választ nem adott. A keretrendszer mellett a program a következő játék-típusokat is tartalmazza: kakukktojás játék: A játék célja több megjelenő kép közül kiválasztani a feladat helyes megoldását, több megoldás is lehet jó, játékonként csupán egy megoldás megjelölése szükséges. sorrend játék: A játék célja hogy a játékos a megjelenő képeket a helyes sorrenbe rendezze. elhelyezős játék: A játék funkcióját tekintve megegyezik a kakukktojás játékkal, de itt csupán egy helyes megoldás lehetséges. csoportosítós játék: A játék célja a megjelenő képek csoportosítása a képen látható tárgyak valamely tulajdonsága alapján, a képernyőn megjelenő halmaz-helyek egymással felcserélhetők azaz a megoldás szempontjából nem érdekes hanyadik halmazban vannak egy adott csoport elemei ha jó vannak csoportosítva. Ez alól kivételt jelent az az eset amikor a halmazok meg vannak jelölve, ekkor ugyanis előre adott melyik csoportnak melyik halmazhelyre kell kerülnie. A rendszer részét képezi egy SQL adatbázis is amiben

3.2. A MEGOLDÁS SORÁN FELHASZNÁLT TECHNIKÁK a játékok és a felhasználók adatai kerülnek tárolásra, továbbá a játékosok feladatmegoldásainak statisztikái. Az alkalmazás felhasználóit három típusba soroljuk: játékos, kísérletvezető és adminisztrátor. Jelenleg az utóbbi kettő ugyanazokkal a jogokkal rendelkezik, de ez a program későbbi verzióiban változhat. A játékosoknak minden belépés után adott számú feladatot kell megoldaniuk. A feladatok sorrendjének meghatározása és a játékosok regisztrációja a programon keresztül történik, ez az adminisztrátorok és kísérletvezetők tehetik meg. Az elkészült játékok nem kerülhetnek be a feladatok közé amíg azokat nem validálta egy adminisztrátor, erre is legyen lehetőség a rendszer keretein belül. 3.2. A megoldás során felhasznált technikák Az alkalmazás egy Silverlight program egy ASP.NET oldalba ágyazva, amelyek a VisualStudio 2010 fejlesztőeszközzel készültek. A rendszer felépítése a következő technikák felhasználásával történt: Az alkalmazás túlnyomó részét a Silverlight C# nyelven implementált projektek teszik ki, ezen belül a UserControl osztályból származtatott felületek dominálnak. A választást a Silverlight azon sajátossága indokolta, hogy a projektekben a funkció és a megjelenés egymástól szét van választva, ezáltal a kettő közül bármelyik cserélhető a nélkül hogy a másikat megváltoztatnánk. A későbbiek során az létrehozott UserControl-ok részletes leírása során megadjuk azokat a vizuális elemeket amiket a kód feltételez hogy jelen vannak. A vizualizáció megváltoztatása esetén csupán annyira kell odafigyelni hogy ezek az elemek jelen legyenek. A Silverlight alkalmazást a szerveren egy ASP.NET oldal hosztolja. Ez a projekt tartalmazza azokat a WCF Service-eket amelyek az SQL adatbázissal való kapcsolatért felelősek, illetve a fájlok feltöltését végző modult. A projekthez mellékelve van egy clientaccesspolicy.xml fájl is, ami azért szükséges hogy az IIS szerveren elhelyezett WCF Service-eket az alkalmazás el tudja érni. Mind az alkalmazás, mind a WCF Service-ek egy IIS szerverre kerülnek fel. Az alkalmazáshoz tartozó adatbázisok két típusba tartoznak. Egyik részük SQL adattáblákból áll, melyek a Microsoft SQL Server 2005 Express Edition eszközzel készültek. Az adatbázis másik részét a média fájlok teszik ki, melyeket egy IIS szerveren tárolunk, elérésük a C# UriBuilder osztályának segítségével történik. 20

3.3. A RENDSZER SZERKEZETE 3.1. ábra. A Games adattábla szerkezetét bemutató táblázat 3.3. A rendszer szerkezete A rendszer felépítése során a következőket kellett elkészíteni: SQL adatbázis Silverlight alkalmazás ASP.NET oldal amely a Silverlight alkalmazást hosztolja 3.3.1. SQL adatbázis Az SQL adatbázis a Microsoft SQL Server 2005 Express Edition eszközzel készült el. A következő táblák szerepelnek az adatbázisunkban: Games - SQL adattábla Ebben az adattáblában tároljuk azoknak a játékoknak az adatait amelyeket a játékosok megkapnak feladatmegoldás közben. A tábla struktúráját a 3.1 ábrán láthatjuk. Az ID az egyedi kulcs, a GameType a játék típusát tárolja (kakukktojás: 0, sorrend: 1, elhelyezős: 2, halmazos: 3), a GameID a játék azonosítója a típusához tartozó adattáblában, a GameNumber pedig a játék indexe a feladatok megoldási sorrendjében. EggGame - SQL adattábla Ebben az adattáblában tároljuk a kakukktojás játékok adatait. A tábla struktúráját a 3.2 ábrán láthatjuk. Az ID az egyedi kulcs, a Difficulty a nehézségi szint amit a szerkesztőben megadtunk, a Question mezőnek a program egy korábbi verziójában volt szerepe, az oszlop nem került törlésre, de az értékeit nem használjuk. A Creator a játékok létrehozó felhasználó Users tábla (lásd: 3.3.1) beli egyedi azonosítóját 21

3.3. A RENDSZER SZERKEZETE 3.2. ábra. Az EggGame adattábla szerkezetét bemutató táblázat 22

3.3. A RENDSZER SZERKEZETE tartalmazza, a Description mező pedig a feladat leírását amelyet a játékosok látnak a feladat megoldása során. A Media1-9 elemek tartalmazzák a játékhoz felhasznált képek Media tábla (lásd: 3.3.1) beli azonosítóit, méghozzá a játék kezdésekor megjelenítendő sorrendben. A táblázatban az is látszik hogy legalább két kép megadása kötelező, az első két elem nem lehet üres. Az Answer1-8 a helyes válaszhoz tartozó képek azonosítóit tartalmazza. A Number mezőnek szintén nincs már jelentősége a program jelenlegi verziójában. Az IsOneRow mező értéke alapján történik a feladat kirajzolása egy vagy több sorban. Igaz érték esetén a képek mind egy sorban helyezkednek el. A Valid mező értéke igaz, ha a játék jóváhagyása megtörtént, egyébként hamis. A TextMps és HelpMp3 mezők a játékhoz társított hangfájlok MediaMp3 tábla (lásd: 3.3.1) beli azonosítóit tartalmazzák. OrderGame - SQL adattábla Ebben az adattáblában tároljuk a sorrend játékok adatait. A tábla struktúráját a 3.3 ábrán láthatjuk. Az ID az egyedi kulcs, a Difficulty a nehézségi szint amit a szerkesztőben megadtunk, a Question mezőnek a program egy korábbi verziójában volt szerepe, az oszlop nem került törlésre, de az értékeit nem használjuk. A Creator a játékok létrehozó felhasználó Users tábla (lásd: 3.3.1) beli egyedi azonosítóját tartalmazza, a Description mező pedig a feladat leírását amelyet a játékosok látnak a feladat megoldása során. A Media1-10 elemek tartalmazzák a játékhoz felhasznált képek Media tábla (lásd: 3.3.1) beli azonosítóit, méghozzá a játék kezdésekor megjelenítendő sorrendben. Az Answer1-10 a helyes válaszhoz tartozó képek azonosítóit tartalmazza. A Random és Number mezőknek szintén nincs már jelentősége a program jelenlegi verziójában. A Valid mező értéke igaz, ha a játék jóváhagyása megtörtént, egyébként hamis. A TextMps és HelpMp3 mezők a játékhoz társított hangfájlok MediaMp3 tábla (lásd: 3.3.1) beli azonosítóit tartalmazzák. PlacerGame - SQL adattábla Ebben az adattáblában tároljuk az elhelyezős játékok adatait. A tábla struktúráját a 3.4 ábrán láthatjuk. Az ID az egyedi kulcs, a Difficulty a nehézségi szint amit a szerkesztőben megadtunk, a Question mezőnek a program egy korábbi verziójában volt szerepe, az oszlop nem került törlésre, de az értékeit nem használjuk. A Creator a játékok létrehozó felhasználó Users tábla (lásd: 3.3.1) beli egyedi azonosítóját tartalmazza, a Description mező pedig a feladat leírását amelyet a játékosok látnak a feladat megoldása során. A Media1-8 elemek tartalmazzák a játékhoz felhasznált képek Media tábla (lásd: 3.3.1) beli azonosítóit, méghozzá a játék kezdésekor megjelenítendő sorrendben. Az Item mezőben szerepel a segéd kép azonosítója. Az Answer a helyes válaszhoz tartozó kép azonosítóját tartalmazza. A Random 23

3.3. A RENDSZER SZERKEZETE 3.3. ábra. Az OrderGame adattábla szerkezetét bemutató táblázat 24

3.3. A RENDSZER SZERKEZETE 3.4. ábra. Az PlacerGame adattábla szerkezetét bemutató táblázat és Number mezőknek szintén nincs már jelentősége a program jelenlegi verziójában. A Valid mező értéke igaz, ha a játék jóváhagyása megtörtént, egyébként hamis. A TextMps és HelpMp3 mezők a játékhoz társított hangfájlok MediaMp3 tábla (lásd: 3.3.1) beli azonosítóit tartalmazzák. GroupGame - SQL adattábla Ebben az adattáblában tároljuk a halmazos játékok adatait. A tábla struktúráját a 3.5 és 3.6 ábrákon láthatjuk. Az ID az egyedi kulcs, a Difficulty a nehézségi szint amit a szerkesztőben megadtunk, a Question mezőnek a program egy korábbi verziójában volt szerepe, az oszlop nem került törlésre, de az értékeit nem használjuk. A Creator a játékok létrehozó felhasználó Users tábla (lásd: 3.3.1) beli egyedi azonosítóját tartalmazza, a Description mező pedig a feladat leírását amelyet a játékosok látnak a feladat megoldása során. A Media1-20 elemek tartalmazzák a játékhoz felhasznált képek Media tábla (lásd: 3.3.1) beli azonosítóit, méghozzá a játék kezdésekor megjelenítendő sorrendben. Az Group kezdetű mezőkben szerepelnek a megoldás egyes halmazaihoz tartozó képek azonosítói. Az Category1-4 a kategória-képek azonosítói. Az Item mezőben szerepel a segéd kép azonosítója. A Random és Number mezőknek szintén nincs már jelentősége a program jelenlegi verziójában. A Valid 25

3.3. A RENDSZER SZERKEZETE 3.5. ábra. Az GroupGame adattábla szerkezetét bemutató táblázat 1. része 26

3.3. A RENDSZER SZERKEZETE 3.6. ábra. Az GroupGame adattábla szerkezetét bemutató táblázat 2. része 27

3.3. A RENDSZER SZERKEZETE 3.7. ábra. Az Media adattábla szerkezetét bemutató táblázat 3.8. ábra. Az MediaMp3 adattábla szerkezetét bemutató táblázat mező értéke igaz, ha a játék jóváhagyása megtörtént, egyébként hamis. A TextMps és HelpMp3 mezők a játékhoz társított hangfájlok MediaMp3 (lásd: 3.3.1) tábla beli azonosítóit tartalmazzák. Media - SQL adattábla Ebben az adattáblában tároljuk a játékokhoz feltöltött képek neveit és adatait. A tábla struktúráját a 3.7 ábrán láthatjuk. Az ID az egyedi kulcs, a Type a média elem típusa, ennek a program korábbi verziójában volt jelentősége. A Dir a könyvtár neve amelyben a fájl található a média szerveren (pl: imgs), a FileName pedig a fájl neve. A Tag tartalmazza a képhez rendelt címkéket, amelyek alapján keresni tudunk köztük a szerkesztőben. A Comments mező tartalmazza a képhez írt megjegyzéseket. Az Uploader mezőben a feltöltő felhasználó azonosítója található. A Text mezőnek nincs már jelentősége a program jelenlegi verziójában. 28

3.3. A RENDSZER SZERKEZETE 3.9. ábra. Az Users adattábla szerkezetét bemutató táblázat MediaMp3 - SQL adattábla Ebben az adattáblában tároljuk a játékokhoz feltöltött hangfájlok neveit és adatait. A tábla struktúráját a 3.8 ábrán láthatjuk. Az ID az egyedi kulcs. A Dir a könyvtár neve amelyben a fájl található a média szerveren (pl: mp3s), a FileName pedig a fájl neve. Az Uploader mezőben a feltöltő felhasználó azonosítója található. A Text mező tartalmazza a képhez írt megjegyzéseket. Users - SQL adattábla Ebben az adattáblában tároljuk a játékosok és adatait. A tábla struktúráját a 3.9 ábrán láthatjuk. Az ID az egyedi kulcs. A Name mezőbe kerül a játékos neve, a Nick jelöli az azonosítóját amit belépéskor használhat, a Password mező pedig a jelszót tárolja. A Type a felhasználó típusát jelöli (adminisztrátor: 0, kísérletvezető: 1, játékos: 2). A Age a játékos életkora, a Disabilities mezőben pedig elmenthető a játékosok bármely olyan tulajdonsága ami a feladatok megoldásában akadályozza őket. A LastGame mezőben mentjük el az utoljára sikeresen megoldott feladat Games (lásd: 3.1) tábla beli indexét. LogsStats - SQL adattábla Ebben az adattáblában tároljuk a játszott játékok statisztikáit és eredményeit. A tábla struktúráját a 3.10 ábrán láthatjuk. Az ID az egyedi kulcsot, a GameType a játék típusát tárolja (kakukktojás: 0, sorrend: 1, elhelyezős: 2, halmazos: 3), a GameID a játék a UserID pedig a játékos azonosítója. A Date az adatok mentésének dátuma, a Result tárolja hogy sikeresen oldotta meg a feladatot a játékos vagy sem. A selectedans a választott megoldás, a TotalElapsedTime a játék közben eltelt idő, a MouseMovement pedig a játék során történt egérmozgás tárolására szolgál. 29

3.3. A RENDSZER SZERKEZETE 3.10. ábra. Az LogsStats adattábla szerkezetét bemutató táblázat 3.3.2. Silverlight alkalmazás Az alkalmazás három részre tagolódik: Framework Játékok Média elemek és felhasználók hozzáadása Mindhárom rész több Silverlight projektből áll. A Silverlight projektek sajátossága hogy különválasztja a megjelenést a funkcionalitástól, így a különböző projektek és azokon belül a UserControl-ok létrehozásánál nem csupán a különböző funkciók elválasztása játszott szerepet, hanem a vizuális elemek tagolása is. A későbbiekben a UserControl-ok részletes leírásánál felsorolásra kerülnek azok a vizuális elemek típusaikkal együtt, amelyek meglétét a kód feltételezi. Az alkalmazás projektjeit és a közöttük lévő függőségeket a 3.11 ábra mutatja. Az egyes projektek felépítése: sl - Silverlight projekt Ez a projekt a Silverlight alkalmazás induló projektje. Feladata az alkalmazás vizuális váltásainak kezelése, az aktuális képernyő megjelenítése, illetve szükség esetén a várakozási képernyő megjelenítése vagy elrejtése. A projekt a következő UserControl-okat tartmazza: App.xaml Funkciója: Az alkalmazás inicializálása és elindítása. MainPage.xaml 30

3.3. A RENDSZER SZERKEZETE 3.11. ábra. Az alkalmazás projektjei Funkciója: Ez a UserControl tartalmazza az aktuális UserControl-t amely a képernyőn meg kell hogy jelenjen. E mellett kezeli és szükség esetén megjeleníti a várakozáskor látható animációt. Névvel ellátott vizuális elemei: <Storyboard> waitinganimstoryboard - a várakozási animáció <Grid> waitinganimgrid - a várakozási animációt tartalmazza <TextBlock> waitingtext - a várakozási animáció közben látható felirat <Grid> maincontainer - az aktuális UserControl-t tartalmazza login - Silverlight projekt A bejelentkezési űrlap megjelenítéséért és a felhasználók beírt adatainak validálásáért felelős projekt. A következő UserControl-okat tartmazza: loginuc.xaml Funkciója: A bejelentkezéshez szüksége űrlap megjelenítése, a beírt adatok validálása. Névvel ellátott vizuális elemei: <Image > eltelogo - kép, amely az űrlapon jelenik meg <TextBox > usernametextbox - a felhasználó nevének bevitelére szolgál 31

3.3. A RENDSZER SZERKEZETE 3.12. ábra. A Framework projektjeinek osztálydiagramja 32

3.3. A RENDSZER SZERKEZETE <PasswordBox > pwdtextbox - a felhasználó jelszavának bevitelére szolgál, az Enter billentyű lenyomásának hatására a beírt adatok validálási folyamata megkezdődik <Button > loginbutton - a validálás indítására szolgál Fontosabb adattagjai: IuserModelServiceClient client - a felhasználók adatait tartalmazó adatbázishoz biztosít hozzáférést Függvényei: public loginuc() - konstruktor, amely betölti a kirajzolandó képet és inicializálja a client változót. A képet a média-szerveren keresi, amelynek elérési útvolnala a mainmodel osztályban található. private void loginbutton Click(object sender, RoutedEventArgs e) - a loginbutton eseménykezelő függvénye, elindítja az űrlapra írt adatok validálását miután letiltotta az űrlap elemeinek további módosítását private void pwdtextbox KeyUp(object sender, KeyEventArgs e) - a pwdtextbox eseménykezelő függvénye, az Enter billentyű lenyomásának hatására elindítja az űrlapra írt adatok validálását miután letiltotta az űrlap elemeinek további módosítását private void checklogindata() - az adatok validálását végző függvény, amely aszinkron hívást kezdeményez az adatbázis felé. Először az IuserModelServiceClient checkpassword metódusának válaszára vár, amennyiben a beírt adatok nem megfelelőek, jelzi a hibát és az űrlapot újra betölti. Helyes bejelentkezési adatok esetén újabb hívást (getuser) indít az adatbázis felé, melyben a bejelentkezett felhasználó adatait kéri le, ezek a mainmodel osztályban kerülnek tárolásra. Amennyiben a bejelentkezett felhasználó rendelkezik a megfelelő adminisztrátori jogokkal, a főmenü töltődik be. Adminisztrátori jogokkal nem rendelkező játékos esetén az adatainak megfelelő, a sorrendben következő játék töltődik be. Ez utóbbi esetben a teljes játéklistát lekéri a program az adatbázisból (getgameslist) és elmenti a mainmodel osztályban, ennek felhasználásával vált játékot a program a játékos számára. mainpage - Silverlight projekt A mainpage projekt tartalmazza a különböző féle felhasználók számára megjelenítendő UserControl-okat. A játékosok számára csupán az aktuális játék 33

3.3. A RENDSZER SZERKEZETE látható vagy pedig a megoldott feladat eredménye. Adminisztrátorok számára a főmenü is látható, melyen keresztül elérik a különböző adatbázis-módosító képernyőket. Ebben a projektben kapott helyet továbbá az a UserControl amelyen keresztül a játékosok számára megjelenő feladatok sorrendje módosítható. A projekt a következő UserControl-okat tartmazza: playerplainpage.xaml Funkciója: Adminisztrátori jogokkal nem rendelkező játékos esetén ez a UserControl kerül megjelenítésre a mainpage-en. Amíg a játékos ki nem lép, az aktuális feladat és az eredmény kiértékelésének megjelenítéséért is felelős. Névvel ellátott vizuális elemei: <MediaElement > welcomesound - a játék indulásakor hallható köszöntő szöveget lejátszó elem <Button > playbutton - nyomógomb mellyel a játékos elindíthatja a játékot <Grid > gamecontainer - az aktuális játékot tartalmazó, annak helyét kijelölő elem Fontosabb adattagjai: WebClient soundclient - a játék indulásakor hallható köszöntő szöveget tartalmazó hangfájl letöltéséhez szükséges kliens IuserModelServiceClient client - a felhasználók adatait tartalmazó adatbázishoz biztosít hozzáférést Függvényei: public playerplainpage() - inicializálja a client változót, a játékos köszöntésére szolgáló hangfájlt lejátssza, és megjeleníti a játék indítására szolgáló nyomógombot private void startgame() - új játékot indít, a játék adatait a mainmodel osztályból tölti be private void playbutton Click(object sender, RoutedEventArgs e) - a playbutton eseménykezelője, lenyomása után a játék elindul private void playsound(string name) - lejátssza az argumentumként kapott hangfájlt melyet a média-szerverről tölt le private void restart() - a játékos helyes válasza esetén hívódik meg, elmenti az adatbázisba az utoljára játszott játék indexét majd 34

3.3. A RENDSZER SZERKEZETE elindítja a következő játékot amennyiben a játékos nem lépte túl a napi maximális feladatok számát. Ez utóbbi esetben lejátszásra kerül a játék végén hallható hangfájl, a játék véget ér. private void tryagain() - az aktuális játékot újra betölti, a játékos hibás válasza esetén hívódik meg menupage.xaml Funkciója: Az adminisztrátorok által használható funkciók elérését lehetővé tevő menürendszert tartalmazza, illetve a megnyitott menüt megjeleníti. Névvel ellátott vizuális elemei: <TextBlock > welcometextblock - üdvözlő üzenetet tartalmaz a belépett adminisztrátornak <Button > registrationbutton - új játékos regisztrálására használt menü megynitása <Button > uploadimgbutton - képek feltöltésére használt menü megynitása <Button > uploadsoungbutton - hangfájlok feltöltésére használt menü megynitása <Button > gamesbutton - az adatbázisban szereplő játékok kipróbálására használt menü megynitása <Button > editgamesbutton - új játék létrehozására használt menü megynitása <Button > validategamesbutton - létrehozott játékok validálására használt menü megynitása <Button > editgameslistbutton - a játékosok által használt játékok sorrendjének megváltoztatására használt menü megynitása <Button > editsoundsbutton - a játékokhoz rendelt hangfájlok módosítására használt menü megynitása <Button > exitbutton - kilépés a programból <Grid > subpagecontainer - a megnyitott menüt tartalmazó és megjelenítő elem Függvényei: public menupage() - elemek inicializálása, üdvözlő üzenet kiírása A fent felsorolt nyomógombok minegyikéhez tartozik egy eseménykezelő, amely a gomb lenyomásának hatására betölti a megfelelő UserControl-t. 35

3.3. A RENDSZER SZERKEZETE private void newregistration() - a regisztrálás gomb eseménykezelőjének törzse került ebbe a függvénybe azzal a céllal hogy sikeres regisztráció esetén önmagát meghívva új regisztrációt lehessen kezdeményezni gametypeselector.xaml Funkciója: A főmenüben a játékok kipróbálása vagy szerkesztése esetén ki kell választani a játéktípust amelyet játszani vagy szerkeszteni kíván a felhasználó. Erre a célra jött létre ez a UserControl. Névvel ellátott vizuális elemei: <Button > egggamebutton - a kakukktojás játékhoz tartozó nyomógomb <Button > ordergamebutton - a sorrend játékhoz tartozó nyomógomb <Button > placergamebutton - az elhelyezős játékhoz tartozó nyomógomb <Button > groupgamebutton - a csoportosítós játékhoz tartozó nyomógomb Függvényei: public gametypeselector() - inicializálja a gombokat, betölti a hozzájuk tartozó képeket. Attól függően milyen funkciót akar elérni a felhasználó, kiírja a megfelelő feliratot. A fent felsorolt nyomógombok mindegyikéhez tartozik egy eseménykezelő, amely a gomb lenyomásának hatására betölti a kiválasztott játéktípushoz tartozó almenüt vagy listát. private void Image ImageFailed(object sender, ExceptionRoutedEventArgs e) - Amennyiben a gombokhoz tartozó képeket nem sikerül betölteni, a gombok mindegyikére felirat kerül arra vonatkozóan melyik játékhoz tartozik a gomb. gameslisteditoruc.xaml Funkciója: A játékosok számára megjelenő feladatok sorrendjének módosítására szolgáló UserControl Névvel ellátott vizuális elemei: <Grid > gamecontainer - lehetőség van a játékok kipróbálására, melynek során a képernyőn megjelenő játék itt kap helyet 36

3.3. A RENDSZER SZERKEZETE <Button > moveupbutton - a kijelölt játék előrébb mozgatása a listán <Button > movedownbutton - a kijelölt játék hátrébb mozgatása a listán <ListBox > actualgameslbox - a feladatok listája amelyeket a játékosok megkapnak <ListBox > othergameslbox - a feladatok között nem szereplő, de az adatbázisban elmentett játékok listája <Button > moveleftbutton - a kijelölt játék áthelyezése a feladatok közé <Button > moverightbutton - a kijelölt játék kivétele a feladatok közül <Button > savebutton - a módosított lista mentése az adatbázisba <Button > loadbutton - a feladatok listájában kiválasztott játék kipróbálása <Button > load2button - a feladatok közt nem szereplő játékok közül a kiválasztott játék kipróbálása <Button > backbutton - játék kipróbálása közben látható gomb, lenyomására a listákhoz lehet visszalépni Fontosabb adattagjai: IuserModelServiceClient client - a felhasználók adatait tartalmazó adatbázishoz biztosít hozzáférést ObservableCollection<GameData> myactuallist - a feladatok között szereplő játékok listája ObservableCollection<GameData> myotherlist - a feladatok között nem szereplő játékok listája Függvényei: private void moveleftbutton Click(object sender, RoutedEventArgs e) - a játékosok által játszható listába helyezi a kijelölt elemet a további játékok listájából private void moverightbutton Click(object sender, RoutedEventArgs e) - a játékosok által játszható listában kijelölt elemet áthelyezi a további játékok listájába, így az a játékosok feladatai között nem fog szerepelni private void moveupbutton Click(object sender, RoutedEventArgs e) - a játékosok által játszható listában a 37

3.3. A RENDSZER SZERKEZETE kijelölt elemet egy pozícióval feljebb helyezi, így a sorrendben előrébb kerül a feladatok megoldása során private void movedownbutton Click(object sender, RoutedEventArgs e) - a játékosok által játszható listában a kijelölt elemet egy pozícióval lejebb helyezi, így a sorrendben hátrébb kerül a feladatok megoldása során private void savebutton Click(object sender, RoutedEventArgs e) - elmenti a játszható játékok listáját az adatbázisba private void loadbutton Click(object sender, RoutedEventArgs e) - betölti a játszható játékok listájában kijelölt játékot kipróbálásra private void load2button Click(object sender, RoutedEventArgs e) - betölti a további játékok listájában kijelölt játékot kipróbálásra private void backbutton Click(object sender, RoutedEventArgs e) - visszatérés az előző menübe private void startgame(decimal gameid, string gametype) - betölti egy játékot, paraméterként a járék típusát és egyedi azonosítóját kapja meg private void newegggame(decimal gameid) - betölti egy kakukktojás játékot, paraméterként a járék egyedi azonosítóját kapja meg private void newordergame(decimal gameid) - betölti egy sorrend játékot, paraméterként a járék egyedi azonosítóját kapja meg private void newplacergame(decimal gameid) - betölti egy elhelyezős játékot, paraméterként a járék egyedi azonosítóját kapja meg private void newgroupgame(decimal gameid) - betölti egy halmazos játékot, paraméterként a járék egyedi azonosítóját kapja meg mainmodel - Silverlight projekt Ez a projekt egyetlen osztályt tartalmaz amelyben a program működéséhez szükséges globális változók tárolódnak statikus adattagként. Ebben a modellben kerül elmentésre az aktív UserControl, ennek változásáról az osztály eseményt küld, így a MainPage meg tudja jeleníteni. A modell tárol minden információt 38

3.3. A RENDSZER SZERKEZETE 3.13. ábra. A Management projektjeinek osztálydiagramja - 1. ábra a játékosról, a megoldandó feladatok listájáról, szükség esetén eseményt küld a várakozási animációra vonatkozóan (indítás, leállítás, megjelenő felirat változása). E mellett a játék-ablak aktuális méretének változásait is figyeli. Az osztály adattagjait a 3.12 ábrán láthatjuk. usermanagement - Silverlight projekt Ez a projekt a felelős a felhasználók adatainak karbantartásáért. Jelenleg az egyetlen elérhető funkciója az új felhasználók regisztrálása. A következő UserControl-okat tartmazza: registrationuc.xaml Funkciója: Új játékos regisztrálása, adatainak mentése az adatbázisba. 39

3.3. A RENDSZER SZERKEZETE 3.14. ábra. A Management projektjeinek osztálydiagramja - 2. ábra 3.15. ábra. A Management projekt mediaselectoruc és mediasoundselectoruc UserControl-jainak vizuális elemei 40

3.3. A RENDSZER SZERKEZETE Névvel ellátott vizuális elemei: <Border > successpanel - a mentés sikerességét illetve sikertelenségét kijeli a program, az üzenet itt jelenik majd meg <TextBox > nametextbox - az új játékos nevének beviteli mezője <TextBlock > namestatustblock - a név bevitelével kapcsolatos problémák kiírásának helye <TextBox > nicktextbox - az új játékos felhasználónevének beviteli mezője <TextBlock > nickstatustblock - a felhasználónév bevitelével kapcsolatos problémák kiírásának helye <TextBox > passwdtextbox - az új játékos jelszavának beviteli mezője <TextBlock > passwdstatustblock - a jelszó bevitelével kapcsolatos problémák kiírásának helye <TextBox > pwdagaintextbox - az új játékos jelszavának megismétlésére készült beviteli mező <TextBlock > pwdagainstatustblock - a jelszó ismételt bevitelével kapcsolatos problémák kiírásának helye <ComboBox > typecombobox - lenyíló menü a játékos típusának kiválasztására <TextBlock > typestatustblock - a játékos típusának kiválasztásával kapcsolatos problémák kiírásának helye <toolkit:numericupdown > agebox - az új játékos életkorának bevitelére szolgál <TextBlock > agestatustblock - a játékos életkorának bevitelével kapcsolatos problémák kiírásának helye <TextBox > disabilitiestextbox - beviteli mező ahova megjegyzéseket helyezhetünk el a játékosra és a feladatmegoldást korlátozó sajátosságaira vonatkozóan <StackPanel > namehintspanel - megjegyzések a játékos nevének bevitelével kapcsolatos hibalehetőségekről <StackPanel > nickhintspanel - megjegyzések a játékos felhasználónevének bevitelével kapcsolatos hibalehetőségekről <StackPanel > pwdhintspanel - megjegyzések a játékos jelszavának bevitelével kapcsolatos hibalehetőségekről <StackPanel > pwdagainhintspanel - megjegyzések a játékos jelszavának ismételt bevitelével kapcsolatos hibalehetőségekről 41

3.3. A RENDSZER SZERKEZETE <StackPanel > typehintspanel - megjegyzések a játékos típusának bevitelével kapcsolatos hibalehetőségekről <StackPanel > agehintspanel - megjegyzések a játékos életkorának bevitelével kapcsolatos hibalehetőségekről <Button > sendregistrationbutton - az adatok mentése az adatbázisba Függvényei: A 3.13 ábrán láthatóak az osztály adattagjai és függvényei. A beviteli mezők minegyikéhez tartozik egy ellenőrzésre szolgáló eseménykezelő. Hibásan megadott adatok esetén a megfelelő helyeken megjelennek a hibaüzenetek és ezek javítására szolgáló információk a felasználó felé (részletek a fejlesztői dokumentáció megfelelő részében: 2.3.1). mediaselectoruc.xaml Funkciója: A feltöltendő képek kiválasztását, címkézését és kommentálását segítő űrlap. Névvel ellátott vizuális elemei: Lásd: 3.15 ábra Függvényei: Lásd: 3.13 ábra mediasoundselectoruc.xaml Funkciója: A feltöltendő hangfájlok kiválasztását és címkézését segítő űrlap. Névvel ellátott vizuális elemei: Lásd: 3.15 ábra Függvényei: Lásd: 3.14 ábra gameframeproject - Silverlight projekt Ez a projekt a konkrét játéktípusok közös felületét tartalmazza. Hozzá tartozik a játékok megjelenésének kerete (fejléc, hangolejátszó gombok), illetve a játékszerkesztők utolsó lépésében felbukkanó űrlap amin a mentést végezzük. A projekt osztálydiagramját lásd a 3.16 ábrán. A következő UserControl-okat tartmazza: gameframeuc.xaml Funkciója: A játékok megjelenésének keretét leíró UserControl. savegameuc.xaml Funkciója: A játékszerkesztők utolsó lépésében felbukkanó űrlap. 42

3.3. A RENDSZER SZERKEZETE 3.16. ábra. A gameframeproject osztálydiagramja 43

3.3. A RENDSZER SZERKEZETE 3.17. ábra. A eggmodelproject osztálydiagramjának egy része 44

3.3. A RENDSZER SZERKEZETE 3.18. ábra. A eggmodelproject osztályainak kapcsolatai 3.19. ábra. A ordermodelproject osztályainak kapcsolatai 45

3.3. A RENDSZER SZERKEZETE 3.20. ábra. A placermodelproject osztályainak kapcsolatai 3.21. ábra. A groupmodelproject osztályainak kapcsolatai 46

3.4. A RENDSZER TELEPÍTÉSE eggmodelproject - Silverlight projekt A kakukktojás játékhoz tartozó szerkesztők, vizuális elemek és a játék működését leíró fájlok tartoznak a projekthez. A játék megjelenéséért és funkcionalitásáért felelős osztályok diagramját a 3.17 ábrán láthatjuk. Az itt látott relációk teljesen hasonlóan alakulnak a többi típus esetén is. A típushoz tartozó szerkesztők, keretek és modellek osztályainak kapcsolatát a 3.18 ábra szemlélteti. ordermodelproject - Silverlight projekt A sorrend játékhoz tartozó szerkesztők, vizuális elemek és a játék működését leíró fájlok tartoznak a projekthez. A típushoz tartozó szerkesztők, keretek és modellek osztályainak kapcsolatát a 3.19 ábra szemlélteti. placermodelproject - Silverlight projekt Az elhelyezős játékhoz tartozó szerkesztők, vizuális elemek és a játék működését leíró fájlok tartoznak a projekthez. A típushoz tartozó szerkesztők, keretek és modellek osztályainak kapcsolatát a 3.20 ábra szemlélteti. groupmodelproject - Silverlight projekt A halmazos játékhoz tartozó szerkesztők, vizuális elemek és a játék működését leíró fájlok tartoznak a projekthez. A típushoz tartozó szerkesztők, keretek és modellek osztályainak kapcsolatát a 3.21 ábra szemlélteti. 3.3.3. ASP.NET oldal amely a Silverlight alkalmazást hosztolja A silverlight alkalmazást egy ASP.NET oldalba ágyaztuk, a VisualStudio varázslójának segítségével. A projekt tartalmazza mindazon interfészeket és modulokat amelyek szükségesek az adatbázis eléréséhez. Az SQL adatbázis eléréséhez WCF Service-eket használunk. Minden játéktípushoz, a felhasználók adatainak eléréséhez és a média elemek adatainak eltárolásához is tartozik egy-egy. 3.4. A rendszer telepítése A program egy kliens-szerver alkalmazás. A szerver oldali telepítés több lépésből áll. Az adatbázis két részre bontható: SQL adatbázis és média elemeket tartalmazó adatbázis. Az SQL adatbázis a Microsotf SQL Server 2005 Express Edition alkalmazással készült, a mellékelt CD tartalmaz egy scriptet (db/sldb.sql) aminek 47

3.4. A RENDSZER TELEPÍTÉSE 3.22. ábra. Az interfészek diagramja - 1. 48

3.4. A RENDSZER TELEPÍTÉSE 3.23. ábra. Az interfészek diagramja - 2. 49