From 0090d348d3122468b15e0571f09c849b627ecbed Mon Sep 17 00:00:00 2001
From: Mischa Untaga <99098079+MischaU8@users.noreply.github.com>
Date: Sat, 23 Sep 2023 08:09:47 +0200
Subject: show counters
---
play.html | 99 ++++++++++++++++++++++++++++++---------------------------------
1 file changed, 47 insertions(+), 52 deletions(-)
(limited to 'play.html')
diff --git a/play.html b/play.html
index 12f58f7..798fc85 100644
--- a/play.html
+++ b/play.html
@@ -37,46 +37,58 @@ main { background-color: dimgray }
background-image: url(map.svg);
}
-#map div {
+/* #map div {
position: absolute;
transition-property: top, left;
transition-duration: 1s;
transition-timing-function: ease;
-}
-
-#boxes { position: absolute; }
-#cities { position: absolute; }
-#units { position: absolute; }
+} */
/* SPACES */
.box{position:absolute;box-sizing:border-box;border:4px solid transparent}
-.box.city{border-radius:50%}
.box.loc{border-radius:50%}
.box.action{border-color:lemonchiffon;}
-.box.city.action{background-color:#6495ed55;border-color:deepskyblue;}
.box.loc.action{background-color:#fff5;border-color:white;}
.box.selected{border-color:yellow;}
.box.tip { border-color: white; }
+.stack {
+ display: grid;
+ grid-gap: 0.1rem;
+ grid-template-columns: repeat(8, 2px);
+ transition: grid-template-columns 0.5s;
+}
+
+.stack:hover {
+ grid-template-columns: repeat(8, 36px);
+}
+
+.stack:hover div {
+ z-index: 100;
+}
+
+#tracker div {
+ box-sizing: border-box;
+}
/* COUNTERS */
-#map .counter {
+/* #map .counter {
position: absolute;
-}
+} */
.counter {
background-size: 1000%;
background-repeat: no-repeat;
border-style: solid;
- transition: top 200ms, left 200ms, transform 200ms;
+ /* transition: top 200ms, left 200ms, transform 200ms; */
}
.counter {
width: 39px;
height: 39px;
- border-width: 3px;
+ border-width: 2px;
border-radius: 8px;
background-image: url(counters.svg);
}
@@ -226,47 +238,23 @@ main { background-color: dimgray }
-
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+