From 5fc598cdd15be3d8dd856997af2b1f68f774162c Mon Sep 17 00:00:00 2001 From: Catalin Mititiuc Date: Tue, 23 Jul 2024 15:05:58 -0700 Subject: WIP: counters --- public/assets/css/map.css | 122 +++++++++++++++++++++++------ public/assets/css/style.css | 15 ++++ public/assets/images/counter_1st_floor.png | Bin 0 -> 8593 bytes public/assets/images/counter_2nd_floor.png | Bin 0 -> 7961 bytes public/assets/images/counter_3rd_floor.png | Bin 0 -> 8250 bytes public/assets/images/counter_basement.png | Bin 0 -> 7876 bytes public/assets/images/counter_grenade.png | Bin 0 -> 14868 bytes public/assets/images/counter_prone.png | Bin 0 -> 6761 bytes public/assets/images/scenario_template.svg | 16 ++-- public/index.html | 19 ++++- 10 files changed, 136 insertions(+), 36 deletions(-) create mode 100644 public/assets/images/counter_1st_floor.png create mode 100644 public/assets/images/counter_2nd_floor.png create mode 100644 public/assets/images/counter_3rd_floor.png create mode 100644 public/assets/images/counter_basement.png create mode 100644 public/assets/images/counter_grenade.png create mode 100644 public/assets/images/counter_prone.png (limited to 'public') diff --git a/public/assets/css/map.css b/public/assets/css/map.css index cd7ea6a..e6a25aa 100644 --- a/public/assets/css/map.css +++ b/public/assets/css/map.css @@ -82,10 +82,6 @@ g.troop-counter-template text { transform: translate(-5px, 6px); } -[href="#counter-grenade"] { - transform: translate(-5px, -5px); -} - g.clone { stroke: white; stroke-width: 0.5px; @@ -173,10 +169,35 @@ polygon.firing-arc[data-allegiance="attacker"] { stroke-opacity: inherit; } -g.counter use { +/*g.counter use {*/ +/* r: 5px;*/ +/*}*/ + +g.counter { r: 5px; } +[data-q][data-r][data-s][data-t]:hover g.counter { + /*transform: scale(3);*/ +} + +g.counter:hover { + /*transform: scale(3);*/ + /*r: 20px;*/ +} + +/*g.counter:hover * {*/ +/* r: 20px;*/ +/*}*/ + +g.counter.selected { + r: 6px; +} + +g.counter use.primary-weapon { + r: inherit; +} + g.counter use.troop-number, g.counter use.squad-number { --scale: 0.25; } @@ -197,7 +218,8 @@ g.selected use.primary-weapon { animation: 1s selected 0.25s linear infinite; stroke-width: 2px; stroke: yellow; - r: 6px; + /*r: 6px;*/ + r: inherit; } pattern use { @@ -247,23 +269,42 @@ g[data-y]:nth-child(odd) { fill: orange; stroke: black; } - -[data-x]:hover g.counter, -[data-q][data-r][data-s][data-t]:hover g.counter { - transform: scale(1.5); -} - -[data-x]:hover g.counter .troop-number, -[data-q][data-r][data-s][data-t]:hover g.counter .troop-number { - --translateX: -5px; - --scale: 0.5; -} - -[data-x]:hover g.counter .squad-number, -[data-q][data-r][data-s][data-t]:hover g.counter .squad-number { - --translateX: 5px; - --scale: 0.5; -} +/**/ +/*[data-q][data-r][data-s][data-t] g.counter,*/ +/*[data-q][data-r][data-s][data-t] g.counter .troop-number,*/ +/*[data-q][data-r][data-s][data-t] g.counter .squad-number {*/ +/* transition: transform 0.25s;*/ +/*}*/ + +/*[data-q][data-r][data-s][data-t]:hover g.counter {*/ +/* transform: scale(2);*/ +/*}*/ + +/*[data-q][data-r][data-s][data-t]:hover use[href="#hex"] {*/ +/* scale: 0.5;*/ +/*}*/ + + + +/*[data-x]:hover g.counter,*/ +/*[data-q][data-r][data-s][data-t]:hover g.counter {*/ +/* transform: scale(1.5);*/ +/* transition: transform 0.25s;*/ +/*}*/ +/**/ +/*[data-x]:hover g.counter .troop-number,*/ +/*[data-q][data-r][data-s][data-t]:hover g.counter .troop-number {*/ +/* --translateX: -5px;*/ +/* --scale: 0.5;*/ +/* transition: transform 0.25s;*/ +/*}*/ +/**/ +/*[data-x]:hover g.counter .squad-number,*/ +/*[data-q][data-r][data-s][data-t]:hover g.counter .squad-number {*/ +/* --translateX: 5px;*/ +/* --scale: 0.5;*/ +/* transition: transform 0.25s;*/ +/*}*/ [data-x] { --scale: 1; @@ -462,10 +503,43 @@ text.elevation { [data-q][data-r][data-s][data-t] .radial-icon { cx: calc(var(--cx) / 20); - cy: calc(var(--cy) / 20) + cy: calc(var(--cy) / 20); } [data-q][data-r][data-s][data-t]:hover .radial-icon { cx: var(--cx); cy: var(--cy); } + +use[class^="counter-"] { + --scale: 1; + --translateX: -5px; + --translateY: -5px; + transform: scale(var(--scale)) translate(var(--translateX), var(--translateY)); + /*transform: translate(var(--translateX), var(--translateY)) scale(var(--scale));*/ +} + +use[class^="counter-"] { + transition: x 0.25s, y 0.25s; + --scale: 0.5; + /*--translateY: 0px;*/ +} + +.counter use[href^="#counter"] { + /*transform: scale(0.5);*/ +} + +g.counter use[class^="counter-"] { + x: calc(var(--x) * 1.25); + y: calc(var(--y) * 1.25); + /*y: 10px;*/ + /*x: var(--x);*/ + /*y: var(--y);*/ +} + +[data-q][data-r][data-s][data-t]:hover use[class^="counter-"], + x: calc(var(--x) * 1.5); + y: calc(var(--y) * 1.5); + /*--scale: 1;*/ + --translateY: -5px; +} diff --git a/public/assets/css/style.css b/public/assets/css/style.css index e1257a4..af9dd2a 100644 --- a/public/assets/css/style.css +++ b/public/assets/css/style.css @@ -576,6 +576,21 @@ div#status { pointer-events: none; } +.counters-list { + user-select: none; +} + +.counters-list > img { + vertical-align: middle; + height: 20px; + border: 1px solid lightgray; + border-radius: 2px; +} + +.counters-list > img:hover { + border: 1px solid gray; +} + @keyframes roll-out { 0% { transform: scaleX(1); diff --git a/public/assets/images/counter_1st_floor.png b/public/assets/images/counter_1st_floor.png new file mode 100644 index 0000000..0728ac0 Binary files /dev/null and b/public/assets/images/counter_1st_floor.png differ diff --git a/public/assets/images/counter_2nd_floor.png b/public/assets/images/counter_2nd_floor.png new file mode 100644 index 0000000..8417461 Binary files /dev/null and b/public/assets/images/counter_2nd_floor.png differ diff --git a/public/assets/images/counter_3rd_floor.png b/public/assets/images/counter_3rd_floor.png new file mode 100644 index 0000000..82a54a0 Binary files /dev/null and b/public/assets/images/counter_3rd_floor.png differ diff --git a/public/assets/images/counter_basement.png b/public/assets/images/counter_basement.png new file mode 100644 index 0000000..05a5be2 Binary files /dev/null and b/public/assets/images/counter_basement.png differ diff --git a/public/assets/images/counter_grenade.png b/public/assets/images/counter_grenade.png new file mode 100644 index 0000000..de6112e Binary files /dev/null and b/public/assets/images/counter_grenade.png differ diff --git a/public/assets/images/counter_prone.png b/public/assets/images/counter_prone.png new file mode 100644 index 0000000..4bdaa51 Binary files /dev/null and b/public/assets/images/counter_prone.png differ diff --git a/public/assets/images/scenario_template.svg b/public/assets/images/scenario_template.svg index 5480a8c..964e80f 100644 --- a/public/assets/images/scenario_template.svg +++ b/public/assets/images/scenario_template.svg @@ -3,13 +3,6 @@ - - - - - - - @@ -33,8 +26,12 @@ - - + + + + + + @@ -48,5 +45,6 @@ + diff --git a/public/index.html b/public/index.html index f4b28a9..dcaad12 100644 --- a/public/index.html +++ b/public/index.html @@ -231,11 +231,24 @@ 6 MP - + Mech + + + + + + + + + - M - + Prone + Bsmnt + 1st Flr + 2nd Flr + 3rd Flr + -- cgit v1.2.3