From f1d67663dab2fd084c7e3996a83d17e9a6c5e037 Mon Sep 17 00:00:00 2001 From: Catalin Mititiuc Date: Thu, 25 Jul 2024 12:25:44 -0700 Subject: WIP: add multiple counters to troopers and cells --- public/assets/css/map.css | 31 ++++++++----- public/assets/images/counter-prone.svg | 31 +++++++++++++ public/assets/images/counter_grenade2.svg | 70 ++++++++++++++++++++++++++++++ public/assets/images/counter_prone.svg | 14 ++++++ public/assets/images/counter_prone2.svg | 70 ++++++++++++++++++++++++++++++ public/assets/images/scenario_template.svg | 6 +-- public/index.html | 6 --- 7 files changed, 208 insertions(+), 20 deletions(-) create mode 100644 public/assets/images/counter-prone.svg create mode 100644 public/assets/images/counter_grenade2.svg create mode 100644 public/assets/images/counter_prone.svg create mode 100644 public/assets/images/counter_prone2.svg (limited to 'public') diff --git a/public/assets/css/map.css b/public/assets/css/map.css index e6a25aa..06fe169 100644 --- a/public/assets/css/map.css +++ b/public/assets/css/map.css @@ -516,30 +516,39 @@ use[class^="counter-"] { --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-"], +[data-q][data-r][data-s][data-t] > use[class^="counter-"] { + x: calc(var(--x) / 6); + y: calc(var(--y) / 6); +} + +/* Counters carried by a trooper */ +[data-q][data-r][data-s][data-t]:hover g.counter use[class^="counter-"] { + /*x: calc(var(--x) * 1.5);*/ + /*y: calc(var(--y) * 1.5);*/ + /*--translateY: -5px;*/ +} + +/* Counters placed on a hex */ +[data-q][data-r][data-s][data-t]:hover > g.counter ~ use[class^="counter-"] { + x: calc(var(--x) * 2); + y: calc(var(--y) * 2); + --translateY: -5px; +} + +[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/images/counter-prone.svg b/public/assets/images/counter-prone.svg new file mode 100644 index 0000000..d93bb31 --- /dev/null +++ b/public/assets/images/counter-prone.svg @@ -0,0 +1,31 @@ + + + + diff --git a/public/assets/images/counter_grenade2.svg b/public/assets/images/counter_grenade2.svg new file mode 100644 index 0000000..21e6804 --- /dev/null +++ b/public/assets/images/counter_grenade2.svg @@ -0,0 +1,70 @@ + + + + diff --git a/public/assets/images/counter_prone.svg b/public/assets/images/counter_prone.svg new file mode 100644 index 0000000..ee224b3 --- /dev/null +++ b/public/assets/images/counter_prone.svg @@ -0,0 +1,14 @@ + + + + diff --git a/public/assets/images/counter_prone2.svg b/public/assets/images/counter_prone2.svg new file mode 100644 index 0000000..b59bba2 --- /dev/null +++ b/public/assets/images/counter_prone2.svg @@ -0,0 +1,70 @@ + + + + diff --git a/public/assets/images/scenario_template.svg b/public/assets/images/scenario_template.svg index efd6c8e..ad7cba3 100644 --- a/public/assets/images/scenario_template.svg +++ b/public/assets/images/scenario_template.svg @@ -28,11 +28,11 @@ - + - + @@ -63,6 +63,6 @@ - + diff --git a/public/index.html b/public/index.html index 562c3a2..c565a71 100644 --- a/public/index.html +++ b/public/index.html @@ -234,12 +234,6 @@ Mech - - - - - - -- cgit v1.2.3