HTWG-MONOPOLY

Steffen Gorenflo

Timotheus Ruprecht

Refactoring

• Spielphasen eingeführt
• Spieleraktionen definiert
• Vereinfachung der Controller API

HTML

STRUKTURIERUNG

<div>

<h1>, <h2>, ...

<label>

<button>

<form>

<img>

<p>

...

CSS

BOOTSTRAP

Startseite

Spielfeld

Buttons

Tabellen

Grid-System

Modal

...

JAVASCRIPT

JQUERY

• Elemente selectieren
• Session ID aus URL
• Bilder "umsetzen" / austauschen
• Buttons einblenden /ausblenden
• Aktuelle Meldung ausgeben
• ...

AJAX

• Spiel starten
• Würfeln
• Zug beenden
• Karte ziehen
• Kaufen
• Gefängnis Karte einsetzen
• Aus Gefängnis frei kaufen
• Spiel beenden

ROUTEN

GET         /                           controllers.Application.welcome()
GET         /end                        controllers.Application.endGame()
GET         /go                         controllers.Application.index()
GET         /go/:id                     controllers.Application.showInstance(id:String)
GET         /answer/:bo                 controllers.Application.checkAnswer(bo:Boolean)
GET         /question                   controllers.Application.getQuestion()
GET         /games                      controllers.Application.getGameInstances()
GET	    /joined			controllers.Application.joinedGame()
GET         /created                    controllers.Application.createdGame()
GET         /isFull/:gameName           controllers.Application.isFull(gameName:String)
GET         /startGame/:gameName        controllers.Application.startGame(gameName:String)
GET         /currentGameID              controllers.Application.getCurrentGameId()
GET	    /getJoinGameID/:gameName  	controllers.Application.getJoinGameID(gameName:String)

GET         /socket/:id                 controllers.Application.connectWebSocket(id:String)

POST        /start                      controllers.Application.start()
POST        /createGame                 controllers.Application.createGameInstance()
POST        /addPlayerToGame		controllers.Application.addPlayertoGameInstance()
POST        /rollDice                   controllers.Application.rollDice()
POST        /endTurn                    controllers.Application.endTurn()
POST        /buy                        controllers.Application.buy()
POST        /prisonBuy                  controllers.Application.prisonBuy()
POST        /prisonCard                 controllers.Application.prisonCard()
POST        /prisonRoll                 controllers.Application.prisonRoll()
POST	    /drawCard			controllers.Application.drawCard()

PLAY FRAMEWORK

Scala Template Engine - Spielfeld

WEB SOCKETS

// observer map for multi instances
private static Cache<String, MonopolyObserver> observer = 
                            CacheBuilder.newBuilder().expireAfterAccess(2, TimeUnit.DAYS).build();


// connect to websockets
public static WebSocket<String> connectWebSocket(final String game) {
        return new WebSocket<String>() {

            public void onReady(WebSocket.In<String> in, WebSocket.Out<String> out) {
                observer.put(game, new MonopolyObserver(controllers.asMap().get(game), 
                                                            out, isMultiGame.asMap().get(game)));
         }
    };
}

WEB SOCKETS

        function connect() {
            var socket = new WebSocket(getHostName());

            socket.onopen = function () {
                message('Socket Status: ' + socket.readyState + ' (Open)');
            };

            socket.onmessage = function (msg) {
                var data = $.parseJSON(msg.data);
                $scope.players = data.players;
                $scope.currentplayer = data.currentPlayer;
                $scope.$apply();

    	        // update game
                checkIfMultiGameInstanz(data);
                updateAllPlayer(data.players);
                updateDice(data.dices);
                updateAllButtons(data.buttons);
                updateCurrentView(data);
                updateMessage(data.msg);
            };

            socket.onclose = function () {
                message('Socket Status: ' + socket.readyState + ' (Closed)');
            };

        }// End connect

