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
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
|
main { background-color: slategray; }
aside { background-color: gainsboro; }
header { background-color: silver; }
.card_info { background-color: silver; }
body.Tripolitania header.your_turn { background-color: salmon; }
body.United_States header.your_turn { background-color: skyblue; }
#role_United_States .role_name { background-color: skyblue; }
#role_Tripolitania .role_name { background-color: salmon; }
#log { background-color: #eee; }
#log .st { background-color: #777; color: white; font-weight: bold; padding:3px; text-align: center; }
#log .ss { background-color: #ccc; color: #444; font-weight: bold; padding:3px; text-align: center; }
#log .end { font-style: italic; }
#log .us_tip { color: blue; text-decoration: dotted underline; cursor: help; }
#log .tr_tip { color: #d00; text-decoration: dotted underline; cursor: help; }
.hand {
min-height: 300px;
justify-content: left;
max-width: 2476px;
margin: 15px auto;
}
.hand_separator {
border-bottom: 2px dotted gainsboro;
}
body.Observer #hand_cards { display: none; }
body.Observer .hand_separator { display: none; }
.card {
width: 250px;
height: 350px;
border-radius: 12px;
display: none;
box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
}
.card.show {
display: block;
}
.card.blank {
background-color: dimgray;
transform: none !important;
}
.card_info {
padding: 10px 0;
}
.card_info .card {
margin: 0 auto;
width: 125px;
height: 175px;
border-radius: 6px;
}
#tr_info, #us_info {
white-space: pre-line;
font-family: "Source Serif SmText";
font-size: 12px;
text-align: center;
padding: 4px;
}
#tooltip.card {
position: fixed;
z-index: 100;
right: 240px;
top: 60px;
}
#tooltip.show {
display: block;
}
/* MAP */
#mapwrap {
box-shadow: 0px 0px 15px rgba(0,0,0,0.8);
width: 2476px;
height: 801px;
}
#map {
display: block;
width: 2476px;
height: 801px;
background-color: black;
}
svg {
position: absolute;
}
svg image {
pointer-events: none;
}
svg circle, .piece {
transition-property: x, y, cx, cy, top, left;
transition-duration: 1s;
transition-timing-function: ease;
}
.piece {
position: absolute;
pointer-events: none;
background-size: cover;
background-repeat: no-repeat;
filter: drop-shadow(1px 1px 4px rgba(0,0,0,0.5));
}
.piece.highlight {
pointer-events: all;
cursor: pointer;
filter: brightness(150%) drop-shadow(0 0 3px white);
}
.piece.damaged {
filter: brightness(60%) drop-shadow(1px 1px 4px rgba(0,0,0,0.5));
}
.piece.us_frigate { width: 42px; height: 29px; background-image: url("icons/us_frigate.svg"); }
.piece.se_frigate { width: 42px; height: 29px; background-image: url("icons/se_frigate.svg"); }
.piece.tr_frigate { width: 42px; height: 29px; background-image: url("icons/tr_frigate.svg"); }
.piece.us_gunboat { width: 33px; height: 27px; background-image: url("icons/us_gunboat.svg"); }
.piece.tr_corsair { width: 33px; height: 27px; background-image: url("icons/tr_corsair.svg"); }
.piece.al_corsair { width: 33px; height: 27px; background-image: url("icons/al_corsair.svg"); }
.piece.us_marine { width: 21px; height: 21px; background-image: url("icons/us_marine.svg"); }
.piece.ar_infantry { width: 21px; height: 21px; background-image: url("icons/ar_infantry.svg"); }
.piece.tr_infantry { width: 21px; height: 21px; background-image: url("icons/tr_infantry.svg"); }
.piece.gold { width: 40px; height: 40px; background-image: url("icons/gold.png"); }
.piece.marker { width: 50px; height: 50px; border-radius: 50%; background-color: #444; border: 2px solid black; }
.harbor {
fill-opacity: 0;
stroke: white;
stroke-width: 4;
opacity: 0;
}
.patrol_zone {
fill-opacity: 0;
stroke: white;
stroke-width: 4;
opacity: 0;
}
.patrol_zone.highlight, .harbor.highlight {
opacity: 1;
cursor: pointer;
}
#map .harbor.where {
opacity: 1;
fill-opacity: 0.5;
fill: gold;
stroke: gold;
}
#map .patrol_zone.where {
opacity: 1;
fill-opacity: 0.5;
fill: gold;
stroke: white;
}
/* CARD ACTION POPUP MENU */
#popup {
position: fixed;
user-select: none;
background-color: gainsboro;
left: 10px;
top: 100px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.3);
z-index: 200;
min-width: 20ex;
white-space: nowrap;
display: none;
}
#popup div { padding: 3pt 8pt; color: gray; display: none; }
#popup div.enabled { color: black; display: block; }
#popup div.enabled:hover { background-color: teal; color: white; }
#popup div.always { display: block; }
body.Tripolitania #popup div.tr_always { display: block; }
body.United_States #popup div.us_always { display: block; }
/* CARD IMAGES */
.card {
text-align: center;
color: white;
font-weight: bold;
font-size: 25px;
line-height: 40px;
}
.tr_card_1{background-image:url(cards.1x/tr_card_1.jpg)}
.tr_card_2{background-image:url(cards.1x/tr_card_2.jpg)}
.tr_card_3{background-image:url(cards.1x/tr_card_3.jpg)}
.tr_card_4{background-image:url(cards.1x/tr_card_4.jpg)}
.tr_card_5{background-image:url(cards.1x/tr_card_5.jpg)}
.tr_card_6{background-image:url(cards.1x/tr_card_5.jpg)}
.tr_card_7{background-image:url(cards.1x/tr_card_7.jpg)}
.tr_card_8{background-image:url(cards.1x/tr_card_7.jpg)}
.tr_card_9{background-image:url(cards.1x/tr_card_9.jpg)}
.tr_card_10{background-image:url(cards.1x/tr_card_9.jpg)}
.tr_card_11{background-image:url(cards.1x/tr_card_11.jpg)}
.tr_card_12{background-image:url(cards.1x/tr_card_12.jpg)}
.tr_card_13{background-image:url(cards.1x/tr_card_13.jpg)}
.tr_card_14{background-image:url(cards.1x/tr_card_14.jpg)}
.tr_card_15{background-image:url(cards.1x/tr_card_15.jpg)}
.tr_card_16{background-image:url(cards.1x/tr_card_16.jpg)}
.tr_card_17{background-image:url(cards.1x/tr_card_17.jpg)}
.tr_card_18{background-image:url(cards.1x/tr_card_18.jpg)}
.tr_card_19{background-image:url(cards.1x/tr_card_19.jpg)}
.tr_card_20{background-image:url(cards.1x/tr_card_20.jpg)}
.tr_card_21{background-image:url(cards.1x/tr_card_21.jpg)}
.tr_card_22{background-image:url(cards.1x/tr_card_22.jpg)}
.tr_card_23{background-image:url(cards.1x/tr_card_23.jpg)}
.tr_card_24{background-image:url(cards.1x/tr_card_24.jpg)}
.tr_card_25{background-image:url(cards.1x/tr_card_25.jpg)}
.tr_card_26{background-image:url(cards.1x/tr_card_26.jpg)}
.tr_card_27{background-image:url(cards.1x/tr_card_27.jpg)}
.tr_card_28{background-image:url(cards.1x/tr_card_28.jpg)}
.tr_card_29{background-image:url(cards.1x/tr_card_29.jpg)}
.tr_card_30{background-image:url(cards.1x/tr_card_30.jpg)}
.tr_card_back{background-image:url(cards.1x/tr_card_31.jpg)}
.us_card_1{background-image:url(cards.1x/us_card_1.jpg)}
.us_card_2{background-image:url(cards.1x/us_card_2.jpg)}
.us_card_3{background-image:url(cards.1x/us_card_3.jpg)}
.us_card_4{background-image:url(cards.1x/us_card_4.jpg)}
.us_card_5{background-image:url(cards.1x/us_card_5.jpg)}
.us_card_6{background-image:url(cards.1x/us_card_6.jpg)}
.us_card_7{background-image:url(cards.1x/us_card_6.jpg)}
.us_card_8{background-image:url(cards.1x/us_card_6.jpg)}
.us_card_9{background-image:url(cards.1x/us_card_6.jpg)}
.us_card_10{background-image:url(cards.1x/us_card_10.jpg)}
.us_card_11{background-image:url(cards.1x/us_card_11.jpg)}
.us_card_12{background-image:url(cards.1x/us_card_12.jpg)}
.us_card_13{background-image:url(cards.1x/us_card_13.jpg)}
.us_card_14{background-image:url(cards.1x/us_card_14.jpg)}
.us_card_15{background-image:url(cards.1x/us_card_15.jpg)}
.us_card_16{background-image:url(cards.1x/us_card_16.jpg)}
.us_card_17{background-image:url(cards.1x/us_card_17.jpg)}
.us_card_18{background-image:url(cards.1x/us_card_18.jpg)}
.us_card_19{background-image:url(cards.1x/us_card_19.jpg)}
.us_card_20{background-image:url(cards.1x/us_card_20.jpg)}
.us_card_21{background-image:url(cards.1x/us_card_21.jpg)}
.us_card_22{background-image:url(cards.1x/us_card_22.jpg)}
.us_card_23{background-image:url(cards.1x/us_card_23.jpg)}
.us_card_24{background-image:url(cards.1x/us_card_24.jpg)}
.us_card_25{background-image:url(cards.1x/us_card_25.jpg)}
.us_card_26{background-image:url(cards.1x/us_card_26.jpg)}
.us_card_27{background-image:url(cards.1x/us_card_27.jpg)}
.us_card_back{background-image:url(cards.1x/us_card_28.jpg)}
@media (min-resolution: 97dpi) {
.tr_card_1{background-image:url(cards.2x/tr_card_1.jpg)}
.tr_card_2{background-image:url(cards.2x/tr_card_2.jpg)}
.tr_card_3{background-image:url(cards.2x/tr_card_3.jpg)}
.tr_card_4{background-image:url(cards.2x/tr_card_4.jpg)}
.tr_card_5{background-image:url(cards.2x/tr_card_5.jpg)}
.tr_card_6{background-image:url(cards.2x/tr_card_5.jpg)}
.tr_card_7{background-image:url(cards.2x/tr_card_7.jpg)}
.tr_card_8{background-image:url(cards.2x/tr_card_7.jpg)}
.tr_card_9{background-image:url(cards.2x/tr_card_9.jpg)}
.tr_card_10{background-image:url(cards.2x/tr_card_9.jpg)}
.tr_card_11{background-image:url(cards.2x/tr_card_11.jpg)}
.tr_card_12{background-image:url(cards.2x/tr_card_12.jpg)}
.tr_card_13{background-image:url(cards.2x/tr_card_13.jpg)}
.tr_card_14{background-image:url(cards.2x/tr_card_14.jpg)}
.tr_card_15{background-image:url(cards.2x/tr_card_15.jpg)}
.tr_card_16{background-image:url(cards.2x/tr_card_16.jpg)}
.tr_card_17{background-image:url(cards.2x/tr_card_17.jpg)}
.tr_card_18{background-image:url(cards.2x/tr_card_18.jpg)}
.tr_card_19{background-image:url(cards.2x/tr_card_19.jpg)}
.tr_card_20{background-image:url(cards.2x/tr_card_20.jpg)}
.tr_card_21{background-image:url(cards.2x/tr_card_21.jpg)}
.tr_card_22{background-image:url(cards.2x/tr_card_22.jpg)}
.tr_card_23{background-image:url(cards.2x/tr_card_23.jpg)}
.tr_card_24{background-image:url(cards.2x/tr_card_24.jpg)}
.tr_card_25{background-image:url(cards.2x/tr_card_25.jpg)}
.tr_card_26{background-image:url(cards.2x/tr_card_26.jpg)}
.tr_card_27{background-image:url(cards.2x/tr_card_27.jpg)}
.tr_card_28{background-image:url(cards.2x/tr_card_28.jpg)}
.tr_card_29{background-image:url(cards.2x/tr_card_29.jpg)}
.tr_card_30{background-image:url(cards.2x/tr_card_30.jpg)}
.tr_card_back{background-image:url(cards.2x/tr_card_31.jpg)}
.us_card_1{background-image:url(cards.2x/us_card_1.jpg)}
.us_card_2{background-image:url(cards.2x/us_card_2.jpg)}
.us_card_3{background-image:url(cards.2x/us_card_3.jpg)}
.us_card_4{background-image:url(cards.2x/us_card_4.jpg)}
.us_card_5{background-image:url(cards.2x/us_card_5.jpg)}
.us_card_6{background-image:url(cards.2x/us_card_6.jpg)}
.us_card_7{background-image:url(cards.2x/us_card_6.jpg)}
.us_card_8{background-image:url(cards.2x/us_card_6.jpg)}
.us_card_9{background-image:url(cards.2x/us_card_6.jpg)}
.us_card_10{background-image:url(cards.2x/us_card_10.jpg)}
.us_card_11{background-image:url(cards.2x/us_card_11.jpg)}
.us_card_12{background-image:url(cards.2x/us_card_12.jpg)}
.us_card_13{background-image:url(cards.2x/us_card_13.jpg)}
.us_card_14{background-image:url(cards.2x/us_card_14.jpg)}
.us_card_15{background-image:url(cards.2x/us_card_15.jpg)}
.us_card_16{background-image:url(cards.2x/us_card_16.jpg)}
.us_card_17{background-image:url(cards.2x/us_card_17.jpg)}
.us_card_18{background-image:url(cards.2x/us_card_18.jpg)}
.us_card_19{background-image:url(cards.2x/us_card_19.jpg)}
.us_card_20{background-image:url(cards.2x/us_card_20.jpg)}
.us_card_21{background-image:url(cards.2x/us_card_21.jpg)}
.us_card_22{background-image:url(cards.2x/us_card_22.jpg)}
.us_card_23{background-image:url(cards.2x/us_card_23.jpg)}
.us_card_24{background-image:url(cards.2x/us_card_24.jpg)}
.us_card_25{background-image:url(cards.2x/us_card_25.jpg)}
.us_card_26{background-image:url(cards.2x/us_card_26.jpg)}
.us_card_27{background-image:url(cards.2x/us_card_27.jpg)}
.us_card_back{background-image:url(cards.2x/us_card_28.jpg)}
}
|
