back_end e front_end, motoes de editar, tela de login e os caralho a4 '-'

back_end/func_db.go

@@ -30,15 +30,32 @@ func sessionCookie(id int, player string) (*http.Cookie, error) {
 	}
 
 	cookie := &http.Cookie{
-		Name:     cookieName,
+		Name:  cookieName,
-		Value:    sessionID,
+		Value: sessionID,
-		Path:     "/*",
+		Path:  "/",
-		HttpOnly: true,
+		//HttpOnly: true,
-		Expires:  time.Now().Add(24 * time.Hour),
+		//Secure:   true,
+		//SameSite: http.SameSiteNoneMode,
+		Expires: time.Now().Add(24 * time.Hour),
 	}
 	return cookie, nil
 }
 
+func delCookie(c echo.Context, sessionID string) error {
+	cookie := &http.Cookie{
+		Name:   cookieName,
+		Value:  "",
+		Path:   "/",
+		MaxAge: -1,
+	}
+	err := redisCL.Del(ctx, sessionID).Err()
+	if err != nil {
+		log.Println(sessionID + "não era um cookie valido")
+	}
+	c.SetCookie(cookie)
+	return nil
+}
+
 func verifyTabeles(tbex []string, tb string) bool {
 	for _, a := range tbex {
 		if tb == a {
@@ -112,6 +129,7 @@ func ValidSession(c echo.Context) (map[string]string, error) {
 	sessionID := cookie.Value
 	dataSession, err := redisCL.HGetAll(ctx, sessionID).Result()
 	if err != nil {
+		delCookie(c, sessionID)
 		return nil, fmt.Errorf("sessão invalida ou expirada.")
 	}
 

back_end/globais.go

@@ -41,7 +41,7 @@ var (
 	redisCL    *redis.Client
 	ctx        = context.Background()
 	table_list = map[string]string{
-		"players":   "CREATE TABLE players (`id` INT NOT NULL AUTO_INCREMENT,`foto` MEDIUMTEXT NOT NULL,`player` VARCHAR(15) NOT NULL,`password` TEXT NOT NULL,`nome` VARCHAR(30) NOT NULL, `conhecimento` INT NOT NULL DEFAULT '0',`level` INT NOT NULL DEFAULT '0',`idade` INT NOT NULL DEFAULT '18',`altura` FLOAT NOT NULL DEFAULT '1.40',`vida` INT NOT NULL DEFAULT '10',`vida_maxima` INT NOT NULL DEFAULT '10',`destresa` INT NOT NULL DEFAULT '0',`inteligencia` INT NOT NULL DEFAULT '0',`força` INT NOT NULL DEFAULT '0',`constituição` INT NOT NULL DEFAULT '0',`cárisma` INT NOT NULL DEFAULT '0',`inventario` INT NOT NULL DEFAULT '10',`descrição` TEXT NOT NULL,PRIMARY KEY (`id`)) ENGINE = InnoDB;",
+		"players":   "CREATE TABLE players (`id` INT NOT NULL AUTO_INCREMENT,`foto` LONGTEXT NOT NULL,`player` VARCHAR(15) NOT NULL,`password` TEXT NOT NULL,`nome` VARCHAR(30) NOT NULL, `conhecimento` INT NOT NULL DEFAULT '0',`level` INT NOT NULL DEFAULT '0',`idade` INT NOT NULL DEFAULT '18',`altura` FLOAT NOT NULL DEFAULT '1.40',`vida` INT NOT NULL DEFAULT '10',`vida_maxima` INT NOT NULL DEFAULT '10',`destresa` INT NOT NULL DEFAULT '0',`inteligencia` INT NOT NULL DEFAULT '0',`força` INT NOT NULL DEFAULT '0',`constituição` INT NOT NULL DEFAULT '0',`cárisma` INT NOT NULL DEFAULT '0',`inventario` INT NOT NULL DEFAULT '10',`descrição` TEXT NOT NULL,PRIMARY KEY (`id`)) ENGINE = InnoDB;",
 		"roll_logs": "CREATE TABLE roll_logs (`id` INT NOT NULL AUTO_INCREMENT , `log` TEXT NOT NULL , PRIMARY KEY (`id`)) ENGINE = InnoDB;",
 	}
 	formatFILES = map[string]bool{
@@ -50,5 +50,5 @@ var (
 		".jpeg": true,
 		".gif":  true,
 	}
-	cookieName string = "PlayerSession"
+	cookieName string = "playerSession"
 )

back_end/main.go

@@ -84,7 +84,7 @@ func main() {
 	log.Println("concluido, back_end rodando")
 
 	/* rotas */
-
+	e.GET("logout", logout)
 	e.GET("/", online)
 	e.GET("roll", roll_get)
 	e.POST("roll", roll)
@@ -93,6 +93,8 @@ func main() {
 	e.POST("login", login, timeoutMiddleware, rateLimit)
 	e.GET("login", badreq)
 	e.GET("player", player_data)
+	e.POST("player/update", player_updateInputs)
+	e.PATCH("player/:atb/:updown", player_update)
 
 	/* log */
 	e.Logger.Fatal(e.Start(fmt.Sprintf(":%s", load_data["port"])))

back_end/rotas.go

@@ -17,6 +17,25 @@ import (
 	"golang.org/x/crypto/bcrypt"
 )
 
+func logout(c echo.Context) error {
+	_, err := ValidSession(c)
+	if err != nil {
+		return c.JSON(http.StatusUnauthorized, resp_json{
+			Status:  "Error",
+			Message: "para fazer logout você deve estar logado seu cabaço",
+		})
+	}
+	cookie, _ := c.Cookie(cookieName)
+
+	sessionID := cookie.Value
+	delCookie(c, sessionID)
+
+	return c.JSON(http.StatusOK, resp_json{
+		Status:  "Success",
+		Message: "Você fez foi deslogado.",
+	})
+}
+
 func online(c echo.Context) error {
 	return c.JSON(http.StatusOK, resp_json{
 		Status:  "Success",
@@ -91,10 +110,10 @@ func registrar(c echo.Context) error {
 		})
 	}
 	defer openfile.Close()
-	if ImageFile.Size > 3*1024*1024 {
+	if ImageFile.Size > 25*1024*1024 {
 		return c.JSON(http.StatusBadRequest, resp_json{
 			Status:  "Error",
-			Message: "Sua imagem deve ter no maximo 3MB",
+			Message: "Sua imagem deve ter no maximo 25MB",
 		})
 	}
 
@@ -157,7 +176,7 @@ func registrar(c echo.Context) error {
 			Message: "sua conta foi criada com sucesso",
 		})
 	}
-
+	log.Println(err)
 	return c.JSON(http.StatusInternalServerError, resp_json{
 		Status:  "Error",
 		Message: "Erro ao criar sua conta, tente novamente",
@@ -327,3 +346,136 @@ func player_data(c echo.Context) error {
 	})
 
 }
+
+func player_update(c echo.Context) error {
+	userSession, err := ValidSession(c)
+	if err != nil {
+		return c.JSON(http.StatusUnauthorized, resp_json{
+			Status:  "Error",
+			Message: err.Error(),
+		})
+	}
+	updown := c.Param("updown")
+	atb := c.Param("atb")
+	var sinal string
+
+	switch updown {
+	case "up":
+		sinal = "+"
+	case "down":
+		sinal = "-"
+	default:
+		return c.JSON(http.StatusBadRequest, resp_json{
+			Status:  "Error",
+			Message: "você passou um parametro invalido em updown, use up ou down.",
+		})
+	}
+
+	var updateList = map[string]string{
+		"vida":         fmt.Sprintf("UPDATE players SET vida = vida %s 1 WHERE id=?;", sinal),
+		"level":        fmt.Sprintf("UPDATE players SET level = level %s 1 WHERE id=?;", sinal),
+		"idade":        fmt.Sprintf("UPDATE players SET idade = idade %s 1 WHERE id=?;", sinal),
+		"conhecimento": fmt.Sprintf("UPDATE players SET conhecimento = conhecimento %s 1 WHERE id=?;", sinal),
+		"força":        fmt.Sprintf("UPDATE players SET força = força %s 1 WHERE id=?;", sinal),
+		"destresa":     fmt.Sprintf("UPDATE players SET destresa = destresa %s 1 WHERE id=?;", sinal),
+		"constituição": fmt.Sprintf("UPDATE players SET constituição = constituição %s 1 WHERE id=?;", sinal),
+		"inteligencia": fmt.Sprintf("UPDATE players SET inteligencia = inteligencia %s 1 WHERE id=?;", sinal),
+		"cárisma":      fmt.Sprintf("UPDATE players SET cárisma = cárisma %s 1 WHERE id=?;", sinal),
+	}
+
+	query, ok := updateList[atb]
+	if !ok {
+		return c.JSON(http.StatusBadRequest, resp_json{
+			Status:  "Error",
+			Message: "você passou um parametro invalido, tente novamente com um parametro correto",
+		})
+	}
+	_, err = db.Exec(query, userSession["user_id"])
+	if err != nil {
+		return c.JSON(http.StatusInternalServerError, resp_json{
+			Status:  "Error",
+			Message: "algo deu errado a atualizar sua ficha",
+		})
+	}
+
+	return c.JSON(http.StatusOK, resp_json{
+		Status:  "Success",
+		Message: sinal + "1 em " + atb,
+	})
+}
+
+func player_updateInputs(c echo.Context) error {
+	userSession, err := ValidSession(c)
+	if err != nil {
+		return c.JSON(http.StatusUnauthorized, resp_json{
+			Status:  "Error",
+			Message: err.Error(),
+		})
+	}
+
+	var lista []string
+
+	vida := c.FormValue("vida")
+	nome := c.FormValue("nome")
+	altura := c.FormValue("altura")
+	inv := c.FormValue("inventario")
+
+	if vida != "" {
+		_, err = db.Exec("UPDATE players SET vida=?, vida_maxima=? WHERE id=?;", vida, vida, userSession["user_id"])
+		if err != nil {
+			log.Println(err)
+			return c.JSON(http.StatusInternalServerError, resp_json{
+				Status:  "Error",
+				Message: "algo deu errado ao alterar sua vida.",
+			})
+		}
+		lista = append(lista, "vida")
+	}
+
+	if nome != "" {
+		_, err = db.Exec("UPDATE players SET nome=? WHERE id=?;", nome, userSession["user_id"])
+		if err != nil {
+			log.Println(err)
+			return c.JSON(http.StatusInternalServerError, resp_json{
+				Status:  "Error",
+				Message: "algo deu errado ao alterar seu nome.",
+			})
+		}
+		lista = append(lista, "nome")
+	}
+
+	if altura != "" {
+		_, err = db.Exec("UPDATE players SET altura=? WHERE id=?;", altura, userSession["user_id"])
+		if err != nil {
+			log.Println(err)
+			return c.JSON(http.StatusInternalServerError, resp_json{
+				Status:  "Error",
+				Message: "algo deu errado ao alterar sua altura.",
+			})
+		}
+		lista = append(lista, "altura")
+	}
+
+	if inv != "" {
+		_, err = db.Exec("UPDATE players SET inventario=? WHERE id=?;", inv, userSession["user_id"])
+		if err != nil {
+			log.Println(err)
+			return c.JSON(http.StatusInternalServerError, resp_json{
+				Status:  "Error",
+				Message: "algo deu errado ao alterar o tamanho do seu inventario.",
+			})
+		}
+		lista = append(lista, "inventario")
+	}
+
+	if len(lista) <= 0 {
+		return c.JSON(http.StatusUnauthorized, resp_json{
+			Status:  "Error",
+			Message: "você é obrigado a alguma informação seu cabaço.",
+		})
+	}
+	return c.JSON(http.StatusOK, resp_json{
+		Status:  "Success",
+		Message: fmt.Sprintf("você mudou as seguintes informaçôes: %s", lista),
+	})
+}

rpg/css/style.css

@@ -12,9 +12,8 @@
     gap: 1vw;
 
     #hero {
-        width: 15%;
+        width: 25dvh;
-        height: auto;
+        height: 25dvh;
-        max-height: 30dvh;
         border: solid 3px var(--backredcolor);
         border-radius: 100dvh;
         object-fit: cover;
@@ -96,6 +95,12 @@
             border-radius: 1dvw;
 
             label {
+                a {
+                    display: flex;
+                    align-content: center;
+                    align-items: center;
+                }
+
                 padding-left: 1dvh;
                 display: flex;
                 align-items: center;
@@ -177,6 +182,7 @@
     #log {
         flex-grow: 1;
         overflow-y: auto;
+
         li {
             cursor: pointer;
             font-size: 1.5em;
@@ -212,6 +218,7 @@
             position: relative;
             cursor: pointer;
             cursor: pointer;
+
             a {
                 position: absolute;
                 right: 1dvh;
@@ -233,6 +240,7 @@
                 background-color: var(--backdarkredcolor);
             }
         }
+
         li:hover {
             background-color: var(--lines);
         }
@@ -330,6 +338,42 @@
     }
 }
 
+#box_2 {
+    h1 {
+        min-height: 4dvh;
+        width: 100%;
+        background: var(--btncolor);
+        font-family: "Share Tech Mono", monospace;
+        display: flex;
+        padding: 0 0 0 1vw;
+        align-items: center;
+    }
+    #text_lore {
+        ul {
+            position: relative;
+            #btn {
+                position: absolute;
+                top: 1dvh;
+                right: 1dvh;
+                width: 4dvh;
+                height: 4dvh;
+                background-color: var(--btncolor);
+                border-radius: 100vh;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                cursor: pointer;
+            }
+            p {
+                font-family: arial;
+                font-size: 1.5em;
+                padding: 1vw;
+                white-space: pre-wrap;
+            }
+        }
+    }
+}
+
 /* Responsividade */
 @media only screen and (max-width: 1080px) {
     #playerDATA {
@@ -338,8 +382,8 @@
         height: auto;
 
         #hero {
-            width: 40vw;
+            width: 40dvw;
-            height: 40vw;
+            height: 40dvw;
         }
 
         ul li {
@@ -349,15 +393,18 @@
 
     #box_1 {
         flex-direction: column;
+
         #dados,
         #status,
         #inv,
         #powers {
             width: 100%;
             min-height: 43vh;
+
             hgroup input[type="text"] {
                 width: 20dvw;
             }
+
             hgroup input[type="number"] {
                 width: 8dvw;
             }
@@ -366,13 +413,6 @@
         #status li {
             border-top-right-radius: 2dvh;
             border-bottom-right-radius: 2dvh;
-            label {
-                a {
-                    display: flex;
-                    align-content: center;
-                    align-items: center;
-                }
-            }
         }
 
         #dados #list {

rpg/index.html

@@ -16,39 +16,54 @@
             <ul>
                 <li>
                     <label>vida:</label>
-                    <p>0/0</p>
+                    <p id="vdp">0/0</p>
-                    <a id="btn">
+                    <a id="btn" class="updown" data-atb="vida" data-updown="up">
                         <span class="material-symbols-outlined">
                             arrow_upward
                         </span>
                     </a>
-                    <a id="btn">
+                    <a
+                        id="btn"
+                        class="updown"
+                        data-atb="vida"
+                        data-updown="down"
+                    >
                         <span class="material-symbols-outlined">
                             arrow_downward
                         </span>
                     </a>
-                    <a id="btn" class="editbtn player_life">
+                    <a id="btn" class="editbtn vida">
                         <span class="material-symbols-outlined"> edit </span>
                         edit
                     </a>
                 </li>
                 <li>
                     <label>nome:</label>
-                    <p>you user name</p>
+                    <p id="nmp">you user name</p>
-                    <a id="btn" class="editbtn player_name">
+                    <a id="btn" class="editbtn nome">
                         <span class="material-symbols-outlined"> edit </span>
                         edit
                     </a>
                 </li>
                 <li>
                     <label>level:</label>
-                    <p>0</p>
+                    <p id="lvp">0</p>
-                    <a id="btn">
+                    <a
+                        id="btn"
+                        class="updown"
+                        data-atb="level"
+                        data-updown="up"
+                    >
                         <span class="material-symbols-outlined">
                             arrow_upward
                         </span>
                     </a>
-                    <a id="btn">
+                    <a
+                        id="btn"
+                        class="updown"
+                        data-atb="level"
+                        data-updown="down"
+                    >
                         <span class="material-symbols-outlined">
                             arrow_downward
                         </span>
@@ -56,13 +71,23 @@
                 </li>
                 <li>
                     <label>idade:</label>
-                    <p>0</p>
+                    <p id="idp">0</p>
-                    <a id="btn">
+                    <a
+                        id="btn"
+                        class="updown"
+                        data-atb="idade"
+                        data-updown="up"
+                    >
                         <span class="material-symbols-outlined">
                             arrow_upward
                         </span>
                     </a>
-                    <a id="btn">
+                    <a
+                        id="btn"
+                        class="updown"
+                        data-atb="idade"
+                        data-updown="down"
+                    >
                         <span class="material-symbols-outlined">
                             arrow_downward
                         </span>
@@ -70,8 +95,8 @@
                 </li>
                 <li>
                     <label>altura:</label>
-                    <p>0,0</p>
+                    <p id="alp">0,0</p>
-                    <a id="btn" class="editbtn">
+                    <a id="btn" class="editbtn altura">
                         <span class="material-symbols-outlined"> edit </span>
                         edit
                     </a>
@@ -82,7 +107,7 @@
             <div id="dados">
                 <h1>Dados</h1>
                 <ul id="list">
-                    <li>
+                    <li onclick="roll(6)">
                         <a>
                             <span class="material-symbols-outlined">
                                 casino
@@ -90,7 +115,7 @@
                             1d6
                         </a>
                     </li>
-                    <li>
+                    <li onclick="roll(10)">
                         <a>
                             <span class="material-symbols-outlined">
                                 casino
@@ -98,7 +123,7 @@
                             1d10
                         </a>
                     </li>
-                    <li>
+                    <li onclick="roll(20)">
                         <a>
                             <span class="material-symbols-outlined">
                                 casino
@@ -106,7 +131,7 @@
                             1d20
                         </a>
                     </li>
-                    <li>
+                    <li onclick="roll(40)">
                         <a>
                             <span class="material-symbols-outlined">
                                 casino
@@ -114,7 +139,7 @@
                             1d40
                         </a>
                     </li>
-                    <li>
+                    <li onclick="roll(50)">
                         <a>
                             <span class="material-symbols-outlined">
                                 casino
@@ -122,7 +147,7 @@
                             1d50
                         </a>
                     </li>
-                    <li>
+                    <li onclick="roll(100)">
                         <a>
                             <span class="material-symbols-outlined">
                                 casino
@@ -139,151 +164,169 @@
                     <li>
                         <label>
                             conh:
-                            <p id="life" class="status_player">0</p>
+                            <p id="conhecimento" class="status_player">0</p>
-                            <a id="btn">
+                            <a
+                                id="btn"
+                                class="updown"
+                                data-atb="conhecimento"
+                                data-updown="up"
+                            >
                                 <span
                                     class="material-symbols-outlined btn-left"
                                 >
                                     arrow_upward
                                 </span>
                             </a>
-                            <a id="btn">
+                            <a
+                                id="btn"
+                                class="updown"
+                                data-atb="conhecimento"
+                                data-updown="down"
+                            >
                                 <span class="material-symbols-outlined">
                                     arrow_downward
                                 </span>
                             </a>
-                            <a id="btn" class="editbtn">
-                                <span
-                                    class="material-symbols-outlined btn-right"
-                                >
-                                    edit
-                                </span>
-                            </a>
                         </label>
                     </li>
                     <li>
                         <label>
                             for:
-                            <p id="power" class="status_player">0</p>
+                            <p id="força" class="status_player">0</p>
-                            <a id="btn">
+                            <a
+                                id="btn"
+                                class="updown"
+                                data-atb="força"
+                                data-updown="up"
+                            >
                                 <span
                                     class="material-symbols-outlined btn-left"
                                 >
                                     arrow_upward
                                 </span>
                             </a>
-                            <a id="btn">
+                            <a
+                                id="btn"
+                                class="updown"
+                                data-atb="força"
+                                data-updown="down"
+                            >
                                 <span class="material-symbols-outlined">
                                     arrow_downward
                                 </span>
                             </a>
-                            <a id="btn" class="editbtn">
-                                <span
-                                    class="material-symbols-outlined btn-right"
-                                >
-                                    edit
-                                </span>
-                            </a>
                         </label>
                     </li>
                     <li>
                         <label>
                             des:
-                            <p id="dexterity" class="status_player">0</p>
+                            <p id="destresa" class="status_player">0</p>
-                            <a id="btn">
+                            <a
+                                id="btn"
+                                class="updown"
+                                data-atb="destresa"
+                                data-updown="up"
+                            >
                                 <span
                                     class="material-symbols-outlined btn-left"
                                 >
                                     arrow_upward
                                 </span>
                             </a>
-                            <a id="btn">
+                            <a
+                                id="btn"
+                                class="updown"
+                                data-atb="destresa"
+                                data-updown="down"
+                            >
                                 <span class="material-symbols-outlined">
                                     arrow_downward
                                 </span>
                             </a>
-                            <a id="btn" class="editbtn">
-                                <span
-                                    class="material-symbols-outlined btn-right"
-                                >
-                                    edit
-                                </span>
-                            </a>
                         </label>
                     </li>
                     <li>
                         <label>
                             const:
                             <p id="constitution" class="status_player">0</p>
-                            <a id="btn">
+                            <a
+                                id="btn"
+                                class="updown"
+                                data-atb="constituição"
+                                data-updown="up"
+                            >
                                 <span
                                     class="material-symbols-outlined btn-left"
                                 >
                                     arrow_upward
                                 </span>
                             </a>
-                            <a id="btn">
+                            <a
+                                id="btn"
+                                class="updown"
+                                data-atb="constituição"
+                                data-updown="down"
+                            >
                                 <span class="material-symbols-outlined">
                                     arrow_downward
                                 </span>
                             </a>
-                            <a id="btn" class="editbtn">
-                                <span
-                                    class="material-symbols-outlined btn-right"
-                                >
-                                    edit
-                                </span>
-                            </a>
                         </label>
                     </li>
                     <li>
                         <label>
                             int:
-                            <p id="intellect" class="status_player">0</p>
+                            <p id="inteligencia" class="status_player">0</p>
-                            <a id="btn">
+                            <a
+                                id="btn"
+                                class="updown"
+                                data-atb="inteligencia"
+                                data-updown="up"
+                            >
                                 <span
                                     class="material-symbols-outlined btn-left"
                                 >
                                     arrow_upward
                                 </span>
                             </a>
-                            <a id="btn">
+                            <a
+                                id="btn"
+                                class="updown"
+                                data-atb="inteligencia"
+                                data-updown="down"
+                            >
                                 <span class="material-symbols-outlined">
                                     arrow_downward
                                 </span>
                             </a>
-                            <a id="btn" class="editbtn">
-                                <span
-                                    class="material-symbols-outlined btn-right"
-                                >
-                                    edit
-                                </span>
-                            </a>
                         </label>
                     </li>
                     <li>
                         <label>
                             car:
-                            <p id="charisma" class="status_player">0</p>
+                            <p id="cárisma" class="status_player">0</p>
-                            <a id="btn">
+                            <a
+                                id="btn"
+                                class="updown"
+                                data-atb="cárisma"
+                                data-updown="up"
+                            >
                                 <span
                                     class="material-symbols-outlined btn-left"
                                 >
                                     arrow_upward
                                 </span>
                             </a>
-                            <a id="btn">
+                            <a
+                                id="btn"
+                                class="updown"
+                                data-atb="cárisma"
+                                data-updown="down"
+                            >
                                 <span class="material-symbols-outlined">
                                     arrow_downward
                                 </span>
                             </a>
-                            <a id="btn" class="editbtn">
-                                <span
-                                    class="material-symbols-outlined btn-right"
-                                >
-                                    edit
-                                </span>
-                            </a>
                         </label>
                     </li>
                 </ul>
@@ -314,8 +357,8 @@
                     <label>
                         <p>0</p>
                         /
-                        <p>0</p>
+                        <p id="mip">0</p>
-                        <a id="btn">
+                        <a id="btn" class="editbtn inventario">
                             <span class="material-symbols-outlined btn-right">
                                 edit
                             </span>
@@ -330,7 +373,19 @@
                 </ul>
             </div>
         </div>
-        <div id="box_2"></div>
+        <div id="box_2">
+            <h1>Texto do Player</h1>
+            <div id="text_lore">
+                <ul>
+                    <a id="btn">
+                        <span class="material-symbols-outlined btn-right">
+                            edit
+                        </span>
+                    </a>
+                    <p id="lore"></p>
+                </ul>
+            </div>
+        </div>
 
         <!-- scripts -->
         <script type="text/javascript" src="javascript/script.js"></script>

rpg/javascript/load_ficha.js

@@ -1,4 +1,38 @@
+let img;
 let update;
+
+function load_ficha() {
+  $.ajax({
+    url: window.api + "player",
+    type: "GET",
+    xhrFields: {
+      withCredentials: true,
+    },
+    success: function (resp) {
+      if (img === undefined) {
+        img = resp.Foto;
+        $("#hero").attr("src", `data:image/*;base64,${resp.Foto}`);
+      }
+      $("#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);
+    },
+    error: function (resp, status, jqXHR) {
+      window.location.href = "login.html";
+    },
+  });
+}
+
 function roll_load() {
   $.ajax({
     url: window.api + "roll",
@@ -10,14 +44,14 @@ function roll_load() {
       switch (update) {
         case undefined:
           resp.Logs.forEach(function (item) {
-            $("#log").append(`<li><label>${item.log}</label></li>`);
+            $("#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>`);
+              $("#log").append(`<li> <label>${item.log}</label></li>`);
               update = item.id;
             }
           });
@@ -34,8 +68,42 @@ function roll_load() {
   });
 }
 
+function roll(d) {
+  $.ajax({
+    url: window.api + "roll",
+    type: "POST",
+    data: { roll: d },
+
+    xhrFields: { withCredentials: true },
+    success: function (resp) {
+      msg(resp.Status, resp.Message);
+    },
+  });
+}
+
+load_ficha();
 $(document).ready(function () {
+  $(".updown").click(function () {
+    const atb = $(this).data("atb");
+    const updown = $(this).data("updown");
+
+    $.ajax({
+      url: `${window.api}player/${atb}/${updown}`,
+      type: "PATCH",
+      xhrFields: {
+        withCredentials: true,
+      },
+      error: function (resp, status, jqXHR) {
+        msg(
+          resp.responseJSON?.Status || "Erro",
+          resp.responseJSON?.Message || "Algo deu errado.",
+        );
+      },
+    });
+  });
+
   setInterval(function () {
+    load_ficha();
     roll_load();
-  }, 1000);
+  }, 500);
 });

rpg/javascript/login.js

@@ -0,0 +1,64 @@
+function load_ficha() {
+  $.ajax({
+    url: window.api + "player",
+    type: "GET",
+    xhrFields: {
+      withCredentials: true,
+    },
+    success: function (resp) {
+      window.location.href = "index.html";
+    },
+  });
+}
+
+function verifyInputs(player, passwd) {
+  if (player && !player.includes(" ") && passwd && !passwd.includes(" ")) {
+    return true;
+  }
+  return false;
+}
+
+$(document).ready(function () {
+  load_ficha();
+  $("#loginBtn").on("click", function () {
+    const $btn = $(this);
+    $btn.prop("disabled", true).val("Logando ...");
+
+    const player = $("#loginInput[name='player']").val();
+    const password = $("#loginInput[name='password']").val();
+
+    if (!verifyInputs(player, password)) {
+      msg("Error", "Por favor, preencha todos os dados corretamente.");
+      return finalizarErro($btn, "Login");
+    }
+
+    const form = new FormData();
+    form.append("player", player);
+    form.append("password", password);
+
+    $.ajax({
+      url: window.api + "login",
+      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, "Login");
+      },
+    });
+  });
+
+  function finalizarErro($btn, texto = "Login") {
+    $btn.prop("disabled", false).val(texto);
+  }
+});

rpg/javascript/register.js

@@ -1,3 +1,16 @@
+function load_ficha() {
+  $.ajax({
+    url: window.api + "player",
+    type: "GET",
+    xhrFields: {
+      withCredentials: true,
+    },
+    success: function (resp) {
+      window.location.href = "index.html";
+    },
+  });
+}
+
 function verifyInputs(player, passwd, confpasswd, lore) {
   if (
     player &&
@@ -25,6 +38,7 @@ $("#inputImagem").on("change", function () {
 });
 
 $(document).ready(function () {
+  load_ficha();
   $("#loginBtn").on("click", function () {
     const $btn = $(this);
     $btn.prop("disabled", true).val("Criando conta...");

rpg/javascript/script.js

@@ -3,6 +3,29 @@ var $inp;
 let cordX = 0;
 let cordY = 0;
 
+function data_update(name, value) {
+  return new Promise((resulve, reject) => {
+    $.ajax({
+      url: window.api + "player/update",
+      type: "POST",
+      data: { [name]: value },
+
+      xhrFields: { withCredentials: true },
+      success: function (resp) {
+        msg(resp.Status, resp.Message);
+        resulve(true);
+      },
+      error: function (resp, status, jqXHR) {
+        msg(
+          resp.responseJSON?.Status || "Erro",
+          resp.responseJSON?.Message || "Algo deu errado.",
+        );
+        resulve(false);
+      },
+    });
+  });
+}
+
 function editInput(name, x, y) {
   var input = `
     <nav id="FloatInput" style="top: ${y - 50}px; left: ${x - 100}px">
@@ -15,8 +38,13 @@ function editInput(name, x, y) {
     if (e.which === 13) {
       switch ($(this).find("input").val().length > 0) {
         case true:
-          console.log($(this).find("input").val());
+          let name = $(this).find("input").attr("name");
-          alert($(this).find("input").val());
+          let value = $(this).find("input").val();
+          data_update(name, value).then((result) => {
+            if (result) {
+              $(this).remove();
+            }
+          });
           break;
         case false:
           $(this).remove();

rpg/login.html

@@ -25,7 +25,7 @@
                 <li>
                     <input
                         type="password"
-                        name="passowrd"
+                        name="password"
                         placeholder="senha"
                         id="loginInput"
                     />
@@ -34,5 +34,6 @@
                 <li><a href="registro.html">Criar conta</a></li>
             </ul>
         </div>
+        <script type="text/javascript" src="javascript/login.js"></script>
     </body>
 </html>