ccm/btroops
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP: record sheet layout

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc 2024-05-20 12:56:42 -07:00
parent 4d133b7181
commit 1818218abb
4 changed files with 238 additions and 276 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

490
public/assets/css/style.css
View File

@ -53,6 +53,208 @@ div#status {
font-family: monospace; 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 { div#content {
display: flex; display: flex;
border-left: 1px solid gray; border-left: 1px solid gray;
@ -105,7 +307,7 @@ div#content {
background-color: lightgray; background-color: lightgray;
} }
#record-sheet > div > div { #record-sheet .soldier-record {
/* border: 1px solid black; */ /* border: 1px solid black; */
margin-bottom: 1px; margin-bottom: 1px;
padding: 6px 4px; padding: 6px 4px;
@ -120,273 +322,22 @@ div#content {
margin-bottom: 0; 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 { /* @media (width >= 1800px) { */
opacity: 1; @media (width >= 10px) {
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) {
#record-sheet { #record-sheet {
flex-direction: row; flex-direction: row;
/* gap: 2px; */ /* gap: 2px; */
overflow-y: unset;
min-height: 0;
flex-grow: 1;
/* height: 100%;
max-height: 100%; */
}
#record-sheet * {
/* display: none; */
} }
#record-sheet > div > p { #record-sheet > div > p {
@ -395,8 +346,17 @@ input[type="file"] {
#record-sheet > div { #record-sheet > div {
/* max-height: unset; */ /* max-height: unset; */
overflow-y: unset; /* overflow-y: unset; */
height: min-content; /* 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 { #record-sheet div:last-of-type {

2
public/index.html
View File

@ -162,6 +162,7 @@
<!-- 1st Squad, 3rd Platoon, Bravo Company, 2nd Battalion<br> <!-- 1st Squad, 3rd Platoon, Bravo Company, 2nd Battalion<br>
17th Kestral Mechanized Infantry --> 17th Kestral Mechanized Infantry -->
</p> </p>
<div class="records"></div>
</div> </div>
<div id="defender-record"> <div id="defender-record">
<!-- <img class="logo" src="logo-liao.png" /> --> <!-- <img class="logo" src="logo-liao.png" /> -->
@ -177,6 +178,7 @@
<!-- 2nd Squad, 1st Platoon, 3rd Company, 2nd Battalion<br> <!-- 2nd Squad, 1st Platoon, 3rd Company, 2nd Battalion<br>
Aldebaran Home Guard --> Aldebaran Home Guard -->
</p> </p>
<div class="records"></div>
</div> </div>
</div> </div>
</div> </div>

16
src/index.js
View File

@ -15,15 +15,15 @@ const mapPlaceholder = document.querySelector('.map-placeholder'),
fileInputEl = document.querySelector('input[type="file"]'), fileInputEl = document.querySelector('input[type="file"]'),
toggleContentVis = (function () { toggleContentVis = (function () {
document.querySelectorAll('#content div').forEach(div => { // document.querySelectorAll('#content div').forEach(div => {
if (this.checked) { // if (this.checked) {
div.style.display = div.id == 'record-sheet' ? 'flex' : 'block'; // div.style.display = div.id == 'record-sheet' ? 'flex' : 'block';
} else { // } else {
div.style.display = 'none'; // div.style.display = 'none';
} // }
}); // });
localStorage.setItem('content-visibility', this.checked); // localStorage.setItem('content-visibility', this.checked);
}).bind(contentVisToggleEl); }).bind(contentVisToggleEl);
let mapResourceEl = document.querySelector('object'); let mapResourceEl = document.querySelector('object');

6
src/modules/record_sheet.js
View File

@ -113,7 +113,7 @@ function addEventListeners(unSelectCounter, selectCounter) {
} }
export function clear() { 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('#attacker-record .name').textContent = 'attacker';
document.querySelector('#defender-record .name').textContent = 'defender'; document.querySelector('#defender-record .name').textContent = 'defender';
} }
@ -161,8 +161,8 @@ export function start(startLoc, units, gbUnSelect, gbSelect) {
const forces = createRecords(units); const forces = createRecords(units);
for (const affiliation in forces) { for (const affiliation in forces) {
const container = document.querySelector(`#${affiliation}-record`); const container = document.querySelector(`#${affiliation}-record .records`);
const name = startLoc.dataset[`${affiliation}Name`]; const name = startLoc.dataset[`#${affiliation}-record ${affiliation}Name`];
if (name) { if (name) {
container.querySelector('.name').textContent = name; container.querySelector('.name').textContent = name;
} }