@import url('https://fonts.googleapis.com/css?family=Copse');

.whiteblock {
    border-radius: 6px;
    margin-bottom:6px;
    margin-top:6px;
}

.whiteblock h3,
.whiteblock h4 {
    font-family:Copse, Roboto, Arial, sans-serif;
    color:#222;
    margin-top:0;
    text-transform: uppercase;
    text-shadow: 0 1px #fff;
}
.whiteblock h4 {
    font-size: .8rem;
}

#myhand-wrap { float:left; height:180px; width: 316px; margin-right:.5em; }
#myevidence-wrap { float:left; height:180px; width: 700px; }

.playertable {
    display: inline-block;
    min-width: 20%;
}
.playertable h4 {
    margin-top:0;
}

        foreach( $players as $player_id => $player )

        foreach($players as $player_id => $player)

            $color = array_shift( $default_colors );

            $color = array_shift($default_colors);

        // Create Evidence cards

        // Create Evidence cards

            $cards[] = array('type' => 'evidence', 'type_arg' => $card_id, 'nbr' => 1);

            $cards[] = array('type' => 'evidence',
                             'type_arg' => $this->getCardTypeArg('evidence', $card_id),
                             'nbr' => 1);

            $cards[] = array('type' => $card['casetype'], 'type_arg' => 36 + $card_id, 'nbr' => 1);

            $cards[] = array('type' => $card['casetype'],
                             'type_arg' => $this->getCardTypeArg($card['casetype'], $card_id),
                             'nbr' => 1);

        $this->cards->createCards($cards, 'offtable'); 

        $this->cards->createCards($cards, 'offtable');

        // Init game statistics

        // TODO: Init game statistics

        // TODO: setup the initial game situation here

        // Setup the initial game situation here

        $result['player_display_cards'] = $this->cards->getCardsInLocation('player_display');

        // TODO
        // Select a new first player. In minigame 1 it's player_no 1, minigame 2 player_no 2 etc.

        // TODO: Select a new first player. In minigame 1 it's player_no 1,
        // minigame 2 player_no 2 etc.

    }
    function getCardTypeArg($type, $i) {
        if ($type == 'evidence') {
            $offset = 0;
        } else if (in_array($type, array('crime', 'location', 'suspect'))) {
            $offset = 36;
        }
        return $offset + $i;

    function getCardNames($ids)
    {
        return array_pluck(
            array_filter($this->cardBasis, function($k) {
                return in_array($k, $ids);
            }, ARRAY_FILTER_USE_KEY),
            'name'
        );
    }

        $this->getPlayerCaseCards($player_id);

        $case_card_ids = array_pluck($this->getPlayerCaseCards($player_id), 'id');

            console.log( "Starting game setup" );
            // Setting up player boards
            for( var player_id in gamedatas.players )
            {
                var player = gamedatas.players[player_id];
                // TODO: Setting up players boards if needed
            }
            // TODO: Set up your game interface here, according to "gamedatas"
            // Player hand; the secret case cards for your left neighbor This
            // hand is "not actionable", i.e. read-only, during a whole round.
            // It could probably be handled in the template only, without JS.
            // this.playerHand = new ebg.stock(); // new stock object for hand
            // this.playerHand.create( this, $('myhand'), this.cardwidth, this.cardheight );
            // this.playerHand.image_items_per_row = 12;

            var CARD_ITEM_MARGIN = 3;
            var CARD_ITEMS_PER_ROW = 9;

            // The evidence card display

            // Set up player hand, i.e. the secret case cards of their left neighbor
            this.playerHand = new ebg.stock();
            this.playerHand.create(this, $('myhand'), this.cardwidth, this.cardheight);
            this.playerHand.setSelectionMode(0); // no selection possible
            this.playerHand.image_items_per_row = CARD_ITEMS_PER_ROW;
            this.playerHand.item_margin = CARD_ITEM_MARGIN;
            
            // The stocks where evidence cards can live: display, discard, player displays

            this.evidenceDisplay.create( this, $('evidence'), this.cardwidth, this.cardheight );
            this.evidenceDisplay.image_items_per_row = 9;

            this.evidenceDisplay.create(this, $('evidence'), this.cardwidth, this.cardheight);
            this.evidenceDisplay.image_items_per_row = CARD_ITEMS_PER_ROW;
            this.evidenceDisplay.item_margin = CARD_ITEM_MARGIN;

            this.evidenceDiscard.setSelectionMode(0); // max 1 card can be selected
            this.evidenceDiscard.setOverlap(2, 0);
            this.evidenceDiscard.create( this, $('evidence_discard'), this.cardwidth, this.cardheight );
            this.evidenceDiscard.image_items_per_row = 9;

            this.evidenceDiscard.setSelectionMode(0); // no selection possible
            this.evidenceDiscard.create(this, $('evidence_discard'), this.cardwidth, this.cardheight);
            this.evidenceDiscard.image_items_per_row = CARD_ITEMS_PER_ROW;
            this.evidenceDiscard.setOverlap(.01, 0); // basically on top of eachother
            this.evidenceDiscard.item_margin = 0;
            this.addTooltip('evidence_discard', _("Discard pile"), _('View discarded cards.'));
            // TODO: onclick expand the discard pile, so it can be inspected
            this.playerDisplays = {};
            for (var player_id in gamedatas.players) {
                var pdstock = new ebg.stock();
                this.playerDisplays[player_id] = pdstock;
                var node_id = (player_id == this.player_id) ? 'myevidence' : 'playerdisplay_' + player_id;
                pdstock.setSelectionMode(0); // no selection possible
                pdstock.create(this, $(node_id), this.cardwidth, this.cardheight);
                pdstock.setOverlap(66, 0); // basically on top of eachother
                pdstock.image_items_per_row = CARD_ITEMS_PER_ROW;
                pdstock.item_margin = CARD_ITEM_MARGIN;
            }
            this.playerDisplay = this.playerDisplays[this.player_id];  // shortcut for current player

            for (var value = 1; value <= 36; value++) {
                var pos_in_img = value - 1;  // it's zero-based
                // weight is 0 for all as they have no inherent value
                this.evidenceDisplay.addItemType(value, 0, g_gamethemeurl + 'img/evidencecards.jpg', pos_in_img);
                this.evidenceDiscard.addItemType(value, 0, g_gamethemeurl + 'img/evidencecards.jpg', pos_in_img);

            for (var i = 1; i <= 36; i++) {
                var pos_in_img = i - 1;  // it's zero-based
                // weight is 0 for all as they have no inherent weight
                this.playerHand.addItemType(i + 36, 0, g_gamethemeurl + 'img/casecards.jpg', pos_in_img);
                this.evidenceDisplay.addItemType(i, 0, g_gamethemeurl + 'img/evidencecards.jpg', pos_in_img);
                this.evidenceDiscard.addItemType(i, 0, g_gamethemeurl + 'img/evidencecards.jpg', pos_in_img);
                for (var player_id in gamedatas.players) {
                    this.playerDisplays[player_id].addItemType(i, 0, g_gamethemeurl + 'img/evidencecards.jpg', pos_in_img);
                }

            // // Cards in player's hand
            // for ( var i in this.gamedatas.hand) {
            //     var card = this.gamedatas.hand[i];
            //     var color = card.type;
            //     var value = card.type_arg;
            //     this.playerHand.addToStockWithId(this.getCardUniqueId(color, value), card.id);
            // }

            // Cards in player's hand
            for (i in this.gamedatas.hand) {
                var card = this.gamedatas.hand[i];
                this.playerHand.addToStockWithId(card.type_arg, card.id);
            }

            for (i in this.gamedatas.player_display_cards) {
                // All cards have same location 'player_display' with `location_arg` being the player_id
                var card = this.gamedatas.player_display_cards[i];
                this.playerDisplays[card.location_arg].addToStockWithId(card.type_arg, card.id);
            }
            

            
            // "Static" quick help tooltips
            this.addTooltip('myhand-wrap', _("TOP SECRET! Only you can see these."), '');
            this.addTooltip('myevidence-wrap', _("These cards remind you which evidence is unrelated to your case. They are visible to everybody."), '');

        /* Example:
        
        onMyMethodToCall1: function( evt )
        {
            console.log( 'onMyMethodToCall1' );

            // Preventing default browser reaction
            dojo.stopEvent( evt );
            // Check that this action is possible (see "possibleactions" in states.inc.php)
            if( ! this.checkAction( 'myAction' ) )
            {   return; }
            this.ajaxcall( "/fabiantest/fabiantest/myAction.html", {
                                                                    lock: true,
                                                                    myArgument1: arg1,
                                                                    myArgument2: arg2,
                                                                    ...
                                                                 },
                         this, function( result ) {
                            // What to do after the server call if it succeeded
                            // (most of the time: nothing)
                         }, function( is_error) {
                            // What to do after the server call in anyway (success or failure)
                            // (most of the time: nothing)
                         } );
        },
        */

            // Note: notif.args contains the arguments specified during you "notifyAllPlayers" / "notifyPlayer" PHP call
            console.log("NEW EV", notif);

            if (notif.args.useful) {
                this.evidenceDiscard.addToStockWithId(notif.args.card_type, notif.args.card_id, 'evidence');
                // this.evidenceDisplay.removeFromStockById(notif.args.card_id, 'evidence_discard');
            } else {
                // TODO: move to player display
            }

            // Useless evidences goes to player display; valueable evidence to discard.
            var targetStock = (notif.args.useful) ? this.evidenceDiscard : this.playerDisplays[notif.args.player_id];
            targetStock.addToStockWithId(notif.args.card_type, notif.args.card_id, 'evidence');

        $this->tpl['MY_HAND'] = self::_("My hand");

        $this->tpl['MY_EVIDENCE_CARDS'] = self::_("Evidence cards I collected");
        $this->tpl['EVIDENCE_CARDS_OF_PLAYER'] = self::_("Evidence cards collected by");

        $this->tpl['NO_EVIDENCE_CARDS'] = self::_("Evidence cards that brought no new information to the investigating player");

            $this->page->insert_block("player", array ("PLAYER_ID" => $player_id,
                    "PLAYER_NAME" => $players [$player_id] ['player_name'],
                    "PLAYER_COLOR" => $players [$player_id] ['player_color'] ));

            $this->page->insert_block(
                "player",
                array (
                    "PLAYER_ID" => $player_id,
                    "PLAYER_NAME" => $players[$player_id]['player_name'],
                    "PLAYER_COLOR" => $players[$player_id]['player_color'],
                )
            );

<div id="evidence_wrap" class="whiteblock">
    <div id="evidence"></div>
    Discard:

<div id="evidence_wrap" class="whiteblock" style="float:left; width:950px"><div id="evidence"></div></div>
<div class="whiteblock" style="display:inline-block;background:none; opacity:0.75; width:110px;">

<div id="board">

<div id="board" style="clear:both">

<h3 style="margin-top:1em">{MY_HAND} ({CASE_CARDS_OF_PLAYER} XXX)</h3>
<div class="playertable whiteblock">

<div id="myhand-wrap" class="whiteblock">
    <h4>{CASE_CARDS_OF_PLAYER} XXX</h4>

<h3>{MY_EVIDENCE_CARDS}</h3>
<div class="playertable whiteblock">

<div id="myevidence-wrap" class="whiteblock">
    <h4>{MY_EVIDENCE_CARDS}</h4>

<h3>{NO_EVIDENCE_CARDS}:</h3>
<div id="playertables">

<div style="clear:both"></div>
<div id="playerdisplays">

    <div class="playertable whiteblock">
        <h4 style="color:#{PLAYER_COLOR}">{PLAYER_NAME}</h4>
        <div class="playertablecard" id="playertablecard_{PLAYER_ID}">
        </div>

    <div class="whiteblock">
        <h4>{EVIDENCE_CARDS_OF_PLAYER} <span style="color:#{PLAYER_COLOR}">{PLAYER_NAME}</span></h4>
        <div id="playerdisplay_{PLAYER_ID}"></div>