From 9414fe91218a00fe9e44b48fdf40e51de5cb4479 Mon Sep 17 00:00:00 2001 From: Frans Bongers Date: Mon, 25 Nov 2024 21:42:51 +0100 Subject: setup fronts and tracks --- data.js | 8 ++--- data.ts | 10 +++--- images/counters_back.jpg | Bin 9297100 -> 0 bytes images/counters_front.jpg | Bin 10126366 -> 0 bytes images/standees/standee_0.png | Bin 0 -> 61043 bytes images/standees/standee_1.png | Bin 0 -> 63062 bytes images/standees/standee_2.png | Bin 0 -> 57417 bytes images/standees/standee_3.png | Bin 0 -> 63249 bytes images/standees/standee_4.png | Bin 0 -> 35786 bytes images/track_markers/collectivization.png | Bin 63062 -> 0 bytes images/track_markers/foreign_aid.png | Bin 35786 -> 0 bytes images/track_markers/government.png | Bin 57417 -> 0 bytes images/track_markers/liberty.png | Bin 61043 -> 0 bytes images/track_markers/soviet_support.png | Bin 63249 -> 0 bytes land-and-freedom.css | 49 ++++++++++++++++++++++++- land-and-freedom.scss | 43 +++++++++++++++++++--- play.html | 6 ++-- play.js | 50 ++++++++++++++++++++++++-- play.ts | 57 ++++++++++++++++++++++++++++-- rules.js | 2 ++ rules.ts | 5 ++- 21 files changed, 206 insertions(+), 24 deletions(-) delete mode 100644 images/counters_back.jpg delete mode 100644 images/counters_front.jpg create mode 100644 images/standees/standee_0.png create mode 100644 images/standees/standee_1.png create mode 100644 images/standees/standee_2.png create mode 100644 images/standees/standee_3.png create mode 100644 images/standees/standee_4.png delete mode 100644 images/track_markers/collectivization.png delete mode 100644 images/track_markers/foreign_aid.png delete mode 100644 images/track_markers/government.png delete mode 100644 images/track_markers/liberty.png delete mode 100644 images/track_markers/soviet_support.png diff --git a/data.js b/data.js index bc8f837..0b7d294 100644 --- a/data.js +++ b/data.js @@ -535,25 +535,25 @@ const data = { ], fronts: [ { - id: 1, + id: 'n', name: 'Northern', left: 89, top: 96, }, { - id: 2, + id: 'a', name: 'Aragon', left: 340, top: 182, }, { - id: 3, + id: 'm', name: 'Madrid', left: 115, top: 262, }, { - id: 4, + id: 's', name: 'Southern', left: 205, top: 426, diff --git a/data.ts b/data.ts index a01495d..7f6e283 100644 --- a/data.ts +++ b/data.ts @@ -25,7 +25,7 @@ export type Card = EventCard | PlayerCard; export interface StaticData { cards: Card[]; fronts: Array<{ - id: number; + id: string; name: string; left: number; top: number; @@ -573,25 +573,25 @@ const data: StaticData = { ], fronts: [ { - id: 1, + id: 'n', name: 'Northern', left: 89, top: 96, }, { - id: 2, + id: 'a', name: 'Aragon', left: 340, top: 182, }, { - id: 3, + id: 'm', name: 'Madrid', left: 115, top: 262, }, { - id: 4, + id: 's', name: 'Southern', left: 205, top: 426, diff --git a/images/counters_back.jpg b/images/counters_back.jpg deleted file mode 100644 index 02c8b29..0000000 Binary files a/images/counters_back.jpg and /dev/null differ diff --git a/images/counters_front.jpg b/images/counters_front.jpg deleted file mode 100644 index e90f7d6..0000000 Binary files a/images/counters_front.jpg and /dev/null differ diff --git a/images/standees/standee_0.png b/images/standees/standee_0.png new file mode 100644 index 0000000..6bd83e6 Binary files /dev/null and b/images/standees/standee_0.png differ diff --git a/images/standees/standee_1.png b/images/standees/standee_1.png new file mode 100644 index 0000000..f81b21d Binary files /dev/null and b/images/standees/standee_1.png differ diff --git a/images/standees/standee_2.png b/images/standees/standee_2.png new file mode 100644 index 0000000..80e55d5 Binary files /dev/null and b/images/standees/standee_2.png differ diff --git a/images/standees/standee_3.png b/images/standees/standee_3.png new file mode 100644 index 0000000..ac48593 Binary files /dev/null and b/images/standees/standee_3.png differ diff --git a/images/standees/standee_4.png b/images/standees/standee_4.png new file mode 100644 index 0000000..e7cb9be Binary files /dev/null and b/images/standees/standee_4.png differ diff --git a/images/track_markers/collectivization.png b/images/track_markers/collectivization.png deleted file mode 100644 index f81b21d..0000000 Binary files a/images/track_markers/collectivization.png and /dev/null differ diff --git a/images/track_markers/foreign_aid.png b/images/track_markers/foreign_aid.png deleted file mode 100644 index e7cb9be..0000000 Binary files a/images/track_markers/foreign_aid.png and /dev/null differ diff --git a/images/track_markers/government.png b/images/track_markers/government.png deleted file mode 100644 index 80e55d5..0000000 Binary files a/images/track_markers/government.png and /dev/null differ diff --git a/images/track_markers/liberty.png b/images/track_markers/liberty.png deleted file mode 100644 index 6bd83e6..0000000 Binary files a/images/track_markers/liberty.png and /dev/null differ diff --git a/images/track_markers/soviet_support.png b/images/track_markers/soviet_support.png deleted file mode 100644 index ac48593..0000000 Binary files a/images/track_markers/soviet_support.png and /dev/null differ diff --git a/land-and-freedom.css b/land-and-freedom.css index 5928f57..6b4db57 100644 --- a/land-and-freedom.css +++ b/land-and-freedom.css @@ -40,9 +40,19 @@ main { box-sizing: border-box; width: 93px; height: 102px; + display: flex; + flex-direction: column; + align-items: center; + padding: 4px; +} + +.front .value { + font-weight: bold; + font-size: 30px; + margin-top: auto; } -.front[data-front-id="3"] { +.front[data-front-id=m] { width: 104px; height: 114px; } @@ -302,3 +312,40 @@ main { .card[data-card-id="62"] { background-image: url("images/cards100/card_62.png"); } + +.card.event { + position: absolute; + width: 132px; + height: 180px; +} + +.standee { + box-sizing: border-box; + position: absolute; + width: 29px; + height: 35px; + background-size: cover; + background-repeat: no-repeat; + border-radius: 4px; + box-shadow: 0 0 0 1px #333; +} + +.standee[data-standee-id="0"] { + background-image: url("images/standees/standee_0.png"); +} + +.standee[data-standee-id="1"] { + background-image: url("images/standees/standee_1.png"); +} + +.standee[data-standee-id="2"] { + background-image: url("images/standees/standee_2.png"); +} + +.standee[data-standee-id="3"] { + background-image: url("images/standees/standee_3.png"); +} + +.standee[data-standee-id="4"] { + background-image: url("images/standees/standee_4.png"); +} diff --git a/land-and-freedom.scss b/land-and-freedom.scss index 9c68e03..42f75e2 100644 --- a/land-and-freedom.scss +++ b/land-and-freedom.scss @@ -3,7 +3,7 @@ main { // background-color: rgb(213, 196, 131); - background-color: darkolivegreen; + background-color: darkolivegreen; } /* MAP */ @@ -54,11 +54,21 @@ main { box-sizing: border-box; width: 93px; height: 102px; + display: flex; + flex-direction: column; + align-items: center; + padding: 4px; // background-color: yellow; // opacity: 0.5; } -.front[data-front-id='3'] { +.front .value { + font-weight: bold; + font-size: 30px; + margin-top: auto; +} + +.front[data-front-id='m'] { width: 104px; height: 114px; } @@ -67,11 +77,11 @@ main { background-size: 100% 100%; // width: 275px; // height: 375px; - width: 198px; + width: 198px; height: 270px; // border: 1px solid black; border-radius: 5px; - box-shadow: 0 0 0 1px #333; + box-shadow: 0 0 0 1px #333; } @for $i from 1 through 62 { @@ -79,3 +89,28 @@ main { background-image: url('images/cards100/card_#{$i}.png'); } } + +.card.event { + position: absolute; + // opacity: 0.5; + width: 132px; + height: 180px; +} + +.standee { + box-sizing: border-box; + position: absolute; + width: 29px; + height: 35px; + background-size: cover; + background-repeat: no-repeat; + border-radius: 4px; + box-shadow: 0 0 0 1px #333; + // opacity: 0.6; +} + +@for $i from 0 through 4 { + .standee[data-standee-id='#{$i}'] { + background-image: url('images/standees/standee_#{$i}.png'); + } +} diff --git a/play.html b/play.html index 08fbd0e..0dfdfe0 100644 --- a/play.html +++ b/play.html @@ -42,9 +42,9 @@
-
- -
+
+
+
diff --git a/play.js b/play.js index 1c40758..af1eccb 100644 --- a/play.js +++ b/play.js @@ -4,15 +4,33 @@ Object.defineProperty(exports, "__esModule", { value: true }); // const SPACE_COUNT = 64; // const PIECE_COUNT = 32; const CARD_COUNT = 62; +const STANDEES_COUNT = 5; let ui = { map: document.getElementById('map'), hand: document.getElementById('hand'), - fronts: [], + current_events: document.getElementById('current_events'), + tracks: document.getElementById('tracks'), + fronts: {}, + frontValues: {}, spaces: [], + standees: [], pieces: [], cards: [], }; let action_register = []; +const LAYOUT_CURRENT_EVENTS = [ + [172, 648], + [309, 648], + [445, 648], + [584, 648], +]; +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]], +]; // @ts-ignore (function build_map() { // @ts-ignore @@ -24,12 +42,14 @@ let action_register = []; element.classList.add('front'); element.style.left = `${left}px`; element.style.top = `${top}px`; - // element.style.height = `${height}px`; - // element.style.width = `${width}px`; element.setAttribute('data-front-id', `${id}`); spaces.appendChild(element); + const frontValueElement = (ui.frontValues[front.id] = document.createElement('span')); + frontValueElement.classList.add('value'); + element.appendChild(frontValueElement); }); })(); +console.log('ui', ui); // @ts-ignore function register_action(e, _action, _id) { // e.my_action = action @@ -71,6 +91,14 @@ function on_init() { // e.className = 'piece'; // register_action(e, 'piece', p); // } + // 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); + register_action(e, 'standee', 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')); @@ -88,9 +116,25 @@ function on_update() { // 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]; + 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'; + } ui.hand.replaceChildren(); for (let c of view.hand) ui.hand.appendChild(ui.cards[c]); + 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 e of action_register) // e.classList.toggle('action', is_action(e.my_action, e.my_id)); action_button('next', 'Next'); diff --git a/play.ts b/play.ts index 2c3d2a2..e941c05 100644 --- a/play.ts +++ b/play.ts @@ -15,18 +15,38 @@ declare const player: Player; // const SPACE_COUNT = 64; // const PIECE_COUNT = 32; const CARD_COUNT = 62; +const STANDEES_COUNT = 5; let ui = { map: document.getElementById('map'), hand: document.getElementById('hand'), - fronts: [], + current_events: document.getElementById('current_events'), + tracks: document.getElementById('tracks'), + fronts: {}, + frontValues: {}, spaces: [], + standees: [], pieces: [], cards: [], }; let action_register = []; +const LAYOUT_CURRENT_EVENTS = [ + [172, 648], + [309, 648], + [445, 648], + [584, 648], +]; + +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]], +]; + // @ts-ignore (function build_map() { // @ts-ignore @@ -39,13 +59,16 @@ let action_register = []; element.classList.add('front'); element.style.left = `${left}px`; element.style.top = `${top}px`; - // element.style.height = `${height}px`; - // element.style.width = `${width}px`; element.setAttribute('data-front-id', `${id}`); spaces.appendChild(element); + const frontValueElement = (ui.frontValues[front.id] = document.createElement('span')); + frontValueElement.classList.add('value'); + element.appendChild(frontValueElement); }); })(); +console.log('ui', ui); + // @ts-ignore function register_action( e: HTMLElement, @@ -99,6 +122,16 @@ function on_init() { // register_action(e, 'piece', p); // } + // 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) + register_action(e, 'standee', 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')); @@ -119,10 +152,28 @@ function on_update() { // 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]; + 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'; + } ui.hand.replaceChildren(); for (let c of view.hand) ui.hand.appendChild(ui.cards[c]); + 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 e of action_register) // e.classList.toggle('action', is_action(e.my_action, e.my_id)); diff --git a/rules.js b/rules.js index 2952679..1704761 100644 --- a/rules.js +++ b/rules.js @@ -63,7 +63,9 @@ function game_view(state, player) { location: game.location, selected: game.selected, current_events: game.current_events, + fronts: game.fronts, hand: game.hands[faction_id], + tracks: game.tracks }; if (player !== game.active) { let inactive = states[game.state].inactive || game.state; diff --git a/rules.ts b/rules.ts index a2a71ca..389900d 100644 --- a/rules.ts +++ b/rules.ts @@ -67,9 +67,10 @@ export interface View { victory?: string; location?: string; selected?: string; - + fronts: Game['fronts']; current_events: CardId[]; hand: CardId[]; + tracks: number[]; } // interface State { @@ -160,7 +161,9 @@ function game_view(state: Game, player: Player) { location: game.location, selected: game.selected, current_events: game.current_events, + fronts: game.fronts, hand: game.hands[faction_id], + tracks: game.tracks }; if (player !== game.active) { -- cgit v1.2.3