Battlefield updates

WEBSOCKET_PROTOCOL.md

@@ -223,7 +223,7 @@ The server responds with the requested information, which the client can then ca
 The protocol includes several other messages to enhance the client experience:
 
 *   **`room.describe`**: Provides a detailed description of the current room, including an ASCII map.
-*   **`entity.attack`** and **`affect.cure`**: Trigger client-side animations for combat and healing.
+*   **`entity.attack`** and **`effect.cure`**: Trigger client-side animations for combat and healing.
 *   **`channel.msg`**: Handles all chat and communication channels.
 *   **`map.settings`**: Configures the client's map display.
 *   **`help.topics`**, **`help.entry`**, **`help.search`**: Provide access to the in-game help system.
@@ -506,7 +506,7 @@ Notifies the client that an entity has been attacked, for animation purposes.
 
 ---
 
-### `affect.cure`
+### `effect.cure`
 
 Notifies the client that an entity has been healed, for animation purposes.
 
@@ -517,7 +517,7 @@ Notifies the client that an entity has been healed, for animation purposes.
 *Example:*
 ```json
 {
-  "cmd": "affect.cure",
+  "cmd": "effect.cure",
   "msg": {
     "target": 12345,
     "amount": 10

jsconfig.json

@@ -2,7 +2,8 @@
   "compilerOptions": {
     "paths": {
       "@/*": ["./src/*"]
-    }
+    },
+    "lib": ["es2015", "dom"]
   },
   "exclude": ["node_modules", "dist"]
 }

src/App.vue

@@ -114,11 +114,6 @@ onBeforeUnmount(() => {
   --n-label-font-size: 16px;
 }
 
-// .selected {
-//   box-shadow: 0 0 5px #f8ff25;
-//   color: #f8ff25;
-// }
-
 body, html {
   margin: 0;
   padding: 0;
@@ -128,12 +123,9 @@ body, html {
   line-height: 1.1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  height: 100%;
 }
 
-//*, * > * {
-  //overflow: auto;
-//}
-
 ::-webkit-scrollbar {
   background: transparent;
 }
@@ -171,4 +163,45 @@ body, html {
 b {
   font-weight: normal !important;
 }
+
+.modal-close-button {
+  margin: 0;
+  padding: 5px;
+  background-color: #18181b;
+  border: 1px solid #18181b;
+  border-radius: 4px;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  font-size: 32px;
+  z-index: 2;
+  line-height: 16px;
+  cursor: pointer;
+  transition: all 0.3s;
+  &:hover {
+    border: 1px solid rgb(119 69 69);
+    background-color: rgb(45 27 27 / 90%);
+  }
+}
+
+.modal-keyboard-toggle {
+  margin: 0 5px 0 0;
+  padding: 5px;
+  background-color: #18181b;
+  border: 1px solid #18181b;
+  border-radius: 4px;
+  position: absolute;
+  top: 10px;
+  right: 44px;
+  font-size: 32px;
+  z-index: 2;
+  line-height: 16px;
+  cursor: pointer;
+  transition: all 0.3s;
+  &:hover, &.active {
+    border: 1px solid rgb(69 119 69);
+    background-color: rgb(27 45 27 / 90%);
+  }
+}
+
 </style>