reta final, so falta a parte do obs studio agora

back_end/main.go

@@ -98,6 +98,8 @@ func main() {
 	e.POST("login", login, timeoutMiddleware, rateLimit)
 	e.GET("login", badreq)
 	e.GET("player", player_data)
+	e.GET("player/info/:id", player_info)
+	e.GET("player/info*", player_info)
 	e.GET("player/inv", inv_get)
 	e.POST("player/inv", inv_add)
 	e.GET("player/inv/del/:id", inv_del)

back_end/rotas.go

@@ -190,6 +190,50 @@ func roll_get(c echo.Context) error {
 	})
 }
 
+func player_info(c echo.Context) error {
+	id := c.Param("id")
+
+	if anyEmpty(id) {
+		return jsonError(c, http.StatusBadRequest, "você precisa passar a id do usuario.")
+	}
+
+	var foto, nome, vida, descricao string
+	var conhecimento, level, idade, vd, vdm, destreza, inteligencia, forca, constituicao, carisma, inventario int64
+	var altura float64
+
+	err := db.QueryRow(`SELECT foto, nome, conhecimento, level, idade, altura, vida, vida_maxima,
+		destresa, inteligencia, força, constituição, cárisma, inventario, descrição
+		FROM players WHERE id=? LIMIT 1;`, id).
+		Scan(&foto, &nome, &conhecimento, &level, &idade, &altura, &vd, &vdm,
+			&destreza, &inteligencia, &forca, &constituicao, &carisma, &inventario, &descricao)
+
+	if err != nil {
+		return jsonError(c, http.StatusBadRequest, "Algo deu errado ao carregar informações do player")
+	}
+
+	vida = fmt.Sprintf("%v/%v", vd, vdm)
+	porcentagem := (float64(vd) / float64(vdm)) * 100
+
+	return c.JSON(http.StatusOK, resp_json{
+		Status:          "Success",
+		Foto:            foto,
+		PlayerName:      nome,
+		Conhecimento:    &conhecimento,
+		Level:           &level,
+		Idade:           &idade,
+		Altura:          &altura,
+		Vida:            vida,
+		VidaPorcentagem: &porcentagem,
+		Destresa:        &destreza,
+		Inteligencia:    &inteligencia,
+		Força:           &forca,
+		Constituição:    &constituicao,
+		Cárisma:         &carisma,
+		Inventario:      &inventario,
+		Descrição:       descricao,
+	})
+}
+
 func player_data(c echo.Context) error {
 	session, err := requireSession(c)
 	if err != nil {

rpg/css/styleProfile.css

@@ -0,0 +1,168 @@
+* {
+    box-sizing: border-box;
+}
+
+#playerDATA {
+    background-color: var(--subbgcolor);
+    padding: 1dvw;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 1vw;
+
+    #hero {
+        width: 25dvh;
+        height: 25dvh;
+        border: solid 3px var(--backredcolor);
+        border-radius: 100dvh;
+        object-fit: cover;
+    }
+
+    ul {
+        padding-left: 1vw;
+        width: 80%;
+
+        li {
+            display: flex;
+            align-items: center;
+            padding: 1dvh;
+            font-size: 1.5em;
+            border-bottom: dotted 2px var(--lines);
+            flex-wrap: wrap;
+
+            p {
+                margin-left: 1dvh;
+            }
+        }
+    }
+}
+
+#box_1 {
+    display: flex;
+    h1 {
+        min-height: 4dvh;
+        width: 100%;
+        background: var(--btncolor);
+        font-family: "Share Tech Mono", monospace;
+        padding-left: 1dvh;
+    }
+    #status {
+        width: 50%;
+        border-right: solid 1px var(--lines);
+
+        overflow: hidden;
+        ul {
+            height: 90%;
+            display: flex;
+            flex-wrap: wrap;
+            align-items: center;
+            justify-content: center;
+            li {
+                margin: 2dvh;
+                background-color: var(--bgcolor);
+                border-radius: 1dvw;
+
+                label {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    padding: 1vw 0 1vw 1vw;
+                    p {
+                        padding: 0 1vw 0 0.5vw;
+                    }
+                }
+            }
+        }
+        background-color: var(--subbgcolor);
+    }
+
+    #text_lore {
+        width: 50%;
+        ul {
+            position: relative;
+            width: 100%;
+            p {
+                font-family: arial;
+                font-size: 1.5em;
+                padding: 1vw;
+                white-space: pre-wrap;
+                width: 100%;
+                min-height: 45dvw;
+            }
+        }
+    }
+}
+
+#statusPlayer {
+    text-align: center;
+    width: 10%;
+    position: fixed;
+    z-index: 1000;
+    top: 3dvh;
+    right: 3dvh;
+    padding: 0.5dvw;
+    border-radius: 10vw;
+    background-color: red;
+}
+
+@media only screen and (max-width: 1080px) {
+    #playerDATA {
+        flex-direction: column;
+        align-items: center;
+
+        #hero {
+            width: 40vw;
+            height: auto;
+            aspect-ratio: 1 / 1;
+        }
+
+        ul li {
+            font-size: clamp(1em, 2vw, 1.2em);
+        }
+    }
+
+    #box_1 {
+        flex-direction: column;
+
+        #status {
+            width: 100%;
+            min-height: 60vh;
+            ul {
+                justify-content: center;
+                align-items: center;
+            }
+        }
+        #text_lore {
+            width: 100%;
+            min-height: 60vh;
+        }
+    }
+    #statusPlayer {
+        width: 35%;
+        padding: 2dvw;
+    }
+}
+
+@media screen and (max-width: 1080px) and (orientation: landscape) {
+    #box_1 {
+        flex-direction: row;
+        flex-wrap: wrap;
+    }
+
+    #status {
+        width: 48%;
+        min-height: 50vh;
+        max-height: none;
+    }
+
+    #playerDATA #hero {
+        width: 40vh;
+        height: 40vh;
+    }
+
+    #statusPlayer {
+        width: 25%;
+        padding: 1dvw;
+    }
+}

