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 @@
+
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;
}