{{ block content }}
<div class = "game-body" id = "game-body">
    <input type="submit" id="btn" value= "Press here" />
</div>

{{ endblock }}

{{ block script }}

<script>
    function Startleft() {
        let startleft = js_vars.Startleft;
        console.log('Startleft is '+startleft)
        var btn = document.getElementById("btn");
        btn.style.top = Math.floor((Math.random() * 90) + 1) + "vh";
        if (startleft === 1) {
            console.log('The program should start left.')
            btn.style.left = Math.floor((Math.random() * 20) + 1) + "vw";
        } else {
            console.log('The program should start right.')
            btn.style.left = Math.floor((Math.random() * 20) + 70) + "vw";
        }
    }
    Startleft()
</script>

{{ endblock }}

{{ block styles }}

<style>
    .debug-info{
        top: 120vh
    }
    .game-body{
        width: 100vw;
        height: 100vh;
        background-color: lightgray;
        position: absolute;
        transform: translate(-50%,-50%);
        top: 50vh;
        left: 50vw;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        flex-direction: column;
    }
    input[type='submit'] {
        position: absolute;
        font-family: 'Work Sans', sans-serif;
        font-size: 2.5vh;
        width: 10vw;
        height: 6vh;
        background-color: #2e4db4;
        color: white;
        border: 0px;
        border-radius: 3px;
        line-height: 6vh;
        cursor: pointer;
        text-align: center;
        text-decoration: none;
        box-sizing: border-box;
    }
</style>

{{ endblock }}