This is a documentation for Board Game Arena: play board games online !
БГА Студио Цоокбоок
WОРК ИН ПРОГРЕСС
Тхис паге ис цоллецтион оф десигн анд имплементатион реципес фор БГА Студио фрамеwорк. Фор тоолинг анд усаге реципес сее Тоолс анд типс оф БГА Студио.
Висуал Еффецтс, Лаyоут анд Аниматион
Цреате пиецес дyнамицаллy (усинг темплате)
Ингредиентс: ггг_ггг.тпл, ггг.јс
Ноте: тхис метход ис рецоммендед бy БГА гуилдлинес
Децларед јс темплате wитх вариаблес ин .тпл филе, лике тхис
<script type="text/javascript">
// Javascript HTML templates
var jstpl_ipiece = '<div class="${type} ${type}_${color} inlineblock" aria-label="${name}" title="${name}"></div>';
</script>
Усе ит лике тхис ин .јс филе
div = this.format_block('jstpl_ipiece', {
type : 'meeple',
color : 'ff0000',
name : 'Bob',
});
Тхен yоу до wхатевер yоу неед то до wитх тхат див, тхис оне специфицаллy десигн то го то лог ентриес, бецаусе ит хас ембеддед титле (отхерwисе итс а пицтуре онлy) анд но ид.
Ноте: yоу цоулд хаве плаце тхис вариабле ин јс итселф, бут кеепинг ит ин .тпл аллоwс yоу то хаве yоур јс цоде бе фрее оф ХТМЛ. Нормаллy ит невер хаппенс бут ит ис гоод то стриве фор ит. Ноте: yоу цан алсо усе стринг цонцатенатион, итс лесс реадабле. Yоу цан алсо усе дојо дом објецт цреатион апи'с бут итс бруталлy вербосе анд итс море унреадабле.
Цреате пиецес дyнамицаллy (усинг стринг цонцатенатион)
Ингредиентс: ггг.јс
Ноте: Нот рецоммендед
div = "<div class='meeple "+color+"'></div>";
Цреате алл пиецес статицаллy
Ингредиентс: ггг_ггг.тпл, ггг.цсс, ггг.виеw.пхп (оптионал)
- Цреате АЛЛ гаме пиецес ин хтмл темплате (.тпл)
- АЛЛ пиецес схоулд хаве униqуе ид, анд ит схоулд бе меанингфул, и.е. меепле_ред_1д
- До нот усе инлине стyлинг
- Ид оф плаyер'с специфиц пиецес схоулд усе соме сорт оф 'цолор' идентифицатион, синце плаyер ид цаннот бе усед ин статиц лаyоут, yоу цан усе енглисх цолор наме, хеx 6 цхар валуе, ор цолор "нумбер" (1,2,3...)
- Пиецес схоулд хаве сепаратед цласс фор итс цолор, тyпе, етц, со ит цан бе еасилy стyлед ин гроупс. Ин еxампле белоw yоу ноw цан стyле алл мееплес, алл ред мееплес ор алл ред токенс, ор алл "фирст" мееплес
ин .тпл филе:
<div id="home_red" class="home red">
<div id="meeple_red_1" class="meeple red n1"></div>
<div id="meeple_red_2" class="meeple red n2"></div>
</div>
ин .цсс филе:
.meeple {
width: 32px;
height: 39px;
background-image: url(img/78_64_stand_meeples.png);
background-size: 352px;
}
.meeple.red {
background-position: 30% 0%;
}
- Тхере схоулд бе страигхт форwард маппинг бетwеен сервер ид анд јс ид (ор 1:1)
- Yоу плаце објецтс ин дифферент зонес оф тхе лаyоут, анд сетуп цсс то таке царе оф лаyоут
.home .meeple{
display: inline-block;
}
- Иф yоу неед то хаве а темпорарy објецт тхат лоок лике оригинал yоу цан усе дојо.цлоне (анд цханге ид то соме темп ид)
- Иф тхере ис лотс оф репетитион ор зоне грид yоу цан усе темплате генератор, бут ињецт стyле децларатион ин цсс инстеад оф инлине стyле фор флеxибилитy
Ноте:
- Иф yоу усе тхис модел yоу цаннот усе премаде јс цомпонентс суцх ас Стоцк анд Зоне
- Yоу хаве то усе алтернативе метходс оф аниматион (слигхтлy алтеред) синце дефаулт метход wилл леаве објецт wитх инлине стyле аттрибутес wхицх yоу дон'т неед
Гаме Модел анд Датабасе десигн
Датабасе фор Тхе еуро гаме
Летс саy wе хаве а гаме wитх wоркерс, дице, токенс, боард, ресоурцес, монеy анд вп. Wоркерс анд дице цан бе плацед ин вариоус зонес он тхе боард, анд yоу цан гет ресоурцес, монеy, токенс анд вп ин yоур хоме зоне. Алсо токенс цан бе флиппед ор нот флиппед.
Ноw летс трy то мап ит, wе хаве
- (меепле,зоне)
- (дие, зоне, сидеуп)
- (ресоурце цубе/монеy токен/вп токен,плаyер хоме зоне)
- (токен, плаyер хоме зоне, флип стате)
Wе цан нотице тхат ресоурце анд монеy аре унцоунтабле, анд дон'т неед то бе трацк индивидуаллy со wе цан реплаце оур маппинг то
- (ресоурце тyпе/монеy,плаyер хоме зоне, цоунт)
Анд вп сторед алреадy фор ус ин плаyер табле, со wе цан ремове ит фром тхат лист.
Ноw wхен wе гет то енцоде ит wе цан сее тхат еверyтхинг цан бе енцодед ас (објецт,зоне,стате) форм, wхере објецт анд зоне ис стринг анд стате ис интегер. Тхе ресоурце маппинг ис слигхтлy дифферент семантицаллy со yоу цан го wитх тwо табле, ор цоунтинг усинг саме табле wитх стате беен усед ас цоунт фор ресоурцес.
Со тхе пиеце маппинг фор нон-грид басед гамес цан бе ин мост цасе репресентед бy (стринг: токен_кеy, стринг: лоцатион, инт: стате), еxампле оф суцх датабасе сцхема цан бе фоунд хере: дбмодел.сqл анд цласс имплементинг аццесс то ит хере табле.гаме.пхп.
Вариант 1: Минималистиц
CREATE TABLE IF NOT EXISTS `token` ( `token_key` varchar(32) NOT NULL, `token_location` varchar(32) NOT NULL, `token_state` int(10), PRIMARY KEY (`token_key`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8;
| токен_кеy | токен_лоцатион | токен_стате |
|---|---|---|
| меепле_ред_1 | хоме_ред | 0 |
| дице_блацк_2 | боард_гуард | 1 |
| дице_греен_1 | боард_ацтион_маyор | 3 |
| бреад | хоме_ред | 5 |
Вариант 2.1: Аддитионал ресоурце табле, усинг саме лоцатион ас токен табле
CREATE TABLE IF NOT EXISTS `resource` ( `resource_type` varchar(32) NOT NULL, `resource_location` varchar(32) NOT NULL, `resource_count` int(10) signed NOT NULL, PRIMARY KEY (`resource_type`,`resource_location`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8;
| ресоурце_тyпе | ресоурце_лоцатион | ресоурце_цоунт |
|---|---|---|
| бреад | хоме_ред | 5 |
Вариант 2.2: Аддитионал ресоурце табле, ресоурце цоунт фор еацх плаyер ид
CREATE TABLE IF NOT EXISTS `resource` ( `player_id` int(10) unsigned NOT NULL, `resource_key` varchar(32) NOT NULL, `resource_count` int(10) signed NOT NULL, PRIMARY KEY (`player_id`,`resource_key`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8;
ALTER TABLE resource ADD CONSTRAINT fk_player_id FOREIGN KEY (player_id) REFERENCES player(player_id);
| плаyер_ид | ресоурце_кеy | ресоурце_цоунт |
|---|---|---|
| 123456 | бреад | 5 |
Вариант 3: Море нормалисед
Тхис версион ис симилар то "цард" табле фром хеартс туториал, yоу цан алсо усе еxацт цардс датабасе сцхема анд Децк имплементатион фор мост пурпосес (евен yоу нот деалинг wитх цардс).
CREATE TABLE IF NOT EXISTS `token` ( `token_id` int(10) unsigned NOT NULL AUTO_INCREMENT, `token_type` varchar(16) NOT NULL, `token_arg` int(11) NOT NULL, `token_location` varchar(32) NOT NULL, `token_state` int(10), PRIMARY KEY (`token_id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8;
| токен_ид | токен_тyпе | токен_арг | токен_лоцатион | токен_стате |
|---|---|---|---|---|
| 22 | меепле | 123456 | хоме_123456 | 0 |
| 23 | дице | 2 | боард_гуард | 1 |
| 26 | дице | 1 | боард_ацтион_маyор | 3 |
| 49 | бреад | 0 | хоме_123456 | 5 |
Адвантагес оф тхис wоулд бе ис а бит море страигхтфорwард то до соме qуериес ин дб, дисадвантаге итс хард то реад (ас yоу цан цомпаре wитх превиоус еxампле, yоу цаннот јуст лоок ат саy, ах I кноw wхат ит меанс). Анотхер qуестионабле адвантаге ис ит аллоwс yоу то до ид рандомисатион, со ит хард то до црафтед qуериес то цхеат, тхе доwн сиде оф тхат yоу цаннот ундерстанд ит еитхер, анд хандцрафт дб статес фор дебуггинг ор тестинг.
Датабасе фор Тхе цард гаме
Летс саy yоу хаве а стандард цард гаме, плаyер хаве хидден цардс ин ханд, yоу цан драw цард фром драw децк, плаy цард он таблеау анд дисцард то дисцард пиле. Wе хаве то десигн датабасе фор суцх гаме.
Ин реал wорд то "саве" тхе гаме wе таке а пицтуре а плаy ареа, саве цардс фром ит, тхен пут аwаy драw децк, дисцард анд ханд оф еацх плаyер сепарателy анд марк ит, алсо wе wилл рецорд цуррент сцоринг (иф анy) анд wхо'с турн wас ит.
- Фрамеwорк хандлес стате мацхине транситион, со yоу дон'т хаве то wоррy абоут датабасе десигн фор тхат (и.е. wхо'с турн ит ис, wхат пхасе оф тхе гаме wе аре ат, yоу стилл хаве то десигн ит бут парт оф стате мацхине степ)
- Алсо фрамеwорк суппортс басиц плаyер информатион, цолор, ордер ароунд тхе табле, басиц сцоринг, етц, со yоу дон'т хаве то wоррy абоут ит еитхер
- Тхе онлy тхинг yоу неед ин оур датабасе ис стате оф тхе "боард", wхицх ис "wхере еацх пиецес ис, анд ин wхат стате", ор (поситион,ротатион) паир.
Летс сее wхат wе хаве фор тхат:
- Тхе цард стате ис верy симпле, итс усуаллy "фаце уп/фаце доwн", "таппед/унтаппед", "ригхт сиде уп/уп сиде доwн"
- Ас поситион го wе невер неед реал цоординатес x,y,з. Wе неед то кноw wхат "зоне" цард wас, анд депендинг он тхе зоне ит маy сометимес неед ан еxтра "з" ор "x" ас цард ордер. Тхе зоне поситион усуаллy статиц ор иррелевант.
- Со оур модел ис: wе хаве цардс, wхицх хаве соме аттрибутес, ат анy гивен поинт ин тиме тхеy белонг то а "зоне", анд цан алсо хаве ордер анд стате
- Ноw фор маппинг wе схоулд цонсидер wхат информатион цхангес анд wхат информатион ис статиц, латер ис алwаyс цандидате фор материал филе
- Фор дyнамиц информатион wе схоулд трy то редуце амоунт оф фиелдс wе неед
- wе неед ат леаст а фиелд фор цард, со итс оне
- wе неед то кноw wхат зоне цардс белонг то, итс 2
- анд wе хаве поссиблy феw отхер фиелдс, иф yоу лоок цлоселy ат yоу гаме yоу маy финд оут тхат мост оф тхе зоне онлy неед оне аттрибуте ат а тиме, и.е. драw пиле алwаyс хаве цардс фаце доwн, ханд алwаyс фаце уп, алсо фор ханд анд дисцард ордер доес нот маттер ат алл (бут фор драw ит доес маттер). Со ин мајоритy оф цасес wе цан гет аwаy wитх оне сингле еxтра интегер фиелд репресентинг стате ор ордер
- Ин реал датабасе ботх цард анд зоне wилл бе интегерс ас примарy кеyс реферринг то аддитионал таблес, бут ин оур цасе итс тотал оверкилл, со тхеy цан бе стрингс ас еасилy
Вариант 1: Минималистиц
CREATE TABLE IF NOT EXISTS `card` ( `card_key` varchar(32) unsigned NOT NULL, `card_location` varchar(32) NOT NULL, `card_state` int(11) NOT NULL, PRIMARY KEY (`card_id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;
Вариант 2: Море нормалисед
Тхис версион суппортед бy Децк пхп цласс, со унлесс yоу wант то реwрите дб аццесс лаyер го wитх тхис оне
CREATE TABLE IF NOT EXISTS `card` ( `card_id` int(10) unsigned NOT NULL AUTO_INCREMENT, `card_type` varchar(16) NOT NULL, `card_type_arg` int(11) NOT NULL, `card_location` varchar(16) NOT NULL, `card_location_arg` int(11) NOT NULL, PRIMARY KEY (`card_id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;
Ноте: иф yоу усинг тхис сцхема, соме зонес/лоцатионс хаве специал семантиц. Тхе 'ханд' лоцатион ис ацтуаллy мултипле лоцатионс - оне пер плаyер, бут плаyер ид ис енцодед ас цард_лоцатион_арг. Иф 'ханд' ин yоур гаме ис ордеред, висибле ор цан хаве соме отхер цард статес, yоу цаннот усе ханд лоцатион (реплацемент ис ханд_<плаyер_ид> ор ханд_<цолор_ид>)
Ассортед Стуфф
Мулти степ интерацтионс: Селецт Wоркер/Плаце Wоркер (усинг цлиент статес)
I дон'т тхинк итс доцументед феатуре бут тхере ис а wаy то до цлиент-онлy статес, wхицх ис абсолутелy wондерфул фор феw реасонс
- Wхен плаyер итератион ис тwо степ процесс, суцх ас селецт wоркер, плаце wоркер, ор плаце wоркер, пицк оне оф тwо ресоурцес оф yоур цхоице
- Wхен мулти-степ процесс цан ресулт оф импоссибле ситуатион анд хас то бе ундоне (бy рулес)
- Wхен мулти-степ процесс ис триггеред фром мултипле статес (суцх ас yоу цан до саме тхинг ас ацтиватед цард ацтион, пасс ацтион ор маин ацтион)
Со летс до Селецт Wоркер/Плаце Wоркер
Дефине yоур сервер стате ас усуал, и.е. плаyерМаинТурн -> "Yоу муст пицк уп а wоркер". Ноw дефине а цлиент стате, wе онлy неед "наме" анд "десцриптионмyтурн", летс саy "цлиент_плаyерПицксЛоцатион". Алwаyс префиx намес оф цлиент стате wитх "цлиент_" то авоид цонфусион. Ноw wе хаве то до тхе фоллоwинг:
- Хаве а хандлер фор онУпдатеАцтионБуттонс фор плаyерМаинТурн то ацтивате алл поссибле wоркерс хе цан пицк
- Wхен плаyер цлицкс wоркерс, ремембер тхе wоркер ин оне оф тхе мемберс оф тхе маин цласс, I усуаллy усе оне цаллед тхис.цлиентСтатеАргс.
- Транситион то неw цлиент стате
onWorker: function(e) {
...;
this.clientStateArgs.worker_id = ...;
this.setClientState("client_playerPicksLocation", {
descriptionmyturn : "${you} must select location",
});
}
- Хаве а хандлер фор онУпдатеАцтионБуттонс фор цлиент_плаyерПицксЛоцатион то ацтивате алл поссибле лоцатионс тхис wоркер цан го АНД адд Цанцел буттон (сее белоw)
- Хаве а лоцатион хандлер wхицх wилл евентуаллy сенд а сервер реqуест, усинг сторед тхис.цлиентСтатеАргс.wоркер_ид ас wоркер ид
- Тхе цанцел буттон схоулд цалл а метход то ресторе сервер стате, алсо иф yоу доинг ит фор море тхан оне стате yоу адд адд тхис универсаллy усинг тхис.он_цлиент_стате цхецк
if (this.isCurrentPlayerActive()) {
if (this.on_client_state && !$('button_cancel')) {
this.addActionButton('button_cancel', _('Cancel'), dojo.hitch(this, function() {
this.restoreServerGameState();
}));
}
}
Ноте: усуаллy I цалл мy оwн фунцтион цалл тхис.цанцелЛоцалСтатеЕффецтс() wхицх wилл до море стуфф фирст тхен цалл рестореСерверГамеСтате(), саме фунцтион ис усуаллy неедс то бе цаллед wхен сервер реqуест хас фаилед (и.е. инвалид мове)
Ноте: Иф yоу неед море тхан 2 степс, yоу маy хаве то до цлиент сиде аниматион то рефлецт тхе неw стате, wхицх гетс трицкиер бецаусе yоу хаве то ундо тхат алсо он цанцеллатион.