display buffs in the client

2025-01-18 12:00:12 +09:00
parent 18c3ace616
commit 8457312f63
5 changed files with 90 additions and 27 deletions
@@ -132,6 +132,38 @@
        height: 20px;
        padding: 2px;
      }
+
+      .buffs {
+        position: fixed;
+        display: flex;
+        gap: 10px;
+        inset: auto 0 120px calc(50vw - 165px);
+        width: fit-content;
+      }
+
+      .buff {
+        flex: 1 0 0;
+        width: 30px;
+        height: 30px;
+        background-color: black;
+        /* border: 1px solid gray; */
+        border-right: 1px solid gray;
+        color: white;
+        overflow: hidden;
+      }
+
+      .buff:hover {
+        overflow: visible;
+        z-index: 3;
+      }
+
+      .buff-body {
+        border: 1px solid gray;
+        padding: 5px;
+        background-color: black;
+        width: fit-content;
+        height: 100%;
+      }
    </style>
  </head>
  <body>
@@ -168,6 +200,7 @@
        <div id="ability-3-cooldown-text" class="cooldown-text"></div>
      </div>
    </div>
+    <div id="buffs" class="buffs"></div>
    <script type="module" src="client.js"></script>
  </body>
 </html>