N0rdye
1f5085490f
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
240 lines
8.3 KiB
Plaintext
240 lines
8.3 KiB
Plaintext
<style>
|
|
.drag{
|
|
height: 50px;
|
|
width: 50px;
|
|
position: absolute;
|
|
text-align: center;
|
|
margin: auto;
|
|
z-index: 10;
|
|
}
|
|
|
|
#drags{
|
|
position: absolute;
|
|
margin: auto;
|
|
}
|
|
|
|
.dropzone {
|
|
background-color: #bfe4ff;
|
|
border: dashed 4px transparent;
|
|
border-radius: 4px;
|
|
height: 140px;
|
|
margin: 10px auto 30px;
|
|
/* padding: 10px; */
|
|
width: 80%;
|
|
transition: background-color 0.3s;
|
|
position: absolute;
|
|
inset: 0px;
|
|
margin: 250px auto;
|
|
}
|
|
.createzone {
|
|
background-color: #bfe4ff;
|
|
border: dashed 4px transparent;
|
|
border-radius: 4px;
|
|
height: 22px;
|
|
width: 22px;
|
|
margin: 10px;
|
|
padding: 10px;
|
|
transition: background-color 0.3s;
|
|
}
|
|
|
|
.trash {
|
|
background-color: #bfe4ff;
|
|
border: dashed 4px transparent;
|
|
border-radius: 4px;
|
|
margin: 10px auto 30px;
|
|
/* padding: 10px; */
|
|
height: 50px;
|
|
width: 50px;
|
|
transition: background-color 0.3s;
|
|
text-align: center;
|
|
/* z-index: -1; */
|
|
}
|
|
.czones{
|
|
display: flex;
|
|
margin: auto;
|
|
/* justify-content: space-around; */
|
|
flex-wrap: wrap;
|
|
width: 80%;
|
|
height: 100px;
|
|
/* overflow-x: auto; */
|
|
}
|
|
|
|
.drop-active {
|
|
border-color: #aaa;
|
|
}
|
|
|
|
.drop-target {
|
|
background-color: #29e;
|
|
border-color: #fff;
|
|
border-style: solid;
|
|
}
|
|
|
|
#proj_top{
|
|
margin: auto;
|
|
width: 90%;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
}
|
|
#proj_name{
|
|
background-color: #aaa;
|
|
border: 0px;
|
|
text-align: center;
|
|
}
|
|
|
|
.inputs{
|
|
display: flex;
|
|
width: 80vw;
|
|
margin: auto;
|
|
padding-block: 20px;
|
|
padding-bottom: 0px;
|
|
margin-top: 50px;
|
|
}
|
|
|
|
.wall{
|
|
/* display: flex; */
|
|
/* position: relative; */
|
|
/* margin: 60px auto; */
|
|
width: 400px;
|
|
height: 200px;
|
|
background-color: #fff;
|
|
background-image: url("/img/bg1red.png");
|
|
background-size: 200px;
|
|
background-repeat: repeat;
|
|
background-position: bottom 0px left 0px;
|
|
border: 2px solid black;
|
|
/* overflow: visible; */
|
|
z-index: 2;
|
|
}
|
|
</style>
|
|
|
|
<%- include('./static/start.ejs',{name:proj_name,async: true}) %>
|
|
<%- include('./header.ejs') %>
|
|
<script src="/lib/interact.js"></script>
|
|
<script src="/lib/html2canvas.js"></script>
|
|
|
|
|
|
<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>
|
|
|
|
<div id="project_menu" class="cmenu"></div>
|
|
|
|
|
|
<!-- <div class="dropzone"></div> -->
|
|
|
|
<div class="inputs">
|
|
<div id="wall_input">
|
|
<div>
|
|
<div style="display: flex;width: 150px;justify-content: space-between;">
|
|
<label for="wall_height">height </label>
|
|
<div id="wall_height_value">0</div>
|
|
</div>
|
|
<input type="range" step="0.1" min="0" max="5" id="wall_height" value="2" oninput="wall_size_change('height')">
|
|
</div>
|
|
<div>
|
|
<div style="display: flex;width: 150px;justify-content: space-between;">
|
|
<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')" onchange="resize_drags()">
|
|
</div>
|
|
</div>
|
|
<div class="czones">
|
|
<!-- <div class="cube createzone"></div>
|
|
<div class="buble createzone"></div>
|
|
<div class="buble createzone"></div>
|
|
<div class="buble createzone"></div>
|
|
<div class="buble createzone"></div>
|
|
<div class="buble createzone"></div>
|
|
<div class="buble createzone"></div>
|
|
<div class="buble createzone"></div>
|
|
<div class="buble createzone"></div>
|
|
<div class="buble createzone"></div> -->
|
|
</div>
|
|
<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(){
|
|
// // 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);
|
|
let czones = document.getElementsByClassName("czones")[0];
|
|
let czone = document.createElement('div');
|
|
czone.classList.add(value["name"]);
|
|
czone.classList.add("createzone");
|
|
czones.append(czone)
|
|
});
|
|
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);
|
|
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> |