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
2023-07-04 04:11:17 +05:00
parent 204318ef88
commit 1f5085490f
12 changed files with 365 additions and 253 deletions
--- a/views/header.ejs
+++ b/views/header.ejs
@ -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 {
-    position: fixed;
-    background: ghostwhite;
-    color: black;
-    cursor: pointer;
-    border: 1px black solid
-    }

-    #ctxmenu > p {
-    padding: 0 1rem;
-    margin: 0
-    }

-    #ctxmenu > p:hover {
-    background: black;
-    color: ghostwhite
+    .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;
    }
 </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) => {
-  e.preventDefault()
-//   console.log(e);
-  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)
-  }
+onclick = (e) => {
+    e.preventDefault()
+    //   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"){
+        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>
--- a/views/login.ejs
+++ b/views/login.ejs
@ -10,21 +10,18 @@
    }
 </style>

-<form action="" method="post" id="log_form">
-    <div class="login-page">
-        <input name="login" type="text" id="login" required>
-        <label for="login">login</label>
-    </div>
-    <div class="pass-page">
-        <input name="pass" type="password" id="pass" value="" required>
-        <label for="pass">password</label>
-    </div>
+<div class="login-page">
+    <input name="login" type="text" id="login" required>
+    <label for="login">login</label>
+</div>
+<div class="pass-page">
+    <input name="pass" type="password" id="pass" value="" required>
+    <label for="pass">password</label>
+</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>`;
+                // }
            }
        });
    }
--- a/views/project.ejs
+++ b/views/project.ejs
@ -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)
-        });
+    // 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)
-        // });
+    //     // 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();
-</script>
-<%- include('./static/end.ejs') %>
+    // console.log(px_ratio);
+    $(window).resize(function(){isZooming();});
+
+    function isZooming(){
+        resize_drags();
+    }
+</script>
--- a/views/static/end.ejs
+++ b/views/static/end.ejs
@ -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>
 </html>
 <script>
-    if(document.title == "login"){
-        console.log(document.title);
-        log_by_sid();
-    }else if(document.title != "login"){
-        check_sid(true);
-        console.log("check");
+    function hide_menus(){
+        let menus = document.getElementsByClassName("cmenu");
+        Object.entries(menus).forEach(([key,menu]) => {
+            menu.style.display = "none";
+        });
    }
-</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;
-        }
+    hide_menus();
+    oncontextmenu = (e) => {
+            e.preventDefault()
    }
+    $(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>
--- a/views/static/start.ejs
+++ b/views/static/start.ejs
@ -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>