Web Dev Solutions

Catalin Mititiuc

From 82d3a4b415ba920176058d615b697e84a49adabc Mon Sep 17 00:00:00 2001 From: Catalin Mititiuc Date: Tue, 30 Apr 2024 10:17:45 -0700 Subject: Create record sheet dynamically when map is loaded --- public/index.html | 108 +++++++++++++++++++++-------------------- public/map.css | 42 +++++++--------- public/map1.svg | 95 +++++++++++++++++++++++++++++------- public/map2.svg | 67 ++++++++++++++++++------- public/map3.svg | 67 ++++++++++++++++++------- public/map4.svg | 33 +++++++++++++ public/soldier_record_block.js | 1 - public/style.css | 76 ++++++----------------------- 8 files changed, 297 insertions(+), 192 deletions(-) create mode 100644 public/map4.svg (limited to 'public') diff --git a/public/index.html b/public/index.html index 4f15e08..cdab46c 100644 --- a/public/index.html +++ b/public/index.html @@ -94,10 +94,10 @@
-
Davion
- -
Liao
- +
Defender
+ +
Attacker
+
@@ -114,64 +114,46 @@
- Set firing arc: - - - - Prone: - Turn: 0 ◓ ◒ - - -
-

- -

-
- - -
-
- - + + + Prone: + + + + +
-
+

- Davion - -

-
+
-
+

- Liao - -

-
+ +
- + +
+

+ +

