This is a documentation for Board Game Arena: play board games online !
Game interface stylesheet: yourgamename.css: Difference between revisions
Shadowphiar (talk | contribs) No edit summary |
No edit summary |
||
Line 51: | Line 51: | ||
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 :) | 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. | |||
<pre> | |||
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); | |||
</pre> | |||
== spectatorMode == | == spectatorMode == |
Revision as of 15:43, 11 September 2020
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: -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.
Warning: using percentage in background-position
In the example above, you will see "background-position: -20px 0px;" is used for the black token. You could also write this as "background-position: -100% 0%;" which displays the image at the same offset, because it is relative to the size of the .token bounding box, and this seems preferable because there is less dependence on the precise size of your images. Sadly however, this will cause issues on iPhone, on iPad, and on MacOS using Safari, because that browser calculates this offset in a slightly different way than Chrome or Firefox. (If the size of the div on screen, after any further scaling - which is done for you by the framework to fit games into small windows - is not a round integer number of pixels, then the offset of the image will be incorrect). To avoid this issue always specify the offsets in pixels.
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; }