parte do cliente completa, falta so a parte do obs e do mestre.

rpg/css/style.css

@@ -78,6 +78,29 @@
     background-color: var(--subbgcolor);
 }
 
+#powers {
+    ul {
+        li {
+            position: relative;
+            #DelBTN {
+                top: 0;
+                right: 0;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                background-color: red;
+                position: absolute;
+                width: 4dvh;
+                height: 100%;
+                transition: 0.3s;
+                &:hover {
+                    background-color: darkred;
+                }
+            }
+        }
+    }
+}
+
 #status {
     width: 25%;
     border-right: solid 1px var(--lines);
@@ -352,7 +375,7 @@
             font-size: 1.2em;
             margin-top: 0.5dvh;
         }
-        a {
+        input[type="submit"] {
             margin-top: 0.5dvh;
             background-color: var(--btncolor);
             width: 90%;

rpg/index.html

@@ -50,6 +50,9 @@
                     <a id="btn" class="share">
                         <span class="material-symbols-outlined">share</span>
                     </a>
+                    <a id="btn" class="obs">
+                        <span class="material-symbols-outlined">duo</span>
+                    </a>
                 </li>
                 <li>
                     <label>level:</label>
@@ -378,9 +381,7 @@
             </div>
             <div id="powers">
                 <h1>Habilidades</h1>
-                <ul>
-                    <li><a>bla bla bla bla</a></li>
-                </ul>
+                <ul></ul>
                 <hgroup>
                     <input
                         type="text"
@@ -390,9 +391,15 @@
                     />
                     <textarea
                         id="desc"
+                        name="desc"
                         placeholder="escrava como sua habilidade ou poder funciona"
                     ></textarea>
-                    <a id="btn">add</a>
+                    <input
+                        type="submit"
+                        id="btn"
+                        class="powerAdd"
+                        value="add"
+                    />
                 </hgroup>
             </div>
         </div>

rpg/javascript/load_ficha.js

@@ -1,6 +1,7 @@
 let img;
 let update;
 let playerID;
+let lastPowerID = 0;
 
 async function useInv(id, type) {
   try {
@@ -18,6 +19,46 @@ async function useInv(id, type) {
   }
 }
 
+function invpower() {
+  $.ajax({
+    url: `${window.api}player/inv/ph`,
+    type: "GET",
+    xhrFields: { withCredentials: true },
+    success(resp) {
+      const $invpower = $("#powers ul");
+
+      let latestId = lastPowerID;
+
+      resp.InvPws.forEach((item) => {
+        if (item.id > lastPowerID) {
+          const $li = $("<li>");
+          $li.append($("<a>").text(item.name));
+
+          const $del = $("<a>")
+            .attr("id", "DelBTN")
+            .append(
+              $("<span>").addClass("material-symbols-outlined").text("close"),
+            );
+
+          $li.on("click", () => alert(item.desc));
+          $del.on("click", (e) => {
+            e.stopPropagation();
+            useInv(item.id, "ph/del");
+            $del.closest("li").remove();
+          });
+
+          $li.append($del);
+          $invpower.append($li);
+
+          if (item.id > latestId) latestId = item.id;
+        }
+      });
+
+      lastPowerID = latestId;
+    },
+  });
+}
+
 function invPlayer() {
   $.ajax({
     url: `${window.api}player/inv`,
@@ -57,6 +98,28 @@ function invPlayer() {
   });
 }
 
+function invPowerAdd() {
+  const habilidade = $("input[name='habilidade']").val();
+  const desc = $("textarea[name='desc']").val();
+
+  $.ajax({
+    url: `${window.api}player/inv/ph`,
+    type: "POST",
+    data: { nameph: habilidade, descph: desc },
+    xhrFields: { withCredentials: true },
+    success(resp) {
+      msg(resp.Status, resp.Message);
+      $("input[name='habilidade'], textarea[name='desc']").val("");
+    },
+    error(resp) {
+      msg(
+        resp.responseJSON?.Status || "Erro",
+        resp.responseJSON?.Message || "Algo deu errado.",
+      );
+    },
+  });
+}
+
 function invAdd() {
   const nome = $("input[name='item_name']").val();
   const durabilidade = $("select[name='durabilite']").val();
@@ -196,10 +259,15 @@ $(document).ready(function () {
     invAdd();
   });
 
+  $(".powerAdd").on("click", function () {
+    invPowerAdd();
+  });
+
   setInterval(() => {
     loadFicha();
     rollLoad();
     invPlayer();
+    invpower();
   }, 1000);
 
   loadFicha();