path: root/play.js

'use strict';
Object.defineProperty(exports, "__esModule", { value: true });
const BONUSES_COUNT = 2;
const CARD_COUNT = 62;
const MEDAILLONS_COUNT = 5;
const STANDEES_COUNT = 5;
let ui = {
    map: document.getElementById('map'),
    hand: document.getElementById('hand'),
    current_events: document.getElementById('current_events'),
    tracks: document.getElementById('tracks'),
    bonuses: [],
    fronts: {},
    frontValues: {},
    medaillons: [],
    spaces: [],
    standees: [],
    pieces: [],
    cards: [],
};
let action_register = [];
const LAYOUT_BONUSES = [
    [435, 481],
    [493, 481],
];
const LAYOUT_CURRENT_EVENTS = [
    [172, 648],
    [309, 648],
    [445, 648],
    [584, 648],
];
const LAYOUT_MEDAILLONS = [
    [364, 556],
    [415, 556],
    [466, 556],
    [517, 556],
    [568, 556],
];
const LAYOUT_TRACKS = [
    [
        [581, 46],
        [618, 46],
        [655, 46],
        [691, 46],
        [728, 46],
        [765, 46],
        [801, 46],
        [838, 46],
        [874, 46],
        [911, 46],
        [948, 46],
    ],
    [
        [581, 156],
        [618, 156],
        [655, 156],
        [691, 156],
        [728, 156],
        [765, 156],
        [801, 156],
        [838, 156],
        [874, 156],
        [911, 156],
        [948, 156],
    ],
    [
        [581, 267],
        [618, 267],
        [655, 267],
        [691, 267],
        [728, 267],
        [765, 267],
        [801, 267],
        [838, 267],
        [874, 267],
        [911, 267],
        [948, 267],
    ],
    [
        [581, 378],
        [618, 378],
        [655, 378],
        [691, 378],
        [728, 378],
        [765, 378],
        [801, 378],
        [838, 378],
        [874, 378],
        [911, 378],
        [948, 378],
    ],
    [
        [581, 489],
        [618, 489],
        [655, 489],
        [691, 489],
        [728, 489],
        [765, 489],
        [801, 489],
        [838, 489],
        [874, 489],
        [911, 489],
        [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;
    e.my_id = id;
    e.onmousedown = on_click_action;
    action_register.push(e);
}
function on_click_action(evt) {
    console.log('on_click_action', evt);
    if (evt.button === 0)
        if (send_action(evt.target.my_action, evt.target.my_id))
            evt.stopPropagation();
}
function is_action(action, arg) {
    if (arg === undefined)
        return !!(view.actions && view.actions[action] === 1);
    return !!(view.actions &&
        view.actions[action] &&
        view.actions[action].includes(arg));
}
let on_init_once = false;
function on_init() {
    console.log('on_init');
    if (on_init_once)
        return;
    on_init_once = true;
    console.log('ui', ui);
    console.log('document', document);
    for (let b = 0; b < BONUSES_COUNT; ++b) {
        let e = (ui.bonuses[b] = document.createElement('div'));
        e.className = 'bonus';
        e.setAttribute('data-bonus-id', '' + b);
        e.style.left = LAYOUT_BONUSES[b][0] + 'px';
        e.style.top = LAYOUT_BONUSES[b][1] + 'px';
        LAYOUT_BONUSES;
        register_action(e, 'bonus', b);
        ui.map.appendChild(ui.bonuses[b]);
    }
    for (let m = 0; m < MEDAILLONS_COUNT; ++m) {
        let e = (ui.medaillons[m] = document.createElement('div'));
        e.className = 'medaillon';
        e.setAttribute('data-medaillon-id', '' + m);
        register_action(e, 'medaillon', m);
        ui.map.appendChild(ui.medaillons[m]);
    }
    for (let s = 0; s < STANDEES_COUNT; ++s) {
        let e = (ui.standees[s] = document.createElement('div'));
        e.className = 'standee';
        e.setAttribute('data-standee-id', '' + s);
        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]);
}
function on_update() {
    console.log('on_update', view);
    on_init();
    ui.current_events.replaceChildren();
    for (let i = 0; i < view.current_events.length; i++) {
        const cardId = view.current_events[i];
        ui.current_events.appendChild(ui.cards[cardId]);
        ui.cards[cardId].classList.add('event');
        ui.cards[cardId].style.left = LAYOUT_CURRENT_EVENTS[i][0] + 'px';
        ui.cards[cardId].style.top = LAYOUT_CURRENT_EVENTS[i][1] + 'px';
    }
    for (let bonus_id of Object.keys(view.bonuses)) {
        ui.bonuses[bonus_id].setAttribute('data-bonus-on', view.bonuses[bonus_id] + 0);
    }
    ui.hand.replaceChildren();
    for (let c of view.hand) {
        ui.cards[c].classList.remove('selected');
        ui.hand.appendChild(ui.cards[c]);
        if (c === view.selected_card) {
            ui.cards[c].classList.add('selected');
        }
    }
    ;
    for (let i = 0; i < view.tracks.length; ++i) {
        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 i = 0; i < view.medaillons.length; ++i) {
        if (view.medaillons[i] !== null) {
            ui.medaillons[i].style.left = LAYOUT_MEDAILLONS[i][0] + 'px';
            ui.medaillons[i].style.top = LAYOUT_MEDAILLONS[i][1] + 'px';
        }
    }
    for (let e of action_register)
        e.classList.toggle('action', is_action(e.my_action, e.my_id));
    action_button('Anarchist', 'Anarchist');
    action_button('Communist', 'Communist');
    action_button('Moderate', 'Moderate');
    action_button('draw_card', 'Draw card');
    action_button('play_for_ap', 'Play card for Action Points');
    action_button('play_for_event', 'Play card for Event');
    action_button('spend_hp', 'Spend Hero Points');
    action_button('add_glory', 'Add Glory');
    action_button('up', 'Up');
    action_button('down', 'Down');
    action_button('next', 'Next');
    action_button('done', 'Done');
    action_button('undo', 'Undo');
}
function on_log(text) {
    let p = document.createElement('div');
    if (text.match(/^>/)) {
        text = text.substring(1);
        p.className = 'i';
    }
    text = text.replace(/&/g, '&amp;');
    text = text.replace(/</g, '&lt;');
    text = text.replace(/>/g, '&gt;');
    if (text.match(/^\.h1/)) {
        text = text.substring(4);
        p.className = 'h1';
    }
    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';
    }
    p.innerHTML = text;
    return p;
}