zk_exe/rpgzrox
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
zk_exe
2025-06-18 00:25:32 -03:00
parent fc2c573111
commit 9a818eee5f
13 changed files with 315 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
back_end/Helena_de_troia
View File

Binary file not shown.

6
back_end/main.go
View File

@@ -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)

54
back_end/rotas.go
View File

@@ -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 {

4
rpg/css/base.css
View File

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

200
rpg/css/style.css
View File

@@ -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;
width: 100%;
padding-left: 1vw;
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;
max-height: 100%;
padding: 3vw 0;
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;
max-height: 40dvh;
display: flex;
flex-direction: column;
border-right: solid 1px var(--lines);
overflow: hidden;
#list {
width: 100%;
height: 50%;
overflow: hidden;
overflow-y: scroll;
background-color: var(--subbgcolor);
min-height: 20dvh;
overflow-y: auto;
display: flex;
flex-wrap: wrap;
align-items: center;
@@ -140,57 +151,55 @@
li {
transition: 0.3s;
border-radius: 1dvh;
margin: 0 0 0 1dvh;
border-radius: 1vh;
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 {
background-color: var(--lines);
&:hover {
background-color: var(--lines);
}
}
}
#log {
width: 100%;
height: calc(40dvh - 12dvw);
overflow-y: scroll;
flex-grow: 1;
overflow-y: auto;
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;
min-height: 40dvh;
max-height: 40dvh;
position: relative;
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 {
background-color: var(--lines);
&: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));
overflow: hidden;
min-height: 40dvh;
max-height: 40dvh;
background-color: var(--subbgcolor);
width: calc(100% - (30% + 25% + 30%));
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,10 +306,10 @@
a {
font-size: 1.5em;
}
}
li:hover {
background-color: var(--btncolor);
&:hover {
background-color: var(--btncolor);
}
}
}
}
@@ -318,11 +317,9 @@
#FloatInput {
position: absolute;
width: 10%;
display: flex;
z-index: 100px;
z-index: 100;
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;
height: 25vh;
width: 40vw;
height: 40vw;
}
ul {
li {
font-size: 1em;
}
ul li {
font-size: 1em;
}
}
#box_1 {
flex-direction: column;
#dados,
@@ -354,21 +354,43 @@
#inv,
#powers {
width: 100%;
min-height: 100dvw;
#list {
height: 30dvh;
min-height: 43vh;
hgroup input[type="text"] {
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;
}
}
}
#dados #list {
height: 30dvh;
}
}
#inv {
ul {
max-height: 43vh;
li {
height: calc(100dvh / 6 - 2px);
}
#inv ul {
max-height: 43vh;
li {
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);

11
rpg/index.html
View File

@@ -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">
<li>
<label
>{user} rolou {dado} e o resultado é {valor}</label
>
</li>
</ul>
<ul id="log"></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>

11
rpg/javascript/globais.js Normal file
View File

@@ -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",
});
};

1
rpg/javascript/libs/tata.js Normal file
View File

File diff suppressed because one or more lines are too long

41
rpg/javascript/load_ficha.js Normal file
View File

@@ -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);
});

72
rpg/javascript/register.js
View File

@@ -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);
}
});

8
rpg/javascript/script.js
View File

@@ -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");
});
});

2
rpg/login.html
View File

@@ -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">

7
rpg/registro.html
View File

@@ -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>