From c0a6440b487fb5a929bf0d5c6155060e644c5f22 Mon Sep 17 00:00:00 2001 From: Catalin Constantin Mititiuc Date: Mon, 16 Jun 2025 22:41:30 -0700 Subject: [PATCH] WIP: record sheet layout --- public/assets/css/style.css | 490 +++++++++++++++++------------------- public/index.html | 2 + src/index.js | 16 +- src/modules/record_sheet.js | 6 +- 4 files changed, 238 insertions(+), 276 deletions(-) diff --git a/public/assets/css/style.css b/public/assets/css/style.css index 3e6842f..244b85f 100644 --- a/public/assets/css/style.css +++ b/public/assets/css/style.css @@ -53,6 +53,208 @@ div#status { font-family: monospace; } +polyline.move-trace { + stroke: gray; + stroke-dasharray: 2; + fill: none; +} + +g#grid { + transform: translate(19px, 31px) scale(4); +} + +#background { + fill: #bacae3; +} + +#panel { + display: none; + position: absolute; + right: 0; + background-color: white; + border: 1px solid black; + padding: 2px; +} + +#panel fieldset label { + display: block; + text-align: right; +} + +#toggle-firing-arc-vis { + position: absolute; + right: 0; + padding-top: 20px; +} + +#toggle-firing-arc-vis div { + margin-top: 10px; + writing-mode: vertical-lr; + transform: rotate(180deg); +} + +g.troop-counter-template, g.troop-counter-template use { + r: inherit; +} + +g.troop-counter, g.troop-counter use { + r: inherit; +} + +g.troop-counter-template text { + fill: white; + font-size: 12px; + font-weight: bold; + font-family: monospace; + cursor: default; + text-anchor: middle; + pointer-events: none; + user-select: none; + transform: translateY(4px); + stroke: none; +} + +g.troop-counter [href="#counter-prone"] { + transform: translate(-5px, 6px); +} + +text.counter, #troop-counter text { + font-size: 12px; + font-weight: bold; + /* stroke: black; */ + fill: white; + /* stroke-width: 0.5px; */ + font-family: sans-serif; + cursor: default; + text-anchor: middle; + /* transform: translateY(25%); */ + transform: translateY(4px); + pointer-events: none; + user-select: none; +} + +#shapes { + opacity: 0.1; +} + +#shapes polygon { + stroke: none; +} + +#lines polygon { + fill: none; + stroke: black; +} + +button.set-firing-arc img { + vertical-align: middle; + pointer-events: none; +} + +.sight-line { + stroke: orangered; + stroke-width: 0.5px; + pointer-events: none; +} + +.soldier-record { + display: inline-block; + position: relative; + white-space: nowrap; + background-color: white; +} + +.soldier-record span[slot] { + margin-right: .4em; +} + +polygon.firing-arc[data-allegiance="defender"] { + fill: red; +} + +polygon.firing-arc[data-allegiance="attacker"] { + fill: blue; +} + +.soldier-record[data-allegiance="defender"] svg { + fill: red; +} + +.soldier-record[data-allegiance="attacker"] svg { + fill: blue; +} + +.soldier-record svg { + width: 20px; + height: 20px; + background-color: initial; + vertical-align: middle; +} + +.soldier-record svg text { + fill: white; + text-anchor: middle; + font-size: 10px; + font-weight: bold; + transform: translateY(3.5px); + font-family: monospace; +} + +.weapon-symbol :not(use[href="#counter-base"]) { + stroke: white; + stroke-width: 0.75; + fill: none; +} + +.soldier-record.selected { + background-color: khaki; +} + +.soldier-record.movement-ended { + background-color: none; + opacity: 0.5; +} + +.wall { + fill: none; + stroke: red; + stroke-width: 7px; + opacity: 0.7; +} + +#asterisk { + font-size: 30; +} + +img.logo { + width: 100px; + margin: 0 auto; + display: block; +} + +#turn-count[data-update="0"] span.inning-bottom { + display: none; +} + +#turn-count[data-update="1"] span.inning-top { + display: none; +} + +#map-dialog { + border: 1px solid black; +} + +.map-placeholder { + position: absolute; + user-select: none; +} + +input[type="file"] { + display: none; +} + + + div#content { display: flex; border-left: 1px solid gray; @@ -105,7 +307,7 @@ div#content { background-color: lightgray; } -#record-sheet > div > div { +#record-sheet .soldier-record { /* border: 1px solid black; */ margin-bottom: 1px; padding: 6px 4px; @@ -120,273 +322,22 @@ div#content { margin-bottom: 0; } -svg > defs > #point { - fill: inherit; - fill-opacity: inherit; - stroke: inherit; - stroke-width: inherit; - stroke-opacity: inherit; -} -use[href="#point"] { - opacity: 0; - fill: teal; - fill-opacity: 0.2; - stroke: black; - stroke-width: 0.5px; -} -use[href="#point"]:hover, use[href="#point"].hover { - opacity: 1; - fill: orange; -} - -use[href="#point"].active { - opacity: 0.2; -} - -polyline.move-trace { - stroke: gray; - stroke-dasharray: 2; - fill: none; -} - -g#grid { - transform: translate(19px, 31px) scale(4); -} - -#background { - fill: #bacae3; -} - -#map2 { - transform-origin: 0px 0px; - transform: translate(-0.9px, -2.4px) scale(0.999, 1.007); -} - -#map3 { - transform-origin: 0px 0px; - /* transform: translateY(1518px); */ - transform: translate(1.3px, 1564.1px) rotate(0.1deg) scale(0.999, 1.002); -} - -#panel { - display: none; - position: absolute; - right: 0; - background-color: white; - border: 1px solid black; - padding: 2px; -} - -#panel fieldset label { - display: block; - text-align: right; -} - -#toggle-firing-arc-vis { - position: absolute; - right: 0; - padding-top: 20px; -} - -#toggle-firing-arc-vis div { - margin-top: 10px; - writing-mode: vertical-lr; - transform: rotate(180deg); -} - -.weapon-symbol :not(use[href="#counter-base"]) { - stroke: white; - stroke-width: 0.75; - fill: none; -} - -g.troop-counter-template, g.troop-counter-template use { - r: inherit; -} - -g.troop-counter, g.troop-counter use { - r: inherit; -} - -g.troop-counter-template text { - fill: white; - font-size: 12px; - font-weight: bold; - font-family: monospace; - cursor: default; - text-anchor: middle; - pointer-events: none; - user-select: none; - transform: translateY(4px); - stroke: none; -} - -g.troop-counter [href="#counter-prone"] { - transform: translate(-5px, 6px); -} - -g#points g use.counter { - r: 5px; -} - -g#points g.hover use[href="#point"] { - opacity: 1; - fill: orange; -} - -g#points g.hover use.counter { - r: 7px; -} - -g#points use.clone { - stroke: white; - stroke-width: 0.5px; - stroke-dasharray: 1; -} - -g#points use[data-allegiance="defender"].clone { - fill: rgb(255, 126, 126); -} - -g#points use[data-allegiance="attacker"].clone { - fill: rgb(130, 190, 130); -} - -text.counter, #troop-counter text { - font-size: 12px; - font-weight: bold; - /* stroke: black; */ - fill: white; - /* stroke-width: 0.5px; */ - font-family: sans-serif; - cursor: default; - text-anchor: middle; - /* transform: translateY(25%); */ - transform: translateY(4px); - pointer-events: none; - user-select: none; -} - -polygon.firing-arc[data-allegiance="defender"] { - fill: red; -} - -polygon.firing-arc[data-allegiance="attacker"] { - fill: blue; -} - -#shapes { - opacity: 0.1; -} - -#shapes polygon { - stroke: none; -} - -#lines polygon { - fill: none; - stroke: black; -} - -button.set-firing-arc img { - vertical-align: middle; - pointer-events: none; -} - -.sight-line { - stroke: orangered; - stroke-width: 0.5px; - pointer-events: none; -} - -.soldier-record { - display: inline-block; - position: relative; - white-space: nowrap; - background-color: white; -} - -.soldier-record span[slot] { - margin-right: .4em; -} - -.soldier-record[data-allegiance="attacker"] svg { - fill: blue; -} - -.soldier-record[data-allegiance="defender"] svg { - fill: red; -} - -.soldier-record svg { - width: 20px; - height: 20px; - background-color: initial; - vertical-align: middle; -} - -.soldier-record svg text { - fill: white; - text-anchor: middle; - font-size: 10px; - font-weight: bold; - transform: translateY(3.5px); - font-family: monospace; -} - -.soldier-record.selected { - background-color: khaki; -} - -.soldier-record.movement-ended { - background-color: none; - opacity: 0.5; -} - -.wall { - fill: none; - stroke: red; - stroke-width: 7px; - opacity: 0.7; -} - -#asterisk { - font-size: 30; -} - -img.logo { - width: 100px; - margin: 0 auto; - display: block; -} - -#turn-count[data-update="0"] span.inning-bottom { - display: none; -} - -#turn-count[data-update="1"] span.inning-top { - display: none; -} - -#map-dialog { - border: 1px solid black; -} - -.map-placeholder { - position: absolute; - user-select: none; -} - -input[type="file"] { - display: none; -} - -@media (width >= 1800px) { +/* @media (width >= 1800px) { */ +@media (width >= 10px) { #record-sheet { flex-direction: row; /* gap: 2px; */ + overflow-y: unset; + min-height: 0; + flex-grow: 1; + /* height: 100%; + max-height: 100%; */ + } + + #record-sheet * { + /* display: none; */ } #record-sheet > div > p { @@ -395,8 +346,17 @@ input[type="file"] { #record-sheet > div { /* max-height: unset; */ - overflow-y: unset; - height: min-content; + /* overflow-y: unset; */ + /* height: min-content; */ + display: flex; + flex-direction: column; + } + + #record-sheet .records { + /* max-height: 100vh; */ + /* height: 561px; */ + /* height: min-content; */ + overflow-y: auto; } #record-sheet div:last-of-type { diff --git a/public/index.html b/public/index.html index 0a27b61..2117363 100644 --- a/public/index.html +++ b/public/index.html @@ -162,6 +162,7 @@

