1.
The BGA framework at a glance

2.
IntroThe BGA framework helps you to build a onlineboard game adaptation:● That will be played in realtime.● That will be played by several human players.● That will be played from an internet browser.● That will have rules enforcement (ie : no possibility to cheat).This presentation shows at a glance how BGAframework is workingAfter reading this presentation, youll be able to understand how a game is running on theBGA platform.We wont go into details, in order you can have a good overview of the platform, andafterwards immediately understand « which component is doing what ».

3.
Clients & server BGA server BGA serverHeres an overview of the BGAarchitecture.3 players : Alice, Bob and Charlieare playing a game on the BGAserver using their web browser. Alices Alices Bobs Bobs Charlies Charlies browser browser browser browser browser browser

4.
Clients & server BGA server BGA serverWhile developing your game logic,youll have to work on both serverside and client side.Lets see whats on each side. Alices Alices Bobs Bobs Charlies Charlies browser browser browser browser browser browser

5.
The server sideOn the server side, youll find 3components : BGA server BGA server● The game database :This is the current state of thegame (ex : scores, tokens place onboard, which card is where...)● The game logic : Game Game Game database logic (rules) resourcesThis is the rules of the game. The gamelogic ensures that its not possible tocheat (« rules enforcement »).● The game resources :This is whats going to be downloaded tobe used by the client browsers (ex :images, stylesheets, ...).

6.
The client side Alices browser Alices browserOn the client side, youll find theuser interface (UI).The user interface manage all whatis displayed to the user (ex : « thistoken has moved from A to B »), Gameand make possible all user actions UIon the game (ex : « a click on thiscard plays this card »).

7.
The client sideTo do this, you will use 4 differenttypes of resources : Alices browser Alices browser●A HTML view which defines thebasic layout of your game UI.● Some images to display thegame art. Game UI● A CSS stylesheet which definesthe style and position of elementsof your game UI.● A javascript script whichdefines the mechanisms of yourUI (ex : click on this button trigger HTML Images Stylesheet Javascriptthis action). view

8.
Summary : technologies used The game database is using MySQL. The game logic is using the PHP language. The game ressources, used for the user interface, are using :HTML language CSS Javascript script (HTML4) stylesheet (with Dojo framework)

9.
Information flow BGA server BGA serverNow, lets have a look on how allthese components interact with asimple example.Our three players A, B and C arestarting a game together. The nameof this fake game is «mygame ». Alices Alices Bobs Bobs Charlies Charlies browser browser browser browser browser browser

10.
Creating a new game BGA server BGA serverAs soon as everyone accept tostart the game, your PHP method« setupNewGame » is called (fromgame logic).This method must setup the initial ««setupNewGame »»game situation, as described in setupNewGamegame rules, ie you have to createthe right SQL statements toinitialize the database according tothe game rules.This is it, you can now welcomeyour players ! Alices Alices Bobs Bobs Charlies Charlies browser browser browser browser browser browser

11.
Loading the game BGA server BGA serverAlices browser requests to load thegame with the path :« /mygame?table=9999 » http://boardgamearena.com/mygame?table=9999Where « 9999 » is the identifier ofthe table. Alices Alices Bobs Bobs Charlies Charlies browser browser browser browser browser browser

12.
Loading the game BGA server BGA serverAt first, we have to gather allinformations about the currentgame situation in order Alices ««getAllDatas »»browser can setup game situation getAllDatason client side.For this, your « getAllDatas » PHPmethod is called. Alices Alices Bobs Bobs Charlies Charlies browser browser browser browser browser browser

13.
Loading the game BGA server BGA serverYour getAllDatas method gather allinformation Alice can see from the ««getAllDatas »»== getAllDatasgame (and not the cards in thehand of Bob!), and return this data. Alices Alices Bobs Bobs Charlies Charlies browser browser browser browser browser browser

14.
Loading gameThen, we have to generate for Alice BGA server BGA servera classical webpage where she canplay « mygame ». Of course, thiswebpage is in classic HTML.This is the view of the game.You can use some logic to create HTMLsome dynamic HTML page, but (inc datamost of the time well let the client for Alice)do the biggest part of the gamesetup and return a simple piece ofstatic HTML here.Note that the HTML generatedembed automatically the data Alices Bobs Charliespreviously generated (in « json » Alices Bobs Charlies browser browser browser browser browser browserformat).

15.
Loading the game BGA server BGA serverThe HTML webpage and allinformation are returned to Alice... Alices Alices Bobs Bobs Charlies Charlies browser browser browser browser browser browser

16.
Loading the game BGA server BGA serverThen, like any classic webpages,resources are downloaded : yourimages, your javascript and yourcss stylesheet. Alices Alices Bobs Bobs Charlies Charlies browser browser browser browser browser browser

17.
Loading the gameFinally, your « setup » javascript BGA server BGA servermethod is called.In this method, you can use thedata returned by the server(« Alice data ») to finalize thegame setup for Alice. ««setup »» setup Alices AlicesEx : wow, Alice starts the game browser browserwith 3 money tokens. Lets set her Bobs Charlies Bobs Charliesmoney counter to « 3 ». browser browser browser browser

