added grid
This commit is contained in:
parent
de5879069b
commit
c81c42df77
3
index.js
3
index.js
|
|
@ -241,6 +241,9 @@ app.post("/load_proj", (req,res) => {
|
|||
console.log(`${udata["uuid"]} loaded project ${projt["name"]} from ${cook["sid"]}`);
|
||||
res.send({out:"good",body:projt["body"]});
|
||||
}
|
||||
else{
|
||||
res.send({out:"bad proj"});
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
|
|
|||
BIN
public/img/bg1red.png
Normal file
BIN
public/img/bg1red.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
|
|
@ -115,6 +115,26 @@ function logout(redirect = true) {
|
|||
}
|
||||
}
|
||||
|
||||
function ask() {
|
||||
let name = prompt("please enter project name");
|
||||
if(name != "" && name != " "){
|
||||
return name;
|
||||
}
|
||||
}
|
||||
|
||||
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 ) {
|
||||
|
|
|
|||
|
|
@ -56,15 +56,22 @@ function load_proj(){
|
|||
load_local(JSON.parse(res["body"]));
|
||||
drag_start();
|
||||
}
|
||||
else if(res["out"] == "bad proj"){
|
||||
console.log("bad");
|
||||
save(()=>{
|
||||
goto("/proj/"+proj_name);
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function save(){
|
||||
function save(callback){
|
||||
// console.log(objs);
|
||||
$.post( "/save_proj", {proj:JSON.stringify(objs),name:proj_name})
|
||||
.done(function( res ) {
|
||||
if(res["out"] == "good"){
|
||||
console.log("good");
|
||||
if(callback) callback(res);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,66 @@
|
|||
<style>
|
||||
.nobj{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
<%- include('./static/start.ejs',{name:"admin",async: true}) %>
|
||||
<%- include('./header.ejs') %>
|
||||
|
||||
<section class="main">
|
||||
<h1>hello admin</h1>
|
||||
|
||||
<div class="nobj">
|
||||
<div class="img_preview">
|
||||
<input type="file" onchange="previewFile()" value=""><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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<script>
|
||||
function previewFile() {
|
||||
var preview = document.querySelector('img');
|
||||
var file = document.querySelector('input[type=file]').files[0];
|
||||
var reader = new FileReader();
|
||||
|
||||
reader.onloadend = function () {
|
||||
preview.src = reader.result;
|
||||
}
|
||||
|
||||
if (file) {
|
||||
reader.readAsDataURL(file);
|
||||
} else {
|
||||
preview.src = "";
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<!-- <iframe src="/reg" frameborder="0"></iframe> -->
|
||||
<%- include('./reg.ejs') %>
|
||||
|
||||
|
|
|
|||
|
|
@ -9,11 +9,18 @@
|
|||
}
|
||||
#top_panel_right{
|
||||
/* float: right; */
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
width: 20vw;
|
||||
}
|
||||
#top_panel_left{
|
||||
/* float: left; */
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
width: 20vw;
|
||||
}
|
||||
#top_panel{
|
||||
height: 20px;
|
||||
}
|
||||
/* button{
|
||||
/* margin-inline: 5px; */
|
||||
|
|
|
|||
|
|
@ -46,10 +46,14 @@
|
|||
|
||||
<section class="main">
|
||||
<div id="projs_div"></div>
|
||||
<button >new project</button>
|
||||
<button onclick="new_proj()">new project</button>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
function new_proj(){
|
||||
let name = ask();
|
||||
goto(`/proj/${name}`);
|
||||
}
|
||||
load_projs((projs)=>{
|
||||
projs.forEach(proj => {
|
||||
// console.log(proj);
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
position: absolute;
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.dropzone {
|
||||
|
|
@ -41,7 +42,7 @@
|
|||
height: 50px;
|
||||
width: 50px;
|
||||
transition: background-color 0.3s;
|
||||
z-index: -1;
|
||||
/* z-index: -1; */
|
||||
}
|
||||
.czones{
|
||||
display: flex;
|
||||
|
|
@ -49,6 +50,8 @@
|
|||
/* justify-content: space-around; */
|
||||
flex-wrap: wrap;
|
||||
width: 80%;
|
||||
height: 100px;
|
||||
/* overflow-x: auto; */
|
||||
}
|
||||
|
||||
.drop-active {
|
||||
|
|
@ -72,6 +75,29 @@
|
|||
border: 0px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.inputs{
|
||||
display: flex;
|
||||
width: 80vw;
|
||||
margin: auto;
|
||||
padding-block: 20px;
|
||||
}
|
||||
|
||||
.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}) %>
|
||||
|
|
@ -90,58 +116,38 @@
|
|||
</section>
|
||||
|
||||
|
||||
<div class="dropzone"></div>
|
||||
<div class="trash"></div>
|
||||
<!-- <div class="dropzone"></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 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 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 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 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 class="inputs">
|
||||
<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>
|
||||
<div class="trash"></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>
|
||||
<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>
|
||||
</div>
|
||||
<div class="wall dropzone"></div>
|
||||
|
||||
<script src="/lib/inter.js"></script>
|
||||
<script>
|
||||
let proj_name = "<%= proj_name %>";
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user