This is a documentation for Board Game Arena: play board games online !
Game interface stylesheet: yourgamename.css
This is the CSS stylesheet of your game User Interface.
Styles defined on this file will be applied to the HTML elements you define in your HTML template (yourgame_yourgame.tpl), and to HTML elements you create dynamically with Javascript.
Usually, you are using CSS to:
1°) define the overall layout of your game (ex: place the board on the top left, place player's hand beside, place the deck on the right, ...).
2°) create your CSS-sprites: All images of your games should be gathered into a small number of image files. Then, using background-image and background-position CSS properties, you create HTML blocks that can display these images correctly.
Example:
Example of CSS sprites (a black token and a white token, 20x20px each, embedded in the same "tokens.png" 40x20px image):
.white_token {
background-image: url('img/tokens.png');
background-position: 0px 0px;
}
.black_token {
background-image: url('img/tokens.png');
background-position: -100% 0%;
}
.token {
width: 20px;
height: 20px;
background-repeat: none;
}
3°) ... anything else:
It is really easy to add and remove CSS classes dynamically from your Javascript with dojo.addClass and dojo.removeClass. It is also easy to check if an element has a class (dojo.hasClass) or to get all elements with a specific class (dojo.query).
This is why, very often, using CSS classes for the logic of your user interface allow you to do complex thing easily.
Note: on the production platform, this file will be compressed and comments will be removed. Consequently, don't hesitate to put as many comments as necessary.
Important: ALL the CSS directives for your game must be included in this CSS file. You can't create additional CSS files and import them.
Warning: using Z-index
You may use z-index CSS property in your game interface, but you should pay attention to the following: BGA dialogs are displayed with a z-index of 950. If you want to use z-index safely, you should use value lower than 900.
About z-index: don't forget that if you are using a z-index, your element will be displayed above all elements that do not have a z-index. So it's no use to have big z-index values: 1 is enough most of the time :)
Tip: how to make your cards looks beautiful :)
This piece of CSS (to adapt to your needs) is adding rounded corners + a shadow to your card.
border-radius: 10px;
border: 1px black solid;
-moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.4);
-webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.4);
-o-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.4);
box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.4);
filter:progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=134, Strength=30);
spectatorMode
When a spectator (= a player that is not part of the game) is viewing a game, the BGA framework add the CSS class "spectatorMode" to the wrapping HTML tag of your game.
This way, if you want to apply a special style to some elements of your game for spectators, you can do this in your CSS:
.spectatorMode #your_element_id {
/* your special style */
}
The most common usage of this is to hide some elements to spectators. For example, to hide "my hand" elements:
.spectatorMode #my_hand {
display: none;
}