WIP: record sheet layout
This commit is contained in:
parent
142d472e06
commit
c0a6440b48
@ -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 {
|
||||
|
||||
@ -162,6 +162,7 @@
|
||||
<!-- 1st Squad, 3rd Platoon, Bravo Company, 2nd Battalion<br>
|
||||
17th Kestral Mechanized Infantry -->
|
||||
</p>
|
||||
<div class="records"></div>
|
||||
</div>
|
||||
<div id="defender-record">
|
||||
<!-- <img class="logo" src="logo-liao.png" /> -->
|
||||
@ -177,6 +178,7 @@
|
||||
<!-- 2nd Squad, 1st Platoon, 3rd Company, 2nd Battalion<br>
|
||||
Aldebaran Home Guard -->
|
||||
</p>
|
||||
<div class="records"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
16
src/index.js
16
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');
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user