make condition more visible (closes #50)

sakkaku-dev · Jun 2, 2023 · 44738d9 · 44738d9
1 parent cd327f9
commit 44738d9
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 8 deletions.
diff --git a/public/index.html b/public/index.html
@@ -39,6 +39,18 @@
     padding: 0 0.5rem; /* No vertical padding, since there is already a line height */
   }
 
+  @keyframes pulse {
+    0% {
+      transform: scale(1);
+    }
+    50% {
+      transform: scale(1.2);
+    }
+    100% {
+      transform: scale(1);
+    }
+  }
+
   #sidebar {
     position: absolute;
     right: 0;
@@ -185,8 +197,8 @@
     transform: scale(var(--ggs, 1));
     width: 20px;
     height: 10px;
-    background: linear-gradient(to left, currentColor 18px, transparent 0)
-      no-repeat 2px 4px/16px 2px;
+    background: linear-gradient(to left, currentColor 18px, transparent 0) no-repeat 2px 4px/16px
+      2px;
   }
   .gg-arrows-h-alt::after,
   .gg-arrows-h-alt::before {

diff --git a/src/nethack.ts b/src/nethack.ts
@@ -16,9 +16,7 @@ const options = [
   "hilite_status:hitpoints/<40%/red",
   "hilite_status:hunger/always/red&bold",
   "hilite_status:carrying-capacity/burdened/yellow/stressed/orange",
-  "hilite_status:condition/all/bold",
-  "hilite_status:condition/major_troubles/red",
-  "hilite_status:condition/minor_troubles/orange",
+  "hilite_status:condition/all/bold/major_troubles/red/minor_troubles/orange",
   "autoopen",
   "!cmdassist",
   "sortloot:full",

diff --git a/src/ui/components/status.ts b/src/ui/components/status.ts
@@ -61,11 +61,18 @@ export class StatusLine {
     return container;
   }
 
-  private createText(text?: StyledText) {
+  private createText(text?: StyledText, pulse = false) {
     const elem = document.createElement("span");
     if (text) {
       elem.innerHTML = text.text;
 
+      if (pulse) {
+        elem.style.animationName = "pulse";
+        elem.style.animationDuration = "2s";
+        elem.style.animationIterationCount = "infinite";
+        elem.style.animationTimingFunction = "ease-in-out";
+      }
+
       if (text.color in COLOR_MAP) {
         const color = text.color as keyof typeof COLOR_MAP;
         elem.style.color = COLOR_MAP[color];
@@ -87,9 +94,10 @@ export class StatusLine {
 
     const conditions = document.createElement("div");
     horiz(conditions);
-    conditions.appendChild(this.createText(s.hunger));
-    s.condition?.forEach((c) => conditions.appendChild(this.createText(c)));
+    conditions.appendChild(this.createText(s.hunger, true));
+    s.condition?.forEach((c) => conditions.appendChild(this.createText(c, true)));
     conditions.style.flexGrow = "1";
+    conditions.style.fontSize = "1.2rem";
     firstRow.appendChild(conditions);
 
     // firstRow.appendChild(this.toggleExpandButton());