completo basicamente

rpg/css/styleObs.css

@@ -0,0 +1,75 @@
+body {
+    background-color: transparent;
+}
+
+#playerDATA {
+    position: absolute;
+    width: 100%;
+    bottom: 0;
+    background: var(--btncolor);
+    display: flex;
+    align-items: center;
+    img {
+        margin: 3dvw;
+        width: 30dvh;
+        height: 30dvh;
+        object-fit: cover;
+        border: solid 4px red;
+        border-radius: 100vw;
+    }
+
+    ul {
+        position: relative;
+        width: 80%;
+        padding: 1vw;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+
+        li {
+            overflow: hidden;
+            display: flex;
+            width: 100%;
+            font-size: 3em;
+            p {
+                margin: 0 0 0 1vw;
+            }
+            #progress {
+                border: solid 4px darkred;
+                border-radius: 10vw;
+                position: absolute;
+                width: 40%;
+                height: 20%;
+                background: var(--lines);
+                top: 1vw;
+                right: 1vw;
+                nav {
+                    transition: 0.3s;
+                    position: absolute;
+                    left: 0;
+                    width: 80%;
+                    height: 100%;
+                    background: darkred;
+                }
+
+                label {
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    position: absolute;
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+        }
+        h3 {
+            position: absolute;
+            right: 1vw;
+            bottom: 2vw;
+            padding: 1vw;
+            border-radius: 10vw;
+            background: red;
+            font-size: 3em;
+        }
+    }
+}

rpg/javascript/loadPlayer.js

@@ -0,0 +1,60 @@
+let img;
+let playerID;
+
+function loadFicha(id) {
+  $.ajax({
+    url: `${window.api}player/info/${id}`,
+    type: "GET",
+    xhrFields: { withCredentials: true },
+    success(resp) {
+      if (!img) {
+        img = resp.Foto;
+        $("#hero").attr("src", `data:image/*;base64,${resp.Foto}`);
+      }
+
+      if (!playerID) playerID = resp.PlayerID;
+      $("#vdp").text(resp.Vida);
+      $("#nmp").text(resp.PlayerName);
+      $("#lvp").text(resp.Level);
+      $("#idp").text(resp.Idade);
+      $("#alp").text(resp.Altura);
+      $("#progress nav").css({ width: resp.VidaPorcentagem + "%" });
+
+      const statusMap = [
+        { limit: 0, text: "Status: morto(a)" },
+        { limit: 5, text: "Status: morrendo" },
+        { limit: 50, text: "Status: muito ferido(a)" },
+        { limit: 70, text: "Status: ferido(a)" },
+        { limit: 100, text: "Status: normal" },
+      ];
+
+      const status = statusMap.find((s) => resp.VidaPorcentagem <= s.limit);
+      $("#playerDATA ul h3").text(status?.text || "Status: desconhecido");
+    },
+    error() {
+      return $("body").html(
+        '<div class="erro">a url esta incorreta ou usuario não existe</div>',
+      );
+    },
+  });
+}
+
+$(document).ready(function () {
+  function getParam(param) {
+    let urlParams = new URLSearchParams(window.location.search);
+    return urlParams.get(param);
+  }
+
+  let id = getParam("id");
+
+  if (!id) {
+    return $("body").html(
+      '<div class="erro">Você precisa passar uma ID na url</div>',
+    );
+  }
+  setInterval(() => {
+    loadFicha(id);
+  }, 1000);
+
+  loadFicha(id);
+});

rpg/javascript/load_ficha.js

@@ -287,6 +287,11 @@ $(document).ready(function () {
     share(textToCopy);
   });
 
+  $(".obs").on("click", function () {
+    const textToCopy = `${window.location.origin}/obs.html?id=1${playerID}`;
+    share(textToCopy);
+  });
+
   setInterval(() => {
     loadFicha();
     rollLoad();

rpg/javascript/roll.js

@@ -0,0 +1,41 @@
+let update;
+
+function msg_(status, msg) {
+  tata.text(status, msg, {
+    position: "bl",
+    duration: 3000,
+    progress: true,
+    closeBtn: false,
+    animate: "slide",
+  });
+}
+
+function rollLoad() {
+  $.ajax({
+    url: `${window.api}roll`,
+    type: "GET",
+    xhrFields: { withCredentials: true },
+    success(resp) {
+      let latestLog = null;
+
+      resp.Logs.forEach((item) => {
+        if (update === undefined || item.id > update) {
+          if (!latestLog || item.id > latestLog.id) {
+            latestLog = item;
+          }
+        }
+      });
+
+      if (latestLog) {
+        msg_("Rolagem", latestLog.log);
+        update = latestLog.id;
+      }
+    },
+  });
+}
+
+$(document).ready(function () {
+  setInterval(() => {
+    rollLoad();
+  }, 1000);
+});

rpg/obs.html

@@ -0,0 +1,45 @@
+<!doctype html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <meta
+            name="viewport"
+            content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+        />
+        <title>obs</title>
+        <link rel="stylesheet" href="css/base.css" />
+        <link rel="stylesheet" href="css/styleObs.css" />
+        <script type="text/javascript" src="javascript/libs/jquery.js"></script>
+        <script type="text/javascript" src="javascript/globais.js"></script>
+    </head>
+    <body>
+        <div id="playerDATA">
+            <img id="hero" src="images/none.png" />
+            <ul>
+                <li>
+                    <label>nome:</label>
+                    <p id="nmp">N/A</p>
+                    <nav id="progress">
+                        <nav></nav>
+                        <label id="vdp">0/0</label>
+                    </nav>
+                </li>
+                <li></li>
+                <li>
+                    <label>level:</label>
+                    <p id="lvp">0</p>
+                </li>
+                <li>
+                    <label>idade:</label>
+                    <p id="idp">0</p>
+                </li>
+                <li>
+                    <label>altura:</label>
+                    <p id="alp">0,0</p>
+                </li>
+                <h3>status:</h3>
+            </ul>
+        </div>
+        <script type="text/javascript" src="javascript/loadPlayer.js"></script>
+    </body>
+</html>

rpg/profile.html

@@ -6,7 +6,7 @@
             name="viewport"
             content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
         />
-        <title>ficha</title>
+        <title>profile</title>
         <link rel="stylesheet" href="css/base.css" />
         <link rel="stylesheet" href="css/styleProfile.css" />
         <script type="text/javascript" src="javascript/libs/jquery.js"></script>

rpg/roll.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <meta
+            name="viewport"
+            content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+        />
+        <title>obs</title>
+        <script type="text/javascript" src="javascript/libs/jquery.js"></script>
+        <script type="text/javascript" src="javascript/globais.js"></script>
+        <script type="text/javascript" src="javascript/libs/tata.js"></script>
+    </head>
+    <body>
+        <script type="text/javascript" src="javascript/roll.js"></script>
+    </body>
+</html>