Web Dev Solutions

Catalin Mititiuc

aboutsummaryrefslogtreecommitdiff
path: root/public
diff options
context:
space:
mode:
authorCatalin Mititiuc <webdevcat@proton.me>2024-07-23 15:05:58 -0700
committerCatalin Mititiuc <webdevcat@proton.me>2024-07-23 15:05:58 -0700
commit5fc598cdd15be3d8dd856997af2b1f68f774162c (patch)
treead964b16b065e859a5c71e7ff294c86f14ad77e4 /public
parent9d44de5f114cacd915661ef5b2af3e5098fee3b8 (diff)
WIP: counters
Diffstat (limited to 'public')
-rw-r--r--public/assets/css/map.css122
-rw-r--r--public/assets/css/style.css15
-rw-r--r--public/assets/images/counter_1st_floor.pngbin0 -> 8593 bytes
-rw-r--r--public/assets/images/counter_2nd_floor.pngbin0 -> 7961 bytes
-rw-r--r--public/assets/images/counter_3rd_floor.pngbin0 -> 8250 bytes
-rw-r--r--public/assets/images/counter_basement.pngbin0 -> 7876 bytes
-rw-r--r--public/assets/images/counter_grenade.pngbin0 -> 14868 bytes
-rw-r--r--public/assets/images/counter_prone.pngbin0 -> 6761 bytes
-rw-r--r--public/assets/images/scenario_template.svg16
-rw-r--r--public/index.html19
10 files changed, 136 insertions, 36 deletions
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
--- /dev/null
+++ b/public/assets/images/counter_1st_floor.png
Binary files 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
--- /dev/null
+++ b/public/assets/images/counter_2nd_floor.png
Binary files 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
--- /dev/null
+++ b/public/assets/images/counter_3rd_floor.png
Binary files differ
diff --git a/public/assets/images/counter_basement.png b/public/assets/images/counter_basement.png
new file mode 100644
index 0000000..05a5be2
--- /dev/null
+++ b/public/assets/images/counter_basement.png
Binary files differ
diff --git a/public/assets/images/counter_grenade.png b/public/assets/images/counter_grenade.png
new file mode 100644
index 0000000..de6112e
--- /dev/null
+++ b/public/assets/images/counter_grenade.png
Binary files differ
diff --git a/public/assets/images/counter_prone.png b/public/assets/images/counter_prone.png
new file mode 100644
index 0000000..4bdaa51
--- /dev/null
+++ b/public/assets/images/counter_prone.png
Binary files 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 @@
<link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="../css/radial.css" type="text/css" />
<link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="../css/map.css" type="text/css" />
- <!--<style>-->
- <!-- .grid .building use {-->
- <!-- opacity: 1;-->
- <!-- fill: teal;-->
- <!-- }-->
- <!--</style>-->
-
<defs>
<polygon id="hex" points="0,10 8.66,5 8.66,-5 0,-10 -8.66,-5 -8.66,5"/>
@@ -33,8 +26,12 @@
<use x="8.66" y="15" transform="rotate(60 8.66 15)" href="#ast-line"/>
</pattern>
- <image id="counter-prone" href="counter_prone.jpg" width="10"/>
- <image id="counter-grenade" href="counter_grenade.jpg" width="10"/>
+ <image id="counter-grenade" href="counter_grenade.png" width="10"/>
+ <image id="counter-prone" href="counter_prone.png" width="10"/>
+ <image id="counter-basement" href="counter_basement.png" width="10"/>
+ <image id="counter-1st-floor" href="counter_1st_floor.png" width="10"/>
+ <image id="counter-2nd-floor" href="counter_2nd_floor.png" width="10"/>
+ <image id="counter-3rd-floor" href="counter_3rd_floor.png" width="10"/>
</defs>
<g class="gameboard" data-view-elevation="0">
@@ -48,5 +45,6 @@
</g>
<g class="grid"/>
+ <g class="pieces"/>
</g>
</svg>
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 @@
<button type="button" class="set-firing-arc" data-size="large">
<img src="assets/images/firing_arc_large.png" height="12" /> 6 MP
</button>
- <button type="button" class="set-grenade">
+ <button type="button" class="set-mech-template">Mech</button>
+ </span>
+ <div class="counters-list">
+ <!--<img src="assets/images/counter_grenade.png" />-->
+ <!--<img src="assets/images/counter_prone.png" />-->
+ <!--<img src="assets/images/counter_basement.png" />-->
+ <!--<img src="assets/images/counter_1st_floor.png" />-->
+ <!--<img src="assets/images/counter_2nd_floor.png" />-->
+ <!--<img src="assets/images/counter_3rd_floor.png" />-->
+ <button type="button" class="grenade">
<img src="assets/images/icon_grenade.png" height="12" />
</button>
- <button type="button" class="set-mech-template">M</button>
- </span>
+ <button type="button" class="prone">Prone</button>
+ <button type="button" class="basement">Bsmnt</button>
+ <button type="button" class="1st-floor">1st Flr</button>
+ <button type="button" class="2nd-floor">2nd Flr</button>
+ <button type="button" class="3rd-floor">3rd Flr</button>
+ </div>
</div>
<div id="record-sheet">