18.
Loading the game BGA server BGA serverThis is it !Alice has now a view of the currentgame situation, and shes ready toplay. Alices Alices Bobs Bobs Charlies Charlies browser browser browser browser browser browser

19.
Loading the game BGA server BGA serverOf course the same thinghappened to Bob and Charlie.Now, everyone is ready to play! Alices Alices Bobs Bobs Charlies Charlies browser browser browser browser browser browser

20.
Making a move BGA server BGA serverIts Alice turn. She is the « activeplayer ».Let say Alice want to play a card,and then clicks on a card. Alices browser Bobs Alices browser Bobs Charlies Charlies browser browser browser browser « clic »

21.
Making a move BGA server BGA serverDuring the initial « setup » of thepage, we setup a handler for this« clic » event for this card.Let say this handler is a javascript «onClicMyMethod» «onClicMyMethod»method call « OnClicMyMethod ». Alices browser BobsOnClicMyMethod is called. Alices browser Bobs Charlies Charlies browser browser browser browser « clic »

22.
Making a move BGA server BGA serverOnClicMyMethod gets the ID of the /mygame/mygame/playAcard.html?card=99Alices card (ex : 99), and send arequest to BGA server at this url : «onClicMyMethod» «onClicMyMethod»/mygame/mygame/playAcard.html?card=99 Alices browser Bobs Alices browser Bobs Charlies Charlies browser browser browser browser « clic »

23.
Making a move BGA server BGA serverOn server side, your corresponding «playAcard( 99 )» «playAcard( 99 )»method « playAcard » is called,with the id of the card played inparameter. /mygame/mygame/playAcard.html?card=99 Alices Alices Bobs Bobs Charlies Charlies browser browser browser browser browser browser

24.
Making a move BGA server BGA serverYour first work, on this method, is tocheck if this is a right move :● Is Alice the active player really ? «playAcard( 99 )» «playAcard( 99 )»● Can she play a card at thismoment of the game ?● Does she really have this card inhand ?● ... /mygame/mygame/playAcard.html?card=99 Alices Alices Bobs Bobs Charlies Charlies browser browser browser browser browser browser

25.
Making a move BGA server BGA serverDone !Now, you just have to apply therules of the game to the currentsituation. «playAcard( 99 )» «playAcard( 99 )»Lets say the card played by Alicegives her 2 money tokens. We writein the database that she has 2more money tokens and that hercard is now discarded (and that /mygame/mygame/playAcard.html?card=99Bob is the new active player). Alices Alices Bobs Bobs Charlies Charlies browser browser browser browser browser browser

26.
Making a move BGA server BGA serverNow, we have to notify all theplayers that the situation hasevolved.Note that we cant notify only Alicehere. All players must be notified «playAcard( 99 )» «playAcard( 99 )»that she has played a card and got2 money tokens.The BGA framework proposes asimple method to create and sendnotifications to players : /mygame/mygame/playAcard.html?card=99« notifyAllPlayers ».Now lets notify all players that Alice Alices Alices Bobs Bobs Charlies Charliesgot 2 money tokens... browser browser browser browser browser browser

27.
Making a move BGA server BGA server «playAcard( 99 )» «playAcard( 99 )»Lets name our notification« takeMoneyToken ».We associate to the notification a « takeMoneyToken »little packet of data saying that theconcerned player is Alice and thatthe number of token is 2.The notification is sent to all /mygame/mygame/playAcard.html?card=99players. Alices Alices Bobs Bobs Charlies Charlies browser browser browser browser browser browser

28.
Making a move BGA server BGA serverLets have a look on what happendon Bobs browser. …/playAcard.html?... « takeMoneyToken »He receives a « takeMoneyToken »notification. Automatically, your «notif_takeMoneyToken»associated javascript method «notif_takeMoneyToken« notif_takeMoneyToken » is Alices Bobs browser Charliescalled, with arguments saying that it Alices Bobs browser Charlies browser browser browser browserconcerns Alice and that the numberof money tokens is 2.

29.
Making a move BGA server BGA server… and finally, yournotif_takeMoneyToken just have to …/playAcard.html?...increase money tokens number of « takeMoneyToken »Alice by 2 on the web page.Of course the same thing happens «notif_takeMoneyToken» «notif_takeMoneyTokenon Alices and Charlies browser, soeveryone knows that Alice is Alices Bobs browser Bobs browser Charlies Alices Charlieswealthier. browser browser browser browser

30.
Making a move BGA server BGA serverAfterwards, two additional …/playAcard.html?...notifications are sent to notifyplayers that Alices card has beendiscarded and that its now Bobsturn.And this is it : Bob can take some Alices Bobs Bobs Charliesaction, and so on... Alices browser Charlies browser browser browser browser browser

31.
Summary● You know what is managed on the server side, and what is manager on the client(browser) side.● You know which technology is used for each part of the game adaptation.●You know what happened during basic steps of the game lifecycle : game setup,page load and making a move.●You understand the concepts of game database, game view, game action andnotification.