Web Dev Solutions

Catalin Mititiuc

From 9f7be5d9c782f64948aa244b81a74718c53a02cf Mon Sep 17 00:00:00 2001 From: Catalin Mititiuc Date: Mon, 1 Jul 2024 21:51:45 -0700 Subject: WIP: floating edge UI --- public/assets/css/radial.css | 121 ------------- public/assets/css/style.css | 154 ++++++++++++----- public/index.html | 396 +++++++++++++++++++++++-------------------- src/index.js | 4 +- 4 files changed, 330 insertions(+), 345 deletions(-) diff --git a/public/assets/css/radial.css b/public/assets/css/radial.css index 9b84d8a..1d3ebc8 100644 --- a/public/assets/css/radial.css +++ b/public/assets/css/radial.css @@ -103,98 +103,6 @@ use[href="#hex"] { display: inline; } -#dots { - pointer-events: none; -} - -/* -[data-view-elevation="-1"] .building > *, -[data-view-elevation="-1"] .building > .structure > * { - display: none; -} */ - -/* [data-view-elevation="-1"] .building > .elevation-basement, -[data-view-elevation="-1"] .building > .elevation-basement ~ .structure, -[data-view-elevation="-1"] .building > .elevation-basement ~ .structure [class*="wall"], -[data-view-elevation="-1"] .building > .elevation-basement ~ .structure .floor, -[data-view-elevation="-1"] .building > .elevation-basement ~ .structure .doors:not(.exits), -[data-view-elevation="-1"] .building > .elevation-basement ~ .structure .door-edges:not(.exits), -[data-view-elevation="-1"] .building > .elevation-basement ~ .structure .furniture { - display: inline; -} */ - -/* [data-view-elevation="0"] .building .elevation-0, -[data-view-elevation="0"] .building .elevation-0 ~ .structure { - display: inline; -} - -[data-view-elevation="1"] .building .elevation-1, -[data-view-elevation="1"] .building .elevation-1 ~ .structure { - display: inline; -} - -[data-view-elevation="1"] .building .elevation-1 + .structure [class*='wall'], -[data-view-elevation="1"] .building .elevation-1 + .structure .doors, -[data-view-elevation="1"] .building .elevation-1 + .structure .door-edges, -[data-view-elevation="1"] .building .elevation-1 + .structure .windows, -[data-view-elevation="1"] .building .elevation-1 + .structure .furniture, -[data-view-elevation="1"] .building .elevation-1 ~ .structure .exits { - display: none; -} - -[data-view-elevation="1"] .building .elevation-1 + .structure .floor { - fill: gray; -} - -[data-view-elevation="2"] .building .elevation-2, -[data-view-elevation="2"] .building .elevation-2 ~ .structure { - display: inline; -} - -[data-view-elevation="2"] .building .elevation-2 + .structure [class*='wall'], -[data-view-elevation="2"] .building .elevation-2 + .structure .doors, -[data-view-elevation="2"] .building .elevation-2 + .structure .door-edges, -[data-view-elevation="2"] .building .elevation-2 + .structure .windows, -[data-view-elevation="2"] .building .elevation-2 + .structure .furniture, -[data-view-elevation="2"] .building .elevation-2 ~ .structure .exits { - display: none; -} - -[data-view-elevation="2"] .building .elevation-2 + .structure .floor { - fill: gray; -} - -[data-view-elevation="3"] .building .elevation-3, -[data-view-elevation="3"] .building .elevation-3 ~ .structure { - display: inline; -} - -[data-view-elevation="3"] .building .elevation-3 + .structure [class*='wall'], -[data-view-elevation="3"] .building .elevation-3 + .structure .doors, -[data-view-elevation="3"] .building .elevation-3 + .structure .door-edges, -[data-view-elevation="3"] .building .elevation-3 + .structure .windows, -[data-view-elevation="3"] .building .elevation-3 + .structure .furniture, -[data-view-elevation="3"] .building .elevation-3 ~ .structure .exits { - display: none; -} - -[data-view-elevation="3"] .building .elevation-3 + .structure .floor { - fill: gray; -} - -[data-view-elevation="0"] .elevation-0 { - display: inline; -} - -[data-view-elevation="1"] > .elevation-0, -[data-view-elevation="1"] > .elevation-1 { - display: inline; -} - -[data-view-elevation="1"] .building .elevation-1 { - display: inline; -} */ - #tree .trunk { fill: brown; } @@ -210,32 +118,3 @@ use[href="#hex"] { stroke-width: 0.5px; transform: scale(0.9); } - -[class^="part"] use { - fill-opacity: 0.75; -} - -.part-1 use { - fill: lightseagreen; -} - -.part-2 use { - fill: lightyellow; -} - -.part-3 use { - fill: lightblue; -} - -.part-4 use { - fill: lightsteelblue; -} - -.part-5 use { - fill: lightsalmon; -} - -.part-6 use { - fill: lightgreen; -} - diff --git a/public/assets/css/style.css b/public/assets/css/style.css index e8445c8..88c9da4 100644 --- a/public/assets/css/style.css +++ b/public/assets/css/style.css @@ -34,15 +34,6 @@ 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); @@ -81,18 +72,6 @@ g#grid { 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; } @@ -282,11 +261,6 @@ div#content { line-height: 1.5em; } -#content input[type="checkbox"].visible { - position: absolute; - right: 0; -} - #record-sheet { display: flex; min-height: 0; @@ -331,17 +305,6 @@ div#content { margin-bottom: 0; } -div#dice { - position: absolute; - right: 0; - bottom: 30px; - margin: 3px; - padding: 2px; - background-color: rgba(255, 255, 255, 0.8); - border-radius: 4px; - border: 1px solid darkgray; -} - .die { width: 31px; height: 31px; @@ -412,11 +375,100 @@ div#dice { animation: roll-out 0.125s linear 1; } -.select-elevation { - position: fixed; +#edge-inputs { + position: absolute; right: 0; - top: 50%; - margin-right: 10px; + height: 100%; + background-color: rgba(0, 255, 255, 0.418); + pointer-events: none; + display: flex; + flex-direction: column; + /* align-content: space-around; */ + align-items: end; + /* justify-content: space-between; */ +} + +#edge-inputs > * { + pointer-events: initial; +} + +#content-visibility { + margin-top: 2px; +} + +label[for="content-visibility-toggle"] { + display: inline-block; + padding: 0 4px; + background-color: #EEE; + border-top-left-radius: 5px; + border-bottom-left-radius: 5px; + border-top: 1px solid #999; + border-bottom: 1px solid #999; + border-left: 1px solid #999; + font-size: 20px; + line-height: 25px; + font-family: monospace; +} + +label[for="content-visibility-toggle"]:hover { + color: red; + background-color: #DDD; + cursor: pointer; +} + +input#content-visibility-toggle { + display: none; +} + +#content-visibility-toggle + label .close { + display: none; +} + +#content-visibility-toggle + label .open { + display: inline; +} + +#content-visibility-toggle:checked + label .close { + display: inline; +} + +#content-visibility-toggle:checked + label .open { + display: none; +} + +#toggle-firing-arc-vis input { + display: none; +} + +#toggle-firing-arc-vis label { + display: block; + background-color: #DDD; + border: 1px solid #666; + border-radius: 3px; + padding: 0 5px; + margin: 3px; + width: fit-content; + user-select: none; +} + +#toggle-firing-arc-vis label:hover { + background-color: #CCC; +} + +#toggle-firing-arc-vis input + label .visible { + display: none; +} + +#toggle-firing-arc-vis input:checked + label .visible { + display: inline; +} + +#toggle-firing-arc-vis input:checked + label .hidden { + display: none; +} + +.select-elevation { + margin-right: 3px; background-color: #FFFFFF99; border: 1px solid gray; padding: 2px; @@ -442,6 +494,26 @@ div#dice { background-color: #cdd9e9; } +div#dice { + margin: 3px; + padding: 2px; + background-color: rgba(255, 255, 255, 0.8); + border-radius: 4px; + border: 1px solid darkgray; +} + +div#status { + margin: 3px; + /* display: none; */ + /* visibility: hidden; */ + user-select: none; + position: absolute; + bottom: 0; + /* right: 50px; */ + white-space: nowrap; + pointer-events: none; +} + @keyframes roll-out { 0% { transform: scaleX(1); diff --git a/public/index.html b/public/index.html index 4d32ce6..40d6e1b 100644 --- a/public/index.html +++ b/public/index.html @@ -1,106 +1,139 @@ - - Infantry Combat Solo Basic - - - - + + Infantry Combat Solo Basic + + - + + +
+
+
+ + +
-
-
Defender
- -
Attacker
- + + + +
@@ -155,106 +188,107 @@
+
-
- Loading... -
- - +
+ Distance: - +
-
- Distance: - -
+
+ Loading...
-
- -
- Turn: - - 0 - ◓ - ◒ - - - - -
+ +
+
+ Turn: + + 0 + ◓ + ◒ + + + + + + + + Prone: + + + + + +
- - Prone: - - -
+
+ +

