This is a documentation for Board Game Arena: play board games online !

Game interface stylesheet: yourgamename.css

З пляцоўкі Board Game Arena
Версія ад 10:03, 23 кастрычніка 2020, аўтар Shadowphiar (размовы | уклад)
(розн.) ← Папярэдн. версія | Актуальная версія (розн.) | Навейшая версія → (розн.)
Перайсці да навігацыі Перайсці да пошуку
Studio Framework Navigation

File structure of a BGA game

Game logic (Server side)
Game interface (Client side)
Other components
BGA Studio game components reference
  • Deck: a PHP component to manage cards (deck, hands, picking cards, moving cards, shuffle deck, ...).
  • Counter: a JS component to manage a counter that can increase/decrease (ex: player's score).
  • Scrollmap: a JS component to manage a scrollable game area (useful when the game area can be infinite. Examples: Saboteur or Takenoko games).
  • Stock: a JS component to manage and display a set of game elements displayed at a position.
  • Zone: a JS component to manage a zone of the board where several game elements can come and leave, but should be well displayed together (See for example: token's places at Can't Stop).

Undocumented component (if somebody knows please help with docs)

  • Draggable: a JS component to manage drag'n'drop actions.
  • ExpandableSection: a JS component to manage a rectangular block of HTML than can be displayed/hidden.
  • Wrapper: a JS component to wrap a <div> element around its child, even if these elements are absolute positioned.
BGA Studio user guide


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, either:

  • specify the background-position offsets in pixels.
  • choose the size of your div so that, after any global scaling (this.gameinterface_zoomFactor), it will occupy an integer number of pixels on the screen.
  • define a font-size in your div and specify background-position in units of em.

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;
}
Узята з "http:///index.php?title=Game_interface_stylesheet:_yourgamename.css&oldid=5950"