puzzle/views/project.ejs

<style>
    .drag{
        height: 50px;
        width: 50px;
        position: absolute;
        text-align: center;
        margin: auto;
        z-index: 10;
    }

    .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;
    }
    .createzone {
        background-color: #bfe4ff;
        border: dashed 4px transparent;
        border-radius: 4px;
        height: 10px;
        margin: 10px;
        padding: 10px;
        width: 10px;
        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;
        text-align: center;
        /* z-index: -1; */
    }
    .czones{
        display: flex;
        margin: auto;
        /* justify-content: space-around; */
        flex-wrap: wrap;
        width: 80%;
        height: 100px;
        /* overflow-x: auto; */
    }

    .drop-active {
        border-color: #aaa;
    }

    .drop-target {
        background-color: #29e;
        border-color: #fff;
        border-style: solid;
    }

    #proj_top{
        margin: auto;
        width: 90%;
        display: flex;
        justify-content: space-around;
    }
    #proj_name{
        background-color: #aaa;
        border: 0px;
        text-align: center;
    }

    .inputs{
        display: flex;
        width: 80vw;
        margin: auto;
        padding-block: 20px;
        padding-bottom: 0px;
    }

    .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}) %>
<%- include('./header.ejs') %>
<script src="/lib/interact.js"></script>
<script src="/lib/html2canvas.js"></script>


<div id="drags">
    <!-- <div class="cube drag spawn" id="cube_0" style="transform: translate(197.7px, 57.8667px);" data-x="197.6999969482422" data-y="57.866668701171875" >cube</div>     -->
</div>
<section class="main">
    <div id="proj_top">
        <button id="proj_save_btn" onclick="document.getElementById('proj_save_btn').innerHTML='saving';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>

    
    <!-- <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" max="4.9" id="wall_height" value="1.9" 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="0" max="6.9" id="wall_width" value="3.9" oninput="wall_size_change('width')"> 
        </div>
    </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>
    <div class="trash">trash bin</div>
</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);
            let czones = document.getElementsByClassName("czones")[0];
            let czone =  document.createElement('div');
            czone.classList.add(value["name"]);
            czone.classList.add("createzone");
            czones.append(czone)
        });
        load_proj();
    })
</script>
<script>
    let proj_name = "<%= proj_name %>";
    // console.log(proj_name);
    document.getElementById("proj_name").value = proj_name;
    // drag_start();
</script>
<%- include('./static/end.ejs') %>