Board Game Arena

Code: Select all

<div id="opponentBoard" class="grid-container-center">
            <div id="opponentBoard1" class="player-rift grid-border"></div>
            <div id="opponentBoard2" class="player-rift grid-border"></div>
            <div id="opponentBoard3" class="player-rift grid-border"></div>
            <div id="opponentBoard4" class="player-rift grid-border"></div>
            <div id="opponentBoard5" class="player-rift grid-border"></div>
            <div id="opponentBoard6Empty" class="player-rift grid-container-guild-owned"></div>
            <div id="opponentBoard7Empty" class="player-rift grid-container-guild-owned"></div>
        </div>

Code: Select all

.grid-container-center {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    width: 1225px;
    justify-items: center;
    position: relative;
    grid-auto-rows: minmax(125px, auto);
}
.player-rift {
    position: relative;
    float: left;
    width: 168px;
    height: 0px;
    margin: 0px;
    grid-auto-rows: minmax(125px, auto);
}
(.grid border only for graphical testing purpose)

Code: Select all

template : var jstpl_elemental='<div class="card-elemental card-normal card_${guildId}_${cardValue}" id="card_${cardId}"></div>';
dojo.place(this.format_block('jstpl_elemental', {
                guildId: GuildId,
                cardValue: cardValue,
                cardId: card_Id
            }), 'opponentBoard2','last');