fixes
This commit is contained in:
11
views/header.ejs
Normal file
11
views/header.ejs
Normal file
@ -0,0 +1,11 @@
|
||||
<style>
|
||||
header{
|
||||
display: flex;
|
||||
/* width: 90%; */
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
</style>
|
||||
<header>
|
||||
<div>puzzle</div>
|
||||
<div><button onclick="logout();">logout</button></div>
|
||||
</header>
|
212
views/main.ejs
212
views/main.ejs
@ -1,159 +1,65 @@
|
||||
<style>
|
||||
.drag{
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.drop-active {
|
||||
border-color: #aaa;
|
||||
}
|
||||
|
||||
.drop-target {
|
||||
background-color: #29e;
|
||||
border-color: #fff;
|
||||
border-style: solid;
|
||||
}
|
||||
</style>
|
||||
|
||||
<%- include('./static/start.ejs',{name:'main',async: true}) %>
|
||||
<h1>none</h1>
|
||||
<h1>hello</h1>
|
||||
|
||||
<style>
|
||||
.drag{
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.drop-active {
|
||||
border-color: #aaa;
|
||||
}
|
||||
|
||||
.drop-target {
|
||||
background-color: #29e;
|
||||
border-color: #fff;
|
||||
border-style: solid;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="drags"></div>
|
||||
|
||||
<div class="dropzone"></div>
|
||||
<div class="trash"></div>
|
||||
|
||||
<button onclick="add('cube')">add</button>
|
||||
<button onclick="save()">save</button>
|
||||
|
||||
<script>
|
||||
window.dragMoveListener = dragMoveListener
|
||||
let root = document.getElementById("drags");
|
||||
var objs = {};
|
||||
if ($.cookie("objs") != null){
|
||||
load_local();
|
||||
}
|
||||
|
||||
|
||||
function add(obj){
|
||||
if (objs[obj] == null) objs[obj] = {};
|
||||
if ((objs[obj]["count"] == null)){(objs[obj]["count"] = 0)}
|
||||
let count = Object.keys(objs[obj]).length -1;
|
||||
// console.log(obj,objs[obj+"_count"],objs[obj+"_s"]);
|
||||
root.innerHTML += "<div class='"+obj+" drag' id="+obj+"_"+count+">"+obj+"</div>";
|
||||
objs[obj][obj+"_"+count] = {};
|
||||
objs[obj]["count"]+=1;
|
||||
console.log(objs);
|
||||
}
|
||||
|
||||
function create(clas,obj,x,y,inside){
|
||||
if (inside == null || inside == "") inside = "[]";
|
||||
root.innerHTML += "<div class='"+clas+" drag' id="+obj+">"+inside+"</div>";
|
||||
let obj_doc = document.getElementById(obj);
|
||||
set_pos(obj_doc,x,y);
|
||||
}
|
||||
|
||||
function load_local(){
|
||||
objs = JSON.parse($.cookie("objs"));
|
||||
// console.log(objs);
|
||||
Object.entries(objs).forEach(([keys, values]) => {
|
||||
// console.log(keys,values);
|
||||
Object.entries(values).forEach(([key, value]) => {
|
||||
if(key != "count"){
|
||||
// console.log(key,value);
|
||||
create(keys,key,value["x"],value["y"],value["body"]);
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
function save(){
|
||||
$.cookie("objs",JSON.stringify(objs));
|
||||
}
|
||||
|
||||
function set_pos(obj,x,y){
|
||||
obj.style.transform = 'translate(' + x + 'px, ' + y + 'px)';
|
||||
obj.setAttribute('data-x', x)
|
||||
obj.setAttribute('data-y', y)
|
||||
}
|
||||
|
||||
function dragMoveListener (event) {
|
||||
var drag = event.target
|
||||
var x = (parseFloat(drag.getAttribute('data-x')) || 0) + event.dx
|
||||
var y = (parseFloat(drag.getAttribute('data-y')) || 0) + event.dy
|
||||
set_pos(drag,x,y);
|
||||
}
|
||||
|
||||
interact('.drag').draggable({
|
||||
inertia: true,
|
||||
// modifiers: [
|
||||
// interact.modifiers.restrictRect({restriction: 'parent',endOnly: true}),
|
||||
// interact.modifiers.snap({targets: [interact.snappers.grid({ x: 5, y: 5 })],range: Infinity,relativePoints: [ { x: 0, y: 0 } ]}),],
|
||||
// autoScroll: true,
|
||||
listeners: {move: dragMoveListener, end (event) {}}
|
||||
})
|
||||
|
||||
interact('.trash').dropzone({
|
||||
accept: '.drag',
|
||||
overlap: 0.2,
|
||||
|
||||
ondragenter: function (event) {var drag = event.relatedTarget;var zone = event.target; zone.classList.add('drop-target');drag.classList.add('can-drop');},
|
||||
ondragleave: function (event) {var drag = event.relatedTarget;var zone = event.target;zone.classList.remove('drop-target');drag.classList.remove('in_zone');drag.classList.remove('can-drop');},
|
||||
ondrop: function (event) {
|
||||
var drag = event.relatedTarget
|
||||
delete objs[drag.classList[0]][drag.id];
|
||||
drag.remove();
|
||||
console.log(objs);
|
||||
drag.classList.add('in_zone')
|
||||
drag.classList.remove('can-drop')
|
||||
},
|
||||
ondropdeactivate: function (event) {var zone = event.target;zone.classList.remove('drop-active');zone.classList.remove('drop-target');}
|
||||
})
|
||||
|
||||
interact('.dropzone').dropzone({
|
||||
accept: '.drag',
|
||||
overlap: 0.5,
|
||||
|
||||
ondragenter: function (event) {var drag = event.relatedTarget;var zone = event.target;zone.classList.add('drop-target');drag.classList.add('can-drop');},
|
||||
ondragleave: function (event) {var drag = event.relatedTarget;var zone = event.target;zone.classList.remove('drop-target');drag.classList.remove('in_zone');drag.classList.remove('can-drop');},
|
||||
ondrop: function (event) {
|
||||
var drag = event.relatedTarget
|
||||
objs[drag.classList[0]][drag.id] = {y:drag.getAttribute('data-y'),x:drag.getAttribute('data-x'),body:drag.innerHTML};
|
||||
// $.cookie("objs",JSON.stringify(objs));
|
||||
drag.classList.add('in_zone')
|
||||
drag.classList.remove('can-drop')
|
||||
},
|
||||
ondropdeactivate: function (event) {var zone = event.target;zone.classList.remove('drop-active');zone.classList.remove('drop-target');}
|
||||
})
|
||||
<%- include('./header.ejs') %>
|
||||
<script src="/lib/interact.min.js"></script>
|
||||
|
||||
|
||||
</script>
|
||||
<h1>none</h1>
|
||||
<h1>hello</h1>
|
||||
|
||||
|
||||
|
||||
<div id="drags"></div>
|
||||
|
||||
<div class="dropzone"></div>
|
||||
<div class="trash"></div>
|
||||
|
||||
<button onclick="add('cube')">add</button>
|
||||
<button onclick="save()">save</button>
|
||||
|
||||
|
||||
<script src="/lib/inter.js"></script>
|
||||
<%- include('./static/end.ejs') %>
|
||||
|
||||
|
||||
|
@ -1,7 +1,7 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<script src="/lib/interact.min.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>
|
||||
@ -13,5 +13,5 @@
|
||||
<!-- <script> document.querySelector("title").innerHTML += $.cookie("uuid"); </script> -->
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<script>if("<%= name %>" != "login") check_sid();</script>
|
||||
|
Reference in New Issue
Block a user