+
@@ -177,6 +178,7 @@

+
diff --git a/src/index.js b/src/index.js index c71cc16..96b138f 100644 --- a/src/index.js +++ b/src/index.js @@ -15,15 +15,15 @@ const mapPlaceholder = document.querySelector('.map-placeholder'), fileInputEl = document.querySelector('input[type="file"]'), toggleContentVis = (function () { - document.querySelectorAll('#content div').forEach(div => { - if (this.checked) { - div.style.display = div.id == 'record-sheet' ? 'flex' : 'block'; - } else { - div.style.display = 'none'; - } - }); + // document.querySelectorAll('#content div').forEach(div => { + // if (this.checked) { + // div.style.display = div.id == 'record-sheet' ? 'flex' : 'block'; + // } else { + // div.style.display = 'none'; + // } + // }); - localStorage.setItem('content-visibility', this.checked); + // localStorage.setItem('content-visibility', this.checked); }).bind(contentVisToggleEl); let mapResourceEl = document.querySelector('object'); diff --git a/src/modules/record_sheet.js b/src/modules/record_sheet.js index 9fd5b62..a9fb1c4 100644 --- a/src/modules/record_sheet.js +++ b/src/modules/record_sheet.js @@ -113,7 +113,7 @@ function addEventListeners(unSelectCounter, selectCounter) { } export function clear() { - document.querySelectorAll('#attacker-record > div, #defender-record > div').forEach(el => el.remove()); + document.querySelectorAll('#record-sheet .soldier-record').forEach(el => el.remove()); document.querySelector('#attacker-record .name').textContent = 'attacker'; document.querySelector('#defender-record .name').textContent = 'defender'; } @@ -161,8 +161,8 @@ export function start(startLoc, units, gbUnSelect, gbSelect) { const forces = createRecords(units); for (const affiliation in forces) { - const container = document.querySelector(`#${affiliation}-record`); - const name = startLoc.dataset[`${affiliation}Name`]; + const container = document.querySelector(`#${affiliation}-record .records`); + const name = startLoc.dataset[`#${affiliation}-record ${affiliation}Name`]; if (name) { container.querySelector('.name').textContent = name; }