diff options
| -rw-r--r-- | images/die_black_pips.svg | 37 | ||||
| -rw-r--r-- | images/die_white_pips.svg | 37 | ||||
| -rw-r--r-- | play.html | 78 | ||||
| -rw-r--r-- | play.js | 41 | ||||
| -rw-r--r-- | rules.js | 31 |
5 files changed, 208 insertions, 16 deletions
diff --git a/images/die_black_pips.svg b/images/die_black_pips.svg new file mode 100644 index 0000000..d641f28 --- /dev/null +++ b/images/die_black_pips.svg @@ -0,0 +1,37 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="336" height="56"> +<g fill="black"> +<g transform="translate(0 0)"> +<circle r="6" cx="28" cy="28"/> +</g> +<g transform="translate(56 0)"> +<circle r="6" cx="12" cy="12"/> +<circle r="6" cx="44" cy="44"/> +</g> +<g transform="translate(112 0)"> +<circle r="6" cx="12" cy="44"/> +<circle r="6" cx="44" cy="12"/> +<circle r="6" cx="28" cy="28"/> +</g> +<g transform="translate(168 0)"> +<circle r="6" cx="12" cy="12"/> +<circle r="6" cx="12" cy="44"/> +<circle r="6" cx="44" cy="12"/> +<circle r="6" cx="44" cy="44"/> +</g> +<g transform="translate(224 0)"> +<circle r="6" cx="12" cy="12"/> +<circle r="6" cx="12" cy="44"/> +<circle r="6" cx="44" cy="12"/> +<circle r="6" cx="44" cy="44"/> +<circle r="6" cx="28" cy="28"/> +</g> +<g transform="translate(280 0)"> +<circle r="6" cx="12" cy="12"/> +<circle r="6" cx="12" cy="28"/> +<circle r="6" cx="12" cy="44"/> +<circle r="6" cx="44" cy="12"/> +<circle r="6" cx="44" cy="28"/> +<circle r="6" cx="44" cy="44"/> +</g> +</g> +</svg> diff --git a/images/die_white_pips.svg b/images/die_white_pips.svg new file mode 100644 index 0000000..efc864b --- /dev/null +++ b/images/die_white_pips.svg @@ -0,0 +1,37 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="336" height="56"> +<g fill="white"> +<g transform="translate(0 0)"> +<circle r="6" cx="28" cy="28"/> +</g> +<g transform="translate(56 0)"> +<circle r="6" cx="12" cy="12"/> +<circle r="6" cx="44" cy="44"/> +</g> +<g transform="translate(112 0)"> +<circle r="6" cx="12" cy="44"/> +<circle r="6" cx="44" cy="12"/> +<circle r="6" cx="28" cy="28"/> +</g> +<g transform="translate(168 0)"> +<circle r="6" cx="12" cy="12"/> +<circle r="6" cx="12" cy="44"/> +<circle r="6" cx="44" cy="12"/> +<circle r="6" cx="44" cy="44"/> +</g> +<g transform="translate(224 0)"> +<circle r="6" cx="12" cy="12"/> +<circle r="6" cx="12" cy="44"/> +<circle r="6" cx="44" cy="12"/> +<circle r="6" cx="44" cy="44"/> +<circle r="6" cx="28" cy="28"/> +</g> +<g transform="translate(280 0)"> +<circle r="6" cx="12" cy="12"/> +<circle r="6" cx="12" cy="28"/> +<circle r="6" cx="12" cy="44"/> +<circle r="6" cx="44" cy="12"/> +<circle r="6" cx="44" cy="28"/> +<circle r="6" cx="44" cy="44"/> +</g> +</g> +</svg> @@ -59,6 +59,84 @@ body.Opposition header.your_turn { background-color: var(--opp-75); } #log > .p { padding-left: 20px; text-align: right; font-style: italic; opacity: 75%; } #log > .i { padding-left: 20px; } +#log .icon { + display: inline-block; + vertical-align: -2px; + width: 12px; + height: 12px; + border-radius: 0px; + box-shadow: none; + border: none; + background-size: 100% 100%; + background-repeat: no-repeat; +} + +#log .white { + background-image: url(images/die_black_pips.svg); + background-size: 600% 100%; + background-color: #fff; + border: 1px solid #444; +} + +#log .black { + background-image: url(images/die_white_pips.svg); + background-size: 600% 100%; + background-color: #666; + border: 1px solid #222; +} + +.d0 { background-position: -100% 0 } +.d1 { background-position: 0% 0; } +.d2 { background-position: 20% 0; } +.d3 { background-position: 40% 0; } +.d4 { background-position: 60% 0; } +.d5 { background-position: 80% 0; } +.d6 { background-position: 100% 0; } + +#log .purple_campaigner { + background-image: url(images/icon_purple_campaigner.png); +} + +#log .yellow_campaigner { + background-image: url(images/icon_yellow_campaigner.png); +} + +#log .red_campaigner { + background-image: url(images/icon_opposition_campaigner.png); +} + +#log .purple_cube { + background-image: url(images/icon_purple_cube.png); +} + +#log .yellow_cube { + background-image: url(images/icon_yellow_cube.png); +} + +#log .purple_or_yellow_cube { + background-image: url(images/icon_purple_or_yellow_cube.png); +} + +#log .red_cube { + background-image: url(images/icon_opposition_cube.png); +} + +#log .button { + background-image: url(images/icon_button.png); +} + +#log .congressional_marker { + background-image: url(images/icon_congressional_marker.png); +} + +#log .green_check { + background-image: url(images/icon_green_check.png); +} + +#log .red_x { + background-image: url(images/icon_red_x.png); +} + /* PANELS */ .panel_grid { @@ -405,7 +405,7 @@ function build_user_interface() { for (let i = 0; i < 6; ++i) { elt = ui.opposition_buttons[i] = create("div", { - className: `button button_${(i % 2) + 1}`, + className: `button button_${(i % 2) + 5}`, }) } @@ -521,6 +521,40 @@ function sub_us_state_name(_match, p1, _offset, _string) { return `<span class="tip" onmouseenter="on_focus_us_state_tip(${s})" onmouseleave="on_blur_us_state_tip(${s})" onclick="on_click_us_state_tip(${s})">${n}</span>` } +// TODO blue d4, red d6, white d8 + +const ICONS = { + B0: '<span class="icon black d0"></span>', + B1: '<span class="icon black d1"></span>', + B2: '<span class="icon black d2"></span>', + B3: '<span class="icon black d3"></span>', + B4: '<span class="icon black d4"></span>', + B5: '<span class="icon black d5"></span>', + B6: '<span class="icon black d6"></span>', + W0: '<span class="icon white d0"></span>', + W1: '<span class="icon white d1"></span>', + W2: '<span class="icon white d2"></span>', + W3: '<span class="icon white d3"></span>', + W4: '<span class="icon white d4"></span>', + W5: '<span class="icon white d5"></span>', + W6: '<span class="icon white d6"></span>', + PR: '<span class="icon purple_campaigner"></span>', + YR: '<span class="icon yellow_campaigner"></span>', + RR: '<span class="icon red_campaigner"></span>', + PC: '<span class="icon purple_cube"></span>', + YC: '<span class="icon yellow_cube"></span>', + PYC: '<span class="icon purple_or_yellow_cube"></span>', + RC: '<span class="icon red_cube"></span>', + BM: '<span class="icon button"></span>', + CM: '<span class="icon congressional_marker"></span>', + GV: '<span class="icon green_check"></span>', + RX: '<span class="icon red_x"></span>', +} + +function sub_icon(match) { + return ICONS[match] +} + function on_log(text) { // eslint-disable-line no-unused-vars let p = document.createElement("div") @@ -536,6 +570,11 @@ function on_log(text) { // eslint-disable-line no-unused-vars text = text.replace(/R(\d+)/g, sub_region_name) text = text.replace(/S(\d+)/g, sub_us_state_name) + text = text.replace(/\b[PYR]R\b/g, sub_icon) + text = text.replace(/\b[PYR]C|PYC\b/g, sub_icon) + text = text.replace(/\b[BC]M|GV|RX\b/g, sub_icon) + text = text.replace(/\b[BW]\d\b/g, sub_icon) + if (text.match(/^\.h1/)) { text = text.substring(4) p.className = 'h1' @@ -200,7 +200,7 @@ function add_campaigner(color, region) { } else { throw Error("No free campaigners") } - log(`Placed ${COLOR_CODE[color]}R in R${region}`) + log(`Placed ${COLOR_CODE[color]}R in R${region}.`) } function player_campaigners() { @@ -354,7 +354,7 @@ function us_states_with_color_cubes(us_states, cube) { } function add_cube(cube, us_state) { - log(`Added ${COLOR_CODE[cube]}C in S${us_state}`) + log(`Added ${COLOR_CODE[cube]}C in S${us_state}.`) if ((cube === RED && support_cubes(us_state) > 0) || (cube !== RED && red_cubes(us_state) > 0)) throw new Error("Can't add cube when opponent still has cubes there") @@ -366,7 +366,7 @@ function add_cube(cube, us_state) { } function remove_cube(cube, us_state) { - log(`Removed ${COLOR_CODE[cube]}C from S${us_state}`) + log(`Removed ${COLOR_CODE[cube]}C from S${us_state}.`) if ((cube === PURPLE && !purple_cubes(us_state)) || (cube === YELLOW && !yellow_cubes(us_state)) || (cube === RED && !red_cubes(us_state))) throw new Error("Can't remove cube that aint there") @@ -378,7 +378,7 @@ function remove_cube(cube, us_state) { } function remove_green_check(us_state) { - log(`Removed ${COLOR_CODE[GREEN_CHECK]} from S${us_state}`) + log(`Removed ${COLOR_CODE[GREEN_CHECK]} from S${us_state}.`) if (!is_green_check(us_state)) throw new Error("Can't remove a green check that aint there") @@ -387,7 +387,7 @@ function remove_green_check(us_state) { } function remove_red_x(us_state) { - log(`Removed ${COLOR_CODE[RED_X]} from S${us_state}`) + log(`Removed ${COLOR_CODE[RED_X]} from S${us_state}.`) if (!is_red_x(us_state)) throw new Error("Can't remove a red x that aint there") @@ -800,7 +800,7 @@ states.strategy_phase = { }, done() { - log(`Suffragist committed ${pluralize(game.support_committed, 'button')}.`) + log(`Suffragist committed ${game.support_committed} BM.`) game.active = OPP }, defer() { @@ -1416,7 +1416,8 @@ function campaigner_color(c) { function goto_campaigning_add_cubes(campaigner, die) { game.selected_campaigner = campaigner set_add(game.campaigning.assigned, campaigner) - log(`Assigned ${die} to ${COLOR_CODE[campaigner_color(campaigner)]}R in R${campaigner_region(campaigner)}.`) + // TODO die type & color + log(`Assigned B${die} to ${COLOR_CODE[campaigner_color(campaigner)]}R in R${campaigner_region(campaigner)}.`) game.campaigning.count = die game.campaigning.added = 0 game.campaigning.moved = false @@ -1604,13 +1605,13 @@ const GREEN_CHECK_VICTORY = 36 const RED_X_VICTORY = 13 function ratify_nineteenth_amendment(us_state) { - log(`S${us_state} ratified the Nineteenth Amendment`) + log(`S${us_state} ratified the Nineteenth Amendment.`) game.us_states[us_state] = 0 set_green_check(us_state) } function reject_nineteenth_amendment(us_state) { - log(`S${us_state} rejected the Nineteenth Amendment`) + log(`S${us_state} rejected the Nineteenth Amendment.`) game.us_states[us_state] = 0 set_red_x(us_state) } @@ -1618,7 +1619,7 @@ function reject_nineteenth_amendment(us_state) { function trigger_nineteenth_amendment() { if (game.nineteenth_amendment) throw Error("ASSERT: nineteenth_amendment already set") - log("Congress passed the Nineteenth Amendment") + log("Congress passed the Nineteenth Amendment.") game.nineteenth_amendment = 1 game.congress = 0 @@ -2178,7 +2179,7 @@ states.vm_add_campaigner = { } function increase_player_buttons(count=1) { - log(`+${pluralize(count, 'button')}.`) + log(`+${count} BM.`) if (game.active === SUF) { game.support_buttons = Math.min(game.support_buttons + count, MAX_SUPPORT_BUTTONS) } else { @@ -2187,7 +2188,7 @@ function increase_player_buttons(count=1) { } function decrease_player_buttons(count=1) { - log(`-${pluralize(count, 'button')}.`) + log(`-${count} BM.`) if (game.active === SUF) { game.support_buttons = Math.max(game.support_buttons - count, 0) } else { @@ -2196,7 +2197,7 @@ function decrease_player_buttons(count=1) { } function decrease_opponent_buttons(count=1) { - log(`${opponent_name()} -${pluralize(count, 'button')}.`) + log(`${opponent_name()} -${count} BM.`) if (game.active === SUF) { game.opposition_buttons = Math.max(game.opposition_buttons - count, 0) } else { @@ -2482,7 +2483,7 @@ states.vm_add_congress = { }, congress() { game.congress = Math.min(game.congress + game.vm.count, 6) - log(`+${pluralize(game.vm.count, 'Congressional marker')}.`) + log(`+${game.vm.count} CM.`) if (game.congress >= 6) { if (trigger_nineteenth_amendment()) @@ -2500,7 +2501,7 @@ states.vm_remove_congress = { }, congress() { game.congress = Math.max(game.congress - game.vm.count, 0) - log(`-${pluralize(game.vm.count, 'Congressional marker')}.`) + log(`-${game.vm.count} CM.`) vm_next() } |
