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

added image preview of project

Browse Source
This commit is contained in:
N0rdye 2023-07-01 01:06:28 +05:00
parent 1575a2ede2
commit c6a86f8084
6 changed files with 7895 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.js
View File

@ -199,6 +199,7 @@ app.post("/save_proj", (req,res) => {
let cook = req.cookies;
let proj = inp["proj"];
let pname = inp["name"];
// console.log(inp["img"]);
db.gv("users","uuid",`'${cook["uuid"]}'`, (udata)=>{ udata = udata[0]
db.gv("projects","uid",udata["id"],(pdata)=>{
let projin = null;
@ -213,10 +214,11 @@ app.post("/save_proj", (req,res) => {
// console.log("proj not in");
// console.log(pname,udata["id"],proj);
console.log(`${udata["uuid"]} created project ${pname} from ${cook["sid"]}`);
db.nr("projects","`uid`,`name`,`body`",`'${udata["id"]}','${pname}','${proj}'`);
db.nr("projects","`uid`,`name`,`body`,`img`",`'${udata["id"]}','${pname}','${proj}','${inp["img"]}'`);
res.send({out:"good"});
} else if (projin != null){
db.sv("projects","body",proj,"id",projin["id"],()=>{});
if(inp["img"] != "") db.sv("projects","img",inp["img"],"id",projin["id"],()=>{});
console.log(`${udata["uuid"]} saved project ${projin["name"]} from ${cook["sid"]}`);
// console.log("proj in");
res.send({out:"good"});

7830
public/lib/html2canvas.js Normal file
View File

File diff suppressed because one or more lines are too long

15
public/lib/inter.js
View File

@ -37,7 +37,7 @@ function create(clas,x,y,body,id){
obj.src = db_data["img"];
obj.title = `${db_data["name"]} \n ${db_data["description"]}`;
}
obj.innerHTML = body;
// obj.innerHTML = body;
// parent.append(obj);
root.append(obj);
set_pos(obj,x,y);
@ -116,13 +116,20 @@ function load_proj(){
function save(callback){
// console.log(objs);
$.post( "/save_proj", {proj:JSON.stringify(objs),name:proj_name})
html2canvas(document.querySelector("body"),{height: 500, width:(window.innerWidth /1.65),x:(window.innerWidth / 5), y:250}).then(canvas => {
let scr = "";
console.log(canvas.toDataURL().length);
if (canvas.toDataURL().length < 80000) scr = canvas.toDataURL()
// console.log(scr);
$.post( "/save_proj", {proj:JSON.stringify(objs),name:proj_name,img:scr})
.done(function( res ) {
if(res["out"] == "good"){
// console.log(scr)
console.log("good");
if(callback) callback(res);
}
})
});
}
function load_objs(callback){
@ -235,8 +242,8 @@ interact('.createzone').dropzone({
function drag_start() {
let zones = document.getElementsByClassName("createzone");
Object.entries(zones).forEach(([key, zone]) => {
let x = zone.getBoundingClientRect().left - 15;
let y = zone.getBoundingClientRect().top - 30;
let x = zone.getBoundingClientRect().left - scrollX - 15;
let y = zone.getBoundingClientRect().top - scrollY - 30;
// console.log(x,y);
create(`${zone.classList[0]} drag spawn`,x,y,`${zone.classList[0]}`,`none`);
});

4
views/main.ejs
View File

@ -45,8 +45,8 @@
<!-- <script src="/lib/interact.min.js"></script> -->
<section class="main">
<div id="projs_div"></div>
<button onclick="new_proj()">new project</button>
<div id="projs_div"></div>
</section>
<script>
@ -58,7 +58,7 @@
projs.forEach(proj => {
// console.log(proj);
let div = document.getElementById("projs_div");
div.innerHTML += `<button id='proj_${proj["name"]}' class='proj' onclick="goto('/proj/${proj["name"]}')">${proj["name"]}</button>`;
div.innerHTML += `<button id='proj_${proj["name"]}' class='proj' onclick="goto('/proj/${proj["name"]}')"><img height="200" width="300" src='${proj["img"]}' alt='${proj["name"]}'></img> <br>${proj["name"]}</button>`;
});
});
</script>

60
views/project.ejs
View File

@ -20,7 +20,7 @@
}
body {
height: 100%;
overflow-y: hidden;
overflow-y: visible;
}
.createzone {
background-color: #bfe4ff;
@ -104,6 +104,7 @@
<%- include('./static/start.ejs',{name:proj_name,async: true}) %>
<%- include('./header.ejs') %>
<script src="/lib/interact.min.js"></script>
<script src="/lib/html2canvas.js"></script>
<div id="drags">
@ -111,7 +112,7 @@
</div>
<section class="main">
<div id="proj_top">
<button onclick="save()">save</button>
<button id="proj_save_btn" onclick="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>
@ -120,6 +121,22 @@
<!-- <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.9" max="4" 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="1.9" max="7" id="wall_width" value="4" oninput="wall_size_change('width')">
</div>
</div>
<div class="czones">
<!-- <div class="cube createzone"></div>
<div class="buble createzone"></div>
@ -135,27 +152,30 @@
<div class="trash">trash bin</div>
</div>
<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.9" max="4" 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="1.9" max="7" id="wall_width" value="4" oninput="wall_size_change('width')">
</div>
</div>
<div class="wall dropzone"></div>
<div class="wall dropzone" id="wall"></div>
<script src="/lib/inter.js"></script>
<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)
// });
}
load_objs((data)=>{
data.forEach(value => {
// console.log(value);

3
views/static/start.ejs
View File

@ -17,6 +17,9 @@
margin: auto;
padding-block: 20px;
}
body{
background-color:aliceblue;
}
</style>
</head>
<body>