Update play.js

1 files changed, 326 insertions, 52 deletions

diff --git a/play.js b/play.js
index db60e1b..0e7db10 100644
--- a/play.js
+++ b/play.js
@@ -6,14 +6,15 @@ const options = 'none'
 

 const last_card = 110

 const last_power_card = 52

+let hover_timeout

 

 const toolbar = document.getElementById('toolbar')

 const vpMarker = document.getElementById('vp')

-const mapContainer = document.querySelector('.map')

+const counters = document.getElementById('counters')

 

 const countries= [

 	null,

-	"East Germany",

+	"East_Germany",

 	"Poland",

 	"Czechoslovakia",

 	"Hungary",

@@ -21,22 +22,40 @@ const countries= [
 	"Bulgaria"

 ]

 

+const aside_events = [

+	"eco_glasnost", 

+	"helsinki_final_act",

+	"st_nicholas_church",

+	"we_are_the_people"

+]

+let aside_events_showing = false

+let show_discard = false

+

 const overlay = document.getElementById('overlay');

 const spaceNameElement = document.getElementById('space-name');

 const spaceCharacteristicsElement = document.getElementById('space-characteristics');

 

-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

+

+// 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}`;

-})

+	})

+

 

-function create_ui() {

+ // Create map areas dynamically based on coordinates

+

+ function create_ui() {

 

 // CREATE MAP

 

 	spaces.forEach((space) => {

+

+

 		if (space && space.box) {

+

+		//CREATE SPACES

                 const { x, y, h, w } = space.box;

                 const spaceArea = document.createElement('div');

                 spaceArea.classList.add('space-area', space.country)

@@ -48,7 +67,8 @@ function create_ui() {
 				spaceArea.style.zIndex = 2;

 				spaceArea.my_space = space.name_unique;  

         		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'

@@ -58,6 +78,7 @@ function create_ui() {
         		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'

@@ -68,6 +89,7 @@ function create_ui() {
         		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'

@@ -77,6 +99,7 @@ function create_ui() {
         		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'

@@ -86,8 +109,9 @@ function create_ui() {
 				comInflValue.my_space = space.name_unique;  

         		comInflValue.addEventListener('mousedown', on_click_space);

 				spaceArea.appendChild(comInflValue)

+			//} 

 		

-		mapContainer.appendChild(spaceArea);

+		counters.appendChild(spaceArea);

 		}

 	});

 

@@ -101,8 +125,19 @@ function create_ui() {
 		hand_card.src = `cards/e${c}.gif`

 		hand_card.my_card = c;  

         hand_card.addEventListener('mousedown', on_click_card);

+		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.cards.push(hand_card);

 	}

+	

+

 

 	for (let card of power_cards) {

 		if (!card) continue;

@@ -116,30 +151,37 @@ function create_ui() {
 	}

 }

 

-

 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)) {

 			evt.stopPropagation();

         } else if (send_action('sc', space)) {

+			//console.log('send_action with sc:', space);

 			evt.stopPropagation();

 		} else {

+           // console.log('send_action failed for space:', space);

         }

     }

     //hide_popup_menu();

 }

 

 function on_click_card(evt) {

+	//console.log('on_click_card')

 	if (evt.button === 0) {

         const card = evt.target.my_card;

+      //  console.log('on_click_card_called with card:', card);

         if (send_action('card', card)) {

             evt.stopPropagation();

-        } 

+        } else {

+        //    console.log('send_action failed for card:', card);

+        }

     }

 }

 

 function is_action(action) {

+	//console.log('is_action called with: ', action)

 	if (view.actions && view.actions[action])

 		return true

 	return false

@@ -154,6 +196,13 @@ function on_log(text) { // eslint-disable-line no-unused-vars
 		p.className = 'i'

 	}

 

+	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)

+	

+

 	if (text.match(/^\.h1/)) {

 		text = text.substring(4)

 		p.className = 'h1'

@@ -186,7 +235,7 @@ let ui = {
 		document.getElementById("role_Communist"),

 	],

 	cards: [ null ],

-	power_cards: [],

+	power_cards: [null],

 	dem_hand_count: document.getElementById("role_stat_dem"),

 	com_hand_count: document.getElementById("role_stat_com"),

 	played_card: 0,

@@ -203,6 +252,10 @@ let ui = {
 }

 

 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 => {

@@ -217,22 +270,25 @@ function on_update() {
 	//Check influence values

 	const pieces = view.pieces

 	pieces.forEach(piece => {

+		if (!piece) return

 		const dem_marker = document.getElementById(`${piece.name_unique}_demInfl`);

 		const dem_number = document.getElementById(`${piece.name_unique}_demInflValue`);

 		const com_marker = document.getElementById(`${piece.name_unique}_comInfl`);

 		const com_number = document.getElementById(`${piece.name_unique}_comInflValue`);

-		

+

 		dem_number.innerText=piece.demInfl

 		if (piece.demInfl > 0) {

 			dem_marker.style.display = 'block';

 			dem_number.style.display = 'block';

 

-			if(piece.demInfl - piece.comInfl >= piece.stability){

+			if(piece.demCtrl === 1){

 				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';

@@ -243,12 +299,16 @@ function on_update() {
 			com_marker.style.display = 'block';

 			com_number.style.display = 'block';

 

-			if(piece.comInfl - piece.demInfl >= piece.stability){

+			if(piece.comCtrl === 1){

 				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';

@@ -260,74 +320,156 @@ function on_update() {
 // UPDATE COUNTRY MARKERS

 	for (let i = 1; i < countries.length; i++) {

 		const country = countries[i];

-		const marker = document.getElementById(country);

+		const marker = document.getElementById(country)

+		const times_held = document.getElementById(`${country}_times_held`)

 

 		if (view.revolutions[country]) {

 			marker.classList.add('revolution')

+			marker.classList.remove('held')

 			marker.style.display = 'block'

+			times_held.classList.add('outlined_text')

 		} else if (view.times_held[country] > 0 ) {

+			console.log('setting ', country)

 			marker.classList.add('held')

 			marker.style.display = 'block'

+			times_held.innerHTML = view.times_held[country]

 		}

 		else {marker.style.display = 'none'}

 	} 

 

 // UPDATE ASIDE

-

-	ui.dem_hand_count.innerText = `${view.democrat_hand} cards in hand`

-	ui.com_hand_count.innerText = `${view.communist_hand} cards in hand`

+	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 in hand`

+		ui.com_hand_count.innerText = `${view.communist_hand} cards in hand`

+	}

 

 // UPDATE HAND

-

 	document.getElementById("hand").replaceChildren()

-	document.getElementById("events").replaceChildren()

+	document.getElementById("played_card").replaceChildren()

 		

 	if (view.hand.length && view.is_pwr_struggle === false) {

 		document.getElementById("hand_panel").classList.remove("hide")

 		for (let c of view.hand) {

-			document.getElementById("hand").appendChild(ui.cards[c]);

-		}	

+			let card = ui.cards[c]

+			document.getElementById("hand").appendChild(card);

+			if (view.valid_cards.includes(c)) {

+                card.classList.add('selected')

+            } else {

+				card.classList.remove('selected')

+			}

+			card.classList.remove('discard_card')

+		}

 	} else {

 		document.getElementById("hand_panel").classList.add("hide")

 	}

 

-// EVENT PANEL

-	if (view.played_card > 0) {

-		document.getElementById("events_panel").classList.remove("hide")

-		document.getElementById("events").appendChild(ui.cards[view.played_card]);

-	} else {

-		document.getElementById("events_panel").classList.add("hide")

+// UPDATE DISCARD

+document.getElementById("discard").replaceChildren()

+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 FOR EVENTS

+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 {

+			discard_card.classList.remove('selected')

+		}

+	}	

+} else {

+	if (!show_discard) {

+		document.getElementById("discard_panel").classList.add("hide")

 	}

+}

 

+// 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]);

+} else {

+	document.getElementById("played_card_panel").classList.add("hide")

+}

+

+// EVENTS PANEL

+document.getElementById("events").replaceChildren()

+if (view.table_cards.length > 0) {

+	document.getElementById("events_panel").classList.remove("hide")

+	for (let c of view.table_cards) {

+		let card = ui.cards[c]

+		document.getElementById("events").appendChild(card);

+		card.classList.remove("hand_card")

+		card.classList.add('event_card');

+		}	

+	} else {

+	document.getElementById("events_panel").classList.add("hide")

+}

+

+// 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]

+			//console.log('power_card:', power_card)

+			document.getElementById("opp_hand").appendChild(card);	

+		}	

+	} else {

+		document.getElementById("opp_hand_panel").classList.add("hide")

+	}

+} else {

+	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.power_cards[c]

+			//console.log('power_card:', power_card)

+			document.getElementById("opp_hand").appendChild(card);	

+		}	

+	} else {

+		document.getElementById("opp_hand_panel").classList.add("hide")

+	}

+}

 

 // POWER STRUGGLE HAND

 	document.getElementById("power_hand").replaceChildren()

 

-	if (view.is_pwr_struggle) {

+	if (view.power_hand.length && view.is_pwr_struggle) {

 		document.getElementById("power_panel").classList.remove("hide")

-

-

-const power_hand = document.getElementById("power_hand");

-

-if (!power_hand) {

-    console.error("Element with id 'power_hand' not found.");

-} else {

-	for (let card_number of view.power_hand) {

-        	const power_card = ui.power_cards.find(card => card.my_card === card_number);

-        	if (power_card instanceof Node) {

-			const cardInfo = power_cards.find(card => card.number === card_number);

-            if (view.valid_cards.includes(card_number)) {

+		for (let c of view.power_hand) {

+			let power_card = ui.power_cards[c]

+			document.getElementById("power_hand").appendChild(power_card);

+			if (view.valid_cards.includes(c)) {

                 power_card.classList.add('selected');

-            }			

-            power_hand.appendChild(power_card);

-        } 

-    }

-}

+            }	

+		}	

 	} else {

-

 		document.getElementById("power_panel").classList.add("hide")

 	}

 

+// CEAUSESCU

+

+if (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);

+	}	

+} else {

+	document.getElementById("ceausescu_panel").classList.add("hide")

+}

+

 // UPDATE BOARD MARKERS

 	ui.turn.className = `t${view.turn}`

 	if (view.round_player === 'Democrat') {

@@ -338,15 +480,77 @@ if (!power_hand) {
 	ui.stability.className = `s${view.stability}`

 	ui.dem_TST.className = `tst${view.dem_tst}`

 	ui.com_TST.className = `tst${view.com_tst}`

-	ui.vp.className = `vp${view.vp}`

+	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)

+

+// UPDATE EVENT MARKERS

+

+for (let id in view.persistent_events) {

+	let marker = document.getElementById(id);

+	if (marker && view.persistent_events[id]) {

+		marker.style.display = 'block';

+	} else if (marker && !view.persistent_events[id]) {

+		marker.style.display = 'none'

+	}

+}

 

-console.log('strategy discard: ', view.strategy_discard)

-console.log('valid spaces: ', view.valid_spaces)

+// CHECK WHETHER ANY EVENT MARKERS ARE SHOWING IN THE ASIDE

 

+for (let id of aside_events) {

+    if (view.persistent_events[id]) {

+        aside_events_showing = true; 

+    } 

+}

+

+if (aside_events_showing) {

+	document.getElementById('no_events').style.display = 'none'

+}

+

+let systematization = document.getElementById('systematization')

+if (view.persistent_events['systematization'] > 0) {

+	systematization.style.left = (spaces[view.persistent_events['systematization']].box.x +20) +  'px';

+	systematization.style.top = spaces[view.persistent_events['systematization']].box.y + 'px';

+}

+

+let tyrant = document.getElementById('the_tyrant_is_gone')

+if (view.persistent_events['the_tyrant_is_gone'] > 0) {

+	tyrant.style.left = (spaces[view.persistent_events['the_tyrant_is_gone']].box.x - 41) +  'px';

+	tyrant.style.top = (spaces[view.persistent_events['the_tyrant_is_gone']].box.y + 23) + 'px';

+} else {tyrant.style.display = 'none'}

+

+	action_button("yes", "Yes")

+	action_button("no", "No")

+	action_button("start", "Start")

+	action_button("check", "Check held cards")

+	action_button("tst_7", "Cancel opponent event")

+	action_button("tst_8", "Event and operations")

+	action_button("end", "End Game")

+	action_button("continue", "Continue playing")

+	action_button("east_germany", "East Germany")

+	action_button("poland", "Poland")

+	action_button("czechoslovakia", "Czechoslovakia")

+	action_button("hungary", "Hungary")

+	action_button("romania", "Romania")

+	action_button("bulgaria", "Bulgaria")

+	action_button("extra", "Take action round")

+	action_button("pass", "Pass")

+	action_button("remove", "Remove influence")

+	action_button("add", "Add influence")

+	action_button("ops", "Operations")

+	action_button("discard", "Discard")

 	action_button("strike", "Strike")

 	action_button("march", "March")

 	action_button("rally", "Rally in the Square")

 	action_button("petition", "Petition")	

+	action_button("bonus", "Calculate VP bonus")

 	action_button("scoring", "Score country")

 	action_button("surrender", "Surrender Power")

 	action_button("retain", "Retain Power")

@@ -357,12 +561,82 @@ console.log('valid spaces: ', view.valid_spaces)
 	action_button("draw", "Draw cards")	

 	action_button("scoring", "Scoring")	

 	action_button("event", "Event")

+	action_button("opp_event", "Resolve opponent event")

 	action_button("influence", "Influence")

+	action_button("support_check", "Support Checks")

 	action_button("tst", "Tiananmen Square Track")

-	action_button("support_check", "Support Check")

 	action_button("roll", "Roll a die")

 	action_button("done", "Done")

 	action_button("undo", "Undo")

+

+

+}

+

+// =========================== LOG FUNCTIONS ==============================================

+

+function sub_card_name(match, p1) {

+	let x = p1 | 0

+	return `<span class="card_name" onmouseenter="on_focus_card_tip(${x})" onmouseleave="on_blur_card_tip()">${cards[x].name}</span>`

+}

+

+function sub_power_card_name(match, p1) {

+	let x = p1 | 0

+	return `<span class="card_name">${power_cards[x].name}</span>`

+}

+

+function sub_power_card_value(match, p1) {

+	let x = p1 | 0

+	return `<span class="card_name">${x}</span>`

+}

+

+function sub_space_name(match, p1) {

+	let x = p1 | 0

+	let id = spaces[x].space_id

+	let name = spaces[x].name_unique

+	return `<span class="space_tip" onmouseenter="on_focus_space_tip(${id})" onmouseleave="on_blur_space_tip(${id})" onclick="on_click_space_tip(${id})">${name}</span>`

+}

+

+function sub_die(match) {

+	return die[match] || match

+}

+

+// =========================== VISUAL FUNCTIONS ==========================================#

+

+function on_focus_card_tip(card_number) { 

+	document.getElementById("tooltip").className = "card card_" + card_number

+}

+

+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)

+}

+

+function on_blur_space_tip(id) {

+	space = document.getElementById(`space_${id}`)

+	space.classList.remove("tip")

+}

+

+function toggle_pieces() {

+	document.getElementById("pieces").classList.toggle("hide")

+}

+

+

+function toggle_discard() {

+	if (show_discard) {

+		show_discard = false

+	} else {

+		show_discard = true

+	}

+	document.getElementById("discard_panel").classList.toggle("hide")

 }