back_end e front_end, registro, dados etc. '-'

back_end/main.go

@@ -39,6 +39,11 @@ func main() {
 		Addr: "127.0.0.1:6379",
 	})
 
+	e.Use(middleware.CORSWithConfig(middleware.CORSConfig{
+		AllowOrigins:     []string{"http://192.168.1.102"},
+		AllowCredentials: true,
+	}))
+
 	log.Println("Definindo configurações de Rate Limit")
 	rateLimiterStore := middleware.NewRateLimiterMemoryStoreWithConfig(
 		middleware.RateLimiterMemoryStoreConfig{
@@ -82,6 +87,7 @@ func main() {
 
 	e.GET("/", online)
 	e.GET("roll", roll_get)
+	e.POST("roll", roll)
 	e.GET("register", badreq)
 	e.POST("register", registrar)
 	e.POST("login", login, timeoutMiddleware, rateLimit)

back_end/rotas.go

@@ -5,10 +5,12 @@ import (
 	"fmt"
 	"io"
 	"log"
+	"math/rand"
 	"net/http"
 	"path/filepath"
 	"regexp"
 	"sort"
+	"strconv"
 	"strings"
 
 	"github.com/labstack/echo/v4"
@@ -32,7 +34,7 @@ func badreq(c echo.Context) error {
 func registrar(c echo.Context) error {
 	player := c.FormValue("player")
 	password := c.FormValue("password")
-	confpass := c.FormValue("confirmpassowrd")
+	confpass := c.FormValue("confirmpassword")
 	playerlore := c.FormValue("playerlore")
 
 	if !regexp.MustCompile(`^[a-zA-Z0-9_]+$`).MatchString(player) {
@@ -198,6 +200,56 @@ func login(c echo.Context) error {
 	})
 }
 
+func roll(c echo.Context) error {
+	userSession, err := ValidSession(c)
+	if err != nil {
+		return c.JSON(http.StatusUnauthorized, resp_json{
+			Status:  "Error",
+			Message: err.Error(),
+		})
+	}
+	roll, err := strconv.Atoi(c.FormValue("roll"))
+	if err != nil {
+		return c.JSON(http.StatusBadRequest, resp_json{
+			Status:  "Error",
+			Message: "algo deu errado ao rola seu dado, tente novamente",
+		})
+	}
+	var dado int
+	switch roll {
+	case 6:
+		dado = rand.Intn(roll) + 1
+	case 10:
+		dado = rand.Intn(roll) + 1
+	case 20:
+		dado = rand.Intn(roll) + 1
+	case 40:
+		dado = rand.Intn(roll) + 1
+	case 50:
+		dado = rand.Intn(roll) + 1
+	case 100:
+		dado = rand.Intn(roll) + 1
+	default:
+		return c.JSON(http.StatusBadRequest, resp_json{
+			Status:  "Error",
+			Message: "você so pode rodar dados de 6, 10, 20, 40, 50 ou 100",
+		})
+	}
+	var value string = fmt.Sprintf("%s rolou 1d%v e o resultado é %v", userSession["playerName"], roll, dado)
+
+	_, err = db.Exec("INSERT INTO roll_logs (id, log) VALUES (NULL, ?);", value)
+	if err != nil {
+		return c.JSON(http.StatusInternalServerError, resp_json{
+			Status:  "Error",
+			Message: "não foi possivel inserir o log do da rolagem no banco de dados",
+		})
+	}
+	return c.JSON(http.StatusOK, resp_json{
+		Status:  "Success",
+		Message: value,
+	})
+}
+
 func roll_get(c echo.Context) error {
 	row, err := db.Query("SELECT * FROM roll_logs ORDER BY id DESC LIMIT 5;")
 	if err != nil {

rpg/css/base.css

@@ -60,3 +60,7 @@ body {
 #loginBtn:hover {
     background-color: var(--lines);
 }
+
+a span {
+    overflow: hidden;
+}

rpg/css/style.css

@@ -1,21 +1,28 @@
+* {
+    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: 15%;
-        height: 30%;
+        height: auto;
+        max-height: 30dvh;
         border: solid 3px var(--backredcolor);
         border-radius: 100dvh;
         object-fit: cover;
     }
 
     ul {
-        padding: 0 0 0 1vw;
+        padding-left: 1vw;
-        width: 100%;
+        width: 80%;
 
         li {
             display: flex;
@@ -23,9 +30,10 @@
             padding: 1dvh;
             font-size: 1.5em;
             border-bottom: dotted 2px var(--lines);
+            flex-wrap: wrap;
 
             p {
-                margin: 0 0 0 1dvh;
+                margin-left: 1dvh;
             }
 
             a {
@@ -38,7 +46,6 @@
                 border-radius: 1dvh;
                 cursor: pointer;
                 transition: 0.3s;
-                overflow: hidden;
             }
 
             a:hover {
@@ -50,27 +57,34 @@
 
 #box_1 {
     display: flex;
+    flex-wrap: wrap;
     border-bottom: solid 0.5dvh var(--backredcolor);
 
     h1 {
+        min-height: 4dvh;
         width: 100%;
         background: var(--btncolor);
         font-family: "Share Tech Mono", monospace;
-        padding: 0 0 0 1dvh;
+        padding-left: 1dvh;
     }
 }
 
+#status,
+#dados,
+#inv,
+#powers {
+    min-height: 40dvh;
+    max-height: 40dvh;
+    overflow: hidden;
+    background-color: var(--subbgcolor);
+}
+
 #status {
     width: 25%;
-    min-height: 40dvh;
-    max-height: 40dvh;
     border-right: solid 1px var(--lines);
-    overflow: hidden;
-    background-color: var(--subbgcolor);
 
     ul {
-        padding: 3vw 0 3vw 0;
+        padding: 3vw 0;
-        max-height: 100%;
         display: flex;
         flex-wrap: wrap;
         align-items: center;
@@ -82,13 +96,13 @@
             border-radius: 1dvw;
 
             label {
-                padding: 0 0 0 1dvh;
+                padding-left: 1dvh;
                 display: flex;
                 align-items: center;
                 justify-content: center;
 
                 p {
-                    margin: 0 0.2dvh 0 0.2dvh;
+                    margin: 0 0.2dvh;
                 }
 
                 span {
@@ -121,17 +135,14 @@
 
 #dados {
     width: 30%;
-    min-height: 40dvh;
+    display: flex;
-    max-height: 40dvh;
+    flex-direction: column;
     border-right: solid 1px var(--lines);
-    overflow: hidden;
 
     #list {
         width: 100%;
-        height: 50%;
+        min-height: 20dvh;
-        overflow: hidden;
+        overflow-y: auto;
-        overflow-y: scroll;
-        background-color: var(--subbgcolor);
         display: flex;
         flex-wrap: wrap;
         align-items: center;
@@ -140,57 +151,55 @@
 
         li {
             transition: 0.3s;
-            border-radius: 1dvh;
+            border-radius: 1vh;
-            margin: 0 0 0 1dvh;
+            margin: 1vh;
             background: var(--btncolor);
             width: 45%;
             cursor: pointer;
 
             a {
-                padding: 1dvh;
+                padding: 1vh;
                 display: flex;
                 font-size: 1.5em;
                 align-items: center;
 
                 span {
-                    margin: 0 1dvw 0 0;
+                    margin-right: 1vw;
-                }
                 }
             }
 
-        li:hover {
+            &:hover {
                 background-color: var(--lines);
             }
         }
+    }
 
     #log {
-        width: 100%;
+        flex-grow: 1;
-        height: calc(40dvh - 12dvw);
+        overflow-y: auto;
-        overflow-y: scroll;
-
         li {
+            cursor: pointer;
             font-size: 1.5em;
-            padding: 0.5dvh 0 0.5dvh 2dvh;
+            padding: 0.5vh 2vh;
+
+            &:hover {
+                background-color: var(--lines);
+            }
         }
     }
 }
 
 #inv {
-    position: relative;
     width: 30%;
-    overflow: hidden;
+    position: relative;
-    min-height: 40dvh;
-    max-height: 40dvh;
     border-right: solid 1px var(--lines);
 
     ul {
-        overflow: hidden;
         overflow-y: scroll;
-        width: 100%;
-        max-height: 80%;
         display: flex;
         flex-wrap: wrap;
         justify-content: flex-start;
+        max-height: 80%;
 
         li {
             width: calc(100% / 4 - 2px);
@@ -202,7 +211,7 @@
             justify-content: center;
             position: relative;
             cursor: pointer;
-
+            cursor: pointer;
             a {
                 position: absolute;
                 right: 1dvh;
@@ -210,18 +219,22 @@
                 background-color: var(--backredcolor);
                 cursor: pointer;
                 transition: 0.3s;
+
                 span {
                     overflow: hidden;
                 }
             }
 
+            &:hover {
+                background-color: var(--subbgcolor);
+            }
+
             a:hover {
                 background-color: var(--backdarkredcolor);
             }
         }
-
         li:hover {
-            background-color: var(--subbgcolor);
+            background-color: var(--lines);
         }
     }
 
@@ -235,33 +248,26 @@
         bottom: 0;
         background-color: var(--subbgcolor);
 
-        select {
+        select,
+        input,
+        #btn {
             background-color: var(--btncolor);
             padding: 5px;
             border: none;
+            margin: 0 0.5dvh;
         }
 
         #btn {
             transition: 0.3s;
-            background-color: var(--btncolor);
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            margin: 0 1dvh 0 1dvh;
-            padding: 5px;
             border-radius: 1dvh;
-        }
 
-        #btn:hover {
+            &:hover {
                 background-color: var(--lines);
             }
+        }
 
         input {
-            margin: 0 0.5dvh 0 0.5dvh;
-            background-color: var(--lines);
             color: var(--fontcolor);
-            border: none;
-            padding: 5px;
         }
 
         input[type="number"] {
@@ -270,11 +276,11 @@
 
         label {
             display: flex;
-            justify-content: center;
             align-items: center;
 
             a {
                 border-radius: 1dvh 0 1dvh 0;
+
                 span {
                     overflow: hidden;
                     font-size: 1em;
@@ -285,20 +291,13 @@
 }
 
 #powers {
-    width: calc(100% - (30% + 25% + 30% - 3px));
+    width: calc(100% - (30% + 25% + 30%));
-    overflow: hidden;
-    min-height: 40dvh;
-    max-height: 40dvh;
-    background-color: var(--subbgcolor);
 
     ul {
-        overflow: hidden;
-        overflow-y: scroll;
-        width: 100%;
         height: 100%;
+        overflow-y: scroll;
 
         li {
-            width: 100%;
             padding: 1dvh;
             border-top: dotted 2px var(--lines);
             cursor: pointer;
@@ -307,22 +306,20 @@
             a {
                 font-size: 1.5em;
             }
-        }
 
-        li:hover {
+            &:hover {
                 background-color: var(--btncolor);
             }
         }
     }
+}
 
 #FloatInput {
     position: absolute;
     width: 10%;
-    display: flex;
+    z-index: 100;
-    z-index: 100px;
 
     input[type="text"] {
-        position: relative;
         width: 100%;
         border: solid 1px var(--backredcolor);
         border-radius: 10dvh;
@@ -333,20 +330,23 @@
     }
 }
 
+/* Responsividade */
 @media only screen and (max-width: 1080px) {
     #playerDATA {
-        height: 40dvh;
+        flex-direction: column;
+        align-items: center;
+        height: auto;
+
         #hero {
-            width: 40vh;
+            width: 40vw;
-            height: 25vh;
+            height: 40vw;
         }
 
-        ul {
+        ul li {
-            li {
             font-size: 1em;
         }
     }
-    }
+
     #box_1 {
         flex-direction: column;
         #dados,
@@ -354,21 +354,43 @@
         #inv,
         #powers {
             width: 100%;
-            min-height: 100dvw;
+            min-height: 43vh;
-            #list {
+            hgroup input[type="text"] {
-                height: 30dvh;
+                width: 20dvw;
+            }
+            hgroup input[type="number"] {
+                width: 8dvw;
+            }
+        }
+
+        #status li {
+            border-top-right-radius: 2dvh;
+            border-bottom-right-radius: 2dvh;
+            label {
+                a {
+                    display: flex;
+                    align-content: center;
+                    align-items: center;
                 }
             }
         }
 
-    #inv {
+        #dados #list {
-        ul {
+            height: 30dvh;
+        }
+    }
+
+    #inv ul {
         max-height: 43vh;
+
         li {
-                height: calc(100dvh / 6 - 2px);
+            min-width: calc(100% / 4);
-            }
+            max-width: calc(100% / 4);
+            min-height: calc(100% / 4);
+            mix-height: calc(100% / 4);
         }
     }
+
     #FloatInput {
         width: 30%;
         transform: translateY(50px) translateX(-50px);

rpg/index.html

@@ -7,6 +7,8 @@
         <link rel="stylesheet" href="css/base.css" />
         <link rel="stylesheet" href="css/style.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">
@@ -129,13 +131,7 @@
                         </a>
                     </li>
                 </ul>
-                <ul id="log">
+                <ul id="log"></ul>
-                    <li>
-                        <label
-                            >{user} rolou {dado} e o resultado é {valor}</label
-                        >
-                    </li>
-                </ul>
             </div>
             <div id="status">
                 <h1>Player Status</h1>
@@ -338,5 +334,6 @@
 
         <!-- scripts -->
         <script type="text/javascript" src="javascript/script.js"></script>
+        <script type="text/javascript" src="javascript/load_ficha.js"></script>
     </body>
 </html>

rpg/javascript/globais.js

@@ -0,0 +1,11 @@
+window.api = "http://192.168.1.102:8085/";
+
+window.msg = (status, msg) => {
+  tata.text(status, msg, {
+    position: "br",
+    duration: 3000,
+    progress: true,
+    closeBtn: true,
+    animate: "slide",
+  });
+};

rpg/javascript/load_ficha.js

@@ -0,0 +1,41 @@
+let update;
+function roll_load() {
+  $.ajax({
+    url: window.api + "roll",
+    type: "GET",
+    xhrFields: {
+      withCredentials: true,
+    },
+    success: function (resp) {
+      switch (update) {
+        case undefined:
+          resp.Logs.forEach(function (item) {
+            $("#log").append(`<li><label>${item.log}</label></li>`);
+            update = item.id;
+          });
+          break;
+        default:
+          resp.Logs.forEach(function (item) {
+            if (item.id > update) {
+              $("#log").append(`<li><label>${item.log}</label></li>`);
+              update = item.id;
+            }
+          });
+          break;
+      }
+      $("#log").scrollTop($("#log")[0].scrollHeight);
+    },
+    error: function (resp, status, jqXHR) {
+      /*msg(
+        resp.responseJSON?.Status || "Erro",
+        resp.responseJSON?.Message || "Algo deu errado.",
+      );*/
+    },
+  });
+}
+
+$(document).ready(function () {
+  setInterval(function () {
+    roll_load();
+  }, 1000);
+});

rpg/javascript/register.js

@@ -1,3 +1,18 @@
+function verifyInputs(player, passwd, confpasswd, lore) {
+  if (
+    player &&
+    !player.includes(" ") &&
+    passwd &&
+    !passwd.includes(" ") &&
+    confpasswd &&
+    !confpasswd.includes(" ") &&
+    lore
+  ) {
+    return true;
+  }
+  return false;
+}
+
 $("#imgClick").on("click", () => $("#inputImagem").click());
 
 $("#inputImagem").on("change", function () {
@@ -8,3 +23,60 @@ $("#inputImagem").on("change", function () {
     reader.readAsDataURL(file);
   }
 });
+
+$(document).ready(function () {
+  $("#loginBtn").on("click", function () {
+    const $btn = $(this);
+    $btn.prop("disabled", true).val("Criando conta...");
+
+    const fileInput = $("#inputImagem")[0];
+    const file = fileInput.files[0];
+
+    const player = $("#loginInput[name='player']").val();
+    const password = $("#loginInput[name='password']").val();
+    const confPassword = $("#loginInput[name='confirmpassword']").val();
+    const lore = $("#playerlore[name='playerlore']").val();
+
+    if (!file) {
+      msg("Error", "Você é obrigado a colocar uma imagem.");
+      return finalizarErro($btn, "Registrar");
+    }
+
+    if (!verifyInputs(player, password, confPassword, lore)) {
+      msg("Error", "Por favor, preencha todos os dados corretamente.");
+      return finalizarErro($btn, "Registrar");
+    }
+
+    const form = new FormData();
+    form.append("PlayerImage", fileInput.files[0]);
+    form.append("player", player);
+    form.append("password", password);
+    form.append("confirmpassword", confPassword);
+    form.append("playerlore", lore);
+    console.log(form);
+    $.ajax({
+      url: window.api + "register",
+      type: "POST",
+      data: form,
+      contentType: false,
+      processData: false,
+      xhrFields: { withCredentials: true },
+      success: function (resp) {
+        msg(resp.Status, resp.Message);
+        $btn.val("Concluído");
+        window.location.href = "index.html";
+      },
+      error: function (resp) {
+        msg(
+          resp.responseJSON?.Status || "Erro",
+          resp.responseJSON?.Message || "Algo deu errado.",
+        );
+        finalizarErro($btn, "Registrar");
+      },
+    });
+  });
+
+  function finalizarErro($btn, texto = "Registrar") {
+    $btn.prop("disabled", false).val(texto);
+  }
+});

rpg/javascript/script.js

@@ -11,18 +11,20 @@ function editInput(name, x, y) {
   `;
   $inp = $(input).appendTo("body").focus();
 
-  $inp.on("keypress keydown", function (e) {
+  $inp.on("keydown", function (e) {
     if (e.which === 13) {
       switch ($(this).find("input").val().length > 0) {
         case true:
           console.log($(this).find("input").val());
-          // aqui vai enviar a request, não esqueça zk
+          alert($(this).find("input").val());
           break;
         case false:
           $(this).remove();
           break;
       }
     }
+  });
+  $inp.on("keypress keydown", function (e) {
     switch (e.key) {
       case "Delete":
         $(this).remove();
@@ -46,6 +48,6 @@ $(document).ready(function () {
     let nameclass =
       reqbtn.length > 1
         ? editInput(reqbtn[1], cordX, cordY)
-        : console.error("erro,coloque uma seunda cleass");
+        : msg("Error", "erro, ainda não foi definido a classe desse botão");
   });
 });

rpg/login.html

@@ -7,6 +7,8 @@
         <link rel="stylesheet" href="css/base.css" />
         <link rel="stylesheet" href="css/login.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="login_form">

rpg/registro.html

@@ -7,6 +7,8 @@
         <link rel="stylesheet" href="css/base.css" />
         <link rel="stylesheet" href="css/register.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="register_form">
@@ -33,7 +35,7 @@
                 <li>
                     <input
                         type="password"
-                        name="passowrd"
+                        name="password"
                         placeholder="senha"
                         id="loginInput"
                     />
@@ -41,13 +43,14 @@
                 <li>
                     <input
                         type="password"
-                        name="confirmpassowrd"
+                        name="confirmpassword"
                         placeholder="confirme senha"
                         id="loginInput"
                     />
                 </li>
                 <li>
                     <textarea
+                        id="playerlore"
                         name="playerlore"
                         placeholder="escreva a historia do seu personagem"
                     ></textarea>