Web Dev Solutions

Catalin Mititiuc

From b192fc0790a4815703afa6ccc782f2b573c64722 Mon Sep 17 00:00:00 2001 From: Catalin Mititiuc Date: Thu, 11 Apr 2024 12:46:26 -0700 Subject: Import map svg in an object; add a dev server --- public/counter_prone.jpg | Bin 0 -> 5909 bytes public/damage_block.css | 64 ++ public/firing_arc_large.png | Bin 0 -> 23506 bytes public/firing_arc_medium.png | Bin 0 -> 18803 bytes public/firing_arc_small.png | Bin 0 -> 11412 bytes public/index.html | 390 ++++++++ public/map.svg | 1920 +++++++++++++++++++++++++++++++++++++++ public/rendered_numbers.png | Bin 0 -> 7735 bytes public/scans/countersheet1.jpg | Bin 0 -> 386563 bytes public/scans/countersheet2.jpg | Bin 0 -> 374895 bytes public/scans/countersheet3.jpg | Bin 0 -> 411155 bytes public/scans/countersheet4.jpg | Bin 0 -> 377347 bytes public/scans/map1-less-mem.jpg | Bin 0 -> 316000 bytes public/scans/map1-photo.jpg | Bin 0 -> 267053 bytes public/scans/map1.jpg | Bin 0 -> 232699 bytes public/scans/map1.png | Bin 0 -> 1016098 bytes public/scans/map2.jpg | Bin 0 -> 277055 bytes public/scans/map3.jpg | Bin 0 -> 279581 bytes public/scans/map4.jpg | Bin 0 -> 187591 bytes public/soldier_record_block.css | 35 + public/soldier_record_block.js | 40 + public/style.css | 437 +++++++++ 22 files changed, 2886 insertions(+) create mode 100644 public/counter_prone.jpg create mode 100644 public/damage_block.css create mode 100644 public/firing_arc_large.png create mode 100644 public/firing_arc_medium.png create mode 100644 public/firing_arc_small.png create mode 100644 public/index.html create mode 100644 public/map.svg create mode 100644 public/rendered_numbers.png create mode 100644 public/scans/countersheet1.jpg create mode 100644 public/scans/countersheet2.jpg create mode 100644 public/scans/countersheet3.jpg create mode 100644 public/scans/countersheet4.jpg create mode 100644 public/scans/map1-less-mem.jpg create mode 100644 public/scans/map1-photo.jpg create mode 100644 public/scans/map1.jpg create mode 100644 public/scans/map1.png create mode 100644 public/scans/map2.jpg create mode 100644 public/scans/map3.jpg create mode 100644 public/scans/map4.jpg create mode 100644 public/soldier_record_block.css create mode 100644 public/soldier_record_block.js create mode 100644 public/style.css (limited to 'public') diff --git a/public/counter_prone.jpg b/public/counter_prone.jpg new file mode 100644 index 0000000..a8e9b46 Binary files /dev/null and b/public/counter_prone.jpg differ diff --git a/public/damage_block.css b/public/damage_block.css new file mode 100644 index 0000000..f050e36 --- /dev/null +++ b/public/damage_block.css @@ -0,0 +1,64 @@ +.damage-selector, .damage-effect-indicator, label { + width: 20px; +} + +.damage-selector, .damage-effect-indicator { + height: 30px; +} + +.damage-selector { + margin: 0; + padding: 0; + border: 1px solid black; + display: inline-block; +} + +.damage-effect-indicator { + position: absolute; + margin: 0; + padding: 0; + display: block; + pointer-events: none; + font-family: monospace; +} + +.damage-selector.clear { + background-color: white; +} + +.damage-selector.bruise { + background-color: orange; +} + +.damage-selector.lethal { + background-color: red; +} + +label input[type="radio"] { + position: absolute; + opacity: 0; + margin: 0; + padding: 0; +} + +label { + display: none; + margin: 0 auto; + padding: 0; +} + +label:first-of-type { + display: block; +} + +label:has(input:checked) { + display: none; +} + +label:has(+ label input:checked) { + display: none; +} + +label:has(input:checked) + label { + display: block; +} diff --git a/public/firing_arc_large.png b/public/firing_arc_large.png new file mode 100644 index 0000000..c787537 Binary files /dev/null and b/public/firing_arc_large.png differ diff --git a/public/firing_arc_medium.png b/public/firing_arc_medium.png new file mode 100644 index 0000000..6cc69ce Binary files /dev/null and b/public/firing_arc_medium.png differ diff --git a/public/firing_arc_small.png b/public/firing_arc_small.png new file mode 100644 index 0000000..80afcb0 Binary files /dev/null and b/public/firing_arc_small.png differ diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..063797f --- /dev/null +++ b/public/index.html @@ -0,0 +1,390 @@ + + + + Infantry Combat Solo Basic + + + + + + + +
+
+
davion
+ +
liao
+ +
+ +
+
+ hex +
+ + + + + +
+
+
+ grid +
+ + + + + +
+
+
+ map2 +
+ + + + + +
+
+
+ map3 +
+ + + + + +
+
+
+ + + + + +
+ Distance: - +
+
+ +
+ +
+ Set firing arc: + + + +
+ Prone: + Turn: + + 0 + ◓ + ◒ + +
+ +
+
+ +

