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

added object creation

Browse Source
This commit is contained in:
N0rdye 2023-06-30 21:27:47 +05:00
parent c81c42df77
commit 1575a2ede2
5 changed files with 223 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
index.js
View File

@ -214,12 +214,13 @@ app.post("/save_proj", (req,res) => {
// 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}'`);
res.send({out:"good"});
} else if (projin != null){
db.sv("projects","body",proj,"id",projin["id"],()=>{});
console.log(`${udata["uuid"]} saved project ${projin["name"]} from ${cook["sid"]}`);
// console.log("proj in");
res.send({out:"good"});
}
res.send({out:"good"});
})
})
})
@ -270,6 +271,42 @@ app.post("/get_projs", (req,res) => {
app.post("/new_obj", (req,res) => {
let inp = req.body;
let cook = req.cookies;
if(cook['sid'] != null && cook['uuid'] != null){
// console.log(inp["name"],inp["img"]);
db.cv("objects","name",inp["name"],(include)=>{
if(include){
res.send({out:"bad",err:"name"});
}
else if (!include){
db.nr("objects","`name`,`img`,`height`,`width`,`description`",`'${inp["name"]}','${inp["img"]}','1','1','desc'`);
res.send({out:"good"});
}
})
}
})
app.post("/get_objs", (req,res) => {
let inp = req.body;
let cook = req.cookies;
// console.log(inp["name"]);
if(cook['sid'] != null && cook['uuid'] != null){
db.gv("objects","gid",0,(odata)=>{
// console.log(odata);
res.send({out:"good",body:odata});
})
}
})
app.post("/get_obj", (req,res) => {
let inp = req.body;
let cook = req.cookies;
// console.log(inp["name"]);
if(cook['sid'] != null && cook['uuid'] != null){
db.gv("objects","name",`'${inp["name"]}'`,(odata)=>{
// console.log(odata);
res.send({out:"good",body:odata[0]});
})
}
})
// app.post("/set_cr_uuid", (req,res) => {

39
public/lib/fn.js
View File

@ -122,27 +122,14 @@ function ask() {
}
}
function wall_size_change(type){
let wall = document.getElementsByClassName("wall")[0];
let scroll;
if(type != null && type == "x") {
scroll = document.getElementById("wall_x");
wall.style.width = `${scroll.value * 200}px`;
}
if(type != null && type == "y") {
scroll = document.getElementById("wall_y");
wall.style.height = `${scroll.value * 200}px`;
}
}
function goto_proj(name){
$.post( "/proj/"+name, { name:hostname })
.done(function( res ) {
// if(res["out"] == "good"){
// console.log(res["body"]);
// }
});
}
// function goto_proj(name){
// $.post( "/proj/"+name, { name:hostname })
// .done(function( res ) {
// // if(res["out"] == "good"){
// // console.log(res["body"]);
// // }
// });
// }
function get_sid(hostname){
$.post( "/get_sid", { name:hostname })
@ -153,8 +140,14 @@ function get_sid(hostname){
});
}
function new_obj(){
function new_obj(name,img,height,width,description,callback){
$.post( "/new_obj", { name:name,img:img })
.done(function( res ) {
// if(res["out"] == "good"){
// console.log(res["body"]);
// }
callback(res);
});
}
function load_projs(callback){

125
public/lib/inter.js
View File

@ -1,6 +1,6 @@
window.dragMoveListener = dragMoveListener;
let root = document.getElementById("drags");
let objs = {};
let objs = { height:"2",width:"4"};
function get_count(clas){
if (objs[clas] == null) objs[clas] = {};
@ -9,22 +9,65 @@ function get_count(clas){
}
function create(clas,x,y,body,id){
// console.log(clas,x,y,body,parent);
// console.log(id);
if (body == null || body == "") body = "[]";
// root.innerHTML += "<div class='"+clas+" drag' id="+obj+">"+body+"</div>";
let obj = document.createElement("div");
obj.id = id;
clas= clas.split(" ");
clas.forEach(cl => {
obj.classList.add(cl);
});
obj.innerHTML = body;
// parent.append(obj);
root.append(obj);
set_pos(obj,x,y);
// let obj_doc = document.getElementById(obj);
// console.log(obj_doc.classList);
let main_clas = clas.split(" ")[0];
// if (body == null || body == "") body = "[]";
try{
load_obj(main_clas,(db_data)=>{
// let data = db_data;
// body = data["img"];
// console.log(data["img"].toString());
// console.log(db_data[0]);
// console.log(clas,x,y,body,parent);
// console.log(id);
// root.innerHTML += "<div class='"+clas+" drag' id="+obj+">"+body+"</div>";
// let img = document.createElement("img");
let obj = document.createElement("img");
obj.id = id;
clas= clas.split(" ");
clas.forEach(cl => {
obj.classList.add(cl);
});
if (db_data == null) {
delete objs[main_clas][id];
save(()=>{
goto("/proj/"+proj_name);
});
}
else{
obj.src = db_data["img"];
obj.title = `${db_data["name"]} \n ${db_data["description"]}`;
}
obj.innerHTML = body;
// parent.append(obj);
root.append(obj);
set_pos(obj,x,y);
// let obj_doc = document.getElementById(obj);
// console.log(obj_doc.classList);
})
}catch{}
}
function wall_size_change(type,value){
let wall = document.getElementsByClassName("wall")[0];
let scroll;
if(type != null && type == "width") {
if (value == null) scroll = document.getElementById("wall_width").value;
else scroll = value;
document.getElementById("wall_width_value").innerHTML = scroll;
// console.log(scroll);
wall.style.width = `${scroll * 200}px`;
objs["width"] = scroll;
}
if(type != null && type == "height") {
if (value == null) scroll = document.getElementById("wall_height").value;
else scroll = value;
document.getElementById("wall_height_value").innerHTML = scroll;
// console.log(scroll);
wall.style.height = `${scroll * 200}px`;
objs["height"] = scroll;
}
}
function load_local(objss){
@ -33,15 +76,21 @@ function load_local(objss){
objs = objss;
Object.entries(objs).forEach(([keys, values]) => {
// console.log(keys,values);
Object.entries(values).forEach(([key, value]) => {
if(key != "class"){
// console.log(key,keys);
// console.log(keys,value["x"],value["y"],value["body"]);
// let count = Object.keys(objs[keys]).length;
// console.log(count);
create(keys+" drag",value["x"],value["y"],value["body"],key);
}
})
if (keys != "width" && keys != "height"){
Object.entries(values).forEach(([key, value]) => {
if(key != "class"){
// console.log(key,keys);
// console.log(keys,value["x"],value["y"],value["body"]);
// let count = Object.keys(objs[keys]).length;
// console.log(count);
create(keys+" drag",value["x"],value["y"],value["body"],key);
}
})
}
else {
document.getElementById(`wall_${keys}`).value = values;
wall_size_change(keys,values);
}
});
}
@ -76,6 +125,26 @@ function save(callback){
})
}
function load_objs(callback){
$.post( "/get_objs")
.done(function( res ) {
if(res["out"] == "good"){
// console.log(res["body"]);
callback(res["body"]);
}
});
}
function load_obj(name,callback){
$.post( "/get_obj",{name:name})
.done(function( res ) {
if(res["out"] == "good"){
// console.log(res["body"]);
callback(res["body"]);
}
});
}
function set_pos(obj,x,y){
obj.style.transform = 'translate(' + x + 'px, ' + y + 'px)';
obj.setAttribute('data-x', x)
@ -156,7 +225,7 @@ interact('.createzone').dropzone({
zone.classList.remove('drop-target');
drag.classList.remove('spawn');
let x = zone.getBoundingClientRect().left + window.scrollX - 15;
let y = zone.getBoundingClientRect().top + window.scrollY - 20;
let y = zone.getBoundingClientRect().top + window.scrollY - 30;
create(`${zone.classList[0]} drag spawn`,x,y,`${zone.classList[0]}`,`none`);
},
ondrop: function (event) {var drag = event.relatedTargetdrag.classList.remove('in_zone');drag.classList.remove('can-drop');},
@ -167,7 +236,7 @@ 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 - 20;
let y = zone.getBoundingClientRect().top - 30;
// console.log(x,y);
create(`${zone.classList[0]} drag spawn`,x,y,`${zone.classList[0]}`,`none`);
});

67
views/admin.ejs
View File

@ -13,13 +13,14 @@
<h1>hello admin</h1>
<div class="nobj">
<div class="img_preview">
<input type="file" onchange="previewFile()" value=""><br>
<input type="file" onchange="previewFile()" value="" maxlength="1"><br>
<img src="" height="100" alt="Image preview...">
</div>
<textarea name="" id="nobj_description" cols="30" rows="5" placeholder="object description"></textarea>
<div class="nobj_options">
<input type="text" id="nobj_name" placeholder="object name">
<button >create object</button>
<button onclick="create_obj()">create object</button>
<div id="obj_resp"></div>
</div>
</div>
</section>
@ -40,26 +41,50 @@
}
}
async function img(){
var preview = document.querySelector('img').src;
console.log(preview);
fetch(preview)
.then(res => res.blob())
.then(blob => {
let dataUrl = blobToDataUrl(blob);
console.log(blob)
console.log(dataUrl)
})
}
function blobToDataUrl(blob) {
let reader = new FileReader()
reader.readAsDataURL(blob)
reader.onload = function(){
dataUrl = reader.result
console.log(dataUrl) //DataURL
return dataUrl;
}
// async function toblob(callback){
// var preview = document.querySelector('img').src;
// // console.log(preview);
// fetch(preview)
// .then(res => res.blob())
// .then(blob => {
// // let dataUrl = blobToDataUrl(blob);
// console.log(blob)
// callback(blob);
// // console.log(dataUrl)
// })
// }
function create_obj(){
let name = document.getElementById("nobj_name").value;
let description = document.getElementById("nobj_description").value;
var img = document.querySelector('img').src;
new_obj(name,img,0,0,description,(res)=>{
if(res["out"] == "bad" && res["err"] == "name"){
document.getElementById("obj_resp").innerHTML = "object already exist";
}
else if(res["out"] == "good"){
document.getElementById("obj_resp").innerHTML = "object created";
}
});
}
// load_obj("asd",(data)=>{
// console.log(data);
// // let dataUrl = blobToDataUrl(data["img"]);
// // console.log(data["img"]["data"].getBlob());
// console.
// // document.querySelector('img').src = data["img"];
// })
// function blobToDataUrl(blob) {
// let reader = new FileReader()
// reader.readAsDataURL(blob)
// reader.onload = function(){
// dataUrl = reader.result
// // console.log(dataUrl) //DataURL
// return dataUrl;
// }
// }
</script>
<!-- <iframe src="/reg" frameborder="0"></iframe> -->
<%- include('./reg.ejs') %>

34
views/project.ejs
View File

@ -42,6 +42,7 @@
height: 50px;
width: 50px;
transition: background-color 0.3s;
text-align: center;
/* z-index: -1; */
}
.czones{
@ -118,11 +119,9 @@
<!-- <div class="dropzone"></div> -->
<div class="inputs">
<div class="czones">
<div class="cube createzone"></div>
<div class="buble createzone"></div>
<!-- <div class="cube createzone"></div>
<div class="buble createzone"></div>
<div class="buble createzone"></div>
<div class="buble createzone"></div>
@ -131,24 +130,43 @@
<div class="buble createzone"></div>
<div class="buble createzone"></div>
<div class="buble createzone"></div>
<div class="buble createzone"></div> -->
</div>
<div class="trash"></div>
<div class="trash">trash bin</div>
</div>
<div id="wall_input">
<div>
<label for="wall_y">height</label> <br>
<input type="range" step="0.1" min="0" max="4" id="wall_y" oninput="wall_size_change('y')"> <br>
<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>
<label for="wall_x">width</label> <br>
<input type="range" step="0.1" min="2" max="7" id="wall_x" oninput="wall_size_change('x')"> <br>
<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>
<script src="/lib/inter.js"></script>
<script>
load_objs((data)=>{
data.forEach(value => {
// console.log(value);
let czones = document.getElementsByClassName("czones")[0];
let czone = document.createElement('img');
czone.classList.add(value["name"]);
czone.classList.add("createzone");
czones.append(czone)
});
})
</script>
<script>
let proj_name = "<%= proj_name %>";
// console.log(proj_name);