massive UwU fixes & updates
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:
parent
204318ef88
commit
1f5085490f
2
db.js
2
db.js
|
|
@ -2,7 +2,7 @@ const mysql = require('mysql');
|
|||
const vars = require('./vars');
|
||||
|
||||
const logcon = mysql.createConnection({
|
||||
host: 'localhost',
|
||||
host: 'db',
|
||||
user: 'user',
|
||||
password: 'user',
|
||||
database: 'users'
|
||||
|
|
|
|||
68
func.js
68
func.js
|
|
@ -24,29 +24,29 @@ module.exports.sendfile = (fileName, response) => {
|
|||
});
|
||||
}
|
||||
|
||||
module.exports.check_sid = (Cookies, callback) =>{
|
||||
let uuid = Cookies["uuid"];
|
||||
let sid = Cookies["sid"];
|
||||
// console.log(uuid,sid);
|
||||
db.gv("users","uuid",`'${uuid}'`,(udata)=>{ udata = udata[0];
|
||||
// console.log(udata);
|
||||
db.gv("sids","uid",udata["id"],(rdata)=>{
|
||||
let valid = "";
|
||||
rdata.forEach(rec => {
|
||||
if (rec["sid"] == sid){
|
||||
valid = rec["sid"];
|
||||
return;
|
||||
}
|
||||
});
|
||||
if(valid != ""){
|
||||
callback(true,udata);
|
||||
}
|
||||
else{
|
||||
callback(false,udata);
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
// module.exports.check_sid = (Cookies, callback) =>{
|
||||
// let uuid = Cookies["uuid"];
|
||||
// let sid = Cookies["sid"];
|
||||
// // console.log(uuid,sid);
|
||||
// db.gv("users","uuid",`'${uuid}'`,(udata)=>{ udata = udata[0];
|
||||
// // console.log(udata);
|
||||
// db.gv("sids","uid",udata["id"],(rdata)=>{
|
||||
// let valid = "";
|
||||
// rdata.forEach(rec => {
|
||||
// if (rec["sid"] == sid){
|
||||
// valid = rec["sid"];
|
||||
// return;
|
||||
// }
|
||||
// });
|
||||
// if(valid != ""){
|
||||
// callback(true,udata);
|
||||
// }
|
||||
// else{
|
||||
// callback(false,udata);
|
||||
// }
|
||||
// });
|
||||
// })
|
||||
// }
|
||||
|
||||
module.exports.sid = (cook,res,callback,auto = true)=>{
|
||||
let uuid = cook["uuid"];
|
||||
|
|
@ -61,24 +61,26 @@ module.exports.sid = (cook,res,callback,auto = true)=>{
|
|||
}
|
||||
else{
|
||||
if(auto) res.send({out:"bad",err:"wrong"});
|
||||
callback(false);
|
||||
if(!auto) callback(false);
|
||||
}
|
||||
});
|
||||
}
|
||||
else{
|
||||
if(auto) res.send({out:"bad",err:"expired"});
|
||||
callback(false);
|
||||
if(!auto) callback(false);
|
||||
}
|
||||
});
|
||||
}else{
|
||||
if(auto) res.send({out:"bad",err:"nocr"});
|
||||
callback(false);
|
||||
if(!auto) callback(false);
|
||||
}
|
||||
}
|
||||
|
||||
module.exports.log = (comment) =>{
|
||||
var date = moment().format('YYYY-MM-DD_hh:mm')
|
||||
console.log(`${date}|${comment}`);
|
||||
module.exports.log = (message) =>{
|
||||
var date = moment().format('YYYY-MM-DD')
|
||||
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;
|
||||
}
|
||||
|
||||
module.exports.encrypt = (password,uuid) => {
|
||||
module.exports.encrypt = (text,cipher) => {
|
||||
// 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) =>{
|
||||
const en = cryptojs.AES.decrypt(password,uuid);
|
||||
module.exports.decrypt = (text,cipher) =>{
|
||||
const en = cryptojs.AES.decrypt(text,cipher);
|
||||
const de = en.toString(cryptojs.enc.Utf8);
|
||||
// console.log(de + "-dec");
|
||||
return de;
|
||||
|
|
|
|||
3
index.js
3
index.js
|
|
@ -26,7 +26,7 @@ const app = express();
|
|||
// const { mainModule } = require('process');
|
||||
// const { name } = require('ejs');
|
||||
|
||||
const maxRequestBodySize = '50mb';
|
||||
const maxRequestBodySize = '20mb';
|
||||
app.set('view engine', 'ejs');
|
||||
app.use(express.urlencoded({
|
||||
extended: false,
|
||||
|
|
@ -79,7 +79,6 @@ app.post("/get_cr_uuid", (req,res) => {
|
|||
app.post("/save_proj", (req,res) => {
|
||||
let inp = req.body;
|
||||
let cook = req.cookies;
|
||||
// func.log(inp["img"]);
|
||||
func.sid(cook,res,()=>{
|
||||
proj.save(inp,cook,res);
|
||||
})
|
||||
|
|
|
|||
BIN
public/img/shadow-energy.gif
Normal file
BIN
public/img/shadow-energy.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 435 KiB |
|
|
@ -7,11 +7,6 @@ function get_from_uuid(callback){
|
|||
// console.log("good");
|
||||
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 sid = $.cookie("sid");
|
||||
// console.log("log");
|
||||
if($.cookie('uuid') == null && $.cookie('sid') == null){
|
||||
if($.cookie('sid') == null){
|
||||
// get_sid(location.hostname);
|
||||
get_sid();
|
||||
}else if ($.cookie('sid') != null && $.cookie('uuid') != null){
|
||||
$.post( "/sid_log")
|
||||
.done(function( res ) {
|
||||
console.log("ping");
|
||||
if(res["out"] == "good"){
|
||||
goto(res["url"]);
|
||||
}
|
||||
else if (res["out"] == "bad"){
|
||||
clear_ck(false);
|
||||
}
|
||||
})}
|
||||
// else if ($.cookie('sid') != null && $.cookie('uuid') != null){
|
||||
// $.post( "/sid_log")
|
||||
// .done(function( res ) {
|
||||
// console.log("ping");
|
||||
// if(res["out"] == "good"){
|
||||
// goto(res["url"]);
|
||||
// }
|
||||
// else if (res["out"] == "bad"){
|
||||
// clear_ck(false);
|
||||
// }
|
||||
// })}
|
||||
}
|
||||
|
||||
function clear_ck(redirect = true){
|
||||
console.log("sid");
|
||||
$.post( "/clear_sid")
|
||||
.done(function( res ) {
|
||||
console.log("sid");
|
||||
$.cookie("uuid",null);
|
||||
$.cookie("sid",null);
|
||||
let uuid = $.cookie("uuid");
|
||||
let sid = $.cookie("sid");
|
||||
$.removeCookie("uuid");
|
||||
$.removeCookie('sid');
|
||||
console.log("clear");
|
||||
get_sid();
|
||||
console.log("sid");
|
||||
setTimeout(()=>{
|
||||
$.post( "/clear_sid",{uuid:uuid,sid:sid})
|
||||
.done(function( res ) {
|
||||
console.log("sid");
|
||||
if(res["out"] == "good"){
|
||||
// get_sid();
|
||||
if (redirect) goto("/login");
|
||||
}
|
||||
console.log("clear");
|
||||
})
|
||||
},100)
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,7 @@
|
|||
window.dragMoveListener = dragMoveListener;
|
||||
let root = document.getElementById("drags");
|
||||
let objs = { height:"2",width:"4"};
|
||||
|
||||
function get_count(clas){
|
||||
if (objs[clas] == null) objs[clas] = {};
|
||||
let count = Object.keys(objs[clas]).length;
|
||||
return count;
|
||||
}
|
||||
let objs_store = {};
|
||||
|
||||
function create(clas,x,y,body,id,size){
|
||||
let main_clas = clas.split(" ")[0];
|
||||
|
|
@ -18,7 +13,25 @@ function create(clas,x,y,body,id,size){
|
|||
clas.forEach(cl => {
|
||||
obj.classList.add(cl);
|
||||
});
|
||||
load_obj(main_clas,"`img`,`name`,`description`,`width`,`height`",(db_data)=>{
|
||||
get_obj(main_clas,(db_data)=>{
|
||||
if ($.cookie("cache") == "true"){
|
||||
if (localStorage.getItem(`${main_clas}`) == null){
|
||||
load_obj(main_clas,"`img`",(odata)=>{
|
||||
localStorage.setItem(main_clas,odata["img"]);
|
||||
make(odata["img"]);
|
||||
})
|
||||
}
|
||||
else{
|
||||
make(localStorage.getItem(main_clas))
|
||||
}
|
||||
}
|
||||
else{
|
||||
load_obj(main_clas,"`img`",(odata)=>{
|
||||
localStorage.setItem(main_clas,odata["img"]);
|
||||
make(odata["img"]);
|
||||
})
|
||||
}
|
||||
function make(img){
|
||||
if (db_data == null) {
|
||||
delete objs[main_clas][id];
|
||||
save(()=>{
|
||||
|
|
@ -26,7 +39,7 @@ function create(clas,x,y,body,id,size){
|
|||
});
|
||||
}
|
||||
else if (db_data != null){
|
||||
obj.src = db_data["img"];
|
||||
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){
|
||||
|
|
@ -34,12 +47,19 @@ function create(clas,x,y,body,id,size){
|
|||
obj.style.height = `${db_data["height"] * 2}px`;
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
obj.setAttribute("max-width","100px");
|
||||
root.append(obj);
|
||||
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){
|
||||
let wall = document.getElementsByClassName("wall")[0];
|
||||
let scroll;
|
||||
|
|
@ -47,7 +67,7 @@ function wall_size_change(type,value){
|
|||
if (value == null) scroll = document.getElementById("wall_width").value;
|
||||
else scroll = value;
|
||||
// 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);
|
||||
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;
|
||||
else scroll = value;
|
||||
// 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);
|
||||
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"));
|
||||
// console.log(objs);
|
||||
objs = objss;
|
||||
|
|
@ -92,7 +112,9 @@ function load_local(objss){
|
|||
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})
|
||||
.done(function( res ) {
|
||||
if(res["out"] == "good"){
|
||||
|
|
@ -100,7 +122,8 @@ function load_proj(){
|
|||
// console.log(JSON.parse(`'${res["body"]}'`));
|
||||
// console.log(JSON.parse(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"){
|
||||
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){
|
||||
// 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 = "";
|
||||
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);
|
||||
$.post( "/save_proj", {proj:JSON.stringify(objs),name:proj_name,img:scr})
|
||||
.done(function( res ) {
|
||||
|
|
@ -134,11 +173,25 @@ function load_objs(callback){
|
|||
.done(function( res ) {
|
||||
if(res["out"] == "good"){
|
||||
// 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"]);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
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){
|
||||
$.post( "/get_obj",{name:name,key:key})
|
||||
.done(function( res ) {
|
||||
|
|
@ -233,11 +286,11 @@ interact('.createzone').dropzone({
|
|||
var drag = event.relatedTarget;
|
||||
var zone = event.target;
|
||||
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.style.width = `${db_data["width"] * 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 y = zone.getBoundingClientRect().top - document.getElementById("drags").getBoundingClientRect().top;
|
||||
|
|
@ -251,6 +304,10 @@ interact('.createzone').dropzone({
|
|||
})
|
||||
|
||||
function drag_start() {
|
||||
let spawns = document.getElementsByClassName("spawn");
|
||||
Object.entries(spawns).forEach(([key, spawn]) => {
|
||||
spawn.parentElement.removeChild(spawn);
|
||||
});
|
||||
let zones = document.getElementsByClassName("createzone");
|
||||
Object.entries(zones).forEach(([key, zone]) => {
|
||||
let x = zone.getBoundingClientRect().left - document.getElementById("drags").getBoundingClientRect().left;
|
||||
|
|
|
|||
40
user.js
40
user.js
|
|
@ -12,18 +12,27 @@ module.exports.login = (inp,cook,res)=>{
|
|||
}
|
||||
else if (login != null){
|
||||
db.gv("users","login",`'${ilogin}'`,(udata)=>{udata = udata[0];
|
||||
db.ggv("sids","`sid`","uid",udata["id"],(sdata)=>{sdata = sdata[0];
|
||||
// console.log(sdata);
|
||||
if(ipass == udata["pass"]){
|
||||
if (sdata != null){
|
||||
// res.send({out:"logged",sid:sdata["sid"]});
|
||||
// console.log(sdata);
|
||||
db.dl("sids","uid",`'${udata["id"]}'`,() =>{});
|
||||
|
||||
}
|
||||
func.log("good boy "+udata["uuid"]+" logged in by login & pass from "+cook["sid"]);
|
||||
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"});
|
||||
}
|
||||
|
||||
})
|
||||
});
|
||||
}
|
||||
})
|
||||
|
|
@ -83,10 +92,29 @@ module.exports.get_cr = (inp,cook,res)=>{
|
|||
}
|
||||
|
||||
module.exports.clear_sid = (inp,cook,res)=>{
|
||||
if(cook["sid"] != null){
|
||||
if(inp["sid"] != null){
|
||||
// res.send({out:"good"});
|
||||
func.log("good boy"+cook["uuid"] + " logged out from "+cook["sid"]);
|
||||
db.dl("sids","sid",`'${cook["sid"]}'`,() =>{});
|
||||
db.dl("sids","sid",`'${inp["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"});
|
||||
}
|
||||
|
|
@ -94,12 +122,12 @@ module.exports.clear_sid = (inp,cook,res)=>{
|
|||
module.exports.sid_log=(inp,cook,res,req)=>{
|
||||
func.sid(cook,res,(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"});
|
||||
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){
|
||||
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"});
|
||||
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)
|
||||
}
|
||||
|
|
@ -11,13 +11,15 @@
|
|||
/* float: right; */
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
width: 20vw;
|
||||
cursor: pointer;
|
||||
/* width: 20vw; */
|
||||
}
|
||||
#top_panel_left{
|
||||
/* float: left; */
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
width: 20vw;
|
||||
/* width: 20vw; */
|
||||
}
|
||||
#top_panel{
|
||||
height: 20px;
|
||||
|
|
@ -25,59 +27,85 @@
|
|||
/* button{
|
||||
/* margin-inline: 5px; */
|
||||
/* } */
|
||||
#ctxmenu {
|
||||
|
||||
|
||||
.menu_btn{
|
||||
background: ghostwhite;
|
||||
cursor: pointer;
|
||||
border: 1px black dashed;
|
||||
padding: 5px;
|
||||
}
|
||||
.cmenu{
|
||||
position: fixed;
|
||||
display: block;
|
||||
background: ghostwhite;
|
||||
color: black;
|
||||
cursor: pointer;
|
||||
border: 1px black solid
|
||||
}
|
||||
|
||||
#ctxmenu > p {
|
||||
padding: 0 1rem;
|
||||
margin: 0
|
||||
}
|
||||
|
||||
#ctxmenu > p:hover {
|
||||
background: black;
|
||||
color: ghostwhite
|
||||
border: 1px black solid;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<header id="top_panel">
|
||||
<!-- <div id="user_name"></div> -->
|
||||
<div id="proj_top_panel">
|
||||
<div id="top_panel_left"></div>
|
||||
<!-- <div>puzzle</div> -->
|
||||
<div id="top_panel_center"></div>
|
||||
<div id="top_panel_right"></div>
|
||||
</div>
|
||||
<!-- <div><button onclick="logout();">logout</button></div> -->
|
||||
</div> <!-- <div><button onclick="logout();">logout</button></div> -->
|
||||
</header>
|
||||
<div id="user_menu" class="cmenu"></div>
|
||||
|
||||
|
||||
|
||||
<script>get_from_uuid((res)=>{
|
||||
let uname = document.getElementById("user_name");
|
||||
let menu = document.getElementById("user_menu");
|
||||
let header = document.getElementById("top_panel");
|
||||
let right = document.getElementById("top_panel_right");
|
||||
let left = document.getElementById("top_panel_left");
|
||||
|
||||
if(document.title != "main") left.innerHTML += `<button onclick="goto('/');">main page</button>`;
|
||||
left.innerHTML += `<div id="user_name">${res["login"]}</div>`;
|
||||
if(document.title != "main") menu.innerHTML += `<button onclick="goto('/');">main page</button> <br>`;
|
||||
right.innerHTML += `<div id="user_name" class="menu_btn">${res["login"]}</div>`;
|
||||
|
||||
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()
|
||||
// console.log(e);
|
||||
// console.log(e);
|
||||
// console.log(document.getElementById(e.target.id).parentElement);
|
||||
if(e.target.onclick != null){
|
||||
if(document.title == "login"){
|
||||
console.log(document.title);
|
||||
log_by_sid();
|
||||
}else if(document.title != "login"){
|
||||
check_sid(true);
|
||||
console.log("check");
|
||||
}
|
||||
}
|
||||
if(e.target.id == "user_name"){
|
||||
let menu = document.createElement("div")
|
||||
menu.id = "ctxmenu"
|
||||
menu.style = `top:${e.pageY+20}px;left:${e.pageX-40}px`
|
||||
menu.onmouseleave = () => ctxmenu.outerHTML = ''
|
||||
menu.innerHTML = "<p>Option1</p><p>Option2</p><p>Option3</p><p>Option4</p>"
|
||||
document.body.appendChild(menu)
|
||||
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>
|
||||
|
|
@ -10,21 +10,18 @@
|
|||
}
|
||||
</style>
|
||||
|
||||
<form action="" method="post" id="log_form">
|
||||
<div class="login-page">
|
||||
<div class="login-page">
|
||||
<input name="login" type="text" id="login" required>
|
||||
<label for="login">login</label>
|
||||
</div>
|
||||
<div class="pass-page">
|
||||
</div>
|
||||
<div class="pass-page">
|
||||
<input name="pass" type="password" id="pass" value="" required>
|
||||
<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>
|
||||
<!-- <input type="submit" value="" hidden> -->
|
||||
<div id="res"></div>
|
||||
|
||||
</form>
|
||||
<button type="button" id="log_btn" onclick="log(document.getElementById('login').value,document.getElementById('pass').value);">login</button>
|
||||
<!-- <input type="submit" value="" hidden> -->
|
||||
<div id="res"></div>
|
||||
|
||||
<%- include('./static/end.ejs') %>
|
||||
|
||||
|
|
@ -32,9 +29,9 @@
|
|||
// console.log($.cookie("uuid"));
|
||||
// log_by_sid();
|
||||
|
||||
function log(nlogin,npass){
|
||||
const login = CryptoJS.AES.encrypt(nlogin,$.cookie("sid")).toString();
|
||||
const pass = CryptoJS.AES.encrypt(npass,$.cookie("sid")).toString();
|
||||
function log(){
|
||||
const login = CryptoJS.AES.encrypt(document.getElementById('login').value,$.cookie("sid")).toString();
|
||||
const pass = CryptoJS.AES.encrypt(document.getElementById('pass').value,$.cookie("sid")).toString();
|
||||
const sid = $.cookie("sid");
|
||||
$.post( "/back_login", { login:login,pass:pass,sid:sid })
|
||||
.done(function( res ) {
|
||||
|
|
@ -49,6 +46,10 @@
|
|||
// postForm(res["url"], res["args"]);
|
||||
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>`;
|
||||
// }
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -87,6 +87,7 @@
|
|||
margin: auto;
|
||||
padding-block: 20px;
|
||||
padding-bottom: 0px;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.wall{
|
||||
|
|
@ -115,12 +116,8 @@
|
|||
<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>
|
||||
<section class="main">
|
||||
<div id="proj_top">
|
||||
<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 id="project_menu" class="cmenu"></div>
|
||||
|
||||
|
||||
<!-- <div class="dropzone"></div> -->
|
||||
|
|
@ -139,7 +136,7 @@
|
|||
<label for="wall_width">width</label>
|
||||
<div id="wall_width_value">0</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 class="czones">
|
||||
|
|
@ -154,33 +151,34 @@
|
|||
<div class="buble createzone"></div>
|
||||
<div class="buble createzone"></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 class="wall dropzone" id="wall"></div>
|
||||
|
||||
<script src="/lib/inter.js"></script>
|
||||
<%- include('./static/end.ejs') %>
|
||||
<script>
|
||||
function scree(){
|
||||
|
||||
|
||||
html2canvas(document.querySelector("body"),{height: 1000,y:100}).then(canvas => {
|
||||
let scr = canvas.toDataURL();
|
||||
let img = document.createElement("img");
|
||||
img.src = scr;
|
||||
document.body.append(img);
|
||||
// return canvas;
|
||||
// console.log(scr)
|
||||
});
|
||||
|
||||
|
||||
|
||||
// html2canvas(document.querySelector("#drags")).then(canvas => {
|
||||
// document.body.appendChild(canvas)
|
||||
// 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 => {
|
||||
// console.log(canvas.toDataURL().length);
|
||||
// let scr = canvas.toDataURL();
|
||||
// let img = document.createElement("img");
|
||||
// img.src = scr;
|
||||
// document.body.append(img);
|
||||
// // return canvas;
|
||||
// // console.log(scr)
|
||||
// });
|
||||
|
||||
|
||||
}
|
||||
|
||||
// // html2canvas(document.querySelector("#drags")).then(canvas => {
|
||||
// // document.body.appendChild(canvas)
|
||||
// // });
|
||||
|
||||
|
||||
// }
|
||||
load_objs((data)=>{
|
||||
data.forEach(value => {
|
||||
// console.log(value);
|
||||
|
|
@ -190,13 +188,53 @@
|
|||
czone.classList.add("createzone");
|
||||
czones.append(czone)
|
||||
});
|
||||
load_proj();
|
||||
load_proj_cloud();
|
||||
})
|
||||
</script>
|
||||
<script>
|
||||
let proj_name = "<%= proj_name %>";
|
||||
if($.cookie("cache") ==null)$.cookie("cache","true",{path:"/proj;SameSite=Strict"});
|
||||
// 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();
|
||||
// console.log(px_ratio);
|
||||
$(window).resize(function(){isZooming();});
|
||||
|
||||
function isZooming(){
|
||||
resize_drags();
|
||||
}
|
||||
</script>
|
||||
<%- include('./static/end.ejs') %>
|
||||
|
|
@ -1,12 +1,17 @@
|
|||
<div class="scale_block">
|
||||
<div>
|
||||
oh no html breaking! <br>
|
||||
please don't use custom scale for this window
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<script>
|
||||
function hide_menus(){
|
||||
let menus = document.getElementsByClassName("cmenu");
|
||||
Object.entries(menus).forEach(([key,menu]) => {
|
||||
menu.style.display = "none";
|
||||
});
|
||||
}
|
||||
hide_menus();
|
||||
oncontextmenu = (e) => {
|
||||
e.preventDefault()
|
||||
}
|
||||
$(window).focus(function(){
|
||||
if(document.title == "login"){
|
||||
console.log(document.title);
|
||||
log_by_sid();
|
||||
|
|
@ -14,35 +19,5 @@
|
|||
check_sid(true);
|
||||
console.log("check");
|
||||
}
|
||||
</script>
|
||||
<script>
|
||||
px_ratio = window.devicePixelRatio || window.screen.availWidth / document.documentElement.clientWidth;
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,10 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<script src="/lib/fn.js"></script>
|
||||
<!-- <script src="/lib/interact.min.js"></script> -->
|
||||
<script src="/lib/jquery.js"></script>
|
||||
<script src="/lib/jquery.cookie.js"></script>
|
||||
<script src="/lib/fn.js"></script>
|
||||
<script src="/lib/ejs.js"></script>
|
||||
<script src="/lib/aes.js"></script>
|
||||
<meta charset="UTF-8">
|
||||
|
|
@ -19,29 +19,15 @@
|
|||
html{
|
||||
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>
|
||||
<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>
|
||||
<body>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user