From 5d81b4294bd8f9b20ac8a396a185f6cf9550c00f Mon Sep 17 00:00:00 2001 From: Tor Andersson Date: Fri, 25 Oct 2024 11:58:58 +0200 Subject: Update client. Fixed some spelling errors in space data table. Create tools directory and add Makefile. Add layout.svg with boxes drawn on top of locations. Add genlayout.js to create list of box locations. Add gencolors.js to create beveled marker border colors. Major rewrite of play.js and play.css with official assets. --- play.js | 1080 ++++++++++++++++++++++++++------------------------------------- 1 file changed, 451 insertions(+), 629 deletions(-) (limited to 'play.js') diff --git a/play.js b/play.js index 5ccf136..9ac9e60 100644 --- a/play.js +++ b/play.js @@ -1,677 +1,417 @@ +"use strict" -const seed = 'none' -const scenario = 'standard' -const options = 'none' -//const rules = require("./rules") +let action_register = [] +function register_action(target, action, id) { + target.my_action = action + target.my_id = id + target.onmousedown = on_click_action + action_register.push(target) +} + +function is_action(action, arg) { + return !!(view.actions && view.actions[action] && view.actions[action].includes(arg)) +} + +function on_click_action(evt) { + if (evt.button === 0) + send_action(evt.target.my_action, evt.target.my_id) +} + +const last_space = 75 const last_card = 110 const last_power_card = 52 -let hover_timeout -const height = 65 -const width = 105 -const toolbar = document.getElementById('toolbar') -const vpMarker = document.getElementById('vp') -const counters = document.getElementById('counters') - -const countries= ['Poland', 'Hungary', 'East_Germany', 'Bulgaria', 'Czechoslovakia', 'Romania'] - -/*const aside_events = [ - "honecker", - "st_nicholas_church", - "helsinki_final_act", - "eco_glasnost", - "we_are_the_people", - "foreign_currency_debt_burden", - "li_peng", - "austria_hungary_border_reopened", - "grenztruppen", - "presidential_visit", - "securitate", - "laslzo_tokes", - "stand_fast", - "elena", - "new_years_eve_party" -]*/ -const board_events = [2, 9, 69, 97] + +const countries = [ "Poland", "Hungary", "East_Germany", "Bulgaria", "Czechoslovakia", "Romania" ] +const board_events = [ 2, 9, 69, 97 ] const box_events = [ 15, 24, 26, 39, 48, 49, 53, 58, 59, 65, 70, 73, 100, 101, 104 ] -let box_events_showing = false -let show_discard = false - -const overlay = document.getElementById('overlay'); -const spaceNameElement = document.getElementById('space-name'); -const spaceCharacteristicsElement = document.getElementById('space-characteristics'); - - -// Event listener to track mouse movement over the map - document.querySelector('.map').addEventListener('mousemove', function(event) { - const x = event.offsetX; // X-coordinate of mouse relative to container - const y = event.offsetY; // Y-coordinate of mouse relative to container - spaceCharacteristicsElement.innerText = `X: ${x}, Y: ${y}`; - }) - - - // Create map areas dynamically based on coordinates - - function create_ui() { - -// CREATE MAP - - spaces.forEach((space) => { - - - if (space && space.box) { - - //CREATE SPACES - const { x, y} = space.box; - const spaceArea = document.createElement('div'); - spaceArea.classList.add('space-area', space.country) - spaceArea.id=`space_${space.space_id}`; - spaceArea.style.left = x + 'px'; - spaceArea.style.top = y + 'px'; - spaceArea.style.width = width + 'px'; - spaceArea.style.height = height + 'px'; - spaceArea.style.zIndex = 2; - spaceArea.my_space = space.space_id; - spaceArea.addEventListener('mousedown', on_click_space); - - //CREATE DEMOCRATIC INFLUENCE MARKERS FOR EACH SPACE - const dem_img = document.createElement('div') - dem_img.classList.add('demInfl', space.country) - dem_img.style.display = 'none' - dem_img.id=`${space.name_unique}_demInfl` - dem_img.style.zIndex = 1 - dem_img.my_space = space.space_id; - dem_img.addEventListener('mousedown', on_click_space); - spaceArea.appendChild(dem_img) - - //CREATE DEMOCRATIC INFLUENCE VALUES - const demInflValue = document.createElement('p') - demInflValue.className='demInflValue' - demInflValue.style.display = 'none' - demInflValue.id=`${space.name_unique}_demInflValue` - demInflValue.innerText=space.demInfl - demInflValue.style.zIndex = 1 - demInflValue.my_space = space.space_id; - demInflValue.addEventListener('mousedown', on_click_space); - spaceArea.appendChild(demInflValue) - - //CREATE COMMUNIST INFLUENCE MARKERS FOR EACH SPACE - const com_img = document.createElement('div') - com_img.className='comInfl' - com_img.style.display='none' - com_img.id=`${space.name_unique}_comInfl` - com_img.style.zIndex = 1 - com_img.my_space = space.space_id; - com_img.addEventListener('mousedown', on_click_space); - spaceArea.appendChild(com_img) - - //CREATE COMMUNIST INFLUENCE VALUES - const comInflValue = document.createElement('p') - comInflValue.className='comInflValue' - comInflValue.style.display='none' - comInflValue.id=`${space.name_unique}_comInflValue` - comInflValue.innerText=space.comInfl - comInflValue.style.zIndex = 1 - comInflValue.my_space = space.space_id; - comInflValue.addEventListener('mousedown', on_click_space); - spaceArea.appendChild(comInflValue) - //} - - counters.appendChild(spaceArea); - } - }); -// CREATE CARDS +const ui = { + favicon: document.getElementById("favicon"), + turn_info: document.getElementById("turn_info"), + + turn: document.getElementById("marker_turn"), + round: document.getElementById("marker_action_round"), + stability: document.getElementById("marker_stability_track"), + dem_tst: document.getElementById("marker_dem_tst"), + com_tst: document.getElementById("marker_com_tst"), + vp: document.getElementById("marker_vp"), + + event_reminder_list: document.getElementById("event_reminder_list"), + + played_card: document.getElementById("played_card"), + hand: document.getElementById("hand"), + power_hand: document.getElementById("power_hand"), + opp_hand: document.getElementById("opp_hand"), + opp_power_hand: document.getElementById("opp_power_hand"), + discard: document.getElementById("discard"), + removed: document.getElementById("removed"), + table_cards: document.getElementById("table_cards"), + + ceausescu_hand: document.getElementById("ceausescu_hand"), + samizdat_card: document.getElementById("samizdat_card"), +} + +function create_country(id, name) { + let [ x, y, w, h ] = LAYOUT[name] + let xc = Math.round(x + w / 2) + let yc = Math.round(y + h / 2) + + let e = document.createElement("div") + e.className = "marker demInfl" + e.style.left = xc - 25 + "px" + e.style.top = yc - 25 + "px" + ui.countries[id] = e + document.getElementById("markers").appendChild(e) +} + +function create_ui() { + ui.layout_xy = [] + ui.spaces = [] + ui.dem_inf = [] + ui.com_inf = [] + + for (let s = 1; s <= last_space; ++s) { + let info = spaces[s] + let [ x, y, w, h ] = LAYOUT[info.ascii_name] + let xc = Math.round( x + w / 2 ) + let yc = Math.round( y + h / 2 ) + x -= 6 + y -= 6 + w += 12 + h += 12 + + ui.layout_xy[s] = [ xc, yc ] + + let space_e = document.createElement("div") + register_action(space_e, "space", s) + space_e.className = "space " + info.country + space_e.style.left = x + "px" + space_e.style.top = y + "px" + space_e.style.width = w + "px" + space_e.style.height = h + "px" + ui.spaces[s] = space_e + + let com_e = document.createElement("div") + com_e.className = "marker comInfl hide" + com_e.style.left = (xc + 32 - 25) + "px" + com_e.style.top = (yc + 12 - 25) + "px" + ui.com_inf[s] = com_e + + let dem_e = document.createElement("div") + dem_e.className = "marker demInfl hide" + dem_e.style.left = (xc - 32 - 25) + "px" + dem_e.style.top = (yc + 12 - 25) + "px" + ui.dem_inf[s] = dem_e + + document.getElementById("spaces").append(space_e) + document.getElementById("markers").appendChild(com_e) + document.getElementById("markers").appendChild(dem_e) + } - const is_mobile = window.matchMedia("(pointer: coarse)").matches + ui.cards = [] for (let c = 1; c <= last_card; ++c) { + const card_e = document.createElement("div") + register_action(card_e, "card", c) + card_e.className = "card event_" + c + ui.cards[c] = card_e + } - const hand_card = document.createElement('img'); - hand_card.classList.add('hand_card') - hand_card.id=`card_${c}`; - hand_card.src = `cards/e${c}.gif` - hand_card.my_card = c; - hand_card.addEventListener('click', on_click_card); - - if(!is_mobile) { - hand_card.addEventListener('mouseenter', () => { - hover_timeout = setTimeout(() => { - hand_card.classList.add('zoom'); - }, 500) }) - hand_card.addEventListener('mouseleave', () => { - clearTimeout(hover_timeout); - hand_card.classList.remove('zoom'); - }); - } + ui.power_cards = [] + for (let c = 1; c <= last_power_card; ++c) { + const power_card_e = document.createElement("div") + register_action(power_card_e, "power_card", c) + power_card_e.className = "card power_" + c + ui.power_cards[c] = power_card_e + } - ui.cards.push(hand_card); + ui.events = [] + for (let id of box_events) { + ui.events[id] = document.createElement("div") + ui.events[id].id = "event_" + id + ui.events[id].className = "marker event aside" } - - - - for (let card of power_cards) { - if (!card) continue; - const power_card = document.createElement('img'); - power_card.classList.add('power_card'); - power_card.id = `power_card_${card.number}`; - power_card.src = `cards_2/${card.url}.gif`; - power_card.my_card = card.number; - power_card.addEventListener('mousedown', on_click_card); - ui.power_cards.push(power_card); + for (let id of board_events) { + ui.events[id] = document.createElement("div") + ui.events[id].id = "event_" + id + ui.events[id].className = "marker event" + document.getElementById("markers").appendChild(ui.events[id]) } -} - - - -function is_card_enabled(card) { - if (view.actions) { - if (card_action_menu.some(a => view.actions[a] && view.actions[a].includes(card))) - return true - if (view.actions.card_select && view.actions.card_select.includes(card)) - return true - if (view.actions.card && view.actions.card.includes(card)) - return true - } - return false + ui.countries = [] + create_country(0, "country_poland") + create_country(1, "country_hungary") + create_country(2, "country_east_germany") + create_country(3, "country_bulgaria") + create_country(4, "country_czechoslovakia") + create_country(5, "country_romania") } // SUPPORTING FUNCTIONS function on_click_space(evt) { - if (evt.button === 0) { - const space = evt.target.my_space; - //console.log('on_click_space_called with space:', space); - if (send_action('infl', space)) { + if (evt.button === 0) { + const space = evt.target.my_space + //console.log('on_click_space_called with space:', space); + if (send_action("infl", space)) { //console.log('send_action with infl:', space); - evt.stopPropagation(); - } else if (send_action('sc', space)) { + evt.stopPropagation() + } else if (send_action("sc", space)) { //console.log('send_action with sc:', space); - evt.stopPropagation(); + evt.stopPropagation() } else { - // console.log('send_action failed for space:', space); - } - } - //hide_popup_menu(); -} - -function on_click_card(evt) { - if (evt.button === 0) { - const card = evt.target.my_card; - //console.log('on_click_card_called with card:', card); - if (is_action('card', card)) { - //console.log('in action card') - if (send_action('card', card)) { - evt.stopPropagation(); - } - } - if (is_action('power_card', card)) { - if (send_action('power_card', card)) { - evt.stopPropagation(); - } + // console.log('send_action failed for space:', space); } } + //hide_popup_menu(); } -function is_action(action) { - //console.log('is_action called with: ', action) - //console.log('view.actions', view.actions) - if (view.actions && view.actions[action]) - return true - return false -} - -function is_card_action(action, card) { - //console.log('is_card_action called with action', action, 'card', card) - //console.log('view.actions', view.actions, 'view.actions[action]', view.actions[action]) - if (view.actions && view.actions[action] && view.actions[action].includes(card)) - return true - return false -} - -function on_log(text) { // eslint-disable-line no-unused-vars +function on_log(text) { + // eslint-disable-line no-unused-vars let p = document.createElement("div") if (text.match(/^>/)) { text = text.substring(1) - p.className = 'i' + p.className = "i" } - text = text.replace(/_/g, ' ') + text = text.replace(/_/g, " ") text = text.replace(/C(\d+)/g, sub_card_name) text = text.replace(/P(\d+)/g, sub_power_card_name) text = text.replace(/V(\d+)/g, sub_power_card_value) text = text.replace(/%(\d+)/g, sub_space_name) text = text.replace(/D[1-6]/g, sub_die) - if (text.match(/^\.h1/)) { text = text.substring(4) - p.className = 'h1' - } - else if (text.match(/^\.h2d/)) { + p.className = "h1" + } else if (text.match(/^\.h2d/)) { text = text.substring(5) - p.className = 'h2 dem' - } - else if (text.match(/^\.h2c/)) { + p.className = "h2 dem" + } else if (text.match(/^\.h2c/)) { text = text.substring(5) - p.className = 'h2 com' - } - else if (text.match(/^\.h2/)) { + p.className = "h2 com" + } else if (text.match(/^\.h2/)) { text = text.substring(4) - p.className = 'h2' - } - else if (text.match(/^\.h3/)) { + p.className = "h2" + } else if (text.match(/^\.h3/)) { text = text.substring(4) - p.className = 'h3' + p.className = "h3" } p.innerHTML = text return p } -let ui = { - favicon: document.getElementById('favicon'), - player: [ - document.getElementById("role_Democrat"), - document.getElementById("role_Communist"), - ], - cards: [ null ], - power_cards: [null], - dem_hand_count: document.getElementById("role_stat_dem"), - com_hand_count: document.getElementById("role_stat_com"), - deck_length: document.getElementById("deck_length"), - played_card: 0, - table_panel: document.getElementById("table_panel"), - hand_panel: document.getElementById("hand_panel"), - turn: document.getElementById("turn-tracker"), - round: document.getElementById("action-round-tracker"), - stability: document.getElementById("stability-track"), - dem_TST: document.getElementById("dem-TST"), - com_TST: document.getElementById("com-TST"), - vp: document.getElementById("vp"), - spaces: document.getElementsByClassName("space-area") +function layout_turn_marker() { + let x = 654 + 24 + (view.turn - 1) * 53 + let y = 80 + 24 + ui.turn.style.left = (x - 25) + "px" + ui.turn.style.top = (y - 25) + "px" +} +function layout_round_marker() { + let x = 709 + 24 + (view.turn - 1) * 53 + let y = 142 + 24 + ui.round.style.left = (x - 25) + "px" + ui.round.style.top = (y - 25) + "px" + if (view.round_player === "Democrat") // TODO: bit flag? + ui.round.className = "marker dem" + else + ui.round.className = "marker com" } +function layout_stability_marker() { + let x = 24 + 1381 + let y = 24 + 1081 + view.stability * 54 + ui.stability.style.left = (x - 25) + "px" + ui.stability.style.top = (y - 25) + "px" +} -function on_update() { - //console.log('on_update called') - //console.log('view.valid_spaces: ', view.valid_spaces) - //console.log('view.actions: ', view.actions) - //console.log('view.power_cards:', view.power_cards) - document.querySelectorAll('[id^="space_"].selected').forEach(spaceElement => {spaceElement.classList.remove('selected');}); - document.getElementById("power_hand")?.querySelectorAll('.selected').forEach(cardElement => {cardElement.classList.remove('selected');}); - view.valid_spaces.forEach(space_id => { - const spaceElementId = `space_${space_id}`; - const spaceElement = document.getElementById(spaceElementId); - - if (spaceElement) { - spaceElement.classList.add('selected'); - } - }); - - //Check influence values - - for (let i = 1; i < spaces.length; i ++) { - - const space = spaces[i] - const demInfl = view.demInfl[i] - const comInfl = view.comInfl[i] - //console.log('piece', piece) - //console.log('space', space) - const dem_marker = document.getElementById(`${space.name_unique}_demInfl`); - const dem_number = document.getElementById(`${space.name_unique}_demInflValue`); - const com_marker = document.getElementById(`${space.name_unique}_comInfl`); - const com_number = document.getElementById(`${space.name_unique}_comInflValue`); - - dem_number.innerText=demInfl - if (demInfl > 0) { - dem_marker.style.display = 'block'; - dem_number.style.display = 'block'; - - if (demInfl > 9) { - dem_number.classList.remove('demInflValue') - dem_number.classList.add('demInflValue_10') - } else { - dem_number.classList.add('demInflValue') - dem_number.classList.remove('demInflValue_10') - } - - if(check_dem_control(demInfl, comInfl, space)){ - dem_marker.classList.add('controlled') - dem_number.classList.add('outlined_text') - dem_marker.classList.remove('uncontrolled') - } else { - dem_marker.classList.add('uncontrolled') - dem_marker.classList.remove('controlled') - dem_number.classList.remove('outlined_text') - } - } else { - dem_marker.style.display = 'none'; - dem_number.style.display = 'none'; - } - com_number.innerText=comInfl - if (comInfl > 0) { - com_marker.style.display = 'block'; - com_number.style.display = 'block'; - - if (comInfl > 9) { - com_number.classList.remove('comInflValue') - com_number.classList.add('comInflValue_10') - } else { - com_number.classList.add('comInflValue') - com_number.classList.remove('comInflValue_10') - } - - if(check_com_control(demInfl, comInfl, space)){ - com_marker.classList.add('controlled') - com_number.classList.add('controlled') - com_marker.classList.remove('uncontrolled') - com_number.classList.remove('uncontrolled') - } else { - com_marker.classList.add('uncontrolled') - com_number.classList.add('uncontrolled') - com_marker.classList.remove('controlled') - com_number.classList.remove('controlled') - } - } else { - com_marker.style.display = 'none'; - com_number.style.display = 'none'; - } - - } +let TST_X = [ 53, 53+69, 53+69*2, 53+69*3, 53+69*4, 53+69*5, 53+69*6, 556 ] +let TST_Y = [ 2128, 2257 ] -// UPDATE COUNTRY MARKERS - for (let i = 0; i < countries.length; i++) { - const country = countries[i]; - const marker = document.getElementById(country) - const times_held = document.getElementById(`${country}_times_held`) - - if (view.revolutions[find_country_index(country)]) { - marker.classList.add('revolution') - marker.classList.remove('held') - marker.style.display = 'block' - times_held.classList.add('outlined_text') - times_held.classList.remove('hide') - } else if (view.times_held[find_country_index(country)] > 0 ) { - //console.log('setting ', country) - marker.classList.add('held') - marker.style.display = 'block' - times_held.classList.remove('hide') - times_held.innerHTML = view.times_held[find_country_index(country)] - } - else {marker.style.display = 'none'} - } +function layout_tst_marker(e, v, top) { + let x = TST_X[v] + 24 + let y = TST_Y[top] + 24 + e.style.left = (x - 25) + "px" + e.style.top = (y - 25) + "px" +} -// UPDATE ASIDE - if (view.is_pwr_struggle) { - ui.dem_hand_count.innerText = `${view.democrat_power_hand} Power cards` - ui.com_hand_count.innerText = `${view.communist_power_hand} Power cards` - } else{ - ui.dem_hand_count.innerText = `${view.democrat_hand} cards` - ui.com_hand_count.innerText = `${view.communist_hand} cards` +function layout_vp_marker() { + let x, y + if (view.vp === 0) { + y = 2425 + 25 + x = 843 + 28 } - ui.deck_length.innerText = `${view.strategy_deck} cards` - -// UPDATE HAND - document.getElementById("hand").replaceChildren() - document.getElementById("played_card").replaceChildren() - - if (view.hand.length && view.is_pwr_struggle === false) { - document.getElementById("hand_panel").classList.remove("hide") - //console.log('view.actions.card', view.actions.card) - for (let c of view.hand) { - let card = ui.cards[c] - document.getElementById("hand").appendChild(card); - if (view.actions && view.actions.card && view.actions.card.includes(c)) { - card.classList.add('action') - } else { - card.classList.remove('action') - } - if (view.valid_cards.includes(c)) { - card.classList.add('selected') - } else { - card.classList.remove('selected') - } - card.classList.remove('discard_card') + else if (view.vp < 0) { + if (view.vp & 1) { + y = 2456 + 25 + x = 803 + 28 - (-view.vp - 1)/2 * 62 + } else { + y = 2395 + 25 + x = 772 + 28 - (-view.vp - 2)/2 * 62 } - } else { - document.getElementById("hand_panel").classList.add("hide") - } - -// UPDATE DISCARD -document.getElementById("discard").replaceChildren() -if (!view.is_pwr_struggle) { - for (let c of view.strategy_discard) { - let discard_card = ui.cards[c] - document.getElementById("discard").appendChild(discard_card) - discard_card.classList.add('discard_card') - discard_card.classList.remove('selected') - } -} else if (view.is_pwr_struggle) { - for (let c of view.strategy_discard) { - let discard_card = ui.power_cards[c] - document.getElementById("discard").appendChild(discard_card) - discard_card.classList.add('discard_card') - discard_card.classList.remove('selected') } -} - -// DISCARD FOR EVENTS -//console.log('view.discard',view.discard) -if(view.discard) { - //document.getElementById("discard").replaceChildren() - document.getElementById("discard_panel").classList.remove("hide") - for (let c of view.strategy_discard) { - let discard_card = ui.cards[c] - document.getElementById("discard").appendChild(discard_card) - discard_card.classList.add('discard_card') - if (view.valid_cards.includes(c)) { - discard_card.classList.add('selected') + else if (view.vp > 0) { + if (view.vp & 1) { + y = 2396 + 25 + x = 883 + 28 + (view.vp - 1)/2 * 62 } else { - discard_card.classList.remove('selected') + y = 2455 + 25 + x = 913 + 28 + (view.vp - 2)/2 * 62 } - } -} else { - if (!show_discard) { - document.getElementById("discard_panel").classList.add("hide") + } + ui.vp.style.left = (x - 25) + "px" + ui.vp.style.top = (y - 25) + "px" +} + +function layout_country(id) { + for (let i = 0; i < 6; i++) { + // TODO: what number to display? + if (view.revolutions[id]) + ui.countries[id].className = "marker comInfl ctl v" + view.times_held[id] + else if (view.times_held[id] > 0) + ui.countries[id].className = "marker demInfl ctl v" + view.times_held[id] + else + ui.countries[id].className = "marker hide" } } -// UPDATE PERMANENTLY REMOVED CARDS -document.getElementById("removed").replaceChildren() -for (let c of view.strategy_removed) { - let discard_card = ui.cards[c] - document.getElementById("removed").appendChild(discard_card) - discard_card.classList.add('discard_card') - discard_card.classList.remove('selected') -} - - -// PLAYED CARD PANEL -if (view.played_card > 0) { - document.getElementById("played_card_panel").classList.remove("hide") - document.getElementById("played_card").appendChild(ui.cards[view.played_card]); - document.getElementById("played_card").classList.remove("hand_card") -} else { - document.getElementById("played_card_panel").classList.add("hide") -} - -// TABLE CARDS PANEL -document.getElementById("table_cards").replaceChildren() -if (view.table_cards.length > 0) { - document.getElementById("table_panel").classList.remove("hide") - for (let c of view.table_cards) { - let card = ui.cards[c] - document.getElementById("table_cards").appendChild(card); - card.classList.remove("hand_card") - card.classList.add('event_card'); - } - } else { - document.getElementById("table_panel").classList.add("hide") -} +function on_update() { + if (!ui.spaces) + create_ui() -// OPPONENT HAND -document.getElementById("opp_hand").replaceChildren() -if (!view.is_pwr_struggle) { - if (view.show_opp_hand && view.opp_hand.length >0) { - document.getElementById("opp_hand_panel").classList.remove("hide") - for (let c of view.opp_hand) { - let card = ui.cards[c] - document.getElementById("opp_hand").appendChild(card); - card.classList.remove('discard_card') - if (!view.is_pwr_struggle) { - if (view.valid_cards.includes(c)) { - card.classList.add('selected') - } else { - card.classList.remove('selected') - } - } - } + // UPDATE ASIDE + if (view.is_pwr_struggle) { + roles.Democrat.stat.textContent = `${view.democrat_power_hand} Power cards` + roles.Communist.stat.textContent = `${view.communist_power_hand} Power cards` } else { - document.getElementById("opp_hand_panel").classList.add("hide") + roles.Democrat.stat.textContent = `${view.democrat_hand} cards` + roles.Communist.stat.innerText = `${view.communist_hand} cards` } -} else { - //console.log('power struggle, show opp hand', view.show_opp_hand, 'view opp hand', view.opp_hand ) - if (view.show_opp_hand && view.opp_hand && view.opp_hand.length > 0) { - document.getElementById("opp_hand_panel").classList.remove("hide") - for (let c of view.opp_hand) { - let card = ui.power_cards[c] - //console.log('power_card:', power_card) - document.getElementById("opp_hand").appendChild(card); - card.classList.remove('discard_card') - } + ui.turn_info.innerText = `Strategy deck: ${view.strategy_deck} cards` + + // UPDATE TRACK MARKERS + layout_turn_marker() + layout_round_marker() + layout_stability_marker() + layout_vp_marker() + layout_tst_marker(ui.dem_tst, view.dem_tst, 0) + layout_tst_marker(ui.com_tst, view.com_tst, 1) + + // UPDATE EVENT MARKERS ON THE BOARD + + if (view.persistent_events.includes(2)) + ui.events[2].style.display = "block" + else + ui.events[2].style.display = "none" + + if (view.persistent_events.includes(9)) + ui.events[9].style.display = "block" + else + ui.events[9].style.display = "none" + + if (view.persistent_events.includes(69)) { + ui.events[69].style.display = "block" + ui.events[69].style.left = ui.layout_xy[view.systematization][0] - 25 + "px" + ui.events[69].style.top = ui.layout_xy[view.systematization][1] - 25 + "px" } else { - document.getElementById("opp_hand_panel").classList.add("hide") + ui.events[69].style.display = "none" } -} -// POWER STRUGGLE HAND - document.getElementById("power_hand").replaceChildren() - - if (view.power_hand.length && view.is_pwr_struggle) { - document.getElementById("power_panel").classList.remove("hide") - for (let c of view.power_hand) { - let power_card = ui.power_cards[c] - document.getElementById("power_hand").appendChild(power_card); - power_card.classList.remove('discard_card') - if (view.valid_cards.includes(c)) { - power_card.classList.add('selected'); - } - } + if (view.persistent_events.includes(97)) { + ui.events[97].style.display = "block" + ui.events[97].style.left = ui.layout_xy[view.the_tyrant_is_gone][0] - 25 + "px" + ui.events[97].style.top = ui.layout_xy[view.the_tyrant_is_gone][1] - 25 + "px" } else { - document.getElementById("power_panel").classList.add("hide") + ui.events[97].style.display = "none" } -// CEAUSESCU + // EVENT REMINDER LIST + + ui.event_reminder_list.replaceChildren() + for (let id of box_events) + if (view.persistent_events.includes(id)) + ui.event_reminder_list.appendChild(ui.events[id]) + + // UPDATE INFLUENCE VALUES + for (let s = 1; s <= last_space; ++s) { + const demInfl = view.demInfl[s] + const comInfl = view.comInfl[s] + + if (demInfl - comInfl >= spaces[s].stability) + ui.dem_inf[s].className = "marker demInfl ctl v" + demInfl + else if (demInfl > 0) + ui.dem_inf[s].className = "marker demInfl v" + demInfl + else + ui.dem_inf[s].className = "marker demInfl hide" + + if (comInfl - demInfl >= spaces[s].stability) + ui.com_inf[s].className = "marker comInfl ctl v" + comInfl + else if (comInfl > 0) + ui.com_inf[s].className = "marker comInfl v" + comInfl + else + ui.com_inf[s].className = "marker comInfl hide" + } -if (view.ceausescu_cards && view.ceausescu_cards.length > 0 && view.is_pwr_struggle === true) { - document.getElementById("ceausescu_panel").classList.remove("hide") - for (let c of view.ceausescu_cards) { - let power_card = ui.power_cards[c] - document.getElementById("ceausescu_hand").appendChild(power_card); - power_card.classList.remove('discard_card') + // UPDATE COUNTRY MARKERS - } -} else { - document.getElementById("ceausescu_panel").classList.add("hide") -} + for (let i = 0; i < 6; ++i) + layout_country(i) -// SAMIZDAT CARD -if (view.samizdat > 0 ) { - let samizdat_card = ui.cards[view.samizdat] - document.getElementById("samizdat_panel").classList.remove("hide") - document.getElementById("samizdat_card").appendChild(samizdat_card) -} else { - document.getElementById("samizdat_panel").classList.add("hide") -} + // UPDATE CARD DISPLAYS -// UPDATE BOARD MARKERS - ui.turn.className = `t${view.turn}` - if (view.round_player === 'Democrat') { - ui.round.className = `dem-action-round-tracker r${view.round}` - } else { - ui.round.className = `com-action-round-tracker r${view.round}` - } - ui.stability.className = `s${view.stability}` - ui.dem_TST.className = `tst${view.dem_tst}` - ui.com_TST.className = `tst${view.com_tst}` - if (view.vp >= -20 && view.vp <= 20) { - ui.vp.className = `vp${view.vp}` - } else if (view.vp > 20) { - ui.vp.className = `vp21` - } else if (view.vp < -20) { - ui.vp.className = `vp-21` - } - -//console.log('strategy discard: ', view.strategy_discard) -//console.log('valid spaces: ', view.valid_spaces) - -//console.log('view.persistent_events', view.persistent_events) + ui.played_card.replaceChildren() + if (view.played_card > 0) + ui.played_card.appendChild(ui.cards[view.played_card]) -// UPDATE EVENT MARKERS ON THE BOARD + ui.samizdat_card.replaceChildren() + if (view.samizdat > 0) + ui.samizdat_card.appendChild(ui.cards[view.samizdat]) -for (let id of board_events) { - let marker = document.getElementById(`event_${id}`) - //console.log('event', id, marker) - if (view.persistent_events.includes(id)) { - marker.style.display = 'block' - } else { - marker.style.display = 'none' - } -} + ui.hand.replaceChildren() + for (let c of view.hand) + ui.hand.appendChild(ui.cards[c]) + ui.power_hand.replaceChildren() + if (view.power_hand) + for (let c of view.power_hand) + ui.hand.appendChild(ui.power_cards[c]) -// UPDATE EVENT MARKERS BELOW THE BOARD + ui.opp_hand.replaceChildren() + if (view.opp_hand) + for (let c of view.opp_hand) + ui.opp_hand.appendChild(ui.cards[c]) -for (let id of box_events) { - let marker = document.getElementById(`event_${id}`) - //console.log('event', id, marker) - if (view.persistent_events.includes(id)) { - marker.style.display = 'block' - } else { - marker.style.display = 'none' - } -} + // TODO: fix rules to set view.opp_power_hand + ui.opp_power_hand.replaceChildren() + if (view.opp_power_hand) + for (let c of view.opp_power_hand) + ui.opp_hand.appendChild(ui.power_cards[c]) + ui.ceausescu_hand.replaceChildren() + if (view.ceausescu_cards) + for (let c of view.ceausescu_cards) + ui.ceausescu_hand.appendChild(ui.power_cards[c]) -// CHECK WHETHER ANY EVENT MARKERS ARE SHOWING IN THE EVENTS BOX -box_events_showing = false -for (let id of box_events) { - if (view.persistent_events.includes(id)) { - box_events_showing = true; - } -/* - //Special check for events which are not true/false - if (view.persistent_events['foreign_currency_debt_burden'] !== '') { - aside_events_showing = true - } - if (view.persistent_events['stand_fast'] !== '') { - aside_events_showing = true - } - */ -} + ui.discard.replaceChildren() + for (let c of view.strategy_discard) + ui.discard.appendChild(ui.cards[c]) -if (box_events_showing) { - document.getElementById('events_panel').classList.remove("hide") -} else { - document.getElementById('events_panel').classList.add("hide") -} + ui.removed.replaceChildren() + for (let c of view.strategy_removed) + ui.discard.appendChild(ui.cards[c]) -let systematization = document.getElementById('event_69') -if (view.persistent_events.includes(69)) { - systematization.style.left = (spaces[view.systematization].box.x +20) + 'px'; - systematization.style.top = spaces[view.systematization].box.y + 'px'; -} + ui.table_cards.replaceChildren() + if (view.table_cards) + for (let c of view.table_cards) + ui.table_cards.appendChild(ui.cards[c]) -let tyrant = document.getElementById('event_97') -if (view.persistent_events.includes(97)) { - tyrant.style.left = (spaces[view.the_tyrant_is_gone].box.x - 41) + 'px'; - tyrant.style.top = (spaces[view.the_tyrant_is_gone].box.y + 23) + 'px'; -} else {tyrant.style.display = 'none'} + for (let e of action_register) + e.classList.toggle("action", is_action(e.my_action, e.my_id)) action_button("yes", "Yes") action_button("no", "No") @@ -696,7 +436,7 @@ if (view.persistent_events.includes(97)) { action_button("strike", "Strike") action_button("march", "March") action_button("rally", "Rally in the Square") - action_button("petition", "Petition") + action_button("petition", "Petition") action_button("bonus", "Calculate VP bonus") action_button("scoring", "Score country") action_button("retain", "Retain Power") @@ -704,9 +444,9 @@ if (view.persistent_events.includes(97)) { action_button("take", "Take Power") action_button("concede", "Concede") action_button("struggle", "Begin power struggle") - action_button("raise", "Raise the stakes") - action_button("draw", "Draw") - action_button("scoring", "Scoring") + action_button("raise", "Raise the stakes") + action_button("draw", "Draw") + action_button("scoring", "Scoring") action_button("event", "Event") action_button("opp_event", "Resolve opponent event") action_button("influence", "Place SPs") @@ -716,8 +456,6 @@ if (view.persistent_events.includes(97)) { action_button("done", "Done") action_button("end_round", "End Round") action_button("undo", "Undo") - -console.log('view.actions', view.actions) } // =========================== LOG FUNCTIONS ============================================== @@ -738,9 +476,8 @@ function sub_power_card_value(match, p1) { } function sub_space_name(match, p1) { - let x = p1 | 0 - let id = spaces[x].space_id - let name = spaces[x].name_unique + let id = p1 | 0 + let name = spaces[id].name_unique return `${name}` } @@ -754,45 +491,32 @@ const die = { D3: '', D4: '', D5: '', - D6: '' + D6: '', } // =========================== VISUAL FUNCTIONS ==========================================# -function on_focus_card_tip(card_number) { - document.getElementById("tooltip").className = "card card_" + card_number +function on_focus_card_tip(card_number) { + document.getElementById("tooltip").className = "card event_" + card_number } -function on_blur_card_tip() { +function on_blur_card_tip() { document.getElementById("tooltip").classList = "card hide" } function on_focus_space_tip(id) { - space = document.getElementById(`space_${id}`) - space.classList.add("tip") -} - -function on_click_space_tip(id) { - space = document.getElementById(`space_${id}`) - scroll_into_view(space) + ui.spaces[id].classList.add("tip") } function on_blur_space_tip(id) { - space = document.getElementById(`space_${id}`) - space.classList.remove("tip") + ui.spaces[id].classList.remove("tip") } -function toggle_pieces() { - document.getElementById("pieces").classList.toggle("hide") +function on_click_space_tip(id) { + scroll_into_view(ui.spaces[id]) } - function toggle_discard() { - if (show_discard) { - show_discard = false - } else { - show_discard = true - } document.getElementById("discard_panel").classList.toggle("hide") } @@ -800,20 +524,118 @@ function toggle_removed() { document.getElementById("removed_panel").classList.toggle("hide") } -function check_dem_control(demInfl, comInfl, space) { - if ((demInfl - comInfl) >= space.stability) { - return true - } else{ false} -} - -function check_com_control(demInfl, comInfl, space) { - if ((comInfl - demInfl) >= space.stability) { - return true - } else{ false} -} - function find_country_index(country) { return countries.indexOf(country) } -create_ui() +// #region GENERATED LAYOUT DATA + +var LAYOUT = { + "Babes-Bolyai University": [958,1529,127,75], + "Berlin": [329,148,127,75], + "Bialystok": [1202,436,127,76], + "Brasov": [1339,1556,127,75], + "Bratislava": [539,1013,127,76], + "Brno": [521,904,127,76], + "Bucuresti": [1186,1837,127,76], + "Budapest": [809,1249,127,76], + "Bulgarian Writers": [838,2192,127,76], + "Burgas": [1289,2152,127,76], + "Bydgoszcz": [872,388,127,76], + "Catholic Church, Czechoslovakia": [692,1010,127,75], + "Catholic Church, Hungary": [409,1126,127,76], + "Catholic Church, Poland": [802,558,127,75], + "Ceske Budejovice": [260,765,127,77], + "Charles University": [491,677,128,76], + "Cluj-Napoca": [970,1429,127,76], + "Constanta": [1443,1925,127,76], + "Craiova": [977,1793,127,76], + "Czech Writers": [573,773,127,76], + "Debrecen": [1000,1192,127,76], + "Dresden": [343,479,127,76], + "Eotvos Lorand University": [658,1314,127,76], + "Erfurt": [38,455,127,76], + "Galati": [1409,1778,127,76], + "Gdansk": [896,277,127,76], + "German Writers": [81,239,127,76], + "Gyor": [560,1129,127,76], + "Halle": [231,357,127,75], + "Harghita/Covasna": [1186,1560,127,75], + "Hungarian Writers": [452,1322,127,76], + "Iasi": [1369,1395,127,76], + "Jagiellonian University": [870,867,127,76], + "Karl-Marx-Stadt": [184,492,127,75], + "Katowice": [733,723,127,76], + "Kosice": [995,1037,127,76], + "Krakow": [911,761,127,76], + "Leipzig": [387,379,127,76], + "Lodz": [959,620,127,76], + "Lublin": [1124,754,127,76], + "Lutheran Church": [391,271,127,76], + "Magdeburg": [79,352,127,75], + "Miskolc": [851,1146,127,76], + "Orthodox Church, Bulgaria": [1130,1956,127,76], + "Orthodox Church, Romania": [1094,1700,127,76], + "Ostrava": [673,868,127,75], + "Pecs": [626,1406,127,75], + "Pleven": [979,1948,127,76], + "Ploiesti": [1356,1671,127,76], + "Plovdiv": [987,2209,127,75], + "Plzen": [211,615,127,76], + "Polish Writers": [1051,883,127,75], + "Poznan": [671,452,127,76], + "Praha": [412,782,127,75], + "Presov": [844,1010,127,75], + "Razgrad": [1219,2057,127,76], + "Romanian Writers": [947,1625,127,75], + "Rostock": [299,53,127,76], + "Ruse": [1277,1956,127,76], + "Schwerin": [148,86,127,76], + "Sliven": [1144,2251,127,75], + "Sofia": [983,2098,127,76], + "Sofia University": [828,2095,127,76], + "Stara Zagora": [1133,2153,127,75], + "Szczecin": [574,263,127,75], + "Szeged": [812,1364,127,76], + "Szekesfehervar": [571,1223,127,75], + "Szombathely": [410,1224,127,76], + "Targu Mures": [1169,1443,127,76], + "Tatabanya": [706,1126,127,75], + "Timisoara": [767,1531,127,76], + "Varna": [1387,2051,127,76], + "Walter Ulbricht Academy": [234,240,127,76], + "Warszawa": [1032,490,127,75], + "Wroclaw": [595,565,127,75], + "action_1": [708,143,48,44], + "action_8": [1080,143,47,43], + "country_bulgaria": [915,1999,46,41], + "country_czechoslovakia": [463,624,44,39], + "country_east_germany": [560,160,43,37], + "country_hungary": [1034,1319,44,39], + "country_poland": [1188,292,44,39], + "country_romania": [1287,1349,44,39], + "event_solidarity_legalized": [779,270,44,43], + "event_the_wall": [222,179,40,41], + "tst_com_1": [53,2257,47,47], + "tst_com_7": [469,2257,47,47], + "tst_com_8": [556,2257,47,47], + "tst_dem_1": [53,2128,47,47], + "tst_dem_7": [469,2128,47,47], + "tst_dem_8": [556,2128,47,47], + "turn_1": [655,81,47,48], + "turn_10": [1133,80,48,48], + "ussr_1": [1381,1080,48,48], + "ussr_2": [1381,1134,48,48], + "ussr_3": [1381,1188,48,48], + "ussr_4": [1381,1243,48,48], + "ussr_5": [1381,1297,48,48], + "vp_0": [843,2425,55,51], + "vp_1": [883,2395,55,50], + "vp_19": [1440,2395,55,50], + "vp_2": [913,2455,56,51], + "vp_20": [1471,2455,55,51], + "vp_neg_1": [803,2455,56,51], + "vp_neg_19": [246,2456,55,50], + "vp_neg_2": [772,2395,56,51], + "vp_neg_20": [215,2395,55,51], +} -- cgit v1.2.3 From 3e30593e9986187aff35a4440bdbcb309025c58c Mon Sep 17 00:00:00 2001 From: Tor Andersson Date: Sat, 26 Oct 2024 00:12:25 +0200 Subject: Move event reminder location on top of Yugoslavia. Initialize marker locations to their starting positions. --- play.css | 7 ++++--- play.html | 27 ++++++--------------------- play.js | 6 +++++- 3 files changed, 15 insertions(+), 25 deletions(-) (limited to 'play.js') diff --git a/play.css b/play.css index d98c8ce..c339351 100644 --- a/play.css +++ b/play.css @@ -109,10 +109,11 @@ body.Communist header.your_turn { background-color: hsl(355, 70%, 75%); } #event_reminder_list { position: absolute; display: flex; - flex-rap: wrap; + flex-wrap: wrap; gap: 5px; - bottom: 165px; - right: 195px; + top: 1650px; + left: 600px; + width: 200px; } .marker { diff --git a/play.html b/play.html index eb2f495..473be26 100644 --- a/play.html +++ b/play.html @@ -53,27 +53,12 @@
-
-
-
-
-
-
- - +
+
+
+
+
+
diff --git a/play.js b/play.js index 9ac9e60..4658044 100644 --- a/play.js +++ b/play.js @@ -284,7 +284,8 @@ function on_update() { if (!ui.spaces) create_ui() - // UPDATE ASIDE + // UPDATE PLAYER INFO + if (view.is_pwr_struggle) { roles.Democrat.stat.textContent = `${view.democrat_power_hand} Power cards` roles.Communist.stat.textContent = `${view.communist_power_hand} Power cards` @@ -292,9 +293,11 @@ function on_update() { roles.Democrat.stat.textContent = `${view.democrat_hand} cards` roles.Communist.stat.innerText = `${view.communist_hand} cards` } + ui.turn_info.innerText = `Strategy deck: ${view.strategy_deck} cards` // UPDATE TRACK MARKERS + layout_turn_marker() layout_round_marker() layout_stability_marker() @@ -338,6 +341,7 @@ function on_update() { ui.event_reminder_list.appendChild(ui.events[id]) // UPDATE INFLUENCE VALUES + for (let s = 1; s <= last_space; ++s) { const demInfl = view.demInfl[s] const comInfl = view.comInfl[s] -- cgit v1.2.3 From ea8755f9fe54ea911cdd864c5cfc01d708bdafb4 Mon Sep 17 00:00:00 2001 From: Tor Andersson Date: Sat, 26 Oct 2024 00:33:08 +0200 Subject: add played power card panel --- play.html | 24 ++++++++++++++---------- play.js | 7 ++++++- rules.js | 3 ++- 3 files changed, 22 insertions(+), 12 deletions(-) (limited to 'play.js') diff --git a/play.html b/play.html index 473be26..f510ba0 100644 --- a/play.html +++ b/play.html @@ -66,6 +66,20 @@
+ +
+
Played Power Card
+
+
+
+
Ceausescu Cards
+
+
+
+
Power Struggle Hand
+
+
+
Cards on the Table
@@ -84,16 +98,6 @@
- -
-
Ceausescu Cards
-
-
-
-
Power Struggle Hand
-
-
-
Opponent Hand
diff --git a/play.js b/play.js index 4658044..770e6d5 100644 --- a/play.js +++ b/play.js @@ -40,6 +40,7 @@ const ui = { event_reminder_list: document.getElementById("event_reminder_list"), played_card: document.getElementById("played_card"), + played_power_card: document.getElementById("played_power_card"), hand: document.getElementById("hand"), power_hand: document.getElementById("power_hand"), opp_hand: document.getElementById("opp_hand"), @@ -372,6 +373,10 @@ function on_update() { if (view.played_card > 0) ui.played_card.appendChild(ui.cards[view.played_card]) + ui.played_power_card.replaceChildren() + if (view.played_power_card > 0) + ui.played_power_card.appendChild(ui.power_cards[view.played_power_card]) + ui.samizdat_card.replaceChildren() if (view.samizdat > 0) ui.samizdat_card.appendChild(ui.cards[view.samizdat]) @@ -383,7 +388,7 @@ function on_update() { ui.power_hand.replaceChildren() if (view.power_hand) for (let c of view.power_hand) - ui.hand.appendChild(ui.power_cards[c]) + ui.power_hand.appendChild(ui.power_cards[c]) ui.opp_hand.replaceChildren() if (view.opp_hand) diff --git a/rules.js b/rules.js index 6ce54dd..64d4396 100644 --- a/rules.js +++ b/rules.js @@ -192,7 +192,8 @@ exports.view = function(state, player) { } if (game.is_pwr_struggle) { - view.strategy_discard = game.power_struggle_discard + view.power_struggle_discard = game.power_struggle_discard + view.played_power_card = game.played_power_card, } else { view.strategy_discard = game.strategy_discard } -- cgit v1.2.3 From 4cc31a4a900a93473f98a23a9de78ffe7001dbff Mon Sep 17 00:00:00 2001 From: Tor Andersson Date: Sat, 26 Oct 2024 00:36:46 +0200 Subject: show power card tooltip --- play.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) (limited to 'play.js') diff --git a/play.js b/play.js index 770e6d5..319f79c 100644 --- a/play.js +++ b/play.js @@ -476,7 +476,7 @@ function sub_card_name(match, p1) { function sub_power_card_name(match, p1) { let x = p1 | 0 - return `${power_cards[x].name}` + return `${power_cards[x].name}` } function sub_power_card_value(match, p1) { @@ -513,6 +513,14 @@ function on_blur_card_tip() { document.getElementById("tooltip").classList = "card hide" } +function on_focus_power_card_tip(card_number) { + document.getElementById("tooltip").className = "card power_" + card_number +} + +function on_blur_power_card_tip() { + document.getElementById("tooltip").classList = "card hide" +} + function on_focus_space_tip(id) { ui.spaces[id].classList.add("tip") } -- cgit v1.2.3