Update play.js for consistency with rules.js changes

1 files changed, 137 insertions, 14 deletions

diff --git a/play.js b/play.js
index 42c5d40..c21d880 100644
--- a/play.js
+++ b/play.js
@@ -3,7 +3,7 @@ const scenario = 'standard'
 const options = 'none'

 //const rules = require("./rules")

 

-const dem_infl_markers = []

+const last_card = 110

 

 const stability=0

 const US_tiananmen=0

@@ -63,7 +63,9 @@ const spaceCharacteristicsElement = document.getElementById('space-characteristi
 

  // Create map areas dynamically based on coordinates

 

- function create_map() {

+ function create_ui() {

+

+// CREATE MAP

 

 	spaces.forEach((space) => {

 		if (space && space.box) {

@@ -87,11 +89,10 @@ const spaceCharacteristicsElement = document.getElementById('space-characteristi
 				img.src = `images/US_${space.demInfl}.gif`

 				spaceArea.appendChild(img)

 			} else if (space.demInfl > 0) {*/

-				const dem_img = document.createElement('img')

+				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.src = `images/USd_blank.gif`

 				dem_img.style.zIndex = 1

 				spaceArea.appendChild(dem_img)

 

@@ -111,11 +112,10 @@ const spaceCharacteristicsElement = document.getElementById('space-characteristi
 				img.src = `images/SV_${space.comInfl}.gif`

 				spaceArea.appendChild(img)		

 			} else if (space.comInfl > 0) {*/

-				const com_img = document.createElement('img')

+				const com_img = document.createElement('div')

 				com_img.className='comInfl'

 				com_img.style.display='none'

 				com_img.id=`${space.name_unique}_comInfl`

-				com_img.src = `images/SVd_blank.gif`

 				com_img.style.zIndex = 1

 				spaceArea.appendChild(com_img)

 

@@ -132,16 +132,21 @@ const spaceCharacteristicsElement = document.getElementById('space-characteristi
 		}

 	});

 

-}

+// CREATE CARDS

 

-create_map()

+	for (let c = 1; c <= last_card; ++c) {

 

-//setup()

+		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('mousedown', on_click_card);

+				ui.cards.push(hand_card);

+	}

 

-console.log('Hello')

+}

 

-//function changeInfl() {}

-//function finishSupportCheck() {}

 

 function on_click_space(evt) {

     if (evt.button === 0) {

@@ -156,6 +161,18 @@ function on_click_space(evt) {
     //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 (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])

@@ -164,6 +181,38 @@ function is_action(action) {
 }

 

 

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

+	}

+

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

+		text = text.substring(4)

+		p.className = 'h1'

+	}

+	else if (text.match(/^\.h2d/)) {

+		text = text.substring(5)

+		p.className = 'h2 dem'

+	}

+	else if (text.match(/^\.h2c/)) {

+		text = text.substring(5)

+		p.className = 'h2 com'

+	}

+	else if (text.match(/^\.h2/)) {

+		text = text.substring(4)

+		p.className = 'h2'

+	}

+	else if (text.match(/^\.h3/)) {

+		text = text.substring(4)

+		p.className = 'h3'

+	}

+

+	p.innerHTML = text

+	return p

+}

 

 let ui = {

 	favicon: document.getElementById('favicon'),

@@ -172,14 +221,24 @@ let ui = {
 		document.getElementById("role_Communist"),

 	],

 	cards: [ null ],

+	played_card: 0,

 	events_panel: document.getElementById("events_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 on_update() {

 	console.log('on_update called')

-	console.log('view.actions: ', view.actions)

+	console.log('view.valid_spaces: ', view.valid_spaces)

+	console.log('ui.spaces: ', ui.spaces)

+//	console.log('view.actions: ', view.actions)

 

 	//Check influence values

 	const pieces = view.pieces

@@ -193,6 +252,14 @@ function on_update() {
 		if (piece.demInfl > 0) {

 			dem_marker.style.display = 'block';

 			dem_number.style.display = 'block';

+

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

+				dem_marker.classList.add('controlled')

+				dem_marker.classList.remove('uncontrolled')

+			} else {

+				dem_marker.classList.add('uncontrolled')

+				dem_marker.classList.remove('controlled')

+			}

 		} else {

 			dem_marker.style.display = 'none';

 			dem_number.style.display = 'none';

@@ -201,14 +268,70 @@ function on_update() {
 		if (piece.comInfl > 0) {

 			com_marker.style.display = 'block';

 			com_number.style.display = 'block';

+

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

+				com_marker.classList.add('controlled')

+				com_marker.classList.remove('uncontrolled')

 			} else {

+				com_marker.classList.add('uncontrolled')

+				com_marker.classList.remove('controlled')

+			}

+		} else {

 			com_marker.style.display = 'none';

 			com_number.style.display = 'none';

-			}

+		}

 		

 	});

 

 

+// UPDATE HAND

+

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

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

+	

+	if (view.hand.length) {

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

+		for (let c of view.hand) {

+			//const cardElement = ui.cards[c];

+		//if (cardElement) {

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

+		/*} else {

+			console.error(`Card with key ${c} not found in ui.cards`);

+		}*/

+	}	

+	} 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 BOARD MARKERS

+

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

+	ui.round.className = `dem-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}`

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

+

+

+

+

+

 	action_button("done", "Done")

 	action_button("undo", "Undo")

+	action_button("event", "Event")

+	action_button("influence", "Influence")

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

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

+

 }

+

+

+create_ui()