summaryrefslogtreecommitdiff
path: root/play.ts
diff options
context:
space:
mode:
Diffstat (limited to 'play.ts')
-rw-r--r--play.ts255
1 files changed, 187 insertions, 68 deletions
diff --git a/play.ts b/play.ts
index 26e942c..e0cb69a 100644
--- a/play.ts
+++ b/play.ts
@@ -1,20 +1,23 @@
'use strict';
-import { StaticData } from './data';
-import { Player, View } from './rules';
+import {
+
+ StaticData,
+} from './data';
+import { View } from './types';
declare function action_button(action: string, text: string): void;
// declare function register_action(element: HTMLElement, type: string, s: number): void;
declare function send_action(action: string, text: string): boolean;
declare const data: StaticData;
declare const view: View;
-declare const player: Player;
/* global view, player, send_action, action_button */
-// const SPACE_COUNT = 64;
+const BONUSES_COUNT = 2;
// const PIECE_COUNT = 32;
const CARD_COUNT = 62;
+const MEDAILLONS_COUNT = 5;
const STANDEES_COUNT = 5;
let ui = {
@@ -22,8 +25,10 @@ let ui = {
hand: document.getElementById('hand'),
current_events: document.getElementById('current_events'),
tracks: document.getElementById('tracks'),
+ bonuses: [],
fronts: {},
frontValues: {},
+ medaillons: [],
spaces: [],
standees: [],
pieces: [],
@@ -32,6 +37,11 @@ let ui = {
let action_register = [];
+const LAYOUT_BONUSES = [
+ [435, 481],
+ [493, 481],
+];
+
const LAYOUT_CURRENT_EVENTS = [
[172, 648],
[309, 648],
@@ -39,20 +49,84 @@ const LAYOUT_CURRENT_EVENTS = [
[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'));
@@ -60,8 +134,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);
@@ -70,14 +145,13 @@ const LAYOUT_TRACKS = [
console.log('ui', ui);
-
function register_action(
- e: HTMLElement & {my_action?: string; my_id?: string | number},
+ e: HTMLElement & { my_action?: string; my_id?: string | number },
action: string,
id: string | number
) {
- e.my_action = action
- e.my_id = id
+ e.my_action = action;
+ e.my_id = id;
e.onmousedown = on_click_action;
action_register.push(e);
}
@@ -124,11 +198,32 @@ function on_init() {
// register_action(e, 'piece', p);
// }
+ // create bonus markers
+ 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]);
+ }
+
+ // create track medaillons
+ 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]);
+ }
+
// create track standees
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)
+ e.setAttribute('data-standee-id', '' + s);
register_action(e, 'standee', s);
ui.tracks.appendChild(ui.standees[s]);
}
@@ -139,11 +234,11 @@ function on_init() {
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)
+ e.setAttribute('data-card-id', '' + data.cards[c].id);
register_action(e, 'card', c);
}
- console.log('action_register',action_register[0]);
+ console.log('action_register', action_register[0]);
}
// @ts-ignore
@@ -166,67 +261,91 @@ function on_update() {
ui.cards[cardId].style.top = LAYOUT_CURRENT_EVENTS[i][1] + 'px';
}
- ui.hand.replaceChildren();
- for (let c of view.hand) ui.hand.appendChild(ui.cards[c]);
+ for (let bonus_id of Object.keys(view.bonuses)) {
+ ui.bonuses[bonus_id].setAttribute(
+ 'data-bonus-on',
+ view.bonuses[bonus_id] + 0
+ );
+ }
- for (let i = 0; i < view.tracks.length; i++) {
+ 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.tracks.appendChild(ui.standees[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")
-
- 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;")
- // 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)
-
- 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
-} \ No newline at end of file
+ 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;');
+ // 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)
+
+ 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;
+}