puzzle/views/project.ejs

<%- include('./static/start.ejs',{name:proj_name,async:true}) %>
<%- include('./header.ejs') %>
<script src="/lib/interact.js"></script>
<script src="/lib/html2canvas.js"></script>
<style>
    .drag{
        height: 50px;
        width: 50px;
        position: absolute;
        text-align: center;
        margin: auto;
        z-index: 10;
    }

    #drags{
        position: absolute;
        margin: auto;
    }

    .wall {
        /* border: dashed 4px transparent; */
        border-radius: 4px;
        transition: background-color 0.3s;
        position: absolute;
        inset: 0px;
        margin: 250px 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;
    }

    .createzone {
        background-color: #bfe4ff;
        border: dashed 4px transparent;
        border-radius: 4px;
        height: 22px;
        width: 22px;
        margin: 10px;
        padding: 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;
        margin-top: 50px;
    }
</style>


<div id="project_menu" class="cmenu"></div>

    
    <!-- <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"><%= lang("height") %> </label>
                <div id="wall_height_value">0</div>
            </div>
            <input type="range" step="0.1" min="0" max="5" id="wall_height" value="2" oninput="wall_size_change('height')" onchange="resize_drags()"> 
        </div>
        <div>
            <div style="display: flex;width: 150px;justify-content: space-between;">
                <label for="wall_width"><%= lang("width") %></label>
                <div id="wall_width_value">0</div>
            </div>
            <input type="range" step="0.1" min="0" max="7" id="wall_width" value="4" oninput="wall_size_change('width')" onchange="resize_drags()"> 
        </div>
    </div>
    <div class="czones"></div>
    <img class="trash" style="height: 100px; width: 100px;" src="/img/shadow-energy.gif" alt="<%= lang('black hole') %>">
</div>

<div id="drags"></div>
<div class="wall dropzone" id="wall"></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('div');
            czone.classList.add(value["name"]);
            czone.classList.add("createzone");
            czones.append(czone)
        });
        load_proj_cloud();
    })

    let proj_name = "<%= proj_name %>";
    if($.cookie("cache") ==null)$.cookie("cache","true",{path:"/proj;SameSite=Strict"});
    // console.log(proj_name);
    let menu = document.getElementById("project_menu");
    document.getElementById("top_panel_left").innerHTML = `<div id='proj_menu' class="menu_btn"><%= lang("project settings") %></div>`;
    menu.innerHTML += "<button id='proj_csave_btn' onclick='save_proj()'><%= lang(`save to cloud`) %></button> <br>";
    menu.innerHTML += "<button id='proj_cload_btn' onclick='load_proj_cloud()'><%=lang('load from cloud')%></button> <br>";
    menu.innerHTML += "<button id='proj_lsave_btn' onclick='save_proj_local()'><%=lang('save to local') %></button> <br>";
    menu.innerHTML += "<button id='proj_lload_btn' onclick='load_proj_local()'><%=lang('load from local')%></button> <br>";
    if ($.cookie("cache") == "false") menu.innerHTML += "<div id='cache_switch' title='<%=lang('cache_title')%>'><button onclick='cache_change(true);'><%=lang('cache_off')%></button></div>";
    else if ($.cookie("cache") == "true") menu.innerHTML += "<div id='cache_switch' title='<%=lang('cache_title')%>'><button onclick='cache_change(false);'><%=lang('cache_on')%></button></div>";


    function cache_change(to){
        let cache_switch = document.getElementById("cache_switch");
        if(to) {cache_switch.innerHTML = "<button onclick='cache_change(false);' title='<%=lang('cache_title')%>'><%=lang('cache_on')%></button></div>";$.cookie("cache","true",{path:"/proj;SameSite=Strict"});}
        else if(!to) {cache_switch.innerHTML = "<button onclick='cache_change(true);' title='<%=lang('cache_title')%>'><%=lang('cache_off')%></button></div>";$.cookie("cache","false",{path:"/proj;SameSite=Strict"});}
    }
    function save_proj(type){
        document.getElementById('top_panel_center').innerHTML=` <%=lang("saving")%> ${proj_name}`;
        save((res)=>{
            document.getElementById('top_panel_center').innerHTML=`<%=lang("saved")%> ${proj_name} <%=lang("to cloud")%>`;
            setTimeout((res)=>{
                document.getElementById("top_panel_center").innerText = `${proj_name} (<%=lang("cloud")%>)`;

            },3000)
        })
    }

    function save_proj_local(type){
        document.getElementById('top_panel_center').innerHTML=` <%=lang("saving")%> ${proj_name}`;
        save_local();
        document.getElementById('top_panel_center').innerHTML=`<%=lang("saved")%> ${proj_name} <%=lang("to local")%>`;
        setTimeout((res)=>{
            document.getElementById("top_panel_center").innerText = `${proj_name} (<%=lang("local")%>)`;
        },3000)
    }
    
    // drag_start();
    // console.log(px_ratio);
    $(window).resize(function(){isZooming();});

    function isZooming(){
        resize_drags();
    }
</script>
<%- include('./static/end.ejs') %>