diff options
Diffstat (limited to 'play.ts')
| -rw-r--r-- | play.ts | 125 |
1 files changed, 92 insertions, 33 deletions
@@ -1,6 +1,6 @@ 'use strict'; -import { FactionId, StaticData, View } from './types'; +import { StaticData, View } from './types'; declare function action_button(action: string, text: string): void; // declare function register_action(element: HTMLElement, type: string, s: number): void; @@ -23,9 +23,32 @@ 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: { @@ -49,10 +72,12 @@ let ui = { }, tracks: document.getElementById('tracks'), hero_points: document.querySelector('#role_Anarchist .role_stat'), + year: document.getElementById('year'), blank_markers: [[], [], [], [], []], bonuses: [], - fronts: {}, - frontValues: {}, + // fronts: {}, + tokens_on_front: {}, + // front_values: {}, glory: [], medaillons: [], spaces: [], @@ -164,22 +189,26 @@ const LAYOUT_TRACKS = [ ]; // @ts-ignore -(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); - }); -})(); +// (function build_map() { +// data.fronts.forEach((front) => { +// const { id, top, left } = front; +// const element = (ui.fronts[front.id] = 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); +// register_action(element, 'front', id); + +// // Contribution tokens + +// // Value of front +// const front_value_element = (ui.front_values[front.id] = +// document.createElement('span')); +// front_value_element.classList.add('value'); +// element.appendChild(front_value_element); +// }); +// })(); console.log('ui', ui); @@ -242,10 +271,11 @@ function on_init() { ui.map.appendChild(ui.bonuses[b]); } + // Create glory 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'; } @@ -268,8 +298,6 @@ function on_init() { ui.tracks.appendChild(ui.standees[s]); } - console.log('standees', ui.standees); - // create card elements for (let c = 1; c < CARD_COUNT; ++c) { let e = (ui.cards[c] = document.createElement('div')); @@ -278,7 +306,20 @@ function on_init() { register_action(e, 'card', c); } - console.log('action_register', action_register[0]); + // create tokens to add to fronts + 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); + }) } // @ts-ignore @@ -338,8 +379,13 @@ function on_update() { 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) { @@ -364,6 +410,8 @@ 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'); @@ -401,6 +449,11 @@ 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'; @@ -419,15 +472,21 @@ function on_log(text) { if (text.match(/^\.h1/)) { text = text.substring(4); p.className = 'h1'; + } else if (text.match(/^\.h2\.Moderate/)) { + text = text.substring(13); + p.className = 'h2 moderate'; + } else if (text.match(/^\.h2\.Anarchist/)) { + text = text.substring(14); + p.className = 'h2 anarchist'; + } 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 = 'h2 fascist'; } else if (text.match(/^\.h2/)) { text = text.substring(4); p.className = 'h2'; - } else if (text.match(/^\.h3\.allies/)) { - text = text.substring(10); - p.className = 'h3 allies'; - } else if (text.match(/^\.h3\.germans/)) { - text = text.substring(11); - p.className = 'h3 germans'; } else if (text.match(/^\.h3/)) { text = text.substring(4); p.className = 'h3'; |