diff options
Diffstat (limited to 'play.js')
| -rw-r--r-- | play.js | 101 |
1 files changed, 68 insertions, 33 deletions
@@ -9,9 +9,32 @@ const TRACK_COUNT = 5; const TRACK_LENGTH = 11; const FACTIONS = ['a', 'c', 'm']; console.log('roles', document.getElementById('roles')); -let ui = { +const ui = { map: document.getElementById('map'), markers: document.getElementById('markers'), + fronts: { + a: { + front: document.getElementById('aragon_front'), + value: document.querySelector('#aragon_front .value'), + contributions: document.querySelector('#aragon_front .contributions'), + }, + m: { + front: document.getElementById('madrid_front'), + value: document.querySelector('#madrid_front .value'), + contributions: document.querySelector('#madrid_front .contributions'), + }, + n: { + front: document.getElementById('northern_front'), + value: document.querySelector('#northern_front .value'), + contributions: document.querySelector('#northern_front .contributions'), + }, + s: { + front: document.getElementById('southern_front'), + value: document.querySelector('#southern_front .value'), + contributions: document.querySelector('#southern_front .contributions'), + }, + }, + glory_container: document.getElementById('glory'), hand: document.getElementById('hand'), current_events: document.getElementById('current_events'), stats: { @@ -35,10 +58,10 @@ let ui = { }, tracks: document.getElementById('tracks'), hero_points: document.querySelector('#role_Anarchist .role_stat'), + year: document.getElementById('year'), blank_markers: [[], [], [], [], []], bonuses: [], - fronts: {}, - frontValues: {}, + tokens_on_front: {}, glory: [], medaillons: [], spaces: [], @@ -142,22 +165,6 @@ const LAYOUT_TRACKS = [ [948, 489], ], ]; -(function build_map() { - data.fronts.forEach((front, index) => { - const { id, top, left } = front; - const element = (ui.fronts[index] = document.createElement('div')); - element.classList.add('front'); - element.style.left = `${left}px`; - element.style.top = `${top}px`; - element.setAttribute('data-front-id', `${id}`); - ui.map.appendChild(element); - const frontValueElement = (ui.frontValues[front.id] = - document.createElement('span')); - frontValueElement.classList.add('value'); - register_action(element, 'front', id); - element.appendChild(frontValueElement); - }); -})(); console.log('ui', ui); function register_action(e, action, id) { e.my_action = action; @@ -205,8 +212,8 @@ function on_init() { } for (let g = 0; g < GLORY_COUNT; ++g) { let e = (ui.glory[g] = document.createElement('div')); - e.className = 'glory'; - ui.map.appendChild(ui.glory[g]); + e.className = 'faction_token'; + ui.glory_container.appendChild(ui.glory[g]); e.style.left = LAYOUT_GLORY[g][0] + 'px'; e.style.top = LAYOUT_GLORY[g][1] + 'px'; } @@ -224,14 +231,24 @@ function on_init() { register_action(e, 'standee', s); ui.tracks.appendChild(ui.standees[s]); } - console.log('standees', ui.standees); for (let c = 1; c < CARD_COUNT; ++c) { let e = (ui.cards[c] = document.createElement('div')); e.className = 'card'; e.setAttribute('data-card-id', '' + data.cards[c].id); register_action(e, 'card', c); } - console.log('action_register', action_register[0]); + data.fronts.forEach((front) => { + ui.tokens_on_front[front.id] = {}; + FACTIONS.forEach((faction_id) => { + let e = (ui.tokens_on_front[front.id][faction_id] = + document.createElement('div')); + e.className = 'faction_token'; + e.setAttribute('data-faction-id', faction_id); + }); + }); + Object.keys(ui.fronts).forEach((front_id) => { + register_action(ui.fronts[front_id].front, 'front', front_id); + }); } function on_update() { console.log('on_update', view); @@ -270,8 +287,13 @@ function on_update() { ui.standees[i].style.left = LAYOUT_TRACKS[i][view.tracks[i]][0] + 'px'; ui.standees[i].style.top = LAYOUT_TRACKS[i][view.tracks[i]][1] + 'px'; } - for (let frontId of Object.keys(view.fronts)) { - ui.frontValues[frontId].replaceChildren(view.fronts[frontId]); + for (let front_id of Object.keys(view.fronts)) { + const front_data = view.fronts[front_id]; + ui.fronts[front_id].value.replaceChildren(front_data.value); + ui.fronts[front_id].contributions.replaceChildren(); + for (let faction_id of front_data.contributions) { + ui.fronts[front_id].contributions.appendChild(ui.tokens_on_front[front_id][faction_id]); + } } for (let i = 0; i < view.medaillons.length; ++i) { if (view.medaillons[i] !== null) { @@ -291,6 +313,7 @@ function on_update() { } for (let e of action_register) e.classList.toggle('action', is_action(e.my_action, e.my_id)); + ui.year.replaceChildren(`Year ${view.year}`); action_button('add_to_front', '+1 to a Front'); action_button('soviet_support', 'Soviet Support'); action_button('collectivization', 'Collectivization'); @@ -322,6 +345,10 @@ function on_update() { } function on_log(text) { let p = document.createElement('div'); + if (text.match(/^>>/)) { + text = text.substring(2); + p.className = "ii"; + } if (text.match(/^>/)) { text = text.substring(1); p.className = 'i'; @@ -333,17 +360,25 @@ function on_log(text) { text = text.substring(4); p.className = 'h1'; } - else if (text.match(/^\.h2/)) { - text = text.substring(4); - p.className = 'h2'; + else if (text.match(/^\.h2\.Moderate/)) { + text = text.substring(13); + p.className = 'h2 moderate'; } - else if (text.match(/^\.h3\.allies/)) { - text = text.substring(10); - p.className = 'h3 allies'; + else if (text.match(/^\.h2\.Anarchist/)) { + text = text.substring(14); + p.className = 'h2 anarchist'; } - else if (text.match(/^\.h3\.germans/)) { + else if (text.match(/^\.h2\.Communist/)) { + text = text.substring(14); + p.className = 'h2 communist'; + } + else if (text.match(/^\.h2\.fascist/)) { text = text.substring(11); - p.className = 'h3 germans'; + p.className = 'h2 fascist'; + } + else if (text.match(/^\.h2/)) { + text = text.substring(4); + p.className = 'h2'; } else if (text.match(/^\.h3/)) { text = text.substring(4); |