-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathvast.html
383 lines (314 loc) · 15.8 KB
/
vast.html
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
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
<html>
<head>
<title>Vast Player Rules</title>
<script type="text/javascript" src="./scripts/jquery-3.7.1.min.js"></script>
<script type="text/javascript" src="./scripts/chosen/chosen.jquery.js"></script>
<link rel="stylesheet" href="./scripts/chosen/chosen.css"/>
<style type="text/css">
#controls {
background-color: #CCC;
width: 400px;
padding: 5px;
display: inline-block;
}
#role_select { width: 400px; }
#role_select_chosen.chosen-container-multi .chosen-choices { height: 60px; }
/* https://github.com/harvesthq/chosen/issues/2611 ~~~ implemented this */
.disp-n { display: none; }
.chosen-choices li.search-choice:before {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0.5;
background-image: linear-gradient(#dbdbdb 20%, #a3a3a3 50%, #9c9c9c 52%, #d4d4d4 100%); /*linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);*/
}
.chosen-choices li.search-choice {
background-image: none !important;
}
.chosen-choices li.search-choice span,
.chosen-results li.active-result
{ color: black; font-weight: bold; } /* make the text darker to make sure its readable */
/* Create an alternative highlight mechanism */
.chosen-container .chosen-results li.highlight_alt {
box-shadow: inset 0px 0px 0px 4px blue;
}
/* The selected role boxes */
.chosen-container-multi .chosen-choices li.search-choice.knight { background-color: yellow; } /* why is this broken? */
.chosen-container-multi .chosen-choices li.search-choice.goblins { background-color: lightgreen; }
.chosen-container-multi .chosen-choices li.search-choice.vile_ghoul { background-color: darkseagreen; }
.chosen-container-multi .chosen-choices li.search-choice.dragon { background-color: red; }
.chosen-container-multi .chosen-choices li.search-choice.cave { background-color: mediumorchid; }
.chosen-container-multi .chosen-choices li.search-choice.cave_ghost { background-color: mediumslateblue; }
/*.chosen-container-multi .chosen-choices li.search-choice.thief { background-color: gray; } the default is fine */
.chosen-container-multi .chosen-choices li.search-choice.ghoul { background-color: orange; }
.chosen-container-multi .chosen-choices li.search-choice.ghost { background-color: skyblue; }
.chosen-container-multi .chosen-choices li.search-choice.nightmare_unicorn { background-color: chocolate; }
.chosen-container-multi .chosen-choices li.search-choice.shadow_unicorn { background-color: black; }
.chosen-container-multi .chosen-choices li.search-choice.shadow_unicorn span { color: white !important; }
/* The dropdown list */
.chosen-results .active-result.knight { background-color: yellow; }
.chosen-results .active-result.goblins { background-color: lightgreen; }
.chosen-results .active-result.vile_ghoul { background-color: darkseagreen; }
.chosen-results .active-result.dragon { background-color: red; }
.chosen-results .active-result.cave { background-color: mediumorchid; }
.chosen-results .active-result.cave_ghost { background-color: mediumslateblue; }
.chosen-results .active-result.thief { background-color: lightgray; }
.chosen-results .active-result.ghoul { background-color: orange; }
.chosen-results .active-result.ghost { background-color: skyblue; }
.chosen-results .active-result.nightmare_unicorn { background-color: chocolate; }
.chosen-results .active-result.shadow_unicorn { background-color: black; color: white !important; }
/* NOTE: add .chosen-with-drop to the .chosen-container to FORCE it to stay open while I click around in the DOM */
</style>
<script type="text/javascript">
function paired_role_toggle(role, state, active_roles) {
var $role_select = $('#role_select'),
role_removed = (state == 'deselected'),
role_added = (state == 'selected')
;
// TODO: use fall-through if practical
switch(role) {
case 'cave':
// when clearing cave, if ghost is still active => cave_ghost shall remain disabled
if (role_removed && active_roles.includes('ghost')) { break; }
$role_select.find('option.cave_ghost').attr('disabled', role_added);
break;
case 'ghost':
// when clearing ghost, if cave is still active => cave_ghost shall remain disabled
if (role_removed && active_roles.includes('cave')) { break; }
$role_select.find('option.cave_ghost').attr('disabled', role_added);
break;
case 'cave_ghost':
$role_select.find('option.cave, option.ghost').attr('disabled', role_added);
break;
case 'nightmare_unicorn':
$role_select.find('option.shadow_unicorn').attr('disabled', role_added);
break;
case 'shadow_unicorn':
// NOTE: cannot disable something that is also "result-selected" or it will become STUCK as selected
$role_select.find('option.nightmare_unicorn').attr('disabled', role_added);
break;
case 'goblins':
if (role_removed && active_roles.includes('ghoul')) { break; }
$role_select.find('option.vile_ghoul').attr('disabled', role_added);
break;
case 'ghoul':
if (role_removed && active_roles.includes('goblins')) { break; }
$role_select.find('option.vile_ghoul').attr('disabled', role_added);
break;
case 'vile_ghoul':
$role_select.find('option.goblins, option.ghoul').attr('disabled', role_added);
break;
}
var num_p = active_roles.length;
if (active_roles.includes('shadow_unicorn')) { num_p--; } // This is a non player role!
// --- Selectively disable if maximum number of players is reached ---
// NOTE: leave num_players calc here because we need chosen:updated to happen after any max player disables
// "knight", "goblins", "dragon", "cave", "thief", "ghoul", "ghost", "nightmare_unicorn" == 8 --- TODO: should be disallowed!!!
if (num_p == 7) {
// NOTE: cannot use max_selected_options, since we need to ALLOW 8 for shadow_unicorn
// FIXME: find the remaining enabled options
// do it the dumb way: loop over all <options>, any that are not :selected and not :disabled
// and is NOT shadow_unicorn (valid NPC option)
// add class = "max_players_reached" and disable it.
} else if (num_players == 7 && num_p < 7) {
// FIXME: if number_players then drops below 7 again, need to remove the disability
// find everything with class "max_players_reached" and remove that class + disabled = false
}
// Update the global and the UI
num_players = num_p;
$("#num_players").html(num_p);
// Force the chosen to update its options based on the current <select><option> states
$role_select.trigger("chosen:updated");
} // paired_role_toggle
// From the "Clear" button
function reset_all() {
document.location.reload();
// TODO: is there any real benefit to avoiding a full page refresh?
// deselect ALL roles
// set num_players = 0
// ??? more ???
}
function flag_helper(active_roles) {
// FIXME: I think this is where the MASSIVE conditional is supposed to be
//$.each(active_roles, function(key, clazz){
// window[clazz] = true;
//});
// TODO: use javascript string interpolation via ``
// Rather than trying to show hide sections of the page, just construct the final string and write it to the appropriate place on the page.
// Should have a "starting conditions" field && a "rules" field.
// TODO: how to handle standard rules + a few modifications?
}
// setup
window.roles = [
'Knight',
'Goblins',
'Dragon',
'Cave',
'Thief',
'Ghoul',
'Vile Ghoul',
'Ghost',
'Cave Ghost',
'Nightmare Unicorn',
'Shadow Unicorn' // REM: if 7 players already selected, this is the only remaining available option
];
window.num_players = 0;
$(document).ready(function(){
$.each(roles, function(key, value){
var class_val = value.toLowerCase().replace(' ', '_');
// create the select list items
$("#role_select").append("<option class='"+ class_val +"' value='"+ class_val +"'>"+ value +"</option>");
// also create globals for ease of reference later
window[class_val] = false;
});
var $role_select = $("#role_select");
$role_select.chosen({
hide_results_on_select: false,
disable_search: false,
highlight_class: 'highlight_alt',
}).change(function(evt, params){
//console.log(evt);
//console.log(params); // {deselected: "dragon"} or {selected: "knight"}
var active_roles = $role_select.val();
// part 1 -- disable certain alternative roles
var state = Object.keys(params)[0];
var role = Object.values(params)[0];
paired_role_toggle(role, state, active_roles);
// part 2 -- enable/disable modified rule cards
// set helper flag
window[role] = (state == 'selected');
//flag_helper(active_roles); FIXME FIXME
// re-focus the input box so that the menu stays open
// TODO: has a flicker, is there a better way?
if (state == 'deselected') { setTimeout(function(){$('.search-field').click();}, 100); }
}); // chosen.change
// Fix the height of the chosen dropdown
// .chosen-results { max-height: 300px; }
$('.chosen-results').css({"maxHeight": "300px"})
$('#reset').click(reset_all);
}); // document.ready
// Logic for choosing the various rule options based on the chosen-select value
// TODO
/*
Crowded house should automatically apply when relevant:
Players <= 4 & NO:cave
Players <= 6 & cave
What I need to do is write down a list of all possible role + varient cards
EG: flare -> knight, flare -> goblins, + Ash_Dragon, Past_Plunder -> Dragon, etc
Then figure out what rules dictate when each of those activate. (monster if-clauses)
EG: no one will have Past_Plunder if there is a thief in the game, regardless of what other rules are in play.
(NOTE: multiple players could gain the flare ability)
Thief gets Flare <<when>> thief + < 4player
Goblins get Flare <<when>> solo || goblins+cave+thief, goblins+cave, goblins+thief
Knight gets Flare <<when>> knight+goblins+cave+thief, knight+goblins+cave, knight+cave+thief, knight+cave,
Ghoul gets Flare <<when>> ?
xyz_flare
Knight gets Infestation <<when>> knight + NO:goblins (StrA if dragon, StrC if vs thief, StrB otherwise, solo ~> choose A/B/C)
infestation
Ash-Dragon Active <<when>> goblins+dragon+cave+thief, goblins+dragon+cave, goblins+dragon+thief, goblins+dragon, dragon+thief
ash_dragon
"In most of the variants Past Plunder does go to the last player" (with a few exceptions)
Past_plunder goes to last in turn-order <<when>> NO:cave + ignores/skips positions: (1)knight, (5)thief.
QUESTION: does it also skip (3)unicorn if dragon is replaced ?
Dragon gets Plunder <<when>> knight+goblins+dragon+thief, knight+goblins+dragon, knight+dragon
Goblins gets Plunder <<when>> knight+goblins, goblins+dragon
xyz_plunder
2 Sloth cubes moved <<when>> (knight+dragon+cave, knight+dragon, dragon+cave) +/- thief
Knight victory is break 5 crystals <<when>> knight + NO:dragon
Knight break 5 or 6 crystals <<when>> knight+thief
Goblins break 5 crystals <<when>> goblins + NO:knight & NO:dragon
xyz_#_crystals
automated_cave <<when>> NO:cave
cave_place_treasure_optional <<when>> cave+thief & < 4player
knight_daring_eagle_cards <<when>> solo
alone_in_the_dark <<when>> solo
nightmare_unicorn_extra_cube <<when>> if ash_dragon & NO:dragon ???
nightmare_unicorn_tile_mod <<when>> NO:cave
unicorn+dragon+ANY = ???
unicorn+thief +- cave = thief can kill unicorn instead of treasures
goal_kill_shadow_unicorn <<when>> shadow unicorn is present (how to model someone electing to change victory condition??? this also shifts other victory conditions)
ghost + (players > 3) = ghost gets past_plunder (always)
ghost + (players > 2) = ghost gets past_plunder (if included in other rules) ???
goblins+ghost = goblins break 4 crystals & ghost unlocks 5 artifacts
or goblins break 5 crystals & ghost unlocks 6 artifacts
*/
</script>
</head>
<body>
<section id="controls">
<select id="role_select" class="chosen-select" data-placeholder="Choose Roles" multiple=""></select>
<!--
- Lets use the chosen UI like Viz has for selecting roles.
- Other rules might effect these rules, so add checkboxes for those too.
- How to handle dragon vs unicorn option? Its just another option... deal with it the same as everything else
-->
<h4>Other options:</h4>
<!-- include terrain variant, or thieves guild, or difficulty levels -->
</section>
<div style="display: inline-block;">
Num Players: <span id="num_players">0</span>
<br/><button id="reset">Clear</button>
</div>
<!-- rules will be copied from wherever they are defined into this box -->
<section>
<h4>Rules:</h4>
<div id="rule_display"></div>
</section>
<div class="disp-n">
<div class="four_player_default five_player_default seven_player_default">
• Setup and play all roles using their standard rules and victory conditions. •
</div>
<div class="four_player thief">
• <span class="thief">Thief</span> plays according to his normal rules. •
</div>
<div class="three_player knight goblins dragon">
<ul>
<li><span class="plunder">Past Plunder</span> card given to <span class="dragon">Dragon</span></li>
<li>The other roles play using their standard rules and victory conditions.</li>
<li>All players lose if the cave collapses</li>
</ul>
</div>
<div class="three_player knight goblins cave">
<ul>
<li><span class="flare">Flare</span> card given to <span class="knight">Knight</span></li>
<li><span class="knight">Knight</span> wins if she smashes 5 Crystals<i class="crystal"></i> and then escapes the cave.</li>
<li>The other roles play using their standard rules and victory conditions.</li>
</ul>
</div>
<div class="three_player knight dragon cave">
<ul>
<li><span class="infestation">Goblin Infestation</span> card and <span class="monster">Monster Tokens</span> are given to <span class="knight">Knight</span></li>
<li><i>Recommended</i>: Use <u>Normal Goblins</u> difficulty (line A) on the <span class="infestation">Goblin Infestation</span> card.</li>
<li><span class="dragon">Dragon</span> begins play with 2 Sloth cubes<i class="cube"></i> from Hunger track on the Wakefulness track. These cubes cannot be moved back to Hunger track by the cave.</li>
<li>If the <span class="knight">Knight</span> is killed, she looses; and her turn is skipped until the <span class="dragon">Dragon</span> or the <span class="cave">Cave</span> wins.</li>
<li>The <span class="cave">Cave</span> plays with standard rules and victory conditions.</li>
</ul>
</div>
<div class="three_player goblins dragon cave">
<ul>
<li><span class="ash">Ash Dragon</span> card is activated. It effects both the <span class="dragon">Dragon</span> and <span class="goblins">Goblins</span>.</li>
<li><span class="goblins">Goblins</span> wins if they kill the <span class="dragon">Dragon</span>.</li>
<li>The <span class="cave">Cave</span> plays with standard rules and victory conditions.</li>
</ul>
</div>
<!-- this is complicated * it copies rules from 2player with exceptions -->
<div class="three_player thief">
</div>
<div class="two_player knight goblins">
<ul>
<li><span class="plunder">Past Plunder</span> card given to <span class="knight">Knight</span></li>
<li><span class="knight">Knight</span> wins if she smashes 5 Crystals<i class="crystal"></i> and then escapes the cave.</li>
<li>The other roles play using their standard rules and victory conditions.</li>
</ul>
</div>
<!-- solo: cave, cave-ghost, shadow unicorn -->
<div class="impossible">
• This setup is not possible •
</div>
</div><!-- hidden -->
</body>
</html>