+
+ + +
+
+ + + diff --git a/public/map.css b/public/map.css index 1a57998..0c2fed9 100644 --- a/public/map.css +++ b/public/map.css @@ -22,13 +22,6 @@ use[href="#hex"] { stroke: black; } -/* use[href="#hex"]:hover, use[href="#hex"].hover - { - opacity: 1; - fill: orange; - stroke: orangered; -} */ - use[href="#hex"].active { opacity: 0.2; fill: teal; @@ -41,10 +34,13 @@ use[href="#hex"].active { fill-opacity: 0.04; } +polyline { + fill: none; +} + polyline.move-trace { stroke: white; stroke-dasharray: 2; - fill: none; } #background { @@ -73,6 +69,11 @@ g.troop-counter-template, g.troop-counter-template use { r: inherit; } +g.weapon-symbol { + stroke: white; + stroke-width: 0.5px; +} + g.troop-counter-template text { fill: white; font-size: 12px; @@ -108,11 +109,11 @@ g.clone [href="#counter-prone"] { opacity: 0.5; } -g[data-allegiance="davion"].clone { +g[data-allegiance="defender"].clone { fill: rgb(255, 126, 126); } -g[data-allegiance="liao"].clone { +g[data-allegiance="attacker"].clone { fill: rgb(130, 190, 130); } @@ -128,11 +129,11 @@ text.counter, #troop-counter text { user-select: none; } -polygon.firing-arc[data-allegiance="davion"] { +polygon.firing-arc[data-allegiance="defender"] { fill: red; } -polygon.firing-arc[data-allegiance="liao"] { +polygon.firing-arc[data-allegiance="attacker"] { fill: green; } @@ -172,7 +173,7 @@ polygon.firing-arc[data-allegiance="liao"] { stroke-opacity: inherit; } -use[href*="#t-"] { +g.counter use, use[href*="#t-"] { r: 5px; } @@ -191,11 +192,11 @@ g.selected use { } } -.counter[data-allegiance="liao"] { - fill: #008000; +.counter[data-allegiance="attacker"] { + fill: green; } -.counter[data-allegiance="davion"] { +.counter[data-allegiance="defender"] { fill: red; } @@ -203,14 +204,6 @@ g.selected use { transform: translate(19px, 31px) scale(4); } -g.start-locations > g:first-child:not([data-y]) { - --i: -2; -} - -g.start-locations > g:last-child:not([data-y]) { - --i: 52; -} - /* Inradius and circumradius values come from the hexagon */ .grid, g.start-locations { --inradius: 8.66px; @@ -249,7 +242,6 @@ g[data-y]:nth-child(odd) { transform: translateX(calc(var(--x-step) * var(--i))) scale(var(--scale)); } -g[data-y="-2"] { --i: -2; } g[data-y="0"] { --i: 0; } g[data-y="1"] { --i: 1; } g[data-y="2"] { --i: 2; } diff --git a/public/map1.svg b/public/map1.svg index efae907..6d767ba 100644 --- a/public/map1.svg +++ b/public/map1.svg @@ -3,6 +3,10 @@ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> + + diff --git a/public/map3.svg b/public/map3.svg index 587c697..25a9518 100644 --- a/public/map3.svg +++ b/public/map3.svg @@ -4,13 +4,12 @@ @@ -41,22 +40,54 @@ - + diff --git a/public/map4.svg b/public/map4.svg new file mode 100644 index 0000000..c556811 --- /dev/null +++ b/public/map4.svg @@ -0,0 +1,33 @@ + + + + + + + + + + 1 + 2 + 3 + 4 + 5 + 6 + 7 + + + + + + + + + + + + + + + + diff --git a/public/soldier_record_block.js b/public/soldier_record_block.js index 0bf5a9a..3931649 100644 --- a/public/soldier_record_block.js +++ b/public/soldier_record_block.js @@ -49,7 +49,6 @@ customElements.define( } connectedCallback() { - // this.shadowRoot.querySelectorAll('.grenades *').forEach(el => el.addEventListener('click', e => e.stopPropagation())); this.shadowRoot.querySelector('.grenades').addEventListener('click', e => e.stopPropagation()); } }, diff --git a/public/style.css b/public/style.css index 22f592f..c229889 100644 --- a/public/style.css +++ b/public/style.css @@ -86,6 +86,10 @@ div#content { background-color: gray; } +#record-sheet .name { + text-transform: capitalize; +} + #record-sheet > div { /* padding: 0 2px; */ overflow-y: auto; @@ -233,72 +237,20 @@ g#points g.hover use.counter { r: 7px; } -g#points g.hover use.counter:not(.clone) { - /* stroke: orange; */ - /* stroke-width: 2px; */ -} - -g#points use.counter[data-allegiance="davion"] { - fill: red; -} - -g#points use.counter[data-allegiance="liao"] { - fill: green; -} - g#points use.clone { stroke: white; stroke-width: 0.5px; stroke-dasharray: 1; } -g#points use[data-allegiance="davion"].clone { +g#points use[data-allegiance="defender"].clone { fill: rgb(255, 126, 126); } -g#points use[data-allegiance="liao"].clone { +g#points use[data-allegiance="attacker"].clone { fill: rgb(130, 190, 130); } - -/* ======================================================= */ - -/* g#counters { - pointer-events: none; -} */ - -/* g#counters use { - r: 5px; -} - -g#counters use:hover { - stroke: orange; - stroke-width: 2px; - r: 8px; -} */ - -/* g#counters use[data-allegiance="davion"] { - fill: red; -} - -g#counters use[data-allegiance="liao"] { - fill: green; -} */ - -/* g#counters use.clone { - stroke: white; - stroke-width: 0.5px; - stroke-dasharray: 1; -} - -g#counters use[data-allegiance="davion"].clone { - fill: rgb(255, 126, 126); -} - -g#counters use[data-allegiance="liao"].clone { - fill: rgb(130, 190, 130); -} */ - text.counter, #troop-counter text { font-size: 12px; font-weight: bold; @@ -314,11 +266,11 @@ text.counter, #troop-counter text { user-select: none; } -polygon.firing-arc[data-allegiance="davion"] { +polygon.firing-arc[data-allegiance="defender"] { fill: red; } -polygon.firing-arc[data-allegiance="liao"] { +polygon.firing-arc[data-allegiance="attacker"] { fill: green; } @@ -353,11 +305,11 @@ button.set-firing-arc img { background-color: white; } -.soldier-record[data-allegiance="liao"] [slot="troop-number"] svg { +.soldier-record[data-allegiance="attacker"] [slot="troop-number"] svg { fill: green; } -.soldier-record[data-allegiance="davion"] [slot="troop-number"] svg { +.soldier-record[data-allegiance="defender"] [slot="troop-number"] svg { fill: red; } @@ -377,11 +329,11 @@ button.set-firing-arc img { font-family: monospace; } -.soldier-record[data-allegiance="davion"] [slot="troop-number"] img { +.soldier-record[data-allegiance="defender"] [slot="troop-number"] img { fill: red; } -.soldier-record[data-allegiance="liao"] [slot="troop-number"] img { +.soldier-record[data-allegiance="attacker"] [slot="troop-number"] img { fill: green; } @@ -419,6 +371,10 @@ img.logo { display: none; } +#map-dialog { + border: 1px solid black; +} + @media (width >= 1800px) { #record-sheet { flex-direction: row; -- cgit v1.2.3