n0rdye/puzzle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

massive UwU fixes & updates

Browse Source 
when login lasd sids is logged out, added cache for images they are being save to local storage when loaded, added reload for dragging elements when resizing the window or zooming the page, updated logging function, added local and cloud saving, loading for project, updated project preview image saving, updated object loading,  updated sid cleaning. i did it all in one day OWO. thats it Uwu
This commit is contained in:
N0rdye 2023-07-04 04:11:17 +05:00
parent 204318ef88
commit 1f5085490f
12 changed files with 365 additions and 253 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
db.js
View File

@ -2,7 +2,7 @@ const mysql = require('mysql');
const vars = require('./vars'); const vars = require('./vars');
const logcon = mysql.createConnection({ const logcon = mysql.createConnection({
host: 'localhost', host: 'db',
user: 'user', user: 'user',
password: 'user', password: 'user',
database: 'users' database: 'users'

68
func.js
View File

@ -24,29 +24,29 @@ module.exports.sendfile = (fileName, response) => {
}); });
} }
module.exports.check_sid = (Cookies, callback) =>{ // module.exports.check_sid = (Cookies, callback) =>{
let uuid = Cookies["uuid"]; // let uuid = Cookies["uuid"];
let sid = Cookies["sid"]; // let sid = Cookies["sid"];
// console.log(uuid,sid); // // console.log(uuid,sid);
db.gv("users","uuid",`'${uuid}'`,(udata)=>{ udata = udata[0]; // db.gv("users","uuid",`'${uuid}'`,(udata)=>{ udata = udata[0];
// console.log(udata); // // console.log(udata);
db.gv("sids","uid",udata["id"],(rdata)=>{ // db.gv("sids","uid",udata["id"],(rdata)=>{
let valid = ""; // let valid = "";
rdata.forEach(rec => { // rdata.forEach(rec => {
if (rec["sid"] == sid){ // if (rec["sid"] == sid){
valid = rec["sid"]; // valid = rec["sid"];
return; // return;
} // }
}); // });
if(valid != ""){ // if(valid != ""){
callback(true,udata); // callback(true,udata);
} // }
else{ // else{
callback(false,udata); // callback(false,udata);
} // }
}); // });
}) // })
} // }
module.exports.sid = (cook,res,callback,auto = true)=>{ module.exports.sid = (cook,res,callback,auto = true)=>{
let uuid = cook["uuid"]; let uuid = cook["uuid"];
@ -61,24 +61,26 @@ module.exports.sid = (cook,res,callback,auto = true)=>{
} }
else{ else{
if(auto) res.send({out:"bad",err:"wrong"}); if(auto) res.send({out:"bad",err:"wrong"});
callback(false); if(!auto) callback(false);
} }
}); });
} }
else{ else{
if(auto) res.send({out:"bad",err:"expired"}); if(auto) res.send({out:"bad",err:"expired"});
callback(false); if(!auto) callback(false);
} }
}); });
}else{ }else{
if(auto) res.send({out:"bad",err:"nocr"}); if(auto) res.send({out:"bad",err:"nocr"});
callback(false); if(!auto) callback(false);
} }
} }
module.exports.log = (comment) =>{ module.exports.log = (message) =>{
var date = moment().format('YYYY-MM-DD_hh:mm') var date = moment().format('YYYY-MM-DD')
console.log(`${date}|${comment}`); var time = moment().format('hh:mm:ss')
console.log(`${date}_${time}|${message}`);
db.nr("logs","`date`,`time`,`log`",`'${date}','${time}','${message}'`);
} }
@ -87,13 +89,13 @@ module.exports.get_uuid = () =>{
return unid; return unid;
} }
module.exports.encrypt = (password,uuid) => { module.exports.encrypt = (text,cipher) => {
// return bcrypt.hashSync(password,bcrypt.genSaltSync()); // return bcrypt.hashSync(password,bcrypt.genSaltSync());
return cryptojs.AES.encrypt(password,uuid).toString(); return cryptojs.AES.encrypt(text,cipher).toString();
} }
module.exports.decrypt = (password,uuid) =>{ module.exports.decrypt = (text,cipher) =>{
const en = cryptojs.AES.decrypt(password,uuid); const en = cryptojs.AES.decrypt(text,cipher);
const de = en.toString(cryptojs.enc.Utf8); const de = en.toString(cryptojs.enc.Utf8);
// console.log(de + "-dec"); // console.log(de + "-dec");
return de; return de;

3
index.js
View File

@ -26,7 +26,7 @@ const app = express();
// const { mainModule } = require('process'); // const { mainModule } = require('process');
// const { name } = require('ejs'); // const { name } = require('ejs');
const maxRequestBodySize = '50mb'; const maxRequestBodySize = '20mb';
app.set('view engine', 'ejs'); app.set('view engine', 'ejs');
app.use(express.urlencoded({ app.use(express.urlencoded({
extended: false, extended: false,
@ -79,7 +79,6 @@ app.post("/get_cr_uuid", (req,res) => {
app.post("/save_proj", (req,res) => { app.post("/save_proj", (req,res) => {
let inp = req.body; let inp = req.body;
let cook = req.cookies; let cook = req.cookies;
// func.log(inp["img"]);
func.sid(cook,res,()=>{ func.sid(cook,res,()=>{
proj.save(inp,cook,res); proj.save(inp,cook,res);
}) })

BIN
public/img/shadow-energy.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 435 KiB

58
public/lib/fn.js
View File

@ -7,11 +7,6 @@ function get_from_uuid(callback){
// console.log("good"); // console.log("good");
callback(res["body"]) callback(res["body"])
} }
else if (res["out"] == bad){
if (res["body"] == "expired"){
logout(true);
}
}
}); });
} }
@ -19,37 +14,40 @@ function log_by_sid() {
// const uuid = $.cookie("uuid"); // const uuid = $.cookie("uuid");
// const sid = $.cookie("sid"); // const sid = $.cookie("sid");
// console.log("log"); // console.log("log");
if($.cookie('uuid') == null && $.cookie('sid') == null){ if($.cookie('sid') == null){
// get_sid(location.hostname); // get_sid(location.hostname);
get_sid(); get_sid();
}else if ($.cookie('sid') != null && $.cookie('uuid') != null){ }
$.post( "/sid_log") // else if ($.cookie('sid') != null && $.cookie('uuid') != null){
.done(function( res ) { // $.post( "/sid_log")
console.log("ping"); // .done(function( res ) {
if(res["out"] == "good"){ // console.log("ping");
goto(res["url"]); // if(res["out"] == "good"){
} // goto(res["url"]);
else if (res["out"] == "bad"){ // }
clear_ck(false); // else if (res["out"] == "bad"){
} // clear_ck(false);
})} // }
// })}
} }
function clear_ck(redirect = true){ function clear_ck(redirect = true){
let uuid = $.cookie("uuid");
let sid = $.cookie("sid");
$.removeCookie("uuid");
$.removeCookie('sid');
console.log("sid"); console.log("sid");
$.post( "/clear_sid") setTimeout(()=>{
.done(function( res ) { $.post( "/clear_sid",{uuid:uuid,sid:sid})
console.log("sid"); .done(function( res ) {
$.cookie("uuid",null); console.log("sid");
$.cookie("sid",null); if(res["out"] == "good"){
$.removeCookie("uuid"); // get_sid();
$.removeCookie('sid'); if (redirect) goto("/login");
console.log("clear"); }
get_sid(); console.log("clear");
if(res["out"] == "good"){ })
if (redirect) goto("/login"); },100)
}
})
} }

113
public/lib/inter.js
View File

@ -1,12 +1,7 @@
window.dragMoveListener = dragMoveListener; window.dragMoveListener = dragMoveListener;
let root = document.getElementById("drags"); let root = document.getElementById("drags");
let objs = { height:"2",width:"4"}; let objs = { height:"2",width:"4"};
let objs_store = {};
function get_count(clas){
if (objs[clas] == null) objs[clas] = {};
let count = Object.keys(objs[clas]).length;
return count;
}
function create(clas,x,y,body,id,size){ function create(clas,x,y,body,id,size){
let main_clas = clas.split(" ")[0]; let main_clas = clas.split(" ")[0];
@ -18,20 +13,39 @@ function create(clas,x,y,body,id,size){
clas.forEach(cl => { clas.forEach(cl => {
obj.classList.add(cl); obj.classList.add(cl);
}); });
load_obj(main_clas,"`img`,`name`,`description`,`width`,`height`",(db_data)=>{ get_obj(main_clas,(db_data)=>{
if (db_data == null) { if ($.cookie("cache") == "true"){
delete objs[main_clas][id]; if (localStorage.getItem(`${main_clas}`) == null){
save(()=>{ load_obj(main_clas,"`img`",(odata)=>{
goto("/proj/"+proj_name); localStorage.setItem(main_clas,odata["img"]);
}); make(odata["img"]);
})
}
else{
make(localStorage.getItem(main_clas))
}
} }
else if (db_data != null){ else{
obj.src = db_data["img"]; load_obj(main_clas,"`img`",(odata)=>{
obj.title = `${db_data["name"]}\n${db_data["description"]}\nwidth:${db_data["width"]}см height:${db_data["height"]}см`; localStorage.setItem(main_clas,odata["img"]);
// drag.transform = `translate(${drag.getAttribute("data-y")}px, ${drag.getAttribute("data-y")}px) scale(${db_data["width"] * 2} ${db_data["height"] * 2})`; make(odata["img"]);
if(size){ })
obj.style.width = `${db_data["width"] * 2}px`; }
obj.style.height = `${db_data["height"] * 2}px`; function make(img){
if (db_data == null) {
delete objs[main_clas][id];
save(()=>{
goto("/proj/"+proj_name);
});
}
else if (db_data != null){
obj.src = img;
obj.title = `${db_data["name"]}\n${db_data["description"]}\nwidth:${db_data["width"]}см height:${db_data["height"]}см`;
// drag.transform = `translate(${drag.getAttribute("data-y")}px, ${drag.getAttribute("data-y")}px) scale(${db_data["width"] * 2} ${db_data["height"] * 2})`;
if(size){
obj.style.width = `${db_data["width"] * 2}px`;
obj.style.height = `${db_data["height"] * 2}px`;
}
} }
} }
}) })
@ -40,6 +54,12 @@ function create(clas,x,y,body,id,size){
set_pos(obj,x,y); set_pos(obj,x,y);
} }
function resize_drags(){
document.getElementById('drags').style.left = $('.dropzone')[0].getBoundingClientRect().x;
document.getElementById('drags').style.width = $('.dropzone')[0].style.width;
drag_start();
}
function wall_size_change(type,value){ function wall_size_change(type,value){
let wall = document.getElementsByClassName("wall")[0]; let wall = document.getElementsByClassName("wall")[0];
let scroll; let scroll;
@ -47,7 +67,7 @@ function wall_size_change(type,value){
if (value == null) scroll = document.getElementById("wall_width").value; if (value == null) scroll = document.getElementById("wall_width").value;
else scroll = value; else scroll = value;
// document.getElementById("wall_width_value").innerHTML = (Math.ceil((parseFloat(scroll)+0.1)*10)/ 10); // document.getElementById("wall_width_value").innerHTML = (Math.ceil((parseFloat(scroll)+0.1)*10)/ 10);
document.getElementById("wall_width_value").innerHTML = scroll; document.getElementById("wall_width_value").innerHTML = `${scroll}м`;
// console.log(scroll); // console.log(scroll);
wall.style.width = `${scroll * 200}px`; wall.style.width = `${scroll * 200}px`;
@ -57,7 +77,7 @@ function wall_size_change(type,value){
if (value == null) scroll = document.getElementById("wall_height").value; if (value == null) scroll = document.getElementById("wall_height").value;
else scroll = value; else scroll = value;
// document.getElementById("wall_height_value").innerHTML = (Math.ceil((parseFloat(scroll)+0.1)*10)/ 10); // document.getElementById("wall_height_value").innerHTML = (Math.ceil((parseFloat(scroll)+0.1)*10)/ 10);
document.getElementById("wall_height_value").innerHTML = scroll; document.getElementById("wall_height_value").innerHTML = `${scroll}м`;
// console.log(scroll); // console.log(scroll);
wall.style.height = `${scroll * 200}px`; wall.style.height = `${scroll * 200}px`;
@ -65,7 +85,7 @@ function wall_size_change(type,value){
} }
} }
function load_local(objss){ function load(objss){
// objs = JSON.parse($.cookie("objs")); // objs = JSON.parse($.cookie("objs"));
// console.log(objs); // console.log(objs);
objs = objss; objs = objss;
@ -92,7 +112,9 @@ function load_local(objss){
drag_start(); drag_start();
} }
function load_proj(){ function load_proj_cloud(){
document.getElementById("drags").innerHTML = "";
document.getElementById("top_panel_center").innerText = `loading ${proj_name} from cloud`;
$.post( "/load_proj",{name:proj_name}) $.post( "/load_proj",{name:proj_name})
.done(function( res ) { .done(function( res ) {
if(res["out"] == "good"){ if(res["out"] == "good"){
@ -100,7 +122,8 @@ function load_proj(){
// console.log(JSON.parse(`'${res["body"]}'`)); // console.log(JSON.parse(`'${res["body"]}'`));
// console.log(JSON.parse(res["body"])); // console.log(JSON.parse(res["body"]));
// $.cookie("objs",res["body"]); // $.cookie("objs",res["body"]);
load_local(JSON.parse(res["body"])); load(JSON.parse(res["body"]));
document.getElementById("top_panel_center").innerText = `${proj_name} (cloud)`;
} }
else if(res["out"] == "bad proj"){ else if(res["out"] == "bad proj"){
console.log("bad"); console.log("bad");
@ -111,12 +134,28 @@ function load_proj(){
}) })
} }
function load_proj_local(){
// document.getElementById("top_panel_center").innerText = `loading ${proj_name} from local storage`;
if(localStorage.getItem(proj_name) == null){
save_local()
}
document.getElementById("top_panel_center").innerText = `${proj_name} (local)`;
document.getElementById("drags").innerHTML = "";
load(JSON.parse(localStorage.getItem(proj_name)));
}
function save_local(){
// console.log(objs);
localStorage.setItem(proj_name,JSON.stringify(objs));
}
function save(callback){ function save(callback){
// console.log(objs); // console.log(objs);
html2canvas(document.querySelector("body"),{height: 500, width:(window.innerWidth /1.65),x:(window.innerWidth / 5), y:250}).then(canvas => { html2canvas(document.querySelector("body"),{height: document.getElementById("wall").style.height.split("p")[0], width:document.getElementById("wall").style.width.split("p")[0], y:document.getElementById("wall").getBoundingClientRect().top,x:document.getElementById("wall").getBoundingClientRect().left}).then(canvas => {
let scr = ""; let scr = "";
console.log(canvas.toDataURL().length); console.log(canvas.toDataURL().length);
if (canvas.toDataURL().length < 120000) scr = canvas.toDataURL() scr = canvas.toDataURL();
// if (canvas.toDataURL().length < 120000) scr = canvas.toDataURL()
// console.log(scr); // console.log(scr);
$.post( "/save_proj", {proj:JSON.stringify(objs),name:proj_name,img:scr}) $.post( "/save_proj", {proj:JSON.stringify(objs),name:proj_name,img:scr})
.done(function( res ) { .done(function( res ) {
@ -134,11 +173,25 @@ function load_objs(callback){
.done(function( res ) { .done(function( res ) {
if(res["out"] == "good"){ if(res["out"] == "good"){
// console.log(res["body"]); // console.log(res["body"]);
res["body"].forEach(element => {
objs_store[`${element["name"]}`] = {description:element["description"],height:element["height"],width:element["width"],id:element["id"],name:element["name"]}
});
callback(res["body"]); callback(res["body"]);
} }
}); });
} }
function get_obj(clas,callback){
if(objs_store != null && objs_store[clas] != null){
callback(objs_store[clas]);
}
else{
load_objs(()=>{
callback(objs_store[clas]);
})
}
}
function load_obj(name,key,callback){ function load_obj(name,key,callback){
$.post( "/get_obj",{name:name,key:key}) $.post( "/get_obj",{name:name,key:key})
.done(function( res ) { .done(function( res ) {
@ -233,11 +286,11 @@ interact('.createzone').dropzone({
var drag = event.relatedTarget; var drag = event.relatedTarget;
var zone = event.target; var zone = event.target;
if(drag.classList[1] == "spawn" && drag.classList[0] == zone.classList[0]){ if(drag.classList[1] == "spawn" && drag.classList[0] == zone.classList[0]){
load_obj(drag.classList[0],"`height`, `width`",(db_data)=>{ get_obj(drag.classList[0],(db_data)=>{
// drag.transform = `translate(${drag.getAttribute("data-y")}px, ${drag.getAttribute("data-y")}px) scale(${db_data["width"] * 2} ${db_data["height"] * 2})`; // drag.transform = `translate(${drag.getAttribute("data-y")}px, ${drag.getAttribute("data-y")}px) scale(${db_data["width"] * 2} ${db_data["height"] * 2})`;
drag.style.width = `${db_data["width"] * 2}px`; drag.style.width = `${db_data["width"] * 2}px`;
drag.style.height = `${db_data["height"] * 2}px`; drag.style.height = `${db_data["height"] * 2}px`;
console.log(db_data); // console.log(db_data);
}) })
let x = zone.getBoundingClientRect().left - document.getElementById("drags").getBoundingClientRect().left; let x = zone.getBoundingClientRect().left - document.getElementById("drags").getBoundingClientRect().left;
let y = zone.getBoundingClientRect().top - document.getElementById("drags").getBoundingClientRect().top; let y = zone.getBoundingClientRect().top - document.getElementById("drags").getBoundingClientRect().top;
@ -251,6 +304,10 @@ interact('.createzone').dropzone({
}) })
function drag_start() { function drag_start() {
let spawns = document.getElementsByClassName("spawn");
Object.entries(spawns).forEach(([key, spawn]) => {
spawn.parentElement.removeChild(spawn);
});
let zones = document.getElementsByClassName("createzone"); let zones = document.getElementsByClassName("createzone");
Object.entries(zones).forEach(([key, zone]) => { Object.entries(zones).forEach(([key, zone]) => {
let x = zone.getBoundingClientRect().left - document.getElementById("drags").getBoundingClientRect().left; let x = zone.getBoundingClientRect().left - document.getElementById("drags").getBoundingClientRect().left;

58
user.js
View File

@ -12,18 +12,27 @@ module.exports.login = (inp,cook,res)=>{
} }
else if (login != null){ else if (login != null){
db.gv("users","login",`'${ilogin}'`,(udata)=>{udata = udata[0]; db.gv("users","login",`'${ilogin}'`,(udata)=>{udata = udata[0];
if(ipass == udata["pass"]){ db.ggv("sids","`sid`","uid",udata["id"],(sdata)=>{sdata = sdata[0];
func.log("good boy "+udata["uuid"]+" logged in by login & pass from "+cook["sid"]); // console.log(sdata);
res.cookie("uuid",udata["uuid"],{maxAge:vars.week,path:"/;SameSite=Strict"}); if(ipass == udata["pass"]){
if (sdata != null){
// res.send({out:"logged",sid:sdata["sid"]});
// console.log(sdata);
db.dl("sids","uid",`'${udata["id"]}'`,() =>{});
// db.sv("users","sids",sids += inp["sid"]+";","uuid",udata["uuid"],()=>{}); }
db.nr("sids",'`sid`,`uid`',`'${cook["sid"]}','${udata["id"]}'`); func.log("good boy "+udata["uuid"]+" logged in by login & pass from "+cook["sid"]);
res.send({out:"goto",url:"/main"}); res.cookie("uuid",udata["uuid"],{maxAge:vars.week,path:"/;SameSite=Strict"});
// db.sv("users","sids",sids += inp["sid"]+";","uuid",udata["uuid"],()=>{});
db.nr("sids",'`sid`,`uid`',`'${cook["sid"]}','${udata["id"]}'`);
res.send({out:"goto",url:"/main"});
}
else{
res.status(210).send({out:"bad", err:"pass"});
}
} })
else{
res.status(210).send({out:"bad", err:"pass"});
}
}); });
} }
}) })
@ -83,10 +92,29 @@ module.exports.get_cr = (inp,cook,res)=>{
} }
module.exports.clear_sid = (inp,cook,res)=>{ module.exports.clear_sid = (inp,cook,res)=>{
if(cook["sid"] != null){ if(inp["sid"] != null){
// res.send({out:"good"}); // res.send({out:"good"});
func.log("good boy"+cook["uuid"] + " logged out from "+cook["sid"]); db.dl("sids","sid",`'${inp["sid"]}'`,() =>{
db.dl("sids","sid",`'${cook["sid"]}'`,() =>{}); func.log("good boy "+inp["uuid"] + " logged out from "+inp["sid"]);
});
// db.ggv("sids","id","sid",`'${cook["sid"]}'`,(sids)=>{
// Object.entries(sids).forEach(([key,value])=>{
// db.dl("sids","id",`'${value["id"]}'`,() =>{});
// })
// })
}
else if(inp["uuid"] != null){
// res.send({out:"good"});
db.ggv("users","id","uuid",`'${inp["uuid"]}'`,(udata)=>{udata = udata[0]
db.dl("sids","uid",`'${udata["id"]}'`,() =>{
func.log("good boy "+inp["uuid"] + " logged out from "+inp["sid"]);
});
// db.ggv("sids","id","uid",`'${udata["id"]}'`,(sids)=>{
// Object.entries(sids).forEach(([key,value])=>{
// db.dl("sids","id",`'${value["id"]}'`,() =>{});
// })
// })
});
} }
res.send({out:"good"}); res.send({out:"good"});
} }
@ -94,12 +122,12 @@ module.exports.clear_sid = (inp,cook,res)=>{
module.exports.sid_log=(inp,cook,res,req)=>{ module.exports.sid_log=(inp,cook,res,req)=>{
func.sid(cook,res,(include) => { func.sid(cook,res,(include) => {
if (include){ if (include){
if(req.headers.referer.split("http://n0rsrv2:3002/")[1] == "login") func.log("good boy "+ id["uuid"]+" logged in by sid logs from " + id["sid"]);
res.send({out:"good",url:"/main"}); res.send({out:"good",url:"/main"});
if(req.headers.referer.split("http://n0rsrv2:3002/")[1] == "login") func.log("good boy "+ id["uuid"]+" logged in by sid logs from " + id["sid"]);
} }
else if (!include){ else if (!include){
if(req.headers.referer.split("http://n0rsrv2:3002/")[1] == "login") func.log("bad boy "+ id["uuid"]+" tried to login by sid but sid expired from " + id["sid"]);
res.send({out:"bad"}); res.send({out:"bad"});
if(req.headers.referer.split("http://n0rsrv2:3002/")[1] == "login") func.log("bad boy "+ id["uuid"]+" tried to login by sid but sid expired from " + id["sid"]);
} }
},false) },false)
} }

96
views/header.ejs
View File

@ -11,13 +11,15 @@
/* float: right; */ /* float: right; */
justify-content: space-between; justify-content: space-between;
display: flex; display: flex;
width: 20vw; cursor: pointer;
/* width: 20vw; */
} }
#top_panel_left{ #top_panel_left{
/* float: left; */ /* float: left; */
justify-content: space-between; justify-content: space-between;
cursor: pointer;
display: flex; display: flex;
width: 20vw; /* width: 20vw; */
} }
#top_panel{ #top_panel{
height: 20px; height: 20px;
@ -25,59 +27,85 @@
/* button{ /* button{
/* margin-inline: 5px; */ /* margin-inline: 5px; */
/* } */ /* } */
#ctxmenu {
position: fixed;
background: ghostwhite;
color: black;
cursor: pointer;
border: 1px black solid
}
#ctxmenu > p {
padding: 0 1rem;
margin: 0
}
#ctxmenu > p:hover { .menu_btn{
background: black; background: ghostwhite;
color: ghostwhite cursor: pointer;
border: 1px black dashed;
padding: 5px;
}
.cmenu{
position: fixed;
display: block;
background: ghostwhite;
color: black;
cursor: pointer;
border: 1px black solid;
} }
</style> </style>
<header id="top_panel"> <header id="top_panel">
<!-- <div id="user_name"></div> --> <!-- <div id="user_name"></div> -->
<div id="proj_top_panel"> <div id="proj_top_panel">
<div id="top_panel_left"></div> <div id="top_panel_left"></div>
<!-- <div>puzzle</div> --> <div id="top_panel_center"></div>
<div id="top_panel_right"></div> <div id="top_panel_right"></div>
</div> </div> <!-- <div><button onclick="logout();">logout</button></div> -->
<!-- <div><button onclick="logout();">logout</button></div> -->
</header> </header>
<div id="user_menu" class="cmenu"></div>
<script>get_from_uuid((res)=>{ <script>get_from_uuid((res)=>{
let uname = document.getElementById("user_name"); let uname = document.getElementById("user_name");
let menu = document.getElementById("user_menu");
let header = document.getElementById("top_panel"); let header = document.getElementById("top_panel");
let right = document.getElementById("top_panel_right"); let right = document.getElementById("top_panel_right");
let left = document.getElementById("top_panel_left"); let left = document.getElementById("top_panel_left");
if(document.title != "main") left.innerHTML += `<button onclick="goto('/');">main page</button>`; if(document.title != "main") menu.innerHTML += `<button onclick="goto('/');">main page</button> <br>`;
left.innerHTML += `<div id="user_name">${res["login"]}</div>`; right.innerHTML += `<div id="user_name" class="menu_btn">${res["login"]}</div>`;
if (res["admin"] == true){ if (res["admin"] == true){
right.innerHTML += `<button onclick='goto("/admin")'>admin panel</button>`; menu.innerHTML += `<button onclick='goto("/admin")'>admin panel</button><br>`;
} }
right.innerHTML += "<button onclick='logout();'>logout</button>"; menu.innerHTML += "<button onclick='logout();'>logout</button><br>";
}); });
oncontextmenu = (e) => { onclick = (e) => {
e.preventDefault() e.preventDefault()
// console.log(e); // console.log(e);
if(e.target.id == "user_name"){ // console.log(document.getElementById(e.target.id).parentElement);
let menu = document.createElement("div") if(e.target.onclick != null){
menu.id = "ctxmenu" if(document.title == "login"){
menu.style = `top:${e.pageY+20}px;left:${e.pageX-40}px` console.log(document.title);
menu.onmouseleave = () => ctxmenu.outerHTML = '' log_by_sid();
menu.innerHTML = "<p>Option1</p><p>Option2</p><p>Option3</p><p>Option4</p>" }else if(document.title != "login"){
document.body.appendChild(menu) check_sid(true);
} console.log("check");
}
}
if(e.target.id == "user_name"){
hide_menus();
let menu = document.getElementById("user_menu");
menu.style.display = 'block';
menu.style = `top:${e.target.getBoundingClientRect().top+30}px;left:${e.target.getBoundingClientRect().left}px`
// menu.onmouseleave = () => menu.style.display = 'none';
// menu.innerHTML = "<p>Option1</p><p>Option2</p><p>Option3</p><p>Option4</p>"
// document.body.appendChild(menu)
}else if(e.target.id == "proj_menu"){
hide_menus();
let menu = document.getElementById("project_menu");
menu.style.display = 'block';
menu.style = `top:${e.target.getBoundingClientRect().top+30}px;left:${e.target.getBoundingClientRect().left}px`
// menu.onmouseleave = () => menu.style.display = 'none';
// menu.innerHTML = "<p>Option1</p><p>Option2</p><p>Option3</p><p>Option4</p>"
// document.body.appendChild(menu)
}
else{
hide_menus();
}
} }
</script> </script>

35
views/login.ejs
View File

@ -10,21 +10,18 @@
} }
</style> </style>
<form action="" method="post" id="log_form"> <div class="login-page">
<div class="login-page"> <input name="login" type="text" id="login" required>
<input name="login" type="text" id="login" required> <label for="login">login</label>
<label for="login">login</label> </div>
</div> <div class="pass-page">
<div class="pass-page"> <input name="pass" type="password" id="pass" value="" required>
<input name="pass" type="password" id="pass" value="" required> <label for="pass">password</label>
<label for="pass">password</label> </div>
</div>
<button type="button" id="log_btn" onclick="log(document.getElementById('login').value,document.getElementById('pass').value);">login</button> <button type="button" id="log_btn" onclick="log(document.getElementById('login').value,document.getElementById('pass').value);">login</button>
<!-- <input type="submit" value="" hidden> --> <!-- <input type="submit" value="" hidden> -->
<div id="res"></div> <div id="res"></div>
</form>
<%- include('./static/end.ejs') %> <%- include('./static/end.ejs') %>
@ -32,9 +29,9 @@
// console.log($.cookie("uuid")); // console.log($.cookie("uuid"));
// log_by_sid(); // log_by_sid();
function log(nlogin,npass){ function log(){
const login = CryptoJS.AES.encrypt(nlogin,$.cookie("sid")).toString(); const login = CryptoJS.AES.encrypt(document.getElementById('login').value,$.cookie("sid")).toString();
const pass = CryptoJS.AES.encrypt(npass,$.cookie("sid")).toString(); const pass = CryptoJS.AES.encrypt(document.getElementById('pass').value,$.cookie("sid")).toString();
const sid = $.cookie("sid"); const sid = $.cookie("sid");
$.post( "/back_login", { login:login,pass:pass,sid:sid }) $.post( "/back_login", { login:login,pass:pass,sid:sid })
.done(function( res ) { .done(function( res ) {
@ -49,6 +46,10 @@
// postForm(res["url"], res["args"]); // postForm(res["url"], res["args"]);
goto(res["url"]); goto(res["url"]);
} }
// if(res["out"] == "logged"){
// // postForm(res["url"], res["args"]);
// // document.querySelector("#res").innerHTML = `<p>user already logged in from sid - ${res["sid"]}</p> <br> <button onclick="$.cookie('sid','${res["sid"]}');clear_ck();">log him out</button>`;
// }
} }
}); });
} }

92
views/project.ejs
View File

@ -87,6 +87,7 @@
margin: auto; margin: auto;
padding-block: 20px; padding-block: 20px;
padding-bottom: 0px; padding-bottom: 0px;
margin-top: 50px;
} }
.wall{ .wall{
@ -115,12 +116,8 @@
<div id="drags"> <div id="drags">
<!-- <div class="cube drag spawn" id="cube_0" style="transform: translate(197.7px, 57.8667px);" data-x="197.6999969482422" data-y="57.866668701171875" >cube</div> --> <!-- <div class="cube drag spawn" id="cube_0" style="transform: translate(197.7px, 57.8667px);" data-x="197.6999969482422" data-y="57.866668701171875" >cube</div> -->
</div> </div>
<section class="main">
<div id="proj_top"> <div id="project_menu" class="cmenu"></div>
<button id="proj_save_btn" onclick="document.getElementById('proj_save_btn').innerHTML='saving';save((res)=>{document.getElementById('proj_save_btn').innerHTML='saved';setTimeout((res)=>{document.getElementById('proj_save_btn').innerHTML='save'},3000)})">save</button>
<input id="proj_name"></input>
</div>
</section>
<!-- <div class="dropzone"></div> --> <!-- <div class="dropzone"></div> -->
@ -139,7 +136,7 @@
<label for="wall_width">width</label> <label for="wall_width">width</label>
<div id="wall_width_value">0</div> <div id="wall_width_value">0</div>
</div> </div>
<input type="range" step="0.1" min="0" max="7" id="wall_width" value="4" oninput="wall_size_change('width')"> <input type="range" step="0.1" min="0" max="7" id="wall_width" value="4" oninput="wall_size_change('width')" onchange="resize_drags()">
</div> </div>
</div> </div>
<div class="czones"> <div class="czones">
@ -154,33 +151,34 @@
<div class="buble createzone"></div> <div class="buble createzone"></div>
<div class="buble createzone"></div> --> <div class="buble createzone"></div> -->
</div> </div>
<img class="trash" style="height: 100px; width: 100px;" src="https://media.tenor.com/9Ec_X487U1kAAAAj/shadow-energy.gif" alt="black hole"> <img class="trash" style="height: 100px; width: 100px;" src="/img/shadow-energy.gif" alt="black hole">
</div> </div>
<div class="wall dropzone" id="wall"></div> <div class="wall dropzone" id="wall"></div>
<script src="/lib/inter.js"></script> <script src="/lib/inter.js"></script>
<%- include('./static/end.ejs') %>
<script> <script>
function scree(){ // function scree(){
// // console.log(document.getElementById("wall").style.height.split("p")[0]);
// html2canvas(document.querySelector("body"),{height: document.getElementById("wall").style.height.split("p")[0], width:document.getElementById("wall").style.width.split("p")[0], y:255}).then(canvas => {
html2canvas(document.querySelector("body"),{height: 1000,y:100}).then(canvas => { // console.log(canvas.toDataURL().length);
let scr = canvas.toDataURL(); // let scr = canvas.toDataURL();
let img = document.createElement("img"); // let img = document.createElement("img");
img.src = scr; // img.src = scr;
document.body.append(img); // document.body.append(img);
// return canvas; // // return canvas;
// console.log(scr) // // console.log(scr)
}); // });
// html2canvas(document.querySelector("#drags")).then(canvas => { // // html2canvas(document.querySelector("#drags")).then(canvas => {
// document.body.appendChild(canvas) // // document.body.appendChild(canvas)
// }); // // });
} // }
load_objs((data)=>{ load_objs((data)=>{
data.forEach(value => { data.forEach(value => {
// console.log(value); // console.log(value);
@ -190,13 +188,53 @@
czone.classList.add("createzone"); czone.classList.add("createzone");
czones.append(czone) czones.append(czone)
}); });
load_proj(); load_proj_cloud();
}) })
</script> </script>
<script> <script>
let proj_name = "<%= proj_name %>"; let proj_name = "<%= proj_name %>";
if($.cookie("cache") ==null)$.cookie("cache","true",{path:"/proj;SameSite=Strict"});
// console.log(proj_name); // console.log(proj_name);
document.getElementById("proj_name").value = proj_name; let menu = document.getElementById("project_menu");
document.getElementById("top_panel_left").innerHTML = `<div id='proj_menu' class="menu_btn">file</div>`;
menu.innerHTML += "<button id='proj_csave_btn' onclick='save_proj()'>save to cloud</button> <br>";
menu.innerHTML += "<button id='proj_cload_btn' onclick='load_proj_cloud()'>load from cloud</button> <br>";
menu.innerHTML += "<button id='proj_lsave_btn' onclick='save_proj_local()'>save to local storage</button> <br>";
menu.innerHTML += "<button id='proj_lload_btn' onclick='load_proj_local()'>load from local storage</button> <br>";
if ($.cookie("cache") == "false") menu.innerHTML += "<div id='cache_switch' title='if its on browser will stop large data in local storage (better performance)'><button onclick='cache_change(true);'>cache is off</button></div>";
else if ($.cookie("cache") == "true") menu.innerHTML += "<div id='cache_switch' title='if its on browser will stop large data in local storage (better performance)'><button onclick='cache_change(false);'>cache is on</button></div>";
function cache_change(to){
let cache_switch = document.getElementById("cache_switch");
if(to) {cache_switch.innerHTML = "<button onclick='cache_change(false);' title='if its on browser will stop large data in local storage (better performance)'>cache is on</button></div>";$.cookie("cache","true",{path:"/proj;SameSite=Strict"});}
else if(!to) {cache_switch.innerHTML = "<button onclick='cache_change(true);' title='if its on browser will stop large data in local storage (better performance)'>cache is off</button></div>";$.cookie("cache","false",{path:"/proj;SameSite=Strict"});}
}
function save_proj(type){
document.getElementById('top_panel_center').innerHTML=`saving ${proj_name}`;
save((res)=>{
document.getElementById('top_panel_center').innerHTML=`saved ${proj_name} to cloud`;
setTimeout((res)=>{
document.getElementById("top_panel_center").innerText = `${proj_name} (cloud)`;
},3000)
})
}
function save_proj_local(type){
document.getElementById('top_panel_center').innerHTML=`saving ${proj_name}`;
save_local();
document.getElementById('top_panel_center').innerHTML=`saved ${proj_name} to local storage`;
setTimeout((res)=>{
document.getElementById("top_panel_center").innerText = `${proj_name} (local)`;
},3000)
}
// drag_start(); // drag_start();
</script> // console.log(px_ratio);
<%- include('./static/end.ejs') %> $(window).resize(function(){isZooming();});
function isZooming(){
resize_drags();
}
</script>

59
views/static/end.ejs
View File

@ -1,48 +1,23 @@
<div class="scale_block">
<div>
oh no html breaking! <br>
please don't use custom scale for this window
</div>
</div>
</body> </body>
</html> </html>
<script> <script>
if(document.title == "login"){ function hide_menus(){
console.log(document.title); let menus = document.getElementsByClassName("cmenu");
log_by_sid(); Object.entries(menus).forEach(([key,menu]) => {
}else if(document.title != "login"){ menu.style.display = "none";
check_sid(true); });
console.log("check");
} }
</script> hide_menus();
<script> oncontextmenu = (e) => {
px_ratio = window.devicePixelRatio || window.screen.availWidth / document.documentElement.clientWidth; e.preventDefault()
// console.log(px_ratio);
isZooming();
$(window).resize(function(){isZooming();});
function isZooming(){
var newPx_ratio = window.devicePixelRatio || window.screen.availWidth / document.documentElement.clientWidth;
if(newPx_ratio != px_ratio){
px_ratio = newPx_ratio;
// console.log(px_ratio);
if (px_ratio != 1){
// console.log("zooming");
document.getElementsByClassName("scale_block")[0].style.display = "block";
}
else{
document.getElementsByClassName("scale_block")[0].style.display = "none";
}
return true;
}else{
// console.log("just resizing");
if (px_ratio != 1){
document.getElementsByClassName("scale_block")[0].style.display = "block";
}
else{
document.getElementsByClassName("scale_block")[0].style.display = "none";
}
return false;
}
} }
$(window).focus(function(){
if(document.title == "login"){
console.log(document.title);
log_by_sid();
}else if(document.title != "login"){
check_sid(true);
console.log("check");
}
});
</script> </script>

34
views/static/start.ejs
View File

@ -1,10 +1,10 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<script src="/lib/fn.js"></script>
<!-- <script src="/lib/interact.min.js"></script> --> <!-- <script src="/lib/interact.min.js"></script> -->
<script src="/lib/jquery.js"></script> <script src="/lib/jquery.js"></script>
<script src="/lib/jquery.cookie.js"></script> <script src="/lib/jquery.cookie.js"></script>
<script src="/lib/fn.js"></script>
<script src="/lib/ejs.js"></script> <script src="/lib/ejs.js"></script>
<script src="/lib/aes.js"></script> <script src="/lib/aes.js"></script>
<meta charset="UTF-8"> <meta charset="UTF-8">
@ -19,29 +19,15 @@
html{ html{
background-color:aliceblue; background-color:aliceblue;
} }
.scale_block{
display: none;
top: 0px;
left: 0px;
background-color:rgb(47, 47, 47);
width: 100vw;
height: 100vh;
/* line-height: 100vh; */
text-align: center;
position: absolute;
z-index: 100;
font-size: 4vw;
filter: opacity(99.8%);
/* filter: blur(1px); */
backdrop-filter: blur(10px);
}
.scale_block div{
position: absolute;
top: 50vh;
left: 50vw;
transform: translate(-50%, -50%);
width: 100vw;
}
</style> </style>
<script>
if(document.title == "login"){
console.log(document.title);
log_by_sid();
}else if(document.title != "login"){
check_sid(true);
console.log("check");
}
</script>
</head> </head>
<body> <body>