+ Davion + + +
+ +

+
+ 1 + Rifle + 4L + 1-27 + 28-75 +
+
+ 2 + Rifle + 4L + 1-27 + 28-75 +
+
+ 3 + SMG + 3L + 1-15 + 16-25 +
+
+ 4 + SMG + 3L + 1-15 + 16-25 +
+
+ 5 + SMG + 3L + 1-15 + 16-25 +
+
+ 6 + SMG + 3L + 1-15 + 16-25 +
+
+ 7 + Blazer + 4L + 1-17 + 18-105 +
+
+
+ +

+ Liao + + +
+ +

+
+ 1 + Rifle + 4L + 1-27 + 28-75 +
+
+ 2 + Rifle + 4L + 1-27 + 28-75 +
+
+ 3 + SMG + 3L + 1-15 + 16-25 +
+
+ 4 + SMG + 3L + 1-15 + 16-25 +
+
+ 5 + SMG + 3L + 1-15 + 16-25 +
+
+ 6 + SMG + 3L + 1-15 + 16-25 +
+
+ 7 + Blazer + 4L + 1-17 + 18-105 +
+
+
+
+ + + + + \ No newline at end of file diff --git a/public/map.svg b/public/map.svg new file mode 100644 index 0000000..d977609 --- /dev/null +++ b/public/map.svg @@ -0,0 +1,1920 @@ + + + + + + + + + + 1 + 2 + 3 + 4 + 5 + 6 + 7 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/rendered_numbers.png b/public/rendered_numbers.png new file mode 100644 index 0000000..8672434 Binary files /dev/null and b/public/rendered_numbers.png differ diff --git a/public/scans/countersheet1.jpg b/public/scans/countersheet1.jpg new file mode 100644 index 0000000..659070e Binary files /dev/null and b/public/scans/countersheet1.jpg differ diff --git a/public/scans/countersheet2.jpg b/public/scans/countersheet2.jpg new file mode 100644 index 0000000..7a4d3ad Binary files /dev/null and b/public/scans/countersheet2.jpg differ diff --git a/public/scans/countersheet3.jpg b/public/scans/countersheet3.jpg new file mode 100644 index 0000000..dfe4696 Binary files /dev/null and b/public/scans/countersheet3.jpg differ diff --git a/public/scans/countersheet4.jpg b/public/scans/countersheet4.jpg new file mode 100644 index 0000000..028b216 Binary files /dev/null and b/public/scans/countersheet4.jpg differ diff --git a/public/scans/map1-less-mem.jpg b/public/scans/map1-less-mem.jpg new file mode 100644 index 0000000..322948b Binary files /dev/null and b/public/scans/map1-less-mem.jpg differ diff --git a/public/scans/map1-photo.jpg b/public/scans/map1-photo.jpg new file mode 100644 index 0000000..a13d14e Binary files /dev/null and b/public/scans/map1-photo.jpg differ diff --git a/public/scans/map1.jpg b/public/scans/map1.jpg new file mode 100644 index 0000000..8f6bc46 Binary files /dev/null and b/public/scans/map1.jpg differ diff --git a/public/scans/map1.png b/public/scans/map1.png new file mode 100644 index 0000000..87232fc Binary files /dev/null and b/public/scans/map1.png differ diff --git a/public/scans/map2.jpg b/public/scans/map2.jpg new file mode 100644 index 0000000..82cd528 Binary files /dev/null and b/public/scans/map2.jpg differ diff --git a/public/scans/map3.jpg b/public/scans/map3.jpg new file mode 100644 index 0000000..08232e4 Binary files /dev/null and b/public/scans/map3.jpg differ diff --git a/public/scans/map4.jpg b/public/scans/map4.jpg new file mode 100644 index 0000000..8fa25dc Binary files /dev/null and b/public/scans/map4.jpg differ diff --git a/public/soldier_record_block.css b/public/soldier_record_block.css new file mode 100644 index 0000000..47bf583 --- /dev/null +++ b/public/soldier_record_block.css @@ -0,0 +1,35 @@ +span { + font-size: smaller; + font-family: monospace; + margin-right: 1em; +} + +.physical-status-track { + text-align: center; +} + +.physical-status-track span { + margin: 0; + padding: 0; + display: inline-block; + vertical-align: middle; +} + +.physical-status-track span[slot="block-number"] { + font-family: serif; + font-size: unset; +} + +ul { + margin: 0; + padding: 0; +} + +ul li { + display: inline; + margin-left: 1em; +} + +p { + margin: 0; +} diff --git a/public/soldier_record_block.js b/public/soldier_record_block.js new file mode 100644 index 0000000..b2465ab --- /dev/null +++ b/public/soldier_record_block.js @@ -0,0 +1,40 @@ +class SoldierRecordBlock extends HTMLDivElement { + constructor() { + super(); + + let template = document.getElementById('soldier-record-block'); + let templateContent = template.content; + + const shadowRoot = this.attachShadow({ mode: "open" }); + shadowRoot.appendChild(templateContent.cloneNode(true)); + + // console.log(shadowRoot) + + // this.shadowRoot + // .querySelectorAll('p:has(input[type="number"]), .physical-status-track') + // .forEach(el => el.addEventListener('click', e => e.stopPropagation())) + // ; + } +} + +customElements.define( + 'damage-block', + class extends HTMLSpanElement { + constructor() { + super(); + + let template = document.getElementById('damage-block'); + let templateContent = template.content; + + const shadowRoot = this.attachShadow({ mode: "open" }); + shadowRoot.appendChild(templateContent.cloneNode(true)); + } + }, + { extends: 'span' } +); + +customElements.define( + 'soldier-record-block', + SoldierRecordBlock, + { extends: 'div'} +); \ No newline at end of file diff --git a/public/style.css b/public/style.css new file mode 100644 index 0000000..a1f8da5 --- /dev/null +++ b/public/style.css @@ -0,0 +1,437 @@ +body { + margin: 0; + display: flex; + overflow: hidden; +} + +#map-container { + flex-basis: 100%; + position: relative; + max-height: 100vh; +} + +svg, object { + background-color: darkgray; + width: 100%; + height: 100%; +} + +svg image { + image-rendering: pixelated; +} + +svg image.map-scans { + image-rendering: auto; +} + +svg text { + user-select: none; +} + +div#status { + position: absolute; + bottom: 0; + right: 0; + margin: 3px; + display: none; + user-select: none; +} + +#hex-counter { + padding: 2px; + background-color: rgba(255, 255, 255, 0.5); + border-radius: 2px; +} + +#hex-count { + font-family: monospace; +} + +div#content { + display: flex; + /* display: none; */ + border-left: 1px solid gray; + flex-basis: 0; + /* overflow: scroll; */ + max-height: 100vh; + flex-direction: column; + /* padding: 2px; */ + position: relative; +} + +#content > div:first-of-type { + padding: 2px; + border-bottom: 1px solid gray; +} + +#content #buttons { + line-height: 1.5em; +} + +#content input[type="checkbox"].visible { + position: absolute; + right: 0; +} + +#record-sheet { + /* max-height: 100%; */ + overflow-y: auto; + display: flex; + flex-direction: column; + /* display: none; */ + background-color: gray; +} + +#record-sheet > div { + /* padding: 0 2px; */ + overflow-y: auto; + /* border: 1px solid black; */ +} + +#record-sheet > div > p { + margin: 0; + margin-top: 0px; + margin-bottom: 1px; + padding: 6px 2px; + background-color: lightgray; +} + +#record-sheet > div > div { + /* border: 1px solid black; */ + margin-bottom: 1px; + padding: 6px 4px; + /* border-radius: 4px; */ +} + +#record-sheet > div:last-of-type { + margin-top: 2px; +} + +#record-sheet > div > div:last-of-type { + 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; +} + +use[href="#point"].sight-line-target { + opacity: 1; + stroke: orangered; + /* stroke-width: 1px; */ + fill-opacity: 0.04; +} + +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); +} + +#counter-base { + r: inherit; +} + +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 g.hover use.counter:not(.clone) { + /* stroke: orange; */ + /* stroke-width: 2px; */ +} + +g#points use.counter[data-troop-allegiance="davion"] { + fill: red; +} + +g#points use.counter[data-troop-allegiance="liao"] { + fill: green; +} + +g#points use.clone { + stroke: white; + stroke-width: 0.5px; + stroke-dasharray: 1; +} + +g#points use[data-troop-allegiance="davion"].clone { + fill: rgb(255, 126, 126); +} + +g#points use[data-troop-allegiance="liao"].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-troop-allegiance="davion"] { + fill: red; +} + +g#counters use[data-troop-allegiance="liao"] { + fill: green; +} */ + +/* g#counters use.clone { + stroke: white; + stroke-width: 0.5px; + stroke-dasharray: 1; +} + +g#counters use[data-troop-allegiance="davion"].clone { + fill: rgb(255, 126, 126); +} + +g#counters use[data-troop-allegiance="liao"].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-troop-allegiance="davion"] { + fill: red; +} + +polygon.firing-arc[data-troop-allegiance="liao"] { + fill: green; +} + +#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 [slot="troop-number"] { + color: white; + font-weight: bold; + border-radius: 10px; + padding: 0 4px; +} + +.soldier-record[data-troop-allegiance="davion"] [slot="troop-number"] { + background-color: red; +} + +.soldier-record[data-troop-allegiance="liao"] [slot="troop-number"] { + background-color: green; +} + +.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; +} + +@media (width >= 1800px) { + #record-sheet { + flex-direction: row; + /* gap: 2px; */ + } + + #record-sheet > div > p { + margin-top: 0; + } + + #record-sheet > div { + /* max-height: unset; */ + overflow-y: unset; + height: min-content; + } + + #record-sheet div:last-of-type { + margin-top: 0; + } + + #record-sheet > div:first-of-type > div { + /* margin-left: 1px; */ + margin-right: 1px; + } + + #record-sheet > div:last-of-type > div { + margin-left: 1px; + /* margin-right: 1px; */ + } +} \ No newline at end of file -- cgit v1.2.3