From f05a9531508822f5dfb51105334444b53fe11b3e Mon Sep 17 00:00:00 2001 From: Frans Bongers Date: Sat, 30 Nov 2024 22:18:21 +0100 Subject: ui setup bonuses and medaillons --- play.js | 179 ++++++++++++++++++++++++++++++++++++++++++++++------------------ 1 file changed, 130 insertions(+), 49 deletions(-) (limited to 'play.js') diff --git a/play.js b/play.js index 9c1b6f2..c39f702 100644 --- a/play.js +++ b/play.js @@ -1,41 +1,109 @@ 'use strict'; Object.defineProperty(exports, "__esModule", { value: true }); -/* global view, player, send_action, action_button */ -// const SPACE_COUNT = 64; -// const PIECE_COUNT = 32; +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]], + [ + [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], + ], ]; -// @ts-ignore (function build_map() { - // @ts-ignore - const spaces = document.getElementById('spaces'); - console.log('build_map', data); data.fronts.forEach((front, index) => { const { id, top, left } = front; const element = (ui.fronts[index] = document.createElement('div')); @@ -43,8 +111,9 @@ const LAYOUT_TRACKS = [ element.style.left = `${left}px`; element.style.top = `${top}px`; element.setAttribute('data-front-id', `${id}`); - spaces.appendChild(element); - const frontValueElement = (ui.frontValues[front.id] = document.createElement('span')); + 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); @@ -78,20 +147,23 @@ function on_init() { on_init_once = true; console.log('ui', ui); console.log('document', document); - // create space elements - // for (let s = 0; s < SPACE_COUNT; ++s) { - // let e = ui.spaces[s].document.createElement('div'); - // e.className = 'space'; - // register_action(e, 'space', s); - // ui.map.appendChild(e); - // } - // // create piece elements - // for (let p = 0; p < PIECE_COUNT; ++p) { - // let e = (ui.pieces[p] = document.createElement('div')); - // e.className = 'piece'; - // register_action(e, 'piece', p); - // } - // create track standees + 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'; @@ -100,7 +172,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')); e.className = 'card'; @@ -109,15 +180,9 @@ function on_init() { } console.log('action_register', action_register[0]); } -// @ts-ignore function on_update() { console.log('on_update', view); on_init(); - // for (let s = 0; s < SPACE_COUNT; ++s) ui.spaces[s].replaceChildren(); - // for (let p = 0; p < PIECE_COUNT; ++p) { - // let s = view.location[p]; - // ui.spaces[s].appendChild(ui.pieces[p]); - // } ui.current_events.replaceChildren(); for (let i = 0; i < view.current_events.length; i++) { const cardId = view.current_events[i]; @@ -126,38 +191,54 @@ function on_update() { 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) + for (let c of view.hand) { + ui.cards[c].classList.remove('selected'); ui.hand.appendChild(ui.cards[c]); - for (let i = 0; i < view.tracks.length; i++) { - // ui.tracks.appendChild(ui.standees[i]); + 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('next', 'Next'); + action_button('done', 'Done'); action_button('undo', 'Undo'); - action_button('add_glory', 'Add Glory'); } -// @ts-ignore function on_log(text) { - let p = document.createElement("div"); + let p = document.createElement('div'); if (text.match(/^>/)) { text = text.substring(1); p.className = 'i'; } - text = text.replace(/&/g, "&"); - text = text.replace(//g, ">"); - // text = text.replace(/C(\d+)/g, sub_card_name) - // text = text.replace(/S(\d+)/g, sub_space_name) - // text = text.replace(/U(\d+)/g, sub_unit_name) - // TODO dice icons - // text = text.replace(/\bD\d\b/g, sub_icon) + text = text.replace(/&/g, '&'); + text = text.replace(//g, '>'); if (text.match(/^\.h1/)) { text = text.substring(4); p.className = 'h1'; -- cgit v1.2.3