This is a documentation for Board Game Arena: play board games online !
「Game interface stylesheet: yourgamename.css」の版間の差分
Sourisdudesert (トーク | 投稿記録) 編集の要約なし |
Sourisdudesert (トーク | 投稿記録) |
||
41行目: | 41行目: | ||
== spectatorMode == | == 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: | |||
<pre> | |||
.spectatorMode #your_element_id { | |||
/* your special style */ | |||
} | |||
</pre> | |||
The most common usage of this is to hide some elements to spectators. For example, to hide "my hand" elements: | |||
<pre> | |||
.spectatorMode #my_hand { | |||
display: none; | |||
} | |||
</pre> |
2013年3月6日 (水) 16:20時点における版
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/emptygame/tokens.png'); background-position: 0px 0px; } .black_token { background-image: url('../../img/emptygame/tokens.png'); background-position: -20px 0px; } .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.
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; }