+ Defender + - - -

- -
-
- -

- Attacker - - -
- -

-
-
-
- -

- Defender - - -
- -

-
-
+

+
+ - -
-

- -

-
- - -
-
- + +
+

+ +

+
+ + +
+
+ + + - + + + - - - diff --git a/src/index.js b/src/index.js index bb299be..07dffa0 100644 --- a/src/index.js +++ b/src/index.js @@ -17,7 +17,7 @@ if (window.IS_DEV) { const mapPlaceholder = document.querySelector('.map-placeholder'), distanceOutput = document.getElementById('status'), proneToggle = document.getElementById('toggle-prone-counter'), - contentVisToggleEl = document.querySelector('#content input[type="checkbox"].visible'), + contentVisToggleEl = document.querySelector('#edge-inputs input[type="checkbox"].visible'), // fileName = localStorage.getItem('map') || 'scenario-side_show', fileName = localStorage.getItem('map') || 'radial', map = scenarios[fileName]?.hashed || `assets/images/${fileName}.svg`, @@ -92,7 +92,7 @@ function clearMoveEndedIndicators(records) { function distance(count = '-') { distanceOutput.querySelector('#hex-count').textContent = count; - distanceOutput.style.display = count === '-' ? 'none' : 'block'; + distanceOutput.style.visibility = count === '-' ? 'hidden' : 'visible'; } // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random#getting_a_random_integer_between_two_values_inclusive -- cgit v1.2.3