added grid

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"});
+                }
             })
         })
     }

public/lib/fn.js

@@ -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 ) {

public/lib/inter.js

@@ -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);
         }
     })
 }

views/admin.ejs

@@ -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') %>
 

views/header.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; */

views/main.ejs

@@ -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);

views/project.ejs

@@ -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="dropzone"></div> -->
-<div class="trash"></div>
 
-<div class="czones">
+
-    <div class="cube createzone"></div>
+<div class="inputs">
-    <div class="buble createzone"></div>
+    <div class="czones">
-    <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>
+        <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>
-    <div class="buble createzone"></div>
+    <div class="trash"></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>
 
+
+<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 %>";