-
Notifications
You must be signed in to change notification settings - Fork 13
Expand file tree
/
Copy pathsharedcode_sharedcode.tpl
More file actions
204 lines (185 loc) · 9.27 KB
/
sharedcode_sharedcode.tpl
File metadata and controls
204 lines (185 loc) · 9.27 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
{OVERALL_GAME_HEADER}
<!--
--------
-- BGA framework: © Gregory Isabelli <gisabelli@boardgamearena.com> & Emmanuel Colin <ecolin@boardgamearena.com>
-- SharedCode implementation : © Alena Laskavaia <laskava@gmail.com>
--
-- This code has been produced on the BGA studio platform for use on http://boardgamearena.com.
-- See http://en.boardgamearena.com/#!doc/Studio for more information.
-------
sharedcode_sharedcode.tpl
This is the HTML template of your game.
Everything you are writing in this file will be displayed in the HTML page of your game user interface,
in the "main game zone" of the screen.
You can use in this template:
_ variables, with the format {MY_VARIABLE_ELEMENT}.
_ HTML block, with the BEGIN/END format
See your "view" PHP file to check how to set variables and control blocks
Please REMOVE this comment before publishing your game on BGA
-->
<div id="mydiv">
<div id="mainboard" class="mainboard shadow">
This is fake game board.
<div id="action_space_1" class="action_space action_space_1">
<span class="splabel">Moving tokens and counters</span>
</div>
<div id="action_space_2" class="action_space action_space_2">
<span class="splabel">Playing with cards</span>
</div>
<div id="action_space_3" class="action_space action_space_3">
<span class="splabel">Something else</span>
</div>
<div id="action_space_4" class="action_space action_space_4"></div>
<div id="basket_1" class="basket basket_1"></div>
<div id="basket_2" class="basket basket_2"></div>
</div>
<div class="cardgame">
<div class="stockholder">
<h2>My Hand (Stock and DragNDrop)</h2>
<div id="hand" class="hand active_hand whiteblock location"></div>
<div id="select-stock-conatiner">
<input type="radio" checked id="radio-normal" name="select-stock" value="1" />
<label for="radio-normal">Horizontal</label>
<input type="radio" id="radio-vertical" name="select-stock" value="3" />
<label for="radio-vertical">Vertical</label>
<a href="#" class="action-button bgabutton bgabutton_blue" id="stock-refresh">refresh</a>
<label for="h-overlap">horizontal_overlap%<input type="text" id="h-overlap" name="h-overlap" size=3 value="0" /></label>
<label for="v-overlap">vertical_overlap %<input type="text" id="v-overlap" name="v-overlap" size=3 value="0" /></label>
<label for="item_margin">item_margin<input type="text" id="item_margin" name="item_margin" size=3 value="5" /></label>
<label>v-stock width<input type="text" id="s_width" name="s_width" size=3 value="65" /></label>
<label for="centerItems"><input type="checkbox" id="centerItems" name="centerItems"/> centerItems</label>
<label for="s_autowidth"><input type="checkbox" id="s_autowidth" name="s_autowidth" />autowith</label>
<label for="s_as_offset"><input type="checkbox" id="s_as_offset" name="s_as_offset" />use_vertical_overlap_as_offset</label>
<label><input type="checkbox" id="order_items" name="order_items" />order_items</label>
</div>
</div>
<div class="stockholder">
<h2>Play Area (Stock)</h2>
<div id="playarea" class="playarea whiteblock location"></div>
</div>
</div>
<div class="dialog">
<h2>Various BGA Framework dialogs</h2>
<a href="#" class="action-button bgabutton bgabutton_blue" id="button_askForValueDialog">askForValueDialog</a>
<a href="#" class="action-button bgabutton bgabutton_blue" id="button_askForValueDialog2">edit value</a>
<a href="#" class="action-button bgabutton bgabutton_blue" id="button_multipleChoiceDialog">multipleChoiceDialog</a>
</div>
<div class="funcontrols">
<h2>Flip Cards and Roll Dice animations</h2>
<div class="flip-container">
<div class="flipper">
<div class="front card" id="card1">
<!-- front content -->
</div>
<div class="back card" id="card1_back">
<!-- back content -->
</div>
</div>
</div>
<div>
<input type="radio" checked id="radio-front" name="select-face" /> <input type="radio" id="radio-left" name="select-face" />
<input type="radio" id="radio-right" name="select-face" /> <input type="radio" id="radio-top" name="select-face" />
<input type="radio" id="radio-bottom" name="select-face" /> <input type="radio" id="radio-back" name="select-face" />
<!-- separator -->
<div id="sep" class="separator" style="height: 40px">Click on radio buttons</div>
<div class="cube-scene">
<div id="cube1" class="cube shape">
<div class="cube-face cube-face-front"></div>
<div class="cube-face cube-face-back"></div>
<div class="cube-face cube-face-left"></div>
<div class="cube-face cube-face-right"></div>
<div class="cube-face cube-face-top"></div>
<div class="cube-face cube-face-bottom"></div>
</div>
<div class="shape cylinder-1 cyl-1">
<div class="face bm">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.125)"></div>
</div>
<div class="face tp">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.125)"></div>
</div>
<div class="face side s0">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.07)"></div>
</div>
<div class="face side s1">
<div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.016)"></div>
</div>
<div class="face side s2">
<div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.016)"></div>
</div>
<div class="face side s3">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.125)"></div>
</div>
<div class="face side s4">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.184)"></div>
</div>
<div class="face side s5">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.3)"></div>
</div>
<div class="face side s6">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.42)"></div>
</div>
<div class="face side s7">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.53)"></div>
</div>
<div class="face side s8">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.616)"></div>
</div>
<div class="face side s9">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.616)"></div>
</div>
<div class="face side s10">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.125)"></div>
</div>
<div class="face side s11">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.416)"></div>
</div>
<div class="face side s12">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.298)"></div>
</div>
<div class="face side s13">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.18)"></div>
</div>
</div>
</div>
</div>
</div>
<div class="scrollmappanel">
<h2>Scroll Map Area</h2>
<div id="map_container" class="map_container">
<div id="map_scrollable" class="map_scrollable map_scrollable_layer map_layer"></div>
<div id="map_surface" class="map_surface map_layer"></div>
<div id="map_scrollable_oversurface" class="map_scrollable_oversurface map_scrollable_layer map_layer"></div>
<div class="movetop movearrow"></div>
<div class="movedown movearrow"></div>
<div class="moveleft movearrow"></div>
<div class="moveright movearrow"></div>
</div>
</div>
<div class="flexbox">
<h2>Flexbox Animation (No stock)</h2>
<div id="flex1" class="tableau cards-flexbox location_x">
<div id="card_x_1" class="purple card card_x"></div>
<div id="card_x_2" class="red card card_x"></div>
<div id="card_x_3" class="green card card_x"></div>
</div>
<div id="flex2" class="playzone cards-flexbox location_x">
<div id="card_x_4" class="blue card card_x"></div>
</div>
<h3>Absolute positioning zone</h3>
<div id="abs1" class="playzone abszone location_x">
<div id="card_x_5" class="gray card card_x selected" style="position: absolute; top: 50px; left: 50px"></div>
</div>
<div id="abs2" class="playzone abszone location_x"></div>
</div>
</div>
<script type="text/javascript">
// Javascript HTML templates
var jstpl_resource_counter =
'<div class="mini_board_item"><div id="${type}_${color}_${id}_div" class="${type} ${type}_${color}"></div><span id="${type}_${color}_${id}">0</span></div>';
var jstpl_resource = '<div class="${type} ${type}_${color}" id="${type}_${color}_${id}"></div>';
var jstpl_resource_log = '<div class="${type} ${type}_${color} logitem" id="${type}_${color}_${id}"></div>';
var jstpl_player_board = '<div class="boardblock mini_board mini_board_${id} mini_board_color_${color}" id="mini_board_${id}"></div>';
var jstpl_token = '<div class="${classes} ${id} token" id="${id}"></div>';
</script>
{OVERALL_GAME_FOOTER}