WEB SOCKETS

 private String getGameInfoAsJSON() {
        JSONObject game = new JSONObject();

        // game informations
        game.put("players", getPlayersAsJSON());
        game.put("buttons", getPossibleOptionsAsJSON());        
        game.put("msg", lastMessage);
        game.put("isMultiGame", isMultiGame);
        game.put("gameName", gameName);

        // dices
        JSONObject dice = new JSONObject();
        dice.put("dice1", "" + controller.getDice().getDice1();
        dice.put("dice2", "" + controller.getDice().getDice2();
        game.put("dices", dice);

        // player
        JSONObject player = new JSONObject();
        player.put("name", controller.getCurrentPlayer().getName());
        game.put("currentPlayer", player);
        
        return game.toJSONString();
}

POLYMER

<polymer-element name="my-summary-element" attributes="players name">
    <template>
        <style>
            .pic {
                width: 30px;
                height: 30px;
            }
        </style>
        <div class="infoboard">
            <h2>{{name}} ist dran!</h2>
            <table class="table table-striped">
                <tr>
                    <th>Figur</th>
                    <th>Spielername</th>
                    <th>Budget</th>
                    <th>Besitz</th>
                    <th>Position</th>
                    <th>Gefaengniskarte</th>
                </tr>

                <template repeat="{{player in allPlayers}}">
                    <tr>
                        <td><img class="pic" ng-src="assets/images/{{player.pic}}.jpg"
                                 src="../assets/images/{{player.pic}}.jpg"/></td>
                        <td>{{player.name}}</td>
                        <td>{{player.budget}}</td>
                        <td>{{player.ownership}}</td>
                        <td>{{player.pos}}</td>
                        <td>{{player.prisoncard}}</td>
                    </tr>
                </template>
            </table>
        </div>
        {{players | ready}}
    </template>
    <script>
        Polymer({
            allPlayers: 0,
            ready: function (data) {
                /* convert string to array with json objects */
                var tmpConvert = eval('[' + data + ']');
                var localArray = [];
                for (var key in tmpConvert) {
                    var obj = tmpConvert[key];
                    for (var prop in obj) {
                        var element = obj[prop];
                        localArray.push(element);
                    }
                }
                this.allPlayers = localArray;
            }
        });
    </script>
</polymer-element>

<!-- my summary element, created with polymer -->
<my-summary-element name="{{currentplayer.name}}" players="{{players}}"></my-summary-element>

ANGULAR JS

ANGULAR JS

<div class="row mon-fade-repeat" ng-repeat="player in players" 
    ng-mouseenter="showMinusButton = true" ng-mouseleave="showMinusButton = false">

    <!-- col for the minus button -->
    <div class="col-xs-1 ">
        <span class="glyphicon glyphicon-remove monopoly_remove mon-fade" 
        aria-hidden="true" ng-click="rmPlayer($index)" ng-show="showMinusButton"></span>
    </div>

    <!-- col for forms -->
    <div class="col-xs-8 player-form">
        <form novalidate role="form">
            <div class="form-group">
                <input class="form-control" placeholder="Enter Player {{$index + 1}}" 
                    ng-model="player.name">
            </div>
        </form>
    </div>

    <!-- Dropdown col -->
    <div class="col-xs-3">
        <div ng-hide="player.figure">
            <select class="form-control" ng-model="select" ng-options="icon for icon in icons" 
            ng-change="updatePlayerIcon($index,select)" ng-disabled="player.figure"></select>
        </div>
        <img ng-src="assets/images/{{player.figure}}.jpg" class="monopoly-icon" 
            ng-show="player.figure"/>
    </div>

MULTI INSTANZ

• Map (Google Cache)
• • Instanzen
  • Websockets
• Cookies
• • für Spieleridentifizierung  (Networkgame)
• Ansonsten über URL
  • mehrere Spiele auf einem Rechner
• Zuschauen möglich

AUTHENTICATION

Text

Google

Facebook

DEPLOYMENT

htwg-monopoly.heroku.com

FEATURES

GitHub Page

http://t1m1.github.io/de.htwg.se.monopoly-web/

FACEBOOK

// von facebook erhalten
(function (d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s);
    js.id = id;
    js.src = "//connect.facebook.net/de_DE/sdk.js#xfbml=1&version=v2.0";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

// eingebindung
<script type='text/javascript' src='@routes.Assets.at("js/fb.js")'></script>

33

FAVICON

Mobile

GOOGLE ANALYTICS

LEAP MOTION

LIVE DEMO

SOLL / IST - Vergleich

Play 

HTML

CSS

Bootstrap

Javascript

JQuery & Ajax

WebSockets

Angular.js

Deployment

Polymer

Authentication

Multi-Instanz

Google Analytics

Facebook

GitHub Page

Favicon

Leap Motion

Fragen?