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

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

Browse Source
This commit is contained in:
zk_exe
2025-06-21 00:38:02 -03:00
parent 9a818eee5f
commit e51f7f41dc
12 changed files with 553 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
rpg/css/style.css
View File

@@ -12,9 +12,8 @@
gap: 1vw;
#hero {
width: 15%;
height: auto;
max-height: 30dvh;
width: 25dvh;
height: 25dvh;
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;
height: 40vw;
width: 40dvw;
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 {

219
rpg/index.html
View File

@@ -16,39 +16,54 @@
<ul>
<li>
<label>vida:</label>
<p>0/0</p>
<a id="btn">
<p id="vdp">0/0</p>
<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>
<a id="btn" class="editbtn player_name">
<p id="nmp">you user name</p>
<a id="btn" class="editbtn nome">
<span class="material-symbols-outlined"> edit </span>
edit
</a>
</li>
<li>
<label>level:</label>
<p>0</p>
<a id="btn">
<p id="lvp">0</p>
<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>
<a id="btn">
<p id="idp">0</p>
<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>
<a id="btn" class="editbtn">
<p id="alp">0,0</p>
<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>
<a id="btn">
<p id="conhecimento" class="status_player">0</p>
<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>
<a id="btn">
<p id="força" class="status_player">0</p>
<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>
<a id="btn">
<p id="destresa" class="status_player">0</p>
<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>
<a id="btn">
<p id="inteligencia" class="status_player">0</p>
<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>
<a id="btn">
<p id="cárisma" class="status_player">0</p>
<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>
<a id="btn">
<p id="mip">0</p>
<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>

74
rpg/javascript/load_ficha.js
View File

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

64
rpg/javascript/login.js Normal file
View File

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

14
rpg/javascript/register.js
View File

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

32
rpg/javascript/script.js
View File

@@ -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());
alert($(this).find("input").val());
let name = $(this).find("input").attr("name");
let value = $(this).find("input").val();
data_update(name, value).then((result) => {
if (result) {
$(this).remove();
}
});
break;
case false:
$(this).remove();

3
rpg/login.html
View File

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