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

Гаме интерфаце стyлесхеет: yоургаменаме.цсс

Извор: Board Game Arena
Пређи на навигацију Пређи на претрагу

Тхис ис тхе ЦСС стyлесхеет оф yоур гаме Усер Интерфаце.

Стyлес дефинед он тхис филе wилл бе апплиед то тхе ХТМЛ елементс yоу дефине ин yоур ХТМЛ темплате (yоургаме_yоургаме.тпл), анд то ХТМЛ елементс yоу цреате дyнамицаллy wитх Јавасцрипт.

Усуаллy, yоу аре усинг ЦСС то:

1°) дефине тхе овералл лаyоут оф yоур гаме (еx: плаце тхе боард он тхе топ лефт, плаце плаyер'с ханд бесиде, плаце тхе децк он тхе ригхт, ...).

2°) цреате yоур ЦСС-спритес: Алл имагес оф yоур гамес схоулд бе гатхеред инто а смалл нумбер оф имаге филес. Тхен, усинг бацкгроунд-имаге анд бацкгроунд-поситион ЦСС пропертиес, yоу цреате ХТМЛ блоцкс тхат цан дисплаy тхесе имагес цоррецтлy.

Еxампле:

    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°) ... анyтхинг елсе:

Ит ис реаллy еасy то адд анд ремове ЦСС цлассес дyнамицаллy фром yоур Јавасцрипт wитх дојо.аддЦласс анд дојо.ремовеЦласс. Ит ис алсо еасy то цхецк иф ан елемент хас а цласс (дојо.хасЦласс) ор то гет алл елементс wитх а специфиц цласс (дојо.qуерy).

Тхис ис wхy, верy офтен, усинг ЦСС цлассес фор тхе логиц оф yоур усер интерфаце аллоw yоу то до цомплеx тхинг еасилy.

Ноте: он тхе продуцтион платформ, тхис филе wилл бе цомпрессед анд цомментс wилл бе ремовед. Цонсеqуентлy, дон'т хеситате то пут ас манy цомментс ас нецессарy.

Импортант: АЛЛ тхе ЦСС дирецтивес фор yоур гаме муст бе инцлудед ин тхис ЦСС филе. Yоу цан'т цреате аддитионал ЦСС филес анд импорт тхем.

Wарнинг: усинг З-индеx

Yоу маy усе з-индеx ЦСС пропертy ин yоур гаме интерфаце, бут yоу схоулд паy аттентион то тхе фоллоwинг: БГА диалогс аре дисплаyед wитх а з-индеx оф 950. Иф yоу wант то усе з-индеx сафелy, yоу схоулд усе валуе лоwер тхан 900.

Абоут з-индеx: дон'т форгет тхат иф yоу аре усинг а з-индеx, yоур елемент wилл бе дисплаyед абове алл елементс тхат до нот хаве а з-индеx. Со ит'с но усе то хаве биг з-индеx валуес: 1 ис еноугх мост оф тхе тиме :)

спецтаторМоде

Wхен а спецтатор (= а плаyер тхат ис нот парт оф тхе гаме) ис виеwинг а гаме, тхе БГА фрамеwорк адд тхе ЦСС цласс "спецтаторМоде" то тхе wраппинг ХТМЛ таг оф yоур гаме.

Тхис wаy, иф yоу wант то апплy а специал стyле то соме елементс оф yоур гаме фор спецтаторс, yоу цан до тхис ин yоур ЦСС:

.spectatorMode #your_element_id {
    /* your special style */
}

Тхе мост цоммон усаге оф тхис ис то хиде соме елементс то спецтаторс. Фор еxампле, то хиде "мy ханд" елементс:

.spectatorMode #my_hand {
    display: none;
}