228 lines
7.9 KiB
Plaintext
228 lines
7.9 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',{async: true}) %>
|
|
<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"><%= lang("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"><%= lang("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>
|
|
<img class="trash" style="height: 100px; width: 100px;" src="/img/shadow-energy.gif" alt="<%= lang('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"><%= lang("project settings") %></div>`;
|
|
menu.innerHTML += "<button id='proj_csave_btn' onclick='save_proj()'><%= lang(`save to cloud`) %></button> <br>";
|
|
menu.innerHTML += "<button id='proj_cload_btn' onclick='load_proj_cloud()'><%=lang('load from cloud')%></button> <br>";
|
|
menu.innerHTML += "<button id='proj_lsave_btn' onclick='save_proj_local()'><%=lang('save to local') %></button> <br>";
|
|
menu.innerHTML += "<button id='proj_lload_btn' onclick='load_proj_local()'><%=lang('load from local')%></button> <br>";
|
|
if ($.cookie("cache") == "false") menu.innerHTML += "<div id='cache_switch' title='<%=lang('cache_title')%>'><button onclick='cache_change(true);'><%=lang('cache_off')%></button></div>";
|
|
else if ($.cookie("cache") == "true") menu.innerHTML += "<div id='cache_switch' title='<%=lang('cache_title')%>'><button onclick='cache_change(false);'><%=lang('cache_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='<%=lang('cache_title')%>'><%=lang('cache_on')%></button></div>";$.cookie("cache","true",{path:"/proj;SameSite=Strict"});}
|
|
else if(!to) {cache_switch.innerHTML = "<button onclick='cache_change(true);' title='<%=lang('cache_title')%>'><%=lang('cache_off')%></button></div>";$.cookie("cache","false",{path:"/proj;SameSite=Strict"});}
|
|
}
|
|
function save_proj(type){
|
|
document.getElementById('top_panel_center').innerHTML=` <%=lang("saving")%> ${proj_name}`;
|
|
save((res)=>{
|
|
document.getElementById('top_panel_center').innerHTML=`<%=lang("saved")%> ${proj_name} <%=lang("to cloud")%>`;
|
|
setTimeout((res)=>{
|
|
document.getElementById("top_panel_center").innerText = `${proj_name} (<%=lang("cloud")%>)`;
|
|
|
|
},3000)
|
|
})
|
|
}
|
|
|
|
function save_proj_local(type){
|
|
document.getElementById('top_panel_center').innerHTML=` <%=lang("saving")%> ${proj_name}`;
|
|
save_local();
|
|
document.getElementById('top_panel_center').innerHTML=`<%=lang("saved")%> ${proj_name} <%=lang("to local")%>`;
|
|
setTimeout((res)=>{
|
|
document.getElementById("top_panel_center").innerText = `${proj_name} (<%=lang("local")%>)`;
|
|
},3000)
|
|
}
|
|
|
|
// drag_start();
|
|
// console.log(px_ratio);
|
|
$(window).resize(function(){isZooming();});
|
|
|
|
function isZooming(){
|
|
resize_drags();
|
|
}
|
|
</script> |