rpg/javascript/load_ficha.js

@@ -237,6 +237,25 @@ function roll(dado) {
   });
 }
 
+function share(textToCopy) {
+  if (navigator.clipboard) {
+    return navigator.clipboard
+      .writeText(textToCopy)
+      .then(() => msg("success", "Link copiado com sucesso!"))
+      .catch(() => msg("error", "Erro ao copiar link"));
+  }
+  const $tempInput = $("<input>");
+  $("body").append($tempInput);
+  $tempInput.val(textToCopy).select();
+  try {
+    document.execCommand("copy");
+    msg("success", "Link copiado com sucesso!");
+  } catch (err) {
+    msg("error", "Erro ao copiar link");
+  }
+  $tempInput.remove();
+}
+
 $(document).ready(function () {
   $(".updown").click(function () {
     const atb = $(this).data("atb");
@@ -263,6 +282,11 @@ $(document).ready(function () {
     invPowerAdd();
   });
 
+  $(".share").on("click", function () {
+    const textToCopy = `${window.location.origin}/profile.html?id=${playerID}`;
+    share(textToCopy);
+  });
+
   setInterval(() => {
     loadFicha();
     rollLoad();

rpg/javascript/profile.js

@@ -0,0 +1,67 @@
+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);
+      $("#conhecimento").text(resp.Conhecimento);
+      $("#força").text(resp.Força);
+      $("#destresa").text(resp.Destresa);
+      $("#constitution").text(resp.Constituição);
+      $("#inteligencia").text(resp.Inteligencia);
+      $("#cárisma").text(resp.Cárisma);
+      $("#mip").text(resp.Inventario);
+      $("#lore").text(resp.Descrição);
+
+      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);
+      $("#statusPlayer").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/profile.html

@@ -0,0 +1,96 @@
+<!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>ficha</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>
+        <script type="text/javascript" src="javascript/libs/tata.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>vida:</label>
+                    <p id="vdp">0/0</p>
+                </li>
+                <li>
+                    <label>nome:</label>
+                    <p id="nmp">you user name</p>
+                </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>
+            </ul>
+        </div>
+        <div id="box_1">
+            <div id="status">
+                <h1>Player Status</h1>
+                <ul>
+                    <li>
+                        <label>
+                            conh:
+                            <p id="conhecimento" class="status_player">0</p>
+                        </label>
+                    </li>
+                    <li>
+                        <label>
+                            for:
+                            <p id="força" class="status_player">0</p>
+                        </label>
+                    </li>
+                    <li>
+                        <label>
+                            des:
+                            <p id="destresa" class="status_player">0</p>
+                        </label>
+                    </li>
+                    <li>
+                        <label>
+                            const:
+                            <p id="constitution" class="status_player">0</p>
+                        </label>
+                    </li>
+                    <li>
+                        <label>
+                            int:
+                            <p id="inteligencia" class="status_player">0</p>
+                        </label>
+                    </li>
+                    <li>
+                        <label>
+                            car:
+                            <p id="cárisma" class="status_player">0</p>
+                        </label>
+                    </li>
+                </ul>
+            </div>
+            <div id="text_lore">
+                <h1>Texto do Player</h1>
+                <ul>
+                    <p id="lore"></p>
+                </ul>
+            </div>
+        </div>
+        <label id="statusPlayer"></label>
+
+        <!-- scripts -->
+        <script type="text/javascript" src="javascript/profile.js"></script>
+    </body>
+</html>